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

package/chat/api/files-layout.d.ts

@@ -0,0 +1,12 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * The layout of the files in the message bubble.
+ *
+ * 'horizontal' - Files are laid out in a row and are horizontally scrollable.
+ * 'vertical' - Files are displayed in a vertical stack.
+ * 'wrap' - Files wrap to new lines when space is limited.
+ */
+export type FilesLayoutMode = 'horizontal' | 'vertical' | 'wrap';

package/chat/api/index.d.ts

@@ -8,11 +8,14 @@ export * from './chat-file-interface';
 export * from './chat-suggestion.interface';
 export * from './execute-action-event';
 export * from './message-action';
-export * from './message-toolbar-visibility';
 export * from './message-width-mode';
 export * from './message.interface';
+export * from './message-settings.interface';
 export * from './post-message-event';
 export * from './user.interface';
 export * from './file-action';
 export * from './file-download-event.interface';
 export * from './send-button-settings';
+export * from './files-layout';
+export * from './suggestions-layout';
+export * from './timestamp-visibility';

package/chat/api/message-settings.interface.d.ts

@@ -0,0 +1,41 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { FileAction } from "./file-action";
+import { MessageAction } from "./message-action";
+import { MessageWidthMode } from "./message-width-mode";
+/**
+ * Represents the settings for the Chat message ([see example](slug:databinding_chat)).
+ *
+ */
+export interface MessageSettings {
+    /**
+     * If set to `true`, enables the expanding/collapsing of long messages.
+     */
+    allowMessageCollapse?: boolean;
+    /**
+     * Sets the array of actions that will be displayed in the message toolbar.
+    */
+    messageToolbarActions?: MessageAction[];
+    /**
+     * Sets the array of actions that will be displayed in the message context menu.
+    */
+    messageContextMenuActions?: MessageAction[];
+    /**
+     * Sets the array of actions that will be displayed for the message files.
+     */
+    fileActions?: FileAction[];
+    /**
+     * Sets the mode that will be used to determine the message width.
+     */
+    messageWidthMode?: MessageWidthMode;
+    /**
+     * Sets the visibility of the author's avatar for the message group.
+     */
+    showAvatar?: boolean;
+    /**
+     * Sets the visibility of the author's username for the message group.
+     */
+    showUsername?: boolean;
+}

package/chat/api/message-width-mode.d.ts

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 /**
- * Defines the possible modes for message width in the chat component.
+ * Defines the possible modes for message width in the Chat component.
  * - `full`: The message takes the full width of the chat container.
  * - `standard`: (Default) The message width is standard, allowing for a more compact layout.
  */

package/chat/api/message.interface.d.ts

@@ -14,7 +14,7 @@ export interface Message {
     /**
      * Sets a unique ID for the message.
      */
-    id?: string | number;
+    id: string | number;
     /**
      * Sets the text content for the message. Some messages may contain only attachments or quick actions.
      */
@@ -65,4 +65,8 @@ export interface Message {
      * Indicates if the message is still being typed by the user. If `true`, the Chat shows a typing indicator.
      */
     typing?: boolean;
+    /**
+     * Provides a reference to the original data item, if any.
+     */
+    dataItem?: any;
 }

package/chat/api/suggestions-layout.d.ts

@@ -0,0 +1,20 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Defines the layout for the suggestions list.
+ *
+ * 'scroll' - The list is scrollable when the content overflows.
+ * 'wrap' - The list wraps to new lines when space is limited.
+ * 'scrollbuttons' - The list is scrollable with navigation buttons when the content overflows.
+ */
+export type SuggestionsLayoutMode = 'scroll' | 'wrap' | 'scrollbuttons';
+/**
+ * Defines the layout for the quick actions list.
+ *
+ * 'scroll' - The list is scrollable when the content overflows.
+ * 'wrap' - The list wraps to new lines when space is limited.
+ * 'scrollbuttons' - The list is scrollable with navigation buttons when the content overflows.
+ */
+export type QuickActionsLayoutMode = 'scroll' | 'wrap' | 'scrollbuttons';

package/chat/api/timestamp-visibility.d.ts

@@ -0,0 +1,10 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Defines the possible modes for timestamp visibility in the Chat component.
+ * - `focus`: Timestamps are only visible for selected/focused messages (default Chat behavior).
+ * - `hidden`: Timestamps are hidden for all messages.
+ */
+export type TimestampVisibilityMode = 'focus' | 'hidden';

package/chat/chat.component.d.ts

@@ -5,8 +5,7 @@
 import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, NgZone, Renderer2, SimpleChanges, OnInit, ViewContainerRef } from '@angular/core';
 import { AttachmentTemplateDirective } from './templates/attachment-template.directive';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { MessageTemplateDirective } from './templates/message-template.directive';
