@progress/kendo-angular-conversational-ui 21.0.0-develop.8 → 21.0.0-develop.9

package/chat/common/utils.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Message, SendButtonSettings, MessageAction, FileAction } from "../api";
+import { Message, SendButtonSettings, MessageAction, FileAction, SuggestionsLayoutMode } from "../api";
 import { ConversationalUIModelFields } from "./models/model-fields";
 import { FileSelectSettings } from '@progress/kendo-angular-upload';
 import { SpeechToTextButtonSettings } from "@progress/kendo-angular-buttons";
@@ -40,6 +40,14 @@ export declare const SEND_BTN_DEFAULT_SETTINGS: SendButtonSettings;
  * @hidden
  */
 export declare const FILESELECT_DEFAULT_SETTINGS: FileSelectSettings;
+/**
+ * @hidden
+ */
+export declare const SUGGESTIONS_LAYOUT_DEFAULT_SETTINGS: SuggestionsLayoutMode;
+/**
+ * @hidden
+ */
+export type ScrollButtonType = 'prev' | 'next';
 /**
  * @hidden
  */
@@ -56,3 +64,7 @@ export declare const processMessages: (messages: any[], fields?: ConversationalU
  * @hidden
  */
 export declare const parseMessage: (message: any, fields?: ConversationalUIModelFields) => Message;
+/**
+ * @hidden
+ */
+export declare const transformActions: (actions: MessageAction[]) => any[];

package/chat/l10n/messages.d.ts

@@ -73,6 +73,14 @@ export declare class Messages extends ComponentMessages {
      * Sets the title of the DropDownButton that opens the File actions.
      */
     fileActionsTitle: string;
+    /**
+     * Sets the title of the button that shows the **Scroll right** when the suggestions list is scrollable with buttons.
+     */
+    nextSuggestionsButtonTitle: string;
+    /**
+     * Sets the title of the button that shows the **Scroll left** when the suggestions list is scrollable with buttons.
+     */
+    previousSuggestionsButtonTitle: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<Messages, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<Messages, "kendoConversationalUIMessages", never, { "deletedMessageSenderText": { "alias": "deletedMessageSenderText"; "required": false; }; "deletedMessageReceiverText": { "alias": "deletedMessageReceiverText"; "required": false; }; "downloadAllFilesText": { "alias": "downloadAllFilesText"; "required": false; }; "messagePlaceholder": { "alias": "messagePlaceholder"; "required": false; }; "send": { "alias": "send"; "required": false; }; "messageListLabel": { "alias": "messageListLabel"; "required": false; }; "messageBoxInputLabel": { "alias": "messageBoxInputLabel"; "required": false; }; "messageAttachmentLeftArrow": { "alias": "messageAttachmentLeftArrow"; "required": false; }; "messageAttachmentRightArrow": { "alias": "messageAttachmentRightArrow"; "required": false; }; "speechToTextButtonTitle": { "alias": "speechToTextButtonTitle"; "required": false; }; "fileSelectButtonTitle": { "alias": "fileSelectButtonTitle"; "required": false; }; "removeReplyTitle": { "alias": "removeReplyTitle"; "required": false; }; "removeFileTitle": { "alias": "removeFileTitle"; "required": false; }; "expandTitle": { "alias": "expandTitle"; "required": false; }; "collapseTitle": { "alias": "collapseTitle"; "required": false; }; "fileActionsTitle": { "alias": "fileActionsTitle"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Messages, "kendoConversationalUIMessages", never, { "deletedMessageSenderText": { "alias": "deletedMessageSenderText"; "required": false; }; "deletedMessageReceiverText": { "alias": "deletedMessageReceiverText"; "required": false; }; "downloadAllFilesText": { "alias": "downloadAllFilesText"; "required": false; }; "messagePlaceholder": { "alias": "messagePlaceholder"; "required": false; }; "send": { "alias": "send"; "required": false; }; "messageListLabel": { "alias": "messageListLabel"; "required": false; }; "messageBoxInputLabel": { "alias": "messageBoxInputLabel"; "required": false; }; "messageAttachmentLeftArrow": { "alias": "messageAttachmentLeftArrow"; "required": false; }; "messageAttachmentRightArrow": { "alias": "messageAttachmentRightArrow"; "required": false; }; "speechToTextButtonTitle": { "alias": "speechToTextButtonTitle"; "required": false; }; "fileSelectButtonTitle": { "alias": "fileSelectButtonTitle"; "required": false; }; "removeReplyTitle": { "alias": "removeReplyTitle"; "required": false; }; "removeFileTitle": { "alias": "removeFileTitle"; "required": false; }; "expandTitle": { "alias": "expandTitle"; "required": false; }; "collapseTitle": { "alias": "collapseTitle"; "required": false; }; "fileActionsTitle": { "alias": "fileActionsTitle"; "required": false; }; "nextSuggestionsButtonTitle": { "alias": "nextSuggestionsButtonTitle"; "required": false; }; "previousSuggestionsButtonTitle": { "alias": "previousSuggestionsButtonTitle"; "required": false; }; }, {}, never, never, false, never>;
 }

package/chat/message-list.component.d.ts

@@ -9,10 +9,16 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ChatItem } from './chat-item';
 import { ViewItem } from './chat-view';
 import { AttachmentTemplateDirective } from './templates/attachment-template.directive';
-import { MessageTemplateDirective } from './templates/message-template.directive';
+import { MessageContentTemplateDirective } from './templates/message-content-template.directive';
 import { ChatTimestampTemplateDirective } from './templates/timestamp-template.directive';
 import { ChatService } from './common/chat.service';
 import { ChatStatusTemplateDirective } from './templates/status-template.directive';
+import { ChatUserStatusTemplateDirective } from './templates/user-status-template.directive';
+import { MessageTemplateDirective } from './templates/message-template.directive';
+import { AuthorMessageContentTemplateDirective } from './templates/author-message-content-template.directive';
+import { ReceiverMessageContentTemplateDirective } from './templates/receiver-message-content-template.directive';
+import { AuthorMessageTemplateDirective } from './templates/author-message-template.directive';
+import { ReceiverMessageTemplateDirective } from './templates/receiver-message-template.directive';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -26,9 +32,15 @@ export declare class MessageListComponent implements OnInit, AfterViewInit, OnDe
     set messages(value: Message[]);
     get messages(): Message[];
     attachmentTemplate: AttachmentTemplateDirective;
+    authorMessageContentTemplate: AuthorMessageContentTemplateDirective;
+    receiverMessageContentTemplate: ReceiverMessageContentTemplateDirective;
+    messageContentTemplate: MessageContentTemplateDirective;
+    authorMessageTemplate: AuthorMessageTemplateDirective;
+    receiverMessageTemplate: ReceiverMessageTemplateDirective;
     messageTemplate: MessageTemplateDirective;
     timestampTemplate: ChatTimestampTemplateDirective;
     statusTemplate: ChatStatusTemplateDirective;
+    userStatusTemplate: ChatUserStatusTemplateDirective;
     localization: LocalizationService;
     authorId: string | number;
     executeAction: EventEmitter<ExecuteActionEvent>;
@@ -47,7 +59,9 @@ export declare class MessageListComponent implements OnInit, AfterViewInit, OnDe
     ngOnDestroy(): void;
     onResize(): void;
     onClick(message: any, event: any): void;
+    onContextMenuClick(message: Message, event: MouseEvent, messageElement?: any): void;
     formatTimeStamp(date: any): string;
+    calculateMessageWidthMode(message: any): boolean;
     onKeydown(e: any): void;
     onBlur(args: any): void;
     isOwnMessage(msg: Message): boolean;
@@ -56,11 +70,14 @@ export declare class MessageListComponent implements OnInit, AfterViewInit, OnDe
     select(item: ChatItem, event?: Event): void;
     last(items: any): any;
     handleMenuClose(state: boolean): void;
+    textFor(key: string): string;
     private onHomeOrEndKeyDown;
     private onTabKeyDown;
     private navigateTo;
     private scrollToAndSelectMessage;
-    textFor(key: string): string;
+    private openContextMenu;
+    private findMessageComponentFromActiveElement;
+    private findMessageComponentFromEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "kendo-chat-message-list", never, { "messages": { "alias": "messages"; "required": false; }; "attachmentTemplate": { "alias": "attachmentTemplate"; "required": false; }; "messageTemplate": { "alias": "messageTemplate"; "required": false; }; "timestampTemplate": { "alias": "timestampTemplate"; "required": false; }; "statusTemplate": { "alias": "statusTemplate"; "required": false; }; "localization": { "alias": "localization"; "required": false; }; "authorId": { "alias": "authorId"; "required": false; }; }, { "executeAction": "executeAction"; "navigate": "navigate"; "resize": "resize"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageListComponent, "kendo-chat-message-list", never, { "messages": { "alias": "messages"; "required": false; }; "attachmentTemplate": { "alias": "attachmentTemplate"; "required": false; }; "authorMessageContentTemplate": { "alias": "authorMessageContentTemplate"; "required": false; }; "receiverMessageContentTemplate": { "alias": "receiverMessageContentTemplate"; "required": false; }; "messageContentTemplate": { "alias": "messageContentTemplate"; "required": false; }; "authorMessageTemplate": { "alias": "authorMessageTemplate"; "required": false; }; "receiverMessageTemplate": { "alias": "receiverMessageTemplate"; "required": false; }; "messageTemplate": { "alias": "messageTemplate"; "required": false; }; "timestampTemplate": { "alias": "timestampTemplate"; "required": false; }; "statusTemplate": { "alias": "statusTemplate"; "required": false; }; "userStatusTemplate": { "alias": "userStatusTemplate"; "required": false; }; "localization": { "alias": "localization"; "required": false; }; "authorId": { "alias": "authorId"; "required": false; }; }, { "executeAction": "executeAction"; "navigate": "navigate"; "resize": "resize"; }, never, never, true, never>;
 }

package/chat/message.component.d.ts

@@ -2,10 +2,10 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, EventEmitter, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { Message } from './api/message.interface';
 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 { ChatFile } from './api/chat-file-interface';
 import { ContextMenuPopupEvent } from '@progress/kendo-angular-menu';
@@ -15,59 +15,83 @@ import { MessageAction } from './api';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ChatStatusTemplateDirective } from './templates/status-template.directive';
 import { FormattedTextPart } from './common/models/formatted-text-parts';
+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 * as i0 from "@angular/core";
 /**
  * @hidden
  */
-export declare class MessageComponent extends ChatItem implements OnDestroy {
+export declare class MessageComponent extends ChatItem implements OnInit, OnDestroy {
     element: ElementRef;
     private intl;
     chatService: ChatService;
     private localization;
-    message: Message;
+    private cdr;
+    set message(value: Message);
+    get message(): Message;
     tabbable: boolean;
-    template: MessageTemplateDirective;
+    authorMessageContentTemplate: AuthorMessageContentTemplateDirective;
+    receiverMessageContentTemplate: ReceiverMessageContentTemplateDirective;
+    messageContentTemplate: MessageContentTemplateDirective;
+    authorMessageTemplate: AuthorMessageTemplateDirective;
+    receiverMessageTemplate: ReceiverMessageTemplateDirective;
+    messageTemplate: MessageTemplateDirective;
     statusTemplate: ChatStatusTemplateDirective;
     showMessageTime: boolean;
     authorId: string | number;
-    contextMenuVisibilityChange: EventEmitter<boolean>;
     cssClass: boolean;
     get removedClass(): boolean;
     onKeyDown(event: KeyboardEvent): void;
     selected: boolean;
-    active: boolean;
-    selectOnMenuClose: boolean;
     get tabIndex(): string;
-    onContextMenu(event: MouseEvent): void;
     expandIcon: SVGIcon;
     collapseIcon: SVGIcon;
     downloadIcon: SVGIcon;
     isMessageExpanded: boolean;
-    contextMenuActions: any;
+    showExpandCollapseIcon: boolean;
     fileActions: any;
+    toolbarActions: MessageAction[];
     parts: FormattedTextPart[];
-    constructor(element: ElementRef, intl: IntlService, chatService: ChatService, localization: LocalizationService);
+    get useCustomBubbleTemplate(): boolean;
+    get useCustomContentTemplate(): boolean;
+    get hasMessageContent(): boolean;
+    get hasFiles(): boolean;
+    get hasMultipleFiles(): boolean;
+    get isActiveMessage(): boolean;
+    get isMessageExpandable(): boolean;
+    get showToolbar(): boolean;
+    private subs;
+    private _message;
+    constructor(element: ElementRef, intl: IntlService, chatService: ChatService, localization: LocalizationService, cdr: ChangeDetectorRef);
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    calculateExpandCollapseIconVisibility(): boolean;
+    getActiveBubbleTemplate(): MessageTemplateDirective | AuthorMessageTemplateDirective | ReceiverMessageTemplateDirective | null;
+    getActiveContentTemplate(): MessageContentTemplateDirective | AuthorMessageContentTemplateDirective | ReceiverMessageContentTemplateDirective | null;
+    getDeletedMessageText(): string;
     textFor(key: string): string;
     formatTimeStamp(date: any): string;
     focus(): void;
     onDownloadAll(): void;
     toggleMessageState(event: Event): void;
     onExpandableKeydown(event: KeyboardEvent): void;
-    isToolbarVisible(): boolean;
     onToolbarAction(event: Event, action: MessageAction, message: Message): void;
-    onContextMenuAction(action: MessageAction): void;
     onFileAction(action: any, file: ChatFile): void;
-    private transformActions;
     getMessageById(id: string | number): Message | undefined;
-    private getFormattedTextParts;
     onReplyReferenceClick(event: Event, replyToId: string | number): void;
     handleMenuClose(event?: ContextMenuPopupEvent): void;
     onActionButtonClick(event: MouseEvent): void;
     handleMenuOpen(): void;
     onActionPopupChange(expanded: boolean): void;
     isOwnMessage(msg: Message): boolean;
+    private getFormattedTextParts;
+    private getMessageSettings;
+    private getToolbarActions;
+    private getFileActions;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MessageComponent, "kendo-chat-message", never, { "message": { "alias": "message"; "required": false; }; "tabbable": { "alias": "tabbable"; "required": false; }; "template": { "alias": "template"; "required": false; }; "statusTemplate": { "alias": "statusTemplate"; "required": false; }; "showMessageTime": { "alias": "showMessageTime"; "required": false; }; "authorId": { "alias": "authorId"; "required": false; }; }, { "contextMenuVisibilityChange": "contextMenuVisibilityChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MessageComponent, "kendo-chat-message", never, { "message": { "alias": "message"; "required": false; }; "tabbable": { "alias": "tabbable"; "required": false; }; "authorMessageContentTemplate": { "alias": "authorMessageContentTemplate"; "required": false; }; "receiverMessageContentTemplate": { "alias": "receiverMessageContentTemplate"; "required": false; }; "messageContentTemplate": { "alias": "messageContentTemplate"; "required": false; }; "authorMessageTemplate": { "alias": "authorMessageTemplate"; "required": false; }; "receiverMessageTemplate": { "alias": "receiverMessageTemplate"; "required": false; }; "messageTemplate": { "alias": "messageTemplate"; "required": false; }; "statusTemplate": { "alias": "statusTemplate"; "required": false; }; "showMessageTime": { "alias": "showMessageTime"; "required": false; }; "authorId": { "alias": "authorId"; "required": false; }; }, {}, never, never, true, never>;
 }

package/chat/suggested-actions.component.d.ts

@@ -2,30 +2,51 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, EventEmitter, QueryList } from '@angular/core';
+import { ElementRef, EventEmitter, QueryList, AfterViewInit, OnDestroy, NgZone, Renderer2 } from '@angular/core';
 import { Action } from './api/action.interface';
 import { ChatItem } from './chat-item';
 import { ChatSuggestion } from './api/chat-suggestion.interface';
 import { ChatSuggestionTemplateDirective } from './templates/suggestion-template.directive';
+import { ChatService } from './common/chat.service';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { SuggestionsScrollService } from './common/scroll.service';
+import { ScrollButtonType } from './common/utils';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
-export declare class SuggestedActionsComponent extends ChatItem {
+export declare class SuggestedActionsComponent extends ChatItem implements AfterViewInit, OnDestroy {
+    private chatService;
+    private localization;
+    private scrollService;
+    private ngZone;
+    private renderer;
+    get defaultClass(): boolean;
+    get scrollableClass(): boolean;
+    get scrollButtonsClass(): boolean;
+    get role(): string;
     actions: Action[];
     suggestions: ChatSuggestion[];
     tabbable: boolean;
+    type: 'action' | 'suggestion';
     suggestionTemplate: ChatSuggestionTemplateDirective;
     dispatchAction: EventEmitter<Action>;
     dispatchSuggestion: EventEmitter<ChatSuggestion>;
-    defaultClass: boolean;
-    role: string;
     items: QueryList<ElementRef>;
+    suggestionsContainer: ElementRef;
+    prevScrollButton: ElementRef;
+    nextScrollButton: ElementRef;
     selectedIndex: number;
     activeIndex: number;
     active: boolean;
+    get hasScrollButtons(): boolean;
+    private subscriptions;
+    private resizeObserver;
     private actionKeyHandlers;
     private suggestionKeyHandlers;
+    constructor(chatService: ChatService, localization: LocalizationService, scrollService: SuggestionsScrollService, ngZone: NgZone, renderer: Renderer2);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     isSelected(index: number): boolean;
     isActive(index: number): boolean;
     actionClick(action: Action, index?: number): void;
@@ -33,8 +54,12 @@ export declare class SuggestedActionsComponent extends ChatItem {
     toggleActiveState(apply: boolean, index: number): void;
     actionKeydown(e: any, action: Action): void;
     suggestionKeydown(e: any, suggestion: ChatSuggestion): void;
+    getScrollButtonTitle(direction: string): string;
+    onScroll(event: Event): void;
+    scrollSuggestions(direction: ScrollButtonType): void;
     focus(): void;
+    private toggleScrollButtonState;
     private changeSelectedIndex;
     static ɵfac: i0.ɵɵFactoryDeclaration<SuggestedActionsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SuggestedActionsComponent, "kendo-chat-suggested-actions", never, { "actions": { "alias": "actions"; "required": false; }; "suggestions": { "alias": "suggestions"; "required": false; }; "tabbable": { "alias": "tabbable"; "required": false; }; "suggestionTemplate": { "alias": "suggestionTemplate"; "required": false; }; }, { "dispatchAction": "dispatchAction"; "dispatchSuggestion": "dispatchSuggestion"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SuggestedActionsComponent, "kendo-chat-suggested-actions", never, { "actions": { "alias": "actions"; "required": false; }; "suggestions": { "alias": "suggestions"; "required": false; }; "tabbable": { "alias": "tabbable"; "required": false; }; "type": { "alias": "type"; "required": false; }; "suggestionTemplate": { "alias": "suggestionTemplate"; "required": false; }; }, { "dispatchAction": "dispatchAction"; "dispatchSuggestion": "dispatchSuggestion"; }, never, never, true, never>;
 }

package/chat/templates/author-message-content-template.directive.d.ts

@@ -0,0 +1,28 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TemplateRef } from "@angular/core";
+import * as i0 from "@angular/core";
+/**
+ * Defines a template for displaying custom content inside the current user's messages in the Chat.
+ *
+ * To define a message template, nest an `<ng-template>` tag with the `kendoChatAuthorMessageContentTemplate` directive inside the `<kendo-chat>` component.
+ * The template context is set to the `message` instance.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatAuthorMessageContentTemplate let-message>
+ *     <div>Message: {{ message.text }}</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+export declare class AuthorMessageContentTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<AuthorMessageContentTemplateDirective, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AuthorMessageContentTemplateDirective, "[kendoChatAuthorMessageContentTemplate]", never, {}, {}, never, never, true, never>;
+}

package/chat/templates/author-message-template.directive.d.ts

@@ -0,0 +1,28 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TemplateRef } from "@angular/core";
+import * as i0 from "@angular/core";
+/**
+ * Defines a template for displaying fully custom Chat message bubbles for the current user.
+ *
+ * To define a message template, nest an `<ng-template>` tag with the `kendoChatAuthorMessageTemplate` directive inside the `<kendo-chat>` component.
+ * The template context is set to the `message` instance.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatAuthorMessageTemplate let-message>
+ *     <div>Message: {{ message.text }}</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+export declare class AuthorMessageTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<AuthorMessageTemplateDirective, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AuthorMessageTemplateDirective, "[kendoChatAuthorMessageTemplate]", never, {}, {}, never, never, true, never>;
+}

package/chat/templates/message-content-template.directive.d.ts

@@ -0,0 +1,28 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TemplateRef } from "@angular/core";
+import * as i0 from "@angular/core";
+/**
+ * Defines a template for displaying custom content inside the Chat messages.
+ *
+ * To define a message template, nest an `<ng-template>` tag with the `kendoChatMessageContentTemplate` directive inside the `<kendo-chat>` component.
+ * The template context is set to the `message` instance.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatMessageContentTemplate let-message>
+ *     <div>Message: {{ message.text }}</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+export declare class MessageContentTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<MessageContentTemplateDirective, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MessageContentTemplateDirective, "[kendoChatMessageContentTemplate]", never, {}, {}, never, never, true, never>;
+}

package/chat/templates/message-template.directive.d.ts

@@ -5,7 +5,7 @@
 import { TemplateRef } from "@angular/core";
 import * as i0 from "@angular/core";
 /**
- * Defines a template for displaying Chat messages.
+ * Defines a template for displaying fully custom Chat message bubbles.
  *
  * To define a message template, nest an `<ng-template>` tag with the `kendoChatMessageTemplate` directive inside the `<kendo-chat>` component.
  * The template context is set to the `message` instance.

package/chat/templates/no-data-template.directive.d.ts

@@ -0,0 +1,27 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TemplateRef } from "@angular/core";
+import * as i0 from "@angular/core";
+/**
+ * Defines a template for displaying custom content when there are no messages in the Chat.
+ *
+ * To define an empty Chat template, nest an `<ng-template>` tag with the `kendoChatNoDataTemplate` directive inside the `<kendo-chat>` component.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatNoDataTemplate>
+ *     <div>No messages.</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+export declare class NoDataTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<NoDataTemplateDirective, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NoDataTemplateDirective, "[kendoChatNoDataTemplate]", never, {}, {}, never, never, true, never>;
+}

package/chat/templates/receiver-message-content-template.directive.d.ts

@@ -0,0 +1,28 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TemplateRef } from "@angular/core";
+import * as i0 from "@angular/core";
+/**
+ * Defines a template for displaying custom content inside the other users' messages in the Chat.
+ *
+ * To define a message template, nest an `<ng-template>` tag with the `kendoChatReceiverMessageContentTemplate` directive inside the `<kendo-chat>` component.
+ * The template context is set to the `message` instance.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatReceiverMessageContentTemplate let-message>
+ *     <div>Message: {{ message.text }}</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+export declare class ReceiverMessageContentTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ReceiverMessageContentTemplateDirective, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ReceiverMessageContentTemplateDirective, "[kendoChatReceiverMessageContentTemplate]", never, {}, {}, never, never, true, never>;
+}

package/chat/templates/receiver-message-template.directive.d.ts

@@ -0,0 +1,28 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TemplateRef } from "@angular/core";
+import * as i0 from "@angular/core";
+/**
+ * Defines a template for displaying fully custom Chat message bubbles for the other users.
+ *
+ * To define a message template, nest an `<ng-template>` tag with the `kendoChatReceiverMessageTemplate` directive inside the `<kendo-chat>` component.
+ * The template context is set to the `message` instance.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatReceiverMessageTemplate let-message>
+ *     <div>Message: {{ message.text }}</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+export declare class ReceiverMessageTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ReceiverMessageTemplateDirective, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ReceiverMessageTemplateDirective, "[kendoChatReceiverMessageTemplate]", never, {}, {}, never, never, true, never>;
+}

package/chat/templates/user-status-template.directive.d.ts

@@ -0,0 +1,27 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TemplateRef } from "@angular/core";
+import * as i0 from "@angular/core";
+/**
+ * Defines a template for displaying user status in the Chat.
+ *
+ * To define a user status template, nest an `<ng-template>` tag with the `kendoChatUserStatusTemplate` directive inside the `<kendo-chat>` component.
+ * For more information, refer to the article on [message templates](slug:message_templates_chat).
+ *
+ * @example
+ * ```html
+ * <kendo-chat>
+ *   <ng-template kendoChatUserStatusTemplate let-status>
+ *     <div>{{ status }}</div>
+ *   </ng-template>
+ * </kendo-chat>
+ * ```
+ */
+export declare class ChatUserStatusTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChatUserStatusTemplateDirective, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ChatUserStatusTemplateDirective, "[kendoChatUserStatusTemplate]", never, {}, {}, never, never, true, never>;
+}

package/conversational-ui.module.d.ts

@@ -16,16 +16,23 @@ import * as i10 from "./ai-prompt/templates/aiprompt-output-body-template.direct
 import * as i11 from "./chat/chat.component";
 import * as i12 from "./chat/l10n/custom-messages.component";
 import * as i13 from "./chat/templates/attachment-template.directive";
-import * as i14 from "./chat/templates/message-template.directive";
-import * as i15 from "./chat/cards/hero-card.component";
-import * as i16 from "./chat/templates/message-box.directive";
-import * as i17 from "./chat/templates/header-template.directive";
-import * as i18 from "./chat/templates/timestamp-template.directive";
-import * as i19 from "./chat/templates/status-template.directive";
-import * as i20 from "./chat/templates/suggestion-template.directive";
-import * as i21 from "./inline-ai-prompt/inlineaiprompt.component";
-import * as i22 from "./inline-ai-prompt/output-template.directive";
-import * as i23 from "./inline-ai-prompt/localization/custom-messages.component";
+import * as i14 from "./chat/templates/author-message-content-template.directive";
+import * as i15 from "./chat/templates/receiver-message-content-template.directive";
+import * as i16 from "./chat/templates/message-content-template.directive";
+import * as i17 from "./chat/templates/author-message-template.directive";
+import * as i18 from "./chat/templates/receiver-message-template.directive";
+import * as i19 from "./chat/templates/message-template.directive";
+import * as i20 from "./chat/cards/hero-card.component";
+import * as i21 from "./chat/templates/message-box.directive";
+import * as i22 from "./chat/templates/header-template.directive";
+import * as i23 from "./chat/templates/no-data-template.directive";
+import * as i24 from "./chat/templates/timestamp-template.directive";
+import * as i25 from "./chat/templates/status-template.directive";
+import * as i26 from "./chat/templates/suggestion-template.directive";
+import * as i27 from "./chat/templates/user-status-template.directive";
+import * as i28 from "./inline-ai-prompt/inlineaiprompt.component";
+import * as i29 from "./inline-ai-prompt/output-template.directive";
+import * as i30 from "./inline-ai-prompt/localization/custom-messages.component";
 /**
  * Represents the [`NgModule`](link:site.data.urls.angular['ngmodules']) for the Conversational UI components.
  *
@@ -46,6 +53,6 @@ import * as i23 from "./inline-ai-prompt/localization/custom-messages.component"
  */
 export declare class ConversationalUIModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ConversationalUIModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ConversationalUIModule, never, [typeof i1.AIPromptComponent, typeof i2.PromptViewComponent, typeof i3.OutputViewComponent, typeof i4.CommandViewComponent, typeof i5.CustomViewComponent, typeof i6.AIPromptCustomMessagesComponent, typeof i7.AIPromptToolbarActionsDirective, typeof i8.AIPromptToolbarFocusableDirective, typeof i9.AIPromptOutputTemplateDirective, typeof i10.AIPromptOutputBodyTemplateDirective, typeof i11.ChatComponent, typeof i12.CustomMessagesComponent, typeof i13.AttachmentTemplateDirective, typeof i14.MessageTemplateDirective, typeof i15.HeroCardComponent, typeof i16.ChatMessageBoxTemplateDirective, typeof i17.ChatHeaderTemplateDirective, typeof i18.ChatTimestampTemplateDirective, typeof i19.ChatStatusTemplateDirective, typeof i20.ChatSuggestionTemplateDirective, typeof i21.InlineAIPromptComponent, typeof i22.InlineAIPromptOutputTemplateDirective, typeof i23.InlineAIPromptCustomMessagesComponent], [typeof i1.AIPromptComponent, typeof i2.PromptViewComponent, typeof i3.OutputViewComponent, typeof i4.CommandViewComponent, typeof i5.CustomViewComponent, typeof i6.AIPromptCustomMessagesComponent, typeof i7.AIPromptToolbarActionsDirective, typeof i8.AIPromptToolbarFocusableDirective, typeof i9.AIPromptOutputTemplateDirective, typeof i10.AIPromptOutputBodyTemplateDirective, typeof i11.ChatComponent, typeof i12.CustomMessagesComponent, typeof i13.AttachmentTemplateDirective, typeof i14.MessageTemplateDirective, typeof i15.HeroCardComponent, typeof i16.ChatMessageBoxTemplateDirective, typeof i17.ChatHeaderTemplateDirective, typeof i18.ChatTimestampTemplateDirective, typeof i19.ChatStatusTemplateDirective, typeof i20.ChatSuggestionTemplateDirective, typeof i21.InlineAIPromptComponent, typeof i22.InlineAIPromptOutputTemplateDirective, typeof i23.InlineAIPromptCustomMessagesComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ConversationalUIModule, never, [typeof i1.AIPromptComponent, typeof i2.PromptViewComponent, typeof i3.OutputViewComponent, typeof i4.CommandViewComponent, typeof i5.CustomViewComponent, typeof i6.AIPromptCustomMessagesComponent, typeof i7.AIPromptToolbarActionsDirective, typeof i8.AIPromptToolbarFocusableDirective, typeof i9.AIPromptOutputTemplateDirective, typeof i10.AIPromptOutputBodyTemplateDirective, typeof i11.ChatComponent, typeof i12.CustomMessagesComponent, typeof i13.AttachmentTemplateDirective, typeof i14.AuthorMessageContentTemplateDirective, typeof i15.ReceiverMessageContentTemplateDirective, typeof i16.MessageContentTemplateDirective, typeof i17.AuthorMessageTemplateDirective, typeof i18.ReceiverMessageTemplateDirective, typeof i19.MessageTemplateDirective, typeof i20.HeroCardComponent, typeof i21.ChatMessageBoxTemplateDirective, typeof i22.ChatHeaderTemplateDirective, typeof i23.NoDataTemplateDirective, typeof i24.ChatTimestampTemplateDirective, typeof i25.ChatStatusTemplateDirective, typeof i26.ChatSuggestionTemplateDirective, typeof i27.ChatUserStatusTemplateDirective, typeof i28.InlineAIPromptComponent, typeof i29.InlineAIPromptOutputTemplateDirective, typeof i30.InlineAIPromptCustomMessagesComponent], [typeof i1.AIPromptComponent, typeof i2.PromptViewComponent, typeof i3.OutputViewComponent, typeof i4.CommandViewComponent, typeof i5.CustomViewComponent, typeof i6.AIPromptCustomMessagesComponent, typeof i7.AIPromptToolbarActionsDirective, typeof i8.AIPromptToolbarFocusableDirective, typeof i9.AIPromptOutputTemplateDirective, typeof i10.AIPromptOutputBodyTemplateDirective, typeof i11.ChatComponent, typeof i12.CustomMessagesComponent, typeof i13.AttachmentTemplateDirective, typeof i14.AuthorMessageContentTemplateDirective, typeof i15.ReceiverMessageContentTemplateDirective, typeof i16.MessageContentTemplateDirective, typeof i17.AuthorMessageTemplateDirective, typeof i18.ReceiverMessageTemplateDirective, typeof i19.MessageTemplateDirective, typeof i20.HeroCardComponent, typeof i21.ChatMessageBoxTemplateDirective, typeof i22.ChatHeaderTemplateDirective, typeof i23.NoDataTemplateDirective, typeof i24.ChatTimestampTemplateDirective, typeof i25.ChatStatusTemplateDirective, typeof i26.ChatSuggestionTemplateDirective, typeof i27.ChatUserStatusTemplateDirective, typeof i28.InlineAIPromptComponent, typeof i29.InlineAIPromptOutputTemplateDirective, typeof i30.InlineAIPromptCustomMessagesComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ConversationalUIModule>;
 }

package/directives.d.ts

@@ -12,11 +12,17 @@ import { OutputViewComponent, PromptViewComponent } from "./ai-prompt/views";
 import { ChatComponent } from "./chat/chat.component";
 import { CustomMessagesComponent } from "./chat/l10n/custom-messages.component";
 import { AttachmentTemplateDirective } from "./chat/templates/attachment-template.directive";
+import { AuthorMessageContentTemplateDirective } from "./chat/templates/author-message-content-template.directive";
+import { ReceiverMessageContentTemplateDirective } from "./chat/templates/receiver-message-content-template.directive";
+import { MessageContentTemplateDirective } from "./chat/templates/message-content-template.directive";
+import { AuthorMessageTemplateDirective } from "./chat/templates/author-message-template.directive";
+import { ReceiverMessageTemplateDirective } from "./chat/templates/receiver-message-template.directive";
 import { MessageTemplateDirective } from "./chat/templates/message-template.directive";
 import { ChatTimestampTemplateDirective } from "./chat/templates/timestamp-template.directive";
 import { HeroCardComponent } from "./chat/cards/hero-card.component";
 import { ChatMessageBoxTemplateDirective } from "./chat/templates/message-box.directive";
 import { ChatHeaderTemplateDirective } from "./chat/templates/header-template.directive";
+import { NoDataTemplateDirective } from "./chat/templates/no-data-template.directive";
 import { AIPromptOutputBodyTemplateDirective } from "./ai-prompt/templates/aiprompt-output-body-template.directive";
 import { AIPromptOutputTemplateDirective } from "./ai-prompt/templates/aiprompt-output-template.directive";
 import { InlineAIPromptComponent } from "./inline-ai-prompt/inlineaiprompt.component";
@@ -24,6 +30,7 @@ import { InlineAIPromptOutputTemplateDirective } from "./inline-ai-prompt/output
 import { InlineAIPromptCustomMessagesComponent } from "./inline-ai-prompt/localization/custom-messages.component";
 import { ChatStatusTemplateDirective } from "./chat/templates/status-template.directive";
 import { ChatSuggestionTemplateDirective } from "./chat/templates/suggestion-template.directive";
+import { ChatUserStatusTemplateDirective } from "./chat/templates/user-status-template.directive";
 /**
  * Utility array that contains all AIPrompt related components and directives.
  *
@@ -59,7 +66,7 @@ export declare const KENDO_AIPROMPT: readonly [typeof AIPromptComponent, typeof
  * export class AppComponent {}
  * ```
  */
-export declare const KENDO_CHAT: readonly [typeof ChatComponent, typeof CustomMessagesComponent, typeof AttachmentTemplateDirective, typeof MessageTemplateDirective, typeof HeroCardComponent, typeof ChatMessageBoxTemplateDirective, typeof ChatHeaderTemplateDirective, typeof ChatTimestampTemplateDirective, typeof ChatStatusTemplateDirective, typeof ChatSuggestionTemplateDirective];
+export declare const KENDO_CHAT: readonly [typeof ChatComponent, typeof CustomMessagesComponent, typeof AttachmentTemplateDirective, typeof AuthorMessageContentTemplateDirective, typeof ReceiverMessageContentTemplateDirective, typeof MessageContentTemplateDirective, typeof AuthorMessageTemplateDirective, typeof ReceiverMessageTemplateDirective, typeof MessageTemplateDirective, typeof HeroCardComponent, typeof ChatMessageBoxTemplateDirective, typeof ChatHeaderTemplateDirective, typeof NoDataTemplateDirective, typeof ChatTimestampTemplateDirective, typeof ChatStatusTemplateDirective, typeof ChatSuggestionTemplateDirective, typeof ChatUserStatusTemplateDirective];
 /**
  * Utility array that contains all InlineAIPrompt related components and directives.
  *
@@ -98,4 +105,4 @@ export declare const KENDO_INLINEAIPROMPT: readonly [typeof InlineAIPromptCompon
  * export class AppComponent {}
  * ```
  */
-export declare const KENDO_CONVERSATIONALUI: readonly [typeof AIPromptComponent, typeof PromptViewComponent, typeof OutputViewComponent, typeof CommandViewComponent, typeof CustomViewComponent, typeof AIPromptCustomMessagesComponent, typeof AIPromptToolbarActionsDirective, typeof AIPromptToolbarFocusableDirective, typeof AIPromptOutputTemplateDirective, typeof AIPromptOutputBodyTemplateDirective, typeof ChatComponent, typeof CustomMessagesComponent, typeof AttachmentTemplateDirective, typeof MessageTemplateDirective, typeof HeroCardComponent, typeof ChatMessageBoxTemplateDirective, typeof ChatHeaderTemplateDirective, typeof ChatTimestampTemplateDirective, typeof ChatStatusTemplateDirective, typeof ChatSuggestionTemplateDirective, typeof InlineAIPromptComponent, typeof InlineAIPromptOutputTemplateDirective, typeof InlineAIPromptCustomMessagesComponent];
+export declare const KENDO_CONVERSATIONALUI: readonly [typeof AIPromptComponent, typeof PromptViewComponent, typeof OutputViewComponent, typeof CommandViewComponent, typeof CustomViewComponent, typeof AIPromptCustomMessagesComponent, typeof AIPromptToolbarActionsDirective, typeof AIPromptToolbarFocusableDirective, typeof AIPromptOutputTemplateDirective, typeof AIPromptOutputBodyTemplateDirective, typeof ChatComponent, typeof CustomMessagesComponent, typeof AttachmentTemplateDirective, typeof AuthorMessageContentTemplateDirective, typeof ReceiverMessageContentTemplateDirective, typeof MessageContentTemplateDirective, typeof AuthorMessageTemplateDirective, typeof ReceiverMessageTemplateDirective, typeof MessageTemplateDirective, typeof HeroCardComponent, typeof ChatMessageBoxTemplateDirective, typeof ChatHeaderTemplateDirective, typeof NoDataTemplateDirective, typeof ChatTimestampTemplateDirective, typeof ChatStatusTemplateDirective, typeof ChatSuggestionTemplateDirective, typeof ChatUserStatusTemplateDirective, typeof InlineAIPromptComponent, typeof InlineAIPromptOutputTemplateDirective, typeof InlineAIPromptCustomMessagesComponent];