@progress/kendo-angular-conversational-ui 21.1.1-develop.2 → 21.2.0-develop.10

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

@@ -5,9 +5,9 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, Output, QueryList, Renderer2, ViewChildren } from '@angular/core';
-import { NgFor, NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { ExecuteActionEvent } from './api';
-import { isPresent, Keys, normalizeNumpadKeys, ResizeSensorComponent } from '@progress/kendo-angular-common';
+import { isPresent, Keys, normalizeKeys, 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,20 +121,6 @@ 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) {
@@ -162,7 +148,7 @@ export class MessageListComponent {
     }
     onKeydown(e) {
         // On some keyboards Numpad keys are used for Home/End/PageUp/PageDown.
-        const code = normalizeNumpadKeys(e);
+        const code = normalizeKeys(e);
         const action = this.keyActions[code];
         if (action) {
             action(e);
@@ -179,6 +165,22 @@ export class MessageListComponent {
     isOwnMessage(msg) {
         return isAuthor(this.authorId, msg);
     }
+    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;
+    }
     dispatchAction(action, message) {
         const args = new ExecuteActionEvent(action, message);
         this.executeAction.emit(args);
@@ -310,231 +312,269 @@ export class MessageListComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageListComponent, deps: [{ token: i0.ElementRef }, { token: i1.IntlService }, { token: i0.Renderer2 }, { token: i2.ChatService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MessageListComponent, isStandalone: true, selector: "kendo-chat-message-list", inputs: { messages: "messages", attachmentTemplate: "attachmentTemplate", authorMessageContentTemplate: "authorMessageContentTemplate", receiverMessageContentTemplate: "receiverMessageContentTemplate", messageContentTemplate: "messageContentTemplate", authorMessageTemplate: "authorMessageTemplate", receiverMessageTemplate: "receiverMessageTemplate", messageTemplate: "messageTemplate", timestampTemplate: "timestampTemplate", statusTemplate: "statusTemplate", userStatusTemplate: "userStatusTemplate", localization: "localization", authorId: "authorId" }, outputs: { executeAction: "executeAction", navigate: "navigate", resize: "resize" }, host: { properties: { "class.k-message-list-content": "this.cssClass" } }, viewQueries: [{ propertyName: "items", predicate: ChatItem, descendants: true }], ngImport: i0, template: `
-        <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">
-            <ng-container [ngSwitch]="group.type">
-                <div
-                    *ngSwitchCase="'date-marker'"
-                    class="k-timestamp"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MessageListComponent, isStandalone: true, selector: "kendo-chat-message-list", inputs: { messages: "messages", attachmentTemplate: "attachmentTemplate", authorMessageContentTemplate: "authorMessageContentTemplate", receiverMessageContentTemplate: "receiverMessageContentTemplate", messageContentTemplate: "messageContentTemplate", authorMessageTemplate: "authorMessageTemplate", receiverMessageTemplate: "receiverMessageTemplate", messageTemplate: "messageTemplate", timestampTemplate: "timestampTemplate", statusTemplate: "statusTemplate", userStatusTemplate: "userStatusTemplate", localization: "localization", authorId: "authorId" }, outputs: { executeAction: "executeAction", navigate: "navigate", resize: "resize" }, host: { properties: { "class.k-message-list-content": "this.cssClass" } }, viewQueries: [{ propertyName: "items", predicate: ChatItem, descendants: true }], ngImport: i0, template: `
+        @for (group of view; track trackGroup($index, group); let lastGroup = $last) {
+          @switch (group.type) {
+            @case ('date-marker') {
+              <div
+                class="k-timestamp"
                 >
-                    <ng-container
-                        *ngIf="timestampTemplate?.templateRef"
-                        [ngTemplateOutlet]="timestampTemplate.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: group.timestamp }"
+                @if (timestampTemplate?.templateRef) {
+                  <ng-container
+                    [ngTemplateOutlet]="timestampTemplate.templateRef"
+                    [ngTemplateOutletContext]="{ $implicit: group.timestamp }"
                     >
-                    </ng-container>
-                    <ng-container *ngIf="!timestampTemplate?.templateRef">{{ formatTimeStamp(group.timestamp) }}</ng-container>
-                </div>
-                <div
-                    *ngSwitchCase="'message-group'"
-                    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]="!showGroupAvatar(group)"
-                    [class.k-message-group-full-width]="calculateMessageWidthMode(group.messages[0])"
+                  </ng-container>
+                }
+                @if (!timestampTemplate?.templateRef) {
+                  {{ formatTimeStamp(group.timestamp) }}
+                }
+              </div>
+            }
+            @case ('message-group') {
+              <div
+                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]="!showGroupAvatar(group)"
+                [class.k-message-group-full-width]="calculateMessageWidthMode(group.messages[0])"
                 >
+                @if (!userStatusTemplate?.templateRef && showGroupAvatar(group)) {
+                  <div
+                    class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
+                    >
+                    <span class="k-avatar-image">
+                      <img
+                        [attr.src]="group.author.avatarUrl"
+                        [alt]="group.author.avatarAltText"
+                        />
+                    </span>
+                  </div>
+                }
+                @if (showGroupAvatar(group) && userStatusTemplate?.templateRef) {
+                  <div class="k-chat-user-status-wrapper">
                     <div
-                        *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">
+                        <img
+                          [attr.src]="group.author.avatarUrl"
+                          [alt]="group.author.avatarAltText"
+                          />
+                      </span>
+                    </div>
+                    @if (userStatusTemplate?.templateRef) {
+                      <div class="k-chat-user-status">
+                        <ng-template
+                          [ngTemplateOutlet]="userStatusTemplate.templateRef"
+                          [ngTemplateOutletContext]="{ $implicit: group.messages.at(-1) }"
+                          >
+                        </ng-template>
+                      </div>
+                    }
+                  </div>
+                }
+                <div class="k-message-group-content">
+                  @if (showGroupAuthor(group)) {
+                    <p class="k-message-author">{{ group.author.name }}</p>
+                  }
+                  @for (msg of group.messages; track msg; let firstMessage = $first; let lastMessage = $last) {
+                    @if (msg.user?.avatarUrl) {
+                      <div
                         class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
-                    >
+                        >
                         <span class="k-avatar-image">
-                            <img
-                                [attr.src]="group.author.avatarUrl"
-                                [alt]="group.author.avatarAltText"
-                            />
+                          <img [src]="msg.user?.avatarUrl">
                         </span>
-                    </div>
-                    <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"
-                        >
-                            <span class="k-avatar-image">
-                                <img
-                                    [attr.src]="group.author.avatarUrl"
-                                    [alt]="group.author.avatarAltText"
-                                />
-                            </span>
-                        </div>
-                        <div class="k-chat-user-status" *ngIf="userStatusTemplate?.templateRef">
-                            <ng-template
-                                [ngTemplateOutlet]="userStatusTemplate.templateRef"
-                                [ngTemplateOutletContext]="{ $implicit: group.messages.at(-1) }"
-                            >
-                            </ng-template>
-                        </div>
-                    </div>
-                    <div class="k-message-group-content">
-                        <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>
+                    }
+                    <kendo-chat-message #message
+                      [message]="msg"
+                      [tabbable]="lastGroup && lastMessage"
+                      [authorMessageContentTemplate]="authorMessageContentTemplate"
+                      [receiverMessageContentTemplate]="receiverMessageContentTemplate"
+                      [messageContentTemplate]="messageContentTemplate"
+                      [authorMessageTemplate]="authorMessageTemplate"
+                      [receiverMessageTemplate]="receiverMessageTemplate"
+                      [messageTemplate]="messageTemplate"
+                      [statusTemplate]="statusTemplate"
+                      [authorId]="authorId"
+                      >
+                    </kendo-chat-message>
+                    @if (msg.attachments && msg.attachments.length === 1) {
+                      <kendo-chat-attachment
+                        [attachment]="msg.attachments[0]"
+                        [template]="attachmentTemplate"
                         >
-                            <kendo-chat-message #message
-                                [message]="msg"
-                                [tabbable]="lastGroup && lastMessage"
-                                [authorMessageContentTemplate]="authorMessageContentTemplate"
-                                [receiverMessageContentTemplate]="receiverMessageContentTemplate"
-                                [messageContentTemplate]="messageContentTemplate"
-                                [authorMessageTemplate]="authorMessageTemplate"
-                                [receiverMessageTemplate]="receiverMessageTemplate"
-                                [messageTemplate]="messageTemplate"
-                                [statusTemplate]="statusTemplate"
-                                [authorId]="authorId"
-                            >
-                            </kendo-chat-message>
-
-                            <kendo-chat-attachment
-                                *ngIf="msg.attachments && msg.attachments.length === 1"
-                                [attachment]="msg.attachments[0]"
-                                [template]="attachmentTemplate"
-                            >
-                            </kendo-chat-attachment>
-                        </ng-container>
-                    </div>
+                      </kendo-chat-attachment>
+                    }
+                  }
                 </div>
-
-                <kendo-chat-message-attachments #attachments
-                    *ngSwitchCase="'attachment-group'"
-                    [attachments]="group.attachments"
-                    [layout]="group.attachmentLayout"
-                    [localization]="localization"
-                    [tabbable]="lastGroup"
-                    [template]="attachmentTemplate"
-                    (click)="select(attachments)"
-                    (focus)="select(attachments)"
+              </div>
+            }
+            @case ('attachment-group') {
+              <kendo-chat-message-attachments #attachments
+                [attachments]="group.attachments"
+                [layout]="group.attachmentLayout"
+                [localization]="localization"
+                [tabbable]="lastGroup"
+                [template]="attachmentTemplate"
+                (click)="select(attachments)"
+                (focus)="select(attachments)"
                 >
-                </kendo-chat-message-attachments>
-
-                <kendo-chat-suggested-actions #actions
-                    *ngSwitchCase="'action-group'"
-                    [actions]="group.actions"
-                    type="action"
-                    [tabbable]="lastGroup"
-                    (dispatchAction)="dispatchAction($event, last(view))"
-                    (click)="select(actions, $event)"
-                    (focus)="select(actions, $event)"
+              </kendo-chat-message-attachments>
+            }
+            @case ('action-group') {
+              <kendo-chat-suggested-actions #actions
+                [actions]="group.actions"
+                type="action"
+                [tabbable]="lastGroup"
+                (dispatchAction)="dispatchAction($event, last(view))"
+                (click)="select(actions, $event)"
+                (focus)="select(actions, $event)"
                 >
-                </kendo-chat-suggested-actions>
-            </ng-container>
-        </ng-container>
+              </kendo-chat-suggested-actions>
+            }
+          }
+        }
         <kendo-resize-sensor (resize)="onResize()">
         </kendo-resize-sensor>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MessageComponent, selector: "kendo-chat-message", inputs: ["message", "tabbable", "authorMessageContentTemplate", "receiverMessageContentTemplate", "messageContentTemplate", "authorMessageTemplate", "receiverMessageTemplate", "messageTemplate", "statusTemplate", "showMessageTime", "authorId"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }, { kind: "component", type: MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: ["attachments", "layout", "tabbable", "template", "localization"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "suggestions", "tabbable", "type", "suggestionTemplate"], outputs: ["dispatchAction", "dispatchSuggestion"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MessageComponent, selector: "kendo-chat-message", inputs: ["message", "tabbable", "authorMessageContentTemplate", "receiverMessageContentTemplate", "messageContentTemplate", "authorMessageTemplate", "receiverMessageTemplate", "messageTemplate", "statusTemplate", "showMessageTime", "authorId"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }, { kind: "component", type: MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: ["attachments", "layout", "tabbable", "template", "localization"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "suggestions", "tabbable", "type", "suggestionTemplate"], outputs: ["dispatchAction", "dispatchSuggestion"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chat-message-list',
                     template: `
-        <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">
-            <ng-container [ngSwitch]="group.type">
-                <div
-                    *ngSwitchCase="'date-marker'"
-                    class="k-timestamp"
+        @for (group of view; track trackGroup($index, group); let lastGroup = $last) {
+          @switch (group.type) {
+            @case ('date-marker') {
+              <div
+                class="k-timestamp"
                 >
-                    <ng-container
-                        *ngIf="timestampTemplate?.templateRef"
-                        [ngTemplateOutlet]="timestampTemplate.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: group.timestamp }"
+                @if (timestampTemplate?.templateRef) {
+                  <ng-container
+                    [ngTemplateOutlet]="timestampTemplate.templateRef"
+                    [ngTemplateOutletContext]="{ $implicit: group.timestamp }"
                     >
-                    </ng-container>
-                    <ng-container *ngIf="!timestampTemplate?.templateRef">{{ formatTimeStamp(group.timestamp) }}</ng-container>
-                </div>
-                <div
-                    *ngSwitchCase="'message-group'"
-                    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]="!showGroupAvatar(group)"
-                    [class.k-message-group-full-width]="calculateMessageWidthMode(group.messages[0])"
+                  </ng-container>
+                }
+                @if (!timestampTemplate?.templateRef) {
+                  {{ formatTimeStamp(group.timestamp) }}
+                }
+              </div>
+            }
+            @case ('message-group') {
+              <div
+                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]="!showGroupAvatar(group)"
+                [class.k-message-group-full-width]="calculateMessageWidthMode(group.messages[0])"
                 >
+                @if (!userStatusTemplate?.templateRef && showGroupAvatar(group)) {
+                  <div
+                    class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
+                    >
+                    <span class="k-avatar-image">
+                      <img
+                        [attr.src]="group.author.avatarUrl"
+                        [alt]="group.author.avatarAltText"
+                        />
+                    </span>
+                  </div>
+                }
+                @if (showGroupAvatar(group) && userStatusTemplate?.templateRef) {
+                  <div class="k-chat-user-status-wrapper">
                     <div
-                        *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">
+                        <img
+                          [attr.src]="group.author.avatarUrl"
+                          [alt]="group.author.avatarAltText"
+                          />
+                      </span>
+                    </div>
+                    @if (userStatusTemplate?.templateRef) {
+                      <div class="k-chat-user-status">
+                        <ng-template
+                          [ngTemplateOutlet]="userStatusTemplate.templateRef"
+                          [ngTemplateOutletContext]="{ $implicit: group.messages.at(-1) }"
+                          >
+                        </ng-template>
+                      </div>
+                    }
+                  </div>
+                }
+                <div class="k-message-group-content">
+                  @if (showGroupAuthor(group)) {
+                    <p class="k-message-author">{{ group.author.name }}</p>
+                  }
+                  @for (msg of group.messages; track msg; let firstMessage = $first; let lastMessage = $last) {
+                    @if (msg.user?.avatarUrl) {
+                      <div
                         class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
-                    >
+                        >
                         <span class="k-avatar-image">
-                            <img
-                                [attr.src]="group.author.avatarUrl"
-                                [alt]="group.author.avatarAltText"
-                            />
+                          <img [src]="msg.user?.avatarUrl">
                         </span>
-                    </div>
-                    <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"
+                      </div>
+                    }
+                    <kendo-chat-message #message
+                      [message]="msg"
+                      [tabbable]="lastGroup && lastMessage"
+                      [authorMessageContentTemplate]="authorMessageContentTemplate"
+                      [receiverMessageContentTemplate]="receiverMessageContentTemplate"
+                      [messageContentTemplate]="messageContentTemplate"
+                      [authorMessageTemplate]="authorMessageTemplate"
+                      [receiverMessageTemplate]="receiverMessageTemplate"
+                      [messageTemplate]="messageTemplate"
+                      [statusTemplate]="statusTemplate"
+                      [authorId]="authorId"
+                      >
+                    </kendo-chat-message>
+                    @if (msg.attachments && msg.attachments.length === 1) {
+                      <kendo-chat-attachment
+                        [attachment]="msg.attachments[0]"
+                        [template]="attachmentTemplate"
                         >
-                            <span class="k-avatar-image">
-                                <img
-                                    [attr.src]="group.author.avatarUrl"
-                                    [alt]="group.author.avatarAltText"
-                                />
-                            </span>
-                        </div>
-                        <div class="k-chat-user-status" *ngIf="userStatusTemplate?.templateRef">
-                            <ng-template
-                                [ngTemplateOutlet]="userStatusTemplate.templateRef"
-                                [ngTemplateOutletContext]="{ $implicit: group.messages.at(-1) }"
-                            >
-                            </ng-template>
-                        </div>
-                    </div>
-                    <div class="k-message-group-content">
-                        <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"
-                        >
-                            <kendo-chat-message #message
-                                [message]="msg"
-                                [tabbable]="lastGroup && lastMessage"
-                                [authorMessageContentTemplate]="authorMessageContentTemplate"
-                                [receiverMessageContentTemplate]="receiverMessageContentTemplate"
-                                [messageContentTemplate]="messageContentTemplate"
-                                [authorMessageTemplate]="authorMessageTemplate"
-                                [receiverMessageTemplate]="receiverMessageTemplate"
-                                [messageTemplate]="messageTemplate"
-                                [statusTemplate]="statusTemplate"
-                                [authorId]="authorId"
-                            >
-                            </kendo-chat-message>
-
-                            <kendo-chat-attachment
-                                *ngIf="msg.attachments && msg.attachments.length === 1"
-                                [attachment]="msg.attachments[0]"
-                                [template]="attachmentTemplate"
-                            >
-                            </kendo-chat-attachment>
-                        </ng-container>
-                    </div>
+                      </kendo-chat-attachment>
+                    }
+                  }
                 </div>
-
-                <kendo-chat-message-attachments #attachments
-                    *ngSwitchCase="'attachment-group'"
-                    [attachments]="group.attachments"
-                    [layout]="group.attachmentLayout"
-                    [localization]="localization"
-                    [tabbable]="lastGroup"
-                    [template]="attachmentTemplate"
-                    (click)="select(attachments)"
-                    (focus)="select(attachments)"
+              </div>
+            }
+            @case ('attachment-group') {
+              <kendo-chat-message-attachments #attachments
+                [attachments]="group.attachments"
+                [layout]="group.attachmentLayout"
+                [localization]="localization"
+                [tabbable]="lastGroup"
+                [template]="attachmentTemplate"
+                (click)="select(attachments)"
+                (focus)="select(attachments)"
                 >
-                </kendo-chat-message-attachments>
-
-                <kendo-chat-suggested-actions #actions
-                    *ngSwitchCase="'action-group'"
-                    [actions]="group.actions"
-                    type="action"
-                    [tabbable]="lastGroup"
-                    (dispatchAction)="dispatchAction($event, last(view))"
-                    (click)="select(actions, $event)"
-                    (focus)="select(actions, $event)"
+              </kendo-chat-message-attachments>
+            }
+            @case ('action-group') {
+              <kendo-chat-suggested-actions #actions
+                [actions]="group.actions"
+                type="action"
+                [tabbable]="lastGroup"
+                (dispatchAction)="dispatchAction($event, last(view))"
+                (click)="select(actions, $event)"
+                (focus)="select(actions, $event)"
                 >
-                </kendo-chat-suggested-actions>
-            </ng-container>
-        </ng-container>
+              </kendo-chat-suggested-actions>
+            }
+          }
+        }
         <kendo-resize-sensor (resize)="onResize()">
         </kendo-resize-sensor>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgFor, NgSwitch, NgSwitchCase, NgIf, NgTemplateOutlet, MessageComponent, AttachmentComponent, MessageAttachmentsComponent, SuggestedActionsComponent, ResizeSensorComponent]
+                    imports: [NgTemplateOutlet, MessageComponent, AttachmentComponent, MessageAttachmentsComponent, SuggestedActionsComponent, ResizeSensorComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.IntlService }, { type: i0.Renderer2 }, { type: i2.ChatService }, { type: i0.ChangeDetectorRef }], propDecorators: { messages: [{
                 type: Input

package/esm2022/chat/message-reference-content.component.mjs

@@ -5,7 +5,6 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
 import { Component, forwardRef, Input, HostBinding } from '@angular/core';
 import { ChatItem } from './chat-item';
-import { NgIf } from '@angular/common';
 import { ChatFileComponent } from './chat-file.component';
 import { ChatService } from './common/chat.service';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
@@ -34,18 +33,24 @@ export class MessageReferenceComponent extends ChatItem {
     }
     focus() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageReferenceComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ChatService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MessageReferenceComponent, isStandalone: true, selector: "chat-message-reference-content", inputs: { message: "message" }, host: { properties: { "class.k-message-reference-content": "this.hostClass" } }, providers: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MessageReferenceComponent, isStandalone: true, selector: "chat-message-reference-content", inputs: { message: "message" }, host: { properties: { "class.k-message-reference-content": "this.hostClass" } }, providers: [{
                 provide: ChatItem,
                 useExisting: forwardRef(() => MessageReferenceComponent)
             }], usesInheritance: true, ngImport: i0, template: `
-        <ng-container *ngIf="message.text && !message.isDeleted">{{message.text}}</ng-container>
-        <ng-container *ngIf="!message.text && !message.isDeleted && message.files && message.files.length > 0">
-            <li class="k-chat-file" [chatFile]="message.files[0]">
-            </li>
-        </ng-container>
-        <ng-container *ngIf="message.isDeleted && isOwnMessage(message)">{{ textFor('deletedMessageSenderText') }}</ng-container>
-        <ng-container *ngIf="message.isDeleted && !isOwnMessage(message)">{{ textFor('deletedMessageReceiverText') }}</ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }] });
+        @if (message.text && !message.isDeleted) {
+          {{message.text}}
+        }
+        @if (!message.text && !message.isDeleted && message.files && message.files.length > 0) {
+          <li class="k-chat-file" [chatFile]="message.files[0]">
+          </li>
+        }
+        @if (message.isDeleted && isOwnMessage(message)) {
+          {{ textFor('deletedMessageSenderText') }}
+        }
+        @if (message.isDeleted && !isOwnMessage(message)) {
+          {{ textFor('deletedMessageReceiverText') }}
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageReferenceComponent, decorators: [{
             type: Component,
@@ -56,16 +61,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                             useExisting: forwardRef(() => MessageReferenceComponent)
                         }],
                     template: `
-        <ng-container *ngIf="message.text && !message.isDeleted">{{message.text}}</ng-container>
-        <ng-container *ngIf="!message.text && !message.isDeleted && message.files && message.files.length > 0">
-            <li class="k-chat-file" [chatFile]="message.files[0]">
-            </li>
-        </ng-container>
-        <ng-container *ngIf="message.isDeleted && isOwnMessage(message)">{{ textFor('deletedMessageSenderText') }}</ng-container>
-        <ng-container *ngIf="message.isDeleted && !isOwnMessage(message)">{{ textFor('deletedMessageReceiverText') }}</ng-container>
-    `,
+        @if (message.text && !message.isDeleted) {
+          {{message.text}}
+        }
+        @if (!message.text && !message.isDeleted && message.files && message.files.length > 0) {
+          <li class="k-chat-file" [chatFile]="message.files[0]">
+          </li>
+        }
+        @if (message.isDeleted && isOwnMessage(message)) {
+          {{ textFor('deletedMessageSenderText') }}
+        }
+        @if (message.isDeleted && !isOwnMessage(message)) {
+          {{ textFor('deletedMessageReceiverText') }}
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, ChatFileComponent]
+                    imports: [ChatFileComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.ChatService }], propDecorators: { hostClass: [{
                 type: HostBinding,