@progress/kendo-angular-conversational-ui 4.0.2-dev.202203091004 → 4.1.0

package/dist/fesm5/index.js

@@ -3,12 +3,12 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __param, __metadata, __extends } from 'tslib';
-import { Directive, Optional, TemplateRef, isDevMode, Input, Output, EventEmitter, HostBinding, ContentChild, ViewChild, ElementRef, Component, NgZone, forwardRef, HostListener, ViewChildren, QueryList, Renderer2, NgModule } from '@angular/core';
+import { Directive, Optional, TemplateRef, HostBinding, ViewChild, ElementRef, Input, Output, EventEmitter, Component, isDevMode, ContentChild, NgZone, forwardRef, HostListener, ViewChildren, QueryList, Renderer2, NgModule } from '@angular/core';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
+import { Keys, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
 import { CommonModule } from '@angular/common';
-import { ResizeSensorModule } from '@progress/kendo-angular-common';
 import { fromEvent } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { IntlService } from '@progress/kendo-angular-intl';
@@ -108,13 +108,143 @@ var packageMetadata = {
     name: '@progress/kendo-angular-conversational-ui',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1646820248,
+    publishDate: 1649323827,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
+/**
+ * Creates a message box area that overrides the default message box of the Conversational UI Component.
+ * To define a message-box template, nest an `<ng-template>` tag with the `kendoChatMessageBoxTemplate` directive inside the `<kendo-chat>` tag
+ * [see example]({% slug message_box %}#toc-message-box-template).
+ */
+var ChatMessageBoxTemplateDirective = /** @class */ (function () {
+    function ChatMessageBoxTemplateDirective(templateRef) {
+        this.templateRef = templateRef;
+    }
+    ChatMessageBoxTemplateDirective = __decorate([
+        Directive({
+            selector: '[kendoChatMessageBoxTemplate]'
+        }),
+        __metadata("design:paramtypes", [TemplateRef])
+    ], ChatMessageBoxTemplateDirective);
+    return ChatMessageBoxTemplateDirective;
+}());
+
 // tslint:disable-next-line:max-line-length
 var sendIcon = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16"><path d="M0,14.3c-0.1,0.6,0.3,0.8,0.8,0.6l14.8-6.5c0.5-0.2,0.5-0.6,0-0.8L0.8,1.1C0.3,0.9-0.1,1.1,0,1.7l0.7,4.2C0.8,6.5,1.4,7,1.9,7.1l8.8,0.8c0.6,0.1,0.6,0.1,0,0.2L1.9,8.9C1.4,9,0.8,9.5,0.7,10.1L0,14.3z"/></svg>';
+/**
+ * @hidden
+ */
+var MessageBoxComponent = /** @class */ (function () {
+    function MessageBoxComponent() {
+        this.hostClasses = 'k-message-box k-input k-input-md k-rounded-md k-input-solid';
+        this.sendMessage = new EventEmitter();
+    }
+    Object.defineProperty(MessageBoxComponent.prototype, "messageBoxValue", {
+        get: function () {
+            return this.type === 'textarea';
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @hidden
+     */
+    MessageBoxComponent.prototype.sendClick = function () {
+        var input = this.messageBoxInput.nativeElement;
+        var value = input.value;
+        if (!value) {
+            return;
+        }
+        var message = {
+            author: this.user,
+            text: value,
+            timestamp: new Date()
+        };
+        this.sendMessage.emit(new SendMessageEvent(message));
+        input.value = null;
+        input.focus();
+        this.autoScroll = true;
+    };
+    /**
+     * @hidden
+     */
+    MessageBoxComponent.prototype.inputKeydown = function (e) {
+        if (e.keyCode === Keys.Enter) {
+            this.sendClick();
+        }
+    };
+    /**
+     * @hidden
+     */
+    MessageBoxComponent.prototype.textAreaKeydown = function (e) {
+        var isEnter = e.keyCode === Keys.Enter;
+        if (!isEnter) {
+            return;
+        }
+        var newLine = (e.metaKey || e.ctrlKey);
+        var enterOnly = !(e.shiftKey || e.metaKey || e.ctrlKey);
+        if (enterOnly) {
+            e.preventDefault();
+            this.sendClick();
+        }
+        if (newLine) {
+            this.messageBoxInput.nativeElement.value += "\r\n";
+        }
+    };
+    /**
+     * @hidden
+     */
+    MessageBoxComponent.prototype.textFor = function (key) {
+        return this.localization.get(key);
+    };
+    __decorate([
+        HostBinding('class'),
+        __metadata("design:type", String)
+    ], MessageBoxComponent.prototype, "hostClasses", void 0);
+    __decorate([
+        HostBinding('class.\!k-align-items-end'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], MessageBoxComponent.prototype, "messageBoxValue", null);
+    __decorate([
+        ViewChild('messageBoxInput', { static: false }),
+        __metadata("design:type", ElementRef)
+    ], MessageBoxComponent.prototype, "messageBoxInput", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object)
+    ], MessageBoxComponent.prototype, "user", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Boolean)
+    ], MessageBoxComponent.prototype, "autoScroll", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], MessageBoxComponent.prototype, "type", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", LocalizationService)
+    ], MessageBoxComponent.prototype, "localization", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", ChatMessageBoxTemplateDirective)
+    ], MessageBoxComponent.prototype, "messageBoxTemplate", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], MessageBoxComponent.prototype, "sendMessage", void 0);
+    MessageBoxComponent = __decorate([
+        Component({
+            selector: 'kendo-message-box',
+            template: "\n    <ng-container *ngIf=\"!messageBoxTemplate\">\n        <input\n            *ngIf=\"type === 'textbox'\"\n            #messageBoxInput\n            kendoChatFocusedState\n            type=\"text\"\n            class=\"k-textbox k-input k-input-md k-input-solid\"\n            [placeholder]=\"textFor('messagePlaceholder')\"\n            (keydown)=\"inputKeydown($event)\"\n        />\n\n        <textarea\n        *ngIf=\"type === 'textarea'\"\n        #messageBoxInput\n        kendoChatFocusedState\n        [rows]=\"3\"\n        class=\"k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none\"\n        [placeholder]=\"textFor('messagePlaceholder')\"\n        (keydown)=\"textAreaKeydown($event)\"\n        ></textarea>\n\n        <button\n            kendoButton\n            fillMode=\"flat\"\n            class=\"k-button-send\"\n            [tabindex]=\"0\"\n            [attr.title]=\"textFor('send')\"\n            (click)=\"sendClick()\"\n        >\n            " + sendIcon + "\n        </button>\n    </ng-container>\n\n    <ng-template *ngIf=\"messageBoxTemplate\" [ngTemplateOutlet]=\"messageBoxTemplate?.templateRef\"></ng-template>\n"
+        })
+    ], MessageBoxComponent);
+    return MessageBoxComponent;
+}());
+
 /**
  * Represents the Kendo UI Chat component for Angular.
  *
@@ -130,6 +260,12 @@ var ChatComponent = /** @class */ (function () {
         var _this = this;
         this.localization = localization;
         this.zone = zone;
+        /**
+         * Used to switch between a one-liner input or a textarea.
+         * ([see example]({% slug message_box %})#toc-message-box-types).
+         * @default input
+         */
+        this.messageBoxType = 'textbox';
         /**
          * Fires when the user types a message and clicks the **Send** button or presses **Enter**.
          * Emits the [`SendMessageEvent`]({% slug api_conversational-ui_sendmessageevent %}).
@@ -158,7 +294,7 @@ var ChatComponent = /** @class */ (function () {
     }
     Object.defineProperty(ChatComponent.prototype, "className", {
         get: function () {
-            return 'k-widget k-chat';
+            return 'k-chat';
         },
         enumerable: true,
         configurable: true
@@ -170,6 +306,16 @@ var ChatComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ChatComponent.prototype, "localizationText", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this.localization;
+        },
+        enumerable: true,
+        configurable: true
+    });
     ChatComponent.prototype.ngOnChanges = function () {
         var _this = this;
         this.zone.runOutsideAngular(function () { return setTimeout(function () {
@@ -189,33 +335,6 @@ var ChatComponent = /** @class */ (function () {
             this.localizationChangeSubscription.unsubscribe();
         }
     };
-    /**
-     * @hidden
-     */
-    ChatComponent.prototype.sendClick = function () {
-        var input = this.messageInput.nativeElement;
-        var value = input.value;
-        if (!value) {
-            return;
-        }
-        var message = {
-            author: this.user,
-            text: value,
-            timestamp: new Date()
-        };
-        this.sendMessage.emit(new SendMessageEvent(message));
-        input.value = null;
-        input.focus();
-        this.autoScroll = true;
-    };
-    /**
-     * @hidden
-     */
-    ChatComponent.prototype.inputKeydown = function (e) {
-        if (e.keyCode === 13 /* enter */) {
-            this.sendClick();
-        }
-    };
     /**
      * @hidden
      */
@@ -224,7 +343,9 @@ var ChatComponent = /** @class */ (function () {
         if (!e.isDefaultPrevented()) {
             var handler = makeHandler(e.action);
             handler(e.action, this);
-            this.messageInput.nativeElement.focus();
+            if (!this.messageBoxTemplate) {
+                this.messageBox.messageBoxInput.nativeElement.focus();
+            }
         }
     };
     /**
@@ -241,6 +362,10 @@ var ChatComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", Object)
     ], ChatComponent.prototype, "user", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], ChatComponent.prototype, "messageBoxType", void 0);
     __decorate([
         Output(),
         __metadata("design:type", EventEmitter)
@@ -268,9 +393,13 @@ var ChatComponent = /** @class */ (function () {
         __metadata("design:type", MessageTemplateDirective)
     ], ChatComponent.prototype, "messageTemplate", void 0);
     __decorate([
-        ViewChild('messageInput', { static: true }),
-        __metadata("design:type", ElementRef)
-    ], ChatComponent.prototype, "messageInput", void 0);
+        ContentChild(ChatMessageBoxTemplateDirective, { static: false }),
+        __metadata("design:type", ChatMessageBoxTemplateDirective)
+    ], ChatComponent.prototype, "messageBoxTemplate", void 0);
+    __decorate([
+        ViewChild('messageBox', { static: false }),
+        __metadata("design:type", MessageBoxComponent)
+    ], ChatComponent.prototype, "messageBox", void 0);
     __decorate([
         ViewChild('messageList', { static: true }),
         __metadata("design:type", ElementRef)
@@ -285,10 +414,9 @@ var ChatComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-chat',
-            template: "\n    <ng-container\n      kendoChatLocalizedMessages\n      i18n-messagePlaceholder=\"kendo.chat.messagePlaceholder|The placholder text of the message text input\"\n      messagePlaceholder=\"Type a message...\"\n\n      i18n-send=\"kendo.chat.send|The text for the Send button\"\n      send=\"Send...\"\n    >\n    </ng-container>\n\n    <div\n      #messageList\n      class=\"k-message-list k-avatars\"\n      aria-live=\"polite\" role=\"log\"\n      kendoChatScrollAnchor\n        #anchor=\"scrollAnchor\"\n        [(autoScroll)]=\"autoScroll\"\n    >\n      <kendo-chat-message-list\n        [messages]=\"messages\"\n        [messageTemplate]=\"messageTemplate\"\n        [attachmentTemplate]=\"attachmentTemplate\"\n        [user]=\"user\"\n        (executeAction)=\"dispatchAction($event)\"\n        (resize)=\"anchor.scrollToBottom()\"\n        (navigate)=\"this.autoScroll = false\"\n      >\n      </kendo-chat-message-list>\n    </div>\n\n    <div class=\"k-message-box\">\n      <input\n        #messageInput\n        kendoChatFocusedState\n        type=\"text\"\n        class=\"k-input\"\n        [placeholder]=\"textFor('messagePlaceholder')\"\n        (keydown)=\"inputKeydown($event)\"\n      >\n      <button\n        kendoButton\n        fillMode=\"flat\"\n        class=\"k-button-send\"\n        tabindex=\"-1\"\n        [attr.title]=\"textFor('send')\"\n        (click)=\"sendClick()\"\n      >" + sendIcon + "</button>\n    </div>\n  "
+            template: "\n        <ng-container\n        kendoChatLocalizedMessages\n        i18n-messagePlaceholder=\"kendo.chat.messagePlaceholder|The placholder text of the message text input\"\n        messagePlaceholder=\"Type a message...\"\n\n        i18n-send=\"kendo.chat.send|The text for the Send button\"\n        send=\"Send...\"\n        >\n        </ng-container>\n\n        <div\n        #messageList\n        class=\"k-message-list k-avatars\"\n        aria-live=\"polite\" role=\"log\"\n        kendoChatScrollAnchor\n            #anchor=\"scrollAnchor\"\n            [(autoScroll)]=\"autoScroll\"\n        >\n        <kendo-chat-message-list\n            [messages]=\"messages\"\n            [messageTemplate]=\"messageTemplate\"\n            [attachmentTemplate]=\"attachmentTemplate\"\n            [user]=\"user\"\n            (executeAction)=\"dispatchAction($event)\"\n            (resize)=\"anchor.scrollToBottom()\"\n            (navigate)=\"this.autoScroll = false\"\n        >\n        </kendo-chat-message-list>\n        </div>\n        <kendo-message-box\n        #messageBox\n        [messageBoxTemplate]=\"messageBoxTemplate\"\n        [type]=\"messageBoxType\"\n        [user]=\"user\"\n        [autoScroll]=\"autoScroll\"\n        [localization]=\"localizationText\"\n        (sendMessage)=\"sendMessage.emit($event)\"\n        >\n        </kendo-message-box>\n    "
         }),
-        __metadata("design:paramtypes", [LocalizationService,
-            NgZone])
+        __metadata("design:paramtypes", [LocalizationService, NgZone])
     ], ChatComponent);
     return ChatComponent;
 }());
@@ -345,7 +473,7 @@ var AttachmentComponent = /** @class */ (function () {
     AttachmentComponent = __decorate([
         Component({
             selector: 'kendo-chat-attachment',
-            template: "\n    <ng-container *ngIf=\"template\">\n      <ng-container *ngTemplateOutlet=\"template.templateRef; context: context;\">\n      </ng-container>\n    </ng-container>\n\n    <div *ngIf=\"!template\" class=\"k-card\">\n      <div class=\"k-card-body\">\n        <h5 class=\"k-card-title\" *ngIf=\"attachment.title\">\n          {{ attachment.title }}\n        </h5>\n        <h6 class=\"k-card-subtitle\" *ngIf=\"attachment.subtitle\">\n          {{ attachment.subtitle }}\n        </h6>\n        <img *ngIf=\"image\" [attr.src]=\"attachment.content\" />\n        <ng-container *ngIf=\"unknown\">\n          {{ attachment.content }}\n        </ng-container>\n      </div>\n    </div>\n  "
+            template: "\n        <ng-container *ngIf=\"template\">\n            <ng-container *ngTemplateOutlet=\"template.templateRef; context: context;\">\n            </ng-container>\n        </ng-container>\n\n        <div *ngIf=\"!template\" class=\"k-card\">\n            <div class=\"k-card-body\">\n            <h5 class=\"k-card-title\" *ngIf=\"attachment.title\">\n                {{ attachment.title }}\n            </h5>\n            <h6 class=\"k-card-subtitle\" *ngIf=\"attachment.subtitle\">\n                {{ attachment.subtitle }}\n            </h6>\n            <img *ngIf=\"image\" [attr.src]=\"attachment.content\" />\n            <ng-container *ngIf=\"unknown\">\n                {{ attachment.content }}\n            </ng-container>\n            </div>\n        </div>\n    "
         })
     ], AttachmentComponent);
     return AttachmentComponent;
@@ -421,7 +549,7 @@ var FocusedStateDirective = /** @class */ (function () {
         this.focused = false;
     };
     __decorate([
-        HostBinding('class.k-state-focused'),
+        HostBinding('class.k-focus'),
         __metadata("design:type", Boolean)
     ], FocusedStateDirective.prototype, "focused", void 0);
     __decorate([
@@ -486,7 +614,7 @@ var HeroCardComponent = /** @class */ (function () {
     HeroCardComponent = __decorate([
         Component({
             selector: 'kendo-chat-hero-card',
-            template: "\n    <img class=\"k-card-image\" [src]=\"imageUrl\" *ngIf=\"imageUrl\" />\n    <div class=\"k-card-body\">\n      <h5 class=\"k-card-title\" *ngIf=\"title\">\n        {{ title }}\n      </h5>\n      <h6 class=\"k-card-subtitle\" *ngIf=\"subtitle\">\n        {{ subtitle }}\n      </h6>\n    </div>\n    <div class=\"k-card-actions k-card-actions-vertical\">\n      <span class=\"k-card-action\"\n            *ngFor=\"let act of actions\"\n      >\n        <button\n          kendoButton fillMode=\"flat\"\n          (click)=\"onClick(act)\">\n          {{ act.title }}\n        </button>\n      </span>\n    </div>\n  "
+            template: "\n        <img class=\"k-card-image\" [src]=\"imageUrl\" *ngIf=\"imageUrl\" />\n        <div class=\"k-card-body\">\n        <h5 class=\"k-card-title\" *ngIf=\"title\">\n            {{ title }}\n        </h5>\n        <h6 class=\"k-card-subtitle\" *ngIf=\"subtitle\">\n            {{ subtitle }}\n        </h6>\n        </div>\n        <div class=\"k-card-actions k-card-actions-vertical\">\n        <span class=\"k-card-action\"\n                *ngFor=\"let act of actions\"\n        >\n            <button\n                kendoButton fillMode=\"flat\"\n                (click)=\"onClick(act)\"\n            >\n                    {{ act.title }}\n            </button>\n        </span>\n        </div>\n    "
         })
     ], HeroCardComponent);
     return HeroCardComponent;
@@ -660,7 +788,7 @@ var MessageAttachmentsComponent = /** @class */ (function (_super) {
                     useExisting: forwardRef(function () { return MessageAttachmentsComponent_1; })
                 }],
             selector: 'kendo-chat-message-attachments',
-            template: "\n    <button\n      *ngIf=\"carousel && scrollPosition > 0\"\n      (click)=\"scrollTo(-1)\"\n      class=\"k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base\"\n      tabindex=\"-1\">\n        <span class=\"k-icon k-button-icon k-i-arrow-chevron-left\"></span>\n    </button>\n    <div #deck [class.k-card-deck]=\"carousel\">\n      <kendo-chat-attachment #item\n        *ngFor=\"let att of attachments; index as index; first as first; last as last\"\n        [attachment]=\"att\"\n        [template]=\"template\"\n        [class.k-state-selected]=\"isSelected(index)\"\n        [class.k-state-focused]=\"isSelected(index)\"\n        [class.k-card-wrap]=\"true\"\n        [class.k-first]=\"first\"\n        [class.k-last]=\"last\"\n        [attr.tabindex]=\"tabbable && isSelected(index) ? '0' : '-1'\"\n        (click)=\"itemClick(index)\"\n        (keydown)=\"itemKeydown($event, att)\"\n      >\n      </kendo-chat-attachment>\n    </div>\n    <button\n      *ngIf=\"carousel && scrollPosition < 1\"\n      (click)=\"scrollTo(1)\"\n      class=\"k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base\"\n      tabindex=\"-1\">\n        <span class=\"k-icon k-button-icon k-i-arrow-chevron-right\"></span>\n    </button>\n  "
+            template: "\n        <button\n        *ngIf=\"carousel && scrollPosition > 0\"\n        (click)=\"scrollTo(-1)\"\n        class=\"k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base\"\n        tabindex=\"-1\">\n            <span class=\"k-icon k-button-icon k-i-arrow-chevron-left\"></span>\n        </button>\n        <div #deck [class.k-card-deck]=\"carousel\">\n        <kendo-chat-attachment #item\n            *ngFor=\"let att of attachments; index as index; first as first; last as last\"\n            [attachment]=\"att\"\n            [template]=\"template\"\n            [class.k-state-selected]=\"isSelected(index)\"\n            [class.k-state-focused]=\"isSelected(index)\"\n            [class.k-card-wrap]=\"true\"\n            [class.k-first]=\"first\"\n            [class.k-last]=\"last\"\n            [attr.tabindex]=\"tabbable && isSelected(index) ? '0' : '-1'\"\n            (click)=\"itemClick(index)\"\n            (keydown)=\"itemKeydown($event, att)\"\n        >\n        </kendo-chat-attachment>\n        </div>\n        <button\n        *ngIf=\"carousel && scrollPosition < 1\"\n        (click)=\"scrollTo(1)\"\n        class=\"k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base\"\n        tabindex=\"-1\">\n            <span class=\"k-icon k-button-icon k-i-arrow-chevron-right\"></span>\n        </button>\n    "
         }),
         __metadata("design:paramtypes", [NgZone])
     ], MessageAttachmentsComponent);
@@ -728,7 +856,7 @@ var MessageComponent = /** @class */ (function (_super) {
                     provide: ChatItem,
                     useExisting: forwardRef(function () { return MessageComponent_1; })
                 }],
-            template: "\n    <time\n      [attr.aria-hidden]=\"!selected\"\n      class=\"k-message-time\"\n      *ngIf=\"message.timestamp\"\n    >\n      {{ formatTimeStamp(message.timestamp) }}\n    </time>\n\n    <ng-container *ngIf=\"!message.typing; else typing\">\n      <div class=\"k-bubble\" *ngIf=\"template\">\n        <ng-container\n          *ngTemplateOutlet=\"template.templateRef; context: { $implicit: message };\"\n        >\n        </ng-container>\n      </div>\n\n      <div class=\"k-bubble\" *ngIf=\"!template && message.text\">\n        {{message.text}}\n      </div>\n    </ng-container>\n\n    <span\n      class=\"k-message-status\"\n      *ngIf=\"message.status\"\n    >\n      {{ message.status }}\n    </span>\n\n    <ng-template #typing>\n      <div class=\"k-bubble\">\n        <div class=\"k-typing-indicator\">\n          <span></span>\n          <span></span>\n          <span></span>\n        </div>\n      </div>\n    </ng-template>\n  "
+            template: "\n        <time\n        [attr.aria-hidden]=\"!selected\"\n        class=\"k-message-time\"\n        *ngIf=\"message.timestamp\"\n        >\n        {{ formatTimeStamp(message.timestamp) }}\n        </time>\n\n        <ng-container *ngIf=\"!message.typing; else typing\">\n        <div class=\"k-bubble\" *ngIf=\"template\">\n            <ng-container\n            *ngTemplateOutlet=\"template.templateRef; context: { $implicit: message };\"\n            >\n            </ng-container>\n        </div>\n\n        <div class=\"k-bubble\" *ngIf=\"!template && message.text\">\n            {{message.text}}\n        </div>\n        </ng-container>\n\n        <span\n        class=\"k-message-status\"\n        *ngIf=\"message.status\"\n        >\n        {{ message.status }}\n        </span>\n\n        <ng-template #typing>\n        <div class=\"k-bubble\">\n            <div class=\"k-typing-indicator\">\n            <span></span>\n            <span></span>\n            <span></span>\n            </div>\n        </div>\n        </ng-template>\n    "
         }),
         __metadata("design:paramtypes", [ElementRef, IntlService])
     ], MessageComponent);
@@ -1018,7 +1146,7 @@ var MessageListComponent = /** @class */ (function () {
     MessageListComponent = __decorate([
         Component({
             selector: 'kendo-chat-message-list',
-            template: "\n    <ng-container *ngFor=\"let group of view; last as lastGroup; trackBy: trackGroup\">\n      <ng-container [ngSwitch]=\"group.type\">\n        <div\n          *ngSwitchCase=\"'date-marker'\"\n          class=\"k-timestamp\"\n        >\n          {{ formatTimeStamp(group.timestamp) }}\n        </div>\n        <div\n          *ngSwitchCase=\"'message-group'\"\n          class=\"k-message-group\"\n          [class.k-alt]=\"isOwnMessage(group.messages[0])\"\n          [class.k-no-avatar]=\"!group.author.avatarUrl\"\n        >\n          <img\n            *ngIf=\"group.author.avatarUrl\"\n            [attr.src]=\"group.author.avatarUrl\"\n            class=\"k-avatar\"\n          />\n          <p *ngIf=\"group.author.name\" class=\"k-author\">{{ group.author.name }}</p>\n          <ng-container\n              *ngFor=\"let msg of group.messages; first as firstMessage; last as lastMessage\"\n          >\n            <img *ngIf=\"msg.user?.avatarUrl\" [src]=\"msg.user?.avatarUrl\" class=\"k-avatar\">\n            <kendo-chat-message #message\n              [message]=\"msg\"\n              [tabbable]=\"lastGroup && lastMessage\"\n              [template]=\"messageTemplate\"\n              (click)=\"select(message)\"\n              (focus)=\"select(message)\"\n              [class.k-only]=\"group.messages.length === 1\"\n              [class.k-first]=\"group.messages.length > 1 && firstMessage\"\n              [class.k-last]=\"group.messages.length > 1 && lastMessage\"\n            >\n            </kendo-chat-message>\n\n            <kendo-chat-attachment\n              *ngIf=\"msg.attachments && msg.attachments.length === 1\"\n              [attachment]=\"msg.attachments[0]\"\n              [template]=\"attachmentTemplate\"\n              >\n            </kendo-chat-attachment>\n          </ng-container>\n        </div>\n\n        <kendo-chat-message-attachments #attachments\n          *ngSwitchCase=\"'attachment-group'\"\n          [attachments]=\"group.attachments\"\n          [layout]=\"group.attachmentLayout\"\n          [tabbable]=\"lastGroup\"\n          [template]=\"attachmentTemplate\"\n          (click)=\"select(attachments)\"\n          (focus)=\"select(attachments)\"\n        >\n        </kendo-chat-message-attachments>\n\n        <kendo-chat-suggested-actions #actions\n          *ngSwitchCase=\"'action-group'\"\n          [actions]=\"group.actions\"\n          [tabbable]=\"lastGroup\"\n          (dispatch)=\"dispatchAction($event, last(group.messages))\"\n          (click)=\"select(actions)\"\n          (focus)=\"select(actions)\"\n        >\n        </kendo-chat-suggested-actions>\n      </ng-container>\n    </ng-container>\n    <kendo-resize-sensor (resize)=\"onResize()\">\n    </kendo-resize-sensor>\n  "
+            template: "\n        <ng-container *ngFor=\"let group of view; last as lastGroup; trackBy: trackGroup\">\n        <ng-container [ngSwitch]=\"group.type\">\n            <div\n            *ngSwitchCase=\"'date-marker'\"\n            class=\"k-timestamp\"\n            >\n            {{ formatTimeStamp(group.timestamp) }}\n            </div>\n            <div\n            *ngSwitchCase=\"'message-group'\"\n            class=\"k-message-group\"\n            [class.k-alt]=\"isOwnMessage(group.messages[0])\"\n            [class.k-no-avatar]=\"!group.author.avatarUrl\"\n            >\n            <img\n                *ngIf=\"group.author.avatarUrl\"\n                [attr.src]=\"group.author.avatarUrl\"\n                class=\"k-avatar\"\n            />\n            <p *ngIf=\"group.author.name\" class=\"k-author\">{{ group.author.name }}</p>\n            <ng-container\n                *ngFor=\"let msg of group.messages; first as firstMessage; last as lastMessage\"\n            >\n                <img *ngIf=\"msg.user?.avatarUrl\" [src]=\"msg.user?.avatarUrl\" class=\"k-avatar\">\n                <kendo-chat-message #message\n                [message]=\"msg\"\n                [tabbable]=\"lastGroup && lastMessage\"\n                [template]=\"messageTemplate\"\n                (click)=\"select(message)\"\n                (focus)=\"select(message)\"\n                [class.k-only]=\"group.messages.length === 1\"\n                [class.k-first]=\"group.messages.length > 1 && firstMessage\"\n                [class.k-last]=\"group.messages.length > 1 && lastMessage\"\n                >\n                </kendo-chat-message>\n\n                <kendo-chat-attachment\n                *ngIf=\"msg.attachments && msg.attachments.length === 1\"\n                [attachment]=\"msg.attachments[0]\"\n                [template]=\"attachmentTemplate\"\n                >\n                </kendo-chat-attachment>\n            </ng-container>\n            </div>\n\n            <kendo-chat-message-attachments #attachments\n            *ngSwitchCase=\"'attachment-group'\"\n            [attachments]=\"group.attachments\"\n            [layout]=\"group.attachmentLayout\"\n            [tabbable]=\"lastGroup\"\n            [template]=\"attachmentTemplate\"\n            (click)=\"select(attachments)\"\n            (focus)=\"select(attachments)\"\n            >\n            </kendo-chat-message-attachments>\n\n            <kendo-chat-suggested-actions #actions\n            *ngSwitchCase=\"'action-group'\"\n            [actions]=\"group.actions\"\n            [tabbable]=\"lastGroup\"\n            (dispatch)=\"dispatchAction($event, last(group.messages))\"\n            (click)=\"select(actions)\"\n            (focus)=\"select(actions)\"\n            >\n            </kendo-chat-suggested-actions>\n        </ng-container>\n        </ng-container>\n        <kendo-resize-sensor (resize)=\"onResize()\">\n        </kendo-resize-sensor>\n    "
         }),
         __metadata("design:paramtypes", [ElementRef, IntlService])
     ], MessageListComponent);
@@ -1184,7 +1312,7 @@ var SuggestedActionsComponent = /** @class */ (function (_super) {
                     provide: ChatItem,
                     useExisting: forwardRef(function () { return SuggestedActionsComponent_1; })
                 }],
-            template: "\n    <span #item\n      *ngFor=\"let action of actions; index as index; first as first; last as last\"\n      class=\"k-quick-reply\"\n      [class.k-state-selected]=\"isSelected(index)\"\n      [class.k-state-focused]=\"isSelected(index)\"\n      [class.k-first]=\"first\"\n      [class.k-last]=\"last\"\n      [attr.tabindex]=\"tabbable && selectedIndex === index ? '0' : '-1'\"\n      (click)=\"actionClick(action)\"\n      (keydown)=\"actionKeydown($event, action)\"\n    >\n      {{ action.title || action.value }}\n    </span>\n  "
+            template: "\n        <span\n            #item\n            *ngFor=\"let action of actions; index as index; first as first; last as last\"\n            class=\"k-quick-reply\"\n            [class.k-state-selected]=\"isSelected(index)\"\n            [class.k-state-focused]=\"isSelected(index)\"\n            [class.k-first]=\"first\"\n            [class.k-last]=\"last\"\n            [attr.tabindex]=\"tabbable && selectedIndex === index ? '0' : '-1'\"\n            (click)=\"actionClick(action)\"\n            (keydown)=\"actionKeydown($event, action)\"\n        >\n        {{ action.title || action.value }}\n        </span>\n    "
         })
     ], SuggestedActionsComponent);
     return SuggestedActionsComponent;
