@datarailsshared/datarailsshared 1.4.138 → 1.4.140

package/assets/styles/vars.scss

@@ -1,4 +1,6 @@
 $dr-chat-max-width: 970px;
-$dr-chat-padding-in-modal: 60px;
+$dr-chat-horizontal-padding: 24px;
 $dr-chat-main-color: #25258C;
-$dr-chat-max-message-width: 700px;
+$dr-chat-avatar-width: 28px;
+$dr-chat-avatar-left-indent: 0;
+$dr-chat-avatar-right-indent: 23px;

package/bundles/datarailsshared-datarailsshared.umd.js

@@ -3871,7 +3871,7 @@
         { type: i0.Component, args: [{
                     selector: 'dr-dialog-wrapper',
                     template: "<div class=\"dialog-wrapper\"\n     [class.dialog-wrapper--confirmation-no-title]=\"dialogData.theme?.isConfirmation && !dialogData.title\">\n    <i class=\"dr-icon-exit\" data-test=\"close_btn\" (click)=\"closeDialog()\" *ngIf=\"!dialogData?.hideCloseBtn\"></i>\n\n    <div header class=\"dialog-wrapper__header\" *ngIf=\"dialogData.title\">\n        <h1 class=\"dialog-wrapper__header__title\" data-test=\"dialogTitle\">{{ dialogData.title }}</h1>\n        <h1 class=\"dialog-wrapper__header__subtitle\" data-test=\"dialogSubtitle\"\n            *ngIf=\"dialogData.subtitle\">{{ dialogData.subtitle }}</h1>\n    </div>\n    <div class=\"dialog-wrapper__content\"\n         [class.dialog-wrapper__content--no-padding]=\"dialogData.theme?.contentNoPadding\"\n         [ngClass]=\"{ 'flex-position': dialogData.contentIcon?.class && !childComponent }\">\n        <span *ngIf=\"dialogData.contentIcon?.class\" class=\"dialog-wrapper__content__icon\">\n            <i [ngClass]=\"dialogData.contentIcon.class\" [style.color]=\"dialogData.contentIcon?.color || 'inherit'\"></i>\n        </span>\n        <span [innerHTML]=\"dialogData.content\"></span>\n        <span #content class=\"dialog-wrapper__content__anchor\"> </span>\n    </div>\n    <div footer class=\"dialog-wrapper__footer\" *ngIf=\"dialogData.cancelButton || dialogData.acceptButton\">\n        <div class=\"dialog-wrapper__footer__buttons\">\n            <span *ngIf=\"dialogData.customButton\"\n                  class=\"dialog-wrapper__footer__button-wrapper\"\n                  [drTooltip]=\"dialogData.customButton.isDisabled && dialogData.tooltips?.customDisabled\">\n                <dr-button (click)=\"onDecline()\"\n                           [theme]=\"'secondary'\"\n                           [isLoading]=\"isLoading\"\n                           data-test=\"declineBtn\"\n                           [disabled]=\"dialogData.customButton.isDisabled\"\n                           [drTooltip]=\"dialogData.tooltips?.custom\">{{ dialogData.customButton.label }}</dr-button>\n            </span>\n            <span *ngIf=\"dialogData.cancelButton\"\n                  class=\"dialog-wrapper__footer__button-wrapper\"\n                  [drTooltip]=\"dialogData.cancelButton.isDisabled && dialogData.tooltips?.cancelDisabled\">\n                <dr-button (click)=\"closeDialog()\"\n                           [theme]=\"'secondary'\"\n                           data-test=\"closeBtn\"\n                           [disabled]=\"dialogData.cancelButton.isDisabled\"\n                           [drTooltip]=\"dialogData.tooltips?.cancel\">{{ dialogData.cancelButton.label }}</dr-button>\n            </span>\n            <span *ngIf=\"dialogData.acceptButton\"\n                  class=\"dialog-wrapper__footer__button-wrapper\"\n                  [drTooltip]=\"dialogData.acceptButton.isDisabled && dialogData.tooltips?.acceptDisabled\">\n                <dr-button (click)=\"onAcceptDialog()\"\n                           [theme]=\"dialogData.acceptButton?.theme || 'primary'\"\n                           [isLoading]=\"isLoading\"\n                           data-test=\"acceptBtn\"\n                           [disabled]=\"dialogData.acceptButton.isDisabled\"\n                           [drTooltip]=\"dialogData.tooltips?.accept\">{{ dialogData.acceptButton.label }}</dr-button>\n            </span>\n        </div>\n    </div>\n</div>\n",
-                    styles: [":host.small-modal{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,.medium-modal-max-height:host{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.medium-modal-max-height{max-height:85vh}:host.large-modal{min-width:750px;max-width:750px}:host.medium-large-modal{min-width:669px;max-width:669px}:host.xl-modal{min-height:188px;max-height:800px;min-width:1100px;max-width:1100px}:host.xl-custom-modal{min-height:188px;max-height:800px;min-width:1100px;max-width:100%}::ng-deep .dialog-wrapper{display:flex;justify-content:space-between;flex-direction:column;position:relative}::ng-deep .dialog-wrapper>.dr-icon-exit{z-index:1;position:absolute;right:32px;top:20px;color:#51566f;cursor:pointer}::ng-deep .dialog-wrapper__header{display:flex;flex-direction:column;padding:8px 52px 8px 32px;border-bottom:1px solid #e5e6ea}::ng-deep .dialog-wrapper__header__title{color:#151b3f;position:static;font-weight:600;font-size:18px;line-height:24px}::ng-deep .dialog-wrapper__header__subtitle{font-size:14px;line-height:20px;margin:0}::ng-deep .dialog-wrapper--confirmation-no-title{padding-top:16px;height:100%}::ng-deep .dialog-wrapper__content{overflow-y:inherit;font-size:14px;font-weight:400;line-height:22px;padding:24px 32px 32px}::ng-deep .dialog-wrapper__content__anchor{display:none}::ng-deep .dialog-wrapper__content--no-padding{padding:0}::ng-deep .dialog-wrapper__content__icon{margin-right:10px;top:5px;position:relative}::ng-deep .dialog-wrapper__content.flex-position{display:flex}::ng-deep .dialog-wrapper__footer{border-top:1px solid #e5e6ea}::ng-deep .dialog-wrapper__footer__buttons{display:flex;justify-content:flex-end;padding:11px 32px}::ng-deep .dialog-wrapper__footer__buttons>dr-button:nth-child(n+2){margin-left:12px}::ng-deep .dialog-wrapper__footer__button-wrapper:nth-child(n+2){margin-left:12px}\n"]
+                    styles: [":host.small-modal{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,.medium-modal-max-height:host{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{max-height:85vh}:host.large-modal{min-width:750px;max-width:750px}:host.medium-large-modal{min-width:669px;max-width:669px}:host.xl-modal{min-height:188px;max-height:800px;min-width:1100px;max-width:1100px}:host.xl-custom-modal{min-height:188px;max-height:800px;min-width:1100px;max-width:100%}::ng-deep .dialog-wrapper{display:flex;justify-content:space-between;flex-direction:column;position:relative}::ng-deep .dialog-wrapper>.dr-icon-exit{z-index:1;position:absolute;right:32px;top:20px;color:#51566f;cursor:pointer}::ng-deep .dialog-wrapper__header{display:flex;flex-direction:column;padding:8px 52px 8px 32px;border-bottom:1px solid #e5e6ea}::ng-deep .dialog-wrapper__header__title{color:#151b3f;position:static;font-weight:600;font-size:18px;line-height:24px}::ng-deep .dialog-wrapper__header__subtitle{font-size:14px;line-height:20px;margin:0}::ng-deep .dialog-wrapper--confirmation-no-title{padding-top:16px;height:100%}::ng-deep .dialog-wrapper__content{overflow-y:inherit;font-size:14px;font-weight:400;line-height:22px;padding:24px 32px 32px}::ng-deep .dialog-wrapper__content__anchor{display:none}::ng-deep .dialog-wrapper__content--no-padding{padding:0}::ng-deep .dialog-wrapper__content__icon{margin-right:10px;top:5px;position:relative}::ng-deep .dialog-wrapper__content.flex-position{display:flex}::ng-deep .dialog-wrapper__footer{border-top:1px solid #e5e6ea}::ng-deep .dialog-wrapper__footer__buttons{display:flex;justify-content:flex-end;padding:11px 32px}::ng-deep .dialog-wrapper__footer__buttons>dr-button:nth-child(n+2){margin-left:12px}::ng-deep .dialog-wrapper__footer__button-wrapper:nth-child(n+2){margin-left:12px}\n"]
                 },] }
     ];
     DialogWrapperComponent.ctorParameters = function () { return [
@@ -3890,6 +3890,7 @@
     (function (DIALOG_SIZE) {
         DIALOG_SIZE["SMALL"] = "small-modal";
         DIALOG_SIZE["MEDIUM"] = "medium-modal";
+        DIALOG_SIZE["MEDIUM_SMALL"] = "medium-small-modal";
         DIALOG_SIZE["MEDIUM_MAX_HEIGHT"] = "medium-modal-max-height";
         DIALOG_SIZE["MEDIUM_LARGE"] = "medium-large-modal";
         DIALOG_SIZE["LARGE"] = "large-modal";
@@ -3963,7 +3964,7 @@
         { type: i0.Component, args: [{
                     selector: 'dr-dialog-modal-wrapper',
                     template: "<div header class=\"header-dialog\">\n    <h1 class=\"title-dialog\" data-test=\"modalTitle\">{{ dialogData.title }}</h1>\n    <i mat-icon-button *ngIf=\"!dialogData.hideCloseBtn\" (click)=\"closeDialog()\" class=\"dr-icon-exit icon-close\"\n       data-test=\"xBtn\"></i>\n</div>\n<div *ngIf=\"dialogData.content\" class=\"content-dialog\">\n    <ng-container>{{ dialogData.content }}</ng-container>\n    <span #content class=\"content-anchor\"></span>\n</div>\n<form *ngIf=\"dialogData.fields\" [formGroup]=\"form\" class=\"dr-smart-from\">\n    <div class=\"dr-smart-form_wrapper\">\n        <div *ngFor=\"let field of dialogData.fields\" class=\"dr-smart-form_group\"\n             [ngStyle]=\"{ display: field.isLabelFullWidth ? 'block' : 'flex' }\">\n            <label *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\">{{ field.label }}</label>\n            <div class=\"input-group p-0\"\n                 [ngClass]=\"{ 'col-md-10': field.label && !field.isLabelFullWidth, 'col-md-12': !field.label || field.isLabelFullWidth }\">\n                <dr-select *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                           [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\"\n                               class=\"{{ dialogData.footerTemplateData.icon }}\"></i>\n                            {{ dialogData.footerTemplateData.label }}</button>\n                    </ng-template>\n                </dr-select>\n                <dr-input *ngIf=\"field.type === dialogFieldType.INPUT\" data-test=\"modalInput\" class=\"form-control\"\n                          [formControlName]=\"field.name\" [placeholder]=\"field.placeholder\"></dr-input>\n                <dr-date-picker *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 class=\"form-field-error-alert\" *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\"\n                       *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 *ngIf=\"dialogData.cancelButton\" data-test=\"modalCloseBtn\" (click)=\"closeDialog()\"\n                   [theme]=\"'secondary'\">{{ dialogData.cancelButton.label }}</dr-button>\n        <dr-button *ngIf=\"dialogData.acceptButton\" data-test=\"modalAddBtn\" (click)=\"onAccept()\" [theme]=\"'primary'\"\n                   [isLoading]=\"isLoading\" [disabled]=\"form.invalid\">{{ dialogData.acceptButton.label }}</dr-button>\n    </div>\n</div>\n",
-                    styles: [":host{display:flex;justify-content:space-between;flex-direction:column}:host.small-modal{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,.medium-modal-max-height:host{min-height:188px;max-height:467px;min-width:632px;max-width:632px}:host.medium-modal-max-height{max-height:80vh}.header-dialog{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:8px 39px 8px 32px;border-bottom:1px solid #e5e6ea}.title-dialog{color:#151b3f;position:static;font-weight:bold;font-size:18px;line-height:24px}.content-dialog{font-weight:400;font-size:14px;padding:16px 32px 5px}.icon-close{color:#51566f;cursor:pointer}.dr-smart-from{font-size:14px;font-weight:500;line-height:22px;padding:16px 32px 22px}.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 #e5e6ea}.buttons-wrapper{display:flex;justify-content:flex-end;padding-top:10px;padding-right:32px;padding-bottom:11px}.buttons-wrapper dr-button:nth-of-type(2){margin-left:12px}.form-field-error-alert{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert{position:absolute;margin-top:5px;font-size:12px;color:red}.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"]
+                    styles: [":host{display:flex;justify-content:space-between;flex-direction:column}:host.small-modal{min-height:188px;max-height:467px;min-width:400px;max-width:400px}:host.medium-modal,.medium-modal-max-height:host{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{max-height:80vh}.header-dialog{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:8px 39px 8px 32px;border-bottom:1px solid #e5e6ea}.title-dialog{color:#151b3f;position:static;font-weight:bold;font-size:18px;line-height:24px}.content-dialog{font-weight:400;font-size:14px;padding:16px 32px 5px}.icon-close{color:#51566f;cursor:pointer}.dr-smart-from{font-size:14px;font-weight:500;line-height:22px;padding:16px 32px 22px}.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 #e5e6ea}.buttons-wrapper{display:flex;justify-content:flex-end;padding-top:10px;padding-right:32px;padding-bottom:11px}.buttons-wrapper dr-button:nth-of-type(2){margin-left:12px}.form-field-error-alert{font-size:12px;color:#bf1d30;line-height:20px}.form-error-alert{position:absolute;margin-top:5px;font-size:12px;color:red}.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"]
                 },] }
     ];
     DialogModalWrapperComponent.ctorParameters = function () { return [
@@ -5843,7 +5844,7 @@
                     selector: 'dr-chat-form',
                     template: "<div class=\"dropped-files\" *ngIf=\"droppedFiles?.length\">\n    <div class=\"dropped-files__item\" *ngFor=\"let file of droppedFiles\">\n        <div class=\"dropped-files__item__preview\" [style.background-image]=\"file.urlStyle || 'none'\">\n            <i class=\"dr-icon-file\" *ngIf=\"!file.urlStyle\"></i>\n        </div>\n        <div class=\"dropped-files__item__name\">{{ file.name }}</div>\n        <i class=\"dropped-files__item__remove dr-icon-exit\" (click)=\"removeFile(file)\"></i>\n    </div>\n</div>\n<div class=\"message-row\">\n    <div class=\"message-row__input\">\n            <textarea #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                      (keyup.enter)=\"sendMessage()\">\n            </textarea>\n        <i (click)=\"sendMessage()\" class=\"dr-icon-notify send-button\"></i>\n    </div>\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:flex;flex-direction:column;padding:0;margin-top:12px}:host .message-row{display:flex;justify-content:center;width:100%;padding:0 60px 21px}:host .message-row__input{position:relative;display:flex;align-items:center;flex-grow:1;flex-direction:row;height:auto;overflow:hidden;max-width:970px;min-width:265px}:host .message-row__input textarea{font-size:14px;line-height:22px;max-height:100%;flex-grow:1;resize:none;padding:14px 40px 12px 23px;margin:auto;border:1px solid #DFE0E3;border-radius:12px;min-height:50px}:host .message-row__input textarea:focus{border:1px solid #7F7FDD}:host .message-row__input textarea::placeholder{color:#9ea1aa}:host .message-row__input .send-button{position:absolute;right:14px;cursor:pointer;color:#dfe0e3;font-size:28px}:host .message-row__input textarea:focus+.send-button,:host .message-row__input .send-button:hover{color:#25258c}:host input{flex:1}:host input.with-button{border-bottom-right-radius:0;border-top-right-radius:0}:host .dropped-files{display:flex;flex-direction:row;margin-bottom:.5rem;flex-wrap:wrap}:host .dropped-files__item{display:flex;flex-direction:column;justify-content:center;margin:0 10px 10px 0;position:relative}:host .dropped-files__item__preview{background-size:cover;background-position:center;width:64px;height:64px;border-radius:8px;border:1px solid #ccc}:host .dropped-files__item__preview i{font-size:62px}:host .dropped-files__item__name{white-space:nowrap;font-size:12px;color:#8f929e;margin-top:4px;max-width:64px;overflow:hidden;text-overflow:ellipsis}:host .dropped-files__item__remove{position:absolute;right:-4px;top:-4px;cursor:pointer;background:white;border-radius:12px;color:#8f929e;border:1px solid #8f929e;font-size:14px}\n"]
+                    styles: [":host{display:flex;flex-direction:column;align-items:center;padding:0 24px;margin-top:12px}:host .message-row{display:flex;justify-content:center;width:100%;padding:0 0 21px;max-width:970px}:host .message-row__input{position:relative;display:flex;align-items:center;flex-grow:1;flex-direction:row;height:auto;overflow:hidden;min-width:265px}:host .message-row__input textarea{font-size:14px;line-height:22px;max-height:100%;flex-grow:1;resize:none;padding:14px 40px 12px 23px;margin:auto;border:1px solid #DFE0E3;border-radius:12px;min-height:50px}:host .message-row__input textarea:focus{border:1px solid #7F7FDD}:host .message-row__input textarea::placeholder{color:#9ea1aa}:host .message-row__input .send-button{position:absolute;right:14px;cursor:pointer;color:#dfe0e3;font-size:28px}:host .message-row__input textarea:focus+.send-button,:host .message-row__input .send-button:hover{color:#25258c}:host input{flex:1}:host input.with-button{border-bottom-right-radius:0;border-top-right-radius:0}:host .dropped-files{display:flex;flex-direction:row;margin-bottom:.5rem;flex-wrap:wrap}:host .dropped-files__item{display:flex;flex-direction:column;justify-content:center;margin:0 10px 10px 0;position:relative}:host .dropped-files__item__preview{background-size:cover;background-position:center;width:64px;height:64px;border-radius:8px;border:1px solid #ccc}:host .dropped-files__item__preview i{font-size:62px}:host .dropped-files__item__name{white-space:nowrap;font-size:12px;color:#8f929e;margin-top:4px;max-width:64px;overflow:hidden;text-overflow:ellipsis}:host .dropped-files__item__remove{position:absolute;right:-4px;top:-4px;cursor:pointer;background:white;border-radius:12px;color:#8f929e;border:1px solid #8f929e;font-size:14px}\n"]
                 },] }
     ];
     DrChatFormComponent.ctorParameters = function () { return [
@@ -5940,7 +5941,7 @@
     DrChatMessageComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-chat-message',
-                    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</ng-template>\n<div class=\"message\" [class.message--custom]=\"customMessage\">\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>\n\n\n<div class=\"message-actions\" *ngIf=\"drChatMessageActions;\">\n    <ng-container [ngTemplateOutlet]=\"drChatMessageActions\"></ng-container>\n</div>\n",
+                    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</ng-template>\n<div class=\"message\" [class.message--custom]=\"customMessage\">\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",
                     animations: [
                         animations.trigger('flyInOut', [
                             animations.state('in', animations.style({ transform: 'translateX(0)' })),
@@ -5949,7 +5950,7 @@
                         ]),
                     ],
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{position:relative;display:flex;flex-direction:row;width:100%;background:rgba(249,250,255,.7);border-top:1px solid #E5E5E5;padding:16px 22px}: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:85px}.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:#151b3f;border-radius:16px;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2223%22 height%3D%2226%22 viewBox%3D%220 0 23 26%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11.5 11.5036C10.672 11.5036 9.99927 12.1756 9.99927 13.0044C9.99927 13.8323 10.6713 14.5051 11.5 14.5051C12.3287 14.5051 13.0007 13.8323 13.0007 13.0044C13.0008 12.1756 12.3288 11.5036 11.5 11.5036ZM19.7627 13.0044C21.8109 10.7312 22.4971 8.61768 21.6369 7.11544C21.0429 6.07969 19.8774 5.53894 18.2499 5.50446C17.5112 5.48946 16.6765 5.5772 15.7577 5.77069C14.8075 2.72572 13.2865 1 11.5 1C9.71351 1 8.19253 2.72572 7.24154 5.77145C4.33008 5.16396 2.21435 5.63196 1.36235 7.11619C0.502868 8.61918 1.18986 10.7312 3.23734 13.0051C1.1891 15.2783 0.502868 17.3918 1.3631 18.8941C1.97886 19.9681 3.20436 20.505 4.92257 20.505C5.61707 20.505 6.39554 20.4203 7.24305 20.2411C8.19329 23.286 9.71426 25.0102 11.5 25.0102C13.2865 25.0102 14.8075 23.2853 15.7577 20.2396C16.5827 20.412 17.3484 20.5028 18.0347 20.5028C19.7694 20.5028 21.0264 19.9576 21.6376 18.8948C22.4971 17.3903 21.8101 15.2776 19.7627 13.0044ZM11.5 3.25072C12.0265 3.25072 13.1372 4.37345 13.8737 7.38692C13.9645 7.75891 14.0327 8.1564 14.1047 8.54939C14.0942 8.54339 14.0837 8.53587 14.0732 8.5299C13.402 8.13914 12.6992 7.76866 11.9837 7.42817C11.1077 7.01116 10.2467 6.66092 9.40901 6.37368C10.1238 4.11922 11.0373 3.25072 11.5 3.25072ZM3.31684 17.7751C3.06711 17.3386 3.46085 15.8776 5.58259 13.8106C5.79334 13.6052 6.01909 13.3996 6.2516 13.1949C6.25609 13.8984 6.28234 14.6004 6.33484 15.2806C6.40985 16.2444 6.54933 17.1609 6.7196 18.0511C4.62483 18.4786 3.52759 18.1433 3.31684 17.7751ZM6.80579 9.89643C6.10079 10.3967 5.44829 10.9119 4.84983 11.4332C3.37233 9.77417 3.09857 8.61469 3.31533 8.23518C3.55909 7.80994 4.96982 7.42594 7.72827 8.20217C8.098 8.30645 8.47902 8.43242 8.86449 8.56892C8.17531 8.97241 7.48454 9.41718 6.80579 9.89643ZM11.5 22.7581C10.9735 22.7581 9.86277 21.6353 9.12627 18.6218C9.03551 18.2491 8.96726 17.8523 8.89527 17.4586C8.90577 17.4646 8.91627 17.4714 8.92677 17.4774C9.59801 17.8696 10.3007 18.2401 11.0163 18.5798C11.8922 18.9969 12.7532 19.3471 13.591 19.6343C12.8762 21.8903 11.9628 22.7581 11.5 22.7581ZM12.9407 15.5334C12.4765 15.8041 11.9905 16.0599 11.5 16.3051C11.0095 16.0599 10.5243 15.8041 10.0593 15.5326C9.55903 15.2416 9.0573 14.9184 8.55855 14.5816C8.52853 14.0611 8.49854 13.5376 8.49854 13.0044C8.49854 12.4711 8.52853 11.9491 8.55855 11.4279C9.0573 11.0904 9.55903 10.7671 10.0593 10.4754C10.5235 10.2054 11.0095 9.94962 11.5 9.70363C11.9905 9.94962 12.4765 10.2054 12.9407 10.4754C13.441 10.7671 13.9427 11.0904 14.4414 11.4279C14.4714 11.9491 14.5015 12.4719 14.5015 13.0051C14.5015 13.5384 14.4714 14.0603 14.4414 14.5823C13.9427 14.9184 13.441 15.2424 12.9407 15.5334ZM19.6847 17.7751C19.4402 18.1974 18.0287 18.5828 15.2718 17.8073C14.902 17.7031 14.5218 17.5771 14.1363 17.4406C14.824 17.0378 15.5162 16.5931 16.1935 16.1138C16.8985 15.6128 17.551 15.0983 18.1502 14.5763C19.6269 16.2354 19.9014 17.3948 19.6847 17.7751ZM17.4174 12.1989C17.2067 12.4044 16.9809 12.6099 16.7484 12.8146C16.7439 12.1104 16.7177 11.4091 16.6652 10.7289C16.5902 9.76515 16.4507 8.84792 16.2804 7.95766C18.3744 7.53018 19.4709 7.86614 19.6832 8.23439C19.9329 8.67093 19.5392 10.1326 17.4174 12.1989Z%22 fill%3D%22url(%23paint0_linear_393_7999)%22 stroke%3D%22%2325258C%22%2F%3E%3Cdefs%3E%3ClinearGradient id%3D%22paint0_linear_393_7999%22 x1%3D%2211.5%22 y1%3D%221%22 x2%3D%2211.5%22 y2%3D%2225.0102%22 gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop stop-color%3D%22%23AAE8FF%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22%238F79FF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\");background-size:22px 24px;background-repeat:no-repeat;background-position-x:3px;background-position-y:2px}:host .avatar,:host dr-avatar{margin:0 23px 0 12px}:host .message{display:flex;align-items:center;flex-grow:1}:host .message-actions{display:flex;align-items:center;margin-left:24px}\n"]
+                    styles: [":host{position:relative;display:flex;flex-direction:row;width:100%;background:rgba(249,250,255,.7);border-top:1px solid #E5E5E5;padding:16px 24px}: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:75px}.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:#151b3f;border-radius:16px;background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2223%22 height%3D%2226%22 viewBox%3D%220 0 23 26%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M11.5 11.5036C10.672 11.5036 9.99927 12.1756 9.99927 13.0044C9.99927 13.8323 10.6713 14.5051 11.5 14.5051C12.3287 14.5051 13.0007 13.8323 13.0007 13.0044C13.0008 12.1756 12.3288 11.5036 11.5 11.5036ZM19.7627 13.0044C21.8109 10.7312 22.4971 8.61768 21.6369 7.11544C21.0429 6.07969 19.8774 5.53894 18.2499 5.50446C17.5112 5.48946 16.6765 5.5772 15.7577 5.77069C14.8075 2.72572 13.2865 1 11.5 1C9.71351 1 8.19253 2.72572 7.24154 5.77145C4.33008 5.16396 2.21435 5.63196 1.36235 7.11619C0.502868 8.61918 1.18986 10.7312 3.23734 13.0051C1.1891 15.2783 0.502868 17.3918 1.3631 18.8941C1.97886 19.9681 3.20436 20.505 4.92257 20.505C5.61707 20.505 6.39554 20.4203 7.24305 20.2411C8.19329 23.286 9.71426 25.0102 11.5 25.0102C13.2865 25.0102 14.8075 23.2853 15.7577 20.2396C16.5827 20.412 17.3484 20.5028 18.0347 20.5028C19.7694 20.5028 21.0264 19.9576 21.6376 18.8948C22.4971 17.3903 21.8101 15.2776 19.7627 13.0044ZM11.5 3.25072C12.0265 3.25072 13.1372 4.37345 13.8737 7.38692C13.9645 7.75891 14.0327 8.1564 14.1047 8.54939C14.0942 8.54339 14.0837 8.53587 14.0732 8.5299C13.402 8.13914 12.6992 7.76866 11.9837 7.42817C11.1077 7.01116 10.2467 6.66092 9.40901 6.37368C10.1238 4.11922 11.0373 3.25072 11.5 3.25072ZM3.31684 17.7751C3.06711 17.3386 3.46085 15.8776 5.58259 13.8106C5.79334 13.6052 6.01909 13.3996 6.2516 13.1949C6.25609 13.8984 6.28234 14.6004 6.33484 15.2806C6.40985 16.2444 6.54933 17.1609 6.7196 18.0511C4.62483 18.4786 3.52759 18.1433 3.31684 17.7751ZM6.80579 9.89643C6.10079 10.3967 5.44829 10.9119 4.84983 11.4332C3.37233 9.77417 3.09857 8.61469 3.31533 8.23518C3.55909 7.80994 4.96982 7.42594 7.72827 8.20217C8.098 8.30645 8.47902 8.43242 8.86449 8.56892C8.17531 8.97241 7.48454 9.41718 6.80579 9.89643ZM11.5 22.7581C10.9735 22.7581 9.86277 21.6353 9.12627 18.6218C9.03551 18.2491 8.96726 17.8523 8.89527 17.4586C8.90577 17.4646 8.91627 17.4714 8.92677 17.4774C9.59801 17.8696 10.3007 18.2401 11.0163 18.5798C11.8922 18.9969 12.7532 19.3471 13.591 19.6343C12.8762 21.8903 11.9628 22.7581 11.5 22.7581ZM12.9407 15.5334C12.4765 15.8041 11.9905 16.0599 11.5 16.3051C11.0095 16.0599 10.5243 15.8041 10.0593 15.5326C9.55903 15.2416 9.0573 14.9184 8.55855 14.5816C8.52853 14.0611 8.49854 13.5376 8.49854 13.0044C8.49854 12.4711 8.52853 11.9491 8.55855 11.4279C9.0573 11.0904 9.55903 10.7671 10.0593 10.4754C10.5235 10.2054 11.0095 9.94962 11.5 9.70363C11.9905 9.94962 12.4765 10.2054 12.9407 10.4754C13.441 10.7671 13.9427 11.0904 14.4414 11.4279C14.4714 11.9491 14.5015 12.4719 14.5015 13.0051C14.5015 13.5384 14.4714 14.0603 14.4414 14.5823C13.9427 14.9184 13.441 15.2424 12.9407 15.5334ZM19.6847 17.7751C19.4402 18.1974 18.0287 18.5828 15.2718 17.8073C14.902 17.7031 14.5218 17.5771 14.1363 17.4406C14.824 17.0378 15.5162 16.5931 16.1935 16.1138C16.8985 15.6128 17.551 15.0983 18.1502 14.5763C19.6269 16.2354 19.9014 17.3948 19.6847 17.7751ZM17.4174 12.1989C17.2067 12.4044 16.9809 12.6099 16.7484 12.8146C16.7439 12.1104 16.7177 11.4091 16.6652 10.7289C16.5902 9.76515 16.4507 8.84792 16.2804 7.95766C18.3744 7.53018 19.4709 7.86614 19.6832 8.23439C19.9329 8.67093 19.5392 10.1326 17.4174 12.1989Z%22 fill%3D%22url(%23paint0_linear_393_7999)%22 stroke%3D%22%2325258C%22%2F%3E%3Cdefs%3E%3ClinearGradient id%3D%22paint0_linear_393_7999%22 x1%3D%2211.5%22 y1%3D%221%22 x2%3D%2211.5%22 y2%3D%2225.0102%22 gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop stop-color%3D%22%23AAE8FF%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22%238F79FF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\");background-size:22px 24px;background-repeat:no-repeat;background-position-x:3px;background-position-y:2px}:host .avatar,:host dr-avatar{margin:0 23px 0 0}:host .message{display:flex;align-items:center;flex-grow:1}:host .message__actions{display:flex;align-items:center;margin-left:24px}\n"]
                 },] }
     ];
     DrChatMessageComponent.ctorParameters = function () { return [
@@ -6004,6 +6005,14 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(DrChatComponent.prototype, "messagesContainerWithScroll", {
+            get: function () {
+                return this.messagesContainer && this.messagesContainer.nativeElement.scrollHeight > this.messagesContainer.nativeElement.offsetHeight;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ;
         DrChatComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
             this.messages.changes.subscribe(function (messages) {
@@ -6038,9 +6047,9 @@
     DrChatComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'dr-chat',
-                    template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n    <div class=\"chat__header\">\n        <div class=\"chat__header__logo\"></div>\n\n        <div class=\"chat__header__text\">\n            <div class=\"chat__header__text__title\">{{ title }}</div>\n            <div *ngIf=\"subtitle\" class=\"chat__header__text__subtitle\">{{ subtitle }}</div>\n        </div>\n\n        <dr-button *ngIf=\"showClearButton\"\n                   (click)=\"clear.emit($event)\"\n                   theme=\"icon\"\n                   icon=\"dr-icon-clear\"\n                   class=\"ml-auto\"\n                   title=\"Clear the history\">\n        </dr-button>\n\n        <dr-button (click)=\"close.emit($event)\"\n                   theme=\"icon\"\n                   icon=\"dr-icon-exit\"\n                   class=\"ml-4\"\n                   title=\"Close\">\n        </dr-button>\n    </div>\n\n    <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n        <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n    </div>\n\n    <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n        <div #messagesContainer class=\"chat__messages__container\">\n            <ng-content select=\"dr-chat-message\"></ng-content>\n        </div>\n    </div>\n\n    <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n                         [values]=\"fullScreen ? suggestions : suggestions.slice(0, 4)\"\n                         class=\"chat__suggestions\"\n                         [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n                         [buttonMode]=\"!!messages?.length\"\n                         (suggestionSelect)=\"suggestionSelect.emit($event)\">\n    </dr-chat-suggestions>\n\n    <div class=\"form\">\n        <ng-content select=\"dr-chat-form\"></ng-content>\n    </div>\n</div>\n",
+                    template: "<div class=\"chat\" [class.chat--in-full-screen]=\"fullScreen\">\n    <div class=\"chat__header\">\n        <div *ngIf=\"!fullScreen\" class=\"chat__header__logo\"></div>\n\n        <div class=\"chat__header__text\">\n            <div class=\"chat__header__text__title\">{{ title }}</div>\n            <div *ngIf=\"subtitle\" class=\"chat__header__text__subtitle\">{{ subtitle }}</div>\n        </div>\n\n        <dr-button *ngIf=\"showClearButton\"\n                   (click)=\"clear.emit($event)\"\n                   theme=\"icon\"\n                   icon=\"dr-icon-clear\"\n                   class=\"ml-auto\"\n                   drTooltip=\"Clear the history\">\n        </dr-button>\n\n        <dr-button *ngIf=\"!fullScreen\"\n                   (click)=\"close.emit($event)\"\n                   theme=\"icon\"\n                   icon=\"dr-icon-exit\"\n                   class=\"ml-4\"\n                   drTooltip=\"Close\">\n        </dr-button>\n    </div>\n\n    <div *ngIf=\"!messages?.length\" class=\"chat__empty-state\">\n        <span class=\"chat__empty-state__text\">{{ noMessagesPlaceholder }}</span>\n    </div>\n\n    <div *ngIf=\"messages?.length\" class=\"chat__messages\">\n        <div #messagesContainer class=\"chat__messages__container\"\n             [class.chat__messages__container--scroll]=\"messagesContainerWithScroll\">\n            <ng-content select=\"dr-chat-message\"></ng-content>\n        </div>\n    </div>\n\n    <dr-chat-suggestions *ngIf=\"suggestions?.length\"\n                         [values]=\"fullScreen ? suggestions : suggestions.slice(0, 4)\"\n                         class=\"chat__suggestions\"\n                         [class.chat__suggestions--full-height]=\"fullScreen && !messages?.length\"\n                         [buttonMode]=\"!!messages?.length\"\n                         (suggestionSelect)=\"suggestionSelect.emit($event)\">\n    </dr-chat-suggestions>\n\n    <div class=\"form\">\n        <ng-content select=\"dr-chat-form\"></ng-content>\n    </div>\n</div>\n",
                     providers: [DrChatCustomMessageService],
-                    styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:\"Poppins\",sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__header{display:flex;align-items:center;background-color:#f2f2ff;color:#25258c;padding:15px 20px;font-weight:400;font-size:20px;line-height:28px;border-bottom:1px solid #F9F7FF}.chat__header__logo{display:flex;width:33px;height:38px;background:url(\"data:image/svg+xml,%3Csvg width%3D%2233%22 height%3D%2238%22 viewBox%3D%220 0 33 38%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M16.5 16.5057C15.1989 16.5057 14.1417 17.5617 14.1417 18.864C14.1417 20.1651 15.1977 21.2223 16.5 21.2223C17.8023 21.2223 18.8583 20.1651 18.8583 18.864C18.8583 17.5617 17.8024 16.5057 16.5 16.5057ZM29.4842 18.8641C32.7028 15.2918 33.7812 11.9706 32.4294 9.60997C31.496 7.98236 29.6646 7.13262 27.107 7.07843C25.9462 7.05487 24.6345 7.19274 23.1907 7.4968C21.6974 2.71185 19.3073 0 16.5 0C13.6927 0 11.3026 2.71185 9.80813 7.49799C5.23298 6.54337 1.90827 7.2788 0.569407 9.61116C-0.781207 11.973 0.298346 15.2918 3.51581 18.8652C0.29716 22.4374 -0.781207 25.7586 0.570593 28.1192C1.53821 29.807 3.464 30.6508 6.16404 30.6508C7.2554 30.6508 8.47871 30.5176 9.8105 30.236C11.3037 35.0209 13.6938 37.7304 16.5 37.7304C19.3073 37.7304 21.6974 35.0197 23.1907 30.2336C24.4871 30.5046 25.6904 30.6473 26.7688 30.6473C29.4948 30.6473 31.47 29.7905 32.4306 28.1205C33.7812 25.7562 32.7017 22.4363 29.4842 18.8641ZM16.5 3.53684C17.3274 3.53684 19.0728 5.30114 20.2302 10.0366C20.3728 10.6212 20.48 11.2458 20.5931 11.8633C20.5766 11.8539 20.5601 11.8421 20.5436 11.8327C19.4888 11.2186 18.3845 10.6365 17.2601 10.1014C15.8836 9.4461 14.5306 8.89573 13.2142 8.44436C14.3373 4.90164 15.7728 3.53684 16.5 3.53684ZM3.64075 26.3609C3.24831 25.6749 3.86706 23.3791 7.20121 20.131C7.53239 19.8081 7.88714 19.4851 8.25251 19.1634C8.25957 20.2689 8.30082 21.372 8.38332 22.441C8.50119 23.9554 8.72038 25.3956 8.98794 26.7946C5.69617 27.4664 3.97193 26.9395 3.64075 26.3609ZM9.12339 13.9801C8.01552 14.7662 6.99016 15.5759 6.04973 16.395C3.72794 13.788 3.29776 11.9659 3.63838 11.3696C4.02143 10.7013 6.23829 10.0979 10.573 11.3177C11.154 11.4816 11.7527 11.6795 12.3585 11.894C11.2755 12.5281 10.19 13.227 9.12339 13.9801ZM16.5 34.1912C15.6726 34.1912 13.9272 32.4269 12.7698 27.6915C12.6272 27.1057 12.52 26.4822 12.4069 25.8636C12.4234 25.873 12.4399 25.8836 12.4564 25.893C13.5112 26.5094 14.6155 27.0916 15.7398 27.6255C17.1164 28.2808 18.4694 28.8311 19.7858 29.2825C18.6627 32.8276 17.2272 34.1912 16.5 34.1912ZM18.764 22.8381C18.0345 23.2636 17.2708 23.6655 16.5 24.0509C15.7293 23.6655 14.9667 23.2636 14.236 22.837C13.4499 22.3797 12.6615 21.8717 11.8777 21.3425C11.8305 20.5246 11.7834 19.7019 11.7834 18.864C11.7834 18.026 11.8305 17.2058 11.8777 16.3867C12.6615 15.8563 13.4499 15.3484 14.236 14.8899C14.9655 14.4656 15.7293 14.0637 16.5 13.6771C17.2708 14.0637 18.0345 14.4656 18.764 14.8899C19.5501 15.3483 20.3385 15.8563 21.1223 16.3867C21.1694 17.2057 21.2166 18.0272 21.2166 18.8651C21.2166 19.7031 21.1694 20.5234 21.1223 21.3437C20.3386 21.8717 19.5502 22.3808 18.764 22.8381ZM29.3617 26.3609C28.9774 27.0244 26.7594 27.6302 22.4271 26.4115C21.846 26.2477 21.2485 26.0497 20.6427 25.8352C21.7234 25.2023 22.8112 24.5034 23.8755 23.7503C24.9833 22.963 26.0087 22.1545 26.9503 21.3342C29.2709 23.9413 29.7022 25.7633 29.3617 26.3609ZM25.7988 17.5983C25.4676 17.9212 25.1129 18.2441 24.7475 18.5658C24.7405 17.4592 24.6992 16.3572 24.6167 15.2882C24.4989 13.7738 24.2797 12.3324 24.0121 10.9335C27.3026 10.2617 29.0257 10.7897 29.3592 11.3683C29.7517 12.0543 29.133 14.3513 25.7988 17.5983Z%22 fill%3D%22url(%23paint0_linear_393_7959)%22%2F%3E%3Cdefs%3E%3ClinearGradient id%3D%22paint0_linear_393_7959%22 x1%3D%2216.5%22 y1%3D%220%22 x2%3D%2216.5%22 y2%3D%2237.7304%22 gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop stop-color%3D%22%2306B3F4%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22%237B61FF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%}.chat__header__text{display:flex;flex-direction:column;flex-grow:1;margin-left:20px}.chat__header__text__title{display:flex;align-items:center}.chat__header__text__title:after{content:\"BETA\";display:inline-flex;padding:2px 10px;background:#25258C;color:#f4f4f3;font-weight:600;font-size:10px;line-height:14px;border-radius:8px;margin-left:12px;font-family:\"Nunito Sans\",sans-serif}.chat__header__text__subtitle{font-size:14px;line-height:22px}.chat__header dr-button::ng-deep button:not(:hover){color:#25258c}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:20px 0;font-family:Poppins,sans-serif;font-size:20px;font-weight:300;line-height:30px;text-align:center;max-width:440px}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__header{display:none}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:700px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items{padding-left:0;padding-right:0}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items__item{margin:0 0 26px;height:80px;width:310px;font-size:16px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__container{padding:0}\n"]
+                    styles: [":host{height:100%;width:100%;display:flex;flex-direction:column}.chat{position:relative;display:flex;flex-grow:1;flex-direction:column;height:100%;background-color:#fff;color:#4e566c;font-family:\"Poppins\",sans-serif;font-size:14px;font-weight:400;line-height:22px}.chat__header{display:flex;align-items:center;background-color:#f2f2ff;color:#25258c;padding:15px 24px;font-weight:400;font-size:20px;line-height:28px;box-shadow:0 1px 3px #0003;z-index:1}.chat__header__logo{display:flex;width:33px;height:38px;background:url(\"data:image/svg+xml,%3Csvg width%3D%2233%22 height%3D%2238%22 viewBox%3D%220 0 33 38%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M16.5 16.5057C15.1989 16.5057 14.1417 17.5617 14.1417 18.864C14.1417 20.1651 15.1977 21.2223 16.5 21.2223C17.8023 21.2223 18.8583 20.1651 18.8583 18.864C18.8583 17.5617 17.8024 16.5057 16.5 16.5057ZM29.4842 18.8641C32.7028 15.2918 33.7812 11.9706 32.4294 9.60997C31.496 7.98236 29.6646 7.13262 27.107 7.07843C25.9462 7.05487 24.6345 7.19274 23.1907 7.4968C21.6974 2.71185 19.3073 0 16.5 0C13.6927 0 11.3026 2.71185 9.80813 7.49799C5.23298 6.54337 1.90827 7.2788 0.569407 9.61116C-0.781207 11.973 0.298346 15.2918 3.51581 18.8652C0.29716 22.4374 -0.781207 25.7586 0.570593 28.1192C1.53821 29.807 3.464 30.6508 6.16404 30.6508C7.2554 30.6508 8.47871 30.5176 9.8105 30.236C11.3037 35.0209 13.6938 37.7304 16.5 37.7304C19.3073 37.7304 21.6974 35.0197 23.1907 30.2336C24.4871 30.5046 25.6904 30.6473 26.7688 30.6473C29.4948 30.6473 31.47 29.7905 32.4306 28.1205C33.7812 25.7562 32.7017 22.4363 29.4842 18.8641ZM16.5 3.53684C17.3274 3.53684 19.0728 5.30114 20.2302 10.0366C20.3728 10.6212 20.48 11.2458 20.5931 11.8633C20.5766 11.8539 20.5601 11.8421 20.5436 11.8327C19.4888 11.2186 18.3845 10.6365 17.2601 10.1014C15.8836 9.4461 14.5306 8.89573 13.2142 8.44436C14.3373 4.90164 15.7728 3.53684 16.5 3.53684ZM3.64075 26.3609C3.24831 25.6749 3.86706 23.3791 7.20121 20.131C7.53239 19.8081 7.88714 19.4851 8.25251 19.1634C8.25957 20.2689 8.30082 21.372 8.38332 22.441C8.50119 23.9554 8.72038 25.3956 8.98794 26.7946C5.69617 27.4664 3.97193 26.9395 3.64075 26.3609ZM9.12339 13.9801C8.01552 14.7662 6.99016 15.5759 6.04973 16.395C3.72794 13.788 3.29776 11.9659 3.63838 11.3696C4.02143 10.7013 6.23829 10.0979 10.573 11.3177C11.154 11.4816 11.7527 11.6795 12.3585 11.894C11.2755 12.5281 10.19 13.227 9.12339 13.9801ZM16.5 34.1912C15.6726 34.1912 13.9272 32.4269 12.7698 27.6915C12.6272 27.1057 12.52 26.4822 12.4069 25.8636C12.4234 25.873 12.4399 25.8836 12.4564 25.893C13.5112 26.5094 14.6155 27.0916 15.7398 27.6255C17.1164 28.2808 18.4694 28.8311 19.7858 29.2825C18.6627 32.8276 17.2272 34.1912 16.5 34.1912ZM18.764 22.8381C18.0345 23.2636 17.2708 23.6655 16.5 24.0509C15.7293 23.6655 14.9667 23.2636 14.236 22.837C13.4499 22.3797 12.6615 21.8717 11.8777 21.3425C11.8305 20.5246 11.7834 19.7019 11.7834 18.864C11.7834 18.026 11.8305 17.2058 11.8777 16.3867C12.6615 15.8563 13.4499 15.3484 14.236 14.8899C14.9655 14.4656 15.7293 14.0637 16.5 13.6771C17.2708 14.0637 18.0345 14.4656 18.764 14.8899C19.5501 15.3483 20.3385 15.8563 21.1223 16.3867C21.1694 17.2057 21.2166 18.0272 21.2166 18.8651C21.2166 19.7031 21.1694 20.5234 21.1223 21.3437C20.3386 21.8717 19.5502 22.3808 18.764 22.8381ZM29.3617 26.3609C28.9774 27.0244 26.7594 27.6302 22.4271 26.4115C21.846 26.2477 21.2485 26.0497 20.6427 25.8352C21.7234 25.2023 22.8112 24.5034 23.8755 23.7503C24.9833 22.963 26.0087 22.1545 26.9503 21.3342C29.2709 23.9413 29.7022 25.7633 29.3617 26.3609ZM25.7988 17.5983C25.4676 17.9212 25.1129 18.2441 24.7475 18.5658C24.7405 17.4592 24.6992 16.3572 24.6167 15.2882C24.4989 13.7738 24.2797 12.3324 24.0121 10.9335C27.3026 10.2617 29.0257 10.7897 29.3592 11.3683C29.7517 12.0543 29.133 14.3513 25.7988 17.5983Z%22 fill%3D%22url(%23paint0_linear_393_7959)%22%2F%3E%3Cdefs%3E%3ClinearGradient id%3D%22paint0_linear_393_7959%22 x1%3D%2216.5%22 y1%3D%220%22 x2%3D%2216.5%22 y2%3D%2237.7304%22 gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop stop-color%3D%22%2306B3F4%22%2F%3E%3Cstop offset%3D%221%22 stop-color%3D%22%237B61FF%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\") no-repeat;background-size:100% 100%}.chat__header__text{display:flex;flex-direction:column;flex-grow:1;margin-left:20px}.chat__header__text__title{display:flex;align-items:center}.chat__header__text__title:after{content:\"BETA\";display:inline-flex;padding:2px 10px;background:#25258C;color:#f4f4f3;font-weight:600;font-size:10px;line-height:14px;border-radius:8px;margin-left:12px;font-family:\"Nunito Sans\",sans-serif}.chat__header__text__subtitle{font-size:14px;line-height:22px}.chat__header dr-button::ng-deep button:not(:hover){color:#25258c}.chat__empty-state{display:flex;justify-content:center}.chat__empty-state__text{padding:20px 0;font-family:Poppins,sans-serif;font-size:20px;font-weight:300;line-height:30px;text-align:center;max-width:440px}.chat__messages{display:flex;flex-grow:1;overflow-x:hidden;overflow-y:auto;height:100%;width:100%}.chat__messages__container{overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column;width:100%;padding-bottom:1px}.chat__messages__container--scroll::ng-deep dr-chat-message{padding-right:16px}.chat__suggestions--full-height{flex-grow:1;height:1px;overflow:auto}.chat--in-full-screen .chat__empty-state__text{padding:77px 0;font-size:28px;line-height:46px;max-width:570px}.chat--in-full-screen .chat__messages::ng-deep dr-chat-message{justify-content:center}.chat--in-full-screen .chat__messages::ng-deep .message{max-width:919px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items{padding-left:0;padding-right:0}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__items__item{margin:0 0 26px;height:80px;width:310px;font-size:16px}.chat--in-full-screen .chat__suggestions::ng-deep .chat-suggestions__container{padding:0}\n"]
                 },] }
     ];
     DrChatComponent.ctorParameters = function () { return [
@@ -6204,7 +6213,7 @@
                     selector: 'dr-chat-suggestions',
                     template: "<div class=\"chat-suggestions\">\n    <ng-container *ngIf=\"buttonMode; else suggestionCards\">\n        <div class=\"chat-suggestions__container\">\n            <div class=\"chat-suggestions__container__button\">\n                Suggested chats\n            </div>\n            <ng-container *ngTemplateOutlet=\"suggestionCards\"></ng-container>\n        </div>\n    </ng-container>\n</div>\n\n<ng-template #suggestionCards>\n    <div class=\"chat-suggestions__items\">\n        <div class=\"chat-suggestions__items__background\"></div>\n        <div *ngFor=\"let item of values\"\n             class=\"chat-suggestions__items__item\" (click)=\"onItemClick(item)\">\n            {{ item }}\n        </div>\n    </div>\n</ng-template>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:flex;align-items:flex-start;justify-content:center}:host .chat-suggestions{display:flex;width:100%;max-width:970px}:host .chat-suggestions__container{display:flex;position:relative;width:auto;margin-top:12px;padding:0 60px}:host .chat-suggestions__container:hover{width:100%}:host .chat-suggestions__container:hover .chat-suggestions__container__button{background:#EAEAFF}:host .chat-suggestions__container:hover .chat-suggestions__items,:host .chat-suggestions__container:hover .chat-suggestions__items__background{display:flex}:host .chat-suggestions__container__button{display:flex;align-items:center;height:30px;padding:0 16px;font-size:12px;line-height:20px;background:#F2F2FF;color:#1d1d6d;border-radius:4px;cursor:pointer}:host .chat-suggestions__container .chat-suggestions__items{display:none;position:absolute;width:100%;bottom:0;left:0;padding-bottom:30px;z-index:2}:host .chat-suggestions__items{display:flex;flex-wrap:wrap;width:100%;justify-content:space-between;padding:0 60px}:host .chat-suggestions__items__background{display:none;position:absolute;top:-30px;right:0;bottom:30px;left:0;background:white;opacity:.7;z-index:-1}:host .chat-suggestions__items__item{margin:0 0 20px;display:inline-flex;height:76px;width:240px;padding:16px;border-radius:8px;background:#F2F2FB;border:1px solid #F0F1F4;box-shadow:0 2px 6px #00000026;font-size:14px;line-height:24px}:host .chat-suggestions__items__item:hover{cursor:pointer;box-shadow:0 2px 6px #00000040}\n"]
+                    styles: [":host{display:flex;align-items:flex-start;justify-content:center}:host .chat-suggestions{display:flex;width:100%;max-width:970px}:host .chat-suggestions__container{display:flex;position:relative;width:auto;margin-top:12px;padding:0 24px}:host .chat-suggestions__container:hover{width:100%}:host .chat-suggestions__container:hover .chat-suggestions__container__button{background:#EAEAFF}:host .chat-suggestions__container:hover .chat-suggestions__items,:host .chat-suggestions__container:hover .chat-suggestions__items__background{display:flex}:host .chat-suggestions__container__button{display:flex;align-items:center;height:30px;padding:0 16px;font-size:12px;line-height:20px;background:#F2F2FF;color:#1d1d6d;border-radius:4px;cursor:pointer}:host .chat-suggestions__container .chat-suggestions__items{display:none;position:absolute;width:100%;bottom:0;left:0;padding-bottom:30px;z-index:2}:host .chat-suggestions__items{display:flex;flex-wrap:wrap;width:100%;justify-content:space-between;padding:0 24px}:host .chat-suggestions__items__background{display:none;position:absolute;top:-30px;right:0;bottom:30px;left:0;background:white;opacity:.7;z-index:-1}:host .chat-suggestions__items__item{margin:0 0 20px;display:inline-flex;height:76px;width:275px;padding:16px;border-radius:8px;background:#F2F2FB;border:1px solid #F0F1F4;box-shadow:0 2px 6px #00000026;font-size:14px;line-height:24px}:host .chat-suggestions__items__item:hover{cursor:pointer;background:#EAEAFF}\n"]
                 },] }
     ];
     DrChatSuggestionsComponent.ctorParameters = function () { return []; };
@@ -6236,6 +6245,7 @@
                         common.CommonModule,
                         DrAvatarModule,
                         DrInputsModule,
+                        DrTooltipModule,
                     ],
                     declarations: __spreadArray(__spreadArray([], __read(DR_CHAT_COMPONENTS)), __read(DR_CHAT_DIRECTIVES)),
                     exports: __spreadArray(__spreadArray([], __read(DR_CHAT_COMPONENTS)), __read(DR_CHAT_DIRECTIVES)),