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

package/fesm2022/progress-kendo-angular-conversational-ui.mjs

@@ -3,15 +3,15 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, Inject, HostBinding, ViewChild, Input, Injectable, Optional, forwardRef, EventEmitter, Component, ContentChildren, ContentChild, Output, isDevMode, ViewChildren, HostListener, ElementRef, ViewContainerRef, inject, SkipSelf, NgModule } from '@angular/core';
+import { InjectionToken, Directive, Inject, HostBinding, ViewChild, Input, Injectable, Optional, forwardRef, EventEmitter, Component, ContentChildren, ContentChild, Output, isDevMode, ElementRef, ViewChildren, HostListener, ViewContainerRef, inject, SkipSelf, NgModule } from '@angular/core';
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
 import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupComponent, KENDO_POPUP, PopupService } from '@progress/kendo-angular-popup';
-import { isPresent, normalizeNumpadKeys, Keys, focusableSelector, guid, getter, closest as closest$1, ResizeSensorComponent, isChanged, processCssValue, isDocumentAvailable, ResizeBatchService } from '@progress/kendo-angular-common';
+import { isPresent, normalizeNumpadKeys, Keys, focusableSelector, guid, getter, isDocumentAvailable, closest as closest$1, ResizeSensorComponent, isChanged, processCssValue, ResizeBatchService } from '@progress/kendo-angular-common';
 import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
 import { NgFor, NgIf, NgTemplateOutlet, NgClass, NgSwitch, NgSwitchCase } from '@angular/common';
 import { Subject, Subscription, fromEvent } from 'rxjs';
-import { sparklesIcon, commentIcon, moreHorizontalIcon, stopSmIcon, thumbUpIcon, thumbDownOutlineIcon, thumbDownIcon, thumbUpOutlineIcon, copyIcon, arrowRotateCwIcon, chevronUpIcon, chevronDownIcon, paperPlaneIcon, undoIcon, downloadIcon, xIcon, moreVerticalIcon, paperclipIcon, fileIcon, chevronLeftIcon, chevronRightIcon, pinIcon, cancelOutlineIcon, menuIcon } from '@progress/kendo-svg-icons';
+import { sparklesIcon, commentIcon, moreHorizontalIcon, stopSmIcon, thumbUpIcon, thumbDownOutlineIcon, thumbDownIcon, thumbUpOutlineIcon, copyIcon, arrowRotateCwIcon, chevronUpIcon, chevronDownIcon, paperPlaneIcon, undoIcon, downloadIcon, chevronLeftIcon, chevronRightIcon, xIcon, moreVerticalIcon, paperclipIcon, fileIcon, pinIcon, cancelOutlineIcon, menuIcon } from '@progress/kendo-svg-icons';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
@@ -25,10 +25,10 @@ import { TextAreaComponent, TextAreaSuffixComponent, TextAreaPrefixComponent, In
 import { fileSVGGroupIcon, fileGroupClass, getTotalFilesSizeMessage, FileSelectComponent } from '@progress/kendo-angular-upload';
 import { FormsModule } from '@angular/forms';
 import * as i1$1 from '@progress/kendo-angular-intl';
-import * as i4 from '@progress/kendo-angular-menu';
-import { ContextMenuComponent, KENDO_CONTEXTMENU } from '@progress/kendo-angular-menu';
 import { ToolBarComponent, ToolBarButtonComponent } from '@progress/kendo-angular-toolbar';
 import { AppBarComponent } from '@progress/kendo-angular-navigation';
+import * as i4 from '@progress/kendo-angular-menu';
+import { ContextMenuComponent, KENDO_CONTEXTMENU } from '@progress/kendo-angular-menu';
 
 /**
  * @hidden
@@ -216,8 +216,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1761752891,
-    version: '21.0.0-develop.2',
+    publishDate: 1762426801,
+    version: '21.0.0-develop.21',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1887,6 +1887,7 @@ const noop = () => { };
 const handlers = {
     'reply': (action, sender) => {
         sender.sendMessage.emit(new SendMessageEvent({
+            id: guid(),
             author: { id: sender.authorId },
             text: action.value,
             timestamp: new Date()
@@ -1904,40 +1905,6 @@ const handlers = {
  */
 const makeHandler = (action) => handlers[action.type] || noop;
 
-/**
- * Defines a template for displaying Chat messages.
- *
- * To define a message template, nest an `<ng-template>` tag with the `kendoChatMessageTemplate` directive inside the `<kendo-chat>` component.
- * The template context is set to the `message` instance.
- * For more information, refer to the article on [message templates](slug:message_templates_chat).
- *
- * @example
- * ```html
- * <kendo-chat>
- *   <ng-template kendoChatMessageTemplate let-message>
- *     <div>Message: {{ message.text }}</div>
- *   </ng-template>
- * </kendo-chat>
- * ```
- */
-class MessageTemplateDirective {
-    templateRef;
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: MessageTemplateDirective, isStandalone: true, selector: "[kendoChatMessageTemplate]", ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoChatMessageTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
-                    type: Optional
-                }] }] });
-
 /**
  * Creates a message box area that overrides the default message box of the Chat component.
  *
@@ -1986,7 +1953,6 @@ const defaultModelFields = {
     attachmentLayoutField: 'attachmentLayout',
     suggestedActionsField: 'suggestedActions',
     isPinnedField: 'isPinned',
-    pinnedByField: 'pinnedBy',
     replyToIdField: 'replyToId',
     isDeletedField: 'isDeleted',
     typingField: 'typing'
@@ -2053,6 +2019,10 @@ const FILESELECT_DEFAULT_SETTINGS = {
     multiple: true,
     disabled: false
 };
+/**
+ * @hidden
+ */
+const SUGGESTIONS_LAYOUT_DEFAULT_SETTINGS = 'scroll';
 /**
  * @hidden
  */
@@ -2105,14 +2075,16 @@ const parseMessage = (message, fields) => {
             id: authorId,
             ...(authorName && { name: authorName }),
             ...(authorImageUrl && { avatarUrl: authorImageUrl }),
-            ...(authorImageAltText && { avatarAltText: authorImageAltText })
+            ...(authorImageAltText && { avatarAltText: authorImageAltText }),
         };
     }
+    const timestampValue = getter(modelFields.timestampField)(message);
+    const timestamp = timestampValue instanceof Date ? timestampValue : new Date(timestampValue);
     return {
         id: getter(modelFields.idField)(message),
         text: getter(modelFields.textField)(message),
         author: author,
-        timestamp: new Date(getter(modelFields.timestampField)(message)),
+        timestamp: timestamp,
         status: getter(modelFields.statusField)(message),
         files: getter(modelFields.filesField)(message),
         attachments: getter(modelFields.attachmentsField)(message),
@@ -2121,9 +2093,22 @@ const parseMessage = (message, fields) => {
         isPinned: getter(modelFields.isPinnedField)(message),
         replyToId: getter(modelFields.replyToIdField)(message),
         isDeleted: getter(modelFields.isDeletedField)(message),
-        typing: getter(modelFields.typingField)(message)
+        typing: getter(modelFields.typingField)(message),
+        dataItem: message
     };
 };
