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

package/esm2022/chat/chat.component.mjs

@@ -2,20 +2,37 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, isDevMode, Output, ViewChild, NgZone } from '@angular/core';
-import { AttachmentTemplateDirective } from './attachment-template.directive';
+import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, isDevMode, Output, ViewChild, NgZone, Renderer2, ViewContainerRef } from '@angular/core';
+import { AttachmentTemplateDirective } from './templates/attachment-template.directive';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
 import { makeHandler } from './builtin-actions';
-import { MessageTemplateDirective } from './message-template.directive';
+import { MessageTemplateDirective } from './templates/message-template.directive';
+import { Subscription } from 'rxjs';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
-import { ChatMessageBoxTemplateDirective } from './message-box.directive';
+import { ChatMessageBoxTemplateDirective } from './templates/message-box.directive';
 import { MessageBoxComponent } from './message-box.component';
 import { MessageListComponent } from './message-list.component';
 import { ScrollAnchorDirective } from './common/scroll-anchor.directive';
 import { LocalizedMessagesDirective } from './l10n/localized-messages.directive';
+import { isChanged, isPresent, processCssValue } from '@progress/kendo-angular-common';
+import { ChatService } from './common/chat.service';
+import { AppBarComponent } from "@progress/kendo-angular-navigation";
+import { ChatHeaderTemplateDirective } from './templates/header-template.directive';
+import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
+import { pinIcon, xIcon } from '@progress/kendo-svg-icons';
+import { IconWrapperComponent } from '@progress/kendo-angular-icons';
+import { defaultModelFields } from './common/models/default-model-fields';
+import { processMessages, SEND_BTN_DEFAULT_SETTINGS, FILE_ACTIONS, CONTEXT_MENU_ACTIONS } from './common/utils';
+import { ChatTimestampTemplateDirective } from './templates/timestamp-template.directive';
+import { MessageReferenceComponent } from './message-reference-content.component';
+import { ChatStatusTemplateDirective } from './templates/status-template.directive';
+import { ChatSuggestionTemplateDirective } from './templates/suggestion-template.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./common/chat.service";
+import * as i3 from "@progress/kendo-angular-buttons";
 /**
  * Represents the [Kendo UI Chat component for Angular](slug:overview_convui).
  *
@@ -26,18 +43,21 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * ```html
  * <kendo-chat
  *   [messages]="messages"
- *   [user]="user"
+ *   [authorId]="authorId"
  *   (sendMessage)="onSendMessage($event)"
  *   (executeAction)="onExecuteAction($event)">
  * </kendo-chat>
  * ```
  *
  * @remarks
- * Supported children components are: {@link CustomMessagesComponent}, {@link HeroCardComponent}.
+ * Supported children components are: {@link CustomMessagesComponent}, {@link HeroCardComponent}, {@link AttachmentTemplateDirective}, {@link ChatHeaderTemplateDirective}, {@link ChatMessageBoxTemplateDirective}, {@link MessageTemplateDirective}, {@link ChatStatusTemplateDirective}, {@link ChatSuggestionTemplateDirective}, {@link ChatTimestampTemplateDirective}.
  */
 export class ChatComponent {
     localization;
     zone;
+    renderer;
+    element;
+    chatService;
     /**
      * Defines the array of messages displayed in the Chat.
      * Each message can include a timestamp for unique identification.
@@ -45,23 +65,154 @@ export class ChatComponent {
      */
     messages;
     /**
-     * Specifies the [`User`](slug:api_conversational-ui_user) instance representing the local user.
-     * The User ID is used to distinguish messages authored by the local user.
+     * Specifies the id representing the local user.
      */
-    user;
+    authorId;
     /**
      * Determines the type of input used in the message box.
-     * Can be set to `textbox` for a single-line input or `textarea` for multi-line input
-     * ([see example](slug:message_box#message-box-types)).
-     * @default 'textbox'
+     * ([see example](slug:message_chat)).
+     * @default 'textarea'
+     *
+     * @hidden
+     */
+    messageBoxType = 'textarea';
+    /**
+     * Sets the height of the Chat component.
+     * Accepts a string with CSS units (e.g., '400px', '50%') or a number (interpreted as pixels).
+     * The minimum height is `600px`.
+     */
+    height;
+    /**
+     * Sets the width of the Chat component.
+     * Accepts a string with CSS units (e.g., '400px', '50%') or a number (interpreted as pixels).
+     * The minimum width is `320px`.
+     */
+    width;
+    /**
+     * Sets the placeholder text for the message input box.
+     */
+    placeholder;
+    /**
+     * Switches the width of the message between the predefined options.
+     *
+     * @default 'standard'
+     */
+    messageWidthMode = 'standard';
+    /**
+     * Enables the expand/collapse functionality of the messages.
+     *
+     * @default `false`
+     */
+    allowMessageCollapse = false;
+    /**
+     * Sets the Speech to Text button settings.
+     *
+     * @default true
+     */
+    enableSpeechToText = true;
+    /**
+     * Sets the File Select settings.
+     *
+     * @default true
+     */
+    enableFileSelect = true;
+    /**
+     * Specifies the actions available in the message toolbar.
+     * These actions are displayed in the message toolbar and can be used to perform specific operations on the message.
+     *
+     * @default []
+     */
+    messageToolbarActions = [];
+    /**
+     * Sets the value of the Message Box.
+     */
+    inputValue = '';
+    /**
+     * Specifies the default actions available in the message context menu.
+     *
+     * @default [{ id: 'copy', label: 'Copy', icon: 'copy', svgIcon: copyIcon, disabled: false }, { id: 'reply', label: 'Reply', icon: 'undo', svgIcon: undoIcon, disabled: false }]
+     */
+    defaultContextMenuActions = CONTEXT_MENU_ACTIONS;
+    /**
+     * Specifies the actions available in the message as a context menu.
+     * These actions are displayed as menu items and can be used to perform specific operations on the message.
+     * The default actions are `copy` and `reply` and are defined by their `id`.
+     */
+    set messageContextMenuActions(actions) {
+        this._messageContextMenuActions = this.mergeWithDefaultActions(actions, CONTEXT_MENU_ACTIONS);
+    }
+    get messageContextMenuActions() {
+        return this._messageContextMenuActions;
+    }
+    /**
+     * Specifies the default actions available in the file actions DropDownButton.
+     */
+    defaultFileActions = FILE_ACTIONS;
+    /**
+     * Specifies the actions available in the file as items of a DropDownButton.
+     * These actions are displayed when clicking on the file DropDownButton and can be used to perform specific operations on the file.
+     * The default action is `download` and is defined by its `id`.
+     *
+     * @default [{ id: 'download', label: 'Download', icon: 'download', svgIcon: downloadIcon, disabled: false }]
+     */
+    set fileActions(actions) {
+        this._fileActions = this.mergeWithDefaultActions(actions, FILE_ACTIONS);
+    }
+    get fileActions() {
+        return this._fileActions;
+    }
+    /**
+     * Sets the suggestions to display in the message input box.
+     * Suggestions are displayed as a list of clickable items that can be used to quickly insert predefined text into the message input.
+     *
+     * @default []
+     */
+    suggestions = [];
+    /**
+     * Sets the visibility of the message toolbar.
+     *
+     * @default 'hidden'
+     */
+    messageToolbarVisibility = 'hidden';
+    /**
+     * Sets the send button settings for the Chat component.
+     * Allows customization of the send button appearance, icons and disabled state.
+     *
+     * @default defaultButtonSettings
      */
-    messageBoxType = 'textbox';
+    sendButtonSettings = SEND_BTN_DEFAULT_SETTINGS;
+    /**
+     * Sets the names of the model fields from which the Chat reads its data.
+     * Allows mapping of custom data structures to the expected Message format.
+     */
+    set modelFields(value) {
+        this._modelFields = { ...defaultModelFields, ...value };
+    }
+    get modelFields() {
+        return this._modelFields;
+    }
     /**
      * Emits when the user sends a message by clicking the **Send** button or pressing **Enter**.
      *
      * > The message is not automatically added to the `messages` array.
      */
     sendMessage = new EventEmitter();
+    /**
+     * Emits when the user clicks a quick action button in the message toolbar.
+     */
+    toolbarActionClick = new EventEmitter();
+    /**
+     * Emits when the user clicks an action in the message context menu.
+     */
+    contextMenuActionClick = new EventEmitter();
+    /**
+     * Emits when the user clicks an action in the file context menu.
+     */
+    fileActionClick = new EventEmitter();
+    /**
+     * Emits when the user clicks an action in the file context menu.
+     */
+    download = new EventEmitter();
     /**
      * Emits when the user clicks a quick action button.
      * The Chat internally handles [known actions](slug:api_conversational-ui_actiontype) such as `reply`, `openUrl`, and `call`.
@@ -69,6 +220,27 @@ export class ChatComponent {
      * The event is preventable&mdash;calling `preventDefault` suppresses the built-in action.
      */
     executeAction = new EventEmitter();
+    /**
+     * Emits when the user clicks a suggestion in the message input box.
+     */
+    suggestionExecute = new EventEmitter();
+    /**
+     * Emits when the user selects a file in the message input box.
+     */
+    fileSelect = new EventEmitter();
+    /**
+     * Emits when the user removes a file from the message input box.
+     */
+    fileRemove = new EventEmitter();
+    /**
+     * Emits when the user unpins the pinned message.
+     * This event is triggered when the user clicks the delete button on the pinned message.
+     */
+    unpin = new EventEmitter();
+    /**
+     * Emits when the user types in the message input box.
+     */
+    inputValueChange = new EventEmitter();
     get className() {
         return 'k-chat';
     }
@@ -76,13 +248,30 @@ export class ChatComponent {
         return this.direction;
     }
     attachmentTemplate;
+    chatHeaderTemplate;
     messageTemplate;
+    timestampTemplate;
+    suggestionTemplate;
+    statusTemplate;
     messageBoxTemplate;
     messageBox;
     /**
      * @hidden
      */
     messageList;
+    /**
+     * @hidden
+     * Returns processed messages when model fields are used, otherwise returns original messages
+     */
+    get processedMessages() {
+        if (!this.messages || this.messages.length === 0) {
+            return [];
+        }
+        if (this._modelFields && Object.keys(this._modelFields).some(key => this._modelFields[key] !== defaultModelFields[key])) {
+            return processMessages(this.messages, this._modelFields);
+        }
+        return this.messages;
+    }
     /**
      * @hidden
      */
@@ -93,33 +282,115 @@ export class ChatComponent {
      * @hidden
      */
     autoScroll = true;
+    /**
+     * @hidden
+     */
+    pinIcon = pinIcon;
+    /**
+     * @hidden
+     */
+    deleteIcon = xIcon;
+    /**
+     * @hidden
+     */
+    pinnedMessage;
     direction;
-    localizationChangeSubscription;
-    constructor(localization, zone) {
+    subs = new Subscription();
+    _modelFields = defaultModelFields;
+    _messageContextMenuActions = CONTEXT_MENU_ACTIONS;
+    _fileActions = FILE_ACTIONS;
+    constructor(localization, zone, renderer, element, chatService) {
         this.localization = localization;
         this.zone = zone;
+        this.renderer = renderer;
+        this.element = element;
+        this.chatService = chatService;
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => {
+        this.subs.add(localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
-        });
+        }));
     }
