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

package/dist/es/chat/chat.component.js

@@ -8,11 +8,10 @@ import { AttachmentTemplateDirective } from './attachment-template.directive';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { makeHandler } from './builtin-actions';
 import { MessageTemplateDirective } from './message-template.directive';
-import { SendMessageEvent } from '../api/post-message-event';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../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>';
+import { ChatMessageBoxTemplateDirective } from './message-box.directive';
+import { MessageBoxComponent } from './message-box.component';
 /**
  * Represents the Kendo UI Chat component for Angular.
  *
@@ -28,6 +27,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 %}).
@@ -56,7 +61,7 @@ var ChatComponent = /** @class */ (function () {
     }
     Object.defineProperty(ChatComponent.prototype, "className", {
         get: function () {
-            return 'k-widget k-chat';
+            return 'k-chat';
         },
         enumerable: true,
         configurable: true
@@ -68,6 +73,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 () {
@@ -87,33 +102,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
      */
@@ -122,7 +110,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();
+            }
         }
     };
     /**
@@ -139,6 +129,10 @@ var ChatComponent = /** @class */ (function () {
         Input(),
         tslib_1.__metadata("design:type", Object)
     ], ChatComponent.prototype, "user", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], ChatComponent.prototype, "messageBoxType", void 0);
     tslib_1.__decorate([
         Output(),
         tslib_1.__metadata("design:type", EventEmitter)
@@ -166,9 +160,13 @@ var ChatComponent = /** @class */ (function () {
         tslib_1.__metadata("design:type", MessageTemplateDirective)
     ], ChatComponent.prototype, "messageTemplate", void 0);
     tslib_1.__decorate([
-        ViewChild('messageInput', { static: true }),
-        tslib_1.__metadata("design:type", ElementRef)
-    ], ChatComponent.prototype, "messageInput", void 0);
+        ContentChild(ChatMessageBoxTemplateDirective, { static: false }),
+        tslib_1.__metadata("design:type", ChatMessageBoxTemplateDirective)
+    ], ChatComponent.prototype, "messageBoxTemplate", void 0);
+    tslib_1.__decorate([
+        ViewChild('messageBox', { static: false }),
+        tslib_1.__metadata("design:type", MessageBoxComponent)
+    ], ChatComponent.prototype, "messageBox", void 0);
     tslib_1.__decorate([
         ViewChild('messageList', { static: true }),
         tslib_1.__metadata("design:type", ElementRef)
@@ -183,10 +181,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", [LocalizationService,
-            NgZone])
+        tslib_1.__metadata("design:paramtypes", [LocalizationService, NgZone])
     ], ChatComponent);
     return ChatComponent;
 }());

package/dist/es/chat/chat.directives.js

@@ -5,3 +5,4 @@
 export { ChatComponent } from './chat.component';
 export { AttachmentTemplateDirective } from './attachment-template.directive';
 export { MessageTemplateDirective } from './message-template.directive';
+export { ChatMessageBoxTemplateDirective } from './message-box.directive';

package/dist/es/chat/chat.module.js

@@ -18,12 +18,15 @@ import { MessageListComponent } from './message-list.component';
 import { NgModule } from '@angular/core';
 import { ScrollAnchorDirective } from '../common/scroll-anchor.directive';
 import { SuggestedActionsComponent } from './suggested-actions.component';
+import { MessageBoxComponent } from './message-box.component';
+import { ChatMessageBoxTemplateDirective } from './message-box.directive';
 var PUBLIC_DIRECTIVES = [
     ChatComponent,
     CustomMessagesComponent,
     AttachmentTemplateDirective,
     MessageTemplateDirective,
-    HeroCardComponent
+    HeroCardComponent,
+    ChatMessageBoxTemplateDirective
 ];
 var PRIVATE_DIRECTIVES = [
     AttachmentComponent,
@@ -34,7 +37,8 @@ var PRIVATE_DIRECTIVES = [
     MessageListComponent,
     MessageTemplateDirective,
     ScrollAnchorDirective,
-    SuggestedActionsComponent
+    SuggestedActionsComponent,
+    MessageBoxComponent
 ];
 /**
  * The [NgModule]({{ site.data.urls.angular['ngmodules'] }}) for the Chat component.

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

@@ -139,7 +139,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    "
         }),
         tslib_1.__metadata("design:paramtypes", [NgZone])
     ], MessageAttachmentsComponent);

package/dist/es/chat/message-box.component.js

@@ -0,0 +1,124 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild } from '@angular/core';
+import { SendMessageEvent } from '../api/post-message-event';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { Keys } from '@progress/kendo-angular-common';
+import { ChatMessageBoxTemplateDirective } from './message-box.directive';
+// 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);
+    };
+    tslib_1.__decorate([
+        HostBinding('class'),
+        tslib_1.__metadata("design:type", String)
+    ], MessageBoxComponent.prototype, "hostClasses", void 0);
+    tslib_1.__decorate([
+        HostBinding('class.\!k-align-items-end'),
+        tslib_1.__metadata("design:type", Boolean),
+        tslib_1.__metadata("design:paramtypes", [])
+    ], MessageBoxComponent.prototype, "messageBoxValue", null);
+    tslib_1.__decorate([
+        ViewChild('messageBoxInput', { static: false }),
+        tslib_1.__metadata("design:type", ElementRef)
+    ], MessageBoxComponent.prototype, "messageBoxInput", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Object)
+    ], MessageBoxComponent.prototype, "user", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", Boolean)
+    ], MessageBoxComponent.prototype, "autoScroll", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", String)
+    ], MessageBoxComponent.prototype, "type", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", LocalizationService)
+    ], MessageBoxComponent.prototype, "localization", void 0);
+    tslib_1.__decorate([
+        Input(),
+        tslib_1.__metadata("design:type", ChatMessageBoxTemplateDirective)
+    ], MessageBoxComponent.prototype, "messageBoxTemplate", void 0);
+    tslib_1.__decorate([
+        Output(),
+        tslib_1.__metadata("design:type", EventEmitter)
+    ], MessageBoxComponent.prototype, "sendMessage", void 0);
+    MessageBoxComponent = tslib_1.__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;
+}());
+export { MessageBoxComponent };

package/dist/es/chat/message-box.directive.js

@@ -0,0 +1,24 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, TemplateRef } from '@angular/core';
+/**
+ * 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 = tslib_1.__decorate([
+        Directive({
+            selector: '[kendoChatMessageBoxTemplate]'
+        }),
+        tslib_1.__metadata("design:paramtypes", [TemplateRef])
+    ], ChatMessageBoxTemplateDirective);
+    return ChatMessageBoxTemplateDirective;
+}());
+export { ChatMessageBoxTemplateDirective };

package/dist/es/chat/message-list.component.js

@@ -156,7 +156,7 @@ var MessageListComponent = /** @class */ (function () {
     MessageListComponent = tslib_1.__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    "
         }),
         tslib_1.__metadata("design:paramtypes", [ElementRef, IntlService])
     ], MessageListComponent);

