@banta/sdk 4.3.3 → 4.4.0

package/fesm2015/banta-sdk.js

@@ -1,14 +1,15 @@
 import { Observable, Subject, BehaviorSubject, Subscription } from 'rxjs';
 import { publish } from 'rxjs/operators';
-import { Component, Input, ViewChild, Pipe, NgModule, Output, ElementRef, HostBinding, Directive, NgZone, ContentChild, TemplateRef, Injectable, Inject } from '@angular/core';
+import { Component, Input, ViewChild, Pipe, Output, HostBinding, NgModule, ElementRef, Injectable, Directive, NgZone, ContentChild, TemplateRef, Inject } from '@angular/core';
 import { marked, Renderer } from 'marked';
 import { sanitize } from 'dompurify';
 import { DomSanitizer } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatButtonModule } from '@angular/material/button';
 import { Overlay, OverlayModule } from '@angular/cdk/overlay';
 import { PortalModule } from '@angular/cdk/portal';
-import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
@@ -18,7 +19,6 @@ import { CommentsOrder, CDNProvider, SocketRPC, RpcEvent, DurableSocket } from '
 import { ActivatedRoute } from '@angular/router';
 import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatMenuModule } from '@angular/material/menu';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { TextFieldModule } from '@angular/cdk/text-field';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { MatSelectModule } from '@angular/material/select';
@@ -222,10 +222,129 @@ BantaMarkdownToHtmlPipe.ctorParameters = () => [
     { type: DomSanitizer }
 ];
 
+class BantaAttachmentsComponent {
+    constructor() {
+        this.editing = false;
+        this.remove = new Subject();
+    }
+    removeAttachment(attachment) {
+        this.remove.next(attachment);
+    }
+    isImageAttachment(attachment) {
+        if (attachment.type.startsWith('image/'))
+            return true;
+        return false;
+    }
+    isCardAttachment(attachment) {
+        if (['card'].includes(attachment.type))
+            return true;
+        return false;
+    }
+    showLightbox(image) {
+        this.lightbox.open(image.url, this.attachments
+            .filter(x => x.type === 'image/png')
+            .map(x => x.url));
+    }
+    get inlineAttachments() {
+        return this.attachments.filter(x => x.type !== 'card' && (x.style === 'inline' || !x.style));
+    }
+    get blockAttachments() {
+        return this.attachments.filter(x => x.style === 'block' || x.type === 'card');
+    }
+}
+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>",
+                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}"]
+            },] }
+];
+BantaAttachmentsComponent.propDecorators = {
+    attachments: [{ type: Input }],
+    editing: [{ type: Input }],
+    lightbox: [{ type: ViewChild, args: ['lightbox',] }],
+    remove: [{ type: Output }]
+};
+
+class BantaTrustResourceUrlPipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(value) {
+        if (!value)
+            return undefined;
+        return this.sanitizer.bypassSecurityTrustResourceUrl(value);
+    }
+}
+BantaTrustResourceUrlPipe.decorators = [
+    { type: Pipe, args: [{
+                name: 'trustResourceUrl'
+            },] }
+];
+BantaTrustResourceUrlPipe.ctorParameters = () => [
+    { type: DomSanitizer }
+];
+
+class BantaAttachmentComponent {
+    constructor() {
+        this.loading = false;
+        this.editing = false;
+        this.loadingMessage = 'Please wait...';
+        this.error = false;
+        this.errorMessage = 'An error has occurred';
+        this.removed = new Subject();
+        this.activated = new Subject();
+    }
+    activate() {
+        this.activated.next();
+    }
+    remove() {
+        this.removed.next();
+    }
+    get isError() {
+        var _a, _b;
+        return this.error || ((_b = (_a = this.attachment) === null || _a === void 0 ? void 0 : _a.transientState) === null || _b === void 0 ? void 0 : _b.error);
+    }
+    get theErrorMessage() {
+        var _a, _b;
+        return this.errorMessage || ((_b = (_a = this.attachment) === null || _a === void 0 ? void 0 : _a.transientState) === null || _b === void 0 ? void 0 : _b.errorMessage);
+    }
+    get isLoading() {
+        var _a;
+        return this.loading || !this.attachment || ((_a = this.attachment.transientState) === null || _a === void 0 ? void 0 : _a.loading) || !this.attachment.url;
+    }
+    get isImageAttachment() {
+        if (this.attachment.type.startsWith('image/'))
+            return true;
+        return false;
+    }
+}
+BantaAttachmentComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'banta-attachment',
+                template: "<button type=\"button\" (click)=\"remove()\" mat-mini-fab color=\"primary\" class=\"remove-button\" *ngIf=\"editing\">\r\n    <mat-icon>close</mat-icon>\r\n</button>\r\n\r\n<ng-container *ngIf=\"isError\">\r\n    <mat-icon class=\"error\">close</mat-icon>\r\n    <em class=\"error\">{{theErrorMessage}}</em>\r\n</ng-container>\r\n<ng-container *ngIf=\"!isError\">\r\n    <ng-container *ngIf=\"isLoading\">\r\n        <mat-spinner></mat-spinner>\r\n        <em>{{loadingMessage}}</em>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!isLoading\">\r\n        <iframe \r\n            *ngIf=\"attachment.type === 'iframe'\"  \r\n            sandbox=\"allow-scripts allow-popups allow-same-origin allow-presentation\" \r\n            [src]=\"attachment.url | trustResourceUrl\"></iframe>\r\n        <a *ngIf=\"attachment.type === 'card'\" class=\"card\" [href]=\"attachment.url\" target=\"_blank\">\r\n            <img \r\n                *ngIf=\"attachment.card.image\"\r\n                class=\"thumbnail\" \r\n                [src]=\"attachment.card.image\"\r\n                />\r\n            <div class=\"description\">\r\n                <h1>{{attachment.card.title}}</h1>\r\n                {{attachment.card.description}}\r\n            </div>\r\n        </a>\r\n        <a class=\"image-attachment\" *ngIf=\"isImageAttachment\" href=\"javascript:;\" (click)=\"activate()\">\r\n            <img [src]=\"attachment.url\" alt=\"Image Attachment\">\r\n        </a>\r\n    </ng-container>\r\n</ng-container>",
+                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{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}a.card img{width:300px;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:10px}a.card h1{margin:0;font-size:30px}.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}"]
+            },] }
+];
+BantaAttachmentComponent.propDecorators = {
+    attachment: [{ type: Input }],
+    loading: [{ type: Input }],
+    editing: [{ type: Input }],
+    loadingMessage: [{ type: Input }],
+    error: [{ type: Input }],
+    errorMessage: [{ type: Input }],
+    removed: [{ type: Output }],
+    activated: [{ type: Output }],
+    isLoading: [{ type: HostBinding, args: ['class.loading',] }]
+};
+
 const COMPONENTS = [
     TimestampComponent,
     LightboxComponent,
-    BantaMarkdownToHtmlPipe
+    BantaMarkdownToHtmlPipe,
+    BantaTrustResourceUrlPipe,
+    BantaAttachmentComponent,
+    BantaAttachmentsComponent
 ];
 class BantaCommonModule {
 }
