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

package/esm2022/chat/message-box.component.mjs

@@ -5,7 +5,7 @@
 import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2, ViewChild } from '@angular/core';
 import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { closest, isPresent, Keys } from '@progress/kendo-angular-common';
+import { closest, guid, isPresent, Keys } from '@progress/kendo-angular-common';
 import { paperPlaneIcon, paperclipIcon, fileIcon, xIcon } from '@progress/kendo-svg-icons';
 import { ButtonComponent, SpeechToTextButtonComponent } from '@progress/kendo-angular-buttons';
 import { SendMessageEvent } from './api/post-message-event';
@@ -67,7 +67,9 @@ export class MessageBoxComponent {
         const elRef = this.element.nativeElement;
         this.subs.add(this.renderer.listen(elRef, 'focusout', event => this.onBlur(event)));
         this.subs.add(this.chatService.contextMenuAction$.subscribe((action) => {
-            action.action.id === 'reply' && this.messageBoxInput.focus();
+            if (action.action.id === 'reply') {
+                this.messageBoxInput.focus();
+            }
         }));
     }
     ngOnDestroy() {
@@ -82,6 +84,7 @@ export class MessageBoxComponent {
             return;
         }
         const message = {
+            id: guid(),
             text: this.inputValue,
             timestamp: new Date(),
             author: { id: this.authorId },
@@ -213,12 +216,13 @@ export class MessageBoxComponent {
     dispatchSuggestion(suggestion) {
         this.executeSuggestion.emit(suggestion);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageBoxComponent, deps: [{ token: i1.ChatService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MessageBoxComponent, isStandalone: true, selector: "kendo-message-box", inputs: { authorId: "authorId", autoScroll: "autoScroll", suggestions: "suggestions", placeholder: "placeholder", inputValue: "inputValue", localization: "localization", messageBoxTemplate: "messageBoxTemplate", suggestionTemplate: "suggestionTemplate" }, outputs: { sendMessage: "sendMessage", executeSuggestion: "executeSuggestion", fileSelect: "fileSelect", fileRemove: "fileRemove" }, host: { properties: { "style.border-color": "this.borderColor", "class.k-message-box-wrapper": "this.messageBoxWrapperClass" } }, viewQueries: [{ propertyName: "messageBoxInput", first: true, predicate: ["messageBoxInput"], descendants: true }, { propertyName: "fileSelectComponent", first: true, predicate: ["fileSelect"], descendants: true }, { propertyName: "suggestedActionsComponent", first: true, predicate: SuggestedActionsComponent, descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageBoxComponent, deps: [{ token: i1.ChatService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MessageBoxComponent, isStandalone: true, selector: "kendo-message-box", inputs: { authorId: "authorId", autoScroll: "autoScroll", suggestions: "suggestions", placeholder: "placeholder", inputValue: "inputValue", localization: "localization", messageBoxTemplate: "messageBoxTemplate", suggestionTemplate: "suggestionTemplate" }, outputs: { sendMessage: "sendMessage", executeSuggestion: "executeSuggestion", fileSelect: "fileSelect", fileRemove: "fileRemove" }, host: { properties: { "style.border-color": "this.borderColor", "class.k-message-box-wrapper": "this.messageBoxWrapperClass" } }, viewQueries: [{ propertyName: "messageBoxInput", first: true, predicate: ["messageBoxInput"], descendants: true }, { propertyName: "fileSelectComponent", first: true, predicate: ["fileSelect"], descendants: true }, { propertyName: "suggestedActionsComponent", first: true, predicate: SuggestedActionsComponent, descendants: true }], ngImport: i0, template: `
     <kendo-chat-suggested-actions
         *ngIf="suggestions?.length > 0"
         #suggestedActions
         [suggestions]="suggestions"
+        type="suggestion"
         [suggestionTemplate]="suggestionTemplate"
         [tabbable]="true"
         (dispatchSuggestion)="dispatchSuggestion($event)"
@@ -319,9 +323,9 @@ export 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: "16.2.12", ngImport: i0, type: MessageBoxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageBoxComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-message-box',
@@ -330,6 +334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         *ngIf="suggestions?.length > 0"
         #suggestedActions
         [suggestions]="suggestions"
+        type="suggestion"
         [suggestionTemplate]="suggestionTemplate"
         [tabbable]="true"
         (dispatchSuggestion)="dispatchSuggestion($event)"
@@ -434,7 +439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [NgIf, NgFor, ButtonComponent, FormsModule, NgTemplateOutlet, TextAreaComponent, MessageReferenceComponent, TextAreaSuffixComponent, TextAreaPrefixComponent, SpeechToTextButtonComponent, InputSpacerComponent, FileSelectComponent, SuggestedActionsComponent, ChatFileComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ChatService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { borderColor: [{
+        }], ctorParameters: () => [{ type: i1.ChatService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { borderColor: [{
                 type: HostBinding,
                 args: ['style.border-color']
             }], messageBoxWrapperClass: [{

package/esm2022/chat/message-list.component.mjs

@@ -14,7 +14,7 @@ import { closest, DOWNLOAD_ALL_SELECTOR, FILE_ACTION_BTN_SELECTOR } from './comm
 import { ChatItem } from './chat-item';
 import { chatView, isAuthor } from './chat-view';
 import { AttachmentTemplateDirective } from './templates/attachment-template.directive';
-import { MessageTemplateDirective } from './templates/message-template.directive';
+import { MessageContentTemplateDirective } from './templates/message-content-template.directive';
 import { ChatTimestampTemplateDirective } from './templates/timestamp-template.directive';
 import { Subscription } from 'rxjs';
 import { SuggestedActionsComponent } from './suggested-actions.component';
@@ -23,6 +23,12 @@ import { MessageAttachmentsComponent } from './message-attachments.component';
 import { AttachmentComponent } from './attachment.component';
 import { ChatService } from './common/chat.service';
 import { ChatStatusTemplateDirective } from './templates/status-template.directive';
+import { ChatUserStatusTemplateDirective } from './templates/user-status-template.directive';
+import { MessageTemplateDirective } from './templates/message-template.directive';
+import { AuthorMessageContentTemplateDirective } from './templates/author-message-content-template.directive';
+import { ReceiverMessageContentTemplateDirective } from './templates/receiver-message-content-template.directive';
+import { AuthorMessageTemplateDirective } from './templates/author-message-template.directive';
+import { ReceiverMessageTemplateDirective } from './templates/receiver-message-template.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-intl";
 import * as i2 from "./common/chat.service";
@@ -44,9 +50,15 @@ export class MessageListComponent {
         return this._messages;
     }
     attachmentTemplate;
+    authorMessageContentTemplate;
+    receiverMessageContentTemplate;
+    messageContentTemplate;
+    authorMessageTemplate;
+    receiverMessageTemplate;
     messageTemplate;
     timestampTemplate;
     statusTemplate;
+    userStatusTemplate;
     localization;
     authorId;
     executeAction = new EventEmitter();
@@ -64,6 +76,7 @@ export 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;
@@ -76,9 +89,25 @@ export 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;
@@ -92,9 +121,31 @@ export class MessageListComponent {
     onClick(message, event) {
         this.select(message, event);
     }
+    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);
@@ -154,6 +205,9 @@ export class MessageListComponent {
             this.select(null);
         }
     }
+    textFor(key) {
+        return this.localization.get(key);
+    }
     onHomeOrEndKeyDown(key) {
         const items = this.items.toArray();
         if (key === 'home') {
@@ -200,11 +254,49 @@ export 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: "16.2.12", ngImport: i0, type: MessageListComponent, deps: [{ token: i0.ElementRef }, { token: i1.IntlService }, { token: i0.Renderer2 }, { token: i2.ChatService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageListComponent, deps: [{ token: i0.ElementRef }, { token: i1.IntlService }, { token: i0.Renderer2 }, { token: i2.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", 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
@@ -225,10 +317,10 @@ export class MessageListComponent {
                     [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-message-group-full-width]="calculateMessageWidthMode(group.messages[0])"
                 >
                     <div
-                        *ngIf="group.author.avatarUrl"
+                        *ngIf="!userStatusTemplate?.templateRef && group.author.avatarUrl"
                         class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
                     >
                         <span class="k-avatar-image">
@@ -238,6 +330,25 @@ export class MessageListComponent {
                             />
                         </span>
                     </div>
+                    <div class="k-chat-user-status-wrapper" *ngIf="group.author.avatarUrl && userStatusTemplate?.templateRef">
+                        <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>
                         <ng-container
@@ -254,13 +365,14 @@ export class MessageListComponent {
                             <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>
 
@@ -289,6 +401,7 @@ export 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)"
@@ -299,9 +412,9 @@ export 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: "16.2.12", ngImport: i0, type: MessageListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chat-message-list',
@@ -326,10 +439,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     [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-message-group-full-width]="calculateMessageWidthMode(group.messages[0])"
                 >
                     <div
-                        *ngIf="group.author.avatarUrl"
+                        *ngIf="!userStatusTemplate?.templateRef && group.author.avatarUrl"
                         class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
                     >
                         <span class="k-avatar-image">
@@ -339,6 +452,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             />
                         </span>
                     </div>
+                    <div class="k-chat-user-status-wrapper" *ngIf="group.author.avatarUrl && userStatusTemplate?.templateRef">
+                        <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>
                         <ng-container
@@ -355,13 +487,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             <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>
 
@@ -390,6 +523,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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)"
@@ -404,16 +538,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [NgFor, NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet, MessageComponent, AttachmentComponent, MessageAttachmentsComponent, SuggestedActionsComponent, ResizeSensorComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.IntlService }, { type: i0.Renderer2 }, { type: i2.ChatService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { messages: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.IntlService }, { type: i0.Renderer2 }, { type: i2.ChatService }, { type: i0.ChangeDetectorRef }], propDecorators: { messages: [{
                 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: [{

package/esm2022/chat/message-reference-content.component.mjs

@@ -33,8 +33,8 @@ export class MessageReferenceComponent extends ChatItem {
         return this.localization.get(key);
     }
     focus() { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageReferenceComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ChatService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MessageReferenceComponent, isStandalone: true, selector: "chat-message-reference-content", inputs: { message: "message" }, host: { properties: { "class.k-message-reference-content": "this.hostClass" } }, providers: [{
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageReferenceComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ChatService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MessageReferenceComponent, isStandalone: true, selector: "chat-message-reference-content", inputs: { message: "message" }, host: { properties: { "class.k-message-reference-content": "this.hostClass" } }, providers: [{
                 provide: ChatItem,
                 useExisting: forwardRef(() => MessageReferenceComponent)
             }], usesInheritance: true, ngImport: i0, template: `
@@ -47,7 +47,7 @@ export class MessageReferenceComponent extends ChatItem {
         <ng-container *ngIf="message.isDeleted && !isOwnMessage(message)">{{ textFor('deletedMessageReceiverText') }}</ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageReferenceComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageReferenceComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'chat-message-reference-content',
@@ -67,7 +67,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [NgIf, ChatFileComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ChatService }]; }, propDecorators: { hostClass: [{
+        }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.ChatService }], propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-message-reference-content']
             }], message: [{