@@ -1195,7 +1323,8 @@ var PUBLIC_DIRECTIVES = [
     CustomMessagesComponent,
     AttachmentTemplateDirective,
     MessageTemplateDirective,
-    HeroCardComponent
+    HeroCardComponent,
+    ChatMessageBoxTemplateDirective
 ];
 var PRIVATE_DIRECTIVES = [
     AttachmentComponent,
@@ -1206,7 +1335,8 @@ var PRIVATE_DIRECTIVES = [
     MessageListComponent,
     MessageTemplateDirective,
     ScrollAnchorDirective,
-    SuggestedActionsComponent
+    SuggestedActionsComponent,
+    MessageBoxComponent
 ];
 /**
  * The [NgModule]({{ site.data.urls.angular['ngmodules'] }}) for the Chat component.
@@ -1250,4 +1380,4 @@ var ChatModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { PreventableEvent, HeroCardComponent, AttachmentComponent, ChatItem, CustomMessagesComponent, LocalizedMessagesDirective, Messages, MessageAttachmentsComponent, MessageListComponent, MessageComponent, SuggestedActionsComponent, FocusedStateDirective, ScrollAnchorDirective, ChatComponent, AttachmentTemplateDirective, MessageTemplateDirective, ChatModule, ExecuteActionEvent, SendMessageEvent };
+export { PreventableEvent, HeroCardComponent, AttachmentComponent, ChatItem, CustomMessagesComponent, LocalizedMessagesDirective, Messages, MessageAttachmentsComponent, MessageBoxComponent, MessageListComponent, MessageComponent, SuggestedActionsComponent, FocusedStateDirective, ScrollAnchorDirective, ChatComponent, AttachmentTemplateDirective, MessageTemplateDirective, ChatMessageBoxTemplateDirective, ChatModule, ExecuteActionEvent, SendMessageEvent };

package/dist/npm/cards/hero-card.component.js

@@ -48,7 +48,7 @@ var HeroCardComponent = /** @class */ (function () {
     HeroCardComponent = tslib_1.__decorate([
         core_1.Component({
             selector: 'kendo-chat-hero-card',
-            template: "\n    <img class=\"k-card-image\" [src]=\"imageUrl\" *ngIf=\"imageUrl\" />\n    <div class=\"k-card-body\">\n      <h5 class=\"k-card-title\" *ngIf=\"title\">\n        {{ title }}\n      </h5>\n      <h6 class=\"k-card-subtitle\" *ngIf=\"subtitle\">\n        {{ subtitle }}\n      </h6>\n    </div>\n    <div class=\"k-card-actions k-card-actions-vertical\">\n      <span class=\"k-card-action\"\n            *ngFor=\"let act of actions\"\n      >\n        <button\n          kendoButton fillMode=\"flat\"\n          (click)=\"onClick(act)\">\n          {{ act.title }}\n        </button>\n      </span>\n    </div>\n  "
+            template: "\n        <img class=\"k-card-image\" [src]=\"imageUrl\" *ngIf=\"imageUrl\" />\n        <div class=\"k-card-body\">\n        <h5 class=\"k-card-title\" *ngIf=\"title\">\n            {{ title }}\n        </h5>\n        <h6 class=\"k-card-subtitle\" *ngIf=\"subtitle\">\n            {{ subtitle }}\n        </h6>\n        </div>\n        <div class=\"k-card-actions k-card-actions-vertical\">\n        <span class=\"k-card-action\"\n                *ngFor=\"let act of actions\"\n        >\n            <button\n                kendoButton fillMode=\"flat\"\n                (click)=\"onClick(act)\"\n            >\n                    {{ act.title }}\n            </button>\n        </span>\n        </div>\n    "
         })
     ], HeroCardComponent);
     return HeroCardComponent;

package/dist/npm/chat/attachment.component.js

@@ -59,7 +59,7 @@ var AttachmentComponent = /** @class */ (function () {
     AttachmentComponent = tslib_1.__decorate([
         core_1.Component({
             selector: 'kendo-chat-attachment',
-            template: "\n    <ng-container *ngIf=\"template\">\n      <ng-container *ngTemplateOutlet=\"template.templateRef; context: context;\">\n      </ng-container>\n    </ng-container>\n\n    <div *ngIf=\"!template\" class=\"k-card\">\n      <div class=\"k-card-body\">\n        <h5 class=\"k-card-title\" *ngIf=\"attachment.title\">\n          {{ attachment.title }}\n        </h5>\n        <h6 class=\"k-card-subtitle\" *ngIf=\"attachment.subtitle\">\n          {{ attachment.subtitle }}\n        </h6>\n        <img *ngIf=\"image\" [attr.src]=\"attachment.content\" />\n        <ng-container *ngIf=\"unknown\">\n          {{ attachment.content }}\n        </ng-container>\n      </div>\n    </div>\n  "
+            template: "\n        <ng-container *ngIf=\"template\">\n            <ng-container *ngTemplateOutlet=\"template.templateRef; context: context;\">\n            </ng-container>\n        </ng-container>\n\n        <div *ngIf=\"!template\" class=\"k-card\">\n            <div class=\"k-card-body\">\n            <h5 class=\"k-card-title\" *ngIf=\"attachment.title\">\n                {{ attachment.title }}\n            </h5>\n            <h6 class=\"k-card-subtitle\" *ngIf=\"attachment.subtitle\">\n                {{ attachment.subtitle }}\n            </h6>\n            <img *ngIf=\"image\" [attr.src]=\"attachment.content\" />\n            <ng-container *ngIf=\"unknown\">\n                {{ attachment.content }}\n            </ng-container>\n            </div>\n        </div>\n    "
         })
     ], AttachmentComponent);
     return AttachmentComponent;

package/dist/npm/chat/chat.component.js

@@ -10,11 +10,10 @@ var attachment_template_directive_1 = require("./attachment-template.directive")
 var kendo_angular_l10n_1 = require("@progress/kendo-angular-l10n");
 var builtin_actions_1 = require("./builtin-actions");
 var message_template_directive_1 = require("./message-template.directive");
-var post_message_event_1 = require("../api/post-message-event");
 var kendo_licensing_1 = require("@progress/kendo-licensing");
 var package_metadata_1 = require("../package-metadata");
-// tslint:disable-next-line:max-line-length
-var sendIcon = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16"><path d="M0,14.3c-0.1,0.6,0.3,0.8,0.8,0.6l14.8-6.5c0.5-0.2,0.5-0.6,0-0.8L0.8,1.1C0.3,0.9-0.1,1.1,0,1.7l0.7,4.2C0.8,6.5,1.4,7,1.9,7.1l8.8,0.8c0.6,0.1,0.6,0.1,0,0.2L1.9,8.9C1.4,9,0.8,9.5,0.7,10.1L0,14.3z"/></svg>';
+var message_box_directive_1 = require("./message-box.directive");
+var message_box_component_1 = require("./message-box.component");
 /**
  * Represents the Kendo UI Chat component for Angular.
  *
@@ -30,6 +29,12 @@ var ChatComponent = /** @class */ (function () {
         var _this = this;
         this.localization = localization;
         this.zone = zone;
+        /**
+         * Used to switch between a one-liner input or a textarea.
+         * ([see example]({% slug message_box %})#toc-message-box-types).
+         * @default input
+         */
+        this.messageBoxType = 'textbox';
         /**
          * Fires when the user types a message and clicks the **Send** button or presses **Enter**.
          * Emits the [`SendMessageEvent`]({% slug api_conversational-ui_sendmessageevent %}).
@@ -58,7 +63,7 @@ var ChatComponent = /** @class */ (function () {
     }
     Object.defineProperty(ChatComponent.prototype, "className", {
         get: function () {
-            return 'k-widget k-chat';
+            return 'k-chat';
         },
         enumerable: true,
         configurable: true
@@ -70,6 +75,16 @@ var ChatComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(ChatComponent.prototype, "localizationText", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return this.localization;
+        },
+        enumerable: true,
+        configurable: true
+    });
     ChatComponent.prototype.ngOnChanges = function () {
         var _this = this;
         this.zone.runOutsideAngular(function () { return setTimeout(function () {
@@ -89,33 +104,6 @@ var ChatComponent = /** @class */ (function () {
             this.localizationChangeSubscription.unsubscribe();
         }
     };
-    /**
-     * @hidden
-     */
-    ChatComponent.prototype.sendClick = function () {
-        var input = this.messageInput.nativeElement;
-        var value = input.value;
-        if (!value) {
-            return;
-        }
-        var message = {
-            author: this.user,
-            text: value,
-            timestamp: new Date()
-        };
-        this.sendMessage.emit(new post_message_event_1.SendMessageEvent(message));
-        input.value = null;
-        input.focus();
-        this.autoScroll = true;
-    };
-    /**
-     * @hidden
-     */
-    ChatComponent.prototype.inputKeydown = function (e) {
-        if (e.keyCode === 13 /* enter */) {
-            this.sendClick();
-        }
-    };
     /**
      * @hidden
      */
@@ -124,7 +112,9 @@ var ChatComponent = /** @class */ (function () {
         if (!e.isDefaultPrevented()) {
             var handler = builtin_actions_1.makeHandler(e.action);
             handler(e.action, this);
-            this.messageInput.nativeElement.focus();
+            if (!this.messageBoxTemplate) {
+                this.messageBox.messageBoxInput.nativeElement.focus();
+            }
         }
     };
     /**
@@ -141,6 +131,10 @@ var ChatComponent = /** @class */ (function () {
         core_1.Input(),
         tslib_1.__metadata("design:type", Object)
     ], ChatComponent.prototype, "user", void 0);
+    tslib_1.__decorate([
+        core_1.Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ChatComponent.prototype, "messageBoxType", void 0);
     tslib_1.__decorate([
         core_1.Output(),
         tslib_1.__metadata("design:type", core_1.EventEmitter)
@@ -168,9 +162,13 @@ var ChatComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", message_template_directive_1.MessageTemplateDirective)
     ], ChatComponent.prototype, "messageTemplate", void 0);
     tslib_1.__decorate([
-        core_1.ViewChild('messageInput', { static: true }),
-        tslib_1.__metadata("design:type", core_1.ElementRef)
-    ], ChatComponent.prototype, "messageInput", void 0);
+        core_1.ContentChild(message_box_directive_1.ChatMessageBoxTemplateDirective, { static: false }),
+        tslib_1.__metadata("design:type", message_box_directive_1.ChatMessageBoxTemplateDirective)
+    ], ChatComponent.prototype, "messageBoxTemplate", void 0);
+    tslib_1.__decorate([
+        core_1.ViewChild('messageBox', { static: false }),
+        tslib_1.__metadata("design:type", message_box_component_1.MessageBoxComponent)
+    ], ChatComponent.prototype, "messageBox", void 0);
     tslib_1.__decorate([
         core_1.ViewChild('messageList', { static: true }),
         tslib_1.__metadata("design:type", core_1.ElementRef)
@@ -185,10 +183,9 @@ var ChatComponent = /** @class */ (function () {
                 }
             ],
             selector: 'kendo-chat',
-            template: "\n    <ng-container\n      kendoChatLocalizedMessages\n      i18n-messagePlaceholder=\"kendo.chat.messagePlaceholder|The placholder text of the message text input\"\n      messagePlaceholder=\"Type a message...\"\n\n      i18n-send=\"kendo.chat.send|The text for the Send button\"\n      send=\"Send...\"\n    >\n    </ng-container>\n\n    <div\n      #messageList\n      class=\"k-message-list k-avatars\"\n      aria-live=\"polite\" role=\"log\"\n      kendoChatScrollAnchor\n        #anchor=\"scrollAnchor\"\n        [(autoScroll)]=\"autoScroll\"\n    >\n      <kendo-chat-message-list\n        [messages]=\"messages\"\n        [messageTemplate]=\"messageTemplate\"\n        [attachmentTemplate]=\"attachmentTemplate\"\n        [user]=\"user\"\n        (executeAction)=\"dispatchAction($event)\"\n        (resize)=\"anchor.scrollToBottom()\"\n        (navigate)=\"this.autoScroll = false\"\n      >\n      </kendo-chat-message-list>\n    </div>\n\n    <div class=\"k-message-box\">\n      <input\n        #messageInput\n        kendoChatFocusedState\n        type=\"text\"\n        class=\"k-input\"\n        [placeholder]=\"textFor('messagePlaceholder')\"\n        (keydown)=\"inputKeydown($event)\"\n      >\n      <button\n        kendoButton\n        fillMode=\"flat\"\n        class=\"k-button-send\"\n        tabindex=\"-1\"\n        [attr.title]=\"textFor('send')\"\n        (click)=\"sendClick()\"\n      >" + sendIcon + "</button>\n    </div>\n  "
+            template: "\n        <ng-container\n        kendoChatLocalizedMessages\n        i18n-messagePlaceholder=\"kendo.chat.messagePlaceholder|The placholder text of the message text input\"\n        messagePlaceholder=\"Type a message...\"\n\n        i18n-send=\"kendo.chat.send|The text for the Send button\"\n        send=\"Send...\"\n        >\n        </ng-container>\n\n        <div\n        #messageList\n        class=\"k-message-list k-avatars\"\n        aria-live=\"polite\" role=\"log\"\n        kendoChatScrollAnchor\n            #anchor=\"scrollAnchor\"\n            [(autoScroll)]=\"autoScroll\"\n        >\n        <kendo-chat-message-list\n            [messages]=\"messages\"\n            [messageTemplate]=\"messageTemplate\"\n            [attachmentTemplate]=\"attachmentTemplate\"\n            [user]=\"user\"\n            (executeAction)=\"dispatchAction($event)\"\n            (resize)=\"anchor.scrollToBottom()\"\n            (navigate)=\"this.autoScroll = false\"\n        >\n        </kendo-chat-message-list>\n        </div>\n        <kendo-message-box\n        #messageBox\n        [messageBoxTemplate]=\"messageBoxTemplate\"\n        [type]=\"messageBoxType\"\n        [user]=\"user\"\n        [autoScroll]=\"autoScroll\"\n        [localization]=\"localizationText\"\n        (sendMessage)=\"sendMessage.emit($event)\"\n        >\n        </kendo-message-box>\n    "
         }),
-        tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService,
-            core_1.NgZone])
+        tslib_1.__metadata("design:paramtypes", [kendo_angular_l10n_1.LocalizationService, core_1.NgZone])
     ], ChatComponent);
     return ChatComponent;
 }());

package/dist/npm/chat/chat.directives.js

@@ -10,3 +10,5 @@ var attachment_template_directive_1 = require("./attachment-template.directive")
 exports.AttachmentTemplateDirective = attachment_template_directive_1.AttachmentTemplateDirective;
 var message_template_directive_1 = require("./message-template.directive");
 exports.MessageTemplateDirective = message_template_directive_1.MessageTemplateDirective;
+var message_box_directive_1 = require("./message-box.directive");
+exports.ChatMessageBoxTemplateDirective = message_box_directive_1.ChatMessageBoxTemplateDirective;

package/dist/npm/chat/chat.module.js

@@ -20,12 +20,15 @@ var message_list_component_1 = require("./message-list.component");
 var core_1 = require("@angular/core");
 var scroll_anchor_directive_1 = require("../common/scroll-anchor.directive");
 var suggested_actions_component_1 = require("./suggested-actions.component");
+var message_box_component_1 = require("./message-box.component");
+var message_box_directive_1 = require("./message-box.directive");
 var PUBLIC_DIRECTIVES = [
     chat_directives_1.ChatComponent,
     custom_messages_component_1.CustomMessagesComponent,
     chat_directives_1.AttachmentTemplateDirective,
     chat_directives_1.MessageTemplateDirective,
-    hero_card_component_1.HeroCardComponent
+    hero_card_component_1.HeroCardComponent,
+    message_box_directive_1.ChatMessageBoxTemplateDirective
 ];
 var PRIVATE_DIRECTIVES = [
     attachment_component_1.AttachmentComponent,
@@ -36,7 +39,8 @@ var PRIVATE_DIRECTIVES = [
     message_list_component_1.MessageListComponent,
     chat_directives_1.MessageTemplateDirective,
     scroll_anchor_directive_1.ScrollAnchorDirective,
-    suggested_actions_component_1.SuggestedActionsComponent
+    suggested_actions_component_1.SuggestedActionsComponent,
+    message_box_component_1.MessageBoxComponent
 ];
 /**
  * The [NgModule]({{ site.data.urls.angular['ngmodules'] }}) for the Chat component.

package/dist/npm/chat/message-attachments.component.js

@@ -141,7 +141,7 @@ var MessageAttachmentsComponent = /** @class */ (function (_super) {
                     useExisting: core_1.forwardRef(function () { return MessageAttachmentsComponent_1; })
                 }],
             selector: 'kendo-chat-message-attachments',
-            template: "\n    <button\n      *ngIf=\"carousel && scrollPosition > 0\"\n      (click)=\"scrollTo(-1)\"\n      class=\"k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base\"\n      tabindex=\"-1\">\n        <span class=\"k-icon k-button-icon k-i-arrow-chevron-left\"></span>\n    </button>\n    <div #deck [class.k-card-deck]=\"carousel\">\n      <kendo-chat-attachment #item\n        *ngFor=\"let att of attachments; index as index; first as first; last as last\"\n        [attachment]=\"att\"\n        [template]=\"template\"\n        [class.k-state-selected]=\"isSelected(index)\"\n        [class.k-state-focused]=\"isSelected(index)\"\n        [class.k-card-wrap]=\"true\"\n        [class.k-first]=\"first\"\n        [class.k-last]=\"last\"\n        [attr.tabindex]=\"tabbable && isSelected(index) ? '0' : '-1'\"\n        (click)=\"itemClick(index)\"\n        (keydown)=\"itemKeydown($event, att)\"\n      >\n      </kendo-chat-attachment>\n    </div>\n    <button\n      *ngIf=\"carousel && scrollPosition < 1\"\n      (click)=\"scrollTo(1)\"\n      class=\"k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base\"\n      tabindex=\"-1\">\n        <span class=\"k-icon k-button-icon k-i-arrow-chevron-right\"></span>\n    </button>\n  "
+            template: "\n        <button\n        *ngIf=\"carousel && scrollPosition > 0\"\n        (click)=\"scrollTo(-1)\"\n        class=\"k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base\"\n        tabindex=\"-1\">\n            <span class=\"k-icon k-button-icon k-i-arrow-chevron-left\"></span>\n        </button>\n        <div #deck [class.k-card-deck]=\"carousel\">\n        <kendo-chat-attachment #item\n            *ngFor=\"let att of attachments; index as index; first as first; last as last\"\n            [attachment]=\"att\"\n            [template]=\"template\"\n            [class.k-state-selected]=\"isSelected(index)\"\n            [class.k-state-focused]=\"isSelected(index)\"\n            [class.k-card-wrap]=\"true\"\n            [class.k-first]=\"first\"\n            [class.k-last]=\"last\"\n            [attr.tabindex]=\"tabbable && isSelected(index) ? '0' : '-1'\"\n            (click)=\"itemClick(index)\"\n            (keydown)=\"itemKeydown($event, att)\"\n        >\n        </kendo-chat-attachment>\n        </div>\n        <button\n        *ngIf=\"carousel && scrollPosition < 1\"\n        (click)=\"scrollTo(1)\"\n        class=\"k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base\"\n        tabindex=\"-1\">\n            <span class=\"k-icon k-button-icon k-i-arrow-chevron-right\"></span>\n        </button>\n    "
         }),
         tslib_1.__metadata("design:paramtypes", [core_1.NgZone])
     ], MessageAttachmentsComponent);