@progress/kendo-angular-conversational-ui 20.0.0-develop.4 → 20.0.0-develop.5

package/esm2022/chat/message.component.mjs

@@ -2,13 +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, forwardRef, HostBinding, Input } from '@angular/core';
+import { Component, ElementRef, EventEmitter, forwardRef, HostBinding, HostListener, Input, Output } from '@angular/core';
 import { ChatItem } from './chat-item';
-import { MessageTemplateDirective } from './message-template.directive';
+import { MessageTemplateDirective } from './templates/message-template.directive';
 import { IntlService } from '@progress/kendo-angular-intl';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+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 { 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 * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-intl";
+import * as i2 from "./common/chat.service";
+import * as i3 from "@progress/kendo-angular-l10n";
+import * as i4 from "@progress/kendo-angular-buttons";
 // eslint-disable no-forward-ref
 /**
  * @hidden
@@ -16,18 +32,69 @@ import * as i1 from "@progress/kendo-angular-intl";
 export class MessageComponent extends ChatItem {
     element;
     intl;
+    chatService;
+    localization;
     message;
     tabbable;
     template;
+    statusTemplate;
+    showMessageTime = true;
+    authorId;
+    contextMenuVisibilityChange = new EventEmitter();
     cssClass = true;
+    get removedClass() {
+        return this.message.isDeleted;
+    }
+    onKeyDown(event) {
+        if (this.message.isDeleted) {
+            return;
+        }
+        if (!this.chatService.allowMessageCollapse) {
+            return;
+        }
+        this.onExpandableKeydown(event);
+    }
     selected;
+    hovered;
+    active = false;
+    selectOnMenuClose = false;
     get tabIndex() {
         return this.tabbable ? '0' : '-1';
     }
-    constructor(element, intl) {
+    onContextMenu(event) {
+        if (this.message.isDeleted) {
+            return;
+        }
+        this.active = true;
+        event.stopPropagation();
+    }
+    expandIcon = chevronDownIcon;
+    collapseIcon = chevronUpIcon;
+    downloadIcon = downloadIcon;
+    isMessageExpanded = false;
+    contextMenuActions = [];
+    fileActions = [];
+    constructor(element, intl, chatService, localization) {
         super();
         this.element = element;
         this.intl = intl;
+        this.chatService = chatService;
+        this.localization = localization;
+    }
+    ngOnInit() {
+        this.contextMenuActions = this.transformActions(this.chatService.messageContextMenuActions);
+        this.fileActions = this.transformActions(this.chatService.fileActions);
+        if (this.message.id) {
+            this.chatService.registerMessageElement(this.message.id, this.element);
+        }
+    }
+    ngOnDestroy() {
+        if (this.message.id) {
+            this.chatService.unregisterMessageElement(this.message.id);
+        }
+    }
+    textFor(key) {
+        return this.localization.get(key);
     }
     formatTimeStamp(date) {
         return this.intl.formatDate(date, { datetime: 'short' });
@@ -35,11 +102,132 @@ export class MessageComponent extends ChatItem {
     focus() {
         this.element.nativeElement.focus();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageComponent, deps: [{ token: i0.ElementRef }, { token: i1.IntlService }], 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" }, host: { properties: { "class.k-message": "this.cssClass", "class.k-selected": "this.selected", "class.k-focus": "this.selected", "attr.tabIndex": "this.tabIndex" } }, providers: [{
+    onDownloadAll() {
+        this.chatService.emit('fileDownload', { files: this.message.files, message: this.message });
+    }
+    toggleMessageState(event) {
+        event.stopImmediatePropagation();
+        this.isMessageExpanded = !this.isMessageExpanded;
+        this.chatService.toggleMessageState = false;
+    }
+    onExpandableKeydown(event) {
+        const key = normalizeNumpadKeys(event);
+        const isFileActionButton = event.target.closest(FILE_ACTION_BTN_SELECTOR) || event.target.closest(DOWNLOAD_ALL_SELECTOR);
+        if (!isFileActionButton && (key === Keys.Enter || key === Keys.Space)) {
+            event.preventDefault();
+            this.chatService.toggleMessageState = true;
+            this.toggleMessageState(event);
+        }
+    }
+    isToolbarVisible() {
+        if (!this.chatService.messageToolbarActions || this.chatService.messageToolbarActions.length === 0 || this.message.isDeleted) {
+            return false;
+        }
+        if (this.chatService.messageToolbarVisibility === 'hover') {
+            return this.selected || this.hovered;
+        }
+        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);
+    }
+    handleMenuClose(event) {
+        if (event) {
+            const originalEvent = event.originalEvent;
+            originalEvent && this.onActionButtonClick(originalEvent);
+        }
+        this.active = false;
+        this.contextMenuVisibilityChange.emit(false);
+        if (this.selectOnMenuClose) {
+            this.selected = true;
+            this.focus();
+        }
+    }
+    onActionButtonClick(event) {
+        const clickOutsideMessage = event instanceof MouseEvent && !event.target?.closest('.k-chat-bubble');
+        const menuItemClick = event instanceof MouseEvent && event.target?.closest(MENU_ITEM_SELECTOR);
+        if (clickOutsideMessage && !menuItemClick) {
+            this.selectOnMenuClose = false;
+        }
+    }
+    handleMenuOpen() {
+        this.selectOnMenuClose = this.selected;
+        this.contextMenuVisibilityChange.emit(true);
+    }
+    onActionPopupChange(expanded) {
+        if (expanded) {
+            this.active = true;
+            this.handleMenuOpen();
+        }
+        else {
+            this.handleMenuClose();
+        }
+    }
+    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: [
+            {
                 provide: ChatItem,
                 useExisting: forwardRef(() => MessageComponent)
-            }], usesInheritance: true, ngImport: i0, template: `
+            }
+        ], usesInheritance: true, ngImport: i0, template: `
         <time
             [attr.aria-hidden]="!selected"
             class="k-message-time"
@@ -49,15 +237,86 @@ export class MessageComponent extends ChatItem {
         </time>
 
         <ng-container *ngIf="!message.typing; else typing">
-            <div class="k-chat-bubble" *ngIf="template">
-                <ng-container
-                    *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"
-                >
-                </ng-container>
+            <div
+                class="k-chat-bubble k-bubble"
+                *ngIf="template"
+                [attr.tabindex]="0"
+                [ngClass]="{
+                    'k-selected': selected, 
+                    'k-focus': selected,
+                    'k-active': active
+                }"
+            >
+                <div class="k-bubble-content">
+                    <ng-container
+                        *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"
+                    >
+                    </ng-container>
+                </div>
             </div>
 
-            <div class="k-chat-bubble" *ngIf="!template && message.text">
-                {{message.text}}
+            <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">
+                            <ng-container *ngFor="let part of getFormattedTextParts(message.text)">
+                                <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>
+                    </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)"
+                >
+                    <kendo-icon-wrapper
+                        [name]="isMessageExpanded ? 'chevron-up' : 'chevron-down'"
+                        [svgIcon]="isMessageExpanded ? collapseIcon : expandIcon"
+                    >
+                    </kendo-icon-wrapper>
+                </span>
             </div>
         </ng-container>
 
@@ -65,11 +324,33 @@ export class MessageComponent extends ChatItem {
             class="k-message-status"
             *ngIf="message.status"
         >
-            {{ 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>
 
+        <kendo-toolbar *ngIf="isToolbarVisible()" class="k-chat-message-toolbar" fillMode="flat">
+            <kendo-toolbar-button
+                *ngFor="let action of chatService.messageToolbarActions"
+                fillMode="flat"
+                [icon]="action.icon"
+                [svgIcon]="action.svgIcon"
+                [disabled]="action.disabled"
+                [title]="action.label"
+                (click)="onToolbarAction($event, action, message)"
+            >
+            </kendo-toolbar-button>
+        </kendo-toolbar>
+
         <ng-template #typing>
-            <div class="k-chat-bubble">
+            <div class="k-chat-bubble k-bubble">
                 <div class="k-typing-indicator">
                 <span></span>
                 <span></span>
@@ -77,16 +358,31 @@ export class MessageComponent extends ChatItem {
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+
+        <kendo-contextmenu
+            *ngIf="!message.isDeleted"
+            [target]="element"
+            #messageActionsContextMenu
+            [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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chat-message',
-                    providers: [{
+                    providers: [
+                        {
                             provide: ChatItem,
                             useExisting: forwardRef(() => MessageComponent)
-                        }],
+                        }
+                    ],
                     template: `
         <time
             [attr.aria-hidden]="!selected"
@@ -97,15 +393,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </time>
 
         <ng-container *ngIf="!message.typing; else typing">
-            <div class="k-chat-bubble" *ngIf="template">
-                <ng-container
-                    *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"
-                >
-                </ng-container>
+            <div
+                class="k-chat-bubble k-bubble"
+                *ngIf="template"
+                [attr.tabindex]="0"
+                [ngClass]="{
+                    'k-selected': selected, 
+                    'k-focus': selected,
+                    'k-active': active
+                }"
+            >
+                <div class="k-bubble-content">
+                    <ng-container
+                        *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"
+                    >
+                    </ng-container>
+                </div>
             </div>
 
-            <div class="k-chat-bubble" *ngIf="!template && message.text">
-                {{message.text}}
+            <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">
+                            <ng-container *ngFor="let part of getFormattedTextParts(message.text)">
+                                <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>
+                    </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)"
+                >
+                    <kendo-icon-wrapper
+                        [name]="isMessageExpanded ? 'chevron-up' : 'chevron-down'"
+                        [svgIcon]="isMessageExpanded ? collapseIcon : expandIcon"
+                    >
+                    </kendo-icon-wrapper>
+                </span>
             </div>
         </ng-container>
 
@@ -113,11 +480,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             class="k-message-status"
             *ngIf="message.status"
         >
-            {{ 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>
 
+        <kendo-toolbar *ngIf="isToolbarVisible()" class="k-chat-message-toolbar" fillMode="flat">
+            <kendo-toolbar-button
+                *ngFor="let action of chatService.messageToolbarActions"
+                fillMode="flat"
+                [icon]="action.icon"
+                [svgIcon]="action.svgIcon"
+                [disabled]="action.disabled"
+                [title]="action.label"
+                (click)="onToolbarAction($event, action, message)"
+            >
+            </kendo-toolbar-button>
+        </kendo-toolbar>
+
         <ng-template #typing>
-            <div class="k-chat-bubble">
+            <div class="k-chat-bubble k-bubble">
                 <div class="k-typing-indicator">
                 <span></span>
                 <span></span>
@@ -125,26 +514,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 </div>
             </div>
         </ng-template>
+
+        <kendo-contextmenu
+            *ngIf="!message.isDeleted"
+            [target]="element"
+            #messageActionsContextMenu
+            [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, NgTemplateOutlet]
+                    imports: [NgIf, NgClass, NgFor, NgTemplateOutlet, IconWrapperComponent, KENDO_BUTTONS, ChatFileComponent, ContextMenuComponent, ToolBarComponent, ToolBarButtonComponent, MessageReferenceComponent],
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.IntlService }]; }, propDecorators: { message: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.IntlService }, { type: i2.ChatService }, { type: i3.LocalizationService }]; }, propDecorators: { message: [{
                 type: Input
             }], tabbable: [{
                 type: Input
             }], template: [{
                 type: Input
+            }], statusTemplate: [{
+                type: Input
+            }], showMessageTime: [{
+                type: Input
+            }], authorId: [{
+                type: Input
+            }], contextMenuVisibilityChange: [{
+                type: Output
             }], cssClass: [{
                 type: HostBinding,
                 args: ['class.k-message']
-            }], selected: [{
-                type: HostBinding,
-                args: ['class.k-selected']
-            }, {
+            }], removedClass: [{
                 type: HostBinding,
-                args: ['class.k-focus']
+                args: ['class.k-message-removed']
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
             }], tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabIndex']
+            }], onContextMenu: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
             }] } });