+/**
+ * @hidden
+ */
+const transformActions = (actions) => {
+    return actions.map(action => ({
+        text: action.label,
+        icon: action.icon,
+        svgIcon: action.svgIcon,
+        disabled: action.disabled,
+        originalAction: action
+    }));
+};
 
 /**
  * @hidden
@@ -2131,26 +2116,45 @@ const parseMessage = (message, fields) => {
 class ChatService {
     authorId;
     messageWidthMode;
-    allowMessageCollapse;
     messageToolbarActions = [];
     messageContextMenuActions = [];
+    calculatedContextMenuActions = [];
     fileActions = [];
-    messageToolbarVisibility = 'hidden';
     toggleMessageState = false;
     reply;
     messages = [];
     chatElement;
     messageElementsMap = new Map();
+    messagesContextMenu;
+    activeMessage;
+    activeMessageElement;
+    selectOnMenuClose = false;
+    active = false;
+    messageFilesLayout = 'vertical';
+    timestampVisibility = 'focus';
+    showUsername = true;
+    showAvatar = true;
     _enableSpeechToText = STB_DEFAULT_SETTINGS;
     _enableFileSelect = FILESELECT_DEFAULT_SETTINGS;
     _sendButtonSettings = SEND_BTN_DEFAULT_SETTINGS;
+    _suggestionsLayout = SUGGESTIONS_LAYOUT_DEFAULT_SETTINGS;
+    _quickActionsLayout = SUGGESTIONS_LAYOUT_DEFAULT_SETTINGS;
+    _authorMessageSettings;
+    _receiverMessageSettings;
+    _allowMessageCollapse;
     subjects = {
         toolbarAction: new Subject(),
         contextMenuAction: new Subject(),
         fileAction: new Subject(),
         fileDownload: new Subject(),
         replyReferenceClick: new Subject(),
-        inputValueChange: new Subject()
+        inputValueChange: new Subject(),
+        contextMenuVisibilityChange: new Subject(),
+        suggestionsLayoutChange: new Subject(),
+        quickActionsLayoutChange: new Subject(),
+        authorMessageSettingsChange: new Subject(),
+        receiverMessageSettingsChange: new Subject(),
+        allowMessageCollapseChange: new Subject(),
     };
     toolbarAction$ = this.subjects.toolbarAction.asObservable();
     contextMenuAction$ = this.subjects.contextMenuAction.asObservable();
@@ -2158,6 +2162,32 @@ class ChatService {
     fileDownload$ = this.subjects.fileDownload.asObservable();
     replyReferenceClick$ = this.subjects.replyReferenceClick.asObservable();
     inputValueChange$ = this.subjects.inputValueChange.asObservable();
+    contextMenuVisibilityChange$ = this.subjects.contextMenuVisibilityChange.asObservable();
+    suggestionsLayoutChange$ = this.subjects.suggestionsLayoutChange.asObservable();
+    quickActionsLayoutChange$ = this.subjects.quickActionsLayoutChange.asObservable();
+    authorMessageSettingsChange$ = this.subjects.authorMessageSettingsChange.asObservable();
+    receiverMessageSettingsChange$ = this.subjects.receiverMessageSettingsChange.asObservable();
+    allowMessageCollapseChange$ = this.subjects.allowMessageCollapseChange.asObservable();
+    set authorMessageSettings(settings) {
+        const previousSettings = this._authorMessageSettings;
+        if (JSON.stringify(previousSettings) !== JSON.stringify(settings)) {
+            this.updateComponentSettings('_authorMessageSettings', settings, null);
+            this.emit('authorMessageSettingsChange', this._authorMessageSettings);
+        }
+    }
+    get authorMessageSettings() {
+        return this._authorMessageSettings;
+    }
+    set receiverMessageSettings(settings) {
+        const previousSettings = this._receiverMessageSettings;
+        if (JSON.stringify(previousSettings) !== JSON.stringify(settings)) {
+            this.updateComponentSettings('_receiverMessageSettings', settings, null);
+            this.emit('receiverMessageSettingsChange', this._receiverMessageSettings);
+        }
+    }
+    get receiverMessageSettings() {
+        return this._receiverMessageSettings;
+    }
     set enableSpeechToText(settings) {
         this.updateComponentSettings('_enableSpeechToText', settings, STB_DEFAULT_SETTINGS);
     }
@@ -2176,6 +2206,38 @@ class ChatService {
     get sendButtonSettings() {
         return this._sendButtonSettings;
     }
+    set suggestionsLayout(layoutMode) {
+        this._suggestionsLayout = layoutMode;
+        this.emit('suggestionsLayoutChange', this._suggestionsLayout);
+    }
+    get suggestionsLayout() {
+        return this._suggestionsLayout;
+    }
+    set quickActionsLayout(layoutMode) {
+        this._quickActionsLayout = layoutMode;
+        this.emit('quickActionsLayoutChange', this._quickActionsLayout);
+    }
+    get quickActionsLayout() {
+        return this._quickActionsLayout;
+    }
+    set allowMessageCollapse(value) {
+        const previousValue = this._allowMessageCollapse;
+        if (previousValue !== value) {
+            this._allowMessageCollapse = value;
+            this.emit('allowMessageCollapseChange', this._allowMessageCollapse);
+        }
+    }
+    get allowMessageCollapse() {
+        return this._allowMessageCollapse;
+    }
+    calculateContextMenuActions(isOwn) {
+        const settings = isOwn ? this.authorMessageSettings : this.receiverMessageSettings;
+        if (settings?.messageContextMenuActions) {
+            this.calculatedContextMenuActions = settings.messageContextMenuActions;
+            return;
+        }
+        this.calculatedContextMenuActions = this.messageContextMenuActions || [];
+    }
     emit(subjectKey, value) {
         (this.subjects[subjectKey]).next(value);
     }
@@ -2197,6 +2259,11 @@ class ChatService {
             elementRef.nativeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
         }
     }
+    focusActiveMessageElement() {
+        if (this.activeMessageElement) {
+            this.activeMessageElement.element?.nativeElement?.focus();
+        }
+    }
     updateComponentSettings(property, settings, defaultSettings) {
         if (settings === true) {
             this[property] = defaultSettings;
@@ -2253,24 +2320,238 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
+const DIRECTION_CLASSES = {
+    left: 'chevron-left',
+    right: 'chevron-right',
+};
+/**
+ * @hidden
+ */
+class ChatScrollableButtonComponent {
+    host;
+    renderer;
+    ngZone;
+    localization;
+    role = 'button';
+    prev = false;
+    onClick = new EventEmitter();
+    get scrollButtonIconClass() {
+        const defaultPrevIcon = !this.localization.rtl ? DIRECTION_CLASSES.left : DIRECTION_CLASSES.right;
+        const defaultNextIcon = !this.localization.rtl ? DIRECTION_CLASSES.right : DIRECTION_CLASSES.left;
+        return this.prev ? defaultPrevIcon : defaultNextIcon;
+    }
+    get scrollButtonSVGIcon() {
+        const defaultPrevSVGIcon = !this.localization.rtl ? this.chevronLeftIcon : this.chevronRightIcon;
+        const defaultNextSVGIcon = !this.localization.rtl ? this.chevronRightIcon : this.chevronLeftIcon;
+        return this.prev ? defaultPrevSVGIcon : defaultNextSVGIcon;
+    }
+    chevronLeftIcon = chevronLeftIcon;
+    chevronRightIcon = chevronRightIcon;
+    subs = new Subscription();
+    constructor(host, renderer, ngZone, localization) {
+        this.host = host;
+        this.renderer = renderer;
+        this.ngZone = ngZone;
+        this.localization = localization;
+    }
+    ngAfterViewInit() {
+        this.ngZone.runOutsideAngular(() => {
+            this.subs.add(this.renderer.listen(this.host.nativeElement, 'click', () => this.clickHandler()));
+        });
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    clickHandler() {
+        const buttonType = this.prev ? 'prev' : 'next';
+        this.onClick.emit(buttonType);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatScrollableButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChatScrollableButtonComponent, isStandalone: true, selector: "[kendoChatScrollableButton]", inputs: { prev: "prev" }, outputs: { onClick: "onClick" }, host: { properties: { "attr.role": "this.role" } }, ngImport: i0, template: `
+        <kendo-icon-wrapper [name]="scrollButtonIconClass" [svgIcon]="scrollButtonSVGIcon" innerCssClass="k-button-icon"> </kendo-icon-wrapper>
+    `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatScrollableButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+        <kendo-icon-wrapper [name]="scrollButtonIconClass" [svgIcon]="scrollButtonSVGIcon" innerCssClass="k-button-icon"> </kendo-icon-wrapper>
+    `,
+                    // eslint-disable-next-line @angular-eslint/component-selector
+                    selector: '[kendoChatScrollableButton]',
+                    standalone: true,
+                    imports: [IconWrapperComponent],
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i1.LocalizationService }], propDecorators: { role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], prev: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
+const DEFAULT_SCROLL_BEHAVIOR = 'smooth';
+const DEFAULT_SCROLL_SPEED = 100;
+/**
+ * @hidden
+ */
+class SuggestionsScrollService {
+    ngZone;
+    localization;
+    owner;
+    position = 0;
+    scrollButtonActiveStateChange = new Subject();
+    get scrollElement() {
+        return this.owner.suggestionsContainer?.nativeElement;
+    }
+    get scrollContainerOverflowSize() {
+        if (!isDocumentAvailable()) {
+            return 0;
+        }
+        if (!this.scrollElement) {
+            return 0;
+        }
+        const overflowSize = Math.floor(this.scrollElement.scrollWidth - this.scrollElement.offsetWidth);
+        return overflowSize < 0 ? 0 : overflowSize;
+    }
+    get suggestionsOverflow() {
+        return this.scrollContainerOverflowSize > 0;
+    }
+    constructor(ngZone, localization) {
+        this.ngZone = ngZone;
+        this.localization = localization;
+    }
+    toggleScrollButtonsState() {
+        const suggestedActions = this.owner;
+        if (!suggestedActions?.hasScrollButtons) {
+            return;
+        }
+        const currentPrevButtonActive = !this.isDisabled('prev');
+        const currentNextButtonActive = !this.isDisabled('next');
+        const defaultOffset = 1;
+        const rtlDelta = this.localization.rtl ? -1 : 1;
+        const calculatedPrevButtonActive = (this.position * rtlDelta) > 0 && this.scrollContainerOverflowSize > 0;
+        const calculatedNextButtonActive = (this.position * rtlDelta) < this.scrollContainerOverflowSize - defaultOffset && this.scrollContainerOverflowSize > 0;
+        if (calculatedPrevButtonActive !== currentPrevButtonActive) {
+            this.ngZone.run(() => this.toggleButtonActiveState('prev', calculatedPrevButtonActive));
+        }
+        if (calculatedNextButtonActive !== currentNextButtonActive) {
+            this.ngZone.run(() => this.toggleButtonActiveState('next', calculatedNextButtonActive));
+        }
+    }
+    onScroll(e) {
+        this.position = e.target.scrollLeft;
+        this.toggleScrollButtonsState();
+    }
+    scrollSuggestions(direction) {
+        this.calculateListPosition(direction, DEFAULT_SCROLL_SPEED);
+        if (this.scrollElement) {
+            this.scrollElement.scrollTo({ left: this.position, behavior: DEFAULT_SCROLL_BEHAVIOR });
+        }
+        this.toggleScrollButtonsState();
+    }
+    updateScrollPosition(element) {
+        this.position = element.scrollLeft;
+    }
+    calculateListPosition(direction, scrollSpeed) {
+        if (direction === 'prev') {
+            if (!this.localization.rtl) {
+                this.position = this.position - scrollSpeed <= 0 ? 0 : this.position - scrollSpeed;
+            }
+            else {
+                this.position = this.position + scrollSpeed >= 0 ? 0 : this.position + scrollSpeed;
+            }
+        }
+        else if (direction === 'next' && this.position < this.scrollContainerOverflowSize) {
+            if (this.position + scrollSpeed > this.scrollContainerOverflowSize) {
+                if (this.localization.rtl) {
+                    this.position = -this.scrollContainerOverflowSize;
+                }
+                else {
+                    this.position = this.scrollContainerOverflowSize;
+                }
+                return;
+            }
+            if (this.localization.rtl) {
+                this.position -= scrollSpeed;
+            }
+            else {
+                this.position += scrollSpeed;
+            }
+        }
+    }
+    toggleButtonActiveState(buttonType, active) {
+        this.scrollButtonActiveStateChange.next({ buttonType, active });
+    }
+    isDisabled = (buttonType) => this.owner[`${buttonType}ScrollButton`]?.nativeElement.classList.contains('k-disabled');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SuggestionsScrollService, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SuggestionsScrollService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SuggestionsScrollService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.LocalizationService }] });
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-empty-function */
 /**
  * @hidden
  */
 class SuggestedActionsComponent extends ChatItem {
+    chatService;
+    localization;
+    scrollService;
+    ngZone;
+    renderer;
+    get defaultClass() {
+        if (this.type === 'suggestion') {
+            return this.chatService.suggestionsLayout === 'wrap' || this.chatService.suggestionsLayout === 'scroll';
+        }
+        else if (this.type === 'action') {
+            return this.chatService.quickActionsLayout === 'wrap' || this.chatService.quickActionsLayout === 'scroll';
+        }
+    }
+    get scrollableClass() {
+        if (this.type === 'suggestion') {
+            return this.chatService.suggestionsLayout === 'scroll';
+        }
+        else if (this.type === 'action') {
+            return this.chatService.quickActionsLayout === 'scroll';
+        }
+    }
+    get scrollButtonsClass() {
+        if (this.type === 'suggestion') {
+            return this.chatService.suggestionsLayout === 'scrollbuttons';
+        }
+        else if (this.type === 'action') {
+            return this.chatService.quickActionsLayout === 'scrollbuttons';
+        }
+    }
+    get role() {
+        if (!this.hasScrollButtons) {
+            return 'group';
+        }
+        return null;
+    }
     actions;
     suggestions;
     tabbable;
+    type;
     suggestionTemplate;
     dispatchAction = new EventEmitter();
     dispatchSuggestion = new EventEmitter();
-    defaultClass = true;
-    role = 'group';
     items;
+    suggestionsContainer;
+    prevScrollButton;
+    nextScrollButton;
     selectedIndex = 0;
     activeIndex = -1;
     active = false;
+    get hasScrollButtons() {
+        return this.type === 'suggestion' ? this.chatService.suggestionsLayout === 'scrollbuttons' : this.chatService.quickActionsLayout === 'scrollbuttons';
+    }
+    subscriptions = new Subscription();
+    resizeObserver = null;
     actionKeyHandlers = {
         [Keys.Tab]: (e) => this.changeSelectedIndex(e),
         [Keys.Enter]: (_, action) => this.actionClick(action),
@@ -2281,6 +2562,58 @@ class SuggestedActionsComponent extends ChatItem {
         [Keys.Enter]: (_, suggestion) => this.suggestionClick(suggestion),
         [Keys.Space]: (_, suggestion) => this.suggestionClick(suggestion),
     };
+    constructor(chatService, localization, scrollService, ngZone, renderer) {
+        super();
+        this.chatService = chatService;
+        this.localization = localization;
+        this.scrollService = scrollService;
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.scrollService.owner = this;
+    }
+    ngAfterViewInit() {
+        const layoutChangeObservable = this.type === 'suggestion'
+            ? this.chatService.suggestionsLayoutChange$
+            : this.chatService.quickActionsLayoutChange$;
+        this.subscriptions.add(layoutChangeObservable.subscribe((layoutMode) => {
+            if (layoutMode === 'scrollbuttons') {
+                this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                    if (this.suggestionsContainer) {
+                        this.scrollService.updateScrollPosition(this.suggestionsContainer.nativeElement);
+                    }
+                    this.scrollService.toggleScrollButtonsState();
+                });
+            }
+        }));
+        this.subscriptions.add(this.scrollService.scrollButtonActiveStateChange.subscribe((change) => {
+            this.toggleScrollButtonState(change.buttonType, change.active);
+        }));
+        if (this.hasScrollButtons && this.suggestionsContainer) {
+            this.ngZone.runOutsideAngular(() => {
+                this.resizeObserver = new ResizeObserver(() => {
+                    this.ngZone.run(() => {
+                        this.scrollService.toggleScrollButtonsState();
+                    });
+                });
+                this.resizeObserver.observe(this.suggestionsContainer.nativeElement);
+            });
+        }
+        if (this.hasScrollButtons) {
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                this.scrollService.toggleScrollButtonsState();
+            });
+            if (this.suggestionsContainer) {
+                this.scrollService.updateScrollPosition(this.suggestionsContainer.nativeElement);
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.subscriptions.unsubscribe();
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+    }
     isSelected(index) {
         return this.selected && this.selectedIndex === index;
     }
@@ -2314,67 +2647,130 @@ class SuggestedActionsComponent extends ChatItem {
             handler(e, suggestion);
         }
     }
+    getScrollButtonTitle(direction) {
+        let currentButton;
+        if (this.localization.rtl) {
+            currentButton = direction === 'prev' ? 'nextSuggestionsButtonTitle' : 'previousSuggestionsButtonTitle';
+        }
+        else {
+            currentButton = direction === 'prev' ? 'previousSuggestionsButtonTitle' : 'nextSuggestionsButtonTitle';
+        }
+        return this.localization.get(currentButton);
+    }
+    onScroll(event) {
+        this.scrollService.onScroll(event);
+    }
+    scrollSuggestions(direction) {
+        this.scrollService.scrollSuggestions(direction);
+    }
     focus() { }
+    toggleScrollButtonState(buttonType, active) {
+        const button = this[`${buttonType}ScrollButton`];
+        if (button?.nativeElement) {
+            if (active) {
+                this.renderer.removeClass(button.nativeElement, 'k-disabled');
+            }
+            else {
+                this.renderer.addClass(button.nativeElement, 'k-disabled');
+            }
+        }
+    }
     changeSelectedIndex(e) {
         const offset = e.shiftKey ? -1 : 1;
         const prevIndex = this.selectedIndex;
         this.selectedIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SuggestedActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SuggestedActionsComponent, isStandalone: true, selector: "kendo-chat-suggested-actions", inputs: { actions: "actions", suggestions: "suggestions", tabbable: "tabbable", suggestionTemplate: "suggestionTemplate" }, outputs: { dispatchAction: "dispatchAction", dispatchSuggestion: "dispatchSuggestion" }, host: { properties: { "class.k-suggestion-group": "this.defaultClass", "attr.role": "this.role" } }, providers: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SuggestedActionsComponent, deps: [{ token: ChatService }, { token: i1.LocalizationService }, { token: SuggestionsScrollService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SuggestedActionsComponent, isStandalone: true, selector: "kendo-chat-suggested-actions", inputs: { actions: "actions", suggestions: "suggestions", tabbable: "tabbable", type: "type", suggestionTemplate: "suggestionTemplate" }, outputs: { dispatchAction: "dispatchAction", dispatchSuggestion: "dispatchSuggestion" }, host: { properties: { "class.k-suggestion-group": "this.defaultClass", "class.k-suggestion-group-scrollable": "this.scrollableClass", "class.k-suggestion-scrollwrap": "this.scrollButtonsClass", "attr.role": "this.role" } }, providers: [{
                 provide: ChatItem,
                 useExisting: forwardRef(() => SuggestedActionsComponent)
-            }], viewQueries: [{ propertyName: "items", predicate: ["item"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <ng-container *ngIf="actions">
-            <span
-                #item
-                *ngFor="let action of actions; index as index; first as first; last as last"
-                class="k-suggestion k-suggestion-primary"
-                role="button"
-                [class.k-selected]="isSelected(index)"
-                [class.k-focus]="isSelected(index)"
-                [class.k-active]="isActive(index)"
-                [attr.tabindex]="0"
-                (click)="actionClick(action, index)"
-                (keydown)="actionKeydown($event, action)"
-                (mousedown)="toggleActiveState(true, index)"
-                (mouseup)="toggleActiveState(false, index)"
-            >
-                {{ action.title || action.value }}
-            </span>
-        </ng-container>
+            },
+            SuggestionsScrollService
+        ], viewQueries: [{ propertyName: "suggestionsContainer", first: true, predicate: ["suggestionsContainer"], descendants: true, read: ElementRef }, { propertyName: "prevScrollButton", first: true, predicate: ["prevScrollButton"], descendants: true, read: ElementRef }, { propertyName: "nextScrollButton", first: true, predicate: ["nextScrollButton"], descendants: true, read: ElementRef }, { propertyName: "items", predicate: ["item"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <span 
+            *ngIf="hasScrollButtons" 
+            #prevScrollButton
+            kendoChatScrollableButton
+            [prev]="true"
+            [title]="getScrollButtonTitle('prev')"
+            class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button"
+            (onClick)="scrollSuggestions($event)"
+        >
+        </span>
+        <div class="k-suggestion-group" *ngIf="hasScrollButtons; else noScrollButtons" 
+            #suggestionsContainer
+            role="group"
+            (scroll)="onScroll($event)">
+            <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
+        </div>
+
+        <ng-template #noScrollButtons>
+            <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
+        </ng-template>
 
-        <ng-container *ngIf="suggestions">
-            <ng-container *ngIf="!suggestionTemplate?.templateRef">
+        <ng-template #suggestionsContent>
+            <ng-container *ngIf="actions">
                 <span
                     #item
-                    *ngFor="let suggestion of suggestions; index as index; first as first; last as last"
-                    class="k-suggestion"
+                    *ngFor="let action of actions; index as index; first as first; last as last"
+                    class="k-suggestion k-suggestion-primary"
                     role="button"
                     [class.k-selected]="isSelected(index)"
                     [class.k-focus]="isSelected(index)"
                     [class.k-active]="isActive(index)"
                     [attr.tabindex]="0"
-                    (click)="suggestionClick(suggestion, index)"
-                    (keydown)="suggestionKeydown($event, suggestion)"
+                    (click)="actionClick(action, index)"
+                    (keydown)="actionKeydown($event, action)"
                     (mousedown)="toggleActiveState(true, index)"
                     (mouseup)="toggleActiveState(false, index)"
                 >
-                    {{ suggestion.text }}
+                    {{ action.title || action.value }}
                 </span>
             </ng-container>
 
-            <ng-container *ngIf="suggestionTemplate?.templateRef">
-                <ng-container *ngFor="let suggestion of suggestions">
-                    <ng-template
-                        [ngTemplateOutlet]="suggestionTemplate.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: suggestion }"
+            <ng-container *ngIf="suggestions">
+                <ng-container *ngIf="!suggestionTemplate?.templateRef">
+                    <span
+                        #item
+                        *ngFor="let suggestion of suggestions; index as index; first as first; last as last"
+                        class="k-suggestion"
+                        role="button"
+                        [class.k-selected]="isSelected(index)"
+                        [class.k-focus]="isSelected(index)"
+                        [class.k-active]="isActive(index)"
+                        [attr.tabindex]="0"
+                        (click)="suggestionClick(suggestion, index)"
+                        (keydown)="suggestionKeydown($event, suggestion)"
+                        (mousedown)="toggleActiveState(true, index)"
+                        (mouseup)="toggleActiveState(false, index)"
                     >
-                    </ng-template>
+                        {{ suggestion.text }}
+                    </span>
+                </ng-container>
+
+                <ng-container *ngIf="suggestionTemplate?.templateRef">
+                    <ng-container *ngFor="let suggestion of suggestions">
+                        <ng-template
+                            [ngTemplateOutlet]="suggestionTemplate.templateRef"
+                            [ngTemplateOutletContext]="{ $implicit: suggestion }"
+                        >
+                        </ng-template>
+                    </ng-container>
                 </ng-container>
             </ng-container>
-        </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        </ng-template>
+
+        <span 
+            *ngIf="hasScrollButtons"
+            #nextScrollButton
+            kendoChatScrollableButton
+            [prev]="false"
+            [title]="getScrollButtonTitle('next')"
+            class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button"
+            (onClick)="scrollSuggestions($event)"
+        >
+        </span>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChatScrollableButtonComponent, selector: "[kendoChatScrollableButton]", inputs: ["prev"], outputs: ["onClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SuggestedActionsComponent, decorators: [{
             type: Component,
@@ -2383,82 +2779,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     providers: [{
                             provide: ChatItem,
                             useExisting: forwardRef(() => SuggestedActionsComponent)
-                        }],
+                        },
+                        SuggestionsScrollService],
                     template: `
-        <ng-container *ngIf="actions">
-            <span
-                #item
-                *ngFor="let action of actions; index as index; first as first; last as last"
-                class="k-suggestion k-suggestion-primary"
-                role="button"
-                [class.k-selected]="isSelected(index)"
-                [class.k-focus]="isSelected(index)"
-                [class.k-active]="isActive(index)"
-                [attr.tabindex]="0"
-                (click)="actionClick(action, index)"
-                (keydown)="actionKeydown($event, action)"
-                (mousedown)="toggleActiveState(true, index)"
-                (mouseup)="toggleActiveState(false, index)"
-            >
-                {{ action.title || action.value }}
-            </span>
-        </ng-container>
+        <span 
+            *ngIf="hasScrollButtons" 
+            #prevScrollButton
+            kendoChatScrollableButton
+            [prev]="true"
+            [title]="getScrollButtonTitle('prev')"
+            class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button"
+            (onClick)="scrollSuggestions($event)"
+        >
+        </span>
+        <div class="k-suggestion-group" *ngIf="hasScrollButtons; else noScrollButtons" 
+            #suggestionsContainer
+            role="group"
+            (scroll)="onScroll($event)">
+            <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
+        </div>
 
-        <ng-container *ngIf="suggestions">
-            <ng-container *ngIf="!suggestionTemplate?.templateRef">
+        <ng-template #noScrollButtons>
+            <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
+        </ng-template>
+
+        <ng-template #suggestionsContent>
+            <ng-container *ngIf="actions">
                 <span
                     #item
-                    *ngFor="let suggestion of suggestions; index as index; first as first; last as last"
-                    class="k-suggestion"
+                    *ngFor="let action of actions; index as index; first as first; last as last"
+                    class="k-suggestion k-suggestion-primary"
                     role="button"
                     [class.k-selected]="isSelected(index)"
                     [class.k-focus]="isSelected(index)"
                     [class.k-active]="isActive(index)"
                     [attr.tabindex]="0"
-                    (click)="suggestionClick(suggestion, index)"
-                    (keydown)="suggestionKeydown($event, suggestion)"
+                    (click)="actionClick(action, index)"
+                    (keydown)="actionKeydown($event, action)"
                     (mousedown)="toggleActiveState(true, index)"
                     (mouseup)="toggleActiveState(false, index)"
                 >
-                    {{ suggestion.text }}
+                    {{ action.title || action.value }}
                 </span>
             </ng-container>
 
-            <ng-container *ngIf="suggestionTemplate?.templateRef">
-                <ng-container *ngFor="let suggestion of suggestions">
-                    <ng-template
-                        [ngTemplateOutlet]="suggestionTemplate.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: suggestion }"
+            <ng-container *ngIf="suggestions">
+                <ng-container *ngIf="!suggestionTemplate?.templateRef">
+                    <span
+                        #item
+                        *ngFor="let suggestion of suggestions; index as index; first as first; last as last"
+                        class="k-suggestion"
+                        role="button"
+                        [class.k-selected]="isSelected(index)"
+                        [class.k-focus]="isSelected(index)"
+                        [class.k-active]="isActive(index)"
+                        [attr.tabindex]="0"
+                        (click)="suggestionClick(suggestion, index)"
+                        (keydown)="suggestionKeydown($event, suggestion)"
+                        (mousedown)="toggleActiveState(true, index)"
+                        (mouseup)="toggleActiveState(false, index)"
                     >
-                    </ng-template>
+                        {{ suggestion.text }}
+                    </span>
+                </ng-container>
+
+                <ng-container *ngIf="suggestionTemplate?.templateRef">
+                    <ng-container *ngFor="let suggestion of suggestions">
+                        <ng-template
+                            [ngTemplateOutlet]="suggestionTemplate.templateRef"
+                            [ngTemplateOutletContext]="{ $implicit: suggestion }"
+                        >
+                        </ng-template>
+                    </ng-container>
                 </ng-container>
             </ng-container>
-        </ng-container>
+        </ng-template>
+
+        <span 
+            *ngIf="hasScrollButtons"
+            #nextScrollButton
+            kendoChatScrollableButton
+            [prev]="false"
+            [title]="getScrollButtonTitle('next')"
+            class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button"
+            (onClick)="scrollSuggestions($event)"
+        >
+        </span>
     `,
                     standalone: true,
-                    imports: [NgFor, NgIf, NgTemplateOutlet]
+                    imports: [NgFor, NgIf, NgTemplateOutlet, ChatScrollableButtonComponent]
                 }]
-        }], propDecorators: { actions: [{
+        }], ctorParameters: () => [{ type: ChatService }, { type: i1.LocalizationService }, { type: SuggestionsScrollService }, { type: i0.NgZone }, { type: i0.Renderer2 }], propDecorators: { defaultClass: [{
+                type: HostBinding,
+                args: ['class.k-suggestion-group']
+            }], scrollableClass: [{
+                type: HostBinding,
+                args: ['class.k-suggestion-group-scrollable']
+            }], scrollButtonsClass: [{
+                type: HostBinding,
+                args: ['class.k-suggestion-scrollwrap']
+            }], role: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], actions: [{
                 type: Input
             }], suggestions: [{
                 type: Input
             }], tabbable: [{
                 type: Input
+            }], type: [{
+                type: Input
             }], suggestionTemplate: [{
                 type: Input
             }], dispatchAction: [{
                 type: Output
             }], dispatchSuggestion: [{
                 type: Output
-            }], defaultClass: [{
-                type: HostBinding,
-                args: ['class.k-suggestion-group']
-            }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
             }], items: [{
                 type: ViewChildren,
                 args: ['item']
+            }], suggestionsContainer: [{
+                type: ViewChild,
+                args: ['suggestionsContainer', { read: ElementRef, static: false }]
+            }], prevScrollButton: [{
+                type: ViewChild,
+                args: ['prevScrollButton', { read: ElementRef }]
+            }], nextScrollButton: [{
+                type: ViewChild,
+                args: ['nextScrollButton', { read: ElementRef }]
             }] } });
 
 /* eslint-disable @typescript-eslint/no-empty-function */
@@ -2499,7 +2947,7 @@ class ChatFileComponent extends ChatItem {
                 useExisting: forwardRef(() => ChatFileComponent)
             }], usesInheritance: true, ngImport: i0, template: `
         <kendo-icon-wrapper
-            size="xxlarge"
+            size="xlarge"
             [name]="fileGroupClass(chatFile.extension)"
             [svgIcon]="fileThumbnail(chatFile.extension)"
         >
@@ -2540,7 +2988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         }],
                     template: `
         <kendo-icon-wrapper
-            size="xxlarge"
+            size="xlarge"
             [name]="fileGroupClass(chatFile.extension)"
             [svgIcon]="fileThumbnail(chatFile.extension)"
         >
@@ -2790,6 +3238,7 @@ class MessageBoxComponent {
             return;
         }
         const message = {
+            id: guid(),
             text: this.inputValue,
             timestamp: new Date(),
             author: { id: this.authorId },
@@ -2927,6 +3376,7 @@ class MessageBoxComponent {
         *ngIf="suggestions?.length > 0"
         #suggestedActions
         [suggestions]="suggestions"
+        type="suggestion"
         [suggestionTemplate]="suggestionTemplate"
         [tabbable]="true"
         (dispatchSuggestion)="dispatchSuggestion($event)"
@@ -3027,7 +3477,7 @@ class MessageBoxComponent {
         [showFileList]="false"
         (select)="handleFileSelect($event)"
     ></kendo-fileselect>
-`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: TextAreaPrefixComponent, selector: "kendo-textarea-prefix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaPrefix"] }, { kind: "component", type: SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }, { kind: "component", type: InputSpacerComponent, selector: "kendo-input-spacer, kendo-textbox-spacer", inputs: ["width"] }, { kind: "component", type: FileSelectComponent, selector: "kendo-fileselect", inputs: ["name"], outputs: ["valueChange"], exportAs: ["kendoFileSelect"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "suggestions", "tabbable", "suggestionTemplate"], outputs: ["dispatchAction", "dispatchSuggestion"] }, { kind: "component", type: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }] });
+`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: 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: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: TextAreaPrefixComponent, selector: "kendo-textarea-prefix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaPrefix"] }, { kind: "component", type: SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }, { kind: "component", type: InputSpacerComponent, selector: "kendo-input-spacer, kendo-textbox-spacer", inputs: ["width"] }, { kind: "component", type: FileSelectComponent, selector: "kendo-fileselect", inputs: ["name"], outputs: ["valueChange"], exportAs: ["kendoFileSelect"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "suggestions", "tabbable", "type", "suggestionTemplate"], outputs: ["dispatchAction", "dispatchSuggestion"] }, { kind: "component", type: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageBoxComponent, decorators: [{
             type: Component,
@@ -3038,6 +3488,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         *ngIf="suggestions?.length > 0"
         #suggestedActions
         [suggestions]="suggestions"
+        type="suggestion"
         [suggestionTemplate]="suggestionTemplate"
         [tabbable]="true"
         (dispatchSuggestion)="dispatchSuggestion($event)"
@@ -3183,6 +3634,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
+/**
+ * Defines a template for displaying custom content inside the Chat messages.
+ *
+ * To define a message template, nest an `<ng-template>` tag with the `kendoChatMessageContentTemplate` directive inside the `<kendo-chat>` component.
+ * The template context is set to the `message` instance.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatMessageContentTemplate let-message>
+ *     <div>Message: {{ message.text }}</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+class MessageContentTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: MessageContentTemplateDirective, isStandalone: true, selector: "[kendoChatMessageContentTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageContentTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChatMessageContentTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }] });
+
 /**
  * Defines a template for displaying the chat timestamp.
  *
@@ -3248,6 +3733,176 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
+/**
+ * Defines a template for displaying fully custom Chat message bubbles.
+ *
+ * To define a message template, nest an `<ng-template>` tag with the `kendoChatMessageTemplate` directive inside the `<kendo-chat>` component.
+ * The template context is set to the `message` instance.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatMessageTemplate let-message>
+ *     <div>Message: {{ message.text }}</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+class MessageTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: MessageTemplateDirective, isStandalone: true, selector: "[kendoChatMessageTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChatMessageTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }] });
+
+/**
+ * Defines a template for displaying custom content inside the current user's messages in the Chat.
+ *
+ * To define a message template, nest an `<ng-template>` tag with the `kendoChatAuthorMessageContentTemplate` directive inside the `<kendo-chat>` component.
+ * The template context is set to the `message` instance.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatAuthorMessageContentTemplate let-message>
+ *     <div>Message: {{ message.text }}</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+class AuthorMessageContentTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthorMessageContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: AuthorMessageContentTemplateDirective, isStandalone: true, selector: "[kendoChatAuthorMessageContentTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthorMessageContentTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChatAuthorMessageContentTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }] });
+
+/**
+ * Defines a template for displaying custom content inside the other users' messages in the Chat.
+ *
+ * To define a message template, nest an `<ng-template>` tag with the `kendoChatReceiverMessageContentTemplate` directive inside the `<kendo-chat>` component.
+ * The template context is set to the `message` instance.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatReceiverMessageContentTemplate let-message>
+ *     <div>Message: {{ message.text }}</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+class ReceiverMessageContentTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReceiverMessageContentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ReceiverMessageContentTemplateDirective, isStandalone: true, selector: "[kendoChatReceiverMessageContentTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReceiverMessageContentTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChatReceiverMessageContentTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }] });
+
+/**
+ * Defines a template for displaying fully custom Chat message bubbles for the other users.
+ *
+ * To define a message template, nest an `<ng-template>` tag with the `kendoChatReceiverMessageTemplate` directive inside the `<kendo-chat>` component.
+ * The template context is set to the `message` instance.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatReceiverMessageTemplate let-message>
+ *     <div>Message: {{ message.text }}</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+class ReceiverMessageTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReceiverMessageTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ReceiverMessageTemplateDirective, isStandalone: true, selector: "[kendoChatReceiverMessageTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ReceiverMessageTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChatReceiverMessageTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }] });
+
+/**
+ * Defines a template for displaying fully custom Chat message bubbles for the current user.
+ *
+ * To define a message template, nest an `<ng-template>` tag with the `kendoChatAuthorMessageTemplate` directive inside the `<kendo-chat>` component.
+ * The template context is set to the `message` instance.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatAuthorMessageTemplate let-message>
+ *     <div>Message: {{ message.text }}</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+class AuthorMessageTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthorMessageTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: AuthorMessageTemplateDirective, isStandalone: true, selector: "[kendoChatAuthorMessageTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AuthorMessageTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChatAuthorMessageTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }] });
+
 // eslint-disable no-forward-ref
 /**
  * @hidden
@@ -3257,13 +3912,23 @@ class MessageComponent extends ChatItem {
     intl;
     chatService;
     localization;
-    message;
+    cdr;
+    set message(value) {
+        this._message = value;
+    }
+    get message() {
+        return this._message;
+    }
     tabbable;
-    template;
+    authorMessageContentTemplate;
+    receiverMessageContentTemplate;
+    messageContentTemplate;
+    authorMessageTemplate;
+    receiverMessageTemplate;
+    messageTemplate;
     statusTemplate;
     showMessageTime = true;
     authorId;
-    contextMenuVisibilityChange = new EventEmitter();
     cssClass = true;
     get removedClass() {
         return this.message.isDeleted;
@@ -3278,44 +3943,142 @@ class MessageComponent extends ChatItem {
         this.onExpandableKeydown(event);
     }
     selected;
-    active = false;
-    selectOnMenuClose = false;
     get tabIndex() {
         return this.tabbable ? '0' : '-1';
     }
-    onContextMenu(event) {
-        if (this.message.isDeleted) {
-            return;
-        }
-        this.active = true;
-        event.stopPropagation();
-    }
     expandIcon = chevronDownIcon;
     collapseIcon = chevronUpIcon;
     downloadIcon = downloadIcon;
     isMessageExpanded = false;
-    contextMenuActions = [];
+    showExpandCollapseIcon = false;
     fileActions = [];
+    toolbarActions = [];
     parts = [];
-    constructor(element, intl, chatService, localization) {
+    get useCustomBubbleTemplate() {
+        return !!(this.getActiveBubbleTemplate());
+    }
+    get useCustomContentTemplate() {
+        return !!(this.getActiveContentTemplate());
+    }
+    get hasMessageContent() {
+        return !!(this.message?.text || this.message?.files?.length > 0);
+    }
+    get hasFiles() {
+        return this.message?.files?.length > 0;
+    }
+    get hasMultipleFiles() {
+        return this.message?.files?.length > 1;
+    }
+    get isActiveMessage() {
+        return this.chatService.active && this.message?.id === this.chatService.activeMessage?.id;
+    }
+    get isMessageExpandable() {
+        const isOwn = this.isOwnMessage(this.message);
+        const messageSettings = isOwn
+            ? this.chatService.authorMessageSettings
+            : this.chatService.receiverMessageSettings;
+        if (isPresent(messageSettings?.allowMessageCollapse)) {
+            return messageSettings.allowMessageCollapse;
+        }
+        return this.chatService.allowMessageCollapse || false;
+    }
+    get showToolbar() {
+        if (this.message?.isDeleted) {
+            return false;
+        }
+        const hasComponentActions = this.chatService.messageToolbarActions?.length > 0;
+        const hasMessageActions = this.toolbarActions?.length > 0;
+        return hasComponentActions || hasMessageActions;
+    }
+    subs = new Subscription();
+    _message;
+    constructor(element, intl, chatService, localization, cdr) {
         super();
         this.element = element;
         this.intl = intl;
         this.chatService = chatService;
         this.localization = localization;
+        this.cdr = cdr;
     }
     ngOnInit() {
-        this.contextMenuActions = this.transformActions(this.chatService.messageContextMenuActions);
-        this.fileActions = this.transformActions(this.chatService.fileActions);
+        this.fileActions = this.getFileActions();
+        this.toolbarActions = this.getToolbarActions();
+        const settingsChange$ = this.isOwnMessage(this.message)
+            ? this.chatService.authorMessageSettingsChange$
+            : this.chatService.receiverMessageSettingsChange$;
+        this.subs.add(settingsChange$.subscribe(() => {
+            this.fileActions = this.getFileActions();
+            this.toolbarActions = this.getToolbarActions();
+            setTimeout(() => {
+                this.showExpandCollapseIcon = this.calculateExpandCollapseIconVisibility();
+            });
+        }));
+        this.subs.add(this.chatService.allowMessageCollapseChange$.subscribe(() => {
+            setTimeout(() => {
+                this.showExpandCollapseIcon = this.calculateExpandCollapseIconVisibility();
+            });
+        }));
         if (this.message.id) {
             this.chatService.registerMessageElement(this.message.id, this.element);
         }
         this.parts = this.getFormattedTextParts(this.message.text);
     }
+    ngAfterViewInit() {
+        this.showExpandCollapseIcon = this.calculateExpandCollapseIconVisibility();
+        this.cdr.detectChanges();
+    }
     ngOnDestroy() {
         if (this.message.id) {
             this.chatService.unregisterMessageElement(this.message.id);
         }
+        this.subs.unsubscribe();
+    }
+    calculateExpandCollapseIconVisibility() {
+        if (this.isMessageExpanded) {
+            return true;
+        }
+        const bubbleContent = this.element.nativeElement.querySelector('.k-bubble-content');
+        if (!bubbleContent) {
+            return false;
+        }
+        const hasVerticalOverflow = bubbleContent.scrollHeight > bubbleContent.clientHeight;
+        const hasHorizontalOverflow = bubbleContent.scrollWidth > bubbleContent.clientWidth;
+        if (this.useCustomContentTemplate) {
+            return hasVerticalOverflow || hasHorizontalOverflow;
+        }
+        const messageText = this.element.nativeElement.querySelector('.k-chat-bubble-text');
+        const hasTextOverflow = messageText?.scrollWidth > messageText?.clientWidth;
+        return hasTextOverflow || hasVerticalOverflow || hasHorizontalOverflow;
+    }
+    getActiveBubbleTemplate() {
+        const isOwn = this.isOwnMessage(this.message);
+        if (isOwn && this.authorMessageTemplate) {
+            return this.authorMessageTemplate;
+        }
+        if (!isOwn && this.receiverMessageTemplate) {
+            return this.receiverMessageTemplate;
+        }
+        if (this.messageTemplate) {
+            return this.messageTemplate;
+        }
+        return null;
+    }
+    getActiveContentTemplate() {
+        const isOwn = this.isOwnMessage(this.message);
+        if (isOwn && this.authorMessageContentTemplate) {
+            return this.authorMessageContentTemplate;
+        }
+        if (!isOwn && this.receiverMessageContentTemplate) {
+            return this.receiverMessageContentTemplate;
+        }
+        if (this.messageContentTemplate) {
+            return this.messageContentTemplate;
+        }
+        return null;
+    }
+    getDeletedMessageText() {
+        const isOwn = this.isOwnMessage(this.message);
+        return isOwn ? this.textFor('deletedMessageSenderText') : this.textFor('deletedMessageReceiverText');
     }
     textFor(key) {
         return this.localization.get(key);
@@ -3343,66 +4106,19 @@ class MessageComponent extends ChatItem {
             this.toggleMessageState(event);
         }
     }
-    isToolbarVisible() {
-        if (!this.chatService.messageToolbarActions || this.chatService.messageToolbarActions.length === 0 || this.message.isDeleted) {
-            return false;
-        }
-        return this.chatService.messageToolbarVisibility === 'always';
-    }
     onToolbarAction(event, action, message) {
         event.stopImmediatePropagation();
         this.chatService.emit('toolbarAction', { action, message });
     }
-    onContextMenuAction(action) {
-        if (action.id === 'reply') {
-            this.chatService.reply = this.message;
-        }
-        if (action.id === 'copy') {
-            navigator.clipboard.writeText(this.message.text);
-        }
-        this.chatService.emit('contextMenuAction', { action, message: this.message });
-    }
     onFileAction(action, file) {
         if (action.originalAction.id === 'download') {
             this.chatService.emit('fileDownload', { files: [file], message: this.message });
         }
         this.chatService.emit('fileAction', { action: action.originalAction, file });
     }
-    transformActions(actions) {
-        return actions.map(action => ({
-            text: action.label,
-            icon: action.icon,
-            svgIcon: action.svgIcon,
-            disabled: action.disabled,
-            originalAction: action
-        }));
-    }
     getMessageById(id) {
         return this.chatService.getMessageById(id);
     }
-    // processes the message text to extract parts that are either plain text or links
-    // this allows us not to render an additional wrapper element for the text
-    getFormattedTextParts(text) {
-        if (!text) {
-            return [];
-        }
-        const parts = [];
-        const urlMatches = Array.from(text.matchAll(URL_REGEX));
-        let lastIndex = 0;
-        for (const match of urlMatches) {
-            const url = match[1];
-            const matchStart = match.index;
-            if (matchStart > lastIndex) {
-                parts.push({ type: 'text', content: text.substring(lastIndex, matchStart) });
-            }
-            parts.push({ type: 'link', content: url, href: url });
-            lastIndex = matchStart + match[0].length;
-        }
-        if (lastIndex < text.length) {
-            parts.push({ type: 'text', content: text.substring(lastIndex) });
-        }
-        return parts;
-    }
     onReplyReferenceClick(event, replyToId) {
         event.stopPropagation();
         this.chatService.emit('replyReferenceClick', replyToId);
@@ -3414,9 +4130,9 @@ class MessageComponent extends ChatItem {
                 this.onActionButtonClick(originalEvent);
             }
         }
-        this.active = false;
-        this.contextMenuVisibilityChange.emit(false);
-        if (this.selectOnMenuClose) {
+        this.chatService.active = false;
+        this.chatService.emit('contextMenuVisibilityChange', false);
+        if (this.chatService.selectOnMenuClose) {
             this.selected = true;
             this.focus();
         }
@@ -3425,16 +4141,16 @@ class MessageComponent extends ChatItem {
         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.selectOnMenuClose = false;
+            this.chatService.selectOnMenuClose = false;
         }
     }
     handleMenuOpen() {
-        this.selectOnMenuClose = this.selected;
-        this.contextMenuVisibilityChange.emit(true);
+        this.chatService.selectOnMenuClose = this.selected;
+        this.chatService.emit('contextMenuVisibilityChange', true);
     }
     onActionPopupChange(expanded) {
         if (expanded) {
-            this.active = true;
+            this.chatService.active = true;
             this.handleMenuOpen();
         }
         else {
@@ -3444,124 +4160,211 @@ class MessageComponent extends ChatItem {
     isOwnMessage(msg) {
         return isAuthor(this.authorId, msg);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.IntlService }, { token: ChatService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MessageComponent, isStandalone: true, selector: "kendo-chat-message", inputs: { message: "message", tabbable: "tabbable", template: "template", statusTemplate: "statusTemplate", showMessageTime: "showMessageTime", authorId: "authorId" }, outputs: { contextMenuVisibilityChange: "contextMenuVisibilityChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "contextmenu": "onContextMenu($event)" }, properties: { "class.k-message": "this.cssClass", "class.k-message-removed": "this.removedClass", "attr.tabIndex": "this.tabIndex" } }, providers: [
+    getFormattedTextParts(text) {
+        if (!text) {
+            return [];
+        }
+        const parts = [];
+        const urlMatches = Array.from(text.matchAll(URL_REGEX));
+        let lastIndex = 0;
+        for (const match of urlMatches) {
+            const url = match[1];
+            const matchStart = match.index;
+            if (!isPresent(matchStart)) {
+                continue;
+            }
+            if (matchStart > lastIndex) {
+                parts.push({ type: 'text', content: text.substring(lastIndex, matchStart) });
+            }
+            parts.push({ type: 'link', content: url, href: url });
+            lastIndex = matchStart + match[0].length;
+        }
+        if (lastIndex < text.length) {
+            parts.push({ type: 'text', content: text.substring(lastIndex) });
+        }
+        return parts;
+    }
+    getMessageSettings() {
+        return this.isOwnMessage(this.message)
+            ? this.chatService.authorMessageSettings
+            : this.chatService.receiverMessageSettings;
+    }
+    getToolbarActions() {
+        const messageSettings = this.getMessageSettings();
+        return messageSettings?.messageToolbarActions?.length
+            ? messageSettings.messageToolbarActions
+            : this.chatService.messageToolbarActions || [];
+    }
+    getFileActions() {
+        const messageSettings = this.getMessageSettings();
+        const actions = messageSettings?.fileActions?.length
+            ? messageSettings.fileActions
+            : this.chatService.fileActions || [];
+        return transformActions(actions);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.IntlService }, { token: ChatService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MessageComponent, isStandalone: true, selector: "kendo-chat-message", inputs: { message: "message", tabbable: "tabbable", authorMessageContentTemplate: "authorMessageContentTemplate", receiverMessageContentTemplate: "receiverMessageContentTemplate", messageContentTemplate: "messageContentTemplate", authorMessageTemplate: "authorMessageTemplate", receiverMessageTemplate: "receiverMessageTemplate", messageTemplate: "messageTemplate", statusTemplate: "statusTemplate", showMessageTime: "showMessageTime", authorId: "authorId" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.k-message": "this.cssClass", "class.k-message-removed": "this.removedClass", "attr.tabIndex": "this.tabIndex" } }, providers: [
             {
                 provide: ChatItem,
                 useExisting: forwardRef(() => MessageComponent)
             }
         ], usesInheritance: true, ngImport: i0, 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-chat-bubble k-bubble"
-                *ngIf="template"
-                [attr.tabindex]="0"
-                [ngClass]="{
-                    'k-selected': selected,
-                    'k-focus': selected,
-                    'k-active': active
-                }"
-            >
-                <div class="k-bubble-content">
-                    <ng-container
-                        *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"
-                    >
-                    </ng-container>
-                </div>
-            </div>
+        <ng-container *ngIf="useCustomBubbleTemplate">
+            <ng-container *ngTemplateOutlet="getActiveBubbleTemplate()?.templateRef; context: { $implicit: message };"></ng-container>
+        </ng-container>
 
-            <div
-                class="k-chat-bubble k-bubble"
-                *ngIf="!template && (message.text || message.files)"
-                [attr.tabindex]="0"
-                [ngClass]="{
-                    'k-bubble-expandable': chatService.allowMessageCollapse,
-                    'k-expanded': isMessageExpanded,
-                    'k-selected': selected,
-                    'k-focus': selected,
-                    'k-active': active
-                }"
+        <ng-container *ngIf="!useCustomBubbleTemplate">
+            <time
+                [attr.aria-hidden]="!selected"
+                class="k-message-time"
+                *ngIf="chatService.timestampVisibility === 'focus' && message.timestamp"
             >
-                <div class="k-bubble-content">
-                    <span class="k-chat-bubble-text" *ngIf="message.text || message.isDeleted">
-                        <div class="k-message-reference k-message-reference-receiver" *ngIf="message.replyToId && !message.isDeleted" (click)="onReplyReferenceClick($event, message.replyToId)">
-                            <chat-message-reference-content [message]="getMessageById(message.replyToId)"></chat-message-reference-content>
-                        </div>
-                        <ng-container *ngIf="message.isDeleted && isOwnMessage(message)">{{ textFor('deletedMessageSenderText') }}</ng-container>
-                        <ng-container *ngIf="message.isDeleted && !isOwnMessage(message)">{{ textFor('deletedMessageReceiverText') }}</ng-container>
-                        <ng-container *ngIf="!message.isDeleted && parts.length">
-                            <ng-container *ngFor="let part of parts">
-                                <ng-container *ngIf="part.type === 'text'">{{part.content}}</ng-container>
-                                <a *ngIf="part.type === 'link'" [href]="part.href" target="_blank">{{part.content}}</a>
-                            </ng-container>
-                        </ng-container>
-                    </span>
-                    <ul class="k-chat-file-wrapper" *ngIf="message.files && message.files.length > 0">
-                        <li
-                            *ngFor="let file of message.files"
-                            class="k-chat-file"
-                            [chatFile]="file"
-                            [fileActions]="fileActions"
-                            (actionClick)="onFileAction($event, file)"
-                            (actionsToggle)="onActionPopupChange($event)"
-                            (actionButtonClick)="onActionButtonClick($event)"
-                        ></li>
-                    </ul>
-                    <div class="k-chat-download-button-wrapper" *ngIf="message.files?.length > 1">
-                        <button
-                            kendoButton
-                            class="k-chat-download-button"
-                            fillMode="flat"
-                            icon="download"
-                            [svgIcon]="downloadIcon"
-                            (click)="onDownloadAll()"
-                        >{{ textFor('downloadAllFilesText') }}</button>
+                {{ formatTimeStamp(message.timestamp) }}
+            </time>
+
+            <ng-container *ngIf="message.typing">
+                <div class="k-chat-bubble k-bubble">
+                    <div class="k-typing-indicator" [attr.tabindex]="'-1'">
+                        <span></span>
+                        <span></span>
+                        <span></span>
                     </div>
                 </div>
-                <span
-                    class="k-bubble-expandable-indicator"
-                    *ngIf="chatService.allowMessageCollapse"
-                    [attr.role]="'button'"
-                    [attr.title]="isMessageExpanded ? textFor('collapseTitle') : textFor('expandTitle')"
-                    (mousedown)="chatService.toggleMessageState = true"
-                    (click)="toggleMessageState($event)"
+            </ng-container>
+
+            <ng-container *ngIf="!message.typing">
+                <div
+                    class="k-chat-bubble k-bubble"
+                    *ngIf="useCustomContentTemplate"
+                    [attr.tabindex]="0"
+                    [ngClass]="{
+                        'k-bubble-expandable': isMessageExpandable, 
+                        'k-expanded': isMessageExpanded,
+                        'k-selected': selected, 
+                        'k-focus': selected,
+                        'k-active': isActiveMessage
+                    }"
                 >
-                    <kendo-icon-wrapper
-                        [name]="isMessageExpanded ? 'chevron-up' : 'chevron-down'"
-                        [svgIcon]="isMessageExpanded ? collapseIcon : expandIcon"
+                    <div class="k-bubble-content">
+                        <ng-container *ngTemplateOutlet="getActiveContentTemplate()?.templateRef; context: { $implicit: message };"></ng-container>
+                    </div>
+                    <span
+                        class="k-bubble-expandable-indicator"
+                        *ngIf="isMessageExpandable && showExpandCollapseIcon"
+                        [attr.tabindex]="'0'"
+                        [attr.role]="'button'"
+                        [attr.title]="isMessageExpanded ? textFor('collapseTitle') : textFor('expandTitle')"
+                        (mousedown)="chatService.toggleMessageState = true"
+                        (click)="toggleMessageState($event)"
                     >
-                    </kendo-icon-wrapper>
-                </span>
-            </div>
-        </ng-container>
+                        <kendo-icon-wrapper
+                            [name]="isMessageExpanded ? 'chevron-up' : 'chevron-down'"
+                            [svgIcon]="isMessageExpanded ? collapseIcon : expandIcon"
+                        >
+                        </kendo-icon-wrapper>
+                    </span>
+                </div>
 
-        <span
-            class="k-message-status"
-            *ngIf="message.status"
-        >
-            <ng-container *ngIf="statusTemplate?.templateRef">
-                <ng-template
-                    [ngTemplateOutlet]="statusTemplate.templateRef"
-                    [ngTemplateOutletContext]="{ $implicit: message.status, message }"
+                <div
+                    class="k-chat-bubble k-bubble"
+                    *ngIf="!useCustomContentTemplate && hasMessageContent"
+                    [attr.tabindex]="0"
+                    [ngClass]="{
+                        'k-bubble-expandable': isMessageExpandable, 
+                        'k-expanded': isMessageExpanded, 
+                        'k-selected': selected, 
+                        'k-focus': selected,
+                        'k-active': isActiveMessage
+                    }"
                 >
-                </ng-template>
-            </ng-container>
-            <ng-container *ngIf="!statusTemplate?.templateRef">
-                {{ message.status }}
+                    <div class="k-bubble-content">
+                        <ng-container *ngIf="message.text || message.isDeleted">
+                            <div 
+                                class="k-message-reference k-message-reference-receiver" 
+                                *ngIf="message.replyToId && !message.isDeleted" 
+                                (click)="onReplyReferenceClick($event, message.replyToId)"
+                            >
+                                <chat-message-reference-content [message]="getMessageById(message.replyToId)"></chat-message-reference-content>
+                            </div>
+
+                            <span class="k-chat-bubble-text" *ngIf="message.isDeleted">
+                                {{ getDeletedMessageText() }}
+                            </span>
+
+                            <span class="k-chat-bubble-text" *ngIf="!message.isDeleted && parts.length > 0">
+                                <ng-container *ngFor="let part of parts">
+                                    <ng-container *ngIf="part.type === 'text'">{{part.content}}</ng-container>
+                                    <a *ngIf="part.type === 'link'" [href]="part.href" target="_blank">{{part.content}}</a>
+                                </ng-container>
+                            </span>
+                        </ng-container>
+
+                        <ul 
+                            class="k-chat-file-wrapper" 
+                            *ngIf="hasFiles && !message.isDeleted" 
+                            [ngClass]="{
+                                'k-chat-files-wrap': chatService.messageFilesLayout === 'wrap', 
+                                'k-chat-files-horizontal': chatService.messageFilesLayout === 'horizontal'
+                            }"
+                        >
+                            <li
+                                *ngFor="let file of message.files"
+                                class="k-chat-file"
+                                [chatFile]="file"
+                                [fileActions]="fileActions"
+                                (actionClick)="onFileAction($event, file)"
+                                (actionsToggle)="onActionPopupChange($event)"
+                                (actionButtonClick)="onActionButtonClick($event)"
+                            ></li>
+                        </ul>
+
+                        <div class="k-chat-download-button-wrapper" *ngIf="hasMultipleFiles && !message.isDeleted">
+                            <button
+                                kendoButton
+                                class="k-chat-download-button"
+                                fillMode="flat"
+                                icon="download"
+                                [svgIcon]="downloadIcon"
+                                [attr.title]="textFor('downloadAllFilesText')"
+                                (click)="onDownloadAll()"
+                            >{{ textFor('downloadAllFilesText') }}</button>
+                        </div>
+                    </div>
+
+                    <span
+                        class="k-bubble-expandable-indicator"
+                        *ngIf="isMessageExpandable && showExpandCollapseIcon"
+                        [attr.tabindex]="'0'"
+                        [attr.role]="'button'"
+                        [attr.title]="isMessageExpanded ? textFor('collapseTitle') : textFor('expandTitle')"
+                        (mousedown)="chatService.toggleMessageState = true"
+                        (click)="toggleMessageState($event)"
+                    >
+                        <kendo-icon-wrapper
+                            [name]="isMessageExpanded ? 'chevron-up' : 'chevron-down'"
+                            [svgIcon]="isMessageExpanded ? collapseIcon : expandIcon"
+                        >
+                        </kendo-icon-wrapper>
+                    </span>
+                </div>
             </ng-container>
-        </span>
 
-        <kendo-toolbar *ngIf="isToolbarVisible()" class="k-chat-message-toolbar" fillMode="flat">
+            <span class="k-message-status" *ngIf="message.status">
+                <ng-container *ngIf="statusTemplate?.templateRef">
+                    <ng-template
+                        [ngTemplateOutlet]="statusTemplate.templateRef"
+                        [ngTemplateOutletContext]="{ $implicit: message.status, message }"
+                    >
+                    </ng-template>
+                </ng-container>
+                <ng-container *ngIf="!statusTemplate?.templateRef">
+                    {{ message.status }}
+                </ng-container>
+            </span>
+        </ng-container>
+        <kendo-toolbar *ngIf="showToolbar" class="k-chat-message-toolbar" fillMode="flat">
             <kendo-toolbar-button
-                *ngFor="let action of chatService.messageToolbarActions"
+                *ngFor="let action of toolbarActions"
                 fillMode="flat"
                 [icon]="action.icon"
                 [svgIcon]="action.svgIcon"
@@ -3571,28 +4374,7 @@ class MessageComponent extends ChatItem {
             >
             </kendo-toolbar-button>
         </kendo-toolbar>
-
-        <ng-template #typing>
-            <div class="k-chat-bubble k-bubble">
-                <div class="k-typing-indicator">
-                <span></span>
-                <span></span>
-                <span></span>
-                </div>
-            </div>
-        </ng-template>
-
-        <kendo-contextmenu
-            *ngIf="!message.isDeleted"
-            [target]="element"
-            [items]="contextMenuActions"
-            (popupOpen)="handleMenuOpen()"
-            (popupClose)="handleMenuClose($event)"
-            (select)="onContextMenuAction($event.item.originalAction)"
-            [popupAlign]="{ horizontal: 'right', vertical: 'top' }"
-            [collision]="{ horizontal: 'flip', vertical: 'flip'}"
-        ></kendo-contextmenu>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i2.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: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }, { 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"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "rounded", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i2.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: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "rounded", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
@@ -3605,117 +4387,162 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         }
                     ],
                     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-chat-bubble k-bubble"
-                *ngIf="template"
-                [attr.tabindex]="0"
-                [ngClass]="{
-                    'k-selected': selected,
-                    'k-focus': selected,
-                    'k-active': active
-                }"
-            >
-                <div class="k-bubble-content">
-                    <ng-container
-                        *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"
-                    >
-                    </ng-container>
-                </div>
-            </div>
+        <ng-container *ngIf="useCustomBubbleTemplate">
+            <ng-container *ngTemplateOutlet="getActiveBubbleTemplate()?.templateRef; context: { $implicit: message };"></ng-container>
+        </ng-container>
 
-            <div
-                class="k-chat-bubble k-bubble"
-                *ngIf="!template && (message.text || message.files)"
-                [attr.tabindex]="0"
-                [ngClass]="{
-                    'k-bubble-expandable': chatService.allowMessageCollapse,
-                    'k-expanded': isMessageExpanded,
-                    'k-selected': selected,
-                    'k-focus': selected,
-                    'k-active': active
-                }"
+        <ng-container *ngIf="!useCustomBubbleTemplate">
+            <time
+                [attr.aria-hidden]="!selected"
+                class="k-message-time"
+                *ngIf="chatService.timestampVisibility === 'focus' && message.timestamp"
             >
-                <div class="k-bubble-content">
-                    <span class="k-chat-bubble-text" *ngIf="message.text || message.isDeleted">
-                        <div class="k-message-reference k-message-reference-receiver" *ngIf="message.replyToId && !message.isDeleted" (click)="onReplyReferenceClick($event, message.replyToId)">
-                            <chat-message-reference-content [message]="getMessageById(message.replyToId)"></chat-message-reference-content>
-                        </div>
-                        <ng-container *ngIf="message.isDeleted && isOwnMessage(message)">{{ textFor('deletedMessageSenderText') }}</ng-container>
-                        <ng-container *ngIf="message.isDeleted && !isOwnMessage(message)">{{ textFor('deletedMessageReceiverText') }}</ng-container>
-                        <ng-container *ngIf="!message.isDeleted && parts.length">
-                            <ng-container *ngFor="let part of parts">
-                                <ng-container *ngIf="part.type === 'text'">{{part.content}}</ng-container>
-                                <a *ngIf="part.type === 'link'" [href]="part.href" target="_blank">{{part.content}}</a>
-                            </ng-container>
-                        </ng-container>
-                    </span>
-                    <ul class="k-chat-file-wrapper" *ngIf="message.files && message.files.length > 0">
-                        <li
-                            *ngFor="let file of message.files"
-                            class="k-chat-file"
-                            [chatFile]="file"
-                            [fileActions]="fileActions"
-                            (actionClick)="onFileAction($event, file)"
-                            (actionsToggle)="onActionPopupChange($event)"
-                            (actionButtonClick)="onActionButtonClick($event)"
-                        ></li>
-                    </ul>
-                    <div class="k-chat-download-button-wrapper" *ngIf="message.files?.length > 1">
-                        <button
-                            kendoButton
-                            class="k-chat-download-button"
-                            fillMode="flat"
-                            icon="download"
-                            [svgIcon]="downloadIcon"
-                            (click)="onDownloadAll()"
-                        >{{ textFor('downloadAllFilesText') }}</button>
+                {{ formatTimeStamp(message.timestamp) }}
+            </time>
+
+            <ng-container *ngIf="message.typing">
+                <div class="k-chat-bubble k-bubble">
+                    <div class="k-typing-indicator" [attr.tabindex]="'-1'">
+                        <span></span>
+                        <span></span>
+                        <span></span>
                     </div>
                 </div>
-                <span
-                    class="k-bubble-expandable-indicator"
-                    *ngIf="chatService.allowMessageCollapse"
-                    [attr.role]="'button'"
-                    [attr.title]="isMessageExpanded ? textFor('collapseTitle') : textFor('expandTitle')"
-                    (mousedown)="chatService.toggleMessageState = true"
-                    (click)="toggleMessageState($event)"
+            </ng-container>
+
+            <ng-container *ngIf="!message.typing">
+                <div
+                    class="k-chat-bubble k-bubble"
+                    *ngIf="useCustomContentTemplate"
+                    [attr.tabindex]="0"
+                    [ngClass]="{
+                        'k-bubble-expandable': isMessageExpandable, 
+                        'k-expanded': isMessageExpanded,
+                        'k-selected': selected, 
+                        'k-focus': selected,
+                        'k-active': isActiveMessage
+                    }"
                 >
-                    <kendo-icon-wrapper
-                        [name]="isMessageExpanded ? 'chevron-up' : 'chevron-down'"
-                        [svgIcon]="isMessageExpanded ? collapseIcon : expandIcon"
+                    <div class="k-bubble-content">
+                        <ng-container *ngTemplateOutlet="getActiveContentTemplate()?.templateRef; context: { $implicit: message };"></ng-container>
+                    </div>
+                    <span
+                        class="k-bubble-expandable-indicator"
+                        *ngIf="isMessageExpandable && showExpandCollapseIcon"
+                        [attr.tabindex]="'0'"
+                        [attr.role]="'button'"
+                        [attr.title]="isMessageExpanded ? textFor('collapseTitle') : textFor('expandTitle')"
+                        (mousedown)="chatService.toggleMessageState = true"
+                        (click)="toggleMessageState($event)"
                     >
-                    </kendo-icon-wrapper>
-                </span>
-            </div>
-        </ng-container>
+                        <kendo-icon-wrapper
+                            [name]="isMessageExpanded ? 'chevron-up' : 'chevron-down'"
+                            [svgIcon]="isMessageExpanded ? collapseIcon : expandIcon"
+                        >
+                        </kendo-icon-wrapper>
+                    </span>
+                </div>
 
-        <span
-            class="k-message-status"
-            *ngIf="message.status"
-        >
-            <ng-container *ngIf="statusTemplate?.templateRef">
-                <ng-template
-                    [ngTemplateOutlet]="statusTemplate.templateRef"
-                    [ngTemplateOutletContext]="{ $implicit: message.status, message }"
+                <div
+                    class="k-chat-bubble k-bubble"
+                    *ngIf="!useCustomContentTemplate && hasMessageContent"
+                    [attr.tabindex]="0"
+                    [ngClass]="{
+                        'k-bubble-expandable': isMessageExpandable, 
+                        'k-expanded': isMessageExpanded, 
+                        'k-selected': selected, 
+                        'k-focus': selected,
+                        'k-active': isActiveMessage
+                    }"
                 >
-                </ng-template>
-            </ng-container>
-            <ng-container *ngIf="!statusTemplate?.templateRef">
-                {{ message.status }}
+                    <div class="k-bubble-content">
+                        <ng-container *ngIf="message.text || message.isDeleted">
+                            <div 
+                                class="k-message-reference k-message-reference-receiver" 
+                                *ngIf="message.replyToId && !message.isDeleted" 
+                                (click)="onReplyReferenceClick($event, message.replyToId)"
+                            >
+                                <chat-message-reference-content [message]="getMessageById(message.replyToId)"></chat-message-reference-content>
+                            </div>
+
+                            <span class="k-chat-bubble-text" *ngIf="message.isDeleted">
+                                {{ getDeletedMessageText() }}
+                            </span>
+
+                            <span class="k-chat-bubble-text" *ngIf="!message.isDeleted && parts.length > 0">
+                                <ng-container *ngFor="let part of parts">
+                                    <ng-container *ngIf="part.type === 'text'">{{part.content}}</ng-container>
+                                    <a *ngIf="part.type === 'link'" [href]="part.href" target="_blank">{{part.content}}</a>
+                                </ng-container>
+                            </span>
+                        </ng-container>
+
+                        <ul 
+                            class="k-chat-file-wrapper" 
+                            *ngIf="hasFiles && !message.isDeleted" 
+                            [ngClass]="{
+                                'k-chat-files-wrap': chatService.messageFilesLayout === 'wrap', 
+                                'k-chat-files-horizontal': chatService.messageFilesLayout === 'horizontal'
+                            }"
+                        >
+                            <li
+                                *ngFor="let file of message.files"
+                                class="k-chat-file"
+                                [chatFile]="file"
+                                [fileActions]="fileActions"
+                                (actionClick)="onFileAction($event, file)"
+                                (actionsToggle)="onActionPopupChange($event)"
+                                (actionButtonClick)="onActionButtonClick($event)"
+                            ></li>
+                        </ul>
+
+                        <div class="k-chat-download-button-wrapper" *ngIf="hasMultipleFiles && !message.isDeleted">
+                            <button
+                                kendoButton
+                                class="k-chat-download-button"
+                                fillMode="flat"
+                                icon="download"
+                                [svgIcon]="downloadIcon"
+                                [attr.title]="textFor('downloadAllFilesText')"
+                                (click)="onDownloadAll()"
+                            >{{ textFor('downloadAllFilesText') }}</button>
+                        </div>
+                    </div>
+
+                    <span
+                        class="k-bubble-expandable-indicator"
+                        *ngIf="isMessageExpandable && showExpandCollapseIcon"
+                        [attr.tabindex]="'0'"
+                        [attr.role]="'button'"
+                        [attr.title]="isMessageExpanded ? textFor('collapseTitle') : textFor('expandTitle')"
+                        (mousedown)="chatService.toggleMessageState = true"
+                        (click)="toggleMessageState($event)"
+                    >
+                        <kendo-icon-wrapper
+                            [name]="isMessageExpanded ? 'chevron-up' : 'chevron-down'"
+                            [svgIcon]="isMessageExpanded ? collapseIcon : expandIcon"
+                        >
+                        </kendo-icon-wrapper>
+                    </span>
+                </div>
             </ng-container>
-        </span>
 
-        <kendo-toolbar *ngIf="isToolbarVisible()" class="k-chat-message-toolbar" fillMode="flat">
+            <span class="k-message-status" *ngIf="message.status">
+                <ng-container *ngIf="statusTemplate?.templateRef">
+                    <ng-template
+                        [ngTemplateOutlet]="statusTemplate.templateRef"
+                        [ngTemplateOutletContext]="{ $implicit: message.status, message }"
+                    >
+                    </ng-template>
+                </ng-container>
+                <ng-container *ngIf="!statusTemplate?.templateRef">
+                    {{ message.status }}
+                </ng-container>
+            </span>
+        </ng-container>
+        <kendo-toolbar *ngIf="showToolbar" class="k-chat-message-toolbar" fillMode="flat">
             <kendo-toolbar-button
-                *ngFor="let action of chatService.messageToolbarActions"
+                *ngFor="let action of toolbarActions"
                 fillMode="flat"
                 [icon]="action.icon"
                 [svgIcon]="action.svgIcon"
@@ -3725,36 +4552,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             >
             </kendo-toolbar-button>
         </kendo-toolbar>
-
-        <ng-template #typing>
-            <div class="k-chat-bubble k-bubble">
-                <div class="k-typing-indicator">
-                <span></span>
-                <span></span>
-                <span></span>
-                </div>
-            </div>
-        </ng-template>
-
-        <kendo-contextmenu
-            *ngIf="!message.isDeleted"
-            [target]="element"
-            [items]="contextMenuActions"
-            (popupOpen)="handleMenuOpen()"
-            (popupClose)="handleMenuClose($event)"
-            (select)="onContextMenuAction($event.item.originalAction)"
-            [popupAlign]="{ horizontal: 'right', vertical: 'top' }"
-            [collision]="{ horizontal: 'flip', vertical: 'flip'}"
-        ></kendo-contextmenu>
     `,
                     standalone: true,
