@progress/kendo-angular-conversational-ui 21.0.0-develop.8 → 21.0.0

package/esm2022/chat/chat.component.mjs

@@ -6,7 +6,6 @@ import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input,
 import { AttachmentTemplateDirective } from './templates/attachment-template.directive';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { makeHandler } from './builtin-actions';
-import { MessageTemplateDirective } from './templates/message-template.directive';
 import { Subscription } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
@@ -24,11 +23,15 @@ import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
 import { pinIcon, xIcon } from '@progress/kendo-svg-icons';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { defaultModelFields } from './common/models/default-model-fields';
-import { processMessages, SEND_BTN_DEFAULT_SETTINGS, FILE_ACTIONS, CONTEXT_MENU_ACTIONS } from './common/utils';
+import { processMessages, SEND_BTN_DEFAULT_SETTINGS, FILE_ACTIONS, CONTEXT_MENU_ACTIONS, transformActions, MENU_ITEM_SELECTOR } from './common/utils';
 import { ChatTimestampTemplateDirective } from './templates/timestamp-template.directive';
 import { MessageReferenceComponent } from './message-reference-content.component';
 import { ChatStatusTemplateDirective } from './templates/status-template.directive';
 import { ChatSuggestionTemplateDirective } from './templates/suggestion-template.directive';
