@datarailsshared/datarailsshared 1.5.578 → 1.6.23

package/fesm2022/datarailsshared-datarailsshared.mjs

@@ -1022,13 +1022,13 @@ const _c1$h = ["multiLabelTemplate"];
 const _c2$7 = ["optionTemplate"];
 const _c3$6 = ["optionHeaderTemplate"];
 const _c4$3 = ["optionFooterTemplate"];
-const _c5 = function (a0) { return { item: a0 }; };
+const _c5$1 = function (a0) { return { item: a0 }; };
 function DrSelectComponent_2_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 6);
 } if (rf & 2) {
     const item_r11 = ctx.item;
     const ctx_r10 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r10.optionHeaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c5, item_r11));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r10.optionHeaderTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c5$1, item_r11));
 } }
 function DrSelectComponent_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, DrSelectComponent_2_ng_template_0_Template, 1, 4, "ng-template", 5);
@@ -1038,19 +1038,19 @@ function DrSelectComponent_3_ng_template_0_Template(rf, ctx) { if (rf & 1) {
 } if (rf & 2) {
     const item_r13 = ctx.item;
     const ctx_r12 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r12.labelTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c5, item_r13));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r12.labelTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c5$1, item_r13));
 } }
 function DrSelectComponent_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, DrSelectComponent_3_ng_template_0_Template, 1, 4, "ng-template", 7);
 } }
-const _c6 = function (a0, a1) { return { items: a0, clear: a1 }; };
+const _c6$1 = function (a0, a1) { return { items: a0, clear: a1 }; };
 function DrSelectComponent_4_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0, 6);
 } if (rf & 2) {
     const items_r15 = ctx.items;
     const clear_r16 = ctx.clear;
     const ctx_r14 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngTemplateOutlet", ctx_r14.multiLabelTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c6, items_r15, clear_r16));
+    i0.ɵɵproperty("ngTemplateOutlet", ctx_r14.multiLabelTemplate)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c6$1, items_r15, clear_r16));
 } }
 function DrSelectComponent_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, DrSelectComponent_4_ng_template_0_Template, 1, 5, "ng-template", 8);
@@ -5463,6 +5463,7 @@ var CHAT_MESSAGE_TYPE;
     CHAT_MESSAGE_TYPE["EMBED"] = "embed";
     CHAT_MESSAGE_TYPE["INPUT"] = "input";
     CHAT_MESSAGE_TYPE["CODE"] = "code";
+    CHAT_MESSAGE_TYPE["ERROR"] = "error";
 })(CHAT_MESSAGE_TYPE || (CHAT_MESSAGE_TYPE = {}));
 var ChatRole;
 (function (ChatRole) {
@@ -5485,6 +5486,8 @@ class ChatMessage {
         this.parameters = obj?.parameters;
         this.avatarUrl = obj?.avatarUrl || null;
         this.user = obj?.user;
+        this.files = obj?.files;
+        this.suggestions = obj?.suggestions;
     }
 }
 
@@ -5986,82 +5989,116 @@ class DrChatMessageTextComponent {
             type: Input
         }] }); })();
 
-function DrChatMessageFileComponent_a_1_i_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 5);
-} }
-function DrChatMessageFileComponent_a_1_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div");
-} if (rf & 2) {
-    const file_r1 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵstyleProp("background-image", file_r1.urlStyle);
+class ShorterNamingPipe {
+    transform(fileName, maxLength = 10) {
+        const lastDotIndex = fileName.lastIndexOf('.');
+        if (lastDotIndex === -1 || lastDotIndex === 0) {
+            return fileName.length > maxLength ? fileName.slice(0, maxLength) : fileName;
+        }
+        const namePart = fileName.slice(0, lastDotIndex);
+        const type = fileName.slice(lastDotIndex);
+        if (fileName.length <= maxLength) {
+            return fileName;
+        }
+        const maxNameLength = maxLength - type.length;
+        if (maxNameLength <= 0) {
+            return fileName.slice(0, maxLength);
+        }
+        return namePart.slice(0, maxNameLength) + type;
+    }
+    /** @nocollapse */ static { this.ɵfac = function ShorterNamingPipe_Factory(t) { return new (t || ShorterNamingPipe)(); }; }
+    /** @nocollapse */ static { this.ɵpipe = /** @pureOrBreakMyCode */ i0.ɵɵdefinePipe({ name: "shorterNaming", type: ShorterNamingPipe, pure: true }); }
+}
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ShorterNamingPipe, [{
+        type: Pipe,
+        args: [{
+                name: 'shorterNaming',
+            }]
+    }], null, null); })();
+
+function DrChatDroppedFilesComponent_div_1_i_5_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "i", 6);
+    i0.ɵɵlistener("click", function DrChatDroppedFilesComponent_div_1_i_5_Template_i_click_0_listener($event) { i0.ɵɵrestoreView(_r5); const file_r1 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.removeFile(file_r1, $event)); });
+    i0.ɵɵelementEnd();
 } }
-function DrChatMessageFileComponent_a_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "a", 2);
-    i0.ɵɵtemplate(1, DrChatMessageFileComponent_a_1_i_1_Template, 1, 0, "i", 3);
-    i0.ɵɵtemplate(2, DrChatMessageFileComponent_a_1_div_2_Template, 1, 2, "div", 4);
+function DrChatDroppedFilesComponent_div_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵelement(1, "i", 3);
+    i0.ɵɵelementStart(2, "div", 4);
+    i0.ɵɵtext(3);
+    i0.ɵɵpipe(4, "shorterNaming");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, DrChatDroppedFilesComponent_div_1_i_5_Template, 1, 0, "i", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const file_r1 = ctx.$implicit;
-    i0.ɵɵproperty("href", file_r1.url, i0.ɵɵsanitizeUrl);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", !file_r1.urlStyle && file_r1.icon);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngIf", file_r1.urlStyle);
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(4, 2, file_r1.name, ctx_r0.maxLengthText));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r0.isRemovable);
 } }
+class DrChatDroppedFilesComponent {
+    constructor() {
+        this.isRemovable = false;
+        this.maxLengthText = 18;
+        this.removeFileEvent = new EventEmitter();
+    }
+    removeFile(file, event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.removeFileEvent.emit(file);
+    }
+    /** @nocollapse */ static { this.ɵfac = function DrChatDroppedFilesComponent_Factory(t) { return new (t || DrChatDroppedFilesComponent)(); }; }
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrChatDroppedFilesComponent, selectors: [["dr-chat-dropped-files"]], inputs: { files: "files", isRemovable: "isRemovable", maxLengthText: "maxLengthText" }, outputs: { removeFileEvent: "removeFileEvent" }, decls: 2, vars: 1, consts: [[1, "dropped-files"], ["class", "dropped-files__item", 4, "ngFor", "ngForOf"], [1, "dropped-files__item"], [1, "dr-icon-file"], [1, "dropped-files__item-name"], ["class", "dr-icon-noty-error dropped-files__item-remove", 3, "click", 4, "ngIf"], [1, "dr-icon-noty-error", "dropped-files__item-remove", 3, "click"]], template: function DrChatDroppedFilesComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵtemplate(1, DrChatDroppedFilesComponent_div_1_Template, 6, 5, "div", 1);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(1);
+            i0.ɵɵproperty("ngForOf", ctx.files);
+        } }, dependencies: [i1.NgForOf, i1.NgIf, ShorterNamingPipe], styles: [".dropped-files[_ngcontent-%COMP%]{display:flex;flex-direction:row;margin-bottom:.5rem;flex-wrap:wrap;gap:8px;padding-left:16px}.dropped-files__item[_ngcontent-%COMP%]{max-width:183px;display:flex;flex-direction:row;gap:4px;justify-content:space-between;align-items:center;margin-top:16px;padding:4px 8px;background-color:#f6f7f8;border:1px solid rgb(223,224,227);box-sizing:border-box;border-radius:8px}.dropped-files__item-name[_ngcontent-%COMP%]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Poppins,sans-serif;font-size:12px;line-height:20px;font-weight:500;font-weight:400;color:#6d6e6f}.dropped-files__item-remove[_ngcontent-%COMP%]{cursor:pointer;color:#6d6e6f}"], changeDetection: 0 }); }
+}
+(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrChatDroppedFilesComponent, [{
+        type: Component,
+        args: [{ selector: 'dr-chat-dropped-files', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dropped-files\">\n    <div class=\"dropped-files__item\" *ngFor=\"let file of files\">\n        <i class=\"dr-icon-file\"></i>\n        <div class=\"dropped-files__item-name\">{{ file.name | shorterNaming: maxLengthText }}</div>\n        <i *ngIf=\"isRemovable\" class=\"dr-icon-noty-error dropped-files__item-remove\" (click)=\"removeFile(file, $event)\"></i>\n    </div>\n</div>\n", styles: [".dropped-files{display:flex;flex-direction:row;margin-bottom:.5rem;flex-wrap:wrap;gap:8px;padding-left:16px}.dropped-files__item{max-width:183px;display:flex;flex-direction:row;gap:4px;justify-content:space-between;align-items:center;margin-top:16px;padding:4px 8px;background-color:#f6f7f8;border:1px solid rgb(223,224,227);box-sizing:border-box;border-radius:8px}.dropped-files__item-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Poppins,sans-serif;font-size:12px;line-height:20px;font-weight:500;font-weight:400;color:#6d6e6f}.dropped-files__item-remove{cursor:pointer;color:#6d6e6f}\n"] }]
+    }], null, { files: [{
+            type: Input
+        }], isRemovable: [{
+            type: Input
+        }], maxLengthText: [{
+            type: Input
+        }], removeFileEvent: [{
+            type: Output
+        }] }); })();
+
 /**
  * Chat message component.
  */
 class DrChatMessageFileComponent {
-    /**
-     * Message file path
-     *
-     * @type {Date}
-     */
-    set files(files) {
-        this.readyFiles = (files || []).map((file) => {
-            const isImage = this.isImage(file);
-            return {
-                ...file,
-                urlStyle: isImage && this.domSanitizer.bypassSecurityTrustStyle(`url(${file.url})`),
-                isImage,
-            };
-        });
-        this.cd.detectChanges();
-    }
     constructor(cd, domSanitizer) {
         this.cd = cd;
         this.domSanitizer = domSanitizer;
     }
-    isImage(file) {
-        const type = file.type;
-        if (type) {
-            return IMAGE_TYPES.includes(type);
-        }
-        return false;
-    }
     /** @nocollapse */ static { this.ɵfac = function DrChatMessageFileComponent_Factory(t) { return new (t || DrChatMessageFileComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$5.DomSanitizer)); }; }
-    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrChatMessageFileComponent, selectors: [["dr-chat-message-file"]], inputs: { message: "message", files: "files" }, decls: 2, vars: 1, consts: [[1, "message-content-group"], ["target", "_blank", 3, "href", 4, "ngFor", "ngForOf"], ["target", "_blank", 3, "href"], ["class", "dr-icon-file", 4, "ngIf"], [3, "background-image", 4, "ngIf"], [1, "dr-icon-file"]], template: function DrChatMessageFileComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0);
-            i0.ɵɵtemplate(1, DrChatMessageFileComponent_a_1_Template, 3, 3, "a", 1);
-            i0.ɵɵelementEnd();
+    /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrChatMessageFileComponent, selectors: [["dr-chat-message-file"]], inputs: { files: "files" }, decls: 1, vars: 1, consts: [[3, "files"]], template: function DrChatMessageFileComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelement(0, "dr-chat-dropped-files", 0);
         } if (rf & 2) {
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngForOf", ctx.readyFiles);
-        } }, dependencies: [i1.NgForOf, i1.NgIf], encapsulation: 2, changeDetection: 0 }); }
+            i0.ɵɵproperty("files", ctx.files);
+        } }, dependencies: [DrChatDroppedFilesComponent], encapsulation: 2, changeDetection: 0 }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DrChatMessageFileComponent, [{
         type: Component,
-        args: [{ selector: 'dr-chat-message-file', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"message-content-group\">\n    <a *ngFor=\"let file of readyFiles\" [href]=\"file.url\" target=\"_blank\">\n        <i class=\"dr-icon-file\" *ngIf=\"!file.urlStyle && file.icon\"></i>\n        <div *ngIf=\"file.urlStyle\" [style.background-image]=\"file.urlStyle\"></div>\n    </a>\n</div>\n" }]
-    }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$5.DomSanitizer }]; }, { message: [{
-            type: Input
-        }], files: [{
+        args: [{ selector: 'dr-chat-message-file', changeDetection: ChangeDetectionStrategy.OnPush, template: "<dr-chat-dropped-files [files]=\"files\"></dr-chat-dropped-files>\n" }]
+    }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$5.DomSanitizer }]; }, { files: [{
             type: Input
         }] }); })();
 
 const _c0$q = ["drChatMessageActions"];
 function DrChatMessageComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelement(1, "div", 7);
+    i0.ɵɵelement(1, "div", 8);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -6069,19 +6106,19 @@ function DrChatMessageComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵstyleProp("background-image", "url(" + ctx_r0.message.avatarUrl + ")");
 } }
 function DrChatMessageComponent_ng_template_1_dr_avatar_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "dr-avatar", 10);
+    i0.ɵɵelement(0, "dr-avatar", 11);
 } if (rf & 2) {
     const ctx_r7 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("users", ctx_r7.message.user);
 } }
 function DrChatMessageComponent_ng_template_1_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 11);