-                    imports: [NgIf, NgClass, NgFor, NgTemplateOutlet, IconWrapperComponent, KENDO_BUTTONS, ChatFileComponent, ContextMenuComponent, ToolBarComponent, ToolBarButtonComponent, MessageReferenceComponent],
+                    imports: [NgIf, NgClass, NgFor, NgTemplateOutlet, IconWrapperComponent, KENDO_BUTTONS, ChatFileComponent, ToolBarComponent, ToolBarButtonComponent, MessageReferenceComponent],
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.IntlService }, { type: ChatService }, { type: i1.LocalizationService }], propDecorators: { message: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.IntlService }, { type: ChatService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { message: [{
                 type: Input
             }], tabbable: [{
                 type: Input
-            }], template: [{
+            }], authorMessageContentTemplate: [{
+                type: Input
+            }], receiverMessageContentTemplate: [{
+                type: Input
+            }], messageContentTemplate: [{
+                type: Input
+            }], authorMessageTemplate: [{
+                type: Input
+            }], receiverMessageTemplate: [{
+                type: Input
+            }], messageTemplate: [{
                 type: Input
             }], statusTemplate: [{
                 type: Input
@@ -3762,8 +4578,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], authorId: [{
                 type: Input
-            }], contextMenuVisibilityChange: [{
-                type: Output
             }], cssClass: [{
                 type: HostBinding,
                 args: ['class.k-message']
@@ -3776,9 +4590,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabIndex']
-            }], onContextMenu: [{
-                type: HostListener,
-                args: ['contextmenu', ['$event']]
             }] } });
 
 /**
@@ -3894,10 +4705,10 @@ class MessageAttachmentsComponent extends ChatItem {
     scrollSubscription;
     direction;
     get showLeftArrow() {
-        return this.carousel && this.direction === 'rtl' ? this.scrollPosition > -1 : this.scrollPosition > 0;
+        return this.carousel && (this.direction === 'rtl' ? this.scrollPosition > -1 : this.scrollPosition > 0);
     }
     get showRightArrow() {
-        return this.carousel && this.direction === 'rtl' ? this.scrollPosition < 0 : this.scrollPosition < 1;
+        return this.carousel && (this.direction === 'rtl' ? this.scrollPosition < 0 : this.scrollPosition < 1);
     }
     carouselKeyHandlers = {
         [Keys.ArrowLeft]: (e) => this.navigateTo(e, this.direction === 'rtl' ? 1 : -1),
@@ -4100,6 +4911,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['item', { read: ElementRef }]
             }] } });
 
+/**
+ * Defines a template for displaying user status in the Chat.
+ *
+ * To define a user status template, nest an `<ng-template>` tag with the `kendoChatUserStatusTemplate` directive inside the `<kendo-chat>` component.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatUserStatusTemplate let-status>
+ *     <div>{{ status }}</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+class ChatUserStatusTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatUserStatusTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: ChatUserStatusTemplateDirective, isStandalone: true, selector: "[kendoChatUserStatusTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatUserStatusTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChatUserStatusTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }] });
+
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
@@ -4120,9 +4964,15 @@ class MessageListComponent {
         return this._messages;
     }
     attachmentTemplate;
+    authorMessageContentTemplate;
+    receiverMessageContentTemplate;
+    messageContentTemplate;
+    authorMessageTemplate;
+    receiverMessageTemplate;
     messageTemplate;
     timestampTemplate;
     statusTemplate;
+    userStatusTemplate;
     localization;
     authorId;
     executeAction = new EventEmitter();
@@ -4140,6 +4990,7 @@ class MessageListComponent {
         [Keys.ArrowUp]: (e) => this.navigateTo(e, -1),
         [Keys.ArrowDown]: (e) => this.navigateTo(e, 1),
         [Keys.Tab]: (e) => this.onTabKeyDown(e),
+        [Keys.F10]: (e) => e.shiftKey && this.openContextMenu(e),
     };
     constructor(element, intl, renderer, chatService, cdr) {
         this.element = element;
@@ -4152,9 +5003,25 @@ class MessageListComponent {
         const elRef = this.element.nativeElement;
         this.subs.add(this.renderer.listen(elRef, 'keydown', event => this.onKeydown(event)));
         this.subs.add(this.renderer.listen(elRef, 'focusout', event => this.onBlur(event)));
+        this.subs.add(this.renderer.listen(elRef, 'click', event => {
+            const messageComponent = this.findMessageComponentFromEvent(event);
+            if (messageComponent) {
+                this.select(messageComponent, event);
+            }
+        }));
+        this.subs.add(this.renderer.listen(elRef, 'contextmenu', event => {
+            event.preventDefault();
+            const messageComponent = this.findMessageComponentFromEvent(event);
+            if (messageComponent) {
+                this.onContextMenuClick(messageComponent.message, event, messageComponent);
+            }
+        }));
         this.subs.add(this.chatService.replyReferenceClick$.subscribe((messageId) => {
             this.scrollToAndSelectMessage(messageId);
         }));
+        this.subs.add(this.chatService.contextMenuVisibilityChange$.subscribe((isVisible) => {
+            this.handleMenuClose(isVisible);
+        }));
     }
     ngAfterViewInit() {
         this.selectedItem = this.items.last;
@@ -4168,9 +5035,45 @@ class MessageListComponent {
     onClick(message, event) {
         this.select(message, event);
     }
+    showGroupAuthor(group) {
+        const messageSettings = this.isOwnMessage(group.messages[0]) ? this.chatService.authorMessageSettings : this.chatService.receiverMessageSettings;
+        if (isPresent(messageSettings?.showUsername)) {
+            return messageSettings.showUsername && group.author.name;
+        }
+        return this.chatService.showUsername && group.author.name;
+    }
+    showGroupAvatar(group) {
+        const messageSettings = this.isOwnMessage(group.messages[0]) ? this.chatService.authorMessageSettings : this.chatService.receiverMessageSettings;
+        if (isPresent(messageSettings?.showAvatar)) {
+            return messageSettings.showAvatar && group.author.avatarUrl;
+        }
+        return this.chatService.showAvatar && group.author.avatarUrl;
+    }
+    onContextMenuClick(message, event, messageElement) {
+        this.chatService.calculateContextMenuActions(this.isOwnMessage(message));
+        if (this.chatService.calculatedContextMenuActions.length > 0) {
+            this.chatService.messagesContextMenu.show({
+                left: event.pageX,
+                top: event.pageY,
+            });
+            this.chatService.activeMessageElement = messageElement;
+            this.chatService.activeMessage = message;
+            this.chatService.active = true;
+            this.chatService.selectOnMenuClose = this.chatService.activeMessageElement?.selected;
+            this.chatService.emit('contextMenuVisibilityChange', true);
+        }
+    }
     formatTimeStamp(date) {
         return this.intl.formatDate(date, { date: 'full' });
     }
+    calculateMessageWidthMode(message) {
+        const isOwn = this.isOwnMessage(message);
+        const messageSettings = isOwn ? this.chatService.authorMessageSettings : this.chatService.receiverMessageSettings;
+        if (messageSettings?.messageWidthMode) {
+            return messageSettings.messageWidthMode === 'full';
+        }
+        return this.chatService.messageWidthMode === 'full';
+    }
     onKeydown(e) {
         // On some keyboards Numpad keys are used for Home/End/PageUp/PageDown.
         const code = normalizeNumpadKeys(e);
@@ -4230,6 +5133,9 @@ class MessageListComponent {
             this.select(null);
         }
     }
+    textFor(key) {
+        return this.localization.get(key);
+    }
     onHomeOrEndKeyDown(key) {
         const items = this.items.toArray();
         if (key === 'home') {
@@ -4276,11 +5182,49 @@ class MessageListComponent {
             this.select(chatItem);
         }
     }
-    textFor(key) {
-        return this.localization.get(key);
+    openContextMenu(event) {
+        event.preventDefault();
+        const messageComponent = this.findMessageComponentFromActiveElement();
+        if (messageComponent) {
+            const messageContentElement = messageComponent.element.nativeElement.querySelector('.k-chat-bubble');
+            if (messageContentElement) {
+                const rect = messageContentElement?.getBoundingClientRect();
+                this.onContextMenuClick(messageComponent.message, {
+                    pageX: rect.left + (rect.width / 2) + window.scrollX,
+                    pageY: rect.top + (rect.height / 2) + window.scrollY
+                }, messageComponent);
+            }
+            else {
+                const messageElement = messageComponent.element.nativeElement;
+                const rect = messageElement?.getBoundingClientRect();
+                this.onContextMenuClick(messageComponent.message, {
+                    pageX: rect.left + (rect.width / 2) + window.scrollX,
+                    pageY: rect.top + (rect.height / 2) + window.scrollY
+                }, messageComponent);
+            }
+        }
+    }
+    findMessageComponentFromActiveElement() {
+        const activeElement = document.activeElement;
+        const messageComponents = this.items.filter(item => item instanceof MessageComponent);
+        return messageComponents.find(component => {
+            const componentElement = component.element?.nativeElement;
+            return componentElement && (componentElement === activeElement || componentElement.contains(activeElement));
+        });
+    }
+    findMessageComponentFromEvent(event) {
+        const target = event.target;
+        const clickedElement = target?.closest('.k-message');
+        if (!clickedElement)
+            return undefined;
+        const messageComponents = this.items.filter(item => item instanceof MessageComponent);
+        return messageComponents.find(component => {
+            const componentElement = component.element?.nativeElement;
+            return componentElement && (componentElement === clickedElement || componentElement.contains(clickedElement));
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageListComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.IntlService }, { token: i0.Renderer2 }, { token: ChatService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MessageListComponent, isStandalone: true, selector: "kendo-chat-message-list", inputs: { messages: "messages", attachmentTemplate: "attachmentTemplate", messageTemplate: "messageTemplate", timestampTemplate: "timestampTemplate", statusTemplate: "statusTemplate", localization: "localization", authorId: "authorId" }, outputs: { executeAction: "executeAction", navigate: "navigate", resize: "resize" }, host: { properties: { "class.k-message-list-content": "this.cssClass" } }, viewQueries: [{ propertyName: "items", predicate: ChatItem, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MessageListComponent, isStandalone: true, selector: "kendo-chat-message-list", inputs: { messages: "messages", attachmentTemplate: "attachmentTemplate", authorMessageContentTemplate: "authorMessageContentTemplate", receiverMessageContentTemplate: "receiverMessageContentTemplate", messageContentTemplate: "messageContentTemplate", authorMessageTemplate: "authorMessageTemplate", receiverMessageTemplate: "receiverMessageTemplate", messageTemplate: "messageTemplate", timestampTemplate: "timestampTemplate", statusTemplate: "statusTemplate", userStatusTemplate: "userStatusTemplate", localization: "localization", authorId: "authorId" }, outputs: { executeAction: "executeAction", navigate: "navigate", resize: "resize" }, host: { properties: { "class.k-message-list-content": "this.cssClass" } }, viewQueries: [{ propertyName: "items", predicate: ChatItem, descendants: true }], ngImport: i0, template: `
         <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">
             <ng-container [ngSwitch]="group.type">
                 <div
@@ -4300,11 +5244,11 @@ class MessageListComponent {
                     class="k-message-group"
                     [class.k-message-group-sender]="isOwnMessage(group.messages[0])"
                     [class.k-message-group-receiver]="!isOwnMessage(group.messages[0])"
-                    [class.k-no-avatar]="!group.author.avatarUrl"
-                    [class.k-message-group-full-width]="chatService.messageWidthMode === 'full'"
+                    [class.k-no-avatar]="!showGroupAvatar(group)"
+                    [class.k-message-group-full-width]="calculateMessageWidthMode(group.messages[0])"
                 >
                     <div
-                        *ngIf="group.author.avatarUrl"
+                        *ngIf="!userStatusTemplate?.templateRef && showGroupAvatar(group)"
                         class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
                     >
                         <span class="k-avatar-image">
@@ -4314,29 +5258,41 @@ class MessageListComponent {
                             />
                         </span>
                     </div>
+                    <div class="k-chat-user-status-wrapper" *ngIf="userStatusTemplate?.templateRef && showGroupAvatar(group)">
+                        <div
+                            class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
+                        >
+                            <span class="k-avatar-image">
+                                <img
+                                    [attr.src]="group.author.avatarUrl"
+                                    [alt]="group.author.avatarAltText"
+                                />
+                            </span>
+                        </div>
+                        <div class="k-chat-user-status" *ngIf="userStatusTemplate?.templateRef">
+                            <ng-template
+                                [ngTemplateOutlet]="userStatusTemplate.templateRef"
+                                [ngTemplateOutletContext]="{ $implicit: group.messages.at(-1) }"
+                            >
+                            </ng-template>
+                        </div>
+                    </div>
                     <div class="k-message-group-content">
-                        <p *ngIf="group.author.name" class="k-message-author">{{ group.author.name }}</p>
+                        <p *ngIf="showGroupAuthor(group)" class="k-message-author">{{ group.author.name }}</p>
                         <ng-container
                             *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
                         >
-                            <div
-                                *ngIf="msg.user?.avatarUrl"
-                                class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
-                            >
-                                <span class="k-avatar-image">
-                                    <img [src]="msg.user?.avatarUrl">
-                                </span>
-                            </div>
                             <kendo-chat-message #message
                                 [message]="msg"
                                 [tabbable]="lastGroup && lastMessage"
-                                [template]="messageTemplate"
+                                [authorMessageContentTemplate]="authorMessageContentTemplate"
+                                [receiverMessageContentTemplate]="receiverMessageContentTemplate"
+                                [messageContentTemplate]="messageContentTemplate"
+                                [authorMessageTemplate]="authorMessageTemplate"
+                                [receiverMessageTemplate]="receiverMessageTemplate"
+                                [messageTemplate]="messageTemplate"
                                 [statusTemplate]="statusTemplate"
                                 [authorId]="authorId"
-                                (click)="onClick(message, $event)"
-                                (contextMenuVisibilityChange)="handleMenuClose($event)"
-                                [class.k-first]="group.messages.length > 1 && firstMessage"
-                                [class.k-last]="group.messages.length > 1 && lastMessage"
                             >
                             </kendo-chat-message>
 
@@ -4365,6 +5321,7 @@ class MessageListComponent {
                 <kendo-chat-suggested-actions #actions
                     *ngSwitchCase="'action-group'"
                     [actions]="group.actions"
+                    type="action"
                     [tabbable]="lastGroup"
                     (dispatchAction)="dispatchAction($event, last(view))"
                     (click)="select(actions, $event)"
@@ -4375,7 +5332,7 @@ class MessageListComponent {
         </ng-container>
         <kendo-resize-sensor (resize)="onResize()">
         </kendo-resize-sensor>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MessageComponent, selector: "kendo-chat-message", inputs: ["message", "tabbable", "template", "statusTemplate", "showMessageTime", "authorId"], outputs: ["contextMenuVisibilityChange"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }, { kind: "component", type: MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: ["attachments", "layout", "tabbable", "template", "localization"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "suggestions", "tabbable", "suggestionTemplate"], outputs: ["dispatchAction", "dispatchSuggestion"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MessageComponent, selector: "kendo-chat-message", inputs: ["message", "tabbable", "authorMessageContentTemplate", "receiverMessageContentTemplate", "messageContentTemplate", "authorMessageTemplate", "receiverMessageTemplate", "messageTemplate", "statusTemplate", "showMessageTime", "authorId"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }, { kind: "component", type: MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: ["attachments", "layout", "tabbable", "template", "localization"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "suggestions", "tabbable", "type", "suggestionTemplate"], outputs: ["dispatchAction", "dispatchSuggestion"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
@@ -4401,11 +5358,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     class="k-message-group"
                     [class.k-message-group-sender]="isOwnMessage(group.messages[0])"
                     [class.k-message-group-receiver]="!isOwnMessage(group.messages[0])"
-                    [class.k-no-avatar]="!group.author.avatarUrl"
-                    [class.k-message-group-full-width]="chatService.messageWidthMode === 'full'"
+                    [class.k-no-avatar]="!showGroupAvatar(group)"
+                    [class.k-message-group-full-width]="calculateMessageWidthMode(group.messages[0])"
                 >
                     <div
-                        *ngIf="group.author.avatarUrl"
+                        *ngIf="!userStatusTemplate?.templateRef && showGroupAvatar(group)"
                         class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
                     >
                         <span class="k-avatar-image">
@@ -4415,29 +5372,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             />
                         </span>
                     </div>
+                    <div class="k-chat-user-status-wrapper" *ngIf="userStatusTemplate?.templateRef && showGroupAvatar(group)">
+                        <div
+                            class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
+                        >
+                            <span class="k-avatar-image">
+                                <img
+                                    [attr.src]="group.author.avatarUrl"
+                                    [alt]="group.author.avatarAltText"
+                                />
+                            </span>
+                        </div>
+                        <div class="k-chat-user-status" *ngIf="userStatusTemplate?.templateRef">
+                            <ng-template
+                                [ngTemplateOutlet]="userStatusTemplate.templateRef"
+                                [ngTemplateOutletContext]="{ $implicit: group.messages.at(-1) }"
+                            >
+                            </ng-template>
+                        </div>
+                    </div>
                     <div class="k-message-group-content">
-                        <p *ngIf="group.author.name" class="k-message-author">{{ group.author.name }}</p>
+                        <p *ngIf="showGroupAuthor(group)" class="k-message-author">{{ group.author.name }}</p>
                         <ng-container
                             *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
                         >
-                            <div
-                                *ngIf="msg.user?.avatarUrl"
-                                class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
-                            >
-                                <span class="k-avatar-image">
-                                    <img [src]="msg.user?.avatarUrl">
-                                </span>
-                            </div>
                             <kendo-chat-message #message
                                 [message]="msg"
                                 [tabbable]="lastGroup && lastMessage"
-                                [template]="messageTemplate"
+                                [authorMessageContentTemplate]="authorMessageContentTemplate"
+                                [receiverMessageContentTemplate]="receiverMessageContentTemplate"
+                                [messageContentTemplate]="messageContentTemplate"
+                                [authorMessageTemplate]="authorMessageTemplate"
+                                [receiverMessageTemplate]="receiverMessageTemplate"
+                                [messageTemplate]="messageTemplate"
                                 [statusTemplate]="statusTemplate"
                                 [authorId]="authorId"
-                                (click)="onClick(message, $event)"
-                                (contextMenuVisibilityChange)="handleMenuClose($event)"
-                                [class.k-first]="group.messages.length > 1 && firstMessage"
-                                [class.k-last]="group.messages.length > 1 && lastMessage"
                             >
                             </kendo-chat-message>
 
@@ -4466,6 +5435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 <kendo-chat-suggested-actions #actions
                     *ngSwitchCase="'action-group'"
                     [actions]="group.actions"
+                    type="action"
                     [tabbable]="lastGroup"
                     (dispatchAction)="dispatchAction($event, last(view))"
                     (click)="select(actions, $event)"
@@ -4484,12 +5454,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], attachmentTemplate: [{
                 type: Input
+            }], authorMessageContentTemplate: [{
+                type: Input
+            }], receiverMessageContentTemplate: [{
+                type: Input
+            }], messageContentTemplate: [{
+                type: Input
+            }], authorMessageTemplate: [{
+                type: Input
+            }], receiverMessageTemplate: [{
+                type: Input
             }], messageTemplate: [{
                 type: Input
             }], timestampTemplate: [{
                 type: Input
             }], statusTemplate: [{
                 type: Input
+            }], userStatusTemplate: [{
+                type: Input
             }], localization: [{
                 type: Input
             }], authorId: [{
@@ -4652,8 +5634,16 @@ let Messages$1 = class Messages extends ComponentMessages {
      * Sets the title of the DropDownButton that opens the File actions.
      */
     fileActionsTitle;