@@ -234,7 +353,9 @@ BantaCommonModule.decorators = [
                 declarations: COMPONENTS,
                 imports: [
                     CommonModule,
-                    MatIconModule
+                    MatIconModule,
+                    MatProgressSpinnerModule,
+                    MatButtonModule
                 ],
                 exports: COMPONENTS
             },] }
@@ -7003,9 +7124,99 @@ ChatMessageComponent.propDecorators = {
     upvoted: [{ type: Output }]
 };
 
+const URL_REGEX = new RegExp('(?!mailto:)(?:(?:http|https|ftp)://)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?', 'ig');
+class UrlAttachmentScraper {
+    findFragments(message) {
+        var _a;
+        // If a message already has a URL attachment, don't add another one.
+        if (message.attachments && message.attachments.filter(x => x.type === 'url').length > 0)
+            return null;
+        return (Array.from((_a = message.message.match(URL_REGEX)) !== null && _a !== void 0 ? _a : []))
+            .reduce((a, item) => (a.includes(item) ? undefined : a.push(item), a), [])
+            .map(url => ({
+            text: url,
+            offset: message.message.indexOf(url),
+            type: 'url'
+        }));
+    }
+}
+class GiphyAttachmentResolver {
+    resolveFragment(message, fragment) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (fragment.type === 'url' && fragment.text.startsWith('https://giphy.com/gifs')) {
+                let gifId = (_a = /[^-\/]+$/.exec(fragment.text)) === null || _a === void 0 ? void 0 : _a.toString();
+                if (!gifId)
+                    return null;
+                return {
+                    type: 'iframe',
+                    url: `https://giphy.com/embed/${gifId}`,
+                    style: 'inline'
+                };
+            }
+            return null;
+        });
+    }
+}
+class YouTubeAttachmentResolver {
+    resolveFragment(message, fragment) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (fragment.type !== 'url')
+                return null;
+            let videoId;
+            if (fragment.text.match(/https?:\/\/(www\.)?youtube.com\/watch\?v=/)) {
+                let match = /watch\?v=([^&]+)/.exec(fragment.text);
+                if (match) {
+                    videoId = match[1];
+                }
+            }
+            if (videoId) {
+                return {
+                    type: 'iframe',
+                    url: `https://www.youtube.com/embed/${videoId}`,
+                    style: 'block'
+                };
+            }
+            return null;
+        });
+    }
+}
+class UrlAttachmentResolver {
+    constructor(backend) {
+        this.backend = backend;
+    }
+    resolveFragment(message, fragment) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (fragment.type !== 'url')
+                return null;
+            let urlCard = yield this.backend.getCardForUrl(fragment.text);
+            if (urlCard) {
+                return {
+                    type: 'card',
+                    url: fragment.text,
+                    card: urlCard,
+                    style: 'block'
+                };
+            }
+        });
+    }
+}
+UrlAttachmentResolver.decorators = [
+    { type: Injectable }
+];
+UrlAttachmentResolver.ctorParameters = () => [
+    { type: ChatBackendBase }
+];
+
 class ChatBackendBase {
     constructor() {
         this._userChanged = new BehaviorSubject(null);
+        this._attachmentScrapers = [];
+        this._attachmentResolvers = [];
+        this.registerAttachmentScraper(new UrlAttachmentScraper());
+        this.registerAttachmentResolver(new GiphyAttachmentResolver());
+        this.registerAttachmentResolver(new YouTubeAttachmentResolver());
+        this.registerAttachmentResolver(new UrlAttachmentResolver(this));
     }
     get userChanged() {
         return this._userChanged;
@@ -7017,6 +7228,18 @@ class ChatBackendBase {
     get user() {
         return this._user;
     }
+    registerAttachmentScraper(scraper) {
+        this._attachmentScrapers.push(scraper);
+    }
+    registerAttachmentResolver(resolver) {
+        this._attachmentResolvers.push(resolver);
+    }
+    get attachmentScrapers() {
+        return this._attachmentScrapers.slice();
+    }
+    get attachmentResolvers() {
+        return this._attachmentResolvers.slice();
+    }
 }
 
 class LiveChatMessageComponent {
@@ -7789,11 +8012,6 @@ class CommentComponent {
         this._avatarSelected.next(user);
         this.selectUser();
     }
-    showLightbox(image) {
-        this.lightbox.open(image.url, this.message.attachments
-            .filter(x => x.type === 'image/png')
-            .map(x => x.url));
-    }
     avatarForUser(user) {
         let url = this.genericAvatarUrl;
         if (user && user.avatarUrl) {
@@ -7809,8 +8027,8 @@ 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</mat-menu>\r\n\r\n<div class=\"message-content\">\r\n    <div class=\"user\">\r\n        <a\r\n            href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"selectAvatar(message.user)\"\r\n            [style.background-image]=\"avatarForUser(message.user)\"></a>\r\n        <a href=\"javascript:;\" class=\"display-name\" (click)=\"selectUser()\">{{message.user.displayName}}</a>\r\n        <a href=\"javascript:;\" class=\"username\" (click)=\"selectUsername(message.user)\">@{{message.user.username}}</a>\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 class=\"content\" *ngIf=\"!editing\">\r\n        <span class=\"banta-message-content\" [innerHTML]=\"message.message | markdownToHtml\"></span>\r\n\r\n        <ng-container *ngIf=\"message.attachments?.length > 0\">\r\n            <banta-lightbox #lightbox></banta-lightbox>\r\n            <div class=\"attachments-row\" [class.single]=\"message.attachments?.length === 1\" *ngIf=\"message.attachments && message.attachments?.length > 0\">\r\n                <a \r\n                    href=\"javascript:;\" \r\n                    (click)=\"showLightbox(attachment)\"\r\n                    *ngFor=\"let attachment of message.attachments\" \r\n                    >\r\n                    <img [src]=\"attachment.url\" alt=\"\">\r\n                </a>\r\n            </div>\r\n        </ng-container>\r\n\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\"></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                [disabled]=\"!permissions?.canLike\" \r\n                [matTooltip]=\"upvoting ? 'Please wait...' : 'Like'\" \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}.user{position:relative;margin:1em 0 0;display:flex;align-items:center}.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}.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}"]
+                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</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\"></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                [disabled]=\"!permissions?.canLike\" \r\n                [matTooltip]=\"upvoting ? 'Please wait...' : 'Like'\" \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}"]
             },] }
 ];
 CommentComponent.propDecorators = {
@@ -7835,8 +8053,7 @@ CommentComponent.propDecorators = {
     editEnded: [{ type: Output }],
     shared: [{ type: Output }],
     genericAvatarUrl: [{ type: Input }],
-    commentId: [{ type: HostBinding, args: ['attr.data-comment-id',] }],
-    lightbox: [{ type: ViewChild, args: ['lightbox',] }]
+    commentId: [{ type: HostBinding, args: ['attr.data-comment-id',] }]
 };
 
 class CommentViewComponent {
@@ -8580,7 +8797,7 @@ 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 Comments</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            [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                    [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                    (editAvatarSelected)=\"showEditAvatar()\"\r\n                    [source]=\"selectedMessageThread\"\r\n                    [maxLength]=\"maxCommentLength\"\r\n                    [canComment]=\"source?.permissions?.canPost\"\r\n                    [signInLabel]=\"signInLabel\"\r\n                    [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n                    (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n                    [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n                    [user]=\"user\"\r\n                    [label]=\"postReplyLabel\"\r\n                    [submit]=\"sendReply\"\r\n                    [allowAttachments]=\"allowAttachments\"\r\n                    [genericAvatarUrl]=\"genericAvatarUrl\"\r\n                    >\r\n                    <ng-container *ngTemplateOutlet=\"sendReplyOptionsTemplate\"></ng-container>\r\n                </banta-comment-field>\r\n            </ng-container>\r\n        </div>\r\n    </div>\r\n\r\n    <div class=\"main\" [class.hidden]=\"selectedMessage && !useInlineReplies\">\r\n        <banta-comment-field\r\n            [source]=\"source\"\r\n            [user]=\"user\"\r\n            [sendLabel]=\"sendLabel\"\r\n            [sendingLabel]=\"sendingLabel\"\r\n            [signInLabel]=\"signInLabel\"\r\n            [canComment]=\"source?.permissions?.canPost\"\r\n            [hashtags]=\"hashtags\"\r\n            [participants]=\"participants\"\r\n            [label]=\"postCommentLabel\"\r\n            [maxLength]=\"maxCommentLength\"\r\n            (editAvatarSelected)=\"showEditAvatar()\"\r\n            (signInSelected)=\"showSignIn()\"\r\n            [permissionDeniedLabel]=\"source?.permissions?.canPostErrorMessage || permissionDeniedLabel\"\r\n            (permissionDeniedError)=\"handlePermissionDenied($event)\"\r\n            [shouldInterceptMessageSend]=\"shouldInterceptMessageSend\"\r\n            [submit]=\"sendMessage\"\r\n            [allowAttachments]=\"allowAttachments\"\r\n            [genericAvatarUrl]=\"genericAvatarUrl\"\r\n            >\r\n        \r\n        </banta-comment-field>\r\n\r\n        <banta-comment-sort\r\n            [(sort)]=\"sortOrder\"></banta-comment-sort>\r\n\r\n        <banta-comment-view\r\n            [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            (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}banta-comment-sort{margin:0;width:100%}}:host-context(.banta-mobile) .focused .replies{margin-left:0}:host-context(.banta-mobile) banta-comment-sort{margin:0;width:100%}"]
+                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%}"]
             },] }
 ];
 BantaCommentsComponent.ctorParameters = () => [
@@ -8694,14 +8911,17 @@ LiveCommentComponent.propDecorators = {
 };
 
 class CommentFieldComponent {
-    constructor() {
+    constructor(chatBackend) {
+        this.chatBackend = chatBackend;
         this.canComment = true;
         this.allowAttachments = false;
         this.signInSelected = new Subject();
         this.editAvatarSelected = new Subject();
         this.sending = false;
         this.expandError = false;
-        this.text = '';
+        this._text = '';
+        this.attachmentScrapeDebounce = 1500;
+        this.attachmentFragments = new Map();
         this.sendLabel = 'Send';
         this.sendingLabel = 'Sending';
         this.label = 'Post a comment';
@@ -8717,6 +8937,79 @@ class CommentFieldComponent {
         this.autoCompleteSelected = 0;
         this.chatMessageAttachments = [];
     }
+    get text() {
+        return this._text;
+    }
+    set text(value) {
+        this._text = value;
+        clearTimeout(this.attachmentScrapeTimeout);
+        this.attachmentScrapeTimeout = setTimeout(() => this.scrapeAttachments(), this.attachmentScrapeDebounce);
+    }
+    scrapeAttachments() {
+        let message = {
+            likes: 0,
+            message: this._text,
+            sentAt: undefined,
+            user: this.user,
+            attachments: this.chatMessageAttachments
+        };
+        let foundFragments = [];
+        for (let scraper of this.chatBackend.attachmentScrapers) {
+            let fragments = scraper.findFragments(message);
+            if (!fragments) {
+                console.error(`Attachment fragment scraper ${scraper.constructor.name} is implemented incorrectly: Returned null instead of array`);
+                continue;
+            }
+            for (let fragment of fragments) {
+                foundFragments.push(fragment.text);
+                if (!this.attachmentFragments.has(fragment.text)) {
+                    console.log(`Scraped new fragment:`);
+                    console.dir(fragment);
+                    this.attachmentFragments.set(fragment.text, {
+                        fragment,
+                        resolution: undefined
+                    });
+                }
+            }
+        }
+        // Remove fragments that are no longer in the message.
+        let removedFragments = [];
+        for (let [key] of this.attachmentFragments) {
+            if (!foundFragments.includes(key))
+                removedFragments.push(key);
+        }
+        for (let removedFragment of removedFragments) {
+            console.log(`Removed fragment: ${removedFragment}`);
+            this.attachmentFragments.delete(removedFragment);
+        }
+        // Process any fragments that are not yet resolved (or being 
+        // resolved)
+        for (let [key, state] of this.attachmentFragments) {
+            if (state.resolution)
+                continue;
+            state.resolution = new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
+                console.log(`Resolving fragment ${key}`);
+                for (let resolver of this.chatBackend.attachmentResolvers) {
+                    console.log(`- Trying resolver ${resolver.constructor.name}...`);
+                    try {
+                        let attachment = yield resolver.resolveFragment(message, state.fragment);
+                        if (attachment) {
+                            console.log(`Resolved fragment ${key} into attachment:`);
+                            console.dir(attachment);
+                            this.chatMessageAttachments.push(attachment);
+                            resolve(attachment);
+                            break;
+                        }
+                    }
+                    catch (e) {
+                        console.error(`Caught error during attachment resolver ${resolver.constructor.name}:`);
+                        console.error(e);
+                        continue;
+                    }
+                }
+            }));
+        }
+    }
     get userAvatarUrl() {
         var _a;
         return ((_a = this.user) === null || _a === void 0 ? void 0 : _a.avatarUrl) || this.genericAvatarUrl;
@@ -8944,8 +9237,10 @@ class CommentFieldComponent {
             this.chatMessageAttachments = this.chatMessageAttachments.filter(x => x !== attachment);
         }, 3000);
     }