-    i0.ɵɵelement(1, "i", 12);
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵelement(1, "i", 13);
     i0.ɵɵelementEnd();
 } }
 function DrChatMessageComponent_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, DrChatMessageComponent_ng_template_1_dr_avatar_0_Template, 1, 1, "dr-avatar", 8);
-    i0.ɵɵtemplate(1, DrChatMessageComponent_ng_template_1_div_1_Template, 2, 0, "div", 9);
+    i0.ɵɵtemplate(0, DrChatMessageComponent_ng_template_1_dr_avatar_0_Template, 1, 1, "dr-avatar", 9);
+    i0.ɵɵtemplate(1, DrChatMessageComponent_ng_template_1_div_1_Template, 2, 0, "div", 10);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ngIf", ctx_r2.message.user);
@@ -6089,20 +6126,20 @@ function DrChatMessageComponent_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", !ctx_r2.message.user);
 } }
 function DrChatMessageComponent_dr_chat_message_text_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "dr-chat-message-text", 13);
+    i0.ɵɵelement(0, "dr-chat-message-text", 14);
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
     i0.ɵɵproperty("message", ctx_r3.message);
 } }
 function DrChatMessageComponent_dr_chat_message_file_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "dr-chat-message-file", 13);
+    i0.ɵɵelement(0, "dr-chat-message-file", 15);
 } if (rf & 2) {
     const ctx_r4 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("message", ctx_r4.message);
+    i0.ɵɵproperty("files", ctx_r4.message.files);
 } }
 function DrChatMessageComponent_ng_container_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementContainer(1, 14);
+    i0.ɵɵelementContainer(1, 16);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r5 = i0.ɵɵnextContext();
@@ -6110,8 +6147,8 @@ function DrChatMessageComponent_ng_container_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r5.getTemplate())("ngTemplateOutletContext", ctx_r5.getTemplateContext());
 } }
 function DrChatMessageComponent_div_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 15);
-    i0.ɵɵelementContainer(1, 16);
+    i0.ɵɵelementStart(0, "div", 17);
+    i0.ɵɵelementContainer(1, 18);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r6 = i0.ɵɵnextContext();
@@ -6167,16 +6204,16 @@ class DrChatMessageComponent {
         } }, hostVars: 5, hostBindings: function DrChatMessageComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵsyntheticHostProperty("@flyInOut", ctx.flyInOut);
             i0.ɵɵclassProp("not-reply", ctx.notReply)("reply", ctx.reply);
-        } }, inputs: { reply: "reply", type: "type", message: "message", customMessageData: "customMessageData", user: "user" }, decls: 9, vars: 9, consts: [[4, "ngIf", "ngIfElse"], ["userAvatar", ""], [1, "message", 3, "ngClass"], [3, "ngSwitch"], [3, "message", 4, "ngSwitchCase"], [4, "ngSwitchDefault"], ["class", "message__actions", 4, "ngIf"], [1, "avatar"], [3, "users", 4, "ngIf"], ["class", "genius-avatar", 4, "ngIf"], [3, "users"], [1, "genius-avatar"], [1, "dr-icon-genius-sparks"], [3, "message"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "message__actions"], [3, "ngTemplateOutlet"]], template: function DrChatMessageComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { reply: "reply", type: "type", message: "message", customMessageData: "customMessageData", user: "user" }, decls: 9, vars: 9, consts: [[4, "ngIf", "ngIfElse"], ["userAvatar", ""], [1, "message", 3, "ngClass"], [3, "ngSwitch"], [3, "message", 4, "ngSwitchCase"], [3, "files", 4, "ngSwitchCase"], [4, "ngSwitchDefault"], ["class", "message__actions", 4, "ngIf"], [1, "avatar"], [3, "users", 4, "ngIf"], ["class", "genius-avatar", 4, "ngIf"], [3, "users"], [1, "genius-avatar"], [1, "dr-icon-genius-sparks"], [3, "message"], [3, "files"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "message__actions"], [3, "ngTemplateOutlet"]], template: function DrChatMessageComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, DrChatMessageComponent_ng_container_0_Template, 2, 2, "ng-container", 0);
             i0.ɵɵtemplate(1, DrChatMessageComponent_ng_template_1_Template, 2, 2, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
             i0.ɵɵelementStart(3, "div", 2);
             i0.ɵɵelementContainerStart(4, 3);
             i0.ɵɵtemplate(5, DrChatMessageComponent_dr_chat_message_text_5_Template, 1, 1, "dr-chat-message-text", 4);
-            i0.ɵɵtemplate(6, DrChatMessageComponent_dr_chat_message_file_6_Template, 1, 1, "dr-chat-message-file", 4);
-            i0.ɵɵtemplate(7, DrChatMessageComponent_ng_container_7_Template, 2, 2, "ng-container", 5);
+            i0.ɵɵtemplate(6, DrChatMessageComponent_dr_chat_message_file_6_Template, 1, 1, "dr-chat-message-file", 5);
+            i0.ɵɵtemplate(7, DrChatMessageComponent_ng_container_7_Template, 2, 2, "ng-container", 6);
             i0.ɵɵelementContainerEnd();
-            i0.ɵɵtemplate(8, DrChatMessageComponent_div_8_Template, 2, 1, "div", 6);
+            i0.ɵɵtemplate(8, DrChatMessageComponent_div_8_Template, 2, 1, "div", 7);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             const _r1 = i0.ɵɵreference(2);
@@ -6208,7 +6245,7 @@ class DrChatMessageComponent {
                         transition('void => *', [style({ transform: 'translateX(-100%)' }), animate(80)]),
                         transition('* => void', [animate(80, style({ transform: 'translateX(100%)' }))]),
                     ]),