+    /**
+     * Sets the title of the button that shows the **Scroll right** when the suggestions list is scrollable with buttons.
+     */
+    nextSuggestionsButtonTitle;
+    /**
+     * Sets the title of the button that shows the **Scroll left** when the suggestions list is scrollable with buttons.
+     */
+    previousSuggestionsButtonTitle;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: Messages, selector: "kendoConversationalUIMessages", inputs: { deletedMessageSenderText: "deletedMessageSenderText", deletedMessageReceiverText: "deletedMessageReceiverText", downloadAllFilesText: "downloadAllFilesText", messagePlaceholder: "messagePlaceholder", send: "send", messageListLabel: "messageListLabel", messageBoxInputLabel: "messageBoxInputLabel", messageAttachmentLeftArrow: "messageAttachmentLeftArrow", messageAttachmentRightArrow: "messageAttachmentRightArrow", speechToTextButtonTitle: "speechToTextButtonTitle", fileSelectButtonTitle: "fileSelectButtonTitle", removeReplyTitle: "removeReplyTitle", removeFileTitle: "removeFileTitle", expandTitle: "expandTitle", collapseTitle: "collapseTitle", fileActionsTitle: "fileActionsTitle" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: Messages, selector: "kendoConversationalUIMessages", inputs: { deletedMessageSenderText: "deletedMessageSenderText", deletedMessageReceiverText: "deletedMessageReceiverText", downloadAllFilesText: "downloadAllFilesText", messagePlaceholder: "messagePlaceholder", send: "send", messageListLabel: "messageListLabel", messageBoxInputLabel: "messageBoxInputLabel", messageAttachmentLeftArrow: "messageAttachmentLeftArrow", messageAttachmentRightArrow: "messageAttachmentRightArrow", speechToTextButtonTitle: "speechToTextButtonTitle", fileSelectButtonTitle: "fileSelectButtonTitle", removeReplyTitle: "removeReplyTitle", removeFileTitle: "removeFileTitle", expandTitle: "expandTitle", collapseTitle: "collapseTitle", fileActionsTitle: "fileActionsTitle", nextSuggestionsButtonTitle: "nextSuggestionsButtonTitle", previousSuggestionsButtonTitle: "previousSuggestionsButtonTitle" }, usesInheritance: true, ngImport: i0 });
 };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: Messages$1, decorators: [{
             type: Directive,
@@ -4693,6 +5683,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], fileActionsTitle: [{
                 type: Input
+            }], nextSuggestionsButtonTitle: [{
+                type: Input
+            }], previousSuggestionsButtonTitle: [{
+                type: Input
             }] } });
 
 // eslint-disable no-forward-ref