+import { ContextMenuComponent } from '@progress/kendo-angular-menu';
+import { NoDataTemplateDirective, MessageTemplateDirective, AuthorMessageContentTemplateDirective, ReceiverMessageContentTemplateDirective, ReceiverMessageTemplateDirective, AuthorMessageTemplateDirective, MessageContentTemplateDirective } from './chat.directives';
+import { ChatUserStatusTemplateDirective } from './templates/user-status-template.directive';
+import { SuggestionsScrollService } from './common/scroll.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./common/chat.service";
@@ -50,7 +53,7 @@ import * as i3 from "@progress/kendo-angular-buttons";
  * ```
  *
  * @remarks
- * Supported children components are: {@link CustomMessagesComponent}, {@link HeroCardComponent}, {@link AttachmentTemplateDirective}, {@link ChatHeaderTemplateDirective}, {@link ChatMessageBoxTemplateDirective}, {@link MessageTemplateDirective}, {@link ChatStatusTemplateDirective}, {@link ChatSuggestionTemplateDirective}, {@link ChatTimestampTemplateDirective}.
+ * Supported children components are: {@link CustomMessagesComponent}, {@link HeroCardComponent}, {@link AttachmentTemplateDirective}, {@link ChatHeaderTemplateDirective}, {@link ChatMessageBoxTemplateDirective}, {@link MessageContentTemplateDirective}, {@link MessageTemplateDirective},{@link ChatStatusTemplateDirective}, {@link ChatSuggestionTemplateDirective}, {@link ChatTimestampTemplateDirective}, {@link ChatNoDataTemplateDirective}, {@link ChatUserStatusTemplateDirective}, {@link AuthorMessageContentTemplateDirective}, {@link ReceiverMessageContentTemplateDirective}, {@link ReceiverMessageTemplateDirective}, {@link AuthorMessageTemplateDirective}.
  */
 export class ChatComponent {
     localization;
@@ -59,13 +62,13 @@ export class ChatComponent {
     element;
     chatService;
     /**
-     * Defines the array of messages displayed in the Chat.
-     * Each message can include a timestamp for unique identification.
-     * For more information, see [ngFor - Change Tracking](link:site.data.urls.angular['ngforof']#change-propagation).
+     * Sets the Chat messages.
+     * Accepts an array of `Message` objects, but can also accept custom data types.
+     * For more information, check [Data Binding](slug:databinding_chat) section in the documentation.
      */
     messages;
     /**
-     * Specifies the id representing the local user.
+     * Sets the ID that represents the local user.
      */
     authorId;
     /**
@@ -93,13 +96,34 @@ export class ChatComponent {
      */
     placeholder;
     /**
-     * Switches the width of the message between the predefined options.
+     * Controls the width of the message between the predefined options.
      *
      * @default 'standard'
      */
     messageWidthMode = 'standard';
+    /**
+     * Controls the visibility of timestamps in messages.
+     *
+     * @default 'focus'
+     */
+    timestampVisibility = 'focus';
+    /**
+     * Controls the visibility of usernames in messages.
+     * When set to `true`, the username displays above each message bubble.
+     *
+     * @default true
+     */
+    showUsername = true;
+    /**
+     * Controls the avatar visibility for the messages.
+     * When set to `true`, the user avatar displays next to each message bubble.
+     *
+     * @default true
+     */
+    showAvatar = true;
     /**
      * Enables the expand or collapse functionality for messages.
+     *
      * @default false
      */
     allowMessageCollapse = false;
@@ -116,24 +140,34 @@ export class ChatComponent {
      */
     enableFileSelect = true;
     /**
-     * Specifies the actions available in the message toolbar.
+     * Sets the actions of the message toolbar.
      * These actions display in the message toolbar and let you perform specific operations on the message.
+     *
      * @default []
      */
     messageToolbarActions = [];
     /**
      * Sets the value of the Message Box.
+     *
      * @default ''
      */
     inputValue = '';
     /**
-     * Specifies the default actions available in the message context menu.
+     * Sets the settings for the author's messages.
+     */
+    authorMessageSettings;
+    /**
+     * Sets the settings for the receivers' messages.
+     */
+    receiverMessageSettings;
+    /**
+     * Sets the default actions that display in the message context menu.
      *
      * @default [{ id: 'copy', label: 'Copy', icon: 'copy', svgIcon: copyIcon, disabled: false }, { id: 'reply', label: 'Reply', icon: 'undo', svgIcon: undoIcon, disabled: false }]
      */
     defaultContextMenuActions = CONTEXT_MENU_ACTIONS;
     /**
-     * Specifies the actions available in the message as a context menu.
+     * Sets the actions that display in the message as a context menu.
      * These actions display as menu items and let you perform specific operations on the message.
      * The default actions are `copy` and `reply` and are defined by their `id`.
      */
@@ -144,11 +178,13 @@ export class ChatComponent {
         return this._messageContextMenuActions;
     }
     /**
-     * Specifies the default actions available in the file actions DropDownButton.
+     * Sets the default actions that display in the file actions DropDownButton.
+     *
+     * @default [{ id: 'download', label: 'Download', icon: 'download', svgIcon: downloadIcon, disabled: false }]
      */
     defaultFileActions = FILE_ACTIONS;
     /**
-     * Specifies the actions available in the file as items of a DropDownButton.
+     * Sets the actions that display in the file as items of a DropDownButton.
      * These actions display when you click the file DropDownButton and let you perform specific operations on the file.
      * The default action is `download` and is defined by its `id`.
      *
@@ -161,17 +197,40 @@ export class ChatComponent {
         return this._fileActions;
     }
     /**
-     * Sets the suggestions to display in the message input box.
-     * Suggestions display as a list of clickable items that let you quickly insert predefined text into the message input.
-     * @default []
+     * Sets the layout of the files in the message bubble.
+     *
+     * @default 'vertical'
      */
-    suggestions = [];
+    set messageFilesLayout(layout) {
+        this.chatService.messageFilesLayout = layout;
+    }
+    /**
+     * Sets the layout of the suggestions above the message input box.
+     *
+     * @default 'scroll'
+     */
+    set suggestionsLayout(layoutMode) {
+        if (layoutMode) {
+            this.chatService.suggestionsLayout = layoutMode;
+        }
+    }
+    /**
+     * Sets the layout of the quick actions suggested below the messages.
+     *
+     * @default 'scroll'
+     */
+    set quickActionsLayout(layoutMode) {
+        if (layoutMode) {
+            this.chatService.quickActionsLayout = layoutMode;
+        }
+    }
     /**
-     * Sets the visibility of the message toolbar.
+     * Sets the suggestions that display in the message input box.
+     * Suggestions display as a list of clickable items that let you quickly insert predefined text into the message input.
      *
-     * @default 'hidden'
+     * @default []
      */
-    messageToolbarVisibility = 'hidden';
+    suggestions = [];
     /**
      * Sets the send button settings for the Chat component.
      * Allows customization of the send button appearance, icons and disabled state.
@@ -181,7 +240,7 @@ export class ChatComponent {
     sendButtonSettings = SEND_BTN_DEFAULT_SETTINGS;
     /**
      * Sets the names of the model fields from which the Chat reads its data.
-     * Lets you map custom data structures to the expected `Message` format.
+     * Lets you map custom data types to the expected `Message` format.
      */
     set modelFields(value) {
         this._modelFields = { ...defaultModelFields, ...value };
@@ -190,53 +249,53 @@ export class ChatComponent {
         return this._modelFields;
     }
     /**
-     * Emits when the user sends a message by clicking the **Send** button or pressing **Enter**.
+     * Fires when the user sends a message by clicking the **Send** button or pressing **Enter**.
      *
      * The message is not automatically added to the `messages` array.
      */
     sendMessage = new EventEmitter();
     /**
-     * Emits when the user clicks a quick action button in the message toolbar.
+     * Fires when the user clicks a quick action button in the message toolbar.
      */
     toolbarActionClick = new EventEmitter();
     /**
-     * Emits when the user clicks an action in the message context menu.
+     * Fires when the user clicks an action in the message context menu.
      */
     contextMenuActionClick = new EventEmitter();
     /**
-     * Emits when the user clicks an action in the file context menu.
+     * Fires when the user clicks an action in the file context menu.
      */
     fileActionClick = new EventEmitter();
     /**
-     * Emits when the user clicks an action in the file context menu.
+     * Fires when the user clicks an action in the file context menu.
      */
     download = new EventEmitter();
     /**
-     * Emits when the user clicks a quick action button.
+     * Fires when the user clicks a quick action button.
      * The Chat internally handles [known actions](slug:api_conversational-ui_actiontype) such as `reply`, `openUrl`, and `call`.
      *
      * The event is preventable. Calling [`preventDefault`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) suppresses the built-in action.
      */
     executeAction = new EventEmitter();
     /**
-     * Emits when the user clicks a suggestion in the message input box.
+     * Fires when the user clicks a suggestion in the message input box.
      */
     suggestionExecute = new EventEmitter();
     /**
-     * Emits when the user selects a file in the message input box.
+     * Fires when the user selects a file in the message input box.
      */
     fileSelect = new EventEmitter();
     /**
-     * Emits when the user removes a file from the message input box.
+     * Fires when the user removes a file from the message input box.
      */
     fileRemove = new EventEmitter();
     /**
-     * Emits when the user unpins the pinned message.
+     * Fires when the user unpins the pinned message.
      * This event triggers when the user clicks the delete button on the pinned message.
      */
     unpin = new EventEmitter();
     /**
-     * Emits when the user types in the message input box.
+     * Fires when the user types in the message input box.
      */
     inputValueChange = new EventEmitter();
     get className() {
@@ -245,13 +304,23 @@ export class ChatComponent {
     get dirAttr() {
         return this.direction;
     }
+    set messagesContextMenu(contextMenu) {
+        this.chatService.messagesContextMenu = contextMenu;
+    }
     attachmentTemplate;
     chatHeaderTemplate;
+    chatNoDataTemplate;
+    authorMessageContentTemplate;
+    receiverMessageContentTemplate;
+    messageContentTemplate;
+    authorMessageTemplate;
+    receiverMessageTemplate;
     messageTemplate;
     timestampTemplate;
     suggestionTemplate;
     statusTemplate;
     messageBoxTemplate;
+    userStatusTemplate;
     messageBox;
     /**
      * @hidden
@@ -259,17 +328,30 @@ export class ChatComponent {
     messageList;
     /**
      * @hidden
-     * Returns processed messages when model fields are used, otherwise returns original messages
+     * Returns processed messages when model fields are used, otherwise returns original messages.
      */
     get processedMessages() {
         if (!this.messages || this.messages.length === 0) {
             return [];
         }
         if (this._modelFields && Object.keys(this._modelFields).some(key => this._modelFields[key] !== defaultModelFields[key])) {
-            return processMessages(this.messages, this._modelFields);
+            if (this.messages !== this._lastMessagesReference || this._modelFields !== this._lastModelFields) {
+                this._cachedProcessedMessages = processMessages(this.messages, this._modelFields);
+                this._lastMessagesReference = this.messages;
+                this._lastModelFields = this._modelFields;
+            }
+            return this._cachedProcessedMessages;
         }
         return this.messages;
     }
+    /**
+     * Gets the actions available in the message context menu.
+     *
+     * @hidden
+     */
+    get contextMenuActions() {
+        return transformActions(this.chatService.calculatedContextMenuActions);
+    }
     /**
      * @hidden
      */
@@ -297,6 +379,9 @@ export class ChatComponent {
     _modelFields = defaultModelFields;
     _messageContextMenuActions = CONTEXT_MENU_ACTIONS;
     _fileActions = FILE_ACTIONS;
+    _cachedProcessedMessages = [];
+    _lastMessagesReference = null;
+    _lastModelFields = null;
     constructor(localization, zone, renderer, element, chatService) {
         this.localization = localization;
         this.zone = zone;
@@ -314,6 +399,9 @@ export class ChatComponent {
      */
     ngOnInit() {
         this.chatService.messageWidthMode = this.messageWidthMode;
+        this.chatService.timestampVisibility = this.timestampVisibility;
+        this.chatService.showUsername = this.showUsername;
+        this.chatService.showAvatar = this.showAvatar;
         this.chatService.allowMessageCollapse = this.allowMessageCollapse;
         this.chatService.enableSpeechToText = this.enableSpeechToText;
         this.chatService.sendButtonSettings = this.sendButtonSettings;
@@ -321,7 +409,8 @@ export class ChatComponent {
         this.chatService.messageToolbarActions = this.messageToolbarActions;
         this.chatService.messageContextMenuActions = this.messageContextMenuActions;
         this.chatService.fileActions = this.fileActions;
-        this.chatService.messageToolbarVisibility = this.messageToolbarVisibility;
+        this.chatService.authorMessageSettings = this.authorMessageSettings;
+        this.chatService.receiverMessageSettings = this.receiverMessageSettings;
         this.chatService.messages = this.processedMessages || [];
         this.chatService.chatElement = this.messageList;
         this.subs.add(this.chatService.toolbarAction$.subscribe((actionEvent) => {
@@ -362,6 +451,9 @@ export class ChatComponent {
         this.updateChatServiceProperties([
             'authorId',
             'messageWidthMode',
+            'timestampVisibility',
+            'showUsername',
+            'showAvatar',
             'allowMessageCollapse',
             'enableSpeechToText',
             'sendButtonSettings',
@@ -369,7 +461,8 @@ export class ChatComponent {
             'messageToolbarActions',
             'messageContextMenuActions',
             'fileActions',
-            'messageToolbarVisibility'
+            'authorMessageSettings',
+            'receiverMessageSettings'
         ], changes);
     }
     /**
@@ -418,6 +511,43 @@ export class ChatComponent {
             this.chatService.scrollToMessage(this.pinnedMessage?.id);
         }
     }
+    /**
+     * @hidden
+     */
+    onContextMenuAction(action) {
+        if (action.id === 'reply') {
+            this.chatService.reply = this.chatService.activeMessage;
+        }
+        if (action.id === 'copy') {
+            navigator.clipboard.writeText(this.chatService.activeMessage.text);
+        }
+        this.chatService.emit('contextMenuAction', { action, message: this.chatService.activeMessage });
+    }
+    /**
+     * @hidden
+     */
+    handleMenuClose(event) {
+        if (event) {
+            const originalEvent = event.originalEvent;
+            originalEvent && this.onActionButtonClick(originalEvent);
+        }
+        this.chatService.activeMessage = null;
+        this.chatService.emit('contextMenuVisibilityChange', false);
+        if (this.chatService.selectOnMenuClose) {
+            this.chatService.activeMessageElement.selected = true;
+            this.chatService.focusActiveMessageElement();
+        }
+    }
+    /**
+     * @hidden
+     */
+    onActionButtonClick(event) {
+        const clickOutsideMessage = event instanceof MouseEvent && !event.target?.closest('.k-chat-bubble');
+        const menuItemClick = event instanceof MouseEvent && event.target?.closest(MENU_ITEM_SELECTOR);
+        if (clickOutsideMessage && !menuItemClick) {
+            this.chatService.selectOnMenuClose = false;
+        }
+    }
     findLastPinnedMessage() {
         return [...this.processedMessages].reverse().find((message) => message.isPinned);
     }
@@ -441,14 +571,15 @@ export class ChatComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.ChatService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChatComponent, isStandalone: true, selector: "kendo-chat", inputs: { messages: "messages", authorId: "authorId", messageBoxType: "messageBoxType", height: "height", width: "width", placeholder: "placeholder", messageWidthMode: "messageWidthMode", allowMessageCollapse: "allowMessageCollapse", enableSpeechToText: "enableSpeechToText", enableFileSelect: "enableFileSelect", messageToolbarActions: "messageToolbarActions", inputValue: "inputValue", messageContextMenuActions: "messageContextMenuActions", fileActions: "fileActions", suggestions: "suggestions", messageToolbarVisibility: "messageToolbarVisibility", sendButtonSettings: "sendButtonSettings", modelFields: "modelFields" }, outputs: { sendMessage: "sendMessage", toolbarActionClick: "toolbarActionClick", contextMenuActionClick: "contextMenuActionClick", fileActionClick: "fileActionClick", download: "download", executeAction: "executeAction", suggestionExecute: "suggestionExecute", fileSelect: "fileSelect", fileRemove: "fileRemove", unpin: "unpin", inputValueChange: "inputValueChange" }, host: { properties: { "class": "this.className", "attr.dir": "this.dirAttr" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChatComponent, isStandalone: true, selector: "kendo-chat", inputs: { messages: "messages", authorId: "authorId", messageBoxType: "messageBoxType", height: "height", width: "width", placeholder: "placeholder", messageWidthMode: "messageWidthMode", timestampVisibility: "timestampVisibility", showUsername: "showUsername", showAvatar: "showAvatar", allowMessageCollapse: "allowMessageCollapse", enableSpeechToText: "enableSpeechToText", enableFileSelect: "enableFileSelect", messageToolbarActions: "messageToolbarActions", inputValue: "inputValue", authorMessageSettings: "authorMessageSettings", receiverMessageSettings: "receiverMessageSettings", messageContextMenuActions: "messageContextMenuActions", fileActions: "fileActions", messageFilesLayout: "messageFilesLayout", suggestionsLayout: "suggestionsLayout", quickActionsLayout: "quickActionsLayout", suggestions: "suggestions", sendButtonSettings: "sendButtonSettings", modelFields: "modelFields" }, outputs: { sendMessage: "sendMessage", toolbarActionClick: "toolbarActionClick", contextMenuActionClick: "contextMenuActionClick", fileActionClick: "fileActionClick", download: "download", executeAction: "executeAction", suggestionExecute: "suggestionExecute", fileSelect: "fileSelect", fileRemove: "fileRemove", unpin: "unpin", inputValueChange: "inputValueChange" }, host: { properties: { "class": "this.className", "attr.dir": "this.dirAttr" } }, providers: [
             LocalizationService,
             ChatService,
+            SuggestionsScrollService,
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.chat'
             }
-        ], queries: [{ propertyName: "attachmentTemplate", first: true, predicate: AttachmentTemplateDirective, descendants: true }, { propertyName: "chatHeaderTemplate", first: true, predicate: ChatHeaderTemplateDirective, descendants: true }, { propertyName: "messageTemplate", first: true, predicate: MessageTemplateDirective, descendants: true }, { propertyName: "timestampTemplate", first: true, predicate: ChatTimestampTemplateDirective, descendants: true }, { propertyName: "suggestionTemplate", first: true, predicate: ChatSuggestionTemplateDirective, descendants: true }, { propertyName: "statusTemplate", first: true, predicate: ChatStatusTemplateDirective, descendants: true }, { propertyName: "messageBoxTemplate", first: true, predicate: ChatMessageBoxTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "messageBox", first: true, predicate: ["messageBox"], descendants: true }, { propertyName: "messageList", first: true, predicate: ["messageList"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "attachmentTemplate", first: true, predicate: AttachmentTemplateDirective, descendants: true }, { propertyName: "chatHeaderTemplate", first: true, predicate: ChatHeaderTemplateDirective, descendants: true }, { propertyName: "chatNoDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "authorMessageContentTemplate", first: true, predicate: AuthorMessageContentTemplateDirective, descendants: true }, { propertyName: "receiverMessageContentTemplate", first: true, predicate: ReceiverMessageContentTemplateDirective, descendants: true }, { propertyName: "messageContentTemplate", first: true, predicate: MessageContentTemplateDirective, descendants: true }, { propertyName: "authorMessageTemplate", first: true, predicate: AuthorMessageTemplateDirective, descendants: true }, { propertyName: "receiverMessageTemplate", first: true, predicate: ReceiverMessageTemplateDirective, descendants: true }, { propertyName: "messageTemplate", first: true, predicate: MessageTemplateDirective, descendants: true }, { propertyName: "timestampTemplate", first: true, predicate: ChatTimestampTemplateDirective, descendants: true }, { propertyName: "suggestionTemplate", first: true, predicate: ChatSuggestionTemplateDirective, descendants: true }, { propertyName: "statusTemplate", first: true, predicate: ChatStatusTemplateDirective, descendants: true }, { propertyName: "messageBoxTemplate", first: true, predicate: ChatMessageBoxTemplateDirective, descendants: true }, { propertyName: "userStatusTemplate", first: true, predicate: ChatUserStatusTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "messagesContextMenu", first: true, predicate: ["messagesContextMenu"], descendants: true }, { propertyName: "messageBox", first: true, predicate: ["messageBox"], descendants: true }, { propertyName: "messageList", first: true, predicate: ["messageList"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoChatLocalizedMessages
             i18n-deletedMessageSenderText="kendo.chat.deletedMessageSenderText|The text that is displayed when the sender deletes a message"
             deletedMessageSenderText="You removed this message."
@@ -497,10 +628,16 @@ export class ChatComponent {
 
             i18n-downloadAllFilesText="kendo.chat.downloadAllFilesText|Sets the text that is displayed in the download section of the message."
             downloadAllFilesText="Download all"
+
+            i18n-previousSuggestionsButtonTitle="kendo.chat.previousSuggestionsButtonTitle|The title of the button that scrolls to the previous suggestions"
+            previousSuggestionsButtonTitle="Scroll left"
+
+            i18n-nextSuggestionsButtonTitle="kendo.chat.nextSuggestionsButtonTitle|The title of the button that scrolls to the next suggestions"
+            nextSuggestionsButtonTitle="Scroll right"
         >
         </ng-container>
 
-        <kendo-appbar *ngIf="chatHeaderTemplate" class="k-chat-header" positionMode="sticky">
+        <kendo-appbar *ngIf="chatHeaderTemplate" class="k-chat-header" positionMode="sticky" themeColor="inherit">
             <ng-container *ngTemplateOutlet="chatHeaderTemplate.templateRef"></ng-container>
         </kendo-appbar>
         <div class="k-message-reference k-message-reference-receiver k-message-pinned" *ngIf="pinnedMessage" (click)="scrollToPinnedMessage()">
@@ -516,7 +653,7 @@ export class ChatComponent {
         </div>
         <div
             #messageList
-            class="k-message-list k-avatars"
+            class="k-message-list"
             aria-live="polite"
             role="log"
             kendoChatScrollAnchor
@@ -524,19 +661,32 @@ export class ChatComponent {
             #anchor="scrollAnchor"
             [(autoScroll)]="autoScroll"
         >
-            <kendo-chat-message-list
-                [messages]="processedMessages"
-                [messageTemplate]="messageTemplate"
-                [timestampTemplate]="timestampTemplate"
-                [statusTemplate]="statusTemplate"
-                [localization]="localizationText"
-                [attachmentTemplate]="attachmentTemplate"
-                [authorId]="authorId"
-                (executeAction)="dispatchAction($event)"
-                (resize)="anchor.scrollToBottom()"
-                (navigate)="this.autoScroll = false"
-            >
-            </kendo-chat-message-list>
+            <div *ngIf="processedMessages && processedMessages.length === 0; else chatMessageList" class="k-message-list-content k-message-list-content-empty">
+                <ng-template
+                    [ngTemplateOutlet]="chatNoDataTemplate?.templateRef">
+                </ng-template>
+            </div>
+            <ng-template #chatMessageList>
+                <kendo-chat-message-list
+                    [messages]="processedMessages"
+                    [authorMessageContentTemplate]="authorMessageContentTemplate"
+                    [receiverMessageContentTemplate]="receiverMessageContentTemplate"
+                    [messageContentTemplate]="messageContentTemplate"
+                    [authorMessageTemplate]="authorMessageTemplate"
+                    [receiverMessageTemplate]="receiverMessageTemplate"
+                    [messageTemplate]="messageTemplate"
+                    [timestampTemplate]="timestampTemplate"
+                    [statusTemplate]="statusTemplate"
+                    [userStatusTemplate]="userStatusTemplate"
+                    [localization]="localizationText"
+                    [attachmentTemplate]="attachmentTemplate"
+                    [authorId]="authorId"
+                    (executeAction)="dispatchAction($event)"
+                    (resize)="anchor.scrollToBottom()"
+                    (navigate)="this.autoScroll = false"
+                >
+                </kendo-chat-message-list>
+            </ng-template>
         </div>
         <kendo-message-box
             #messageBox
@@ -554,7 +704,16 @@ export class ChatComponent {
             (fileRemove)="fileRemove.emit($event)"
         >
         </kendo-message-box>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoChatLocalizedMessages]" }, { kind: "directive", type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll"], outputs: ["autoScrollChange"], exportAs: ["scrollAnchor"] }, { kind: "component", type: MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "messageTemplate", "timestampTemplate", "statusTemplate", "localization", "authorId"], outputs: ["executeAction", "navigate", "resize"] }, { kind: "component", type: MessageBoxComponent, selector: "kendo-message-box", inputs: ["authorId", "autoScroll", "suggestions", "placeholder", "inputValue", "localization", "messageBoxTemplate", "suggestionTemplate"], outputs: ["sendMessage", "executeSuggestion", "fileSelect", "fileRemove"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "component", type: AppBarComponent, selector: "kendo-appbar", inputs: ["position", "positionMode", "themeColor"], exportAs: ["kendoAppBar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+
+        <kendo-contextmenu
+            #messagesContextMenu
+            [items]="contextMenuActions"
+            [popupAlign]="{ horizontal: 'right', vertical: 'top' }"
+            [collision]="{ horizontal: 'flip', vertical: 'flip'}"
+            (popupClose)="handleMenuClose($event)"
+            (select)="onContextMenuAction($event.item.originalAction)"
+        ></kendo-contextmenu>
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoChatLocalizedMessages]" }, { kind: "directive", type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll"], outputs: ["autoScrollChange"], exportAs: ["scrollAnchor"] }, { kind: "component", type: MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "authorMessageContentTemplate", "receiverMessageContentTemplate", "messageContentTemplate", "authorMessageTemplate", "receiverMessageTemplate", "messageTemplate", "timestampTemplate", "statusTemplate", "userStatusTemplate", "localization", "authorId"], outputs: ["executeAction", "navigate", "resize"] }, { kind: "component", type: MessageBoxComponent, selector: "kendo-message-box", inputs: ["authorId", "autoScroll", "suggestions", "placeholder", "inputValue", "localization", "messageBoxTemplate", "suggestionTemplate"], outputs: ["sendMessage", "executeSuggestion", "fileSelect", "fileRemove"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "component", type: AppBarComponent, selector: "kendo-appbar", inputs: ["position", "positionMode", "themeColor"], exportAs: ["kendoAppBar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
@@ -562,6 +721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     providers: [
                         LocalizationService,
                         ChatService,
+                        SuggestionsScrollService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.chat'
@@ -617,10 +777,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
             i18n-downloadAllFilesText="kendo.chat.downloadAllFilesText|Sets the text that is displayed in the download section of the message."
             downloadAllFilesText="Download all"
+
+            i18n-previousSuggestionsButtonTitle="kendo.chat.previousSuggestionsButtonTitle|The title of the button that scrolls to the previous suggestions"
+            previousSuggestionsButtonTitle="Scroll left"
+
+            i18n-nextSuggestionsButtonTitle="kendo.chat.nextSuggestionsButtonTitle|The title of the button that scrolls to the next suggestions"
+            nextSuggestionsButtonTitle="Scroll right"
         >
         </ng-container>
 
-        <kendo-appbar *ngIf="chatHeaderTemplate" class="k-chat-header" positionMode="sticky">
+        <kendo-appbar *ngIf="chatHeaderTemplate" class="k-chat-header" positionMode="sticky" themeColor="inherit">
             <ng-container *ngTemplateOutlet="chatHeaderTemplate.templateRef"></ng-container>
         </kendo-appbar>
         <div class="k-message-reference k-message-reference-receiver k-message-pinned" *ngIf="pinnedMessage" (click)="scrollToPinnedMessage()">
@@ -636,7 +802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
         <div
             #messageList
-            class="k-message-list k-avatars"
+            class="k-message-list"
             aria-live="polite"
             role="log"
             kendoChatScrollAnchor
@@ -644,19 +810,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             #anchor="scrollAnchor"
             [(autoScroll)]="autoScroll"
         >
-            <kendo-chat-message-list
-                [messages]="processedMessages"
-                [messageTemplate]="messageTemplate"
-                [timestampTemplate]="timestampTemplate"
-                [statusTemplate]="statusTemplate"
-                [localization]="localizationText"
-                [attachmentTemplate]="attachmentTemplate"
-                [authorId]="authorId"
-                (executeAction)="dispatchAction($event)"
-                (resize)="anchor.scrollToBottom()"
-                (navigate)="this.autoScroll = false"
-            >
-            </kendo-chat-message-list>
+            <div *ngIf="processedMessages && processedMessages.length === 0; else chatMessageList" class="k-message-list-content k-message-list-content-empty">
+                <ng-template
+                    [ngTemplateOutlet]="chatNoDataTemplate?.templateRef">
+                </ng-template>
+            </div>
+            <ng-template #chatMessageList>
+                <kendo-chat-message-list
+                    [messages]="processedMessages"
+                    [authorMessageContentTemplate]="authorMessageContentTemplate"
+                    [receiverMessageContentTemplate]="receiverMessageContentTemplate"
+                    [messageContentTemplate]="messageContentTemplate"
+                    [authorMessageTemplate]="authorMessageTemplate"
+                    [receiverMessageTemplate]="receiverMessageTemplate"
+                    [messageTemplate]="messageTemplate"
+                    [timestampTemplate]="timestampTemplate"
+                    [statusTemplate]="statusTemplate"
+                    [userStatusTemplate]="userStatusTemplate"
+                    [localization]="localizationText"
+                    [attachmentTemplate]="attachmentTemplate"
+                    [authorId]="authorId"
+                    (executeAction)="dispatchAction($event)"
+                    (resize)="anchor.scrollToBottom()"
+                    (navigate)="this.autoScroll = false"
+                >
+                </kendo-chat-message-list>
+            </ng-template>
         </div>
         <kendo-message-box
             #messageBox
@@ -674,9 +853,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             (fileRemove)="fileRemove.emit($event)"
         >
         </kendo-message-box>
+
+        <kendo-contextmenu
+            #messagesContextMenu
+            [items]="contextMenuActions"
+            [popupAlign]="{ horizontal: 'right', vertical: 'top' }"
+            [collision]="{ horizontal: 'flip', vertical: 'flip'}"
+            (popupClose)="handleMenuClose($event)"
+            (select)="onContextMenuAction($event.item.originalAction)"
+        ></kendo-contextmenu>
     `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, ScrollAnchorDirective, MessageListComponent, MessageBoxComponent, MessageReferenceComponent, AppBarComponent, NgTemplateOutlet, NgIf, IconWrapperComponent, KENDO_BUTTON]