-                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"message.avatarUrl; else userAvatar\">\n    <div class=\"avatar\" [style.background-image]=\"'url(' + message.avatarUrl + ')'\"></div>\n</ng-container>\n<ng-template #userAvatar>\n    <dr-avatar *ngIf=\"message.user\" [users]=\"message.user\"></dr-avatar>\n\n    <div *ngIf=\"!message.user\" class=\"genius-avatar\">\n        <i class=\"dr-icon-genius-sparks\"></i>\n    </div>\n</ng-template>\n<div class=\"message\" [class.message--custom]=\"customMessage\" [ngClass]=\"applyMessageGroupClass(message)\">\n    <ng-container [ngSwitch]=\"message.kind\">\n        <dr-chat-message-text *ngSwitchCase=\"MESSAGE_TYPE.TEXT\" [message]=\"message\"></dr-chat-message-text>\n        <dr-chat-message-file *ngSwitchCase=\"MESSAGE_TYPE.DOWNLOAD_FILE\" [message]=\"message\"></dr-chat-message-file>\n        <ng-container *ngSwitchDefault>\n            <ng-container [ngTemplateOutlet]=\"getTemplate()\" [ngTemplateOutletContext]=\"getTemplateContext()\"></ng-container>\n        </ng-container>\n    </ng-container>\n    <div class=\"message__actions\" *ngIf=\"drChatMessageActions\">\n        <ng-container [ngTemplateOutlet]=\"drChatMessageActions\"></ng-container>\n    </div>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:row;width:100%;background:#f9faffb3;border-top:1px solid #e5e5e5;padding:16px}:host:first-child{border:none}:host:last-child{border-bottom:1px solid #e5e5e5}.reply+:host.reply,.not-reply+:host.not-reply{border-top:none;padding-top:0;padding-left:60px}.reply+:host.reply .avatar,.reply+:host.reply dr-avatar,.not-reply+:host.not-reply .avatar,.not-reply+:host.not-reply dr-avatar{display:none}:host.not-reply{background-color:#fff}:host .avatar{display:flex;width:28px;height:28px;background-color:#fff;border-radius:16px;flex-shrink:0;border:1px solid #dfe0e3;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 viewBox%3D%220 0 74 65%22%3E  %3Cdefs%3E    %3Cstyle%3E      .cls-1%2C .cls-2%2C .cls-3 %7B        fill%3A none%3B      %7D      .cls-4 %7B        fill%3A url(%23linear-gradient)%3B      %7D      .cls-5 %7B        fill%3A %234eb7df%3B      %7D      .cls-2 %7B        stroke%3A %23a6a8aa%3B        stroke-miterlimit%3A 10%3B        stroke-width%3A .37px%3B      %7D      .cls-6 %7B        fill%3A url(%23linear-gradient-3)%3B      %7D      .cls-7 %7B        fill%3A url(%23linear-gradient-2)%3B      %7D      .cls-3 %7B        clip-path%3A url(%23clippath)%3B      %7D    %3C%2Fstyle%3E    %3CclipPath id%3D%22clippath%22%3E      %3Crect class%3D%22cls-1%22 width%3D%2274%22 height%3D%2265%22%2F%3E    %3C%2FclipPath%3E    %3ClinearGradient id%3D%22linear-gradient%22 x1%3D%2224.26%22 y1%3D%22-3.79%22 x2%3D%2295.63%22 y2%3D%2288.82%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%220%22 stop-color%3D%22%237676ff%22%2F%3E      %3Cstop offset%3D%22.18%22 stop-color%3D%22%235959ff%22%2F%3E      %3Cstop offset%3D%22.35%22 stop-color%3D%22%235757e0%22%2F%3E      %3Cstop offset%3D%22.61%22 stop-color%3D%22%234646ce%22%2F%3E      %3Cstop offset%3D%22.84%22 stop-color%3D%22%234b4be4%22%2F%3E      %3Cstop offset%3D%221%22 stop-color%3D%22%234444eb%22%2F%3E    %3C%2FlinearGradient%3E    %3ClinearGradient id%3D%22linear-gradient-2%22 x1%3D%2212.05%22 y1%3D%2277.06%22 x2%3D%2210.77%22 y2%3D%2213.85%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%22.45%22 stop-color%3D%22%232f92b8%22%2F%3E      %3Cstop offset%3D%22.84%22 stop-color%3D%22%234eb7df%22%2F%3E      %3Cstop offset%3D%221%22 stop-color%3D%22%234eb7df%22%2F%3E    %3C%2FlinearGradient%3E    %3ClinearGradient id%3D%22linear-gradient-3%22 x1%3D%2262.26%22 y1%3D%22-2.54%22 x2%3D%2261.76%22 y2%3D%2285.91%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%220%22 stop-color%3D%22%2336369b%22%2F%3E      %3Cstop offset%3D%22.52%22 stop-color%3D%22%234848d0%22%2F%3E    %3C%2FlinearGradient%3E  %3C%2Fdefs%3E  %3Cg class%3D%22cls-3%22%3E    %3Cg%3E      %3Cpath class%3D%22cls-4%22 d%3D%22m73.32%2C24.79v15.73c0%2C13.12-9.87%2C23.79-22%2C23.79h-21.32c-3.46-.06-6.25-3.11-6.25-6.87s2.79-6.81%2C6.25-6.87h21.32c5.13%2C0%2C9.29-4.51%2C9.29-10.05v-15.73c0-5.54-4.17-10.05-9.29-10.05h-7.46c3.51%2C0%2C6.35-3.08%2C6.35-6.88s-2.79-6.8-6.25-6.87h7.35c12.12%2C0%2C22%2C10.67%2C22%2C23.79h0Z%22%2F%3E      %3Cpath class%3D%22cls-5%22 d%3D%22m50.26%2C7.82c0%2C3.8-2.9%2C6.93-6.41%2C6.93h-21.86c-5.13%2C0-9.29%2C4.51-9.29%2C10.05v15.73c0%2C5.54%2C4.17%2C10.05%2C9.29%2C10.05h8.01c-3.46.06-6.25%2C3.11-6.25%2C6.87s2.79%2C6.81%2C6.25%2C6.87h-8.01c-12.12%2C0-22-10.67-22-23.79v-15.73C0%2C11.68%2C9.87%2C1%2C21.99%2C1h21.97c3.46.06%2C6.3%2C3.06%2C6.3%2C6.82Z%22%2F%3E      %3Cpath class%3D%22cls-2%22 d%3D%22m66.45%2C1h-.22.22%2C0Z%22%2F%3E      %3Cpath class%3D%22cls-2%22 d%3D%22m36.05%2C50.58h-.22.22%2C0Z%22%2F%3E      %3Cpath class%3D%22cls-7%22 d%3D%22m0%2C33.78v-2.76C0%2C12.9%2C13.62%2C14.48%2C13.62%2C14.48h8.38c-5.5.46-9.5%2C4.71-9.5%2C9.96l.02%2C15.8c0%2C5.54%2C4.44%2C10.59%2C9.48%2C10.59l-8-.5S0%2C51.88%2C0%2C33.77h0Z%22%2F%3E      %3Cpath class%3D%22cls-6%22 d%3D%22m73%2C31.51v2.76c0%2C18.12-13.62%2C16.53-13.62%2C16.53h-7.99c5.61-.85%2C9.09-4.76%2C9.09-10.02l.02-16.33c0-5.54-4.46-10-9.5-10h8s13.99-1.05%2C13.99%2C17.07h0Z%22%2F%3E    %3C%2Fg%3E  %3C%2Fg%3E%3C%2Fsvg%3E\");background-size:18px;background-repeat:no-repeat;background-position-x:4px;background-position-y:5px}:host .genius-avatar{position:relative;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:16px;flex-shrink:0;border:1px solid #dfe0e3;background:#fff}:host .genius-avatar i{font-size:22px;background:linear-gradient(88.5deg,#4eb7df 10%,#6969ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host .avatar,:host .genius-avatar,:host dr-avatar{margin:0 16px 0 0}:host .avatar::ng-deep .users-section__user,:host .genius-avatar::ng-deep .users-section__user,:host dr-avatar::ng-deep .users-section__user{border:1px solid #dfe0e3}:host .message{display:flex;align-items:center;flex-grow:1}:host .message__actions{display:flex;align-items:center;margin-top:12px;flex-grow:1;justify-content:flex-start}:host .message__actions::ng-deep button:not(:hover) i[class*=dr-icon]{color:#b9b9ec!important}:host .messageGroup{display:flex;flex-direction:column;align-items:flex-start}\n"] }]
+                ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"message.avatarUrl; else userAvatar\">\n    <div class=\"avatar\" [style.background-image]=\"'url(' + message.avatarUrl + ')'\"></div>\n</ng-container>\n<ng-template #userAvatar>\n    <dr-avatar *ngIf=\"message.user\" [users]=\"message.user\"></dr-avatar>\n\n    <div *ngIf=\"!message.user\" class=\"genius-avatar\">\n        <i class=\"dr-icon-genius-sparks\"></i>\n    </div>\n</ng-template>\n<div class=\"message\" [class.message--custom]=\"customMessage\" [ngClass]=\"applyMessageGroupClass(message)\">\n    <ng-container [ngSwitch]=\"message.kind\">\n        <dr-chat-message-text *ngSwitchCase=\"MESSAGE_TYPE.TEXT\" [message]=\"message\"></dr-chat-message-text>\n        <dr-chat-message-file *ngSwitchCase=\"MESSAGE_TYPE.DOWNLOAD_FILE\" [files]=\"message.files\"></dr-chat-message-file>\n        <ng-container *ngSwitchDefault>\n            <ng-container [ngTemplateOutlet]=\"getTemplate()\" [ngTemplateOutletContext]=\"getTemplateContext()\"></ng-container>\n        </ng-container>\n    </ng-container>\n    <div class=\"message__actions\" *ngIf=\"drChatMessageActions\">\n        <ng-container [ngTemplateOutlet]=\"drChatMessageActions\"></ng-container>\n    </div>\n</div>\n", styles: [":host{position:relative;display:flex;flex-direction:row;width:100%;background:#f9faffb3;border-top:1px solid #e5e5e5;padding:16px}:host:first-child{border:none}:host:last-child{border-bottom:1px solid #e5e5e5}.reply+:host.reply,.not-reply+:host.not-reply{border-top:none;padding-top:0;padding-left:60px}.reply+:host.reply .avatar,.reply+:host.reply dr-avatar,.not-reply+:host.not-reply .avatar,.not-reply+:host.not-reply dr-avatar{display:none}:host.not-reply{background-color:#fff}:host .avatar{display:flex;width:28px;height:28px;background-color:#fff;border-radius:16px;flex-shrink:0;border:1px solid #dfe0e3;background-image:url(\"data:image/svg+xml,%3C%3Fxml version%3D%221.0%22 encoding%3D%22UTF-8%22%3F%3E%3Csvg id%3D%22Layer_1%22 data-name%3D%22Layer 1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22 viewBox%3D%220 0 74 65%22%3E  %3Cdefs%3E    %3Cstyle%3E      .cls-1%2C .cls-2%2C .cls-3 %7B        fill%3A none%3B      %7D      .cls-4 %7B        fill%3A url(%23linear-gradient)%3B      %7D      .cls-5 %7B        fill%3A %234eb7df%3B      %7D      .cls-2 %7B        stroke%3A %23a6a8aa%3B        stroke-miterlimit%3A 10%3B        stroke-width%3A .37px%3B      %7D      .cls-6 %7B        fill%3A url(%23linear-gradient-3)%3B      %7D      .cls-7 %7B        fill%3A url(%23linear-gradient-2)%3B      %7D      .cls-3 %7B        clip-path%3A url(%23clippath)%3B      %7D    %3C%2Fstyle%3E    %3CclipPath id%3D%22clippath%22%3E      %3Crect class%3D%22cls-1%22 width%3D%2274%22 height%3D%2265%22%2F%3E    %3C%2FclipPath%3E    %3ClinearGradient id%3D%22linear-gradient%22 x1%3D%2224.26%22 y1%3D%22-3.79%22 x2%3D%2295.63%22 y2%3D%2288.82%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%220%22 stop-color%3D%22%237676ff%22%2F%3E      %3Cstop offset%3D%22.18%22 stop-color%3D%22%235959ff%22%2F%3E      %3Cstop offset%3D%22.35%22 stop-color%3D%22%235757e0%22%2F%3E      %3Cstop offset%3D%22.61%22 stop-color%3D%22%234646ce%22%2F%3E      %3Cstop offset%3D%22.84%22 stop-color%3D%22%234b4be4%22%2F%3E      %3Cstop offset%3D%221%22 stop-color%3D%22%234444eb%22%2F%3E    %3C%2FlinearGradient%3E    %3ClinearGradient id%3D%22linear-gradient-2%22 x1%3D%2212.05%22 y1%3D%2277.06%22 x2%3D%2210.77%22 y2%3D%2213.85%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%22.45%22 stop-color%3D%22%232f92b8%22%2F%3E      %3Cstop offset%3D%22.84%22 stop-color%3D%22%234eb7df%22%2F%3E      %3Cstop offset%3D%221%22 stop-color%3D%22%234eb7df%22%2F%3E    %3C%2FlinearGradient%3E    %3ClinearGradient id%3D%22linear-gradient-3%22 x1%3D%2262.26%22 y1%3D%22-2.54%22 x2%3D%2261.76%22 y2%3D%2285.91%22 gradientTransform%3D%22translate(0 65.89) scale(1 -1)%22 gradientUnits%3D%22userSpaceOnUse%22%3E      %3Cstop offset%3D%220%22 stop-color%3D%22%2336369b%22%2F%3E      %3Cstop offset%3D%22.52%22 stop-color%3D%22%234848d0%22%2F%3E    %3C%2FlinearGradient%3E  %3C%2Fdefs%3E  %3Cg class%3D%22cls-3%22%3E    %3Cg%3E      %3Cpath class%3D%22cls-4%22 d%3D%22m73.32%2C24.79v15.73c0%2C13.12-9.87%2C23.79-22%2C23.79h-21.32c-3.46-.06-6.25-3.11-6.25-6.87s2.79-6.81%2C6.25-6.87h21.32c5.13%2C0%2C9.29-4.51%2C9.29-10.05v-15.73c0-5.54-4.17-10.05-9.29-10.05h-7.46c3.51%2C0%2C6.35-3.08%2C6.35-6.88s-2.79-6.8-6.25-6.87h7.35c12.12%2C0%2C22%2C10.67%2C22%2C23.79h0Z%22%2F%3E      %3Cpath class%3D%22cls-5%22 d%3D%22m50.26%2C7.82c0%2C3.8-2.9%2C6.93-6.41%2C6.93h-21.86c-5.13%2C0-9.29%2C4.51-9.29%2C10.05v15.73c0%2C5.54%2C4.17%2C10.05%2C9.29%2C10.05h8.01c-3.46.06-6.25%2C3.11-6.25%2C6.87s2.79%2C6.81%2C6.25%2C6.87h-8.01c-12.12%2C0-22-10.67-22-23.79v-15.73C0%2C11.68%2C9.87%2C1%2C21.99%2C1h21.97c3.46.06%2C6.3%2C3.06%2C6.3%2C6.82Z%22%2F%3E      %3Cpath class%3D%22cls-2%22 d%3D%22m66.45%2C1h-.22.22%2C0Z%22%2F%3E      %3Cpath class%3D%22cls-2%22 d%3D%22m36.05%2C50.58h-.22.22%2C0Z%22%2F%3E      %3Cpath class%3D%22cls-7%22 d%3D%22m0%2C33.78v-2.76C0%2C12.9%2C13.62%2C14.48%2C13.62%2C14.48h8.38c-5.5.46-9.5%2C4.71-9.5%2C9.96l.02%2C15.8c0%2C5.54%2C4.44%2C10.59%2C9.48%2C10.59l-8-.5S0%2C51.88%2C0%2C33.77h0Z%22%2F%3E      %3Cpath class%3D%22cls-6%22 d%3D%22m73%2C31.51v2.76c0%2C18.12-13.62%2C16.53-13.62%2C16.53h-7.99c5.61-.85%2C9.09-4.76%2C9.09-10.02l.02-16.33c0-5.54-4.46-10-9.5-10h8s13.99-1.05%2C13.99%2C17.07h0Z%22%2F%3E    %3C%2Fg%3E  %3C%2Fg%3E%3C%2Fsvg%3E\");background-size:18px;background-repeat:no-repeat;background-position-x:4px;background-position-y:5px}:host .genius-avatar{position:relative;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:16px;flex-shrink:0;border:1px solid #dfe0e3;background:#fff}:host .genius-avatar i{font-size:22px;background:linear-gradient(88.5deg,#4eb7df 10%,#6969ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}:host .avatar,:host .genius-avatar,:host dr-avatar{margin:0 16px 0 0}:host .avatar::ng-deep .users-section__user,:host .genius-avatar::ng-deep .users-section__user,:host dr-avatar::ng-deep .users-section__user{border:1px solid #dfe0e3}:host .message{display:flex;align-items:center;flex-grow:1}:host .message__actions{display:flex;align-items:center;margin-top:12px;flex-grow:1;justify-content:flex-start}:host .message__actions::ng-deep button:not(:hover) i[class*=dr-icon]{color:#b9b9ec!important}:host .messageGroup{display:flex;flex-direction:column;align-items:flex-start}\n"] }]
     }], function () { return [{ type: DrChatCustomMessageService }]; }, { flyInOut: [{
             type: HostBinding,
             args: ['@flyInOut']
@@ -10529,11 +10566,11 @@ class DialogModalWrapperComponent {
             i0.ɵɵproperty("ngIf", ctx.dialogData.fields);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngIf", ctx.dialogData.cancelButton || ctx.dialogData.acceptButton);
-        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, DrButtonComponent, CheckboxComponent, DrInputComponent, DrSelectComponent, DrDatePickerComponent, i1$2.ɵNgNoValidate, i1$2.NgControlStatus, i1$2.NgControlStatusGroup, i1$2.RequiredValidator, i1$2.FormGroupDirective, i1$2.FormControlName, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{display:flex;justify-content:space-between;flex-direction:column}.small-modal[_nghost-%COMP%], .small-modal-max-height[_nghost-%COMP%]{min-height:188px;max-height:467px;min-width:400px;max-width:400px}.medium-modal[_nghost-%COMP%], .medium-modal-max-height[_nghost-%COMP%]{min-height:188px;max-height:467px;min-width:632px;max-width:632px}.medium-small-modal[_nghost-%COMP%]{min-height:188px;max-height:345px;min-width:460px;max-width:460px}.medium-modal-max-height[_nghost-%COMP%], .small-modal-max-height[_nghost-%COMP%]{max-height:80vh}.header-dialog[_ngcontent-%COMP%]{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 56px 16px 32px;border-bottom:1px solid #dfe0e3}.header-dialog[_ngcontent-%COMP%] > .icon-close[_ngcontent-%COMP%]{position:absolute;right:32px;top:16px;cursor:pointer}.title-dialog[_ngcontent-%COMP%]{display:flex;color:#333;position:static;font-weight:600;font-size:16px;line-height:24px;margin-top:0;margin-bottom:0}.title-dialog__icon[_ngcontent-%COMP%]{font-size:32px;margin-right:8px;line-height:24px;color:#6d6e6f}.content-dialog[_ngcontent-%COMP%]{font-weight:400;font-size:14px;padding:16px 32px 5px;white-space:pre-line}.icon-close[_ngcontent-%COMP%]{color:#6d6e6f;cursor:pointer}.dr-smart-from[_ngcontent-%COMP%]{font-size:14px;font-weight:400;line-height:22px;padding:8px 32px 24px}.dr-smart-from[_ngcontent-%COMP%]   dr-checkbox[_ngcontent-%COMP%]{font-weight:400}.content-dialog[_ngcontent-%COMP%]{padding:16px 32px 0;font-weight:400;font-size:14px;line-height:22px}.content-anchor[_ngcontent-%COMP%]{display:none}.footer-dialog[_ngcontent-%COMP%]{border-top:1px solid #dfe0e3}.buttons-wrapper[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;padding:10px 32px 11px}.buttons-wrapper[_ngcontent-%COMP%]   dr-button[_ngcontent-%COMP%]:nth-of-type(n+2){margin-left:12px}.buttons-wrapper--custom-btn[_ngcontent-%COMP%]{margin-right:auto}.form-field-error-alert[_ngcontent-%COMP%]{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert[_ngcontent-%COMP%]{position:absolute;margin-top:5px;font-size:12px;color:#bf1d30}.dr-select-footer__btn[_ngcontent-%COMP%]{background-color:transparent;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}"] }); }
+        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, DrButtonComponent, CheckboxComponent, DrInputComponent, DrSelectComponent, DrDatePickerComponent, i1$2.ɵNgNoValidate, i1$2.NgControlStatus, i1$2.NgControlStatusGroup, i1$2.RequiredValidator, i1$2.FormGroupDirective, i1$2.FormControlName, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{display:flex;justify-content:space-between;flex-direction:column}.small-modal[_nghost-%COMP%], .small-modal-max-height[_nghost-%COMP%]{min-height:188px;max-height:467px;min-width:400px;max-width:400px}.medium-modal[_nghost-%COMP%], .medium-modal-max-height[_nghost-%COMP%]{min-height:188px;max-height:467px;min-width:632px;max-width:632px}.medium-small-modal[_nghost-%COMP%]{min-height:188px;max-height:345px;min-width:460px;max-width:460px}.medium-modal-max-height[_nghost-%COMP%], .small-modal-max-height[_nghost-%COMP%]{max-height:80vh}.header-dialog[_ngcontent-%COMP%]{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 56px 16px 32px;border-bottom:1px solid #dfe0e3}.header-dialog[_ngcontent-%COMP%] > .icon-close[_ngcontent-%COMP%]{position:absolute;right:32px;top:16px;cursor:pointer}.title-dialog[_ngcontent-%COMP%]{display:flex;color:#333;position:static;font-weight:600;font-size:16px;line-height:24px;margin-top:0;margin-bottom:0}.title-dialog__icon[_ngcontent-%COMP%]{font-size:32px;margin-right:8px;line-height:24px;color:#6d6e6f}.content-dialog[_ngcontent-%COMP%]{font-weight:400;font-size:14px;padding:16px 32px 5px;white-space:pre-line;overflow:auto}.icon-close[_ngcontent-%COMP%]{color:#6d6e6f;cursor:pointer}.dr-smart-from[_ngcontent-%COMP%]{font-size:14px;font-weight:400;line-height:22px;padding:8px 32px 24px}.dr-smart-from[_ngcontent-%COMP%]   dr-checkbox[_ngcontent-%COMP%]{font-weight:400}.content-dialog[_ngcontent-%COMP%]{padding:16px 32px 0;font-weight:400;font-size:14px;line-height:22px}.content-anchor[_ngcontent-%COMP%]{display:none}.footer-dialog[_ngcontent-%COMP%]{border-top:1px solid #dfe0e3}.buttons-wrapper[_ngcontent-%COMP%]{display:flex;justify-content:flex-end;padding:10px 32px 11px}.buttons-wrapper[_ngcontent-%COMP%]   dr-button[_ngcontent-%COMP%]:nth-of-type(n+2){margin-left:12px}.buttons-wrapper--custom-btn[_ngcontent-%COMP%]{margin-right:auto}.form-field-error-alert[_ngcontent-%COMP%]{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert[_ngcontent-%COMP%]{position:absolute;margin-top:5px;font-size:12px;color:#bf1d30}.dr-select-footer__btn[_ngcontent-%COMP%]{background-color:transparent;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}"] }); }
 }
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DialogModalWrapperComponent, [{
         type: Component,
-        args: [{ selector: 'dr-dialog-modal-wrapper', template: "<div header class=\"header-dialog\">\n    <h1 class=\"title-dialog\" data-test=\"modalTitle\">\n        <i\n            *ngIf=\"dialogData.headerIconClass\"\n            (click)=\"closeDialog()\"\n            class=\"title-dialog__icon\"\n            [class]=\"dialogData.headerIconClass\"\n            data-test=\"dialogTitleIcon\"></i>\n        <span class=\"title-dialog__text\">{{ dialogData.title }}</span>\n    </h1>\n    <i *ngIf=\"!dialogData.hideCloseBtn\" (click)=\"closeDialog()\" class=\"dr-icon-exit icon-close\" data-test=\"xBtn\"></i>\n</div>\n<div *ngIf=\"dialogData.content\" class=\"content-dialog\" [innerHTML]=\"dialogData.content\">\n    <span #content class=\"content-anchor\"></span>\n</div>\n<form *ngIf=\"dialogData.fields\" [formGroup]=\"form\" class=\"dr-smart-from\">\n    <div [class]=\"dialogData.formWrapperClass || 'dr-smart-form_wrapper'\">\n        <div\n            *ngFor=\"let field of dialogData.fields\"\n            class=\"dr-smart-form_group\"\n            [class]=\"field.formGroupClass\"\n            [ngStyle]=\"{ display: field.isLabelFullWidth ? 'block' : 'flex' }\">\n            <label\n                *ngIf=\"field.label && field.type !== dialogFieldType.CHECKBOX\"\n                [ngClass]=\"field.isLabelFullWidth ? 'col-md-12 mb-2' : 'col-md-2'\"\n                class=\"label p-0 d-flex align-items-center\"\n                >{{ field.label }}</label\n            >\n            <div\n                class=\"input-group p-0\"\n                [ngClass]=\"{\n                    'col-md-10': field.label && !field.isLabelFullWidth,\n                    'col-md-12': !field.label || field.isLabelFullWidth,\n                }\">\n                <dr-select\n                    *ngIf=\"field.type === dialogFieldType.SELECT\"\n                    [searchable]=\"dialogData.searchable\"\n                    [clearable]=\"dialogData.clearable\"\n                    [formControlName]=\"field.name\"\n                    [bindLabel]=\"field.bindLabel || null\"\n                    [bindValue]=\"field.bindValue || null\"\n                    [selectedItem]=\"field.default\"\n                    [items]=\"field.items || (field.items$ | async)\"\n                    [loading]=\"fieldsItemsLoading[field.name] | async\"\n                    [required]=\"true\"\n                    [placeholder]=\"field.placeholder\">\n                    <ng-template *ngIf=\"dialogData?.footerTemplateData\" #optionFooterTemplate let-item=\"item\" let-close=\"close\">\n                        <button (click)=\"footerAction(); close()\" class=\"dr-select-footer__btn\">\n                            <i *ngIf=\"dialogData.footerTemplateData.icon\" class=\"{{ dialogData.footerTemplateData.icon }}\"></i>\n                            {{ dialogData.footerTemplateData.label }}\n                        </button>\n                    </ng-template>\n                </dr-select>\n                <dr-input\n                    *ngIf=\"field.type === dialogFieldType.INPUT\"\n                    data-test=\"modalInput\"\n                    class=\"form-control\"\n                    [formControlName]=\"field.name\"\n                    [placeholder]=\"field.placeholder\"></dr-input>\n                <dr-date-picker\n                    *ngIf=\"field.type === dialogFieldType.DATE_PICKER\"\n                    [formControlName]=\"field.name\"\n                    [format]=\"field.datePickerFormat\"\n                    [placeholder]=\"field.placeholder\"></dr-date-picker>\n                <dr-checkbox *ngIf=\"field.type === dialogFieldType.CHECKBOX\" [formControlName]=\"field.name\">\n                    {{ field.label }}\n                </dr-checkbox>\n                <label\n                    class=\"form-field-error-alert\"\n                    *ngIf=\"form.invalid && form.controls[field.name]?.dirty && form.controls[field.name]?.errors\">\n                    {{ form.controls[field.name].errors.errorString }}\n                </label>\n                <label class=\"form-error-alert\" *ngIf=\"dialogData.errorMessage && !form.pristine && form.invalid\">\n                    {{ dialogData.errorMessage }}\n                </label>\n                <label class=\"form-error-alert\" *ngIf=\"form.valid && showServerErrorMessage && dialogData.serverErrorMessage\">\n                    {{ dialogData.serverErrorMessage }}\n                </label>\n            </div>\n        </div>\n    </div>\n</form>\n\n<div footer class=\"footer-dialog\">\n    <div class=\"buttons-wrapper\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <dr-button\n            (click)=\"onDecline()\"\n            *ngIf=\"dialogData.customButton\"\n            [theme]=\"dialogData.customButton?.theme || 'secondary'\"\n            class=\"buttons-wrapper--custom-btn\"\n            data-test=\"declineBtn\"\n            >{{ dialogData.customButton.label }}</dr-button\n        >\n        <dr-button *ngIf=\"dialogData.cancelButton\" data-test=\"modalCloseBtn\" (click)=\"closeDialog()\" [theme]=\"'secondary'\">{{\n            dialogData.cancelButton.label\n        }}</dr-button>\n        <dr-button\n            *ngIf=\"dialogData.acceptButton\"\n            data-test=\"modalAddBtn\"\n            (click)=\"onAccept()\"\n            [theme]=\"'primary'\"\n            [isLoading]=\"isLoading\"\n            [disabled]=\"form.invalid\"\n            >{{ dialogData.acceptButton.label }}</dr-button\n        >\n    </div>\n</div>\n", styles: [":host{display:flex;justify-content:space-between;flex-direction:column}:host.small-modal,:host.small-modal-max-height{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,:host.medium-modal-max-height{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.medium-small-modal{min-height:188px;max-height:345px;min-width:460px;max-width:460px}:host.medium-modal-max-height,:host.small-modal-max-height{max-height:80vh}.header-dialog{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 56px 16px 32px;border-bottom:1px solid #dfe0e3}.header-dialog>.icon-close{position:absolute;right:32px;top:16px;cursor:pointer}.title-dialog{display:flex;color:#333;position:static;font-weight:600;font-size:16px;line-height:24px;margin-top:0;margin-bottom:0}.title-dialog__icon{font-size:32px;margin-right:8px;line-height:24px;color:#6d6e6f}.content-dialog{font-weight:400;font-size:14px;padding:16px 32px 5px;white-space:pre-line}.icon-close{color:#6d6e6f;cursor:pointer}.dr-smart-from{font-size:14px;font-weight:400;line-height:22px;padding:8px 32px 24px}.dr-smart-from dr-checkbox{font-weight:400}.content-dialog{padding:16px 32px 0;font-weight:400;font-size:14px;line-height:22px}.content-anchor{display:none}.footer-dialog{border-top:1px solid #dfe0e3}.buttons-wrapper{display:flex;justify-content:flex-end;padding:10px 32px 11px}.buttons-wrapper dr-button:nth-of-type(n+2){margin-left:12px}.buttons-wrapper--custom-btn{margin-right:auto}.form-field-error-alert{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert{position:absolute;margin-top:5px;font-size:12px;color:#bf1d30}.dr-select-footer__btn{background-color:transparent;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}\n"] }]
+        args: [{ selector: 'dr-dialog-modal-wrapper', template: "<div header class=\"header-dialog\">\n    <h1 class=\"title-dialog\" data-test=\"modalTitle\">\n        <i\n            *ngIf=\"dialogData.headerIconClass\"\n            (click)=\"closeDialog()\"\n            class=\"title-dialog__icon\"\n            [class]=\"dialogData.headerIconClass\"\n            data-test=\"dialogTitleIcon\"></i>\n        <span class=\"title-dialog__text\">{{ dialogData.title }}</span>\n    </h1>\n    <i *ngIf=\"!dialogData.hideCloseBtn\" (click)=\"closeDialog()\" class=\"dr-icon-exit icon-close\" data-test=\"xBtn\"></i>\n</div>\n<div *ngIf=\"dialogData.content\" class=\"content-dialog\" [innerHTML]=\"dialogData.content\">\n    <span #content class=\"content-anchor\"></span>\n</div>\n<form *ngIf=\"dialogData.fields\" [formGroup]=\"form\" class=\"dr-smart-from\">\n    <div [class]=\"dialogData.formWrapperClass || 'dr-smart-form_wrapper'\">\n        <div\n            *ngFor=\"let field of dialogData.fields\"\n            class=\"dr-smart-form_group\"\n            [class]=\"field.formGroupClass\"\n            [ngStyle]=\"{ display: field.isLabelFullWidth ? 'block' : 'flex' }\">\n            <label\n                *ngIf=\"field.label && field.type !== dialogFieldType.CHECKBOX\"\n                [ngClass]=\"field.isLabelFullWidth ? 'col-md-12 mb-2' : 'col-md-2'\"\n                class=\"label p-0 d-flex align-items-center\"\n                >{{ field.label }}</label\n            >\n            <div\n                class=\"input-group p-0\"\n                [ngClass]=\"{\n                    'col-md-10': field.label && !field.isLabelFullWidth,\n                    'col-md-12': !field.label || field.isLabelFullWidth,\n                }\">\n                <dr-select\n                    *ngIf=\"field.type === dialogFieldType.SELECT\"\n                    [searchable]=\"dialogData.searchable\"\n                    [clearable]=\"dialogData.clearable\"\n                    [formControlName]=\"field.name\"\n                    [bindLabel]=\"field.bindLabel || null\"\n                    [bindValue]=\"field.bindValue || null\"\n                    [selectedItem]=\"field.default\"\n                    [items]=\"field.items || (field.items$ | async)\"\n                    [loading]=\"fieldsItemsLoading[field.name] | async\"\n                    [required]=\"true\"\n                    [placeholder]=\"field.placeholder\">\n                    <ng-template *ngIf=\"dialogData?.footerTemplateData\" #optionFooterTemplate let-item=\"item\" let-close=\"close\">\n                        <button (click)=\"footerAction(); close()\" class=\"dr-select-footer__btn\">\n                            <i *ngIf=\"dialogData.footerTemplateData.icon\" class=\"{{ dialogData.footerTemplateData.icon }}\"></i>\n                            {{ dialogData.footerTemplateData.label }}\n                        </button>\n                    </ng-template>\n                </dr-select>\n                <dr-input\n                    *ngIf=\"field.type === dialogFieldType.INPUT\"\n                    data-test=\"modalInput\"\n                    class=\"form-control\"\n                    [formControlName]=\"field.name\"\n                    [placeholder]=\"field.placeholder\"></dr-input>\n                <dr-date-picker\n                    *ngIf=\"field.type === dialogFieldType.DATE_PICKER\"\n                    [formControlName]=\"field.name\"\n                    [format]=\"field.datePickerFormat\"\n                    [placeholder]=\"field.placeholder\"></dr-date-picker>\n                <dr-checkbox *ngIf=\"field.type === dialogFieldType.CHECKBOX\" [formControlName]=\"field.name\">\n                    {{ field.label }}\n                </dr-checkbox>\n                <label\n                    class=\"form-field-error-alert\"\n                    *ngIf=\"form.invalid && form.controls[field.name]?.dirty && form.controls[field.name]?.errors\">\n                    {{ form.controls[field.name].errors.errorString }}\n                </label>\n                <label class=\"form-error-alert\" *ngIf=\"dialogData.errorMessage && !form.pristine && form.invalid\">\n                    {{ dialogData.errorMessage }}\n                </label>\n                <label class=\"form-error-alert\" *ngIf=\"form.valid && showServerErrorMessage && dialogData.serverErrorMessage\">\n                    {{ dialogData.serverErrorMessage }}\n                </label>\n            </div>\n        </div>\n    </div>\n</form>\n\n<div footer class=\"footer-dialog\">\n    <div class=\"buttons-wrapper\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <dr-button\n            (click)=\"onDecline()\"\n            *ngIf=\"dialogData.customButton\"\n            [theme]=\"dialogData.customButton?.theme || 'secondary'\"\n            class=\"buttons-wrapper--custom-btn\"\n            data-test=\"declineBtn\"\n            >{{ dialogData.customButton.label }}</dr-button\n        >\n        <dr-button *ngIf=\"dialogData.cancelButton\" data-test=\"modalCloseBtn\" (click)=\"closeDialog()\" [theme]=\"'secondary'\">{{\n            dialogData.cancelButton.label\n        }}</dr-button>\n        <dr-button\n            *ngIf=\"dialogData.acceptButton\"\n            data-test=\"modalAddBtn\"\n            (click)=\"onAccept()\"\n            [theme]=\"'primary'\"\n            [isLoading]=\"isLoading\"\n            [disabled]=\"form.invalid\"\n            >{{ dialogData.acceptButton.label }}</dr-button\n        >\n    </div>\n</div>\n", styles: [":host{display:flex;justify-content:space-between;flex-direction:column}:host.small-modal,:host.small-modal-max-height{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,:host.medium-modal-max-height{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.medium-small-modal{min-height:188px;max-height:345px;min-width:460px;max-width:460px}:host.medium-modal-max-height,:host.small-modal-max-height{max-height:80vh}.header-dialog{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 56px 16px 32px;border-bottom:1px solid #dfe0e3}.header-dialog>.icon-close{position:absolute;right:32px;top:16px;cursor:pointer}.title-dialog{display:flex;color:#333;position:static;font-weight:600;font-size:16px;line-height:24px;margin-top:0;margin-bottom:0}.title-dialog__icon{font-size:32px;margin-right:8px;line-height:24px;color:#6d6e6f}.content-dialog{font-weight:400;font-size:14px;padding:16px 32px 5px;white-space:pre-line;overflow:auto}.icon-close{color:#6d6e6f;cursor:pointer}.dr-smart-from{font-size:14px;font-weight:400;line-height:22px;padding:8px 32px 24px}.dr-smart-from dr-checkbox{font-weight:400}.content-dialog{padding:16px 32px 0;font-weight:400;font-size:14px;line-height:22px}.content-anchor{display:none}.footer-dialog{border-top:1px solid #dfe0e3}.buttons-wrapper{display:flex;justify-content:flex-end;padding:10px 32px 11px}.buttons-wrapper dr-button:nth-of-type(n+2){margin-left:12px}.buttons-wrapper--custom-btn{margin-right:auto}.form-field-error-alert{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert{position:absolute;margin-top:5px;font-size:12px;color:#bf1d30}.dr-select-footer__btn{background-color:transparent;display:flex;align-items:center;justify-content:flex-start;cursor:pointer;min-width:15rem;font-style:normal;font-weight:400;font-size:14px;line-height:24px;clear:both;width:100%;white-space:nowrap;padding:0 12px;height:36px;flex-shrink:0}\n"] }]
     }], function () { return [{ type: i1$6.MatLegacyDialogRef }, { type: undefined, decorators: [{
                 type: Inject,
                 args: [MAT_LEGACY_DIALOG_DATA]
@@ -12620,73 +12657,58 @@ class ClickOutsideModule {
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(ClickOutsideModule, { declarations: [ClickOutsideDirective], imports: [CommonModule], exports: [ClickOutsideDirective] }); })();
 
 const _c0$2 = ["textAreaElement"];
-function DrChatFormWithHistoryComponent_div_2_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵelement(1, "i", 19);
-    i0.ɵɵelementStart(2, "div", 20);
-    i0.ɵɵtext(3);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "i", 21);
-    i0.ɵɵlistener("click", function DrChatFormWithHistoryComponent_div_2_div_1_Template_i_click_4_listener() { const restoredCtx = i0.ɵɵrestoreView(_r11); const file_r9 = restoredCtx.$implicit; const ctx_r10 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r10.removeFile(file_r9)); });
-    i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    const file_r9 = ctx.$implicit;
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(file_r9.name);
-} }
-function DrChatFormWithHistoryComponent_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 16);
-    i0.ɵɵtemplate(1, DrChatFormWithHistoryComponent_div_2_div_1_Template, 5, 1, "div", 17);
+const _c1 = ["fileInput"];
+function DrChatFormWithHistoryComponent_dr_chat_dropped_files_2_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "dr-chat-dropped-files", 15);
+    i0.ɵɵlistener("removeFileEvent", function DrChatFormWithHistoryComponent_dr_chat_dropped_files_2_Template_dr_chat_dropped_files_removeFileEvent_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r7.removeFile($event)); });
+    i0.ɵɵpipe(1, "async");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngForOf", ctx_r0.droppedFiles);
+    i0.ɵɵproperty("files", i0.ɵɵpipeBind1(1, 3, ctx_r0.droppedFiles$))("isRemovable", true)("maxLengthText", 15);
 } }
