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

package/esm2022/chat/message.component.mjs

@@ -2,24 +2,29 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, EventEmitter, forwardRef, HostBinding, HostListener, Input, Output } from '@angular/core';
+import { ChangeDetectorRef, Component, ElementRef, forwardRef, HostBinding, HostListener, Input } from '@angular/core';
 import { ChatItem } from './chat-item';
-import { MessageTemplateDirective } from './templates/message-template.directive';
+import { MessageContentTemplateDirective } from './templates/message-content-template.directive';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
-import { ContextMenuComponent } from '@progress/kendo-angular-menu';
 import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { ToolBarButtonComponent, ToolBarComponent } from '@progress/kendo-angular-toolbar';
 import { chevronDownIcon, chevronUpIcon, downloadIcon } from '@progress/kendo-svg-icons';
 import { ChatService } from './common/chat.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { URL_REGEX, FILE_ACTION_BTN_SELECTOR, DOWNLOAD_ALL_SELECTOR, MENU_ITEM_SELECTOR } from './common/utils';
+import { URL_REGEX, FILE_ACTION_BTN_SELECTOR, DOWNLOAD_ALL_SELECTOR, MENU_ITEM_SELECTOR, transformActions } from './common/utils';
 import { isAuthor } from './chat-view';
 import { ChatFileComponent } from './chat-file.component';
 import { MessageReferenceComponent } from './message-reference-content.component';
 import { ChatStatusTemplateDirective } from './templates/status-template.directive';
-import { Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
+import { isPresent, Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
+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 { ReceiverMessageTemplateDirective } from './templates/receiver-message-template.directive';
+import { AuthorMessageTemplateDirective } from './templates/author-message-template.directive';
+import { Subscription } from 'rxjs';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-intl";
 import * as i2 from "./common/chat.service";
@@ -34,13 +39,23 @@ export 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;
@@ -55,44 +70,142 @@ export 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);
@@ -120,66 +233,19 @@ export 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);
@@ -187,11 +253,13 @@ export class MessageComponent extends ChatItem {
     handleMenuClose(event) {
         if (event) {
             const originalEvent = event.originalEvent;
-            originalEvent && this.onActionButtonClick(originalEvent);
+            if (originalEvent) {
+                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();
         }
@@ -200,16 +268,16 @@ export 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 {
@@ -219,124 +287,211 @@ export class MessageComponent extends ChatItem {
     isOwnMessage(msg) {
         return isAuthor(this.authorId, msg);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageComponent, deps: [{ token: i0.ElementRef }, { token: i1.IntlService }, { token: i2.ChatService }, { token: i3.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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.IntlService }, { token: i2.ChatService }, { token: i3.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="useCustomBubbleTemplate">
+            <ng-container *ngTemplateOutlet="getActiveBubbleTemplate()?.templateRef; context: { $implicit: message };"></ng-container>
+        </ng-container>
 
-        <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
-                }"
+        <ng-container *ngIf="!useCustomBubbleTemplate">
+            <time
+                [attr.aria-hidden]="!selected"
+                class="k-message-time"
+                *ngIf="message.timestamp"
             >
-                <div class="k-bubble-content">
-                    <ng-container
-                        *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"
-                    >
-                    </ng-container>
-                </div>
-            </div>
+                {{ formatTimeStamp(message.timestamp) }}
+            </time>
 
-            <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
-                }"
-            >
-                <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>
+            <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"
@@ -346,30 +501,9 @@ export 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: i4.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: i4.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: "16.2.12", ngImport: i0, type: MessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chat-message',
@@ -380,117 +514,162 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         }
                     ],
                     template: `
-        <time
-            [attr.aria-hidden]="!selected"
-            class="k-message-time"
-            *ngIf="message.timestamp"
-        >
-            {{ formatTimeStamp(message.timestamp) }}
-        </time>
+        <ng-container *ngIf="useCustomBubbleTemplate">
+            <ng-container *ngTemplateOutlet="getActiveBubbleTemplate()?.templateRef; context: { $implicit: message };"></ng-container>
+        </ng-container>
 
-        <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
-                }"
+        <ng-container *ngIf="!useCustomBubbleTemplate">
+            <time
+                [attr.aria-hidden]="!selected"
+                class="k-message-time"
+                *ngIf="message.timestamp"
             >
-                <div class="k-bubble-content">
-                    <ng-container
-                        *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"
-                    >
-                    </ng-container>
-                </div>
-            </div>
+                {{ formatTimeStamp(message.timestamp) }}
+            </time>
 
-            <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
-                }"
-            >
-                <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>
+            <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"
@@ -500,36 +679,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", 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: function () { return [{ type: i0.ElementRef }, { type: i1.IntlService }, { type: i2.ChatService }, { type: i3.LocalizationService }]; }, propDecorators: { message: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.IntlService }, { type: i2.ChatService }, { type: i3.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
@@ -537,8 +705,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], authorId: [{
                 type: Input
-            }], contextMenuVisibilityChange: [{
-                type: Output
             }], cssClass: [{
                 type: HostBinding,
                 args: ['class.k-message']
@@ -551,7 +717,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabIndex']
-            }], onContextMenu: [{
-                type: HostListener,
-                args: ['contextmenu', ['$event']]
             }] } });