+                    imports: [LocalizedMessagesDirective, ScrollAnchorDirective, MessageListComponent, MessageBoxComponent, MessageReferenceComponent, AppBarComponent, NgTemplateOutlet, NgIf, IconWrapperComponent, KENDO_BUTTON, ContextMenuComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i2.ChatService }], propDecorators: { messages: [{
                 type: Input
@@ -692,6 +880,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], messageWidthMode: [{
                 type: Input
+            }], timestampVisibility: [{
+                type: Input
+            }], showUsername: [{
+                type: Input
+            }], showAvatar: [{
+                type: Input
             }], allowMessageCollapse: [{
                 type: Input
             }], enableSpeechToText: [{
@@ -702,13 +896,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], inputValue: [{
                 type: Input
+            }], authorMessageSettings: [{
+                type: Input
+            }], receiverMessageSettings: [{
+                type: Input
             }], messageContextMenuActions: [{
                 type: Input
             }], fileActions: [{
                 type: Input
-            }], suggestions: [{
+            }], messageFilesLayout: [{
+                type: Input
+            }], suggestionsLayout: [{
                 type: Input
-            }], messageToolbarVisibility: [{
+            }], quickActionsLayout: [{
+                type: Input
+            }], suggestions: [{
                 type: Input
             }], sendButtonSettings: [{
                 type: Input
@@ -742,12 +944,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], dirAttr: [{
                 type: HostBinding,
                 args: ['attr.dir']
+            }], messagesContextMenu: [{
+                type: ViewChild,
+                args: ['messagesContextMenu']
             }], attachmentTemplate: [{
                 type: ContentChild,
                 args: [AttachmentTemplateDirective]
             }], chatHeaderTemplate: [{
                 type: ContentChild,
                 args: [ChatHeaderTemplateDirective]
+            }], chatNoDataTemplate: [{
+                type: ContentChild,
+                args: [NoDataTemplateDirective]
+            }], authorMessageContentTemplate: [{
+                type: ContentChild,
+                args: [AuthorMessageContentTemplateDirective]
+            }], receiverMessageContentTemplate: [{
+                type: ContentChild,
+                args: [ReceiverMessageContentTemplateDirective]
+            }], messageContentTemplate: [{
+                type: ContentChild,
+                args: [MessageContentTemplateDirective]
+            }], authorMessageTemplate: [{
+                type: ContentChild,
+                args: [AuthorMessageTemplateDirective]
+            }], receiverMessageTemplate: [{
+                type: ContentChild,
+                args: [ReceiverMessageTemplateDirective]
             }], messageTemplate: [{
                 type: ContentChild,
                 args: [MessageTemplateDirective]
@@ -763,6 +986,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], messageBoxTemplate: [{
                 type: ContentChild,
                 args: [ChatMessageBoxTemplateDirective]
+            }], userStatusTemplate: [{
+                type: ContentChild,
+                args: [ChatUserStatusTemplateDirective]
             }], messageBox: [{
                 type: ViewChild,
                 args: ['messageBox']