-function DrChatFormWithHistoryComponent_i_13_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "i", 22);
-    i0.ɵɵlistener("click", function DrChatFormWithHistoryComponent_i_13_Template_i_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r12 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r12.sendMessage($event)); });
+function DrChatFormWithHistoryComponent_i_14_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "i", 16);
+    i0.ɵɵlistener("click", function DrChatFormWithHistoryComponent_i_14_Template_i_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r9 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r9.sendMessage($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
-    const _r1 = i0.ɵɵreference(5);
+    const _r1 = i0.ɵɵreference(6);
     i0.ɵɵstyleMap(ctx_r3.getSendButtonPosition(_r1));
 } }
-function DrChatFormWithHistoryComponent_i_14_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "i", 23);
-    i0.ɵɵlistener("click", function DrChatFormWithHistoryComponent_i_14_Template_i_click_0_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r14 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r14.sendMessage($event)); });
+function DrChatFormWithHistoryComponent_i_15_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "i", 17);
+    i0.ɵɵlistener("click", function DrChatFormWithHistoryComponent_i_15_Template_i_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r11 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r11.abortMessage()); });
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r4 = i0.ɵɵnextContext();
+    const _r1 = i0.ɵɵreference(6);
+    i0.ɵɵstyleMap(ctx_r4.getSendButtonPosition(_r1));
 } }
