@banta/sdk 4.0.12 → 4.0.15

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('@angular/common'), require('@angular/material/icon'), require('@angular/platform-browser'), 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/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', '@angular/common', '@angular/material/icon', '@angular/platform-browser', '@angular/material/button', '@angular/material/form-field', '@angular/material/input', '@angular/forms', '@angular/material/dialog', '@banta/common', '@angular/router', '@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.ng.common, global.ng.material.icon, global.ng.platformBrowser, 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.menu, global.ng.material.progressSpinner, global.ng.cdk.textField, global.ng.material.tooltip, global.ng.material.select));
-}(this, (function (exports, rxjs, operators, core, common, icon, platformBrowser, button, formField, input, forms, dialog, common$1, router, menu, progressSpinner, textField, tooltip, select) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('rxjs/operators'), require('@angular/core'), require('@angular/common'), require('@angular/material/icon'), require('@angular/platform-browser'), 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', '@angular/common', '@angular/material/icon', '@angular/platform-browser', '@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.ng.common, global.ng.material.icon, global.ng.platformBrowser, 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, common, icon, platformBrowser, button, formField, input, forms, dialog, common$1, router, snackBar, menu, progressSpinner, textField, tooltip, select) { 'use strict';
 
     function lazyConnection(options) {
         var obs = new rxjs.Observable(function (observer) {
@@ -7108,7 +7108,8 @@
     };
 
     var EmojiSelectorButtonComponent = /** @class */ (function () {
-        function EmojiSelectorButtonComponent() {
+        function EmojiSelectorButtonComponent(elementRef) {
+            this.elementRef = elementRef;
             this._selected = new rxjs.Subject();
             this.showEmojiPanel = false;
         }
@@ -7124,7 +7125,12 @@
             this.panelElement.nativeElement.remove();
         };
         EmojiSelectorButtonComponent.prototype.ngAfterViewInit = function () {
-            var root = document.body.querySelector('[ng-version]') || document.body;
+        };
+        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 () {
@@ -7132,11 +7138,17 @@
             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) {
+            }
             Object.assign(this.panelElement.nativeElement.style, {
                 top: window.scrollY + pos.top + pos.height + "px",
                 left: Math.max(0, left) + "px"
@@ -7149,7 +7161,7 @@
                 return;
             }
             this.showEmojiPanel = true;
-            this.place();
+            //this.place();
             setTimeout(function () {
                 _this.resizeListener = function () {
                     if (!_this.showEmojiPanel)
@@ -7182,9 +7194,12 @@
         { 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            /* bottom: 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\n        /* :host.bottom-left emoji-selector-panel {\n            right: auto;\n            left: 0;\n        }\n\n        :host.top-right emoji-selector-panel {\n            top: 2.4em;\n            bottom: auto;\n        }\n\n        :host.top-left emoji-selector-panel {\n            top: 2.4em;\n            bottom: auto;\n            left: 0;\n            right: auto;\n        } */\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\n        /* :host.bottom-left emoji-selector-panel {\n            right: auto;\n            left: 0;\n        }\n\n        :host.top-right emoji-selector-panel {\n            top: 2.4em;\n            bottom: auto;\n        }\n\n        :host.top-left emoji-selector-panel {\n            top: 2.4em;\n            bottom: auto;\n            left: 0;\n            right: auto;\n        } */\n    "]
                 },] }
     ];
+    EmojiSelectorButtonComponent.ctorParameters = function () { return [
+        { type: core.ElementRef }
+    ]; };
     EmojiSelectorButtonComponent.propDecorators = {
         selected: [{ type: core.Output }],
         panelElement: [{ type: core.ViewChild, args: ['panel', { read: core.ElementRef },] }],
@@ -8294,7 +8309,6 @@
         };
         CommentComponent.prototype.avatarForUser = function (user) {
             var url = this.genericAvatarUrl;
-            console.log("GENERIC: " + this.genericAvatarUrl);
             if (user && user.avatarUrl) {
                 url = user.avatarUrl;
             }
@@ -8650,11 +8664,12 @@
      * Comments component
      */
     var BantaCommentsComponent = /** @class */ (function () {
-        function BantaCommentsComponent(backend, elementRef, activatedRoute) {
+        function BantaCommentsComponent(backend, elementRef, activatedRoute, matSnackBar) {
             var _this = this;
             this.backend = backend;
             this.elementRef = elementRef;
             this.activatedRoute = activatedRoute;
+            this.matSnackBar = matSnackBar;
             // Loading Screen
             this._loadingMessage = '';
             this.loadingMessageVisible = false;
@@ -8680,6 +8695,12 @@
             this._shared = new rxjs.Subject();
             this._usernameSelected = new rxjs.Subject();
             this._avatarSelected = new rxjs.Subject();
+            /**
+             * Track whether we created this source. If we did not (ie it was passed in from the caller),
+             * then we are not responsible for calling close(). If we do own it though, we will call close()
+             * when we are done with it.
+             */
+            this._sourceIsOwned = false;
             this._subs = new rxjs.Subscription();
             this._sortOrder = common$1.CommentsOrder.NEWEST;
             this.selectedMessageVisible = false;
@@ -8799,13 +8820,8 @@
             return __awaiter(this, void 0, void 0, function () {
                 var _this = this;
                 return __generator(this, function (_d) {
-                    if (this._source) {
-                        this._source.close();
-                        this._source = null;
-                    }
                     setTimeout(function () { return __awaiter(_this, void 0, void 0, function () {
                         var _d;
-                        var _this = this;
                         return __generator(this, function (_e) {
                             switch (_e.label) {
                                 case 0:
@@ -8813,14 +8829,8 @@
                                     _d = this;
                                     return [4 /*yield*/, this.backend.getSourceForTopic(topicID, { sortOrder: this.sortOrder })];
                                 case 1:
-                                    _d._source = _e.sent();
-                                    if (this.sharedCommentID) {
-                                        this.navigateToSharedComment(this.sharedCommentID);
-                                        this.sharedCommentID = null;
-                                    }
-                                    this._source.messageReceived.subscribe(function (m) { return _this.addParticipant(m); });
-                                    this._source.messageSent.subscribe(function (m) { return _this.addParticipant(m); });
-                                    this._source.messages.forEach(function (m) { return _this.addParticipant(m); });
+                                    _d.source = _e.sent();
+                                    this._sourceIsOwned = true;
                                     return [2 /*return*/];
                             }
                         });
@@ -8903,10 +8913,35 @@
         Object.defineProperty(BantaCommentsComponent.prototype, "source", {
             get: function () { return this._source; },
             set: function (value) {
+                var _this = this;
+                var _a;
+                if (this._source && this._sourceIsOwned) {
+                    this._source.close();
+                    (_a = this._sourceSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+                    this._source = null;
+                    this.participants = [];
+                }
                 this._source = value;
-                if (value && this.sharedCommentID) {
-                    this.navigateToSharedComment(this.sharedCommentID);
-                    this.sharedCommentID = null;
+                this._sourceIsOwned = false; // Assume we don't own this source.
+                this._sourceSubscription = new rxjs.Subscription();
+                if (value) {
+                    if (this.sharedCommentID) {
+                        this.navigateToSharedComment(this.sharedCommentID);
+                        this.sharedCommentID = null;
+                    }
+                    this._source.messages.forEach(function (m) { return _this.addParticipant(m); });
+                    this._sourceSubscription.add(this._source.messageReceived.subscribe(function (m) { return _this.addParticipant(m); }));
+                    this._sourceSubscription.add(this._source.messageSent.subscribe(function (m) { return _this.addParticipant(m); }));
+                    this._sourceSubscription.add(this._source.messageUpdated.subscribe(function (msg) {
+                        var _a;
+                        console.log("comments received message: ", msg);
+                        if (msg.id === ((_a = _this.selectedMessage) === null || _a === void 0 ? void 0 : _a.id) && msg.hidden) {
+                            _this.unselectMessage();
+                            _this.matSnackBar.open("The thread you were viewing was removed.", undefined, {
+                                duration: 2500
+                            });
+                        }
+                    }));
                 }
             },
             enumerable: false,
@@ -9337,7 +9372,8 @@
     BantaCommentsComponent.ctorParameters = function () { return [
         { type: ChatBackendBase },
         { type: core.ElementRef },
-        { type: router.ActivatedRoute }
+        { type: router.ActivatedRoute },
+        { type: snackBar.MatSnackBar }
     ]; };
     BantaCommentsComponent.propDecorators = {
         loadingMessages: [{ type: core.Input }],
@@ -9733,7 +9769,7 @@
         { 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                        (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 (addedAttachment)=\"addedAttachment($event)\" *ngIf=\"allowAttachments\"></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\">\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                    <img [src]=\"attachment.url\" alt=\"Message Attachment\">\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]=\"canComment && ((!text && !chatMessageAttachments.length) || sending)\"\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}.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}}.message-attachments-container{display:flex;gap:20px}.message-attachments-container .message-attachment{width:300px;position:relative}.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}"]
+                    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:1}.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}}.message-attachments-container{display:flex;gap:20px}.message-attachments-container .message-attachment{width:300px;position:relative}.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}"]
                 },] }
     ];
     CommentFieldComponent.propDecorators = {
@@ -9921,6 +9957,7 @@
             _this.state = 'connecting';
             _this.messageMap = new Map();
             _this._messageReceived = new rxjs.Subject();
+            _this._messageUpdated = new rxjs.Subject();
             _this._messageSent = new rxjs.Subject();
             _this.messages = [];
             _this.ready = new Promise(function (resolve) { return _this.markReady = resolve; });
@@ -10043,6 +10080,7 @@
         ChatSource.prototype.onChatMessage = function (message) {
             if (this.messageMap.has(message.id)) {
                 Object.assign(this.messageMap.get(message.id), message);
+                this._messageUpdated.next(message);
             }
             else if (!message.hidden) {
                 // Only process non-hidden messages through here. 
@@ -10057,6 +10095,11 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(ChatSource.prototype, "messageUpdated", {
+            get: function () { return this._messageUpdated.asObservable(); },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(ChatSource.prototype, "messageSent", {
             get: function () { return this._messageSent.asObservable(); },
             enumerable: false,
@@ -10300,7 +10343,8 @@
                         dialog.MatDialogModule,
                         formField.MatFormFieldModule,
                         input.MatInputModule,
-                        progressSpinner.MatProgressSpinnerModule
+                        progressSpinner.MatProgressSpinnerModule,
+                        snackBar.MatSnackBarModule
                     ],
                     declarations: [
                         BantaComponent,