-import { ExecuteActionEvent, FileAction, Message, SendMessageEvent, FileActionEvent, FileDownloadEvent, SendButtonSettings, MessageToolbarVisibility } from './api';
+import { ExecuteActionEvent, FileAction, Message, SendMessageEvent, FileActionEvent, FileDownloadEvent, SendButtonSettings, FilesLayoutMode, MessageSettings } from './api';
 import { MessageBoxType } from './common/models/message-box-options';
 import { ChatMessageBoxTemplateDirective } from './templates/message-box.directive';
 import { MessageBoxComponent } from './message-box.component';
@@ -22,6 +21,11 @@ import { ConversationalUIModelFields } from './common/models/model-fields';
 import { ChatTimestampTemplateDirective } from './templates/timestamp-template.directive';
 import { ChatStatusTemplateDirective } from './templates/status-template.directive';
 import { ChatSuggestionTemplateDirective } from './templates/suggestion-template.directive';
+import { ContextMenuComponent, ContextMenuPopupEvent } from '@progress/kendo-angular-menu';
+import { NoDataTemplateDirective, MessageTemplateDirective, AuthorMessageContentTemplateDirective, ReceiverMessageContentTemplateDirective, ReceiverMessageTemplateDirective, AuthorMessageTemplateDirective, MessageContentTemplateDirective } from './chat.directives';
+import { ChatUserStatusTemplateDirective } from './templates/user-status-template.directive';
+import { QuickActionsLayoutMode, SuggestionsLayoutMode } from './api/suggestions-layout';
+import { TimestampVisibilityMode } from './api/timestamp-visibility';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI Chat component for Angular](slug:overview_convui).
@@ -40,7 +44,7 @@ import * as i0 from "@angular/core";
  * ```
  *
  * @remarks
- * Supported children components are: {@link CustomMessagesComponent}, {@link HeroCardComponent}, {@link AttachmentTemplateDirective}, {@link ChatHeaderTemplateDirective}, {@link ChatMessageBoxTemplateDirective}, {@link MessageTemplateDirective}, {@link ChatStatusTemplateDirective}, {@link ChatSuggestionTemplateDirective}, {@link ChatTimestampTemplateDirective}.
+ * Supported children components are: {@link CustomMessagesComponent}, {@link HeroCardComponent}, {@link AttachmentTemplateDirective}, {@link ChatHeaderTemplateDirective}, {@link ChatMessageBoxTemplateDirective}, {@link MessageContentTemplateDirective}, {@link MessageTemplateDirective},{@link ChatStatusTemplateDirective}, {@link ChatSuggestionTemplateDirective}, {@link ChatTimestampTemplateDirective}, {@link ChatNoDataTemplateDirective}, {@link ChatUserStatusTemplateDirective}, {@link AuthorMessageContentTemplateDirective}, {@link ReceiverMessageContentTemplateDirective}, {@link ReceiverMessageTemplateDirective}, {@link AuthorMessageTemplateDirective}.
  */
 export declare class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     private localization;
@@ -49,13 +53,13 @@ export declare class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     private element;
     private chatService;
     /**
-     * Defines the array of messages displayed in the Chat.
-     * Each message can include a timestamp for unique identification.
-     * For more information, see [ngFor - Change Tracking](link:site.data.urls.angular['ngforof']#change-propagation).
+     * Sets the Chat messages.
+     * Accepts an array of `Message` objects, but can also accept custom data types.
+     * For more information, check [Data Binding](slug:databinding_chat) section in the documentation.
      */
-    messages: Message[];
+    messages: any[];
     /**
-     * Specifies the id representing the local user.
+     * Sets the ID that represents the local user.
      */
     authorId: string | number;
     /**
@@ -83,13 +87,34 @@ export declare class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
      */
     placeholder: string;
     /**
-     * Switches the width of the message between the predefined options.
+     * Controls the width of the message between the predefined options.
      *
      * @default 'standard'
      */
     messageWidthMode: MessageWidthMode;
+    /**
+     * Controls the visibility of timestamps in messages.
+     *
+     * @default 'focus'
+     */
+    timestampVisibility: TimestampVisibilityMode;
+    /**
+     * Controls the visibility of usernames in messages.
+     * When set to `true`, the username displays above each message bubble.
+     *
+     * @default true
+     */
+    showUsername: boolean;
+    /**
+     * Controls the avatar visibility for the messages.
+     * When set to `true`, the user avatar displays next to each message bubble.
+     *
+     * @default true
+     */
+    showAvatar: boolean;
     /**
      * Enables the expand or collapse functionality for messages.
+     *
      * @default false
      */
     allowMessageCollapse: boolean;
@@ -106,35 +131,47 @@ export declare class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
      */
     enableFileSelect: boolean | FileSelectSettings;
     /**
-     * Specifies the actions available in the message toolbar.
+     * Sets the actions of the message toolbar.
      * These actions display in the message toolbar and let you perform specific operations on the message.
+     *
      * @default []
      */
     messageToolbarActions: MessageAction[];
     /**
      * Sets the value of the Message Box.
+     *
      * @default ''
      */
     inputValue: string;
     /**
-     * Specifies the default actions available in the message context menu.
+     * Sets the settings for the author's messages.
+     */
+    authorMessageSettings: MessageSettings;
+    /**
+     * Sets the settings for the receivers' messages.
+     */
+    receiverMessageSettings: MessageSettings;
+    /**
+     * Sets the default actions that display 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: MessageAction[];
     /**
-     * Specifies the actions available in the message as a context menu.
+     * Sets the actions that display in the message as a context menu.
      * These actions display as menu items and let you perform specific operations on the message.
      * The default actions are `copy` and `reply` and are defined by their `id`.
      */
     set messageContextMenuActions(actions: MessageAction[] | null);
     get messageContextMenuActions(): MessageAction[];
     /**
-     * Specifies the default actions available in the file actions DropDownButton.
+     * Sets the default actions that display in the file actions DropDownButton.
+     *
+     * @default [{ id: 'download', label: 'Download', icon: 'download', svgIcon: downloadIcon, disabled: false }]
      */
     defaultFileActions: FileAction[];
     /**
-     * Specifies the actions available in the file as items of a DropDownButton.
+     * Sets the actions that display in the file as items of a DropDownButton.
      * These actions display when you click the file DropDownButton and let you perform specific operations on the file.
      * The default action is `download` and is defined by its `id`.
      *
@@ -143,17 +180,30 @@ export declare class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     set fileActions(actions: FileAction[] | null);
     get fileActions(): FileAction[];
     /**
-     * Sets the suggestions to display in the message input box.
-     * Suggestions display as a list of clickable items that let you quickly insert predefined text into the message input.
-     * @default []
+     * Sets the layout of the files in the message bubble.
+     *
+     * @default 'vertical'
      */
-    suggestions: ChatSuggestion[];
+    set messageFilesLayout(layout: FilesLayoutMode);
+    /**
+     * Sets the layout of the suggestions above the message input box.
+     *
+     * @default 'scroll'
+     */
+    set suggestionsLayout(layoutMode: SuggestionsLayoutMode);
+    /**
+     * Sets the layout of the quick actions suggested below the messages.
+     *
+     * @default 'scroll'
+     */
+    set quickActionsLayout(layoutMode: QuickActionsLayoutMode);
     /**
-     * Sets the visibility of the message toolbar.
+     * Sets the suggestions that display in the message input box.
+     * Suggestions display as a list of clickable items that let you quickly insert predefined text into the message input.
      *
-     * @default 'hidden'
+     * @default []
      */
-    messageToolbarVisibility: MessageToolbarVisibility;
+    suggestions: ChatSuggestion[];
     /**
      * Sets the send button settings for the Chat component.
      * Allows customization of the send button appearance, icons and disabled state.
@@ -163,69 +213,77 @@ export declare class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     sendButtonSettings: SendButtonSettings;
     /**
      * Sets the names of the model fields from which the Chat reads its data.
-     * Lets you map custom data structures to the expected `Message` format.
+     * Lets you map custom data types to the expected `Message` format.
      */
     set modelFields(value: ConversationalUIModelFields);
     get modelFields(): ConversationalUIModelFields;
     /**
-     * Emits when the user sends a message by clicking the **Send** button or pressing **Enter**.
+     * Fires 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: EventEmitter<SendMessageEvent>;
     /**
-     * Emits when the user clicks a quick action button in the message toolbar.
+     * Fires when the user clicks a quick action button in the message toolbar.
      */
     toolbarActionClick: EventEmitter<MessageActionEvent>;
     /**
-     * Emits when the user clicks an action in the message context menu.
+     * Fires when the user clicks an action in the message context menu.
      */
     contextMenuActionClick: EventEmitter<MessageActionEvent>;
     /**
-     * Emits when the user clicks an action in the file context menu.
+     * Fires when the user clicks an action in the file context menu.
      */
     fileActionClick: EventEmitter<FileActionEvent>;
     /**
-     * Emits when the user clicks an action in the file context menu.
+     * Fires when the user clicks an action in the file context menu.
      */
     download: EventEmitter<FileDownloadEvent>;
     /**
-     * Emits when the user clicks a quick action button.
+     * Fires 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`.
      *
      * The event is preventable. Calling [`preventDefault`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) suppresses the built-in action.
      */
     executeAction: EventEmitter<ExecuteActionEvent>;
     /**
-     * Emits when the user clicks a suggestion in the message input box.
+     * Fires when the user clicks a suggestion in the message input box.
      */
     suggestionExecute: EventEmitter<ChatSuggestion>;
     /**
-     * Emits when the user selects a file in the message input box.
+     * Fires when the user selects a file in the message input box.
      */
     fileSelect: EventEmitter<SelectEvent>;
     /**
-     * Emits when the user removes a file from the message input box.
+     * Fires when the user removes a file from the message input box.
      */
     fileRemove: EventEmitter<ChatFile>;
     /**
-     * Emits when the user unpins the pinned message.
+     * Fires when the user unpins the pinned message.
      * This event triggers when the user clicks the delete button on the pinned message.
      */
     unpin: EventEmitter<Message>;
     /**
-     * Emits when the user types in the message input box.
+     * Fires when the user types in the message input box.
      */
     inputValueChange: EventEmitter<string>;
     get className(): string;
     get dirAttr(): string;
