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

package/dist/fesm2015/index.js

@@ -3,12 +3,12 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __param, __metadata } from 'tslib';
-import { Directive, Optional, TemplateRef, EventEmitter, isDevMode, Input, Output, HostBinding, ContentChild, ViewChild, ElementRef, Component, NgZone, forwardRef, HostListener, ViewChildren, QueryList, Renderer2, NgModule } from '@angular/core';
+import { Directive, Optional, TemplateRef, EventEmitter, HostBinding, ViewChild, ElementRef, Input, Output, 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';
@@ -105,13 +105,175 @@ const 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).
+ */
+let ChatMessageBoxTemplateDirective = class ChatMessageBoxTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+};
+ChatMessageBoxTemplateDirective = __decorate([
+    Directive({
+        selector: '[kendoChatMessageBoxTemplate]'
+    }),
+    __metadata("design:paramtypes", [TemplateRef])
+], ChatMessageBoxTemplateDirective);
+
 // tslint:disable-next-line:max-line-length
 const 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
+ */
+let MessageBoxComponent = class MessageBoxComponent {
+    /**
+     * @hidden
+     */
+    constructor() {
+        this.hostClasses = 'k-message-box k-input k-input-md k-rounded-md k-input-solid';
+        this.sendMessage = new EventEmitter();
+    }
+    get messageBoxValue() {
+        return this.type === 'textarea';
+    }
+    /**
+     * @hidden
+     */
+    sendClick() {
+        const input = this.messageBoxInput.nativeElement;
+        const value = input.value;
+        if (!value) {
+            return;
+        }
+        const message = {
+            author: this.user,
+            text: value,
+            timestamp: new Date()
+        };
+        this.sendMessage.emit(new SendMessageEvent(message));
+        input.value = null;
+        input.focus();
+        this.autoScroll = true;
+    }
+    /**
+     * @hidden
+     */
+    inputKeydown(e) {
+        if (e.keyCode === Keys.Enter) {
+            this.sendClick();
+        }
+    }
+    /**
+     * @hidden
+     */
+    textAreaKeydown(e) {
+        const isEnter = e.keyCode === Keys.Enter;
+        if (!isEnter) {
+            return;
+        }
+        const newLine = (e.metaKey || e.ctrlKey);
+        const enterOnly = !(e.shiftKey || e.metaKey || e.ctrlKey);
+        if (enterOnly) {
+            e.preventDefault();
+            this.sendClick();
+        }
+        if (newLine) {
+            this.messageBoxInput.nativeElement.value += `\r\n`;
+        }
+    }
+    /**
+     * @hidden
+     */
+    textFor(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: `
+    <ng-container *ngIf="!messageBoxTemplate">
+        <input
+            *ngIf="type === 'textbox'"
+            #messageBoxInput
+            kendoChatFocusedState
+            type="text"
+            class="k-textbox k-input k-input-md k-input-solid"
+            [placeholder]="textFor('messagePlaceholder')"
+            (keydown)="inputKeydown($event)"
+        />
+
+        <textarea
+        *ngIf="type === 'textarea'"
+        #messageBoxInput
+        kendoChatFocusedState
+        [rows]="3"
+        class="k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none"
+        [placeholder]="textFor('messagePlaceholder')"
+        (keydown)="textAreaKeydown($event)"
+        ></textarea>
+
+        <button
+            kendoButton
+            fillMode="flat"
+            class="k-button-send"
+            [tabindex]="0"
+            [attr.title]="textFor('send')"
+            (click)="sendClick()"
+        >
+            ${sendIcon}
+        </button>
+    </ng-container>
+
+    <ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
+`
+    })
+], MessageBoxComponent);
+
 /**
  * Represents the Kendo UI Chat component for Angular.
  *
@@ -126,6 +288,12 @@ let ChatComponent = class ChatComponent {
     constructor(localization, zone) {
         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 %}).
@@ -152,11 +320,17 @@ let ChatComponent = class ChatComponent {
         });
     }
     get className() {
-        return 'k-widget k-chat';
+        return 'k-chat';
     }
     get dirAttr() {
         return this.direction;
     }
+    /**
+     * @hidden
+     */
+    get localizationText() {
+        return this.localization;
+    }
     ngOnChanges() {
         this.zone.runOutsideAngular(() => setTimeout(() => {
             this.messageList.nativeElement.style.flex = '1 1 auto';
@@ -175,33 +349,6 @@ let ChatComponent = class ChatComponent {
             this.localizationChangeSubscription.unsubscribe();
         }
     }
-    /**
-     * @hidden
-     */
-    sendClick() {
-        const input = this.messageInput.nativeElement;
-        const value = input.value;
-        if (!value) {
-            return;
-        }
-        const message = {
-            author: this.user,
-            text: value,
-            timestamp: new Date()
-        };
-        this.sendMessage.emit(new SendMessageEvent(message));
-        input.value = null;
-        input.focus();
-        this.autoScroll = true;
-    }
-    /**
-     * @hidden
-     */
-    inputKeydown(e) {
-        if (e.keyCode === 13 /* enter */) {
-            this.sendClick();
-        }
-    }
     /**
      * @hidden
      */
@@ -210,7 +357,9 @@ let ChatComponent = class ChatComponent {
         if (!e.isDefaultPrevented()) {
             const handler = makeHandler(e.action);
             handler(e.action, this);
-            this.messageInput.nativeElement.focus();
+            if (!this.messageBoxTemplate) {
+                this.messageBox.messageBoxInput.nativeElement.focus();
+            }
         }
     }
     /**
@@ -228,6 +377,10 @@ __decorate([
     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)
@@ -255,9 +408,13 @@ __decorate([
     __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)
@@ -273,58 +430,48 @@ ChatComponent = __decorate([
         ],
         selector: 'kendo-chat',
         template: `
-    <ng-container
-      kendoChatLocalizedMessages
-      i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
-      messagePlaceholder="Type a message..."
+        <ng-container
+        kendoChatLocalizedMessages
+        i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
+        messagePlaceholder="Type a message..."
 
-      i18n-send="kendo.chat.send|The text for the Send button"
-      send="Send..."
-    >
-    </ng-container>
+        i18n-send="kendo.chat.send|The text for the Send button"
+        send="Send..."
+        >
+        </ng-container>
 
-    <div
-      #messageList
-      class="k-message-list k-avatars"
-      aria-live="polite" role="log"
-      kendoChatScrollAnchor
-        #anchor="scrollAnchor"
-        [(autoScroll)]="autoScroll"
-    >
-      <kendo-chat-message-list
-        [messages]="messages"
-        [messageTemplate]="messageTemplate"
-        [attachmentTemplate]="attachmentTemplate"
+        <div
+        #messageList
+        class="k-message-list k-avatars"
+        aria-live="polite" role="log"
+        kendoChatScrollAnchor
+            #anchor="scrollAnchor"
+            [(autoScroll)]="autoScroll"
+        >
+        <kendo-chat-message-list
+            [messages]="messages"
+            [messageTemplate]="messageTemplate"
+            [attachmentTemplate]="attachmentTemplate"
+            [user]="user"
+            (executeAction)="dispatchAction($event)"
+            (resize)="anchor.scrollToBottom()"
+            (navigate)="this.autoScroll = false"
+        >
+        </kendo-chat-message-list>
+        </div>
+        <kendo-message-box
+        #messageBox
+        [messageBoxTemplate]="messageBoxTemplate"
+        [type]="messageBoxType"
         [user]="user"
-        (executeAction)="dispatchAction($event)"
-        (resize)="anchor.scrollToBottom()"
-        (navigate)="this.autoScroll = false"
-      >
-      </kendo-chat-message-list>
-    </div>
-
-    <div class="k-message-box">
-      <input
-        #messageInput
-        kendoChatFocusedState
-        type="text"
-        class="k-input"
-        [placeholder]="textFor('messagePlaceholder')"
-        (keydown)="inputKeydown($event)"
-      >
-      <button
-        kendoButton
-        fillMode="flat"
-        class="k-button-send"
-        tabindex="-1"
-        [attr.title]="textFor('send')"
-        (click)="sendClick()"
-      >${sendIcon}</button>
-    </div>
-  `
+        [autoScroll]="autoScroll"
+        [localization]="localizationText"
+        (sendMessage)="sendMessage.emit($event)"
+        >
+        </kendo-message-box>
+    `
     }),
-    __metadata("design:paramtypes", [LocalizationService,
-        NgZone])
+    __metadata("design:paramtypes", [LocalizationService, NgZone])
 ], ChatComponent);
 
 /**
@@ -363,26 +510,26 @@ AttachmentComponent = __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);
 
@@ -447,7 +594,7 @@ let FocusedStateDirective = class FocusedStateDirective {
     }
 };
 __decorate([
-    HostBinding('class.k-state-focused'),
+    HostBinding('class.k-focus'),
     __metadata("design:type", Boolean)
 ], FocusedStateDirective.prototype, "focused", void 0);
 __decorate([
@@ -516,27 +663,28 @@ HeroCardComponent = __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);
 
@@ -693,37 +841,37 @@ MessageAttachmentsComponent = MessageAttachmentsComponent_1 = __decorate([
             }],
         selector: 'kendo-chat-message-attachments',
         template: `
-    <button
-      *ngIf="carousel && scrollPosition > 0"
-      (click)="scrollTo(-1)"
-      class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
-      tabindex="-1">
-        <span class="k-icon k-button-icon k-i-arrow-chevron-left"></span>
-    </button>
-    <div #deck [class.k-card-deck]="carousel">
-      <kendo-chat-attachment #item
-        *ngFor="let att of attachments; index as index; first as first; last as last"
-        [attachment]="att"
-        [template]="template"
-        [class.k-state-selected]="isSelected(index)"
-        [class.k-state-focused]="isSelected(index)"
-        [class.k-card-wrap]="true"
-        [class.k-first]="first"
-        [class.k-last]="last"
-        [attr.tabindex]="tabbable && isSelected(index) ? '0' : '-1'"
-        (click)="itemClick(index)"
-        (keydown)="itemKeydown($event, att)"
-      >
-      </kendo-chat-attachment>
-    </div>
-    <button
-      *ngIf="carousel && scrollPosition < 1"
-      (click)="scrollTo(1)"
-      class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
-      tabindex="-1">
-        <span class="k-icon k-button-icon k-i-arrow-chevron-right"></span>
-    </button>
-  `
+        <button
+        *ngIf="carousel && scrollPosition > 0"
+        (click)="scrollTo(-1)"
+        class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
+        tabindex="-1">
+            <span class="k-icon k-button-icon k-i-arrow-chevron-left"></span>
+        </button>
+        <div #deck [class.k-card-deck]="carousel">
+        <kendo-chat-attachment #item
+            *ngFor="let att of attachments; index as index; first as first; last as last"
+            [attachment]="att"
+            [template]="template"
+            [class.k-state-selected]="isSelected(index)"
+            [class.k-state-focused]="isSelected(index)"
+            [class.k-card-wrap]="true"
+            [class.k-first]="first"
+            [class.k-last]="last"
+            [attr.tabindex]="tabbable && isSelected(index) ? '0' : '-1'"
+            (click)="itemClick(index)"
+            (keydown)="itemKeydown($event, att)"
+        >
+        </kendo-chat-attachment>
+        </div>
+        <button
+        *ngIf="carousel && scrollPosition < 1"
+        (click)="scrollTo(1)"
+        class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
+        tabindex="-1">
+            <span class="k-icon k-button-icon k-i-arrow-chevron-right"></span>
+        </button>
+    `
     }),
     __metadata("design:paramtypes", [NgZone])
 ], MessageAttachmentsComponent);
@@ -784,44 +932,44 @@ MessageComponent = MessageComponent_1 = __decorate([
                 useExisting: forwardRef(() => MessageComponent_1)
             }],
         template: `
-    <time
-      [attr.aria-hidden]="!selected"
-      class="k-message-time"
-      *ngIf="message.timestamp"
-    >
-      {{ formatTimeStamp(message.timestamp) }}
-    </time>
-
-    <ng-container *ngIf="!message.typing; else typing">
-      <div class="k-bubble" *ngIf="template">
-        <ng-container
-          *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"
+        <time
+        [attr.aria-hidden]="!selected"
+        class="k-message-time"
+        *ngIf="message.timestamp"
         >
-        </ng-container>
-      </div>
+        {{ formatTimeStamp(message.timestamp) }}
+        </time>
 
-      <div class="k-bubble" *ngIf="!template && message.text">
-        {{message.text}}
-      </div>
-    </ng-container>
+        <ng-container *ngIf="!message.typing; else typing">
+        <div class="k-bubble" *ngIf="template">
+            <ng-container
+            *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"
+            >
+            </ng-container>
+        </div>
+
+        <div class="k-bubble" *ngIf="!template && message.text">
+            {{message.text}}
+        </div>
+        </ng-container>
 
-    <span
-      class="k-message-status"
-      *ngIf="message.status"
-    >
-      {{ message.status }}
-    </span>
+        <span
+        class="k-message-status"
+        *ngIf="message.status"
+        >
+        {{ message.status }}
+        </span>
 
-    <ng-template #typing>
-      <div class="k-bubble">
-        <div class="k-typing-indicator">
-          <span></span>
-          <span></span>
-          <span></span>
+        <ng-template #typing>
+        <div class="k-bubble">
+            <div class="k-typing-indicator">
+            <span></span>
+            <span></span>
+            <span></span>
+            </div>
         </div>
-      </div>
-    </ng-template>
-  `
+        </ng-template>
+    `
     }),
     __metadata("design:paramtypes", [ElementRef, IntlService])
 ], MessageComponent);
@@ -1094,76 +1242,76 @@ MessageListComponent = __decorate([
     Component({
         selector: 'kendo-chat-message-list',
         template: `
-    <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">
-      <ng-container [ngSwitch]="group.type">
-        <div
-          *ngSwitchCase="'date-marker'"
-          class="k-timestamp"
-        >
-          {{ formatTimeStamp(group.timestamp) }}
-        </div>
-        <div
-          *ngSwitchCase="'message-group'"
-          class="k-message-group"
-          [class.k-alt]="isOwnMessage(group.messages[0])"
-          [class.k-no-avatar]="!group.author.avatarUrl"
-        >
-          <img
-            *ngIf="group.author.avatarUrl"
-            [attr.src]="group.author.avatarUrl"
-            class="k-avatar"
-          />
-          <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>
-          <ng-container
-              *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
-          >
-            <img *ngIf="msg.user?.avatarUrl" [src]="msg.user?.avatarUrl" class="k-avatar">
-            <kendo-chat-message #message
-              [message]="msg"
-              [tabbable]="lastGroup && lastMessage"
-              [template]="messageTemplate"
-              (click)="select(message)"
-              (focus)="select(message)"
-              [class.k-only]="group.messages.length === 1"
-              [class.k-first]="group.messages.length > 1 && firstMessage"
-              [class.k-last]="group.messages.length > 1 && lastMessage"
+        <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">
+        <ng-container [ngSwitch]="group.type">
+            <div
+            *ngSwitchCase="'date-marker'"
+            class="k-timestamp"
+            >
+            {{ formatTimeStamp(group.timestamp) }}
+            </div>
+            <div
+            *ngSwitchCase="'message-group'"
+            class="k-message-group"
+            [class.k-alt]="isOwnMessage(group.messages[0])"
+            [class.k-no-avatar]="!group.author.avatarUrl"
+            >
+            <img
+                *ngIf="group.author.avatarUrl"
+                [attr.src]="group.author.avatarUrl"
+                class="k-avatar"
+            />
+            <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>
+            <ng-container
+                *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
             >
-            </kendo-chat-message>
+                <img *ngIf="msg.user?.avatarUrl" [src]="msg.user?.avatarUrl" class="k-avatar">
+                <kendo-chat-message #message
+                [message]="msg"
+                [tabbable]="lastGroup && lastMessage"
+                [template]="messageTemplate"
+                (click)="select(message)"
+                (focus)="select(message)"
+                [class.k-only]="group.messages.length === 1"
+                [class.k-first]="group.messages.length > 1 && firstMessage"
+                [class.k-last]="group.messages.length > 1 && lastMessage"
+                >
+                </kendo-chat-message>
 
-            <kendo-chat-attachment
-              *ngIf="msg.attachments && msg.attachments.length === 1"
-              [attachment]="msg.attachments[0]"
-              [template]="attachmentTemplate"
-              >
-            </kendo-chat-attachment>
-          </ng-container>
-        </div>
+                <kendo-chat-attachment
+                *ngIf="msg.attachments && msg.attachments.length === 1"
+                [attachment]="msg.attachments[0]"
+                [template]="attachmentTemplate"
+                >
+                </kendo-chat-attachment>
+            </ng-container>
+            </div>
 
-        <kendo-chat-message-attachments #attachments
-          *ngSwitchCase="'attachment-group'"
-          [attachments]="group.attachments"
-          [layout]="group.attachmentLayout"
-          [tabbable]="lastGroup"
-          [template]="attachmentTemplate"
-          (click)="select(attachments)"
-          (focus)="select(attachments)"
-        >
-        </kendo-chat-message-attachments>
+            <kendo-chat-message-attachments #attachments
+            *ngSwitchCase="'attachment-group'"
+            [attachments]="group.attachments"
+            [layout]="group.attachmentLayout"
+            [tabbable]="lastGroup"
+            [template]="attachmentTemplate"
+            (click)="select(attachments)"
+            (focus)="select(attachments)"
+            >
+            </kendo-chat-message-attachments>
 
-        <kendo-chat-suggested-actions #actions
-          *ngSwitchCase="'action-group'"
-          [actions]="group.actions"
-          [tabbable]="lastGroup"
-          (dispatch)="dispatchAction($event, last(group.messages))"
-          (click)="select(actions)"
-          (focus)="select(actions)"
-        >
-        </kendo-chat-suggested-actions>
-      </ng-container>
-    </ng-container>
-    <kendo-resize-sensor (resize)="onResize()">
-    </kendo-resize-sensor>
-  `
+            <kendo-chat-suggested-actions #actions
+            *ngSwitchCase="'action-group'"
+            [actions]="group.actions"
+            [tabbable]="lastGroup"
+            (dispatch)="dispatchAction($event, last(group.messages))"
+            (click)="select(actions)"
+            (focus)="select(actions)"
+            >
+            </kendo-chat-suggested-actions>
+        </ng-container>
+        </ng-container>
+        <kendo-resize-sensor (resize)="onResize()">
+        </kendo-resize-sensor>
+    `
     }),
     __metadata("design:paramtypes", [ElementRef, IntlService])
 ], MessageListComponent);
@@ -1323,20 +1471,21 @@ SuggestedActionsComponent = SuggestedActionsComponent_1 = __decorate([
                 useExisting: forwardRef(() => SuggestedActionsComponent_1)
             }],
         template: `
-    <span #item
-      *ngFor="let action of actions; index as index; first as first; last as last"
-      class="k-quick-reply"
-      [class.k-state-selected]="isSelected(index)"
-      [class.k-state-focused]="isSelected(index)"
-      [class.k-first]="first"
-      [class.k-last]="last"
-      [attr.tabindex]="tabbable && selectedIndex === index ? '0' : '-1'"
-      (click)="actionClick(action)"
-      (keydown)="actionKeydown($event, action)"
-    >
-      {{ action.title || action.value }}
-    </span>
-  `
+        <span
+            #item
+            *ngFor="let action of actions; index as index; first as first; last as last"
+            class="k-quick-reply"
+            [class.k-state-selected]="isSelected(index)"
+            [class.k-state-focused]="isSelected(index)"
+            [class.k-first]="first"
+            [class.k-last]="last"
+            [attr.tabindex]="tabbable && selectedIndex === index ? '0' : '-1'"
+            (click)="actionClick(action)"
+            (keydown)="actionKeydown($event, action)"
+        >
+        {{ action.title || action.value }}
+        </span>
+    `
     })
 ], SuggestedActionsComponent);
 
@@ -1345,7 +1494,8 @@ const PUBLIC_DIRECTIVES = [
     CustomMessagesComponent,
     AttachmentTemplateDirective,
     MessageTemplateDirective,
-    HeroCardComponent
+    HeroCardComponent,
+    ChatMessageBoxTemplateDirective
 ];
 const PRIVATE_DIRECTIVES = [
     AttachmentComponent,
@@ -1356,7 +1506,8 @@ const PRIVATE_DIRECTIVES = [
     MessageListComponent,
     MessageTemplateDirective,
     ScrollAnchorDirective,
-    SuggestedActionsComponent
+    SuggestedActionsComponent,
+    MessageBoxComponent
 ];
 /**
  * The [NgModule]({{ site.data.urls.angular['ngmodules'] }}) for the Chat component.
@@ -1400,4 +1551,4 @@ ChatModule = __decorate([
  * 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 };