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

package/chat/api/index.d.ts

@@ -18,3 +18,4 @@ 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

@@ -30,4 +30,12 @@ export interface MessageSettings {
      * 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/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

@@ -25,6 +25,7 @@ import { ContextMenuComponent, ContextMenuPopupEvent } from '@progress/kendo-ang
 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).
@@ -91,6 +92,24 @@ export declare class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
      * @default 'standard'
      */
     messageWidthMode: MessageWidthMode;
+    /**
+     * Controls the visibility of timestamps in messages.
+     *
+     * @default 'focus'
+     */
+    timestampVisibility: TimestampVisibilityMode;
+    /**
+     * Controls the visibility of the author's avatar for the message group.
+     *
+     * @default true
+     */
+    showUsername: boolean;
+    /**
+     * Controls the visibility of the author's username for the message group.
+     *
+     * @default true
+     */
+    showAvatar: boolean;
     /**
      * Enables the expand or collapse functionality for messages.
      *
@@ -352,5 +371,5 @@ export declare class ChatComponent implements OnInit, AfterViewInit, OnDestroy {
     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; }; "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>;
+    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/common/chat.service.d.ts

@@ -8,6 +8,7 @@ import { MessageWidthMode } from '../api/message-width-mode';
 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
@@ -30,6 +31,9 @@ export declare class ChatService {
     selectOnMenuClose: boolean;
     active: boolean;
     messageFilesLayout: FilesLayoutMode;
+    timestampVisibility: TimestampVisibilityMode;
+    showUsername: boolean;
+    showAvatar: boolean;
     private _enableSpeechToText;
     private _enableFileSelect;
     private _sendButtonSettings;

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

@@ -59,6 +59,8 @@ export declare class MessageListComponent implements OnInit, AfterViewInit, OnDe
     ngOnDestroy(): void;
     onResize(): void;
     onClick(message: any, event: any): void;
+    showGroupAuthor(group: any): boolean;
+    showGroupAvatar(group: any): boolean;
     onContextMenuClick(message: Message, event: MouseEvent, messageElement?: any): void;
     formatTimeStamp(date: any): string;
     calculateMessageWidthMode(message: any): boolean;

package/esm2022/chat/api/index.mjs

@@ -18,3 +18,4 @@ export * from './file-download-event.interface';
 export * from './send-button-settings';
 export * from './files-layout';
 export * from './suggestions-layout';
+export * from './timestamp-visibility';

package/esm2022/chat/api/timestamp-visibility.mjs

@@ -0,0 +1,5 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export {};

package/esm2022/chat/chat.component.mjs

@@ -101,6 +101,24 @@ export class ChatComponent {
      * @default 'standard'
      */
     messageWidthMode = 'standard';