+    set messagesContextMenu(contextMenu: ContextMenuComponent);
     attachmentTemplate: AttachmentTemplateDirective;
     chatHeaderTemplate: ChatHeaderTemplateDirective;
+    chatNoDataTemplate: NoDataTemplateDirective;
+    authorMessageContentTemplate: AuthorMessageContentTemplateDirective;
+    receiverMessageContentTemplate: ReceiverMessageContentTemplateDirective;
+    messageContentTemplate: MessageContentTemplateDirective;
+    authorMessageTemplate: AuthorMessageTemplateDirective;
+    receiverMessageTemplate: ReceiverMessageTemplateDirective;
     messageTemplate: MessageTemplateDirective;
     timestampTemplate: ChatTimestampTemplateDirective;
     suggestionTemplate: ChatSuggestionTemplateDirective;
     statusTemplate: ChatStatusTemplateDirective;
     messageBoxTemplate: ChatMessageBoxTemplateDirective;
+    userStatusTemplate: ChatUserStatusTemplateDirective;
     messageBox: MessageBoxComponent;
     /**
      * @hidden
@@ -233,9 +291,15 @@ export declare class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     messageList: ViewContainerRef;
     /**
      * @hidden
-     * Returns processed messages when model fields are used, otherwise returns original messages
+     * Returns processed messages when model fields are used, otherwise returns original messages.
      */
     get processedMessages(): Message[];