@@ -4755,6 +5749,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }] });
 
+/**
+ * Defines a template for displaying custom content when there are no messages in the Chat.
+ *
+ * To define an empty Chat template, nest an `<ng-template>` tag with the `kendoChatNoDataTemplate` directive inside the `<kendo-chat>` component.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatNoDataTemplate>
+ *     <div>No messages.</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+class NoDataTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoDataTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: NoDataTemplateDirective, isStandalone: true, selector: "[kendoChatNoDataTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NoDataTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoChatNoDataTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }] });
+
 /**
  * Represents the [Kendo UI Chat component for Angular](slug:overview_convui).
  *
@@ -4772,7 +5799,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * ```
  *
  * @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}.
  */
 class ChatComponent {
     localization;
@@ -4781,13 +5808,13 @@ 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 structures.
+     * 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;
     /**
@@ -4815,13 +5842,32 @@ 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 the author's avatar for the message group.
+     *
+     * @default true
+     */
+    showUsername = true;
+    /**
+     * Controls the visibility of the author's username for the message group.
+     *
+     * @default true
+     */
+    showAvatar = true;
     /**
      * Enables the expand or collapse functionality for messages.
+     *
      * @default false
      */
     allowMessageCollapse = false;
@@ -4838,24 +5884,34 @@ 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`.
      */
@@ -4866,11 +5922,13 @@ 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`.
      *
@@ -4883,17 +5941,40 @@ 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 visibility of the message toolbar.
+     * Sets the layout of the suggestions above the message input box.
      *
-     * @default 'hidden'
+     * @default 'scroll'
      */
-    messageToolbarVisibility = 'hidden';
+    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 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 []
+     */
+    suggestions = [];
     /**
      * Sets the send button settings for the Chat component.
      * Allows customization of the send button appearance, icons and disabled state.
@@ -4912,53 +5993,53 @@ 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() {
@@ -4967,13 +6048,23 @@ 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
@@ -4981,17 +6072,30 @@ 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
      */
@@ -5019,6 +6123,9 @@ 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;
@@ -5036,6 +6143,9 @@ 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;
@@ -5043,7 +6153,8 @@ 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) => {
@@ -5084,6 +6195,9 @@ class ChatComponent {
         this.updateChatServiceProperties([
             'authorId',
             'messageWidthMode',
+            'timestampVisibility',
+            'showUsername',
+            'showAvatar',
             'allowMessageCollapse',
             'enableSpeechToText',
             'sendButtonSettings',
@@ -5091,7 +6205,8 @@ class ChatComponent {
             'messageToolbarActions',
             'messageContextMenuActions',
             'fileActions',
-            'messageToolbarVisibility'
+            'authorMessageSettings',
+            'receiverMessageSettings'
         ], changes);
     }
     /**
@@ -5140,6 +6255,43 @@ 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);
     }
@@ -5163,14 +6315,15 @@ 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: 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."
@@ -5219,10 +6372,16 @@ 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()">
@@ -5238,7 +6397,7 @@ class ChatComponent {
         </div>
         <div
             #messageList
-            class="k-message-list k-avatars"
+            class="k-message-list"
             aria-live="polite"
             role="log"
             kendoChatScrollAnchor
@@ -5246,19 +6405,32 @@ 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
@@ -5276,7 +6448,16 @@ class ChatComponent {
             (fileRemove)="fileRemove.emit($event)"
         >
         </kendo-message-box>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$1, 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: i2.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$1, 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: i2.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,
@@ -5284,6 +6465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     providers: [
                         LocalizationService,
                         ChatService,
+                        SuggestionsScrollService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.chat'
@@ -5339,10 +6521,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()">
@@ -5358,7 +6546,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
@@ -5366,19 +6554,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
@@ -5396,9 +6597,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$1, ScrollAnchorDirective, MessageListComponent, MessageBoxComponent, MessageReferenceComponent, AppBarComponent, NgTemplateOutlet, NgIf, IconWrapperComponent, KENDO_BUTTON]
+                    imports: [LocalizedMessagesDirective$1, 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: ChatService }], propDecorators: { messages: [{
                 type: Input
@@ -5414,6 +6624,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: [{
@@ -5424,13 +6640,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
@@ -5464,12 +6688,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]
@@ -5485,6 +6730,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']
@@ -6724,13 +7972,20 @@ const KENDO_CHAT = [
     ChatComponent,
     CustomMessagesComponent,
     AttachmentTemplateDirective,
+    AuthorMessageContentTemplateDirective,
+    ReceiverMessageContentTemplateDirective,
+    MessageContentTemplateDirective,
+    AuthorMessageTemplateDirective,
+    ReceiverMessageTemplateDirective,
     MessageTemplateDirective,
     HeroCardComponent,
     ChatMessageBoxTemplateDirective,
     ChatHeaderTemplateDirective,
+    NoDataTemplateDirective,
     ChatTimestampTemplateDirective,
     ChatStatusTemplateDirective,
-    ChatSuggestionTemplateDirective
+    ChatSuggestionTemplateDirective,
+    ChatUserStatusTemplateDirective
 ];
 /**
  * Utility array that contains all InlineAIPrompt related components and directives.
@@ -6837,7 +8092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 class ChatModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, imports: [ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective, ChatHeaderTemplateDirective, ChatTimestampTemplateDirective, ChatStatusTemplateDirective, ChatSuggestionTemplateDirective], exports: [ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective, ChatHeaderTemplateDirective, ChatTimestampTemplateDirective, ChatStatusTemplateDirective, ChatSuggestionTemplateDirective] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, imports: [ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, AuthorMessageContentTemplateDirective, ReceiverMessageContentTemplateDirective, MessageContentTemplateDirective, AuthorMessageTemplateDirective, ReceiverMessageTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective, ChatHeaderTemplateDirective, NoDataTemplateDirective, ChatTimestampTemplateDirective, ChatStatusTemplateDirective, ChatSuggestionTemplateDirective, ChatUserStatusTemplateDirective], exports: [ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, AuthorMessageContentTemplateDirective, ReceiverMessageContentTemplateDirective, MessageContentTemplateDirective, AuthorMessageTemplateDirective, ReceiverMessageTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective, ChatHeaderTemplateDirective, NoDataTemplateDirective, ChatTimestampTemplateDirective, ChatStatusTemplateDirective, ChatSuggestionTemplateDirective, ChatUserStatusTemplateDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, providers: [IconsService, ResizeBatchService], imports: [ChatComponent, HeroCardComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatModule, decorators: [{
@@ -6870,7 +8125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  */
 class ConversationalUIModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConversationalUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ConversationalUIModule, imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective, ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective, ChatHeaderTemplateDirective, ChatTimestampTemplateDirective, ChatStatusTemplateDirective, ChatSuggestionTemplateDirective, InlineAIPromptComponent, InlineAIPromptOutputTemplateDirective, InlineAIPromptCustomMessagesComponent], exports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective, ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective, ChatHeaderTemplateDirective, ChatTimestampTemplateDirective, ChatStatusTemplateDirective, ChatSuggestionTemplateDirective, InlineAIPromptComponent, InlineAIPromptOutputTemplateDirective, InlineAIPromptCustomMessagesComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ConversationalUIModule, imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective, ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, AuthorMessageContentTemplateDirective, ReceiverMessageContentTemplateDirective, MessageContentTemplateDirective, AuthorMessageTemplateDirective, ReceiverMessageTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective, ChatHeaderTemplateDirective, NoDataTemplateDirective, ChatTimestampTemplateDirective, ChatStatusTemplateDirective, ChatSuggestionTemplateDirective, ChatUserStatusTemplateDirective, InlineAIPromptComponent, InlineAIPromptOutputTemplateDirective, InlineAIPromptCustomMessagesComponent], exports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective, ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, AuthorMessageContentTemplateDirective, ReceiverMessageContentTemplateDirective, MessageContentTemplateDirective, AuthorMessageTemplateDirective, ReceiverMessageTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective, ChatHeaderTemplateDirective, NoDataTemplateDirective, ChatTimestampTemplateDirective, ChatStatusTemplateDirective, ChatSuggestionTemplateDirective, ChatUserStatusTemplateDirective, InlineAIPromptComponent, InlineAIPromptOutputTemplateDirective, InlineAIPromptCustomMessagesComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConversationalUIModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, ChatComponent, HeroCardComponent, InlineAIPromptComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ConversationalUIModule, decorators: [{
@@ -7058,5 +8313,5 @@ class InlineAIPromptSettings {
  * Generated bundle index. Do not edit.
  */
 
-export { AIPromptComponent, AIPromptCustomMessagesComponent, AIPromptModule, AIPromptOutputBodyTemplateDirective, AIPromptOutputTemplateDirective, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, AttachmentTemplateDirective, ChatComponent, ChatHeaderTemplateDirective, ChatMessageBoxTemplateDirective, ChatModule, ChatStatusTemplateDirective, ChatSuggestionTemplateDirective, ChatTimestampTemplateDirective, CommandViewComponent, ConversationalUIModule, CustomMessagesComponent, CustomViewComponent, ExecuteActionEvent, HeroCardComponent, InlineAIPromptComponent, InlineAIPromptCustomMessagesComponent, InlineAIPromptModule, InlineAIPromptOutputTemplateDirective, InlineAIPromptService, InlineAIPromptSettings, KENDO_AIPROMPT, KENDO_CHAT, KENDO_CONVERSATIONALUI, KENDO_INLINEAIPROMPT, MessageTemplateDirective, OutputViewComponent, PromptViewComponent, SendMessageEvent };
+export { AIPromptComponent, AIPromptCustomMessagesComponent, AIPromptModule, AIPromptOutputBodyTemplateDirective, AIPromptOutputTemplateDirective, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, AttachmentTemplateDirective, AuthorMessageContentTemplateDirective, AuthorMessageTemplateDirective, ChatComponent, ChatHeaderTemplateDirective, ChatMessageBoxTemplateDirective, ChatModule, ChatStatusTemplateDirective, ChatSuggestionTemplateDirective, ChatTimestampTemplateDirective, ChatUserStatusTemplateDirective, CommandViewComponent, ConversationalUIModule, CustomMessagesComponent, CustomViewComponent, ExecuteActionEvent, HeroCardComponent, InlineAIPromptComponent, InlineAIPromptCustomMessagesComponent, InlineAIPromptModule, InlineAIPromptOutputTemplateDirective, InlineAIPromptService, InlineAIPromptSettings, KENDO_AIPROMPT, KENDO_CHAT, KENDO_CONVERSATIONALUI, KENDO_INLINEAIPROMPT, MessageContentTemplateDirective, MessageTemplateDirective, NoDataTemplateDirective, OutputViewComponent, PromptViewComponent, ReceiverMessageContentTemplateDirective, ReceiverMessageTemplateDirective, SendMessageEvent };