-function DrChatFormWithHistoryComponent_dr_dot_flashing_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "dr-dot-flashing", 24);
-} }
-function DrChatFormWithHistoryComponent_dr_button_16_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "dr-button", 25);
-    i0.ɵɵlistener("click", function DrChatFormWithHistoryComponent_dr_button_16_Template_dr_button_click_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r16 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r16.abortMessage()); });
-    i0.ɵɵtext(1, "Stop generating");
-    i0.ɵɵelementEnd();
+function DrChatFormWithHistoryComponent_dr_dot_flashing_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "dr-dot-flashing", 18);
 } }
 function DrChatFormWithHistoryComponent_ng_container_17_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
+    const _r14 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div", 26);
-    i0.ɵɵlistener("clickOutside", function DrChatFormWithHistoryComponent_ng_container_17_Template_div_clickOutside_1_listener() { i0.ɵɵrestoreView(_r19); const ctx_r18 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r18.closeHistory()); });
+    i0.ɵɵelementStart(1, "div", 19);
+    i0.ɵɵlistener("clickOutside", function DrChatFormWithHistoryComponent_ng_container_17_Template_div_clickOutside_1_listener() { i0.ɵɵrestoreView(_r14); const ctx_r13 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r13.closeHistory()); });
     i0.ɵɵprojection(2);
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
-    const ctx_r7 = i0.ɵɵnextContext();
+    const ctx_r6 = i0.ɵɵnextContext();
     i0.ɵɵadvance(1);
-    i0.ɵɵproperty("@dropdownAnimation", ctx_r7.isShowedHistory ? "visible" : "hidden")("exclude", ".dr-icon-history");
+    i0.ɵɵproperty("@dropdownAnimation", ctx_r6.isShowedHistory ? "visible" : "hidden")("exclude", ".dr-icon-history");
 } }