-    ngOnChanges() {
+    /**
+     * @hidden
+     */
+    ngOnInit() {
+        this.chatService.messageWidthMode = this.messageWidthMode;
+        this.chatService.allowMessageCollapse = this.allowMessageCollapse;
+        this.chatService.enableSpeechToText = this.enableSpeechToText;
+        this.chatService.sendButtonSettings = this.sendButtonSettings;
+        this.chatService.enableFileSelect = this.enableFileSelect;
+        this.chatService.messageToolbarActions = this.messageToolbarActions;
+        this.chatService.messageContextMenuActions = this.messageContextMenuActions;
+        this.chatService.fileActions = this.fileActions;
+        this.chatService.messageToolbarVisibility = this.messageToolbarVisibility;
+        this.chatService.messages = this.processedMessages || [];
+        this.chatService.chatElement = this.messageList;
+        this.subs.add(this.chatService.toolbarAction$.subscribe((actionEvent) => {
+            this.toolbarActionClick.emit(actionEvent);
+        }));
+        this.subs.add(this.chatService.contextMenuAction$.subscribe((actionEvent) => {
+            this.contextMenuActionClick.emit(actionEvent);
+        }));
+        this.subs.add(this.chatService.fileAction$.subscribe((actionEvent) => {
+            this.fileActionClick.emit(actionEvent);
+        }));
+        this.subs.add(this.chatService.fileDownload$.subscribe((actionEvent) => {
+            this.download.emit(actionEvent);
+        }));
+        this.subs.add(this.chatService.inputValueChange$.subscribe((value) => {
+            this.inputValueChange.emit(value);
+        }));
+        this.pinnedMessage = this.findLastPinnedMessage();
+        this.chatService.authorId = this.authorId;
+    }
+    /**
+     * @hidden
+     */
+    ngOnChanges(changes) {
         this.zone.runOutsideAngular(() => setTimeout(() => {
-            this.messageList.nativeElement.style.flex = '1 1 auto';
+            this.messageList.element.nativeElement.style.flex = '1 1 auto';
         }));
+        if (isChanged('messages', changes, false)) {
+            this.pinnedMessage = this.findLastPinnedMessage();
+            this.chatService.messages = this.processedMessages;
+        }
+        if (isChanged('height', changes, false)) {
+            this.renderer.setStyle(this.element.nativeElement, 'height', `${processCssValue(this.height)}`);
+        }
+        if (isChanged('width', changes, false)) {
+            this.renderer.setStyle(this.element.nativeElement, 'width', `${processCssValue(this.width)}`);
+        }
+        this.updateChatServiceProperties([
+            'authorId',
+            'messageWidthMode',
+            'allowMessageCollapse',
+            'enableSpeechToText',
+            'sendButtonSettings',
+            'enableFileSelect',
+            'messageToolbarActions',
+            'messageContextMenuActions',
+            'fileActions',
+            'messageToolbarVisibility'
+        ], changes);
     }
+    /**
+     * @hidden
+     */
     ngAfterViewInit() {
         if (!isDevMode()) {
             return;
         }
-        if (!this.user) {
-            throw new Error('User must be set and have a valid id.');
+        if (!isPresent(this.authorId)) {
+            throw new Error('AuthorId must be set.');
         }
     }
+    /**
+     * @hidden
+     */
     ngOnDestroy() {
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
+        if (this.subs) {
+            this.subs.unsubscribe();
         }
     }
     /**
@@ -141,15 +412,52 @@ export class ChatComponent {
     textFor(key) {
         return this.localization.get(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChatComponent, isStandalone: true, selector: "kendo-chat", inputs: { messages: "messages", user: "user", messageBoxType: "messageBoxType" }, outputs: { sendMessage: "sendMessage", executeAction: "executeAction" }, host: { properties: { "class": "this.className", "attr.dir": "this.dirAttr" } }, providers: [
+    /**
+     * @hidden
+     */
+    scrollToPinnedMessage() {
+        if (this.pinnedMessage) {
+            this.chatService.scrollToMessage(this.pinnedMessage?.id);
+        }
+    }
+    findLastPinnedMessage() {
+        return [...this.processedMessages].reverse().find((message) => message.isPinned);
+    }
+    updateChatServiceProperties(propNames, changes) {
+        propNames.forEach(propName => {
+            if (isChanged(propName, changes, false)) {
+                this.chatService[propName] = this[propName];
+            }
+        });
+    }
+    mergeWithDefaultActions(actions, defaultActions) {
+        if (!actions || actions.length === 0) {
+            return [];
+        }
+        return actions.map(userAction => {
+            const defaultAction = defaultActions.find(action => action.id === userAction?.id);
+            if (defaultAction) {
+                return { ...defaultAction, ...userAction };
+            }
+            return userAction;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.ChatService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChatComponent, isStandalone: true, selector: "kendo-chat", inputs: { messages: "messages", authorId: "authorId", messageBoxType: "messageBoxType", height: "height", width: "width", placeholder: "placeholder", messageWidthMode: "messageWidthMode", allowMessageCollapse: "allowMessageCollapse", enableSpeechToText: "enableSpeechToText", enableFileSelect: "enableFileSelect", messageToolbarActions: "messageToolbarActions", inputValue: "inputValue", messageContextMenuActions: "messageContextMenuActions", fileActions: "fileActions", suggestions: "suggestions", messageToolbarVisibility: "messageToolbarVisibility", sendButtonSettings: "sendButtonSettings", modelFields: "modelFields" }, outputs: { sendMessage: "sendMessage", toolbarActionClick: "toolbarActionClick", contextMenuActionClick: "contextMenuActionClick", fileActionClick: "fileActionClick", download: "download", executeAction: "executeAction", suggestionExecute: "suggestionExecute", fileSelect: "fileSelect", fileRemove: "fileRemove", unpin: "unpin", inputValueChange: "inputValueChange" }, host: { properties: { "class": "this.className", "attr.dir": "this.dirAttr" } }, providers: [
             LocalizationService,
+            ChatService,
             {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.chat'
             }
-        ], queries: [{ propertyName: "attachmentTemplate", first: true, predicate: AttachmentTemplateDirective, descendants: true }, { propertyName: "messageTemplate", first: true, predicate: MessageTemplateDirective, descendants: true }, { propertyName: "messageBoxTemplate", first: true, predicate: ChatMessageBoxTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "messageBox", first: true, predicate: ["messageBox"], descendants: true }, { propertyName: "messageList", first: true, predicate: ["messageList"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
+        ], queries: [{ propertyName: "attachmentTemplate", first: true, predicate: AttachmentTemplateDirective, descendants: true }, { propertyName: "chatHeaderTemplate", first: true, predicate: ChatHeaderTemplateDirective, descendants: true }, { propertyName: "messageTemplate", first: true, predicate: MessageTemplateDirective, descendants: true }, { propertyName: "timestampTemplate", first: true, predicate: ChatTimestampTemplateDirective, descendants: true }, { propertyName: "suggestionTemplate", first: true, predicate: ChatSuggestionTemplateDirective, descendants: true }, { propertyName: "statusTemplate", first: true, predicate: ChatStatusTemplateDirective, descendants: true }, { propertyName: "messageBoxTemplate", first: true, predicate: ChatMessageBoxTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "messageBox", first: true, predicate: ["messageBox"], descendants: true }, { propertyName: "messageList", first: true, predicate: ["messageList"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoChatLocalizedMessages
+            i18n-deletedMessageSenderText="kendo.chat.deletedMessageSenderText|The text that is displayed when the sender deletes a message"
+            deletedMessageSenderText="You removed this message."
+
+            i18n-deletedMessageReceiverText="kendo.chat.deletedMessageReceiverText|The text that is displayed when the receiver deletes a message"
+            deletedMessageReceiverText="This message was removed by its sender."
+
             i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
             messagePlaceholder="Type a message..."
 
@@ -168,11 +476,46 @@ export class ChatComponent {
             i18n-messageAttachmentRightArrow="kendo.chat.messageAttachmentRightArrow|The text for the right arrow of the message attachments"
             messageAttachmentRightArrow="Next item"
 
-            i18n-messageAvatarAlt="kendo.chat.messageAvatarAlt|The alt attribute text for the avatar"
-            messageAvatarAlt="Avatar"
+            i18n-speechToTextButtonTitle="kendo.chat.speechToTextButtonTitle|Sets the Speech to Text button title."
+            speechToTextButtonTitle="Speech to Text"
+
+            i18n-fileSelectButtonTitle="kendo.chat.fileSelectButtonTitle|Sets the File Select button title."
+            fileSelectButtonTitle="Select files"
+
+            i18n-removeReplyTitle="kendo.chat.removeReplyTitle|Sets the title of the icon which removes the reply reference in the Message Box."
+            removeReplyTitle="Remove reply"
+
+            i18n-removeFileTitle="kendo.chat.removeFileTitle|Sets the title of the icon which removes a selected file in the Message Box."
+            removeFileTitle="Remove file"
+
+            i18n-expandTitle="kendo.chat.expandTitle|Sets the title of the icon which demonstrates that the message can be expanded."
+            expandTitle="Expand message"
+
+            i18n-collapseTitle="kendo.chat.collapseTitle|Sets the title of the icon which demonstrates that the message can be collapsed."
+            collapseTitle="Collapse message"
+
+            i18n-fileActionsTitle="kendo.chat.fileActionsTitle|Sets the title of the DropDownButton which opens the File actions."
+            fileActionsTitle="File actions"
+
+            i18n-downloadAllFilesText="kendo.chat.downloadAllFilesText|Sets the text that is displayed in the download section of the message."
+            downloadAllFilesText="Download all"
         >
         </ng-container>
 
+        <kendo-appbar *ngIf="chatHeaderTemplate" class="k-chat-header" positionMode="sticky">
+            <ng-container *ngTemplateOutlet="chatHeaderTemplate.templateRef"></ng-container>
+        </kendo-appbar>
+        <div class="k-message-reference k-message-reference-receiver k-message-pinned" *ngIf="pinnedMessage" (click)="scrollToPinnedMessage()">
+            <kendo-icon-wrapper
+                size="xlarge"
+                name="pin"
+                [svgIcon]="pinIcon"
+            >
+            </kendo-icon-wrapper>
+            <chat-message-reference-content [message]="pinnedMessage"></chat-message-reference-content>
+            <span class="k-spacer"></span>
+            <button kendoButton [svgIcon]="deleteIcon" (click)="unpin.emit(pinnedMessage)" fillMode="flat"></button>
+        </div>
         <div
             #messageList
             class="k-message-list k-avatars"
@@ -184,11 +527,13 @@ export class ChatComponent {
             [(autoScroll)]="autoScroll"
         >
             <kendo-chat-message-list
-                [messages]="messages"
+                [messages]="processedMessages"
                 [messageTemplate]="messageTemplate"
+                [timestampTemplate]="timestampTemplate"
+                [statusTemplate]="statusTemplate"
                 [localization]="localizationText"
                 [attachmentTemplate]="attachmentTemplate"
-                [user]="user"
+                [authorId]="authorId"
                 (executeAction)="dispatchAction($event)"
                 (resize)="anchor.scrollToBottom()"
                 (navigate)="this.autoScroll = false"
@@ -196,22 +541,29 @@ export class ChatComponent {
             </kendo-chat-message-list>
         </div>
         <kendo-message-box
-        #messageBox
-        [messageBoxTemplate]="messageBoxTemplate"
-        [type]="messageBoxType"
-        [user]="user"
-        [autoScroll]="autoScroll"
-        [localization]="localizationText"
-        (sendMessage)="sendMessage.emit($event)"
+            #messageBox
+            [messageBoxTemplate]="messageBoxTemplate"
+            [suggestionTemplate]="suggestionTemplate"
+            [suggestions]="suggestions"
+            [placeholder]="placeholder"
+            [authorId]="authorId"
+            [autoScroll]="autoScroll"
+            [inputValue]="inputValue"
+            [localization]="localizationText"
+            (sendMessage)="sendMessage.emit($event)"
+            (executeSuggestion)="suggestionExecute.emit($event)"
+            (fileSelect)="fileSelect.emit($event)"
+            (fileRemove)="fileRemove.emit($event)"
         >
         </kendo-message-box>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoChatLocalizedMessages]" }, { kind: "directive", type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll"], outputs: ["autoScrollChange"], exportAs: ["scrollAnchor"] }, { kind: "component", type: MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "messageTemplate", "localization", "user"], outputs: ["executeAction", "navigate", "resize"] }, { kind: "component", type: MessageBoxComponent, selector: "kendo-message-box", inputs: ["user", "autoScroll", "type", "localization", "messageBoxTemplate"], outputs: ["sendMessage"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoChatLocalizedMessages]" }, { kind: "directive", type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll"], outputs: ["autoScrollChange"], exportAs: ["scrollAnchor"] }, { kind: "component", type: MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "messageTemplate", "timestampTemplate", "statusTemplate", "localization", "authorId"], outputs: ["executeAction", "navigate", "resize"] }, { kind: "component", type: MessageBoxComponent, selector: "kendo-message-box", inputs: ["authorId", "autoScroll", "suggestions", "placeholder", "inputValue", "localization", "messageBoxTemplate", "suggestionTemplate"], outputs: ["sendMessage", "executeSuggestion", "fileSelect", "fileRemove"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "component", type: AppBarComponent, selector: "kendo-appbar", inputs: ["position", "positionMode", "themeColor"], exportAs: ["kendoAppBar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i3.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [
                         LocalizationService,
+                        ChatService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.chat'
@@ -220,6 +572,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     selector: 'kendo-chat',
                     template: `
         <ng-container kendoChatLocalizedMessages
+            i18n-deletedMessageSenderText="kendo.chat.deletedMessageSenderText|The text that is displayed when the sender deletes a message"
+            deletedMessageSenderText="You removed this message."
+
+            i18n-deletedMessageReceiverText="kendo.chat.deletedMessageReceiverText|The text that is displayed when the receiver deletes a message"
+            deletedMessageReceiverText="This message was removed by its sender."
+
             i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
             messagePlaceholder="Type a message..."
 
@@ -238,11 +596,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             i18n-messageAttachmentRightArrow="kendo.chat.messageAttachmentRightArrow|The text for the right arrow of the message attachments"
             messageAttachmentRightArrow="Next item"
 
-            i18n-messageAvatarAlt="kendo.chat.messageAvatarAlt|The alt attribute text for the avatar"
-            messageAvatarAlt="Avatar"
+            i18n-speechToTextButtonTitle="kendo.chat.speechToTextButtonTitle|Sets the Speech to Text button title."
+            speechToTextButtonTitle="Speech to Text"
+
+            i18n-fileSelectButtonTitle="kendo.chat.fileSelectButtonTitle|Sets the File Select button title."
+            fileSelectButtonTitle="Select files"
+
+            i18n-removeReplyTitle="kendo.chat.removeReplyTitle|Sets the title of the icon which removes the reply reference in the Message Box."
+            removeReplyTitle="Remove reply"
+
+            i18n-removeFileTitle="kendo.chat.removeFileTitle|Sets the title of the icon which removes a selected file in the Message Box."
+            removeFileTitle="Remove file"
+
+            i18n-expandTitle="kendo.chat.expandTitle|Sets the title of the icon which demonstrates that the message can be expanded."
+            expandTitle="Expand message"
+
+            i18n-collapseTitle="kendo.chat.collapseTitle|Sets the title of the icon which demonstrates that the message can be collapsed."
+            collapseTitle="Collapse message"
+
+            i18n-fileActionsTitle="kendo.chat.fileActionsTitle|Sets the title of the DropDownButton which opens the File actions."
+            fileActionsTitle="File actions"
+
+            i18n-downloadAllFilesText="kendo.chat.downloadAllFilesText|Sets the text that is displayed in the download section of the message."
+            downloadAllFilesText="Download all"
         >
         </ng-container>
 
+        <kendo-appbar *ngIf="chatHeaderTemplate" class="k-chat-header" positionMode="sticky">
+            <ng-container *ngTemplateOutlet="chatHeaderTemplate.templateRef"></ng-container>
+        </kendo-appbar>
+        <div class="k-message-reference k-message-reference-receiver k-message-pinned" *ngIf="pinnedMessage" (click)="scrollToPinnedMessage()">
+            <kendo-icon-wrapper
+                size="xlarge"
+                name="pin"
+                [svgIcon]="pinIcon"
+            >
+            </kendo-icon-wrapper>
+            <chat-message-reference-content [message]="pinnedMessage"></chat-message-reference-content>
+            <span class="k-spacer"></span>
+            <button kendoButton [svgIcon]="deleteIcon" (click)="unpin.emit(pinnedMessage)" fillMode="flat"></button>
+        </div>
         <div
             #messageList
             class="k-message-list k-avatars"
@@ -254,11 +647,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [(autoScroll)]="autoScroll"
         >
             <kendo-chat-message-list
-                [messages]="messages"
+                [messages]="processedMessages"
                 [messageTemplate]="messageTemplate"
+                [timestampTemplate]="timestampTemplate"
+                [statusTemplate]="statusTemplate"
                 [localization]="localizationText"
                 [attachmentTemplate]="attachmentTemplate"
-                [user]="user"
+                [authorId]="authorId"
                 (executeAction)="dispatchAction($event)"
                 (resize)="anchor.scrollToBottom()"
                 (navigate)="this.autoScroll = false"
@@ -266,29 +661,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </kendo-chat-message-list>
         </div>
         <kendo-message-box
-        #messageBox
-        [messageBoxTemplate]="messageBoxTemplate"
-        [type]="messageBoxType"
-        [user]="user"
-        [autoScroll]="autoScroll"
-        [localization]="localizationText"
-        (sendMessage)="sendMessage.emit($event)"
+            #messageBox
+            [messageBoxTemplate]="messageBoxTemplate"
+            [suggestionTemplate]="suggestionTemplate"
+            [suggestions]="suggestions"
+            [placeholder]="placeholder"
+            [authorId]="authorId"
+            [autoScroll]="autoScroll"
+            [inputValue]="inputValue"
+            [localization]="localizationText"
+            (sendMessage)="sendMessage.emit($event)"
+            (executeSuggestion)="suggestionExecute.emit($event)"
+            (fileSelect)="fileSelect.emit($event)"
+            (fileRemove)="fileRemove.emit($event)"
         >
         </kendo-message-box>
     `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, ScrollAnchorDirective, MessageListComponent, MessageBoxComponent]
+                    imports: [LocalizedMessagesDirective, ScrollAnchorDirective, MessageListComponent, MessageBoxComponent, MessageReferenceComponent, AppBarComponent, NgTemplateOutlet, NgIf, IconWrapperComponent, KENDO_BUTTON]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { messages: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i2.ChatService }]; }, propDecorators: { messages: [{
                 type: Input
-            }], user: [{
+            }], authorId: [{
                 type: Input
             }], messageBoxType: [{
                 type: Input
+            }], height: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], messageWidthMode: [{
+                type: Input
+            }], allowMessageCollapse: [{
+                type: Input
+            }], enableSpeechToText: [{
+                type: Input
+            }], enableFileSelect: [{
+                type: Input
+            }], messageToolbarActions: [{
+                type: Input
+            }], inputValue: [{
+                type: Input
+            }], messageContextMenuActions: [{
+                type: Input
+            }], fileActions: [{
+                type: Input
+            }], suggestions: [{
+                type: Input
+            }], messageToolbarVisibility: [{
+                type: Input
+            }], sendButtonSettings: [{
+                type: Input
+            }], modelFields: [{
+                type: Input
             }], sendMessage: [{
                 type: Output
+            }], toolbarActionClick: [{
+                type: Output
+            }], contextMenuActionClick: [{
+                type: Output
+            }], fileActionClick: [{
+                type: Output
+            }], download: [{
+                type: Output
             }], executeAction: [{
                 type: Output
+            }], suggestionExecute: [{
+                type: Output
+            }], fileSelect: [{
+                type: Output
+            }], fileRemove: [{
+                type: Output
+            }], unpin: [{
+                type: Output
+            }], inputValueChange: [{
+                type: Output
             }], className: [{
                 type: HostBinding,
                 args: ['class']
@@ -297,17 +746,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['attr.dir']
             }], attachmentTemplate: [{
                 type: ContentChild,
-                args: [AttachmentTemplateDirective, { static: false }]
+                args: [AttachmentTemplateDirective]
+            }], chatHeaderTemplate: [{
+                type: ContentChild,
+                args: [ChatHeaderTemplateDirective]
             }], messageTemplate: [{
                 type: ContentChild,
-                args: [MessageTemplateDirective, { static: false }]
+                args: [MessageTemplateDirective]
+            }], timestampTemplate: [{
+                type: ContentChild,
+                args: [ChatTimestampTemplateDirective]
+            }], suggestionTemplate: [{
+                type: ContentChild,
+                args: [ChatSuggestionTemplateDirective]
+            }], statusTemplate: [{
+                type: ContentChild,
+                args: [ChatStatusTemplateDirective]
             }], messageBoxTemplate: [{
                 type: ContentChild,
-                args: [ChatMessageBoxTemplateDirective, { static: false }]
+                args: [ChatMessageBoxTemplateDirective]
             }], messageBox: [{
                 type: ViewChild,
-                args: ['messageBox', { static: false }]
+                args: ['messageBox']
             }], messageList: [{
                 type: ViewChild,
-                args: ['messageList', { static: true }]
+                args: ['messageList', { static: true, read: ViewContainerRef }]
             }] } });