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

package/codemods/v20/chat-user.js

@@ -34,10 +34,12 @@ const utils_1 = require("../utils");
 function default_1(fileInfo, api) {
     const filePath = fileInfo.path;
     if (filePath.endsWith('.html')) {
-        let updatedContent = fileInfo.source;
-        updatedContent = (0, utils_1.htmlBoundAttributeTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-chat', 'user', 'authorId', 'id');
-        // Only write to file once after all transformations
-        fs.writeFileSync(filePath, updatedContent, 'utf-8');
+        if ((0, utils_1.hasKendoInTemplate)(fileInfo.source)) {
+            let updatedContent = fileInfo.source;
+            updatedContent = (0, utils_1.htmlBoundAttributeTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-chat', 'user', 'authorId', 'id');
+            // Only write to file once after all transformations
+            fs.writeFileSync(filePath, updatedContent, 'utf-8');
+        }
         return;
     }
     const j = api.jscodeshift;
@@ -45,6 +47,6 @@ function default_1(fileInfo, api) {
     (0, index_1.templateTransformer)(rootSource, j, (root) => {
         (0, utils_1.templateBoundAttributeTransformer)(root, 'kendo-chat', 'user', 'authorId', 'id');
     });
-    (0, utils_1.tsPropertyTransformer)(rootSource, j, 'ChatComponent', 'user', 'authorId', 'id');
+    (0, utils_1.tsPropertyTransformer)(fileInfo.source, rootSource, j, 'ChatComponent', 'user', 'authorId', 'id');
     return rootSource.toSource();
 }

package/codemods/v21/chat-messagetoolbarvisibility.js

@@ -0,0 +1,53 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const fs = __importStar(require("fs"));
+const index_1 = require("../template-transformer/index");
+const utils_1 = require("../utils");
+function default_1(fileInfo, api) {
+    const filePath = fileInfo.path;
+    if (filePath.endsWith('.html')) {
+        if ((0, utils_1.hasKendoInTemplate)(fileInfo.source)) {
+            let updatedContent = fileInfo.source;
+            updatedContent = (0, utils_1.htmlAttributeRemoval)({ ...fileInfo, source: updatedContent }, 'kendo-chat', 'messageToolbarVisibility');
+            // Only write to file once after all transformations
+            fs.writeFileSync(filePath, updatedContent, 'utf-8');
+        }
+        return;
+    }
+    const j = api.jscodeshift;
+    const rootSource = j(fileInfo.source);
+    (0, index_1.templateTransformer)(rootSource, j, (root) => {
+        (0, utils_1.templateAttributeRemoval)(root, 'kendo-chat', 'messageToolbarVisibility');
+    });
+    (0, utils_1.tsPropertyRemoval)(fileInfo.source, rootSource, j, 'ChatComponent', 'messageToolbarVisibility');
+    (0, utils_1.tsComponentPropertyRemoval)(fileInfo.source, rootSource, j, 'ChatComponent', 'messageToolbarVisibility');
+    return rootSource.toSource();
+}

package/codemods/v21/chat-pinnedbyfield.js

@@ -0,0 +1,19 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2025 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = default_1;
+const utils_1 = require("../utils");
+function default_1(fileInfo, api) {
+    const filePath = fileInfo.path;
+    if (filePath.endsWith('.html')) {
+        return;
+    }
+    const j = api.jscodeshift;
+    const rootSource = j(fileInfo.source);
+    (0, utils_1.tsPropertyRemoval)(fileInfo.source, rootSource, j, 'ConversationalUIModelFields', 'pinnedByField');
+    (0, utils_1.tsComponentPropertyRemoval)(fileInfo.source, rootSource, j, 'ConversationalUIModelFields', 'pinnedByField');
+    return rootSource.toSource();
+}

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

@@ -63,7 +63,7 @@ export class ChatComponent {
     chatService;
     /**
      * Sets the Chat messages.
-     * Accepts an array of `Message` objects, but can also accept custom data structures.
+     * 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;
@@ -101,6 +101,26 @@ export class ChatComponent {
      * @default 'standard'
      */
     messageWidthMode = 'standard';
+    /**
+     * Controls the visibility of timestamps in messages.
+     *
+     * @default 'focus'
+     */
+    timestampVisibility = 'focus';
+    /**
+     * Controls the visibility of usernames in messages.
+     * When set to `true`, the username displays above each message bubble.
+     *
+     * @default true
+     */
+    showUsername = true;
+    /**
+     * Controls the avatar visibility for the messages.
+     * When set to `true`, the user avatar displays next to each message bubble.
+     *
+     * @default true
+     */
+    showAvatar = true;
     /**
      * Enables the expand or collapse functionality for messages.
      *
@@ -220,7 +240,7 @@ export class ChatComponent {
     sendButtonSettings = SEND_BTN_DEFAULT_SETTINGS;
     /**
      * 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) {
         this._modelFields = { ...defaultModelFields, ...value };
@@ -379,6 +399,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 +451,9 @@ export class ChatComponent {
         this.updateChatServiceProperties([
             'authorId',
             'messageWidthMode',
+            'timestampVisibility',
+            'showUsername',
+            'showAvatar',
             'allowMessageCollapse',
             'enableSpeechToText',
             'sendButtonSettings',
@@ -545,7 +571,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 +880,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: 1761910356,
-    version: '21.0.0-develop.9',
+    publishDate: 1762953404,
+    version: '21.0.1-develop.1',
     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: 1761910356,
-    version: '21.0.0-develop.9',
+    publishDate: 1762953404,
+    version: '21.0.1-develop.1',
     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"
@@ -5808,7 +5809,7 @@ class ChatComponent {
     chatService;
     /**
      * Sets the Chat messages.
-     * Accepts an array of `Message` objects, but can also accept custom data structures.
+     * 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;
@@ -5846,6 +5847,26 @@ class ChatComponent {
      * @default 'standard'
      */
     messageWidthMode = 'standard';
+    /**
+     * Controls the visibility of timestamps in messages.
+     *
+     * @default 'focus'
+     */
+    timestampVisibility = 'focus';
+    /**
+     * Controls the visibility of usernames in messages.
+     * When set to `true`, the username displays above each message bubble.
+     *
+     * @default true
+     */
+    showUsername = true;
+    /**
+     * Controls the avatar visibility for the messages.
+     * When set to `true`, the user avatar displays next to each message bubble.
+     *
+     * @default true
+     */
+    showAvatar = true;
     /**
      * Enables the expand or collapse functionality for messages.
      *
@@ -5965,7 +5986,7 @@ class ChatComponent {
     sendButtonSettings = SEND_BTN_DEFAULT_SETTINGS;
     /**
      * 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) {
         this._modelFields = { ...defaultModelFields, ...value };
@@ -6124,6 +6145,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 +6197,9 @@ class ChatComponent {
         this.updateChatServiceProperties([
             'authorId',
             'messageWidthMode',
+            'timestampVisibility',
+            'showUsername',
+            'showAvatar',
             'allowMessageCollapse',
             'enableSpeechToText',
             'sendButtonSettings',
@@ -6290,7 +6317,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 +6626,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: [{