+    /**
+     * Controls the visibility of timestamps in messages.
+     *
+     * @default 'focus'
+     */
+    timestampVisibility = 'focus';
+    /**
+     * Controls the visibility of the author's avatar for the message group.
+     *
+     * @default true
+     */
+    showUsername = true;
+    /**
+     * Controls the visibility of the author's username for the message group.
+     *
+     * @default true
+     */
+    showAvatar = true;
     /**
      * Enables the expand or collapse functionality for messages.
      *
@@ -379,6 +397,9 @@ export class ChatComponent {
      */
     ngOnInit() {
         this.chatService.messageWidthMode = this.messageWidthMode;
+        this.chatService.timestampVisibility = this.timestampVisibility;
+        this.chatService.showUsername = this.showUsername;
+        this.chatService.showAvatar = this.showAvatar;
         this.chatService.allowMessageCollapse = this.allowMessageCollapse;
         this.chatService.enableSpeechToText = this.enableSpeechToText;
         this.chatService.sendButtonSettings = this.sendButtonSettings;
@@ -428,6 +449,9 @@ export class ChatComponent {
         this.updateChatServiceProperties([
             'authorId',
             'messageWidthMode',
+            'timestampVisibility',
+            'showUsername',
+            'showAvatar',
             'allowMessageCollapse',
             'enableSpeechToText',
             'sendButtonSettings',
@@ -545,7 +569,7 @@ export class ChatComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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: "18.2.14", 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", authorMessageSettings: "authorMessageSettings", receiverMessageSettings: "receiverMessageSettings", messageContextMenuActions: "messageContextMenuActions", fileActions: "fileActions", messageFilesLayout: "messageFilesLayout", suggestionsLayout: "suggestionsLayout", quickActionsLayout: "quickActionsLayout", suggestions: "suggestions", 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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChatComponent, isStandalone: true, selector: "kendo-chat", inputs: { messages: "messages", authorId: "authorId", messageBoxType: "messageBoxType", height: "height", width: "width", placeholder: "placeholder", messageWidthMode: "messageWidthMode", timestampVisibility: "timestampVisibility", showUsername: "showUsername", showAvatar: "showAvatar", allowMessageCollapse: "allowMessageCollapse", enableSpeechToText: "enableSpeechToText", enableFileSelect: "enableFileSelect", messageToolbarActions: "messageToolbarActions", inputValue: "inputValue", authorMessageSettings: "authorMessageSettings", receiverMessageSettings: "receiverMessageSettings", messageContextMenuActions: "messageContextMenuActions", fileActions: "fileActions", messageFilesLayout: "messageFilesLayout", suggestionsLayout: "suggestionsLayout", quickActionsLayout: "quickActionsLayout", suggestions: "suggestions", 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,
             SuggestionsScrollService,
@@ -854,6 +878,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], messageWidthMode: [{
                 type: Input
+            }], timestampVisibility: [{
+                type: Input
+            }], showUsername: [{
+                type: Input
+            }], showAvatar: [{
+                type: Input
             }], allowMessageCollapse: [{
                 type: Input
             }], enableSpeechToText: [{

package/esm2022/chat/common/chat.service.mjs

@@ -27,6 +27,9 @@ export class ChatService {
     selectOnMenuClose = false;
     active = false;
     messageFilesLayout = 'vertical';
+    timestampVisibility = 'focus';
+    showUsername = true;
+    showAvatar = true;
     _enableSpeechToText = STB_DEFAULT_SETTINGS;
     _enableFileSelect = FILESELECT_DEFAULT_SETTINGS;
     _sendButtonSettings = SEND_BTN_DEFAULT_SETTINGS;

package/esm2022/chat/message-list.component.mjs

@@ -7,7 +7,7 @@
 import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, Output, QueryList, Renderer2, ViewChildren } from '@angular/core';
 import { NgFor, NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet } from '@angular/common';
 import { ExecuteActionEvent } from './api';
-import { Keys, normalizeNumpadKeys, ResizeSensorComponent } from '@progress/kendo-angular-common';
+import { isPresent, Keys, normalizeNumpadKeys, ResizeSensorComponent } from '@progress/kendo-angular-common';
 import { IntlService } from '@progress/kendo-angular-intl';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { closest, DOWNLOAD_ALL_SELECTOR, FILE_ACTION_BTN_SELECTOR } from './common/utils';
@@ -121,6 +121,20 @@ export class MessageListComponent {
     onClick(message, event) {
         this.select(message, event);
     }
+    showGroupAuthor(group) {
+        const messageSettings = this.isOwnMessage(group.messages[0]) ? this.chatService.authorMessageSettings : this.chatService.receiverMessageSettings;
+        if (isPresent(messageSettings?.showUsername)) {
+            return messageSettings.showUsername && group.author.name;
+        }
+        return this.chatService.showUsername && group.author.name;
+    }
+    showGroupAvatar(group) {
+        const messageSettings = this.isOwnMessage(group.messages[0]) ? this.chatService.authorMessageSettings : this.chatService.receiverMessageSettings;
+        if (isPresent(messageSettings?.showAvatar)) {
+            return messageSettings.showAvatar && group.author.avatarUrl;
+        }
+        return this.chatService.showAvatar && group.author.avatarUrl;
+    }
     onContextMenuClick(message, event, messageElement) {
         this.chatService.calculateContextMenuActions(this.isOwnMessage(message));
         if (this.chatService.calculatedContextMenuActions.length > 0) {
@@ -316,11 +330,11 @@ export class MessageListComponent {
                     class="k-message-group"
                     [class.k-message-group-sender]="isOwnMessage(group.messages[0])"
                     [class.k-message-group-receiver]="!isOwnMessage(group.messages[0])"
-                    [class.k-no-avatar]="!group.author.avatarUrl"
+                    [class.k-no-avatar]="!showGroupAvatar(group)"
                     [class.k-message-group-full-width]="calculateMessageWidthMode(group.messages[0])"
                 >
                     <div
-                        *ngIf="!userStatusTemplate?.templateRef && group.author.avatarUrl"
+                        *ngIf="!userStatusTemplate?.templateRef && showGroupAvatar(group)"
                         class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
                     >
                         <span class="k-avatar-image">
@@ -330,7 +344,7 @@ export class MessageListComponent {
                             />
                         </span>
                     </div>
-                    <div class="k-chat-user-status-wrapper" *ngIf="group.author.avatarUrl && userStatusTemplate?.templateRef">
+                    <div class="k-chat-user-status-wrapper" *ngIf="userStatusTemplate?.templateRef && showGroupAvatar(group)">
                         <div
                             class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
                         >
@@ -350,18 +364,10 @@ export class MessageListComponent {
                         </div>
                     </div>
                     <div class="k-message-group-content">
-                        <p *ngIf="group.author.name" class="k-message-author">{{ group.author.name }}</p>
+                        <p *ngIf="showGroupAuthor(group)" class="k-message-author">{{ group.author.name }}</p>
                         <ng-container
                             *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
                         >
-                            <div
-                                *ngIf="msg.user?.avatarUrl"
-                                class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
-                            >
-                                <span class="k-avatar-image">
-                                    <img [src]="msg.user?.avatarUrl">
-                                </span>
-                            </div>
                             <kendo-chat-message #message
                                 [message]="msg"
                                 [tabbable]="lastGroup && lastMessage"
@@ -438,11 +444,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     class="k-message-group"
                     [class.k-message-group-sender]="isOwnMessage(group.messages[0])"
                     [class.k-message-group-receiver]="!isOwnMessage(group.messages[0])"
-                    [class.k-no-avatar]="!group.author.avatarUrl"
+                    [class.k-no-avatar]="!showGroupAvatar(group)"
                     [class.k-message-group-full-width]="calculateMessageWidthMode(group.messages[0])"
                 >
                     <div
-                        *ngIf="!userStatusTemplate?.templateRef && group.author.avatarUrl"
+                        *ngIf="!userStatusTemplate?.templateRef && showGroupAvatar(group)"
                         class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
                     >
                         <span class="k-avatar-image">
@@ -452,7 +458,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             />
                         </span>
                     </div>
-                    <div class="k-chat-user-status-wrapper" *ngIf="group.author.avatarUrl && userStatusTemplate?.templateRef">
+                    <div class="k-chat-user-status-wrapper" *ngIf="userStatusTemplate?.templateRef && showGroupAvatar(group)">
                         <div
                             class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
                         >
@@ -472,18 +478,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         </div>
                     </div>
                     <div class="k-message-group-content">
-                        <p *ngIf="group.author.name" class="k-message-author">{{ group.author.name }}</p>
+                        <p *ngIf="showGroupAuthor(group)" class="k-message-author">{{ group.author.name }}</p>
                         <ng-container
                             *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
                         >
-                            <div
-                                *ngIf="msg.user?.avatarUrl"
-                                class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
-                            >
-                                <span class="k-avatar-image">
-                                    <img [src]="msg.user?.avatarUrl">
-                                </span>
-                            </div>
                             <kendo-chat-message #message
                                 [message]="msg"
                                 [tabbable]="lastGroup && lastMessage"

package/esm2022/chat/message.component.mjs

@@ -344,7 +344,7 @@ export class MessageComponent extends ChatItem {
             <time
                 [attr.aria-hidden]="!selected"
                 class="k-message-time"
-                *ngIf="message.timestamp"
+                *ngIf="chatService.timestampVisibility === 'focus' && message.timestamp"
             >
                 {{ formatTimeStamp(message.timestamp) }}
             </time>
@@ -522,7 +522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             <time
                 [attr.aria-hidden]="!selected"
                 class="k-message-time"
-                *ngIf="message.timestamp"
+                *ngIf="chatService.timestampVisibility === 'focus' && message.timestamp"
             >
                 {{ formatTimeStamp(message.timestamp) }}
             </time>

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1762256450,
-    version: '21.0.0-develop.17',
+    publishDate: 1762263641,
+    version: '21.0.0-develop.18',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/fesm2022/progress-kendo-angular-conversational-ui.mjs

@@ -216,8 +216,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1762256450,
-    version: '21.0.0-develop.17',
+    publishDate: 1762263641,
+    version: '21.0.0-develop.18',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2131,6 +2131,9 @@ class ChatService {
     selectOnMenuClose = false;
     active = false;
     messageFilesLayout = 'vertical';
+    timestampVisibility = 'focus';
+    showUsername = true;
+    showAvatar = true;
     _enableSpeechToText = STB_DEFAULT_SETTINGS;
     _enableFileSelect = FILESELECT_DEFAULT_SETTINGS;
     _sendButtonSettings = SEND_BTN_DEFAULT_SETTINGS;
@@ -4214,7 +4217,7 @@ class MessageComponent extends ChatItem {
             <time
                 [attr.aria-hidden]="!selected"
                 class="k-message-time"
-                *ngIf="message.timestamp"
+                *ngIf="chatService.timestampVisibility === 'focus' && message.timestamp"
             >
                 {{ formatTimeStamp(message.timestamp) }}
             </time>
@@ -4392,7 +4395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             <time
                 [attr.aria-hidden]="!selected"
                 class="k-message-time"
-                *ngIf="message.timestamp"
+                *ngIf="chatService.timestampVisibility === 'focus' && message.timestamp"
             >
                 {{ formatTimeStamp(message.timestamp) }}
             </time>
@@ -5032,6 +5035,20 @@ class MessageListComponent {
     onClick(message, event) {
         this.select(message, event);
     }
+    showGroupAuthor(group) {
+        const messageSettings = this.isOwnMessage(group.messages[0]) ? this.chatService.authorMessageSettings : this.chatService.receiverMessageSettings;
+        if (isPresent(messageSettings?.showUsername)) {
+            return messageSettings.showUsername && group.author.name;
+        }
+        return this.chatService.showUsername && group.author.name;
+    }
+    showGroupAvatar(group) {
+        const messageSettings = this.isOwnMessage(group.messages[0]) ? this.chatService.authorMessageSettings : this.chatService.receiverMessageSettings;
+        if (isPresent(messageSettings?.showAvatar)) {
+            return messageSettings.showAvatar && group.author.avatarUrl;
+        }
+        return this.chatService.showAvatar && group.author.avatarUrl;
+    }
     onContextMenuClick(message, event, messageElement) {
         this.chatService.calculateContextMenuActions(this.isOwnMessage(message));
         if (this.chatService.calculatedContextMenuActions.length > 0) {
@@ -5227,11 +5244,11 @@ class MessageListComponent {
                     class="k-message-group"
                     [class.k-message-group-sender]="isOwnMessage(group.messages[0])"
                     [class.k-message-group-receiver]="!isOwnMessage(group.messages[0])"
-                    [class.k-no-avatar]="!group.author.avatarUrl"
+                    [class.k-no-avatar]="!showGroupAvatar(group)"
                     [class.k-message-group-full-width]="calculateMessageWidthMode(group.messages[0])"
                 >
                     <div
-                        *ngIf="!userStatusTemplate?.templateRef && group.author.avatarUrl"
+                        *ngIf="!userStatusTemplate?.templateRef && showGroupAvatar(group)"
                         class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
                     >
                         <span class="k-avatar-image">
@@ -5241,7 +5258,7 @@ class MessageListComponent {
                             />
                         </span>
                     </div>
-                    <div class="k-chat-user-status-wrapper" *ngIf="group.author.avatarUrl && userStatusTemplate?.templateRef">
+                    <div class="k-chat-user-status-wrapper" *ngIf="userStatusTemplate?.templateRef && showGroupAvatar(group)">
                         <div
                             class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
                         >
@@ -5261,18 +5278,10 @@ class MessageListComponent {
                         </div>
                     </div>
                     <div class="k-message-group-content">
-                        <p *ngIf="group.author.name" class="k-message-author">{{ group.author.name }}</p>
+                        <p *ngIf="showGroupAuthor(group)" class="k-message-author">{{ group.author.name }}</p>
                         <ng-container
                             *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
                         >
-                            <div
-                                *ngIf="msg.user?.avatarUrl"
-                                class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
-                            >
-                                <span class="k-avatar-image">
-                                    <img [src]="msg.user?.avatarUrl">
-                                </span>
-                            </div>
                             <kendo-chat-message #message
                                 [message]="msg"
                                 [tabbable]="lastGroup && lastMessage"
@@ -5349,11 +5358,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     class="k-message-group"
                     [class.k-message-group-sender]="isOwnMessage(group.messages[0])"
                     [class.k-message-group-receiver]="!isOwnMessage(group.messages[0])"
-                    [class.k-no-avatar]="!group.author.avatarUrl"
+                    [class.k-no-avatar]="!showGroupAvatar(group)"
                     [class.k-message-group-full-width]="calculateMessageWidthMode(group.messages[0])"
                 >
                     <div
-                        *ngIf="!userStatusTemplate?.templateRef && group.author.avatarUrl"
+                        *ngIf="!userStatusTemplate?.templateRef && showGroupAvatar(group)"
                         class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
                     >
                         <span class="k-avatar-image">
@@ -5363,7 +5372,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             />
                         </span>
                     </div>
-                    <div class="k-chat-user-status-wrapper" *ngIf="group.author.avatarUrl && userStatusTemplate?.templateRef">
+                    <div class="k-chat-user-status-wrapper" *ngIf="userStatusTemplate?.templateRef && showGroupAvatar(group)">
                         <div
                             class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
                         >
@@ -5383,18 +5392,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         </div>
                     </div>
                     <div class="k-message-group-content">
-                        <p *ngIf="group.author.name" class="k-message-author">{{ group.author.name }}</p>
+                        <p *ngIf="showGroupAuthor(group)" class="k-message-author">{{ group.author.name }}</p>
                         <ng-container
                             *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
                         >
-                            <div
-                                *ngIf="msg.user?.avatarUrl"
-                                class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
-                            >
-                                <span class="k-avatar-image">
-                                    <img [src]="msg.user?.avatarUrl">
-                                </span>
-                            </div>
                             <kendo-chat-message #message
                                 [message]="msg"
                                 [tabbable]="lastGroup && lastMessage"
@@ -5846,6 +5847,24 @@ class ChatComponent {
      * @default 'standard'
      */
     messageWidthMode = 'standard';
+    /**
+     * Controls the visibility of timestamps in messages.
+     *
+     * @default 'focus'
+     */
+    timestampVisibility = 'focus';
+    /**
+     * Controls the visibility of the author's avatar for the message group.
+     *
+     * @default true
+     */
+    showUsername = true;
+    /**
+     * Controls the visibility of the author's username for the message group.
+     *
+     * @default true
+     */
+    showAvatar = true;
     /**
      * Enables the expand or collapse functionality for messages.
      *
@@ -6124,6 +6143,9 @@ class ChatComponent {
      */
     ngOnInit() {
         this.chatService.messageWidthMode = this.messageWidthMode;
+        this.chatService.timestampVisibility = this.timestampVisibility;
+        this.chatService.showUsername = this.showUsername;
+        this.chatService.showAvatar = this.showAvatar;
         this.chatService.allowMessageCollapse = this.allowMessageCollapse;
         this.chatService.enableSpeechToText = this.enableSpeechToText;
         this.chatService.sendButtonSettings = this.sendButtonSettings;
@@ -6173,6 +6195,9 @@ class ChatComponent {
         this.updateChatServiceProperties([
             'authorId',
             'messageWidthMode',
+            'timestampVisibility',
+            'showUsername',
+            'showAvatar',
             'allowMessageCollapse',
             'enableSpeechToText',
             'sendButtonSettings',
@@ -6290,7 +6315,7 @@ class ChatComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: ChatService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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", authorMessageSettings: "authorMessageSettings", receiverMessageSettings: "receiverMessageSettings", messageContextMenuActions: "messageContextMenuActions", fileActions: "fileActions", messageFilesLayout: "messageFilesLayout", suggestionsLayout: "suggestionsLayout", quickActionsLayout: "quickActionsLayout", suggestions: "suggestions", 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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChatComponent, isStandalone: true, selector: "kendo-chat", inputs: { messages: "messages", authorId: "authorId", messageBoxType: "messageBoxType", height: "height", width: "width", placeholder: "placeholder", messageWidthMode: "messageWidthMode", timestampVisibility: "timestampVisibility", showUsername: "showUsername", showAvatar: "showAvatar", allowMessageCollapse: "allowMessageCollapse", enableSpeechToText: "enableSpeechToText", enableFileSelect: "enableFileSelect", messageToolbarActions: "messageToolbarActions", inputValue: "inputValue", authorMessageSettings: "authorMessageSettings", receiverMessageSettings: "receiverMessageSettings", messageContextMenuActions: "messageContextMenuActions", fileActions: "fileActions", messageFilesLayout: "messageFilesLayout", suggestionsLayout: "suggestionsLayout", quickActionsLayout: "quickActionsLayout", suggestions: "suggestions", 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,
             SuggestionsScrollService,
@@ -6599,6 +6624,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], messageWidthMode: [{
                 type: Input
+            }], timestampVisibility: [{
+                type: Input
+            }], showUsername: [{
+                type: Input
+            }], showAvatar: [{
+                type: Input
             }], allowMessageCollapse: [{
                 type: Input
             }], enableSpeechToText: [{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-conversational-ui",
-  "version": "21.0.0-develop.17",
+  "version": "21.0.0-develop.18",
   "description": "Kendo UI for Angular Conversational UI components",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -47,7 +47,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1762256450,
+      "publishDate": 1762263641,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -57,22 +57,22 @@
     "@angular/core": "18 - 20",
     "@angular/platform-browser": "18 - 20",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-buttons": "21.0.0-develop.17",
-    "@progress/kendo-angular-inputs": "21.0.0-develop.17",
-    "@progress/kendo-angular-layout": "21.0.0-develop.17",
-    "@progress/kendo-angular-icons": "21.0.0-develop.17",
-    "@progress/kendo-angular-common": "21.0.0-develop.17",
-    "@progress/kendo-angular-intl": "21.0.0-develop.17",
-    "@progress/kendo-angular-l10n": "21.0.0-develop.17",
-    "@progress/kendo-angular-menu": "21.0.0-develop.17",
-    "@progress/kendo-angular-popup": "21.0.0-develop.17",
-    "@progress/kendo-angular-toolbar": "21.0.0-develop.17",
-    "@progress/kendo-angular-upload": "21.0.0-develop.17",
+    "@progress/kendo-angular-buttons": "21.0.0-develop.18",
+    "@progress/kendo-angular-inputs": "21.0.0-develop.18",
+    "@progress/kendo-angular-layout": "21.0.0-develop.18",
+    "@progress/kendo-angular-icons": "21.0.0-develop.18",
+    "@progress/kendo-angular-common": "21.0.0-develop.18",
+    "@progress/kendo-angular-intl": "21.0.0-develop.18",
+    "@progress/kendo-angular-l10n": "21.0.0-develop.18",
+    "@progress/kendo-angular-menu": "21.0.0-develop.18",
+    "@progress/kendo-angular-popup": "21.0.0-develop.18",
+    "@progress/kendo-angular-toolbar": "21.0.0-develop.18",
+    "@progress/kendo-angular-upload": "21.0.0-develop.18",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "21.0.0-develop.17"
+    "@progress/kendo-angular-schematics": "21.0.0-develop.18"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-conversational-ui.mjs",