-const _c1 = function (a0) { return { height: a0 }; };
-const _c2 = function (a0, a1) { return { value: a0, params: a1 }; };
-const _c3 = function (a0, a1, a2) { return { "message-row__input--focused": a0, "message-row__input--filled": a1, "showed-dropdown": a2 }; };
-const _c4 = ["*"];
+const _c2 = function (a0) { return { "message-row_loading": a0 }; };
+const _c3 = function (a0) { return { height: a0 }; };
+const _c4 = function (a0, a1) { return { value: a0, params: a1 }; };
+const _c5 = function (a0, a1, a2) { return { "message-row__input--focused": a0, "message-row__input--filled": a1, "showed-dropdown": a2 }; };
+const _c6 = ["*"];
 class DrChatFormWithHistoryComponent {
     constructor(cdr, domSanitizer) {
         this.cdr = cdr;
@@ -12694,9 +12716,10 @@ class DrChatFormWithHistoryComponent {
         this._textareaInitialHeight = true;
         this.inputFocus = false;
         this.inputHover = false;
-        this.droppedFiles = [];
+        this.droppedFiles$ = new BehaviorSubject([]);
         this.isShowedHistory = false;
         this.isChatMode = false;
+        this.isLoading = false;
         /**
          * Predefined message text
          *
@@ -12732,12 +12755,13 @@ class DrChatFormWithHistoryComponent {
          *
          * @type {boolean}
          */
-        this.showDisabledButtonInsteadOfDotFlashing = false;
+        this.showDotFlashing = false;
         /**
          *
-         * @type {EventEmitter<{ message: string, files: File[] }>}
+         * @type {EventEmitter<{ message: string, files: IFile[] }>}
          */
         this.send = new EventEmitter();
+        this.uploadFiles = new EventEmitter();
         this.abort = new EventEmitter();
         /**
          * Emits when message input value has been changed
@@ -12752,27 +12776,18 @@ class DrChatFormWithHistoryComponent {
             event.preventDefault();
             event.stopPropagation();
             this.fileOver = false;
-            if (event.dataTransfer?.files) {
-                for (const file of event.dataTransfer.files) {
-                    const res = file;
-                    if (IMAGE_TYPES.includes(file.type)) {
-                        const fr = new FileReader();
-                        fr.onload = (e) => {
-                            res.src = e.target.result;
-                            res.urlStyle = this.domSanitizer.bypassSecurityTrustStyle(`url(${res.src})`);
-                            this.cdr.detectChanges();
-                        };
-                        fr.readAsDataURL(file);
-                    }
-                    this.droppedFiles.push(res);
-                }
+            const files = event.dataTransfer?.files;
+            if (files) {
+                this.saveFiles(files);
             }
         }
     }
     removeFile(file) {
-        const index = this.droppedFiles.indexOf(file);
+        const droppedFiles = this.droppedFiles$.value;
+        const index = droppedFiles.indexOf(file);
         if (index >= 0) {
-            this.droppedFiles.splice(index, 1);
+            droppedFiles.splice(index, 1);
+            this.droppedFiles$.next(droppedFiles);
         }
     }
     onDragOver(event) {
@@ -12791,15 +12806,16 @@ class DrChatFormWithHistoryComponent {
     }
     sendMessage($event) {
         if (!$event || !$event.shiftKey) {
-            $event && $event.preventDefault();
+            $event?.preventDefault();
+            $event?.stopPropagation();
             if (this.waitForReply) {
                 return;
             }
-            if (this.droppedFiles.length || String(this.message).trim().length) {
+            else if (this.droppedFiles$.value.length || String(this.message).trim().length) {
                 this._textareaInitialHeight = true;
-                this.send.emit({ message: this.message, files: this.droppedFiles });
+                this.send.emit({ message: this.message, files: this.droppedFiles$.value });
                 this.message = '';
-                this.droppedFiles = [];
+                this.droppedFiles$.next([]);
                 this.cdr.markForCheck();
             }
         }
@@ -12833,52 +12849,80 @@ class DrChatFormWithHistoryComponent {
     }
     onFileSelected(event) {
         const input = event.target;
+        this.fileOver = false;
+        if (input.files.length) {
+            this.saveFiles(Array.from(input.files));
+        }
+        this.fileInput.nativeElement.value = '';
+    }
+    async saveFiles(files) {
+        const uploadedFiles = [];
+        for (const file of files) {
+            let res = file;
+            res.data = (await this.base64Convert(res));
+            this.droppedFiles$.next([...this.droppedFiles$.value, res]);
+            uploadedFiles.push(res);
+            this.cdr.markForCheck();
+            this.cdr.detectChanges();
+        }
+        this.uploadFiles.emit(uploadedFiles.map((item) => ({ data: item.data, name: item.name })));
+    }
+    base64Convert(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => resolve(reader.result);
+            reader.onerror = (error) => reject(error);
+            reader.readAsDataURL(file);
+        });
     }
     /** @nocollapse */ static { this.ɵfac = function DrChatFormWithHistoryComponent_Factory(t) { return new (t || DrChatFormWithHistoryComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$5.DomSanitizer)); }; }
     /** @nocollapse */ static { this.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: DrChatFormWithHistoryComponent, selectors: [["dr-chat-form-with-history"]], viewQuery: function DrChatFormWithHistoryComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$2, 5);
+            i0.ɵɵviewQuery(_c1, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.textAreaElementRef = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fileInput = _t.first);
         } }, hostVars: 2, hostBindings: function DrChatFormWithHistoryComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("drop", function DrChatFormWithHistoryComponent_drop_HostBindingHandler($event) { return ctx.onDrop($event); })("dragover", function DrChatFormWithHistoryComponent_dragover_HostBindingHandler($event) { return ctx.onDragOver($event); })("dragleave", function DrChatFormWithHistoryComponent_dragleave_HostBindingHandler($event) { return ctx.onDragLeave($event); });
         } if (rf & 2) {
             i0.ɵɵclassProp("file-over", ctx.fileOver);
-        } }, inputs: { isChatMode: "isChatMode", message: "message", messagePlaceholder: "messagePlaceholder", dropFiles: "dropFiles", dropFilePlaceholder: "dropFilePlaceholder", waitForReply: "waitForReply", showDisabledButtonInsteadOfDotFlashing: "showDisabledButtonInsteadOfDotFlashing" }, outputs: { send: "send", abort: "abort", inputChange: "inputChange" }, ngContentSelectors: _c4, decls: 18, vars: 23, consts: [[1, "message-row"], [1, "message-row__input", 3, "ngClass"], ["class", "dropped-files", 4, "ngIf"], [1, "message-row__input-textarea-wrap"], ["type", "text", 3, "ngModel", "rows", "placeholder", "focus", "blur", "mouseenter", "mouseleave", "ngModelChange", "keydown.enter"], ["textAreaElement", ""], [1, "message-input-tmp"], ["type", "file", "hidden", "", "multiple", "", 3, "change"], ["fileInput", ""], [1, "dr-icon-history", 3, "click"], [1, "dr-icon-attachment", 3, "click"], ["class", "dr-icon-send-arrow-up send-button", 3, "style", "click", 4, "ngIf"], ["class", "dr-icon-send-arrow-up send-button-disabled", 3, "click", 4, "ngIf"], ["class", "wait-reply-dot-flashing", 4, "ngIf"], ["theme", "ghost", "class", "abort-button", 3, "click", 4, "ngIf"], [4, "ngIf"], [1, "dropped-files"], ["class", "dropped-files__item", 4, "ngFor", "ngForOf"], [1, "dropped-files__item"], [1, "dr-icon-file"], [1, "dropped-files__item-name"], [1, "dr-icon-noty-error", "dropped-files__item-remove", 3, "click"], [1, "dr-icon-send-arrow-up", "send-button", 3, "click"], [1, "dr-icon-send-arrow-up", "send-button-disabled", 3, "click"], [1, "wait-reply-dot-flashing"], ["theme", "ghost", 1, "abort-button", 3, "click"], [1, "history-dropdown", 3, "exclude", "clickOutside"]], template: function DrChatFormWithHistoryComponent_Template(rf, ctx) { if (rf & 1) {
-            const _r20 = i0.ɵɵgetCurrentView();
+        } }, inputs: { isChatMode: "isChatMode", isLoading: "isLoading", message: "message", messagePlaceholder: "messagePlaceholder", dropFiles: "dropFiles", dropFilePlaceholder: "dropFilePlaceholder", waitForReply: "waitForReply", showDotFlashing: "showDotFlashing" }, outputs: { send: "send", uploadFiles: "uploadFiles", abort: "abort", inputChange: "inputChange" }, ngContentSelectors: _c6, decls: 18, vars: 27, consts: [[1, "message-row", 3, "ngClass"], [1, "message-row__input", 3, "ngClass"], [3, "files", "isRemovable", "maxLengthText", "removeFileEvent", 4, "ngIf"], [1, "message-row__input-textarea-wrap"], ["type", "text", 3, "ngModel", "rows", "placeholder", "focus", "blur", "mouseenter", "mouseleave", "ngModelChange", "keydown.enter"], ["textAreaElement", ""], [1, "message-input-tmp"], ["type", "file", "hidden", "", "multiple", "", 3, "change"], ["fileInput", ""], [1, "dr-icon-history", 3, "click"], [1, "dr-icon-attachment", 3, "click"], ["class", "dr-icon-send-arrow-up send-button", 3, "style", "click", 4, "ngIf"], ["class", "dr-icon-stop abort-button", 3, "style", "click", 4, "ngIf"], ["class", "wait-reply-dot-flashing", 4, "ngIf"], [4, "ngIf"], [3, "files", "isRemovable", "maxLengthText", "removeFileEvent"], [1, "dr-icon-send-arrow-up", "send-button", 3, "click"], [1, "dr-icon-stop", "abort-button", 3, "click"], [1, "wait-reply-dot-flashing"], [1, "history-dropdown", 3, "exclude", "clickOutside"]], template: function DrChatFormWithHistoryComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r15 = i0.ɵɵgetCurrentView();
             i0.ɵɵprojectionDef();
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-            i0.ɵɵtemplate(2, DrChatFormWithHistoryComponent_div_2_Template, 2, 1, "div", 2);
-            i0.ɵɵelementStart(3, "div", 3)(4, "textarea", 4, 5);
-            i0.ɵɵlistener("focus", function DrChatFormWithHistoryComponent_Template_textarea_focus_4_listener() { return ctx.inputFocus = true; })("blur", function DrChatFormWithHistoryComponent_Template_textarea_blur_4_listener() { return ctx.inputFocus = false; })("mouseenter", function DrChatFormWithHistoryComponent_Template_textarea_mouseenter_4_listener() { return ctx.inputHover = true; })("mouseleave", function DrChatFormWithHistoryComponent_Template_textarea_mouseleave_4_listener() { return ctx.inputHover = false; })("ngModelChange", function DrChatFormWithHistoryComponent_Template_textarea_ngModelChange_4_listener($event) { return ctx.message = $event; })("ngModelChange", function DrChatFormWithHistoryComponent_Template_textarea_ngModelChange_4_listener($event) { return ctx.onModelChange($event); })("keydown.enter", function DrChatFormWithHistoryComponent_Template_textarea_keydown_enter_4_listener($event) { return ctx.sendMessage($event); });
-            i0.ɵɵtext(6, "            ");
+            i0.ɵɵtemplate(2, DrChatFormWithHistoryComponent_dr_chat_dropped_files_2_Template, 2, 5, "dr-chat-dropped-files", 2);
+            i0.ɵɵpipe(3, "async");
+            i0.ɵɵelementStart(4, "div", 3)(5, "textarea", 4, 5);
+            i0.ɵɵlistener("focus", function DrChatFormWithHistoryComponent_Template_textarea_focus_5_listener() { return ctx.inputFocus = true; })("blur", function DrChatFormWithHistoryComponent_Template_textarea_blur_5_listener() { return ctx.inputFocus = false; })("mouseenter", function DrChatFormWithHistoryComponent_Template_textarea_mouseenter_5_listener() { return ctx.inputHover = true; })("mouseleave", function DrChatFormWithHistoryComponent_Template_textarea_mouseleave_5_listener() { return ctx.inputHover = false; })("ngModelChange", function DrChatFormWithHistoryComponent_Template_textarea_ngModelChange_5_listener($event) { return ctx.message = $event; })("ngModelChange", function DrChatFormWithHistoryComponent_Template_textarea_ngModelChange_5_listener($event) { return ctx.onModelChange($event); })("keydown.enter", function DrChatFormWithHistoryComponent_Template_textarea_keydown_enter_5_listener($event) { return ctx.sendMessage($event); });
+            i0.ɵɵtext(7, "            ");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(7, "div", 6);
-            i0.ɵɵtext(8);
+            i0.ɵɵelementStart(8, "div", 6);
+            i0.ɵɵtext(9);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(9, "input", 7, 8);
-            i0.ɵɵlistener("change", function DrChatFormWithHistoryComponent_Template_input_change_9_listener($event) { return ctx.onFileSelected($event); });
+            i0.ɵɵelementStart(10, "input", 7, 8);
+            i0.ɵɵlistener("change", function DrChatFormWithHistoryComponent_Template_input_change_10_listener($event) { return ctx.onFileSelected($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(11, "i", 9);
-            i0.ɵɵlistener("click", function DrChatFormWithHistoryComponent_Template_i_click_11_listener() { return ctx.showHistory(); });
+            i0.ɵɵelementStart(12, "i", 9);
+            i0.ɵɵlistener("click", function DrChatFormWithHistoryComponent_Template_i_click_12_listener() { return ctx.showHistory(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(12, "i", 10);
-            i0.ɵɵlistener("click", function DrChatFormWithHistoryComponent_Template_i_click_12_listener() { i0.ɵɵrestoreView(_r20); const _r2 = i0.ɵɵreference(10); return i0.ɵɵresetView(_r2.click()); });
+            i0.ɵɵelementStart(13, "i", 10);
+            i0.ɵɵlistener("click", function DrChatFormWithHistoryComponent_Template_i_click_13_listener() { i0.ɵɵrestoreView(_r15); const _r2 = i0.ɵɵreference(11); return i0.ɵɵresetView(_r2.click()); });
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(13, DrChatFormWithHistoryComponent_i_13_Template, 1, 2, "i", 11);
-            i0.ɵɵtemplate(14, DrChatFormWithHistoryComponent_i_14_Template, 1, 0, "i", 12);
-            i0.ɵɵtemplate(15, DrChatFormWithHistoryComponent_dr_dot_flashing_15_Template, 1, 0, "dr-dot-flashing", 13);
-            i0.ɵɵtemplate(16, DrChatFormWithHistoryComponent_dr_button_16_Template, 2, 0, "dr-button", 14);
+            i0.ɵɵtemplate(14, DrChatFormWithHistoryComponent_i_14_Template, 1, 2, "i", 11);
+            i0.ɵɵtemplate(15, DrChatFormWithHistoryComponent_i_15_Template, 1, 2, "i", 12);
+            i0.ɵɵtemplate(16, DrChatFormWithHistoryComponent_dr_dot_flashing_16_Template, 1, 0, "dr-dot-flashing", 13);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(17, DrChatFormWithHistoryComponent_ng_container_17_Template, 3, 2, "ng-container", 15);
+            i0.ɵɵtemplate(17, DrChatFormWithHistoryComponent_ng_container_17_Template, 3, 2, "ng-container", 14);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
-            const _r1 = i0.ɵɵreference(5);
+            const _r1 = i0.ɵɵreference(6);
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(16, _c2, ctx.isLoading));
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("@containerHeightAnimation", i0.ɵɵpureFunction2(16, _c2, ctx.showHistory ? "expanded" : "collapsed", i0.ɵɵpureFunction1(14, _c1, ctx.getTextAreaHeight(_r1))))("ngClass", i0.ɵɵpureFunction3(19, _c3, ctx.inputFocus, !!(ctx.message == null ? null : ctx.message.length), ctx.isShowedHistory));
+            i0.ɵɵproperty("@containerHeightAnimation", i0.ɵɵpureFunction2(20, _c4, ctx.showHistory ? "expanded" : "collapsed", i0.ɵɵpureFunction1(18, _c3, ctx.getTextAreaHeight(_r1))))("ngClass", i0.ɵɵpureFunction3(23, _c5, ctx.inputFocus, !!(ctx.message == null ? null : ctx.message.length), ctx.isShowedHistory));
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.droppedFiles == null ? null : ctx.droppedFiles.length);
-            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(3, 14, ctx.droppedFiles$).length);
+            i0.ɵɵadvance(3);
             i0.ɵɵstyleMap(ctx.getTextAreaHeight(_r1));
             i0.ɵɵpropertyInterpolate("placeholder", ctx.fileOver ? ctx.dropFilePlaceholder : ctx.messagePlaceholder);
             i0.ɵɵproperty("ngModel", ctx.message)("rows", 1);
@@ -12887,14 +12931,12 @@ class DrChatFormWithHistoryComponent {
             i0.ɵɵadvance(5);
             i0.ɵɵproperty("ngIf", !ctx.waitForReply);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.waitForReply && ctx.showDisabledButtonInsteadOfDotFlashing);
-            i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.waitForReply && !ctx.showDisabledButtonInsteadOfDotFlashing);
+            i0.ɵɵproperty("ngIf", ctx.waitForReply && !ctx.showDotFlashing);
             i0.ɵɵadvance(1);
-            i0.ɵɵproperty("ngIf", ctx.waitForReply);
+            i0.ɵɵproperty("ngIf", ctx.waitForReply && ctx.showDotFlashing);
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", !ctx.isChatMode);
-        } }, dependencies: [i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgModel, i1.NgClass, i1.NgForOf, i1.NgIf, DrButtonComponent, ClickOutsideDirective, DrDotFlashingComponent], styles: ["[_nghost-%COMP%]{--send-button-offset: 42px;display:flex;flex-direction:column;align-items:center;padding:0 16px}[_nghost-%COMP%]   .message-row[_ngcontent-%COMP%]{display:flex;justify-content:center;width:100%;padding:0 0 21px;max-width:956px}[_nghost-%COMP%]   .message-row__input[_ngcontent-%COMP%]{flex-direction:column;background-color:#fff;position:relative;display:flex;align-items:center;flex-grow:1;height:auto;overflow:visible;min-width:265px;border-radius:24px;border:1.5px solid transparent;box-shadow:0 2px 16px -10px #603cff29;transition:.35s ease}[_nghost-%COMP%]   .message-row__input[_ngcontent-%COMP%]   .send-button[_ngcontent-%COMP%], [_nghost-%COMP%]   .message-row__input[_ngcontent-%COMP%]   .send-button-disabled[_ngcontent-%COMP%]{width:32px;height:32px;display:flex;align-items:center;justify-content:center;position:absolute;top:2.5px;right:8px;cursor:pointer;font-size:24px;border-radius:100px;background:#f0f1f4;color:#aeabac;transition:.15s ease-in-out}[_nghost-%COMP%]   .message-row__input[_ngcontent-%COMP%]   .dr-icon-history[_ngcontent-%COMP%], [_nghost-%COMP%]   .message-row__input[_ngcontent-%COMP%]   .dr-icon-attachment[_ngcontent-%COMP%]{display:flex;align-items:center;position:absolute;cursor:pointer;width:32px;height:48px;left:16px;top:-1px}[_nghost-%COMP%]   .message-row__input[_ngcontent-%COMP%]   .dr-icon-attachment[_ngcontent-%COMP%]{left:52px}[_nghost-%COMP%]   .message-row__input[_ngcontent-%COMP%]   .send-button[_ngcontent-%COMP%]{color:#fff;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%) border-box;opacity:.5}[_nghost-%COMP%]   .message-row__input--focused[_ngcontent-%COMP%]{box-shadow:8px 8px 16px #6969ff40,-4px -4px 8px #40b6e340,8px 8px 60px #00000040;height:auto!important;background:#fff}[_nghost-%COMP%]   .message-row__input--filled[_ngcontent-%COMP%]{box-shadow:8px 8px 16px #6969ff40,-4px -4px 8px #40b6e340,8px 8px 60px #00000040;background:#fff}[_nghost-%COMP%]   .message-row__input--filled[_ngcontent-%COMP%]   .send-button[_ngcontent-%COMP%]{opacity:1}[_nghost-%COMP%]   .message-row__input[_ngcontent-%COMP%]   .message-input-tmp[_ngcontent-%COMP%]{display:none}[_nghost-%COMP%]   .message-row__input.showed-dropdown[_ngcontent-%COMP%]   .send-button[_ngcontent-%COMP%]{opacity:.5}[_nghost-%COMP%]   .message-row__input[_ngcontent-%COMP%]:before{content:\"\";position:absolute;inset:-3px;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%);border-radius:25px;z-index:-1}[_nghost-%COMP%]   .message-row__input[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%], [_nghost-%COMP%]   .message-row__input[_ngcontent-%COMP%]   .message-input-tmp[_ngcontent-%COMP%]{font-size:14px;color:#333;width:100%;outline:none;min-height:48px;line-height:19px;flex-grow:1;resize:none;padding:13px 55px 13px 88px;margin:auto;border:none;border-radius:22.5px}[_nghost-%COMP%]   .message-row__input[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]:focus, [_nghost-%COMP%]   .message-row__input[_ngcontent-%COMP%]   .message-input-tmp[_ngcontent-%COMP%]:focus{border:none}[_nghost-%COMP%]   .message-row__input[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]::placeholder, [_nghost-%COMP%]   .message-row__input[_ngcontent-%COMP%]   .message-input-tmp[_ngcontent-%COMP%]::placeholder{color:#9ea1aa}[_nghost-%COMP%]   .message-row__input-textarea-wrap[_ngcontent-%COMP%]{display:flex;width:100%;position:relative}[_nghost-%COMP%]   .history-dropdown[_ngcontent-%COMP%]{width:100%;max-height:220px;overflow-y:auto;padding:12px 16px 0}[_nghost-%COMP%]   .showed-dropdown[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]{visibility:hidden;position:absolute}[_nghost-%COMP%]   .showed-dropdown[_ngcontent-%COMP%]   .message-input-tmp[_ngcontent-%COMP%]{display:block;margin-left:inherit;white-space:nowrap;font-family:monospace;overflow:hidden;text-overflow:ellipsis}[_nghost-%COMP%]   .showed-dropdown[_ngcontent-%COMP%]   .send-button[_ngcontent-%COMP%]{top:2.5px!important}[_nghost-%COMP%]   .dropped-files[_ngcontent-%COMP%]{display:flex;flex-direction:row;margin-bottom:.5rem;flex-wrap:wrap;gap:8px;padding-left:16px}[_nghost-%COMP%]   .dropped-files__item[_ngcontent-%COMP%]{max-width:183px;display:flex;flex-direction:row;gap:4px;justify-content:space-between;align-items:center;margin-top:16px;padding:4px 8px;border:1px solid rgb(223,224,227);box-sizing:border-box;border-radius:8px}[_nghost-%COMP%]   .dropped-files__item-name[_ngcontent-%COMP%]{font-family:Poppins,sans-serif;font-size:12px;line-height:20px;font-weight:500;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[_nghost-%COMP%]   .dropped-files__item-remove[_ngcontent-%COMP%]{cursor:pointer}"], data: { animation: [
+        } }, dependencies: [i1$2.DefaultValueAccessor, i1$2.NgControlStatus, i1$2.NgModel, i1.NgClass, i1.NgIf, ClickOutsideDirective, DrDotFlashingComponent, DrChatDroppedFilesComponent, i1.AsyncPipe], styles: ["[_nghost-%COMP%] {--send-button-offset: 42px;display:flex;flex-direction:column;align-items:center;padding:0 16px}[_nghost-%COMP%]  .message-row{display:flex;justify-content:center;width:100%;padding:0 0 21px;max-width:956px}[_nghost-%COMP%]  .message-row__input{flex-direction:column;background-color:#fff;position:relative;display:flex;align-items:center;flex-grow:1;height:auto;overflow:visible;min-width:265px;border-radius:24px;border:1.5px solid transparent;box-shadow:0 2px 16px -10px #603cff29;transition:.35s ease}[_nghost-%COMP%]  .message-row__input .abort-button, [_nghost-%COMP%]  .message-row__input .send-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;position:absolute;top:2.5px;right:8px;cursor:pointer;font-size:24px;border-radius:100px;color:#fff;transition:.15s ease-in-out;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%) border-box}[_nghost-%COMP%]  .message-row__input .dr-icon-history, [_nghost-%COMP%]  .message-row__input .dr-icon-attachment{display:flex;align-items:center;position:absolute;cursor:pointer;width:32px;height:48px;left:16px;top:-1px}[_nghost-%COMP%]  .message-row__input .dr-icon-attachment{left:52px}[_nghost-%COMP%]  .message-row__input .send-button{opacity:.5;pointer-events:none}[_nghost-%COMP%]  .message-row__input--focused{box-shadow:8px 8px 16px #6969ff40,-4px -4px 8px #40b6e340,8px 8px 60px #00000040;height:auto!important;background:#fff}[_nghost-%COMP%]  .message-row__input--filled{box-shadow:8px 8px 16px #6969ff40,-4px -4px 8px #40b6e340,8px 8px 60px #00000040;background:#fff}[_nghost-%COMP%]  .message-row__input--filled .send-button{opacity:1;pointer-events:all}[_nghost-%COMP%]  .message-row__input .message-input-tmp{display:none}[_nghost-%COMP%]  .message-row__input.showed-dropdown .send-button{opacity:.5}[_nghost-%COMP%]  .message-row__input .wait-reply-dot-flashing{display:flex;position:absolute;align-items:center;width:32px;height:48px;right:25px}[_nghost-%COMP%]  .message-row__input:before{content:\"\";position:absolute;inset:-3px;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%);border-radius:25px;z-index:-1}[_nghost-%COMP%]  .message-row__input textarea, [_nghost-%COMP%]  .message-row__input .message-input-tmp{font-size:14px;color:#333;width:100%;outline:none;min-height:48px;line-height:19px;flex-grow:1;resize:none;padding:13px 55px 13px 88px;margin:auto;border:none;border-radius:22.5px}[_nghost-%COMP%]  .message-row__input textarea:focus, [_nghost-%COMP%]  .message-row__input .message-input-tmp:focus{border:none}[_nghost-%COMP%]  .message-row__input textarea::placeholder, [_nghost-%COMP%]  .message-row__input .message-input-tmp::placeholder{color:#9ea1aa}[_nghost-%COMP%]  .message-row__input-textarea-wrap{display:flex;width:100%;position:relative}[_nghost-%COMP%]  .history-dropdown{width:100%;max-height:220px;overflow-y:auto;padding:12px 16px 0}[_nghost-%COMP%]  .showed-dropdown textarea{visibility:hidden;position:absolute}[_nghost-%COMP%]  .showed-dropdown .message-input-tmp{display:block;margin-left:inherit;white-space:nowrap;font-family:monospace;overflow:hidden;text-overflow:ellipsis}[_nghost-%COMP%]  .showed-dropdown .send-button{top:2.5px!important}[_nghost-%COMP%]  dr-chat-dropped-files{margin-right:auto}[_nghost-%COMP%]  .message-row_loading .send-button, [_nghost-%COMP%]  .message-row_loading .dropped-files__item{opacity:.5;pointer-events:none}"], data: { animation: [
                 trigger('containerHeightAnimation', [
                     state('collapsed', style({ height: '{{height}}' }), { params: { height: '48px' } }),
                     state('expanded', style({
@@ -12950,12 +12992,17 @@ class DrChatFormWithHistoryComponent {
                             style({ display: 'none' }),
                         ]),
                     ]),
-                ], template: "<div class=\"message-row\">\n    <div\n        [@containerHeightAnimation]=\"{\n            value: showHistory ? 'expanded' : 'collapsed',\n            params: { height: getTextAreaHeight(textAreaElement) },\n        }\"\n        class=\"message-row__input\"\n        [ngClass]=\"{\n            'message-row__input--focused': inputFocus,\n            'message-row__input--filled': !!message?.length,\n            'showed-dropdown': isShowedHistory,\n        }\">\n        <div class=\"dropped-files\" *ngIf=\"droppedFiles?.length\">\n            <div class=\"dropped-files__item\" *ngFor=\"let file of droppedFiles\">\n                <i class=\"dr-icon-file\"></i>\n                <div class=\"dropped-files__item-name\">{{ file.name }}</div>\n                <i class=\"dr-icon-noty-error dropped-files__item-remove\" (click)=\"removeFile(file)\"></i>\n            </div>\n        </div>\n\n        <div class=\"message-row__input-textarea-wrap\">\n            <textarea\n                #textAreaElement\n                (focus)=\"inputFocus = true\"\n                (blur)=\"inputFocus = false\"\n                (mouseenter)=\"inputHover = true\"\n                (mouseleave)=\"inputHover = false\"\n                [(ngModel)]=\"message\"\n                [rows]=\"1\"\n                [style]=\"getTextAreaHeight(textAreaElement)\"\n                (ngModelChange)=\"onModelChange($event)\"\n                type=\"text\"\n                placeholder=\"{{ fileOver ? dropFilePlaceholder : messagePlaceholder }}\"\n                (keydown.enter)=\"sendMessage($event)\">\n            </textarea>\n\n            <div class=\"message-input-tmp\">{{ textAreaElement.value }}</div>\n\n            <input #fileInput type=\"file\" hidden multiple (change)=\"onFileSelected($event)\" />\n            <i (click)=\"showHistory()\" class=\"dr-icon-history\"></i>\n            <i (click)=\"fileInput.click()\" class=\"dr-icon-attachment\"></i>\n\n            <i\n                *ngIf=\"!waitForReply\"\n                [style]=\"getSendButtonPosition(textAreaElement)\"\n                (click)=\"sendMessage($event)\"\n                class=\"dr-icon-send-arrow-up send-button\"></i>\n            <i\n                *ngIf=\"waitForReply && showDisabledButtonInsteadOfDotFlashing\"\n                (click)=\"sendMessage($event)\"\n                class=\"dr-icon-send-arrow-up send-button-disabled\"></i>\n\n            <dr-dot-flashing\n                *ngIf=\"waitForReply && !showDisabledButtonInsteadOfDotFlashing\"\n                class=\"wait-reply-dot-flashing\"></dr-dot-flashing>\n            <dr-button *ngIf=\"waitForReply\" (click)=\"abortMessage()\" theme=\"ghost\" class=\"abort-button\"\n                >Stop generating</dr-button\n            >\n        </div>\n\n        <ng-container *ngIf=\"!isChatMode\">\n            <div\n                [@dropdownAnimation]=\"isShowedHistory ? 'visible' : 'hidden'\"\n                class=\"history-dropdown\"\n                [exclude]=\"'.dr-icon-history'\"\n                (clickOutside)=\"closeHistory()\">\n                <ng-content></ng-content>\n            </div>\n        </ng-container>\n    </div>\n</div>\n", styles: [":host{--send-button-offset: 42px;display:flex;flex-direction:column;align-items:center;padding:0 16px}:host .message-row{display:flex;justify-content:center;width:100%;padding:0 0 21px;max-width:956px}:host .message-row__input{flex-direction:column;background-color:#fff;position:relative;display:flex;align-items:center;flex-grow:1;height:auto;overflow:visible;min-width:265px;border-radius:24px;border:1.5px solid transparent;box-shadow:0 2px 16px -10px #603cff29;transition:.35s ease}:host .message-row__input .send-button,:host .message-row__input .send-button-disabled{width:32px;height:32px;display:flex;align-items:center;justify-content:center;position:absolute;top:2.5px;right:8px;cursor:pointer;font-size:24px;border-radius:100px;background:#f0f1f4;color:#aeabac;transition:.15s ease-in-out}:host .message-row__input .dr-icon-history,:host .message-row__input .dr-icon-attachment{display:flex;align-items:center;position:absolute;cursor:pointer;width:32px;height:48px;left:16px;top:-1px}:host .message-row__input .dr-icon-attachment{left:52px}:host .message-row__input .send-button{color:#fff;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%) border-box;opacity:.5}:host .message-row__input--focused{box-shadow:8px 8px 16px #6969ff40,-4px -4px 8px #40b6e340,8px 8px 60px #00000040;height:auto!important;background:#fff}:host .message-row__input--filled{box-shadow:8px 8px 16px #6969ff40,-4px -4px 8px #40b6e340,8px 8px 60px #00000040;background:#fff}:host .message-row__input--filled .send-button{opacity:1}:host .message-row__input .message-input-tmp{display:none}:host .message-row__input.showed-dropdown .send-button{opacity:.5}:host .message-row__input:before{content:\"\";position:absolute;inset:-3px;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%);border-radius:25px;z-index:-1}:host .message-row__input textarea,:host .message-row__input .message-input-tmp{font-size:14px;color:#333;width:100%;outline:none;min-height:48px;line-height:19px;flex-grow:1;resize:none;padding:13px 55px 13px 88px;margin:auto;border:none;border-radius:22.5px}:host .message-row__input textarea:focus,:host .message-row__input .message-input-tmp:focus{border:none}:host .message-row__input textarea::placeholder,:host .message-row__input .message-input-tmp::placeholder{color:#9ea1aa}:host .message-row__input-textarea-wrap{display:flex;width:100%;position:relative}:host .history-dropdown{width:100%;max-height:220px;overflow-y:auto;padding:12px 16px 0}:host .showed-dropdown textarea{visibility:hidden;position:absolute}:host .showed-dropdown .message-input-tmp{display:block;margin-left:inherit;white-space:nowrap;font-family:monospace;overflow:hidden;text-overflow:ellipsis}:host .showed-dropdown .send-button{top:2.5px!important}:host .dropped-files{display:flex;flex-direction:row;margin-bottom:.5rem;flex-wrap:wrap;gap:8px;padding-left:16px}:host .dropped-files__item{max-width:183px;display:flex;flex-direction:row;gap:4px;justify-content:space-between;align-items:center;margin-top:16px;padding:4px 8px;border:1px solid rgb(223,224,227);box-sizing:border-box;border-radius:8px}:host .dropped-files__item-name{font-family:Poppins,sans-serif;font-size:12px;line-height:20px;font-weight:500;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .dropped-files__item-remove{cursor:pointer}\n"] }]
+                ], template: "<div class=\"message-row\" [ngClass]=\"{ 'message-row_loading': isLoading }\">\n    <div\n        [@containerHeightAnimation]=\"{\n            value: showHistory ? 'expanded' : 'collapsed',\n            params: { height: getTextAreaHeight(textAreaElement) },\n        }\"\n        class=\"message-row__input\"\n        [ngClass]=\"{\n            'message-row__input--focused': inputFocus,\n            'message-row__input--filled': !!message?.length,\n            'showed-dropdown': isShowedHistory,\n        }\">\n        <dr-chat-dropped-files\n            *ngIf=\"(droppedFiles$ | async).length\"\n            [files]=\"droppedFiles$ | async\"\n            [isRemovable]=\"true\"\n            [maxLengthText]=\"15\"\n            (removeFileEvent)=\"removeFile($event)\"></dr-chat-dropped-files>\n\n        <div class=\"message-row__input-textarea-wrap\">\n            <textarea\n                #textAreaElement\n                (focus)=\"inputFocus = true\"\n                (blur)=\"inputFocus = false\"\n                (mouseenter)=\"inputHover = true\"\n                (mouseleave)=\"inputHover = false\"\n                [(ngModel)]=\"message\"\n                [rows]=\"1\"\n                [style]=\"getTextAreaHeight(textAreaElement)\"\n                (ngModelChange)=\"onModelChange($event)\"\n                type=\"text\"\n                placeholder=\"{{ fileOver ? dropFilePlaceholder : messagePlaceholder }}\"\n                (keydown.enter)=\"sendMessage($event)\">\n            </textarea>\n\n            <div class=\"message-input-tmp\">{{ textAreaElement.value }}</div>\n\n            <input #fileInput type=\"file\" hidden multiple (change)=\"onFileSelected($event)\" />\n            <i (click)=\"showHistory()\" class=\"dr-icon-history\"></i>\n            <i (click)=\"fileInput.click()\" class=\"dr-icon-attachment\"></i>\n\n            <i\n                *ngIf=\"!waitForReply\"\n                [style]=\"getSendButtonPosition(textAreaElement)\"\n                (click)=\"sendMessage($event)\"\n                class=\"dr-icon-send-arrow-up send-button\"></i>\n\n            <i\n                *ngIf=\"waitForReply && !showDotFlashing\"\n                [style]=\"getSendButtonPosition(textAreaElement)\"\n                class=\"dr-icon-stop abort-button\"\n                (click)=\"abortMessage()\"></i>\n            <dr-dot-flashing *ngIf=\"waitForReply && showDotFlashing\" class=\"wait-reply-dot-flashing\"></dr-dot-flashing>\n        </div>\n\n        <ng-container *ngIf=\"!isChatMode\">\n            <div\n                [@dropdownAnimation]=\"isShowedHistory ? 'visible' : 'hidden'\"\n                class=\"history-dropdown\"\n                [exclude]=\"'.dr-icon-history'\"\n                (clickOutside)=\"closeHistory()\">\n                <ng-content></ng-content>\n            </div>\n        </ng-container>\n    </div>\n</div>\n", styles: [":host::ng-deep{--send-button-offset: 42px;display:flex;flex-direction:column;align-items:center;padding:0 16px}:host::ng-deep .message-row{display:flex;justify-content:center;width:100%;padding:0 0 21px;max-width:956px}:host::ng-deep .message-row__input{flex-direction:column;background-color:#fff;position:relative;display:flex;align-items:center;flex-grow:1;height:auto;overflow:visible;min-width:265px;border-radius:24px;border:1.5px solid transparent;box-shadow:0 2px 16px -10px #603cff29;transition:.35s ease}:host::ng-deep .message-row__input .abort-button,:host::ng-deep .message-row__input .send-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;position:absolute;top:2.5px;right:8px;cursor:pointer;font-size:24px;border-radius:100px;color:#fff;transition:.15s ease-in-out;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%) border-box}:host::ng-deep .message-row__input .dr-icon-history,:host::ng-deep .message-row__input .dr-icon-attachment{display:flex;align-items:center;position:absolute;cursor:pointer;width:32px;height:48px;left:16px;top:-1px}:host::ng-deep .message-row__input .dr-icon-attachment{left:52px}:host::ng-deep .message-row__input .send-button{opacity:.5;pointer-events:none}:host::ng-deep .message-row__input--focused{box-shadow:8px 8px 16px #6969ff40,-4px -4px 8px #40b6e340,8px 8px 60px #00000040;height:auto!important;background:#fff}:host::ng-deep .message-row__input--filled{box-shadow:8px 8px 16px #6969ff40,-4px -4px 8px #40b6e340,8px 8px 60px #00000040;background:#fff}:host::ng-deep .message-row__input--filled .send-button{opacity:1;pointer-events:all}:host::ng-deep .message-row__input .message-input-tmp{display:none}:host::ng-deep .message-row__input.showed-dropdown .send-button{opacity:.5}:host::ng-deep .message-row__input .wait-reply-dot-flashing{display:flex;position:absolute;align-items:center;width:32px;height:48px;right:25px}:host::ng-deep .message-row__input:before{content:\"\";position:absolute;inset:-3px;background:linear-gradient(266deg,#6969ff 25.2%,#4eb7df 90.24%);border-radius:25px;z-index:-1}:host::ng-deep .message-row__input textarea,:host::ng-deep .message-row__input .message-input-tmp{font-size:14px;color:#333;width:100%;outline:none;min-height:48px;line-height:19px;flex-grow:1;resize:none;padding:13px 55px 13px 88px;margin:auto;border:none;border-radius:22.5px}:host::ng-deep .message-row__input textarea:focus,:host::ng-deep .message-row__input .message-input-tmp:focus{border:none}:host::ng-deep .message-row__input textarea::placeholder,:host::ng-deep .message-row__input .message-input-tmp::placeholder{color:#9ea1aa}:host::ng-deep .message-row__input-textarea-wrap{display:flex;width:100%;position:relative}:host::ng-deep .history-dropdown{width:100%;max-height:220px;overflow-y:auto;padding:12px 16px 0}:host::ng-deep .showed-dropdown textarea{visibility:hidden;position:absolute}:host::ng-deep .showed-dropdown .message-input-tmp{display:block;margin-left:inherit;white-space:nowrap;font-family:monospace;overflow:hidden;text-overflow:ellipsis}:host::ng-deep .showed-dropdown .send-button{top:2.5px!important}:host::ng-deep dr-chat-dropped-files{margin-right:auto}:host::ng-deep .message-row_loading .send-button,:host::ng-deep .message-row_loading .dropped-files__item{opacity:.5;pointer-events:none}\n"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$5.DomSanitizer }]; }, { textAreaElementRef: [{
             type: ViewChild,
             args: ['textAreaElement']
+        }], fileInput: [{
+            type: ViewChild,
+            args: ['fileInput']
         }], isChatMode: [{
             type: Input
+        }], isLoading: [{
+            type: Input
         }], message: [{
             type: Input
         }], messagePlaceholder: [{
@@ -12966,10 +13013,12 @@ class DrChatFormWithHistoryComponent {
             type: Input
         }], waitForReply: [{
             type: Input
-        }], showDisabledButtonInsteadOfDotFlashing: [{
+        }], showDotFlashing: [{
             type: Input
         }], send: [{
             type: Output
+        }], uploadFiles: [{
+            type: Output
         }], abort: [{
             type: Output
         }], inputChange: [{
@@ -12998,7 +13047,9 @@ const DR_CHAT_COMPONENTS = [
     DrChatSuggestionsComponent,
     DrDotFlashingComponent,
     DrChatAlertComponent,
+    DrChatDroppedFilesComponent,
 ];
+const DR_CHAT_PIPES = [ShorterNamingPipe];
 const DR_CHAT_DIRECTIVES = [DrChatCustomMessageDirective];
 class DrChatModule {
     /** @nocollapse */ static { this.ɵfac = function DrChatModule_Factory(t) { return new (t || DrChatModule)(); }; }
@@ -13023,7 +13074,7 @@ class DrChatModule {
                     DrTooltipModule,
                     ClickOutsideModule,
                 ],
-                declarations: [...DR_CHAT_COMPONENTS, ...DR_CHAT_DIRECTIVES],
+                declarations: [...DR_CHAT_COMPONENTS, ...DR_CHAT_DIRECTIVES, ...DR_CHAT_PIPES],
                 exports: [...DR_CHAT_COMPONENTS, ...DR_CHAT_DIRECTIVES],
             }]
     }], null, null); })();
@@ -13035,7 +13086,8 @@ class DrChatModule {
         DrChatMessageFileComponent,
         DrChatSuggestionsComponent,
         DrDotFlashingComponent,
-        DrChatAlertComponent, DrChatCustomMessageDirective], imports: [FormsModule,
+        DrChatAlertComponent,
+        DrChatDroppedFilesComponent, DrChatCustomMessageDirective, ShorterNamingPipe], imports: [FormsModule,
         ReactiveFormsModule,
         CommonModule,
         DrAvatarModule,
@@ -13049,7 +13101,8 @@ class DrChatModule {
         DrChatMessageFileComponent,
         DrChatSuggestionsComponent,
         DrDotFlashingComponent,
-        DrChatAlertComponent, DrChatCustomMessageDirective] }); })();
+        DrChatAlertComponent,
+        DrChatDroppedFilesComponent, DrChatCustomMessageDirective] }); })();
 
 class DrTagsConstructorModule {
     /** @nocollapse */ static { this.ɵfac = function DrTagsConstructorModule_Factory(t) { return new (t || DrTagsConstructorModule)(); }; }