+    /**
+     * Gets the actions available in the message context menu.
+     *
+     * @hidden
+     */
+    get contextMenuActions(): any[];
     /**
      * @hidden
      */
@@ -261,6 +325,9 @@ export declare class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     private _modelFields;
     private _messageContextMenuActions;
     private _fileActions;
+    private _cachedProcessedMessages;
+    private _lastMessagesReference;
+    private _lastModelFields;
     constructor(localization: LocalizationService, zone: NgZone, renderer: Renderer2, element: ElementRef, chatService: ChatService);
     /**
      * @hidden
@@ -290,9 +357,21 @@ export declare class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
      * @hidden
      */
     scrollToPinnedMessage(): void;
+    /**
+     * @hidden
+     */
+    onContextMenuAction(action: MessageAction): void;
+    /**
+     * @hidden
+     */
+    handleMenuClose(event: ContextMenuPopupEvent): void;
+    /**
+     * @hidden
+     */
+    onActionButtonClick(event: MouseEvent): void;
     private findLastPinnedMessage;
     private updateChatServiceProperties;
     private mergeWithDefaultActions;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChatComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChatComponent, "kendo-chat", never, { "messages": { "alias": "messages"; "required": false; }; "authorId": { "alias": "authorId"; "required": false; }; "messageBoxType": { "alias": "messageBoxType"; "required": false; }; "height": { "alias": "height"; "required": false; }; "width": { "alias": "width"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "messageWidthMode": { "alias": "messageWidthMode"; "required": false; }; "allowMessageCollapse": { "alias": "allowMessageCollapse"; "required": false; }; "enableSpeechToText": { "alias": "enableSpeechToText"; "required": false; }; "enableFileSelect": { "alias": "enableFileSelect"; "required": false; }; "messageToolbarActions": { "alias": "messageToolbarActions"; "required": false; }; "inputValue": { "alias": "inputValue"; "required": false; }; "messageContextMenuActions": { "alias": "messageContextMenuActions"; "required": false; }; "fileActions": { "alias": "fileActions"; "required": false; }; "suggestions": { "alias": "suggestions"; "required": false; }; "messageToolbarVisibility": { "alias": "messageToolbarVisibility"; "required": false; }; "sendButtonSettings": { "alias": "sendButtonSettings"; "required": false; }; "modelFields": { "alias": "modelFields"; "required": false; }; }, { "sendMessage": "sendMessage"; "toolbarActionClick": "toolbarActionClick"; "contextMenuActionClick": "contextMenuActionClick"; "fileActionClick": "fileActionClick"; "download": "download"; "executeAction": "executeAction"; "suggestionExecute": "suggestionExecute"; "fileSelect": "fileSelect"; "fileRemove": "fileRemove"; "unpin": "unpin"; "inputValueChange": "inputValueChange"; }, ["attachmentTemplate", "chatHeaderTemplate", "messageTemplate", "timestampTemplate", "suggestionTemplate", "statusTemplate", "messageBoxTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChatComponent, "kendo-chat", never, { "messages": { "alias": "messages"; "required": false; }; "authorId": { "alias": "authorId"; "required": false; }; "messageBoxType": { "alias": "messageBoxType"; "required": false; }; "height": { "alias": "height"; "required": false; }; "width": { "alias": "width"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "messageWidthMode": { "alias": "messageWidthMode"; "required": false; }; "timestampVisibility": { "alias": "timestampVisibility"; "required": false; }; "showUsername": { "alias": "showUsername"; "required": false; }; "showAvatar": { "alias": "showAvatar"; "required": false; }; "allowMessageCollapse": { "alias": "allowMessageCollapse"; "required": false; }; "enableSpeechToText": { "alias": "enableSpeechToText"; "required": false; }; "enableFileSelect": { "alias": "enableFileSelect"; "required": false; }; "messageToolbarActions": { "alias": "messageToolbarActions"; "required": false; }; "inputValue": { "alias": "inputValue"; "required": false; }; "authorMessageSettings": { "alias": "authorMessageSettings"; "required": false; }; "receiverMessageSettings": { "alias": "receiverMessageSettings"; "required": false; }; "messageContextMenuActions": { "alias": "messageContextMenuActions"; "required": false; }; "fileActions": { "alias": "fileActions"; "required": false; }; "messageFilesLayout": { "alias": "messageFilesLayout"; "required": false; }; "suggestionsLayout": { "alias": "suggestionsLayout"; "required": false; }; "quickActionsLayout": { "alias": "quickActionsLayout"; "required": false; }; "suggestions": { "alias": "suggestions"; "required": false; }; "sendButtonSettings": { "alias": "sendButtonSettings"; "required": false; }; "modelFields": { "alias": "modelFields"; "required": false; }; }, { "sendMessage": "sendMessage"; "toolbarActionClick": "toolbarActionClick"; "contextMenuActionClick": "contextMenuActionClick"; "fileActionClick": "fileActionClick"; "download": "download"; "executeAction": "executeAction"; "suggestionExecute": "suggestionExecute"; "fileSelect": "fileSelect"; "fileRemove": "fileRemove"; "unpin": "unpin"; "inputValueChange": "inputValueChange"; }, ["attachmentTemplate", "chatHeaderTemplate", "chatNoDataTemplate", "authorMessageContentTemplate", "receiverMessageContentTemplate", "messageContentTemplate", "authorMessageTemplate", "receiverMessageTemplate", "messageTemplate", "timestampTemplate", "suggestionTemplate", "statusTemplate", "messageBoxTemplate", "userStatusTemplate"], never, true, never>;
 }

package/chat/chat.directives.d.ts

@@ -0,0 +1,18 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export { ChatComponent } from './chat.component';
+export { AttachmentTemplateDirective } from './templates/attachment-template.directive';
+export { MessageContentTemplateDirective } from './templates/message-content-template.directive';
+export { MessageTemplateDirective } from './templates/message-template.directive';
+export { ChatUserStatusTemplateDirective } from './templates/user-status-template.directive';
+export { ChatMessageBoxTemplateDirective } from './templates/message-box.directive';
+export { ChatHeaderTemplateDirective } from './templates/header-template.directive';
+export { NoDataTemplateDirective } from './templates/no-data-template.directive';
+export { ChatTimestampTemplateDirective } from './templates/timestamp-template.directive';
+export { ChatStatusTemplateDirective } from './templates/status-template.directive';
+export { AuthorMessageContentTemplateDirective } from './templates/author-message-content-template.directive';
+export { ReceiverMessageContentTemplateDirective } from './templates/receiver-message-content-template.directive';
+export { ReceiverMessageTemplateDirective } from './templates/receiver-message-template.directive';
+export { AuthorMessageTemplateDirective } from './templates/author-message-template.directive';

package/chat/chat.module.d.ts

@@ -6,13 +6,20 @@ import * as i0 from "@angular/core";
 import * as i1 from "./chat.component";
 import * as i2 from "./l10n/custom-messages.component";
 import * as i3 from "./templates/attachment-template.directive";
-import * as i4 from "./templates/message-template.directive";
-import * as i5 from "./cards/hero-card.component";
-import * as i6 from "./templates/message-box.directive";
-import * as i7 from "./templates/header-template.directive";
-import * as i8 from "./templates/timestamp-template.directive";
-import * as i9 from "./templates/status-template.directive";
-import * as i10 from "./templates/suggestion-template.directive";
+import * as i4 from "./templates/author-message-content-template.directive";
+import * as i5 from "./templates/receiver-message-content-template.directive";
+import * as i6 from "./templates/message-content-template.directive";
+import * as i7 from "./templates/author-message-template.directive";
+import * as i8 from "./templates/receiver-message-template.directive";
+import * as i9 from "./templates/message-template.directive";
+import * as i10 from "./cards/hero-card.component";
+import * as i11 from "./templates/message-box.directive";
+import * as i12 from "./templates/header-template.directive";
+import * as i13 from "./templates/no-data-template.directive";
+import * as i14 from "./templates/timestamp-template.directive";
+import * as i15 from "./templates/status-template.directive";
+import * as i16 from "./templates/suggestion-template.directive";
+import * as i17 from "./templates/user-status-template.directive";
 /**
  * Represents the [`NgModule`](link:site.data.urls.angular['ngmodules']) for the Chat component.
  *
@@ -36,6 +43,6 @@ import * as i10 from "./templates/suggestion-template.directive";
  */
 export declare class ChatModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ChatModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ChatModule, never, [typeof i1.ChatComponent, typeof i2.CustomMessagesComponent, typeof i3.AttachmentTemplateDirective, typeof i4.MessageTemplateDirective, typeof i5.HeroCardComponent, typeof i6.ChatMessageBoxTemplateDirective, typeof i7.ChatHeaderTemplateDirective, typeof i8.ChatTimestampTemplateDirective, typeof i9.ChatStatusTemplateDirective, typeof i10.ChatSuggestionTemplateDirective], [typeof i1.ChatComponent, typeof i2.CustomMessagesComponent, typeof i3.AttachmentTemplateDirective, typeof i4.MessageTemplateDirective, typeof i5.HeroCardComponent, typeof i6.ChatMessageBoxTemplateDirective, typeof i7.ChatHeaderTemplateDirective, typeof i8.ChatTimestampTemplateDirective, typeof i9.ChatStatusTemplateDirective, typeof i10.ChatSuggestionTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ChatModule, never, [typeof i1.ChatComponent, typeof i2.CustomMessagesComponent, typeof i3.AttachmentTemplateDirective, typeof i4.AuthorMessageContentTemplateDirective, typeof i5.ReceiverMessageContentTemplateDirective, typeof i6.MessageContentTemplateDirective, typeof i7.AuthorMessageTemplateDirective, typeof i8.ReceiverMessageTemplateDirective, typeof i9.MessageTemplateDirective, typeof i10.HeroCardComponent, typeof i11.ChatMessageBoxTemplateDirective, typeof i12.ChatHeaderTemplateDirective, typeof i13.NoDataTemplateDirective, typeof i14.ChatTimestampTemplateDirective, typeof i15.ChatStatusTemplateDirective, typeof i16.ChatSuggestionTemplateDirective, typeof i17.ChatUserStatusTemplateDirective], [typeof i1.ChatComponent, typeof i2.CustomMessagesComponent, typeof i3.AttachmentTemplateDirective, typeof i4.AuthorMessageContentTemplateDirective, typeof i5.ReceiverMessageContentTemplateDirective, typeof i6.MessageContentTemplateDirective, typeof i7.AuthorMessageTemplateDirective, typeof i8.ReceiverMessageTemplateDirective, typeof i9.MessageTemplateDirective, typeof i10.HeroCardComponent, typeof i11.ChatMessageBoxTemplateDirective, typeof i12.ChatHeaderTemplateDirective, typeof i13.NoDataTemplateDirective, typeof i14.ChatTimestampTemplateDirective, typeof i15.ChatStatusTemplateDirective, typeof i16.ChatSuggestionTemplateDirective, typeof i17.ChatUserStatusTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ChatModule>;
 }

package/chat/common/chat.service.d.ts

@@ -5,8 +5,10 @@
 import { ViewContainerRef, ElementRef } from '@angular/core';
 import { SpeechToTextButtonSettings } from '@progress/kendo-angular-buttons';
 import { MessageWidthMode } from '../api/message-width-mode';
-import { FileAction, FileActionEvent, FileDownloadEvent, Message, MessageAction, MessageActionEvent, MessageToolbarVisibility, SendButtonSettings } from '../api';
+import { FileAction, FileActionEvent, FileDownloadEvent, FilesLayoutMode, Message, MessageAction, MessageActionEvent, MessageSettings, QuickActionsLayoutMode, SendButtonSettings, SuggestionsLayoutMode } from '../api';
 import { FileSelectSettings } from '@progress/kendo-angular-upload';
+import { ContextMenuComponent } from '@progress/kendo-angular-menu';
+import { TimestampVisibilityMode } from '../api/timestamp-visibility';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -14,19 +16,32 @@ import * as i0 from "@angular/core";
 export declare class ChatService {
     authorId: string | number;
     messageWidthMode: MessageWidthMode;
-    allowMessageCollapse: boolean;
     messageToolbarActions: MessageAction[];
     messageContextMenuActions: MessageAction[];
+    calculatedContextMenuActions: MessageAction[];
     fileActions: FileAction[];
-    messageToolbarVisibility: MessageToolbarVisibility;
     toggleMessageState: boolean;
     reply: Message;
     messages: Message[];
     chatElement: ViewContainerRef;
     messageElementsMap: Map<string | number, ElementRef>;
+    messagesContextMenu: ContextMenuComponent;
+    activeMessage: Message;
+    activeMessageElement: any;
+    selectOnMenuClose: boolean;
+    active: boolean;
+    messageFilesLayout: FilesLayoutMode;
+    timestampVisibility: TimestampVisibilityMode;
+    showUsername: boolean;
+    showAvatar: boolean;
     private _enableSpeechToText;
     private _enableFileSelect;
     private _sendButtonSettings;
+    private _suggestionsLayout;
+    private _quickActionsLayout;
+    _authorMessageSettings: MessageSettings;
+    _receiverMessageSettings: MessageSettings;
+    private _allowMessageCollapse;
     private subjects;
     toolbarAction$: import("rxjs").Observable<MessageActionEvent>;
     contextMenuAction$: import("rxjs").Observable<MessageActionEvent>;
@@ -34,17 +49,35 @@ export declare class ChatService {
     fileDownload$: import("rxjs").Observable<FileDownloadEvent>;
     replyReferenceClick$: import("rxjs").Observable<string | number>;
     inputValueChange$: import("rxjs").Observable<string>;
+    contextMenuVisibilityChange$: import("rxjs").Observable<boolean>;
+    suggestionsLayoutChange$: import("rxjs").Observable<SuggestionsLayoutMode>;
+    quickActionsLayoutChange$: import("rxjs").Observable<SuggestionsLayoutMode>;
+    authorMessageSettingsChange$: import("rxjs").Observable<MessageSettings>;
+    receiverMessageSettingsChange$: import("rxjs").Observable<MessageSettings>;
+    allowMessageCollapseChange$: import("rxjs").Observable<boolean>;
+    set authorMessageSettings(settings: MessageSettings);
+    get authorMessageSettings(): MessageSettings;
+    set receiverMessageSettings(settings: MessageSettings);
+    get receiverMessageSettings(): MessageSettings;
     set enableSpeechToText(settings: boolean | SpeechToTextButtonSettings);
     get enableSpeechToText(): SpeechToTextButtonSettings;
     set enableFileSelect(settings: boolean | FileSelectSettings);
     get enableFileSelect(): FileSelectSettings;
     set sendButtonSettings(settings: boolean | SendButtonSettings);
     get sendButtonSettings(): SendButtonSettings;
+    set suggestionsLayout(layoutMode: SuggestionsLayoutMode);
+    get suggestionsLayout(): SuggestionsLayoutMode;
+    set quickActionsLayout(layoutMode: QuickActionsLayoutMode);
+    get quickActionsLayout(): QuickActionsLayoutMode;
+    set allowMessageCollapse(value: boolean);
+    get allowMessageCollapse(): boolean;
+    calculateContextMenuActions(isOwn: boolean): void;
     emit(subjectKey: string, value?: any): void;
     getMessageById(id: string | number): Message | undefined;
     registerMessageElement(messageId: string | number, elementRef: ElementRef): void;
     unregisterMessageElement(messageId: string | number): void;
     scrollToMessage(messageId: string | number): void;
+    focusActiveMessageElement(): void;
     private updateComponentSettings;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChatService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<ChatService>;

package/chat/common/models/model-fields.d.ts

@@ -84,12 +84,6 @@ export interface ConversationalUIModelFields {
      * @default "isPinned"
      */
     isPinnedField?: string;
-    /**
-     * Field name for the user who pinned the message.
-     *
-     * @default "pinnedBy"
-     */
-    pinnedByField?: string;
     /**
      * Field name for reply-to message ID.
      *