package/dist/es/chat/message.component.js

@@ -68,7 +68,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    "
         }),
         tslib_1.__metadata("design:paramtypes", [ElementRef, IntlService])
     ], MessageComponent);

package/dist/es/chat/suggested-actions.component.js

@@ -83,7 +83,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;

package/dist/es/common/focused-state.directive.js

@@ -18,7 +18,7 @@ var FocusedStateDirective = /** @class */ (function () {
         this.focused = false;
     };
     tslib_1.__decorate([
-        HostBinding('class.k-state-focused'),
+        HostBinding('class.k-focus'),
         tslib_1.__metadata("design:type", Boolean)
     ], FocusedStateDirective.prototype, "focused", void 0);
     tslib_1.__decorate([

package/dist/es/common/models/message-box-options.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es/index.js

@@ -14,6 +14,7 @@ export { CustomMessagesComponent } from './chat/l10n/custom-messages.component';
 export { LocalizedMessagesDirective } from './chat/l10n/localized-messages.directive';
 export { Messages } from './chat/l10n/messages';
 export { MessageAttachmentsComponent } from './chat/message-attachments.component';
+export { MessageBoxComponent } from './chat/message-box.component';
 export { MessageListComponent } from './chat/message-list.component';
 export { MessageComponent } from './chat/message.component';
 export { SuggestedActionsComponent } from './chat/suggested-actions.component';

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export 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'
 };

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

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

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

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

package/dist/es2015/chat/chat.component.d.ts

@@ -10,6 +10,9 @@ import { Message } from '../api/message.interface';
 import { MessageTemplateDirective } from './message-template.directive';
 import { SendMessageEvent } from '../api/post-message-event';
 import { User } from '../api/user.interface';
+import { MessageBoxType } from '../common/models/message-box-options';
+import { ChatMessageBoxTemplateDirective } from './message-box.directive';
+import { MessageBoxComponent } from './message-box.component';
 /**
  * Represents the Kendo UI Chat component for Angular.
  *
@@ -34,6 +37,12 @@ export declare class ChatComponent implements AfterViewInit, OnDestroy {
      * The User ID identifies messages that are authored by the local user.
      */
     user: User;
+    /**
+     * Used to switch between a one-liner input or a textarea.
+     * ([see example]({% slug message_box %})#toc-message-box-types).
+     * @default input
+     */
+    messageBoxType: MessageBoxType;
     /**
      * Fires when the user types a message and clicks the **Send** button or presses **Enter**.
      * Emits the [`SendMessageEvent`]({% slug api_conversational-ui_sendmessageevent %}).
@@ -53,14 +62,16 @@ export declare class ChatComponent implements AfterViewInit, OnDestroy {
     readonly dirAttr: string;
     attachmentTemplate: AttachmentTemplateDirective;
     messageTemplate: MessageTemplateDirective;
+    messageBoxTemplate: ChatMessageBoxTemplateDirective;
+    messageBox: MessageBoxComponent;
     /**
      * @hidden
      */
-    messageInput: ElementRef;
+    messageList: ElementRef;
     /**
      * @hidden
      */
-    messageList: ElementRef;
+    readonly localizationText: LocalizationService;
     /**
      * @hidden
      */
@@ -71,14 +82,6 @@ export declare class ChatComponent implements AfterViewInit, OnDestroy {
     ngOnChanges(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    /**
-     * @hidden
-     */
-    sendClick(): void;
-    /**
-     * @hidden
-     */
-    inputKeydown(e: any): void;
     /**
      * @hidden
      */