@datarailsshared/datarailsshared 1.4.101 → 1.4.103

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -3938,7 +3938,6 @@
         CHAT_MESSAGE_TYPE["DOWNLOAD_FILE"] = "download-file";
         CHAT_MESSAGE_TYPE["MAILTO"] = "mailto";
         CHAT_MESSAGE_TYPE["EMBED"] = "embed";
-        CHAT_MESSAGE_TYPE["WIDGET"] = "widget";
         CHAT_MESSAGE_TYPE["INPUT"] = "input";
         CHAT_MESSAGE_TYPE["CODE"] = "code";
     })(exports.CHAT_MESSAGE_TYPE || (exports.CHAT_MESSAGE_TYPE = {}));
@@ -5334,6 +5333,7 @@
             this.MESSAGE_TYPE = exports.CHAT_MESSAGE_TYPE;
             this.MESSAGE_TYPE_CUSTOM = exports.CHAT_MESSAGE_TYPE.EMBED;
             this._reply = false;
+            this._isEmpty = false;
         }
         Object.defineProperty(DrChatMessageComponent.prototype, "flyInOut", {
             get: function () {
@@ -5362,6 +5362,21 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(DrChatMessageComponent.prototype, "isEmpty", {
+            /**
+             * The outer flag is whether the message is empty. Needed if it is impossible to calculate it inside.
+             *
+             * @type {boolean}
+             */
+            get: function () {
+                return this._isEmpty;
+            },
+            set: function (value) {
+                this._isEmpty = !!value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         DrChatMessageComponent.prototype.getTemplate = function () {
             this.customMessage = true;
             var customMessage = this.getCustomMessage(this.type);
@@ -5392,7 +5407,7 @@
                         ]),
                     ],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:flex;flex-direction:row}:host:not(:first-child){margin-top:8px}.reply+:host.reply,.not-reply+:host.not-reply{margin-top:3px}:host.not-reply{justify-content:flex-end}:host.not-reply .message{color:#fff;background-color:#4646ce}:host .message{display:flex;background-color:#f3f7ff;border-radius:8px;padding:16px;max-width:60%;width:auto}:host .message--custom{max-width:unset;width:80%}\n"]
+                    styles: [":host{display:flex;flex-direction:row}:host.empty{display:none}:host:not(:first-child){margin-top:8px}.reply+:host.reply,.not-reply+:host.not-reply{margin-top:3px}:host.not-reply{justify-content:flex-end}:host.not-reply .message{color:#fff;background-color:#4646ce}:host .message{display:flex;background-color:#f3f7ff;border-radius:8px;padding:16px;max-width:60%;width:auto}\n"]
                 },] }
     ];
     DrChatMessageComponent.ctorParameters = function () { return [
@@ -5404,15 +5419,32 @@
         reply: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.reply',] }],
         type: [{ type: i0.Input }],
         message: [{ type: i0.Input }],
-        customMessageData: [{ type: i0.Input }]
+        customMessageData: [{ type: i0.Input }],
+        isEmpty: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.empty',] }]
     };
 
     var DrChatComponent = /** @class */ (function () {
         function DrChatComponent(cdr) {
             this.cdr = cdr;
+            this.destroy$ = new rxjs.Subject();
+            this.showClearButton = true;
             this.noMessagesPlaceholder = 'No messages yet.';
             this._scrollBottom = true;
+            this.clear = new i0.EventEmitter();
         }
+        Object.defineProperty(DrChatComponent.prototype, "contentUpdateSubject", {
+            set: function (value) {
+                var _this = this;
+                if (value) {
+                    value.pipe(operators.takeUntil(this.destroy$)).subscribe(function () {
+                        _this.updateView();
+                    });
+                }
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ;
         Object.defineProperty(DrChatComponent.prototype, "scrollBottom", {
             /**
              * Scroll chat to the bottom of the list when a new message arrives
@@ -5446,14 +5478,18 @@
                 _this.cdr.markForCheck();
             });
         };
+        DrChatComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
+        };
         return DrChatComponent;
     }());
     DrChatComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-chat',
-                    template: "<div class=\"header\">\n    {{ title }}\n</div>\n\n<div class=\"scrollable\">\n    <div class=\"messages\" #messagesContainer>\n        <ng-content select=\"dr-chat-message\"></ng-content>\n        <p class=\"no-messages\" *ngIf=\"!messages?.length\">{{ noMessagesPlaceholder }}</p>\n    </div>\n</div>\n\n<div class=\"form\">\n    <ng-content select=\"dr-chat-form\"></ng-content>\n</div>\n",
+                    template: "<div class=\"header\">\n    {{ title }}\n    <dr-button *ngIf=\"showClearButton\"\n               (click)=\"clear.emit($event)\"\n               theme=\"icon\"\n               icon=\"dr-icon-trash\"\n               class=\"ml-auto\"\n               title=\"Clear the history\">\n    </dr-button>\n</div>\n\n<div class=\"scrollable\">\n    <div class=\"messages\" #messagesContainer>\n        <ng-content select=\"dr-chat-message\"></ng-content>\n        <p class=\"no-messages\" *ngIf=\"!messages?.length\">{{ noMessagesPlaceholder }}</p>\n    </div>\n</div>\n\n<div class=\"form\">\n    <ng-content select=\"dr-chat-form\"></ng-content>\n</div>\n",
                     providers: [DrChatCustomMessageService],
-                    styles: [":host{display:flex;flex-grow:1;flex-direction:column;position:relative;height:100%;background-color:#fff;border:1px solid #e5e6ea;border-radius:8px;box-shadow:0 4px 8px 1px #00000040;color:#151b3f;font-family:\"Poppins\",sans-serif;font-size:14px;font-weight:400;line-height:22px}:host .header{border-bottom:1px solid #e5e6ea;padding:16px 32px;font-weight:bold}:host .scrollable{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}:host .scrollable .messages{padding:16px;overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%}:host .scrollable .no-messages{text-align:center}\n"]
+                    styles: [":host{display:flex;flex-grow:1;flex-direction:column;position:relative;height:100%;background-color:#fff;border:1px solid #e5e6ea;border-radius:8px;box-shadow:0 4px 8px 1px #00000040;color:#151b3f;font-family:\"Poppins\",sans-serif;font-size:14px;font-weight:400;line-height:22px}:host .header{display:flex;align-items:center;border-bottom:1px solid #e5e6ea;padding:16px 32px;font-weight:bold}:host .scrollable{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}:host .scrollable .messages{padding:16px;overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%}:host .scrollable .no-messages{text-align:center}\n"]
                 },] }
     ];
     DrChatComponent.ctorParameters = function () { return [
@@ -5461,11 +5497,14 @@
     ]; };
     DrChatComponent.propDecorators = {
         title: [{ type: i0.Input }],
+        showClearButton: [{ type: i0.Input }],
         noMessagesPlaceholder: [{ type: i0.Input }],
+        contentUpdateSubject: [{ type: i0.Input }],
         scrollBottom: [{ type: i0.Input }],
         messagesContainer: [{ type: i0.ViewChild, args: ['messagesContainer',] }],
         messages: [{ type: i0.ContentChildren, args: [DrChatMessageComponent,] }],
-        chatForm: [{ type: i0.ContentChild, args: [DrChatFormComponent,] }]
+        chatForm: [{ type: i0.ContentChild, args: [DrChatFormComponent,] }],
+        clear: [{ type: i0.Output }]
     };
 
     /**