@banta/sdk 4.3.2 → 4.4.1

package/bundles/banta-sdk.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('rxjs/operators'), require('@angular/core'), require('marked'), require('dompurify'), require('@angular/platform-browser'), require('@angular/common'), require('@angular/material/icon'), require('@angular/material/button'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/forms'), require('@angular/material/dialog'), require('@banta/common'), require('@angular/router'), require('@angular/material/snack-bar'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/cdk/text-field'), require('@angular/material/tooltip'), require('@angular/material/select')) :
-    typeof define === 'function' && define.amd ? define('@banta/sdk', ['exports', 'rxjs', 'rxjs/operators', '@angular/core', 'marked', 'dompurify', '@angular/platform-browser', '@angular/common', '@angular/material/icon', '@angular/material/button', '@angular/material/form-field', '@angular/material/input', '@angular/forms', '@angular/material/dialog', '@banta/common', '@angular/router', '@angular/material/snack-bar', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/cdk/text-field', '@angular/material/tooltip', '@angular/material/select'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.banta = global.banta || {}, global.banta.sdk = {}), global.rxjs, global.rxjs.operators, global.ng.core, global.marked, global.DOMPurify, global.ng.platformBrowser, global.ng.common, global.ng.material.icon, global.ng.material.button, global.ng.material.formField, global.ng.material.input, global.ng.forms, global.ng.material.dialog, global.common$1, global.ng.router, global.ng.material.snackBar, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.cdk.textField, global.ng.material.tooltip, global.ng.material.select));
-}(this, (function (exports, rxjs, operators, core, marked, DOMPurify, platformBrowser, common, icon, button, formField, input, forms, dialog, common$1, router, snackBar, menu, progressSpinner, textField, tooltip, select) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('rxjs/operators'), require('@angular/core'), require('marked'), require('dompurify'), require('@angular/platform-browser'), require('@angular/common'), require('@angular/material/icon'), require('@angular/material/progress-spinner'), require('@angular/material/button'), require('@angular/cdk/overlay'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/forms'), require('@angular/cdk/portal'), require('@angular/material/dialog'), require('@banta/common'), require('@angular/router'), require('@angular/material/snack-bar'), require('@angular/material/menu'), require('@angular/cdk/text-field'), require('@angular/material/tooltip'), require('@angular/material/select')) :
+    typeof define === 'function' && define.amd ? define('@banta/sdk', ['exports', 'rxjs', 'rxjs/operators', '@angular/core', 'marked', 'dompurify', '@angular/platform-browser', '@angular/common', '@angular/material/icon', '@angular/material/progress-spinner', '@angular/material/button', '@angular/cdk/overlay', '@angular/material/form-field', '@angular/material/input', '@angular/forms', '@angular/cdk/portal', '@angular/material/dialog', '@banta/common', '@angular/router', '@angular/material/snack-bar', '@angular/material/menu', '@angular/cdk/text-field', '@angular/material/tooltip', '@angular/material/select'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.banta = global.banta || {}, global.banta.sdk = {}), global.rxjs, global.rxjs.operators, global.ng.core, global.marked, global.DOMPurify, global.ng.platformBrowser, global.ng.common, global.ng.material.icon, global.ng.material.progressSpinner, global.ng.material.button, global.ng.cdk.overlay, global.ng.material.formField, global.ng.material.input, global.ng.forms, global.ng.cdk.portal, global.ng.material.dialog, global.common$1, global.ng.router, global.ng.material.snackBar, global.ng.material.menu, global.ng.cdk.textField, global.ng.material.tooltip, global.ng.material.select));
+}(this, (function (exports, rxjs, operators, core, marked, DOMPurify, platformBrowser, common, icon, progressSpinner, button, overlay, formField, input, forms, portal, dialog, common$1, router, snackBar, menu, textField, tooltip, select) { 'use strict';
 
     function lazyConnection(options) {
         var obs = new rxjs.Observable(function (observer) {
@@ -207,10 +207,156 @@
         { type: platformBrowser.DomSanitizer }
     ]; };
 
+    var BantaTrustResourceUrlPipe = /** @class */ (function () {
+        function BantaTrustResourceUrlPipe(sanitizer) {
+            this.sanitizer = sanitizer;
+        }
+        BantaTrustResourceUrlPipe.prototype.transform = function (value) {
+            if (!value)
+                return undefined;
+            return this.sanitizer.bypassSecurityTrustResourceUrl(value);
+        };
+        return BantaTrustResourceUrlPipe;
+    }());
+    BantaTrustResourceUrlPipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: 'trustResourceUrl'
+                },] }
+    ];
+    BantaTrustResourceUrlPipe.ctorParameters = function () { return [
+        { type: platformBrowser.DomSanitizer }
+    ]; };
+
+    var BantaAttachmentComponent = /** @class */ (function () {
+        function BantaAttachmentComponent() {
+            this.loading = false;
+            this.editing = false;
+            this.loadingMessage = 'Please wait...';
+            this.error = false;
+            this.errorMessage = 'An error has occurred';
+            this.removed = new rxjs.Subject();
+            this.activated = new rxjs.Subject();
+        }
+        BantaAttachmentComponent.prototype.activate = function () {
+            this.activated.next();
+        };
+        BantaAttachmentComponent.prototype.remove = function () {
+            this.removed.next();
+        };
+        Object.defineProperty(BantaAttachmentComponent.prototype, "isError", {
+            get: function () {
+                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);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BantaAttachmentComponent.prototype, "theErrorMessage", {
+            get: function () {
+                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);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BantaAttachmentComponent.prototype, "isLoading", {
+            get: function () {
+                var _a;
+                return this.loading || !this.attachment || ((_a = this.attachment.transientState) === null || _a === void 0 ? void 0 : _a.loading) || !this.attachment.url;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BantaAttachmentComponent.prototype, "isImageAttachment", {
+            get: function () {
+                if (this.attachment.type.startsWith('image/'))
+                    return true;
+                return false;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return BantaAttachmentComponent;
+    }());
+    BantaAttachmentComponent.decorators = [
+        { type: core.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: core.Input }],
+        loading: [{ type: core.Input }],
+        editing: [{ type: core.Input }],
+        loadingMessage: [{ type: core.Input }],
+        error: [{ type: core.Input }],
+        errorMessage: [{ type: core.Input }],
+        removed: [{ type: core.Output }],
+        activated: [{ type: core.Output }],
+        isLoading: [{ type: core.HostBinding, args: ['class.loading',] }]
+    };
+
+    var BantaAttachmentsComponent = /** @class */ (function () {
+        function BantaAttachmentsComponent() {
+            this.editing = false;
+            this.remove = new rxjs.Subject();
+        }
+        BantaAttachmentsComponent.prototype.removeAttachment = function (attachment) {
+            this.remove.next(attachment);
+        };
+        BantaAttachmentsComponent.prototype.isImageAttachment = function (attachment) {
+            if (attachment.type.startsWith('image/'))
+                return true;
+            return false;
+        };
+        BantaAttachmentsComponent.prototype.isCardAttachment = function (attachment) {
+            if (['card'].includes(attachment.type))
+                return true;
+            return false;
+        };
+        BantaAttachmentsComponent.prototype.showLightbox = function (image) {
+            this.lightbox.open(image.url, this.attachments
+                .filter(function (x) { return x.type === 'image/png'; })
+                .map(function (x) { return x.url; }));
+        };
+        Object.defineProperty(BantaAttachmentsComponent.prototype, "inlineAttachments", {
+            get: function () {
+                return this.attachments.filter(function (x) { return x.type !== 'card' && (x.style === 'inline' || !x.style); });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(BantaAttachmentsComponent.prototype, "blockAttachments", {
+            get: function () {
+                return this.attachments.filter(function (x) { return x.style === 'block' || x.type === 'card'; });
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return BantaAttachmentsComponent;
+    }());
+    BantaAttachmentsComponent.decorators = [
+        { type: core.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: core.Input }],
+        editing: [{ type: core.Input }],
+        lightbox: [{ type: core.ViewChild, args: ['lightbox',] }],
+        remove: [{ type: core.Output }]
+    };
+
     var COMPONENTS = [
         TimestampComponent,
         LightboxComponent,
-        BantaMarkdownToHtmlPipe
+        BantaMarkdownToHtmlPipe,
+        BantaTrustResourceUrlPipe,
+        BantaAttachmentComponent,
+        BantaAttachmentsComponent
     ];
     var BantaCommonModule = /** @class */ (function () {
         function BantaCommonModule() {
@@ -222,7 +368,9 @@
                     declarations: COMPONENTS,
                     imports: [
                         common.CommonModule,
-                        icon.MatIconModule
+                        icon.MatIconModule,
+                        progressSpinner.MatProgressSpinnerModule,
+                        button.MatButtonModule
                     ],
                     exports: COMPONENTS
                 },] }
@@ -7166,8 +7314,9 @@
 
     /// <reference types="@types/resize-observer-browser" />
     var EmojiSelectorButtonComponent = /** @class */ (function () {
-        function EmojiSelectorButtonComponent(elementRef) {
+        function EmojiSelectorButtonComponent(elementRef, overlay) {
             this.elementRef = elementRef;
+            this.overlay = overlay;
             this._selected = new rxjs.Subject();
             this.showEmojiPanel = false;
         }
@@ -7178,115 +7327,76 @@
             enumerable: false,
             configurable: true
         });
-        EmojiSelectorButtonComponent.prototype.ngOnDestroy = function () {
-            this.removeListener();
-            this.panelElement.nativeElement.remove();
-        };
-        Object.defineProperty(EmojiSelectorButtonComponent.prototype, "widthConstrained", {
-            get: function () { return this.width < 700; },
+        Object.defineProperty(EmojiSelectorButtonComponent.prototype, "isOpen", {
+            get: function () {
+                return this.overlayRef;
+            },
             enumerable: false,
             configurable: true
         });
-        EmojiSelectorButtonComponent.prototype.ngAfterViewInit = function () {
-        };
-        EmojiSelectorButtonComponent.prototype.putPanelAtRoot = function () {
-            // If we are in full-screen, placing the panel outside of the full-screen element will result in it 
-            // always being behind said full-screen element, so we need to ensure we never place it further up the 
-            // stack.
-            var root = document.fullscreenElement || document.body.querySelector('[ng-version]') || document.body;
-            root.appendChild(this.panelElement.nativeElement);
-        };
-        EmojiSelectorButtonComponent.prototype.removeListener = function () {
-            document.removeEventListener('click', this.clickListener);
-            window.removeEventListener('resize', this.resizeListener);
-        };
-        EmojiSelectorButtonComponent.prototype.place = function () {
-            // Not currently used as it can't be easily done handling all 
-            // scrolling corner cases.
-            this.putPanelAtRoot();
-            var pos = this.buttonElement.nativeElement.getBoundingClientRect();
-            var size = this.panelElement.nativeElement.getBoundingClientRect();
-            var left = window.scrollX + pos.left + pos.width - size.width;
-            if (left < 0)
-                left = (window.scrollX + window.innerWidth) / 2 - size.width / 2;
-            var scrollY = window.scrollY;
-            if (document.fullscreenElement) {
+        /**
+         * Insert the given emoji.
+         * @param str
+         */
+        EmojiSelectorButtonComponent.prototype.insert = function (str) {
+            this._selected.next(str);
+        };
+        EmojiSelectorButtonComponent.prototype.close = function () {
+            if (this.overlayRef) {
+                this.overlayRef.dispose();
+                this.overlayRef = null;
+                return;
             }
-            Object.assign(this.panelElement.nativeElement.style, {
-                top: window.scrollY + pos.top + pos.height + "px",
-                left: Math.max(0, left) + "px"
-            });
         };
         EmojiSelectorButtonComponent.prototype.show = function () {
             var _this = this;
-            if (this.showEmojiPanel) {
-                this.showEmojiPanel = false;
-                return;
+            if (this.isOpen) {
+                this.close();
             }
-            this.showEmojiPanel = true;
-            //this.place();
-            setTimeout(function () {
-                var onResize = function () {
-                    if (!_this.showEmojiPanel)
-                        return;
-                    _this.width = window.innerWidth;
-                    _this.height = window.innerHeight;
-                    var edgeOffset = 0;
-                    var commentField = _this.elementRef.nativeElement.closest("banta-comment-field");
-                    if (commentField) {
-                        var size = commentField.getBoundingClientRect();
-                        _this.width = size.width;
-                        edgeOffset = window.innerWidth - size.right;
-                    }
-                    var buttonRect = _this.buttonElement.nativeElement.getBoundingClientRect();
-                    var buttonRight = window.innerWidth - buttonRect.right - edgeOffset - 10;
-                    if (_this.width < 700) {
-                        _this.panelElement.nativeElement.style.right = -buttonRight + "px";
-                    }
-                    else {
-                        _this.panelElement.nativeElement.style.right = '';
-                    }
-                    _this.panelElement.nativeElement.style.maxWidth = _this.width - 15 + "px";
-                };
-                _this.resizeListener = onResize;
-                onResize();
-                _this.clickListener = function (ev) {
-                    var parent = ev.target;
-                    var isInDialog = false;
-                    while (parent) {
-                        if (parent.matches('emoji-selector-panel'))
-                            isInDialog = true;
-                        parent = parent.parentElement;
+            this.overlayRef = this.overlay.create({
+                positionStrategy: this.overlay.position()
+                    .flexibleConnectedTo(this.elementRef)
+                    .withPositions([
+                    {
+                        originX: 'end',
+                        originY: 'bottom',
+                        overlayX: 'end',
+                        overlayY: 'top'
                     }
-                    if (isInDialog)
-                        return;
-                    _this.showEmojiPanel = false;
-                    _this.removeListener();
-                };
-                document.addEventListener('click', _this.clickListener);
-                window.addEventListener('resize', _this.resizeListener);
+                ])
+                    .withFlexibleDimensions(true),
+                hasBackdrop: true,
+                disposeOnNavigation: true,
+                scrollStrategy: this.overlay.scrollStrategies.reposition({
+                    autoClose: true
+                })
             });
-        };
-        EmojiSelectorButtonComponent.prototype.insert = function (str) {
-            this._selected.next(str);
+            this.overlayRef.backdropClick().subscribe(function () {
+                _this.close();
+            });
+            this.overlayRef.keydownEvents().subscribe(function (event) {
+                if (event.key === 'Escape') {
+                    _this.close();
+                }
+            });
+            this.overlayRef.attach(this.selectorPanelTemplate);
         };
         return EmojiSelectorButtonComponent;
     }());
     EmojiSelectorButtonComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'emoji-selector-button',
-                    template: "\n        <button #button type=\"button\" mat-icon-button (click)=\"show()\">\n            <mat-icon>emoji_emotions</mat-icon>\n        </button>\n        <emoji-selector-panel \n            #panel\n            (selected)=\"insert($event)\"\n            [class.visible]=\"showEmojiPanel\"\n            ></emoji-selector-panel>\n    ",
-                    styles: ["\n        :host {\n            display: block;\n            position: relative;\n        }\n\n        emoji-selector-panel {\n            position: absolute;\n            top: 2.5em;\n            right: 0;\n            opacity: 0;\n            pointer-events: none;\n            z-index: 10;\n        }\n\n        emoji-selector-panel.visible {\n            pointer-events: initial;\n            opacity: 1;\n        }\n\n        button {\n            color: #666\n        }\n    "]
+                    template: "\n        <button #button type=\"button\" mat-icon-button (click)=\"show()\">\n            <mat-icon>emoji_emotions</mat-icon>\n        </button>\n        <ng-template cdkPortal #selectorPanelTemplate=\"cdkPortal\">\n            <emoji-selector-panel \n                #panel\n                (selected)=\"insert($event)\"\n                ></emoji-selector-panel>\n        </ng-template>\n    ",
+                    styles: ["\n        :host {\n            display: block;\n            position: relative;\n        }\n\n        button {\n            color: #666\n        }\n    "]
                 },] }
     ];
     EmojiSelectorButtonComponent.ctorParameters = function () { return [
-        { type: core.ElementRef }
+        { type: core.ElementRef },
+        { type: overlay.Overlay }
     ]; };
     EmojiSelectorButtonComponent.propDecorators = {
-        selected: [{ type: core.Output }],
-        panelElement: [{ type: core.ViewChild, args: ['panel', { read: core.ElementRef },] }],
-        buttonElement: [{ type: core.ViewChild, args: ['button', { read: core.ElementRef },] }],
-        widthConstrained: [{ type: core.HostBinding, args: ['class.width-constrained',] }]
+        selectorPanelTemplate: [{ type: core.ViewChild, args: ['selectorPanelTemplate',] }],
+        selected: [{ type: core.Output }]
     };
 
     var COMPONENTS$1 = [
@@ -7307,15 +7417,131 @@
                         icon.MatIconModule,
                         button.MatButtonModule,
                         formField.MatFormFieldModule,
-                        input.MatInputModule
+                        input.MatInputModule,
+                        overlay.OverlayModule,
+                        portal.PortalModule
                     ],
                     exports: COMPONENTS$1
                 },] }
     ];
 
+    var 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');
+    var UrlAttachmentScraper = /** @class */ (function () {
+        function UrlAttachmentScraper() {
+        }
+        UrlAttachmentScraper.prototype.findFragments = function (message) {
+            var _a;
+            // If a message already has a URL attachment, don't add another one.
+            if (message.attachments && message.attachments.filter(function (x) { return x.type === 'url'; }).length > 0)
+                return null;
+            return (Array.from((_a = message.message.match(URL_REGEX)) !== null && _a !== void 0 ? _a : []))
+                .reduce(function (a, item) { return (a.includes(item) ? undefined : a.push(item), a); }, [])
+                .map(function (url) { return ({
+                text: url,
+                offset: message.message.indexOf(url),
+                type: 'url'
+            }); });
+        };
+        return UrlAttachmentScraper;
+    }());
+    var GiphyAttachmentResolver = /** @class */ (function () {
+        function GiphyAttachmentResolver() {
+        }
+        GiphyAttachmentResolver.prototype.resolveFragment = function (message, fragment) {
+            var _a;
+            return __awaiter(this, void 0, void 0, function () {
+                var gifId;
+                return __generator(this, function (_b) {
+                    if (fragment.type === 'url' && fragment.text.startsWith('https://giphy.com/gifs')) {
+                        gifId = (_a = /[^-\/]+$/.exec(fragment.text)) === null || _a === void 0 ? void 0 : _a.toString();
+                        if (!gifId)
+                            return [2 /*return*/, null];
+                        return [2 /*return*/, {
+                                type: 'iframe',
+                                url: "https://giphy.com/embed/" + gifId,
+                                style: 'inline'
+                            }];
+                    }
+                    return [2 /*return*/, null];
+                });
+            });
+        };
+        return GiphyAttachmentResolver;
+    }());
+    var YouTubeAttachmentResolver = /** @class */ (function () {
+        function YouTubeAttachmentResolver() {
+        }
+        YouTubeAttachmentResolver.prototype.resolveFragment = function (message, fragment) {
+            return __awaiter(this, void 0, void 0, function () {
+                var videoId, match;
+                return __generator(this, function (_b) {
+                    if (fragment.type !== 'url')
+                        return [2 /*return*/, null];
+                    if (fragment.text.match(/https?:\/\/(www\.)?youtube.com\/watch\?v=/)) {
+                        match = /watch\?v=([^&]+)/.exec(fragment.text);
+                        if (match) {
+                            videoId = match[1];
+                        }
+                    }
+                    if (videoId) {
+                        return [2 /*return*/, {
+                                type: 'iframe',
+                                url: "https://www.youtube.com/embed/" + videoId,
+                                style: 'block'
+                            }];
+                    }
+                    return [2 /*return*/, null];
+                });
+            });
+        };
+        return YouTubeAttachmentResolver;
+    }());
+    var UrlAttachmentResolver = /** @class */ (function () {
+        function UrlAttachmentResolver(backend) {
+            this.backend = backend;
+        }
+        UrlAttachmentResolver.prototype.resolveFragment = function (message, fragment) {
+            return __awaiter(this, void 0, void 0, function () {
+                var urlCard;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            if (fragment.type !== 'url')
+                                return [2 /*return*/, null];
+                            return [4 /*yield*/, this.backend.getCardForUrl(fragment.text)];
+                        case 1:
+                            urlCard = _b.sent();
+                            if (urlCard) {
+                                return [2 /*return*/, {
+                                        type: 'card',
+                                        url: fragment.text,
+                                        card: urlCard,
+                                        style: 'block'
+                                    }];
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            });
+        };
+        return UrlAttachmentResolver;
+    }());
+    UrlAttachmentResolver.decorators = [
+        { type: core.Injectable }
+    ];
+    UrlAttachmentResolver.ctorParameters = function () { return [
+        { type: ChatBackendBase }
+    ]; };
+
     var ChatBackendBase = /** @class */ (function () {
         function ChatBackendBase() {
             this._userChanged = new rxjs.BehaviorSubject(null);
+            this._attachmentScrapers = [];
+            this._attachmentResolvers = [];
+            this.registerAttachmentScraper(new UrlAttachmentScraper());
+            this.registerAttachmentResolver(new GiphyAttachmentResolver());
+            this.registerAttachmentResolver(new YouTubeAttachmentResolver());
+            this.registerAttachmentResolver(new UrlAttachmentResolver(this));
         }
         Object.defineProperty(ChatBackendBase.prototype, "userChanged", {
             get: function () {
@@ -7335,6 +7561,26 @@
             enumerable: false,
             configurable: true
         });
+        ChatBackendBase.prototype.registerAttachmentScraper = function (scraper) {
+            this._attachmentScrapers.push(scraper);
+        };
+        ChatBackendBase.prototype.registerAttachmentResolver = function (resolver) {
+            this._attachmentResolvers.push(resolver);
+        };
+        Object.defineProperty(ChatBackendBase.prototype, "attachmentScrapers", {
+            get: function () {
+                return this._attachmentScrapers.slice();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ChatBackendBase.prototype, "attachmentResolvers", {
+            get: function () {
+                return this._attachmentResolvers.slice();
+            },
+            enumerable: false,
+            configurable: true
+        });
         return ChatBackendBase;
     }());
 
@@ -8385,11 +8631,6 @@
             this._avatarSelected.next(user);
             this.selectUser();
         };
-        CommentComponent.prototype.showLightbox = function (image) {
-            this.lightbox.open(image.url, this.message.attachments
-                .filter(function (x) { return x.type === 'image/png'; })
-                .map(function (x) { return x.url; }));
-        };
         CommentComponent.prototype.avatarForUser = function (user) {
             var url = this.genericAvatarUrl;
             if (user && user.avatarUrl) {
@@ -8397,13 +8638,21 @@
             }
             return "url(" + url + ")";
         };
+        Object.defineProperty(CommentComponent.prototype, "replyCount", {
+            get: function () {
+                var _a;
+                return ((_a = this.message.submessages) === null || _a === void 0 ? void 0 : _a.length) || this.message.submessageCount || 0;
+            },
+            enumerable: false,
+            configurable: true
+        });
         return CommentComponent;
     }());
     CommentComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-comment',
-                    template: "\r\n<mat-menu #pointItemMenu=\"matMenu\">\r\n    <button *ngIf=\"!mine\" mat-menu-item (click)=\"report()\">Report</button>\r\n    <button *ngIf=\"mine\" [disabled]=\"!permissions?.canEdit\" mat-menu-item (click)=\"startEdit()\">Edit</button>\r\n    <button *ngIf=\"mine\" [disabled]=\"!permissions?.canDelete\" mat-menu-item (click)=\"delete()\">Delete</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        <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 small\">\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        <banta-timestamp [value]=\"message.sentAt\"></banta-timestamp>\r\n        <ul class=\"message-facts\">\r\n            <li *ngIf=\"message.edits?.length > 0\">Edited</li>\r\n        </ul>\r\n        <div class=\"spacer\"></div>\r\n        <div class=\"counted-action\" *ngIf=\"showReplyAction\">\r\n            <div class=\"count-indicator\">\r\n                {{message.submessages?.length || message.submessageCount || 0}}\r\n            </div>\r\n            <button mat-icon-button matTooltip=\"Replies\" matTooltipPosition=\"below\" (click)=\"select()\">\r\n                <mat-icon [inline]=\"true\">comment</mat-icon>\r\n            </button>\r\n        </div>\r\n        <div class=\"counted-action\" [class.active]=\"message.userState?.liked\">\r\n            <div class=\"count-indicator\">\r\n                {{message.likes}}\r\n            </div>\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-icon-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            </button>\r\n        </div>\r\n\r\n        <div class=\"counted-action\">\r\n            <button mat-icon-button matTooltip=\"Share this comment\" matTooltipPosition=\"below\" (click)=\"share()\">\r\n                <mat-icon [inline]=\"true\" >share</mat-icon>\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{color:#666;flex-shrink:0}:host .actions banta-timestamp{color:#666;font-size:10pt;flex-shrink:0}.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}.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}ul.message-facts.small{display:none}ul.message-facts.small li{margin-top:.5em}ul.message-facts.small li:first-child{border-left:1px solid transparent;margin-left:0;padding-left:0}@media (max-width:400px){.avatar{height:32px;width:32px}.actions ul.message-facts{display:none}ul.message-facts.small{display:initial}: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) .actions ul.message-facts{display:none}:host-context(.banta-mobile) ul.message-facts.small{display:initial}: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 = {
@@ -8428,8 +8677,7 @@
         editEnded: [{ type: core.Output }],
         shared: [{ type: core.Output }],
         genericAvatarUrl: [{ type: core.Input }],
-        commentId: [{ type: core.HostBinding, args: ['attr.data-comment-id',] }],
-        lightbox: [{ type: core.ViewChild, args: ['lightbox',] }]
+        commentId: [{ type: core.HostBinding, args: ['attr.data-comment-id',] }]
     };
 
     var CommentViewComponent = /** @class */ (function () {
@@ -9487,7 +9735,7 @@
         { type: core.Component, args: [{
                     selector: 'banta-comments',
                     template: "<ng-container *ngIf=\"loading\">\r\n    <div class=\"loading-screen\" [class.visible]=\"showLoadingScreen\">\r\n        <h1>Loading 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 = function () { return [
@@ -9611,14 +9859,17 @@
     };
 
     var CommentFieldComponent = /** @class */ (function () {
-        function CommentFieldComponent() {
+        function CommentFieldComponent(chatBackend) {
+            this.chatBackend = chatBackend;
             this.canComment = true;
             this.allowAttachments = false;
             this.signInSelected = new rxjs.Subject();
             this.editAvatarSelected = new rxjs.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';
@@ -9634,6 +9885,171 @@
             this.autoCompleteSelected = 0;
             this.chatMessageAttachments = [];
         }
+        Object.defineProperty(CommentFieldComponent.prototype, "text", {
+            get: function () {
+                return this._text;
+            },
+            set: function (value) {
+                var _this = this;
+                this._text = value;
+                clearTimeout(this.attachmentScrapeTimeout);
+                this.attachmentScrapeTimeout = setTimeout(function () { return _this.scrapeAttachments(); }, this.attachmentScrapeDebounce);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        CommentFieldComponent.prototype.scrapeAttachments = function () {
+            var e_1, _b, e_2, _c, e_3, _d, e_4, _e, e_5, _f;
+            var _this = this;
+            var message = {
+                likes: 0,
+                message: this._text,
+                sentAt: undefined,
+                user: this.user,
+                attachments: this.chatMessageAttachments
+            };
+            var foundFragments = [];
+            try {
+                for (var _g = __values(this.chatBackend.attachmentScrapers), _h = _g.next(); !_h.done; _h = _g.next()) {
+                    var scraper = _h.value;
+                    var fragments = scraper.findFragments(message);
+                    if (!fragments) {
+                        console.error("Attachment fragment scraper " + scraper.constructor.name + " is implemented incorrectly: Returned null instead of array");
+                        continue;
+                    }
+                    try {
+                        for (var fragments_1 = (e_2 = void 0, __values(fragments)), fragments_1_1 = fragments_1.next(); !fragments_1_1.done; fragments_1_1 = fragments_1.next()) {
+                            var fragment = fragments_1_1.value;
+                            foundFragments.push(fragment.text);
+                            if (!this.attachmentFragments.has(fragment.text)) {
+                                console.log("Scraped new fragment:");
+                                console.dir(fragment);
+                                this.attachmentFragments.set(fragment.text, {
+                                    fragment: fragment,
+                                    resolution: undefined
+                                });
+                            }
+                        }
+                    }
+                    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                    finally {
+                        try {
+                            if (fragments_1_1 && !fragments_1_1.done && (_c = fragments_1.return)) _c.call(fragments_1);
+                        }
+                        finally { if (e_2) throw e_2.error; }
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_h && !_h.done && (_b = _g.return)) _b.call(_g);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            // Remove fragments that are no longer in the message.
+            var removedFragments = [];
+            try {
+                for (var _j = __values(this.attachmentFragments), _k = _j.next(); !_k.done; _k = _j.next()) {
+                    var _l = __read(_k.value, 1), key = _l[0];
+                    if (!foundFragments.includes(key))
+                        removedFragments.push(key);
+                }
+            }
+            catch (e_3_1) { e_3 = { error: e_3_1 }; }
+            finally {
+                try {
+                    if (_k && !_k.done && (_d = _j.return)) _d.call(_j);
+                }
+                finally { if (e_3) throw e_3.error; }
+            }
+            try {
+                for (var removedFragments_1 = __values(removedFragments), removedFragments_1_1 = removedFragments_1.next(); !removedFragments_1_1.done; removedFragments_1_1 = removedFragments_1.next()) {
+                    var removedFragment = removedFragments_1_1.value;
+                    console.log("Removed fragment: " + removedFragment);
+                    this.attachmentFragments.delete(removedFragment);
+                }
+            }
+            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+            finally {
+                try {
+                    if (removedFragments_1_1 && !removedFragments_1_1.done && (_e = removedFragments_1.return)) _e.call(removedFragments_1);
+                }
+                finally { if (e_4) throw e_4.error; }
+            }
+            var _loop_1 = function (key, state) {
+                if (state.resolution)
+                    return "continue";
+                state.resolution = new Promise(function (resolve, reject) { return __awaiter(_this, void 0, void 0, function () {
+                    var _b, _c, resolver, attachment, e_6, e_7_1;
+                    var e_7, _d;
+                    return __generator(this, function (_e) {
+                        switch (_e.label) {
+                            case 0:
+                                console.log("Resolving fragment " + key);
+                                _e.label = 1;
+                            case 1:
+                                _e.trys.push([1, 8, 9, 10]);
+                                _b = __values(this.chatBackend.attachmentResolvers), _c = _b.next();
+                                _e.label = 2;
+                            case 2:
+                                if (!!_c.done) return [3 /*break*/, 7];
+                                resolver = _c.value;
+                                console.log("- Trying resolver " + resolver.constructor.name + "...");
+                                _e.label = 3;
+                            case 3:
+                                _e.trys.push([3, 5, , 6]);
+                                return [4 /*yield*/, resolver.resolveFragment(message, state.fragment)];
+                            case 4:
+                                attachment = _e.sent();
+                                if (attachment) {
+                                    console.log("Resolved fragment " + key + " into attachment:");
+                                    console.dir(attachment);
+                                    this.chatMessageAttachments.push(attachment);
+                                    resolve(attachment);
+                                    return [3 /*break*/, 7];
+                                }
+                                return [3 /*break*/, 6];
+                            case 5:
+                                e_6 = _e.sent();
+                                console.error("Caught error during attachment resolver " + resolver.constructor.name + ":");
+                                console.error(e_6);
+                                return [3 /*break*/, 6];
+                            case 6:
+                                _c = _b.next();
+                                return [3 /*break*/, 2];
+                            case 7: return [3 /*break*/, 10];
+                            case 8:
+                                e_7_1 = _e.sent();
+                                e_7 = { error: e_7_1 };
+                                return [3 /*break*/, 10];
+                            case 9:
+                                try {
+                                    if (_c && !_c.done && (_d = _b.return)) _d.call(_b);
+                                }
+                                finally { if (e_7) throw e_7.error; }
+                                return [7 /*endfinally*/];
+                            case 10: return [2 /*return*/];
+                        }
+                    });
+                }); });
+            };
+            try {
+                // Process any fragments that are not yet resolved (or being 
+                // resolved)
+                for (var _m = __values(this.attachmentFragments), _o = _m.next(); !_o.done; _o = _m.next()) {
+                    var _p = __read(_o.value, 2), key = _p[0], state = _p[1];
+                    _loop_1(key, state);
+                }
+            }
+            catch (e_5_1) { e_5 = { error: e_5_1 }; }
+            finally {
+                try {
+                    if (_o && !_o.done && (_f = _m.return)) _f.call(_m);
+                }
+                finally { if (e_5) throw e_5.error; }
+            }
+        };
         Object.defineProperty(CommentFieldComponent.prototype, "userAvatarUrl", {
             get: function () {
                 var _a;
@@ -9861,7 +10277,7 @@
         };
         CommentFieldComponent.prototype.sendMessage = function () {
             return __awaiter(this, void 0, void 0, function () {
-                var text, message, e_1;
+                var text, message, e_8;
                 return __generator(this, function (_b) {
                     switch (_b.label) {
                         case 0:
@@ -9893,11 +10309,11 @@
                             this.chatMessageAttachments = [];
                             return [3 /*break*/, 6];
                         case 4:
-                            e_1 = _b.sent();
+                            e_8 = _b.sent();
                             return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(function () { return resolve(); }, 1000); })];
                         case 5:
                             _b.sent();
-                            this.indicateError(e_1.message);
+                            this.indicateError(e_8.message);
                             return [3 /*break*/, 6];
                         case 6: return [3 /*break*/, 8];
                         case 7:
@@ -9917,8 +10333,10 @@
                 _this.chatMessageAttachments = _this.chatMessageAttachments.filter(function (x) { return x !== attachment; });
             }, 3000);
         };
-        CommentFieldComponent.prototype.removeAttachment = function (index) {
-            this.chatMessageAttachments.splice(index, 1);
+        CommentFieldComponent.prototype.removeAttachment = function (attachment) {
+            var index = this.chatMessageAttachments.indexOf(attachment);
+            if (index >= 0)
+                this.chatMessageAttachments.splice(index, 1);
         };
         CommentFieldComponent.prototype.alertError = function () {
             if (!this.sendError)
@@ -9930,10 +10348,13 @@
     CommentFieldComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'banta-comment-field',
-                    template: "<form class=\"new-message\" (submit)=\"sendMessage()\">\r\n    <div class=\"avatar-container\">\r\n        <a  href=\"javascript:;\"\r\n            class=\"avatar\"\r\n            (click)=\"showEditAvatar()\"\r\n            [style.background-image]=\"'url(' + 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 = function () { return [
+        { type: ChatBackendBase }
+    ]; };
     CommentFieldComponent.propDecorators = {
         source: [{ type: core.Input }],
         user: [{ type: core.Input }],
@@ -10119,7 +10540,9 @@
                         BantaCommonModule,
                         EmojiModule,
                         tooltip.MatTooltipModule,
-                        select.MatSelectModule
+                        select.MatSelectModule,
+                        overlay.OverlayModule,
+                        portal.PortalModule
                     ],
                     exports: COMPONENTS$3
                 },] }
@@ -10490,6 +10913,35 @@
         ChatBackend.prototype.watchMessage = function (message, handler) {
             throw new Error("Method not implemented.");
         };
+        ChatBackend.prototype.getCardForUrl = function (url) {
+            return __awaiter(this, void 0, void 0, function () {
+                var response, _c, _d;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
+                        case 0: return [4 /*yield*/, fetch(this.serviceUrl + "/urls", {
+                                method: 'POST',
+                                headers: {
+                                    'Content-Type': 'application/json'
+                                },
+                                body: JSON.stringify({
+                                    url: url
+                                })
+                            })];
+                        case 1:
+                            response = _e.sent();
+                            if (response.status == 404)
+                                return [2 /*return*/, null];
+                            if (!(response.status >= 400)) return [3 /*break*/, 3];
+                            _c = Error.bind;
+                            _d = "Failed to retrieve URL card: " + response.status + ". Body: '";
+                            return [4 /*yield*/, response.text()];
+                        case 2: throw new (_c.apply(Error, [void 0, _d + (_e.sent()) + "'"]))();
+                        case 3: return [4 /*yield*/, response.json()];
+                        case 4: return [2 /*return*/, _e.sent()];
+                    }
+                });
+            });
+        };
         return ChatBackend;
     }(ChatBackendBase));
     ChatBackend.decorators = [
@@ -10533,7 +10985,9 @@
                         formField.MatFormFieldModule,
                         input.MatInputModule,
                         progressSpinner.MatProgressSpinnerModule,
-                        snackBar.MatSnackBarModule
+                        snackBar.MatSnackBarModule,
+                        overlay.OverlayModule,
+                        portal.PortalModule
                     ],
                     declarations: [
                         BantaComponent,
@@ -10560,6 +11014,8 @@
 
     exports.AttachmentButtonComponent = AttachmentButtonComponent;
     exports.BANTA_SDK_OPTIONS = BANTA_SDK_OPTIONS;
+    exports.BantaAttachmentComponent = BantaAttachmentComponent;
+    exports.BantaAttachmentsComponent = BantaAttachmentsComponent;
     exports.BantaChatComponent = BantaChatComponent;
     exports.BantaCommentsComponent = BantaCommentsComponent;
     exports.BantaCommonModule = BantaCommonModule;
@@ -10568,6 +11024,7 @@
     exports.BantaMarkdownToHtmlPipe = BantaMarkdownToHtmlPipe;
     exports.BantaReplySendOptionsDirective = BantaReplySendOptionsDirective;
     exports.BantaSdkModule = BantaSdkModule;
+    exports.BantaTrustResourceUrlPipe = BantaTrustResourceUrlPipe;
     exports.ChatBackend = ChatBackend;
     exports.ChatBackendBase = ChatBackendBase;
     exports.ChatMessageComponent = ChatMessageComponent;