-    removeAttachment(index) {
-        this.chatMessageAttachments.splice(index, 1);
+    removeAttachment(attachment) {
+        let index = this.chatMessageAttachments.indexOf(attachment);
+        if (index >= 0)
+            this.chatMessageAttachments.splice(index, 1);
     }
     alertError() {
         if (!this.sendError)
@@ -8956,10 +9251,13 @@ class CommentFieldComponent {
 CommentFieldComponent.decorators = [
     { type: Component, args: [{
                 selector: 'banta-comment-field',
-                template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    <div class=\"avatar-container\">\r\n        <a  href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"showEditAvatar()\"\r\n            [style.background-image]=\"'url(' + userAvatarUrl + ')'\"\r\n            ></a>\r\n    </div>\r\n    <div class=\"text-container\">\r\n        <div class=\"field-container\">\r\n            <div class=\"field-row\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n                    <mat-label>{{label}}</mat-label>\r\n                    <textarea\r\n                        #textarea\r\n                        name=\"message\"\r\n                        [placeholder]=\"placeholder\"\r\n                        matInput\r\n                        cdkTextareaAutosize\r\n                        [maxlength]=\"maxLength\"\r\n                        (keydown)=\"onKeyDown($event)\"\r\n                        (blur)=\"onBlur()\"\r\n                        [disabled]=\"sending\"\r\n                        [(ngModel)]=\"text\"></textarea>\r\n                </mat-form-field>\r\n                <div class=\"options-line\">\r\n                    <mat-spinner *ngIf=\"sending\" class=\"icon loading\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                    <div *ngIf=\"sendError\" class=\"error-message\" [class.expanded]=\"expandError\" [matTooltip]=\"sendError.message\" (click)=\"alertError()\">\r\n                        <mat-icon *ngIf=\"sendError\">error</mat-icon>\r\n                        {{sendError.message}}\r\n                    </div>\r\n                    <div class=\"spacer\"></div>\r\n                    <div class=\"custom\">\r\n                        <ng-content></ng-content>\r\n                    </div>\r\n                    <banta-attachment-button \r\n                        *ngIf=\"allowAttachments\"\r\n                        (addedAttachment)=\"addedAttachment($event)\"\r\n                        (attachmentError)=\"attachmentError($event)\"\r\n                        ></banta-attachment-button>\r\n                    <emoji-selector-button (selected)=\"insertEmoji($event)\"></emoji-selector-button>\r\n                </div>\r\n                \r\n            </div>\r\n            <div #autocompleteContainer class=\"autocomplete-container\">\r\n                <div #autocomplete class=\"autocomplete\" [class.visible]=\"autocompleteVisible\">\r\n\r\n                    <div>\r\n                        <strong>{{completionPrefix}}</strong>...\r\n                    </div>\r\n                    <a\r\n                        mat-button\r\n                        *ngFor=\"let option of autocompleteOptions; index as index\"\r\n                        (click)=\"activateAutoComplete(option)\"\r\n                        [class.active]=\"autoCompleteSelected === index\"\r\n                        >\r\n                        {{option.label}}\r\n                    </a>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"chatMessageAttachments && chatMessageAttachments.length\" class=\"message-attachments-container\">\r\n                <div *ngFor=\"let attachment of chatMessageAttachments; index as attachmentIndex\"\r\n                    class=\"message-attachment\" [class.with-border]=\"!attachment.url\">\r\n                    <button (click)=\"removeAttachment(attachmentIndex)\" mat-mini-fab color=\"primary\" class=\"remove-img\">\r\n                        <mat-icon>close</mat-icon>\r\n                    </button>\r\n                    <ng-container *ngIf=\"attachment.transientState?.error\">\r\n                        <mat-icon class=\"error\">close</mat-icon>\r\n                        <em class=\"error\">{{attachment.transientState?.errorMessage || 'Error'}}</em>\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"!attachment.transientState?.error\">\r\n                        <ng-container *ngIf=\"attachment.transientState?.uploading\">\r\n                            <mat-spinner></mat-spinner>\r\n                            <em>Uploading...</em>\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"!attachment.transientState?.uploading\">\r\n                            <img [src]=\"attachment.url\" alt=\"Message Attachment\">\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n\r\n        </div>\r\n    </div>\r\n    <div class=\"actions\">\r\n        <ng-container *ngIf=\"!user\">\r\n            <button\r\n                mat-raised-button\r\n                color=\"primary\"\r\n                type=\"button\"\r\n                (click)=\"showSignIn()\"\r\n                >{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button\r\n                mat-raised-button\r\n                class=\"send\"\r\n                color=\"primary\"\r\n                [disabled]=\"!sendButtonEnabled\"\r\n                >\r\n                <ng-container *ngIf=\"canComment\">\r\n                    <mat-icon *ngIf=\"!sending\">chevron_right</mat-icon>\r\n                    <mat-spinner *ngIf=\"sending\" class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                </ng-container>\r\n                <span class=\"label\">\r\n                    <ng-container *ngIf=\"!canComment\">\r\n                        {{permissionDeniedLabel}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"canComment\">\r\n                        <ng-container *ngIf=\"!sending\">\r\n                            {{sendLabel}}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"sending\">\r\n                            {{sendingLabel}}\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </span>\r\n            </button>\r\n        </ng-container>\r\n    </div>\r\n</form>",
-                styles: ["@-webkit-keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}:host{margin:0 2em 0 0;display:block;-webkit-animation-name:comment-field-appear;animation-name:comment-field-appear;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both;position:relative;z-index:20}.avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end;flex-shrink:0}.avatar-container .avatar{width:48px;height:48px;background:#000;border-radius:100%;background-size:cover;background-repeat:no-repeat;background-position:50%;margin-top:.75em;margin-right:.75em}form{display:flex;padding:.5em;align-items:center}form .text-container{position:relative;display:flex;flex-grow:1;min-width:0}form .text-container textarea{font-size:14pt;width:100%}form .text-container textarea[disabled]{opacity:.5}form .text-container mat-spinner.loading{position:absolute;left:.5em;bottom:.5em}form .text-container .options-line{display:flex;align-items:center}form .text-container .options-line>*{flex-shrink:0}form .text-container .options-line .error-message{left:.5em;bottom:.5em;color:#683333;overflow-x:hidden;max-width:1.5em;white-space:nowrap;transition:max-width 2s ease-in-out;text-overflow:ellipsis;overflow:hidden;flex-shrink:1}form .text-container .options-line .error-message.expanded,form .text-container .options-line .error-message:hover{max-width:100%}form .text-container .options-line .error-message mat-icon{vertical-align:middle}form input[type=text]{background:#000;color:#fff;border:1px solid #333;width:100%;height:1em}form .actions{margin-left:1em;flex-shrink:0}form button{display:block;margin:0 0 0 auto}form.new-message{display:flex;align-items:flex-start;min-width:0}form.new-message .field-container{flex-grow:1;display:flex;flex-direction:column;min-width:0}form.new-message mat-form-field{width:100%}form.new-message mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}form.new-message button{margin:1.25em 0 0}button.send{min-width:9em}textarea{max-height:7em}.autocomplete-container{width:calc(100% - 2em);position:relative;pointer-events:none;top:-2em}.autocomplete{visibility:hidden;pointer-events:none;position:absolute;background:#333;padding:.5em;display:flex;flex-direction:column;z-index:100}.autocomplete.visible{visibility:visible;pointer-events:auto}.autocomplete a{width:100%;text-align:left}.autocomplete a.active{background:#555}@media (max-width:500px){:host{margin:0}.avatar-container{width:auto;flex-shrink:0}.avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}button.send{min-width:auto;margin-top:1.5em}button.send .label{display:none}}:host-context(.banta-mobile) :host{margin:0}:host-context(.banta-mobile) .avatar-container{width:auto;flex-shrink:0}:host-context(.banta-mobile) .avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}:host-context(.banta-mobile) button.send{min-width:auto;margin-top:1.5em}:host-context(.banta-mobile) button.send .label{display:none}.message-attachments-container{display:flex;gap:20px}.message-attachments-container .message-attachment{width:300px;position:relative;text-align:center}.message-attachments-container .message-attachment.with-border{outline:1px solid #333;padding:1em 0}.message-attachments-container .message-attachment mat-spinner{display:block;margin:0 auto .5em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.message-attachments-container .message-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}.message-attachments-container .message-attachment .error{color:#b76363}.message-attachments-container .message-attachment img{width:300px;border-radius:10px}.message-attachments-container .message-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}.field-row{position:relative}"]
+                template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    <div class=\"avatar-container\">\r\n        <a  href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"showEditAvatar()\"\r\n            [style.background-image]=\"'url(' + userAvatarUrl + ')'\"\r\n            ></a>\r\n    </div>\r\n    <div class=\"text-container\">\r\n        <div class=\"field-container\">\r\n            <div class=\"field-row\">\r\n                <mat-form-field appearance=\"outline\" floatLabel=\"always\">\r\n                    <mat-label>{{label}}</mat-label>\r\n                    <textarea\r\n                        #textarea\r\n                        name=\"message\"\r\n                        [placeholder]=\"placeholder\"\r\n                        matInput\r\n                        cdkTextareaAutosize\r\n                        [maxlength]=\"maxLength\"\r\n                        (keydown)=\"onKeyDown($event)\"\r\n                        (blur)=\"onBlur()\"\r\n                        [disabled]=\"sending\"\r\n                        [(ngModel)]=\"text\"></textarea>\r\n                </mat-form-field>\r\n                <div class=\"options-line\">\r\n                    <mat-spinner *ngIf=\"sending\" class=\"icon loading\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                    <div *ngIf=\"sendError\" class=\"error-message\" [class.expanded]=\"expandError\" [matTooltip]=\"sendError.message\" (click)=\"alertError()\">\r\n                        <mat-icon *ngIf=\"sendError\">error</mat-icon>\r\n                        {{sendError.message}}\r\n                    </div>\r\n                    <div class=\"spacer\"></div>\r\n                    <div class=\"custom\">\r\n                        <ng-content></ng-content>\r\n                    </div>\r\n                    <banta-attachment-button \r\n                        *ngIf=\"allowAttachments\"\r\n                        (addedAttachment)=\"addedAttachment($event)\"\r\n                        (attachmentError)=\"attachmentError($event)\"\r\n                        ></banta-attachment-button>\r\n                    <emoji-selector-button (selected)=\"insertEmoji($event)\"></emoji-selector-button>\r\n                </div>\r\n                \r\n            </div>\r\n            <div #autocompleteContainer class=\"autocomplete-container\">\r\n                <div #autocomplete class=\"autocomplete\" [class.visible]=\"autocompleteVisible\">\r\n\r\n                    <div>\r\n                        <strong>{{completionPrefix}}</strong>...\r\n                    </div>\r\n                    <a\r\n                        mat-button\r\n                        *ngFor=\"let option of autocompleteOptions; index as index\"\r\n                        (click)=\"activateAutoComplete(option)\"\r\n                        [class.active]=\"autoCompleteSelected === index\"\r\n                        >\r\n                        {{option.label}}\r\n                    </a>\r\n                </div>\r\n            </div>\r\n\r\n            <banta-attachments \r\n                [attachments]=\"chatMessageAttachments\"\r\n                [editing]=\"true\"\r\n                (remove)=\"removeAttachment($event)\"\r\n                ></banta-attachments>\r\n        </div>\r\n    </div>\r\n    <div class=\"actions\">\r\n        <ng-container *ngIf=\"!user\">\r\n            <button\r\n                mat-raised-button\r\n                color=\"primary\"\r\n                type=\"button\"\r\n                (click)=\"showSignIn()\"\r\n                >{{signInLabel}}</button>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"user\">\r\n            <button\r\n                mat-raised-button\r\n                class=\"send\"\r\n                color=\"primary\"\r\n                [disabled]=\"!sendButtonEnabled\"\r\n                >\r\n                <ng-container *ngIf=\"canComment\">\r\n                    <mat-icon *ngIf=\"!sending\">chevron_right</mat-icon>\r\n                    <mat-spinner *ngIf=\"sending\" class=\"icon\" diameter=\"18\" strokeWidth=\"2\"></mat-spinner>\r\n                </ng-container>\r\n                <span class=\"label\">\r\n                    <ng-container *ngIf=\"!canComment\">\r\n                        {{permissionDeniedLabel}}\r\n                    </ng-container>\r\n                    <ng-container *ngIf=\"canComment\">\r\n                        <ng-container *ngIf=\"!sending\">\r\n                            {{sendLabel}}\r\n                        </ng-container>\r\n                        <ng-container *ngIf=\"sending\">\r\n                            {{sendingLabel}}\r\n                        </ng-container>\r\n                    </ng-container>\r\n                </span>\r\n            </button>\r\n        </ng-container>\r\n    </div>\r\n</form>",
+                styles: ["@-webkit-keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes comment-field-appear{0%{transform:translateY(128px);opacity:0}to{transform:translate(0);opacity:1}}:host{margin:0 2em 0 0;display:block;-webkit-animation-name:comment-field-appear;animation-name:comment-field-appear;-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both;position:relative;z-index:20}.avatar-container{width:calc(48px + 1.75em);display:flex;justify-content:flex-end;flex-shrink:0}.avatar-container .avatar{width:48px;height:48px;background:#000;border-radius:100%;background-size:cover;background-repeat:no-repeat;background-position:50%;margin-top:.75em;margin-right:.75em}form{display:flex;padding:.5em;align-items:center}form .text-container{position:relative;display:flex;flex-grow:1;min-width:0}form .text-container textarea{font-size:14pt;width:100%}form .text-container textarea[disabled]{opacity:.5}form .text-container mat-spinner.loading{position:absolute;left:.5em;bottom:.5em}form .text-container .options-line{display:flex;align-items:center}form .text-container .options-line>*{flex-shrink:0}form .text-container .options-line .error-message{left:.5em;bottom:.5em;color:#683333;overflow-x:hidden;max-width:1.5em;white-space:nowrap;transition:max-width 2s ease-in-out;text-overflow:ellipsis;overflow:hidden;flex-shrink:1}form .text-container .options-line .error-message.expanded,form .text-container .options-line .error-message:hover{max-width:100%}form .text-container .options-line .error-message mat-icon{vertical-align:middle}form input[type=text]{background:#000;color:#fff;border:1px solid #333;width:100%;height:1em}form .actions{margin-left:1em;flex-shrink:0}form button{display:block;margin:0 0 0 auto}form.new-message{display:flex;align-items:flex-start;min-width:0}form.new-message .field-container{flex-grow:1;display:flex;flex-direction:column;min-width:0}form.new-message mat-form-field{width:100%}form.new-message mat-form-field ::ng-deep .mat-form-field-wrapper{padding-bottom:0}form.new-message button{margin:1.25em 0 0}button.send{min-width:9em}textarea{max-height:7em}.autocomplete-container{width:calc(100% - 2em);position:relative;pointer-events:none;top:-2em}.autocomplete{visibility:hidden;pointer-events:none;position:absolute;background:#333;padding:.5em;display:flex;flex-direction:column;z-index:100}.autocomplete.visible{visibility:visible;pointer-events:auto}.autocomplete a{width:100%;text-align:left}.autocomplete a.active{background:#555}@media (max-width:500px){:host{margin:0}.avatar-container{width:auto;flex-shrink:0}.avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}button.send{min-width:auto;margin-top:1.5em}button.send .label{display:none}}:host-context(.banta-mobile) :host{margin:0}:host-context(.banta-mobile) .avatar-container{width:auto;flex-shrink:0}:host-context(.banta-mobile) .avatar-container .avatar{width:32px;height:32px;margin-top:1.5em}:host-context(.banta-mobile) button.send{min-width:auto;margin-top:1.5em}:host-context(.banta-mobile) button.send .label{display:none}.image-attachments-container{display:flex;gap:20px}.image-attachments-container .image-attachment{width:300px;position:relative;text-align:center}.image-attachments-container .image-attachment.with-border{outline:1px solid #333;padding:1em 0}.image-attachments-container .image-attachment mat-spinner{display:block;margin:0 auto .5em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.image-attachments-container .image-attachment mat-icon.error{display:block;font-size:48px;width:48px;height:48px;margin:0 auto .5em}.image-attachments-container .image-attachment .error{color:#b76363}.image-attachments-container .image-attachment img{width:300px;border-radius:10px}.image-attachments-container .image-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}.card-attachment,.field-row{position:relative}.card-attachment a{display:flex;align-items:flex-start;gap:1em;width:100%;border:1px solid #666;border-radius:4px;padding:2em;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}.card-attachment .remove-img{position:absolute;right:10px;top:10px;margin:0}"]
             },] }
 ];
+CommentFieldComponent.ctorParameters = () => [
+    { type: ChatBackendBase }
+];
 CommentFieldComponent.propDecorators = {
     source: [{ type: Input }],
     user: [{ type: Input }],
@@ -9340,6 +9638,24 @@ class ChatBackend extends ChatBackendBase {
     watchMessage(message, handler) {
         throw new Error("Method not implemented.");
     }
+    getCardForUrl(url) {
+        return __awaiter(this, void 0, void 0, function* () {
+            let response = yield fetch(`${this.serviceUrl}/urls`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    url
+                })
+            });
+            if (response.status == 404)
+                return null;
+            if (response.status >= 400)
+                throw new Error(`Failed to retrieve URL card: ${response.status}. Body: '${yield response.text()}'`);
+            return yield response.json();
+        });
+    }
 }
 ChatBackend.decorators = [
     { type: Injectable }