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

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

@@ -7,9 +7,9 @@ import { InjectionToken, Directive, Inject, HostBinding, ViewChild, Input, Injec
 import { IconWrapperComponent, IconsService } from '@progress/kendo-angular-icons';
 import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupComponent, KENDO_POPUP, PopupService } from '@progress/kendo-angular-popup';
-import { isPresent, normalizeNumpadKeys, Keys, focusableSelector, guid, getter, isDocumentAvailable, closest as closest$1, ResizeSensorComponent, isChanged, processCssValue, ResizeBatchService } from '@progress/kendo-angular-common';
+import { isPresent, normalizeKeys, Keys, focusableSelector, guid, getter, isDocumentAvailable, closest as closest$1, ResizeSensorComponent, isChanged, processCssValue, ResizeBatchService } from '@progress/kendo-angular-common';
 import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
-import { NgFor, NgIf, NgTemplateOutlet, NgClass, NgSwitch, NgSwitchCase } from '@angular/common';
+import { NgTemplateOutlet, NgClass } from '@angular/common';
 import { Subject, Subscription, fromEvent } from 'rxjs';
 import { sparklesIcon, commentIcon, moreHorizontalIcon, stopSmIcon, thumbUpIcon, thumbDownOutlineIcon, thumbDownIcon, thumbUpOutlineIcon, copyIcon, arrowRotateCwIcon, chevronUpIcon, chevronDownIcon, paperPlaneIcon, undoIcon, downloadIcon, chevronLeftIcon, chevronRightIcon, xIcon, moreVerticalIcon, paperclipIcon, fileIcon, pinIcon, cancelOutlineIcon, menuIcon } from '@progress/kendo-svg-icons';
 import * as i1 from '@progress/kendo-angular-l10n';
@@ -216,8 +216,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1763729170,
-    version: '21.1.1-develop.2',
+    publishDate: 1764593013,
+    version: '21.2.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -404,7 +404,7 @@ class AIPromptToolbarFocusableDirective {
         this.element.focus();
     }
     keyDownHandler = (e) => {
-        const code = normalizeNumpadKeys(e);
+        const code = normalizeKeys(e);
         const targetsSelf = e.target === this.element;
         const isLeftArrow = code === Keys.ArrowLeft;
         const isRightArrow = code === Keys.ArrowRight;
@@ -872,7 +872,7 @@ class AIPromptComponent {
         this.promptRequest.emit(eventArgs);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AIPromptComponent, deps: [{ token: i1.LocalizationService }, { token: AIPromptService }, { token: ToolbarNavigationService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AIPromptComponent, isStandalone: true, selector: "kendo-aiprompt", inputs: { activeView: "activeView", promptCommands: "promptCommands", promptSuggestions: "promptSuggestions", promptOutputs: "promptOutputs", showOutputRating: "showOutputRating", streaming: "streaming", speechToTextButton: "speechToTextButton", textAreaSettings: "textAreaSettings", generateButtonSVGIcon: "generateButtonSVGIcon", generateButtonIcon: "generateButtonIcon", disabledGenerateButton: "disabledGenerateButton" }, outputs: { activeViewChange: "activeViewChange", promptRequest: "promptRequest", commandExecute: "commandExecute", outputCopy: "outputCopy", outputRatingChange: "outputRatingChange", promptRequestCancel: "promptRequestCancel" }, host: { properties: { "class.k-prompt": "this.hostClasses", "attr.dir": "this.dirAttr" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AIPromptComponent, isStandalone: true, selector: "kendo-aiprompt", inputs: { activeView: "activeView", promptCommands: "promptCommands", promptSuggestions: "promptSuggestions", promptOutputs: "promptOutputs", showOutputRating: "showOutputRating", streaming: "streaming", speechToTextButton: "speechToTextButton", textAreaSettings: "textAreaSettings", generateButtonSVGIcon: "generateButtonSVGIcon", generateButtonIcon: "generateButtonIcon", disabledGenerateButton: "disabledGenerateButton" }, outputs: { activeViewChange: "activeViewChange", promptRequest: "promptRequest", commandExecute: "commandExecute", outputCopy: "outputCopy", outputRatingChange: "outputRatingChange", promptRequestCancel: "promptRequestCancel" }, host: { properties: { "class.k-prompt": "this.hostClasses", "attr.dir": "this.dirAttr" } }, providers: [
             LocalizationService,
             AIPromptService,
             ToolbarNavigationService,
@@ -882,82 +882,90 @@ class AIPromptComponent {
             }
         ], queries: [{ propertyName: "toolbarActionsTemplate", first: true, predicate: AIPromptToolbarActionsDirective, descendants: true }, { propertyName: "outputTemplate", first: true, predicate: AIPromptOutputTemplateDirective, descendants: true }, { propertyName: "outputBodyTemplate", first: true, predicate: AIPromptOutputBodyTemplateDirective, descendants: true }, { propertyName: "views", predicate: BaseView }], viewQueries: [{ propertyName: "fabButton", first: true, predicate: ["fabButton"], descendants: true }], exportAs: ["kendoAIPrompt"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoAIPromptLocalizedMessages
-            i18n-promptView="kendo.aiprompt.promptView|The Toolbar button text for the Prompt view."
-            promptView="Ask AI"
-            i18n-outputView="kendo.aiprompt.outputView|The Toolbar button text for the Output view."
-            outputView="Output"
-            i18n-generateOutput="kendo.aiprompt.generateOutput|The text for the Generate button in the Prompt view."
-            generateOutput="Generate"
-            i18n-promptPlaceholder="kendo.aiprompt.promptPlaceholder|The placeholder text for the Prompt View text area."
-            promptPlaceholder="Ask or generate content with AI"
-            i18n-copyOutput="kendo.aiprompt.copyOutput|The Copy button text in each Output view card."
-            copyOutput="Copy"
-            i18n-retryGeneration="kendo.aiprompt.retryGeneration|The Retry button text in each Output view card."
-            retryGeneration="Retry"
-            i18n-outputTitle="kendo.aiprompt.outputTitle|The title of each Output view card."
-            outputTitle="Generated with AI"
-            i18n-outputRetryTitle="kendo.aiprompt.outputRetryTitle|The title of each Output view retry card."
-            outputRetryTitle="Generated with AI"
-            i18n-promptSuggestions="kendo.aiprompt.promptSuggestions|The title of the Prompt suggestions button."
-            promptSuggestions="Prompt suggestions"
-            i18n-speechToTextButton="kendo.aiprompt.speechToTextButton|The aria-label for the Speech to Text button."
-            speechToTextButton="Voice input">
+          i18n-promptView="kendo.aiprompt.promptView|The Toolbar button text for the Prompt view."
+          promptView="Ask AI"
+          i18n-outputView="kendo.aiprompt.outputView|The Toolbar button text for the Output view."
+          outputView="Output"
+          i18n-generateOutput="kendo.aiprompt.generateOutput|The text for the Generate button in the Prompt view."
+          generateOutput="Generate"
+          i18n-promptPlaceholder="kendo.aiprompt.promptPlaceholder|The placeholder text for the Prompt View text area."
+          promptPlaceholder="Ask or generate content with AI"
+          i18n-copyOutput="kendo.aiprompt.copyOutput|The Copy button text in each Output view card."
+          copyOutput="Copy"
+          i18n-retryGeneration="kendo.aiprompt.retryGeneration|The Retry button text in each Output view card."
+          retryGeneration="Retry"
+          i18n-outputTitle="kendo.aiprompt.outputTitle|The title of each Output view card."
+          outputTitle="Generated with AI"
+          i18n-outputRetryTitle="kendo.aiprompt.outputRetryTitle|The title of each Output view retry card."
+          outputRetryTitle="Generated with AI"
+          i18n-promptSuggestions="kendo.aiprompt.promptSuggestions|The title of the Prompt suggestions button."
+          promptSuggestions="Prompt suggestions"
+          i18n-speechToTextButton="kendo.aiprompt.speechToTextButton|The aria-label for the Speech to Text button."
+          speechToTextButton="Voice input">
         </ng-container>
         <div class="k-prompt-header">
-            <div class="k-toolbar-flat k-toolbar k-toolbar-md"
-                role="toolbar">
-                <button *ngFor="let view of viewsArray; let idx = index"
-                    kendoButton
-                    kendoAIPromptToolbarFocusable
-                    type="button"
-                    fillMode="flat"
-                    rounded="full"
-                    themeColor="primary"
-                    [svgIcon]="view.svgIcon"
-                    [icon]="view.icon"
-                    [selected]="idx === activeView"
-                    (click)="viewChange(idx)">
-                    {{view.buttonText}}
-                </button>
-
-                <ng-template *ngIf="toolbarActionsTemplate"
-                    [ngTemplateOutlet]="toolbarActionsTemplate?.templateRef">
-                </ng-template>
-            </div>
+          <div class="k-toolbar-flat k-toolbar k-toolbar-md"
+            role="toolbar">
+            @for (view of viewsArray; track view; let idx = $index) {
+              <button
+                kendoButton
+                kendoAIPromptToolbarFocusable
+                type="button"
+                fillMode="flat"
+                rounded="full"
+                themeColor="primary"
+                [svgIcon]="view.svgIcon"
+                [icon]="view.icon"
+                [selected]="idx === activeView"
+                (click)="viewChange(idx)">
+                {{view.buttonText}}
+              </button>
+            }
+        
+            @if (toolbarActionsTemplate) {
+              <ng-template
+                [ngTemplateOutlet]="toolbarActionsTemplate?.templateRef">
+              </ng-template>
+            }
+          </div>
         </div>
         <div class="k-prompt-content">
-            <kendo-floatingactionbutton #fabButton *ngIf="streaming && selectedView?.viewType === 'output'"
-                class="k-prompt-stop-fab"
-                buttonClass="k-generating k-active"
-                [positionMode]="fabPositionMode"
-                [align]="fabAlignment"
-                [svgIcon]="fabStopGenerationSVGIcon"
-                icon="stop"
-                (click)="promptRequestCancel.emit()"
-            >
+          @if (streaming && selectedView?.viewType === 'output') {
+            <kendo-floatingactionbutton #fabButton
+              class="k-prompt-stop-fab"
+              buttonClass="k-generating k-active"
+              [positionMode]="fabPositionMode"
+              [align]="fabAlignment"
+              [svgIcon]="fabStopGenerationSVGIcon"
+              icon="stop"
+              (click)="promptRequestCancel.emit()"
+              >
             </kendo-floatingactionbutton>
-            <div class="k-prompt-view">
-                <ng-container *ngTemplateOutlet="viewTemplate">
-                </ng-container>
-            </div>
+          }
+          <div class="k-prompt-view">
+            <ng-container *ngTemplateOutlet="viewTemplate">
+            </ng-container>
+          </div>
         </div>
-        <div class="k-prompt-footer" *ngIf="selectedView?.viewType === 'prompt'">
+        @if (selectedView?.viewType === 'prompt') {
+          <div class="k-prompt-footer">
             <div class="k-actions k-actions-start k-actions-horizontal k-prompt-actions">
-                <button
-                    kendoButton
-                    type="button"
-                    themeColor="primary"
-                    rounded="full"
-                    [attr.title]="messageFor('generateOutput')"
-                    [attr.aria-label]="messageFor('generateOutput')"
-                    [attr.aria-disabled]="disabledGenerateButton"
-                    [svgIcon]="generateButtonSVGIcon"
-                    [icon]="generateButtonIcon"
-                    [disabled]="disabledGenerateButton"
-                    (click)="handleGenerateOutput()">{{messageFor('generateOutput')}}</button>
+              <button
+                kendoButton
+                type="button"
+                themeColor="primary"
+                rounded="full"
+                [attr.title]="messageFor('generateOutput')"
+                [attr.aria-label]="messageFor('generateOutput')"
+                [attr.aria-disabled]="disabledGenerateButton"
+                [svgIcon]="generateButtonSVGIcon"
+                [icon]="generateButtonIcon"
+                [disabled]="disabledGenerateButton"
+              (click)="handleGenerateOutput()">{{messageFor('generateOutput')}}</button>
             </div>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$2, selector: "[kendoAIPromptLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: AIPromptToolbarFocusableDirective, selector: "[kendoAIPromptToolbarFocusable]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["themeColor", "size", "rounded", "disabled", "align", "offset", "positionMode", "icon", "svgIcon", "iconClass", "buttonClass", "dialClass", "text", "dialItemAnimation", "tabIndex", "dialItems"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }] });
+          </div>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$2, selector: "[kendoAIPromptLocalizedMessages]" }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: AIPromptToolbarFocusableDirective, selector: "[kendoAIPromptToolbarFocusable]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["themeColor", "size", "rounded", "disabled", "align", "offset", "positionMode", "icon", "svgIcon", "iconClass", "buttonClass", "dialClass", "text", "dialItemAnimation", "tabIndex", "dialItems"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AIPromptComponent, decorators: [{
             type: Component,
@@ -975,84 +983,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     template: `
         <ng-container kendoAIPromptLocalizedMessages
-            i18n-promptView="kendo.aiprompt.promptView|The Toolbar button text for the Prompt view."
-            promptView="Ask AI"
-            i18n-outputView="kendo.aiprompt.outputView|The Toolbar button text for the Output view."
-            outputView="Output"
-            i18n-generateOutput="kendo.aiprompt.generateOutput|The text for the Generate button in the Prompt view."
-            generateOutput="Generate"
-            i18n-promptPlaceholder="kendo.aiprompt.promptPlaceholder|The placeholder text for the Prompt View text area."
-            promptPlaceholder="Ask or generate content with AI"
-            i18n-copyOutput="kendo.aiprompt.copyOutput|The Copy button text in each Output view card."
-            copyOutput="Copy"
-            i18n-retryGeneration="kendo.aiprompt.retryGeneration|The Retry button text in each Output view card."
-            retryGeneration="Retry"
-            i18n-outputTitle="kendo.aiprompt.outputTitle|The title of each Output view card."
-            outputTitle="Generated with AI"
-            i18n-outputRetryTitle="kendo.aiprompt.outputRetryTitle|The title of each Output view retry card."
-            outputRetryTitle="Generated with AI"
-            i18n-promptSuggestions="kendo.aiprompt.promptSuggestions|The title of the Prompt suggestions button."
-            promptSuggestions="Prompt suggestions"
-            i18n-speechToTextButton="kendo.aiprompt.speechToTextButton|The aria-label for the Speech to Text button."
-            speechToTextButton="Voice input">
+          i18n-promptView="kendo.aiprompt.promptView|The Toolbar button text for the Prompt view."
+          promptView="Ask AI"
+          i18n-outputView="kendo.aiprompt.outputView|The Toolbar button text for the Output view."
+          outputView="Output"
+          i18n-generateOutput="kendo.aiprompt.generateOutput|The text for the Generate button in the Prompt view."
+          generateOutput="Generate"
+          i18n-promptPlaceholder="kendo.aiprompt.promptPlaceholder|The placeholder text for the Prompt View text area."
+          promptPlaceholder="Ask or generate content with AI"
+          i18n-copyOutput="kendo.aiprompt.copyOutput|The Copy button text in each Output view card."
+          copyOutput="Copy"
+          i18n-retryGeneration="kendo.aiprompt.retryGeneration|The Retry button text in each Output view card."
+          retryGeneration="Retry"
+          i18n-outputTitle="kendo.aiprompt.outputTitle|The title of each Output view card."
+          outputTitle="Generated with AI"
+          i18n-outputRetryTitle="kendo.aiprompt.outputRetryTitle|The title of each Output view retry card."
+          outputRetryTitle="Generated with AI"
+          i18n-promptSuggestions="kendo.aiprompt.promptSuggestions|The title of the Prompt suggestions button."
+          promptSuggestions="Prompt suggestions"
+          i18n-speechToTextButton="kendo.aiprompt.speechToTextButton|The aria-label for the Speech to Text button."
+          speechToTextButton="Voice input">
         </ng-container>
         <div class="k-prompt-header">
-            <div class="k-toolbar-flat k-toolbar k-toolbar-md"
-                role="toolbar">
-                <button *ngFor="let view of viewsArray; let idx = index"
-                    kendoButton
-                    kendoAIPromptToolbarFocusable
-                    type="button"
-                    fillMode="flat"
-                    rounded="full"
-                    themeColor="primary"
-                    [svgIcon]="view.svgIcon"
-                    [icon]="view.icon"
-                    [selected]="idx === activeView"
-                    (click)="viewChange(idx)">
-                    {{view.buttonText}}
-                </button>
-
-                <ng-template *ngIf="toolbarActionsTemplate"
-                    [ngTemplateOutlet]="toolbarActionsTemplate?.templateRef">
-                </ng-template>
-            </div>
+          <div class="k-toolbar-flat k-toolbar k-toolbar-md"
+            role="toolbar">
+            @for (view of viewsArray; track view; let idx = $index) {
+              <button
+                kendoButton
+                kendoAIPromptToolbarFocusable
+                type="button"
+                fillMode="flat"
+                rounded="full"
+                themeColor="primary"
+                [svgIcon]="view.svgIcon"
+                [icon]="view.icon"
+                [selected]="idx === activeView"
+                (click)="viewChange(idx)">
+                {{view.buttonText}}
+              </button>
+            }
+        
+            @if (toolbarActionsTemplate) {
+              <ng-template
+                [ngTemplateOutlet]="toolbarActionsTemplate?.templateRef">
+              </ng-template>
+            }
+          </div>
         </div>
         <div class="k-prompt-content">
-            <kendo-floatingactionbutton #fabButton *ngIf="streaming && selectedView?.viewType === 'output'"
-                class="k-prompt-stop-fab"
-                buttonClass="k-generating k-active"
-                [positionMode]="fabPositionMode"
-                [align]="fabAlignment"
-                [svgIcon]="fabStopGenerationSVGIcon"
-                icon="stop"
-                (click)="promptRequestCancel.emit()"
-            >
+          @if (streaming && selectedView?.viewType === 'output') {
+            <kendo-floatingactionbutton #fabButton
+              class="k-prompt-stop-fab"
+              buttonClass="k-generating k-active"
+              [positionMode]="fabPositionMode"
+              [align]="fabAlignment"
+              [svgIcon]="fabStopGenerationSVGIcon"
+              icon="stop"
+              (click)="promptRequestCancel.emit()"
+              >
             </kendo-floatingactionbutton>
-            <div class="k-prompt-view">
-                <ng-container *ngTemplateOutlet="viewTemplate">
-                </ng-container>
-            </div>
+          }
+          <div class="k-prompt-view">
+            <ng-container *ngTemplateOutlet="viewTemplate">
+            </ng-container>
+          </div>
         </div>
-        <div class="k-prompt-footer" *ngIf="selectedView?.viewType === 'prompt'">
+        @if (selectedView?.viewType === 'prompt') {
+          <div class="k-prompt-footer">
             <div class="k-actions k-actions-start k-actions-horizontal k-prompt-actions">
-                <button
-                    kendoButton
-                    type="button"
-                    themeColor="primary"
-                    rounded="full"
-                    [attr.title]="messageFor('generateOutput')"
-                    [attr.aria-label]="messageFor('generateOutput')"
-                    [attr.aria-disabled]="disabledGenerateButton"
-                    [svgIcon]="generateButtonSVGIcon"
-                    [icon]="generateButtonIcon"
-                    [disabled]="disabledGenerateButton"
-                    (click)="handleGenerateOutput()">{{messageFor('generateOutput')}}</button>
+              <button
+                kendoButton
+                type="button"
+                themeColor="primary"
+                rounded="full"
+                [attr.title]="messageFor('generateOutput')"
+                [attr.aria-label]="messageFor('generateOutput')"
+                [attr.aria-disabled]="disabledGenerateButton"
+                [svgIcon]="generateButtonSVGIcon"
+                [icon]="generateButtonIcon"
+                [disabled]="disabledGenerateButton"
+              (click)="handleGenerateOutput()">{{messageFor('generateOutput')}}</button>
             </div>
-        </div>
-    `,
+          </div>
+        }
+        `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective$2, NgFor, ButtonComponent, AIPromptToolbarFocusableDirective, NgIf, NgTemplateOutlet, FloatingActionButtonComponent]
+                    imports: [LocalizedMessagesDirective$2, ButtonComponent, AIPromptToolbarFocusableDirective, NgTemplateOutlet, FloatingActionButtonComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: AIPromptService }, { type: ToolbarNavigationService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { hostClasses: [{
                 type: HostBinding,
@@ -1380,56 +1396,55 @@ class AIPromptOutputCardComponent {
         return this.service.outputBodyTemplate?.templateRef;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AIPromptOutputCardComponent, deps: [{ token: i1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AIPromptOutputCardComponent, isStandalone: true, selector: "[kendoAIPromptOutputCard]", inputs: { promptOutput: "promptOutput" }, host: { properties: { "class.k-card": "this.hostClass", "attr.role": "this.listItemRole", "attr.tabindex": "this.tabIndex", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AIPromptOutputCardComponent, isStandalone: true, selector: "[kendoAIPromptOutputCard]", inputs: { promptOutput: "promptOutput" }, host: { properties: { "class.k-card": "this.hostClass", "attr.role": "this.listItemRole", "attr.tabindex": "this.tabIndex", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts" } }, ngImport: i0, template: `
         <div class="k-card-header">
-            <div
-                class="k-card-title"
-                [attr.id]="titleId">{{outputTitle}}
-            </div>
-            <div class="k-card-subtitle">{{promptOutput.prompt}}</div>
+          <div
+            class="k-card-title"
+            [attr.id]="titleId">{{outputTitle}}
+          </div>
+          <div class="k-card-subtitle">{{promptOutput.prompt}}</div>
         </div>
         <div class="k-card-body">
-            <ng-container *ngIf="customBodyTemplate; else defaultTemplate">
-                <ng-container *ngTemplateOutlet="customBodyTemplate; context: { $implicit: promptOutput }">
-                </ng-container>
+          @if (customBodyTemplate) {
+            <ng-container *ngTemplateOutlet="customBodyTemplate; context: { $implicit: promptOutput }">
             </ng-container>
-            <ng-template #defaultTemplate>
-                <p>{{promptOutput.output}}</p>
-            </ng-template>
+          } @else {
+            <p>{{promptOutput.output}}</p>
+          }
         </div>
         <div class="k-actions k-actions-start k-actions-horizontal k-card-actions">
+          <button kendoButton
+            fillMode="flat"
+            themeColor="primary"
+            rounded="full"
+            icon="copy"
+            [svgIcon]="copyIcon"
+            (click)="handleCopy()"
+          >{{messageFor('copyOutput')}}</button>
+          <button kendoButton
+            fillMode="flat"
+            rounded="full"
+            icon="arrow-rotate-cw"
+            [svgIcon]="retryIcon"
+            (click)="handleRetry()"
+          >{{messageFor('retryGeneration')}}</button>
+          @if (showRating) {
+            <span class="k-spacer"></span>
             <button kendoButton
-                fillMode="flat"
-                themeColor="primary"
-                rounded="full"
-                icon="copy"
-                [svgIcon]="copyIcon"
-                (click)="handleCopy()"
-            >{{messageFor('copyOutput')}}</button>
+              fillMode="flat"
+              icon="thumb-up-outline"
+              [svgIcon]="positiveRatingIcon"
+              (click)="handleRating('positive')">
+            </button>
             <button kendoButton
-                fillMode="flat"
-                rounded="full"
-                icon="arrow-rotate-cw"
-                [svgIcon]="retryIcon"
-                (click)="handleRetry()"
-            >{{messageFor('retryGeneration')}}</button>
-            <ng-container *ngIf="showRating">
-                <span class="k-spacer"></span>
-                <button kendoButton
-                    fillMode="flat"
-                    icon="thumb-up-outline"
-                    [svgIcon]="positiveRatingIcon"
-                    (click)="handleRating('positive')">
-                </button>
-                <button kendoButton
-                    fillMode="flat"
-                    icon="thumb-down-outline"
-                    [svgIcon]="negativeRatingIcon"
-                    (click)="handleRating('negative')">
-                </button>
-            </ng-container>
+              fillMode="flat"
+              icon="thumb-down-outline"
+              [svgIcon]="negativeRatingIcon"
+              (click)="handleRating('negative')">
+            </button>
+          }
         </div>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AIPromptOutputCardComponent, decorators: [{
             type: Component,
@@ -1437,56 +1452,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: '[kendoAIPromptOutputCard]',
                     template: `
         <div class="k-card-header">
-            <div
-                class="k-card-title"
-                [attr.id]="titleId">{{outputTitle}}
-            </div>
-            <div class="k-card-subtitle">{{promptOutput.prompt}}</div>
+          <div
+            class="k-card-title"
+            [attr.id]="titleId">{{outputTitle}}
+          </div>
+          <div class="k-card-subtitle">{{promptOutput.prompt}}</div>
         </div>
         <div class="k-card-body">
-            <ng-container *ngIf="customBodyTemplate; else defaultTemplate">
-                <ng-container *ngTemplateOutlet="customBodyTemplate; context: { $implicit: promptOutput }">
-                </ng-container>
+          @if (customBodyTemplate) {
+            <ng-container *ngTemplateOutlet="customBodyTemplate; context: { $implicit: promptOutput }">
             </ng-container>
-            <ng-template #defaultTemplate>
-                <p>{{promptOutput.output}}</p>
-            </ng-template>
+          } @else {
+            <p>{{promptOutput.output}}</p>
+          }
         </div>
         <div class="k-actions k-actions-start k-actions-horizontal k-card-actions">
+          <button kendoButton
+            fillMode="flat"
+            themeColor="primary"
+            rounded="full"
+            icon="copy"
+            [svgIcon]="copyIcon"
+            (click)="handleCopy()"
+          >{{messageFor('copyOutput')}}</button>
+          <button kendoButton
+            fillMode="flat"
+            rounded="full"
+            icon="arrow-rotate-cw"
+            [svgIcon]="retryIcon"
+            (click)="handleRetry()"
+          >{{messageFor('retryGeneration')}}</button>
+          @if (showRating) {
+            <span class="k-spacer"></span>
             <button kendoButton
-                fillMode="flat"
-                themeColor="primary"
-                rounded="full"
-                icon="copy"
-                [svgIcon]="copyIcon"
-                (click)="handleCopy()"
-            >{{messageFor('copyOutput')}}</button>
+              fillMode="flat"
+              icon="thumb-up-outline"
+              [svgIcon]="positiveRatingIcon"
+              (click)="handleRating('positive')">
+            </button>
             <button kendoButton
-                fillMode="flat"
-                rounded="full"
-                icon="arrow-rotate-cw"
-                [svgIcon]="retryIcon"
-                (click)="handleRetry()"
-            >{{messageFor('retryGeneration')}}</button>
-            <ng-container *ngIf="showRating">
-                <span class="k-spacer"></span>
-                <button kendoButton
-                    fillMode="flat"
-                    icon="thumb-up-outline"
-                    [svgIcon]="positiveRatingIcon"
-                    (click)="handleRating('positive')">
-                </button>
-                <button kendoButton
-                    fillMode="flat"
-                    icon="thumb-down-outline"
-                    [svgIcon]="negativeRatingIcon"
-                    (click)="handleRating('negative')">
-                </button>
-            </ng-container>
+              fillMode="flat"
+              icon="thumb-down-outline"
+              [svgIcon]="negativeRatingIcon"
+              (click)="handleRating('negative')">
+            </button>
+          }
         </div>
-    `,
+        `,
                     standalone: true,
-                    imports: [ButtonComponent, NgIf, NgTemplateOutlet]
+                    imports: [ButtonComponent, NgTemplateOutlet]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: AIPromptService }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -1536,26 +1550,25 @@ class OutputViewComponent extends BaseView {
         return this.service.outputTemplate?.templateRef;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OutputViewComponent, deps: [{ token: i1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: OutputViewComponent, isStandalone: true, selector: "kendo-aiprompt-output-view", providers: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: OutputViewComponent, isStandalone: true, selector: "kendo-aiprompt-output-view", providers: [{
                 provide: BaseView,
                 useExisting: forwardRef(() => OutputViewComponent)
             }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #content>
-            <div
-                class="k-card-list"
-                role="list">
-                <ng-container *ngFor="let output of promptOutputs">
-                    <ng-container *ngIf="customTemplate; else defaultTemplate">
-                        <ng-container *ngTemplateOutlet="customTemplate; context: { $implicit: output }">
-                        </ng-container>
-                    </ng-container>
-                    <ng-template #defaultTemplate>
-                        <div kendoAIPromptOutputCard [promptOutput]="output"></div>
-                    </ng-template>
+          <div
+            class="k-card-list"
+            role="list">
+            @for (output of promptOutputs; track output) {
+              @if (customTemplate) {
+                <ng-container *ngTemplateOutlet="customTemplate; context: { $implicit: output }">
                 </ng-container>
-            </div>
+              } @else {
+                <div kendoAIPromptOutputCard [promptOutput]="output"></div>
+              }
+            }
+          </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AIPromptOutputCardComponent, selector: "[kendoAIPromptOutputCard]", inputs: ["promptOutput"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: AIPromptOutputCardComponent, selector: "[kendoAIPromptOutputCard]", inputs: ["promptOutput"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OutputViewComponent, decorators: [{
             type: Component,
@@ -1567,23 +1580,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         }],
                     template: `
         <ng-template #content>
-            <div
-                class="k-card-list"
-                role="list">
-                <ng-container *ngFor="let output of promptOutputs">
-                    <ng-container *ngIf="customTemplate; else defaultTemplate">
-                        <ng-container *ngTemplateOutlet="customTemplate; context: { $implicit: output }">
-                        </ng-container>
-                    </ng-container>
-                    <ng-template #defaultTemplate>
-                        <div kendoAIPromptOutputCard [promptOutput]="output"></div>
-                    </ng-template>
+          <div
+            class="k-card-list"
+            role="list">
+            @for (output of promptOutputs; track output) {
+              @if (customTemplate) {
+                <ng-container *ngTemplateOutlet="customTemplate; context: { $implicit: output }">
                 </ng-container>
-            </div>
+              } @else {
+                <div kendoAIPromptOutputCard [promptOutput]="output"></div>
+              }
+            }
+          </div>
         </ng-template>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgFor, AIPromptOutputCardComponent, NgIf, NgTemplateOutlet]
+                    imports: [AIPromptOutputCardComponent, NgTemplateOutlet]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: AIPromptService }] });
 
@@ -1678,84 +1690,92 @@ class PromptViewComponent extends BaseView {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PromptViewComponent, deps: [{ token: i1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PromptViewComponent, isStandalone: true, selector: "kendo-aiprompt-prompt-view", providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PromptViewComponent, isStandalone: true, selector: "kendo-aiprompt-prompt-view", providers: [
             {
                 provide: BaseView,
                 useExisting: forwardRef(() => PromptViewComponent)
             }
         ], usesInheritance: true, ngImport: i0, template: `
         <ng-template #content>
-            <kendo-textarea
-                [cols]="textareaSettings?.cols"
-                [disabled]="textareaSettings?.disabled"
-                [fillMode]="textareaSettings?.fillMode"
-                [flow]="textareaSettings?.flow ?? 'vertical'"
-                [inputAttributes]="textareaSettings?.inputAttributes"
-                [maxlength]="textareaSettings?.maxlength"
-                [placeholder]="textareaSettings?.placeholder ?? messageFor('promptPlaceholder')"
-                [readonly]="textareaSettings?.readonly"
-                [resizable]="textareaSettings?.resizable ?? 'vertical'"
-                [rounded]="textareaSettings?.rounded"
-                [rows]="textareaSettings?.rows ?? 1"
-                [selectOnFocus]="textareaSettings?.selectOnFocus"
-                [showSuffixSeparator]="textareaSettings?.showSuffixSeparator ?? true"
-                [size]="textareaSettings?.size"
-                [tabIndex]="textareaSettings?.tabindex"
-                [title]="textareaSettings?.title"
-                [(value)]="textAreaValue"
+          <kendo-textarea
+            [cols]="textareaSettings?.cols"
+            [disabled]="textareaSettings?.disabled"
+            [fillMode]="textareaSettings?.fillMode"
+            [flow]="textareaSettings?.flow ?? 'vertical'"
+            [inputAttributes]="textareaSettings?.inputAttributes"
+            [maxlength]="textareaSettings?.maxlength"
+            [placeholder]="textareaSettings?.placeholder ?? messageFor('promptPlaceholder')"
+            [readonly]="textareaSettings?.readonly"
+            [resizable]="textareaSettings?.resizable ?? 'vertical'"
+            [rounded]="textareaSettings?.rounded"
+            [rows]="textareaSettings?.rows ?? 1"
+            [selectOnFocus]="textareaSettings?.selectOnFocus"
+            [showSuffixSeparator]="textareaSettings?.showSuffixSeparator ?? true"
+            [size]="textareaSettings?.size"
+            [tabIndex]="textareaSettings?.tabindex"
+            [title]="textareaSettings?.title"
+            [(value)]="textAreaValue"
             >
-                <kendo-textarea-suffix *ngIf="speechToTextButtonSettings">
-                    <button kendoSpeechToTextButton
+            @if (speechToTextButtonSettings) {
+              <kendo-textarea-suffix>
+                <button kendoSpeechToTextButton
+                  role="button"
+                  [continuous]="speechToTextButtonSettings?.continuous"
+                  [disabled]="speechToTextButtonSettings?.disabled"
+                  [fillMode]="speechToTextButtonSettings?.fillMode ?? 'flat'"
+                  [integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
+                  [interimResults]="speechToTextButtonSettings?.interimResults"
+                  [lang]="speechToTextButtonSettings?.lang"
+                  [maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
+                  [rounded]="speechToTextButtonSettings?.rounded"
+                  [size]="speechToTextButtonSettings?.size"
+                  [themeColor]="speechToTextButtonSettings?.themeColor"
+                  [attr.aria-label]="messageFor('speechToTextButton')"
+                  [attr.title]="messageFor('speechToTextButton')"
+                  [attr.aria-disabled]="speechToTextButtonSettings?.disabled"
+                  (error)="onSpeechToTextError($event)"
+                  (result)="onSpeechToTextResult($event)"
+                ></button>
+              </kendo-textarea-suffix>
+            }
+          </kendo-textarea>
+          @if (promptSuggestions) {
+            <div
+              class="k-prompt-expander">
+              <button kendoButton
+                [attr.aria-controls]="contentId"
+                [attr.aria-expanded]="showSuggestions"
+                fillMode="flat"
+                [icon]="suggestionsIcons.font"
+                [svgIcon]="suggestionsIcons.svg"
+                type="button"
+                (click)="showSuggestions = !showSuggestions">
+                {{messageFor('promptSuggestions')}}
+              </button>
+              @if (showSuggestions) {
+                <div
+                  class="k-prompt-expander-content"
+                  [attr.id]="contentId">
+                  <div class="k-suggestion-group" role="group">
+                    @for (suggestion of promptSuggestions; track suggestion) {
+                      <div
+                        class="k-suggestion"
                         role="button"
-                        [continuous]="speechToTextButtonSettings?.continuous" 
-                        [disabled]="speechToTextButtonSettings?.disabled" 
-                        [fillMode]="speechToTextButtonSettings?.fillMode ?? 'flat'"
-                        [integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
-                        [interimResults]="speechToTextButtonSettings?.interimResults"
-                        [lang]="speechToTextButtonSettings?.lang"
-                        [maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
-                        [rounded]="speechToTextButtonSettings?.rounded"
-                        [size]="speechToTextButtonSettings?.size"
-                        [themeColor]="speechToTextButtonSettings?.themeColor"
-                        [attr.aria-label]="messageFor('speechToTextButton')"
-                        [attr.title]="messageFor('speechToTextButton')"
-                        [attr.aria-disabled]="speechToTextButtonSettings?.disabled"
-                        (error)="onSpeechToTextError($event)"
-                        (result)="onSpeechToTextResult($event)"
-                    ></button>
-                </kendo-textarea-suffix>
-            </kendo-textarea>
-            <div *ngIf="promptSuggestions"
-                class="k-prompt-expander">
-                <button kendoButton
-                    [attr.aria-controls]="contentId"
-                    [attr.aria-expanded]="showSuggestions"
-                    fillMode="flat"
-                    [icon]="suggestionsIcons.font"
-                    [svgIcon]="suggestionsIcons.svg"
-                    type="button"
-                    (click)="showSuggestions = !showSuggestions">
-                    {{messageFor('promptSuggestions')}}
-                </button>
-                <div *ngIf="showSuggestions"
-                    class="k-prompt-expander-content"
-                    [attr.id]="contentId">
-                    <div class="k-suggestion-group" role="group">
-                        <div *ngFor="let suggestion of promptSuggestions"
-                            class="k-suggestion"
-                            role="button"
-                            [attr.tabindex]="0"
-                            [attr.aria-label]="suggestion"
-                            [attr.title]="suggestion"
-                            (click)="suggestionClick(suggestion)"
-                            (keydown)="suggestionKeydown($event, suggestion)">
-                            {{suggestion}}
-                        </div>
-                    </div>
+                        [attr.tabindex]="0"
+                        [attr.aria-label]="suggestion"
+                        [attr.title]="suggestion"
+                        (click)="suggestionClick(suggestion)"
+                        (keydown)="suggestionKeydown($event, suggestion)">
+                        {{suggestion}}
+                      </div>
+                    }
+                  </div>
                 </div>
+              }
             </div>
+          }
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PromptViewComponent, decorators: [{
             type: Component,
@@ -1769,79 +1789,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     template: `
         <ng-template #content>
-            <kendo-textarea
-                [cols]="textareaSettings?.cols"
-                [disabled]="textareaSettings?.disabled"
-                [fillMode]="textareaSettings?.fillMode"
-                [flow]="textareaSettings?.flow ?? 'vertical'"
-                [inputAttributes]="textareaSettings?.inputAttributes"
-                [maxlength]="textareaSettings?.maxlength"
-                [placeholder]="textareaSettings?.placeholder ?? messageFor('promptPlaceholder')"
-                [readonly]="textareaSettings?.readonly"
-                [resizable]="textareaSettings?.resizable ?? 'vertical'"
-                [rounded]="textareaSettings?.rounded"
-                [rows]="textareaSettings?.rows ?? 1"
-                [selectOnFocus]="textareaSettings?.selectOnFocus"
-                [showSuffixSeparator]="textareaSettings?.showSuffixSeparator ?? true"
-                [size]="textareaSettings?.size"
-                [tabIndex]="textareaSettings?.tabindex"
-                [title]="textareaSettings?.title"
-                [(value)]="textAreaValue"
+          <kendo-textarea
+            [cols]="textareaSettings?.cols"
+            [disabled]="textareaSettings?.disabled"
+            [fillMode]="textareaSettings?.fillMode"
+            [flow]="textareaSettings?.flow ?? 'vertical'"
+            [inputAttributes]="textareaSettings?.inputAttributes"
+            [maxlength]="textareaSettings?.maxlength"
+            [placeholder]="textareaSettings?.placeholder ?? messageFor('promptPlaceholder')"
+            [readonly]="textareaSettings?.readonly"
+            [resizable]="textareaSettings?.resizable ?? 'vertical'"
+            [rounded]="textareaSettings?.rounded"
+            [rows]="textareaSettings?.rows ?? 1"
+            [selectOnFocus]="textareaSettings?.selectOnFocus"
+            [showSuffixSeparator]="textareaSettings?.showSuffixSeparator ?? true"
+            [size]="textareaSettings?.size"
+            [tabIndex]="textareaSettings?.tabindex"
+            [title]="textareaSettings?.title"
+            [(value)]="textAreaValue"
             >
-                <kendo-textarea-suffix *ngIf="speechToTextButtonSettings">
-                    <button kendoSpeechToTextButton
+            @if (speechToTextButtonSettings) {
+              <kendo-textarea-suffix>
+                <button kendoSpeechToTextButton
+                  role="button"
+                  [continuous]="speechToTextButtonSettings?.continuous"
+                  [disabled]="speechToTextButtonSettings?.disabled"
+                  [fillMode]="speechToTextButtonSettings?.fillMode ?? 'flat'"
+                  [integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
+                  [interimResults]="speechToTextButtonSettings?.interimResults"
+                  [lang]="speechToTextButtonSettings?.lang"
+                  [maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
+                  [rounded]="speechToTextButtonSettings?.rounded"
+                  [size]="speechToTextButtonSettings?.size"
+                  [themeColor]="speechToTextButtonSettings?.themeColor"
+                  [attr.aria-label]="messageFor('speechToTextButton')"
+                  [attr.title]="messageFor('speechToTextButton')"
+                  [attr.aria-disabled]="speechToTextButtonSettings?.disabled"
+                  (error)="onSpeechToTextError($event)"
+                  (result)="onSpeechToTextResult($event)"
+                ></button>
+              </kendo-textarea-suffix>
+            }
+          </kendo-textarea>
+          @if (promptSuggestions) {
+            <div
+              class="k-prompt-expander">
+              <button kendoButton
+                [attr.aria-controls]="contentId"
+                [attr.aria-expanded]="showSuggestions"
+                fillMode="flat"
+                [icon]="suggestionsIcons.font"
+                [svgIcon]="suggestionsIcons.svg"
+                type="button"
+                (click)="showSuggestions = !showSuggestions">
+                {{messageFor('promptSuggestions')}}
+              </button>
+              @if (showSuggestions) {
+                <div
+                  class="k-prompt-expander-content"
+                  [attr.id]="contentId">
+                  <div class="k-suggestion-group" role="group">
+                    @for (suggestion of promptSuggestions; track suggestion) {
+                      <div
+                        class="k-suggestion"
                         role="button"
-                        [continuous]="speechToTextButtonSettings?.continuous" 
-                        [disabled]="speechToTextButtonSettings?.disabled" 
-                        [fillMode]="speechToTextButtonSettings?.fillMode ?? 'flat'"
-                        [integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
-                        [interimResults]="speechToTextButtonSettings?.interimResults"
-                        [lang]="speechToTextButtonSettings?.lang"
-                        [maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
-                        [rounded]="speechToTextButtonSettings?.rounded"
-                        [size]="speechToTextButtonSettings?.size"
-                        [themeColor]="speechToTextButtonSettings?.themeColor"
-                        [attr.aria-label]="messageFor('speechToTextButton')"
-                        [attr.title]="messageFor('speechToTextButton')"
-                        [attr.aria-disabled]="speechToTextButtonSettings?.disabled"
-                        (error)="onSpeechToTextError($event)"
-                        (result)="onSpeechToTextResult($event)"
-                    ></button>
-                </kendo-textarea-suffix>
-            </kendo-textarea>
-            <div *ngIf="promptSuggestions"
-                class="k-prompt-expander">
-                <button kendoButton
-                    [attr.aria-controls]="contentId"
-                    [attr.aria-expanded]="showSuggestions"
-                    fillMode="flat"
-                    [icon]="suggestionsIcons.font"
-                    [svgIcon]="suggestionsIcons.svg"
-                    type="button"
-                    (click)="showSuggestions = !showSuggestions">
-                    {{messageFor('promptSuggestions')}}
-                </button>
-                <div *ngIf="showSuggestions"
-                    class="k-prompt-expander-content"
-                    [attr.id]="contentId">
-                    <div class="k-suggestion-group" role="group">
-                        <div *ngFor="let suggestion of promptSuggestions"
-                            class="k-suggestion"
-                            role="button"
-                            [attr.tabindex]="0"
-                            [attr.aria-label]="suggestion"
-                            [attr.title]="suggestion"
-                            (click)="suggestionClick(suggestion)"
-                            (keydown)="suggestionKeydown($event, suggestion)">
-                            {{suggestion}}
-                        </div>
-                    </div>
+                        [attr.tabindex]="0"
+                        [attr.aria-label]="suggestion"
+                        [attr.title]="suggestion"
+                        (click)="suggestionClick(suggestion)"
+                        (keydown)="suggestionKeydown($event, suggestion)">
+                        {{suggestion}}
+                      </div>
+                    }
+                  </div>
                 </div>
+              }
             </div>
+          }
         </ng-template>
-    `,
+        `,
                     standalone: true,
-                    imports: [TextAreaComponent, NgIf, ButtonComponent, NgFor, TextAreaSuffixComponent, SpeechToTextButtonComponent]
+                    imports: [TextAreaComponent, ButtonComponent, TextAreaSuffixComponent, SpeechToTextButtonComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: AIPromptService }] });
 
@@ -2636,13 +2664,13 @@ class SuggestedActionsComponent extends ChatItem {
         this.activeIndex = apply ? index : -1;
     }
     actionKeydown(e, action) {
-        const handler = this.actionKeyHandlers[normalizeNumpadKeys(e)];
+        const handler = this.actionKeyHandlers[normalizeKeys(e)];
         if (handler) {
             handler(e, action);
         }
     }
     suggestionKeydown(e, suggestion) {
-        const handler = this.suggestionKeyHandlers[normalizeNumpadKeys(e)];
+        const handler = this.suggestionKeyHandlers[normalizeKeys(e)];
         if (handler) {
             handler(e, suggestion);
         }
@@ -2681,96 +2709,100 @@ class SuggestedActionsComponent extends ChatItem {
         this.selectedIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SuggestedActionsComponent, deps: [{ token: ChatService }, { token: i1.LocalizationService }, { token: SuggestionsScrollService }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SuggestedActionsComponent, isStandalone: true, selector: "kendo-chat-suggested-actions", inputs: { actions: "actions", suggestions: "suggestions", tabbable: "tabbable", type: "type", suggestionTemplate: "suggestionTemplate" }, outputs: { dispatchAction: "dispatchAction", dispatchSuggestion: "dispatchSuggestion" }, host: { properties: { "class.k-suggestion-group": "this.defaultClass", "class.k-suggestion-group-scrollable": "this.scrollableClass", "class.k-suggestion-scrollwrap": "this.scrollButtonsClass", "attr.role": "this.role" } }, providers: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SuggestedActionsComponent, isStandalone: true, selector: "kendo-chat-suggested-actions", inputs: { actions: "actions", suggestions: "suggestions", tabbable: "tabbable", type: "type", suggestionTemplate: "suggestionTemplate" }, outputs: { dispatchAction: "dispatchAction", dispatchSuggestion: "dispatchSuggestion" }, host: { properties: { "class.k-suggestion-group": "this.defaultClass", "class.k-suggestion-group-scrollable": "this.scrollableClass", "class.k-suggestion-scrollwrap": "this.scrollButtonsClass", "attr.role": "this.role" } }, providers: [{
                 provide: ChatItem,
                 useExisting: forwardRef(() => SuggestedActionsComponent)
             },
             SuggestionsScrollService
         ], viewQueries: [{ propertyName: "suggestionsContainer", first: true, predicate: ["suggestionsContainer"], descendants: true, read: ElementRef }, { propertyName: "prevScrollButton", first: true, predicate: ["prevScrollButton"], descendants: true, read: ElementRef }, { propertyName: "nextScrollButton", first: true, predicate: ["nextScrollButton"], descendants: true, read: ElementRef }, { propertyName: "items", predicate: ["item"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <span 
-            *ngIf="hasScrollButtons" 
+        @if (hasScrollButtons) {
+          <span
             #prevScrollButton
             kendoChatScrollableButton
             [prev]="true"
             [title]="getScrollButtonTitle('prev')"
             class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button"
             (onClick)="scrollSuggestions($event)"
-        >
-        </span>
-        <div class="k-suggestion-group" *ngIf="hasScrollButtons; else noScrollButtons" 
+            >
+          </span>
+        }
+        @if (hasScrollButtons) {
+          <div class="k-suggestion-group"
             #suggestionsContainer
             role="group"
             (scroll)="onScroll($event)">
             <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
-        </div>
-
-        <ng-template #noScrollButtons>
-            <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
-        </ng-template>
-
+          </div>
+        } @else {
+          <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
+        }
+        
+        
         <ng-template #suggestionsContent>
-            <ng-container *ngIf="actions">
-                <span
-                    #item
-                    *ngFor="let action of actions; index as index; first as first; last as last"
-                    class="k-suggestion k-suggestion-primary"
-                    role="button"
-                    [class.k-selected]="isSelected(index)"
-                    [class.k-focus]="isSelected(index)"
-                    [class.k-active]="isActive(index)"
-                    [attr.tabindex]="0"
-                    (click)="actionClick(action, index)"
-                    (keydown)="actionKeydown($event, action)"
-                    (mousedown)="toggleActiveState(true, index)"
-                    (mouseup)="toggleActiveState(false, index)"
+          @if (actions) {
+            @for (action of actions; track action; let index = $index; let first = $first; let last = $last) {
+              <span
+                #item
+                class="k-suggestion k-suggestion-primary"
+                role="button"
+                [class.k-selected]="isSelected(index)"
+                [class.k-focus]="isSelected(index)"
+                [class.k-active]="isActive(index)"
+                [attr.tabindex]="0"
+                (click)="actionClick(action, index)"
+                (keydown)="actionKeydown($event, action)"
+                (mousedown)="toggleActiveState(true, index)"
+                (mouseup)="toggleActiveState(false, index)"
                 >
-                    {{ action.title || action.value }}
+                {{ action.title || action.value }}
+              </span>
+            }
+          }
+        
+          @if (suggestions) {
+            @if (!suggestionTemplate?.templateRef) {
+              @for (suggestion of suggestions; track suggestion; let index = $index; let first = $first; let last = $last) {
+                <span
+                  #item
+                  class="k-suggestion"
+                  role="button"
+                  [class.k-selected]="isSelected(index)"
+                  [class.k-focus]="isSelected(index)"
+                  [class.k-active]="isActive(index)"
+                  [attr.tabindex]="0"
+                  (click)="suggestionClick(suggestion, index)"
+                  (keydown)="suggestionKeydown($event, suggestion)"
+                  (mousedown)="toggleActiveState(true, index)"
+                  (mouseup)="toggleActiveState(false, index)"
+                  >
+                  {{ suggestion.text }}
                 </span>
-            </ng-container>
-
-            <ng-container *ngIf="suggestions">
-                <ng-container *ngIf="!suggestionTemplate?.templateRef">
-                    <span
-                        #item
-                        *ngFor="let suggestion of suggestions; index as index; first as first; last as last"
-                        class="k-suggestion"
-                        role="button"
-                        [class.k-selected]="isSelected(index)"
-                        [class.k-focus]="isSelected(index)"
-                        [class.k-active]="isActive(index)"
-                        [attr.tabindex]="0"
-                        (click)="suggestionClick(suggestion, index)"
-                        (keydown)="suggestionKeydown($event, suggestion)"
-                        (mousedown)="toggleActiveState(true, index)"
-                        (mouseup)="toggleActiveState(false, index)"
-                    >
-                        {{ suggestion.text }}
-                    </span>
-                </ng-container>
-
-                <ng-container *ngIf="suggestionTemplate?.templateRef">
-                    <ng-container *ngFor="let suggestion of suggestions">
-                        <ng-template
-                            [ngTemplateOutlet]="suggestionTemplate.templateRef"
-                            [ngTemplateOutletContext]="{ $implicit: suggestion }"
-                        >
-                        </ng-template>
-                    </ng-container>
-                </ng-container>
-            </ng-container>
+              }
+            }
+            @if (suggestionTemplate?.templateRef) {
+              @for (suggestion of suggestions; track suggestion) {
+                <ng-template
+                  [ngTemplateOutlet]="suggestionTemplate.templateRef"
+                  [ngTemplateOutletContext]="{ $implicit: suggestion }"
+                  >
+                </ng-template>
+              }
+            }
+          }
         </ng-template>
-
-        <span 
-            *ngIf="hasScrollButtons"
+        
+        @if (hasScrollButtons) {
+          <span
             #nextScrollButton
             kendoChatScrollableButton
             [prev]="false"
             [title]="getScrollButtonTitle('next')"
             class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button"
             (onClick)="scrollSuggestions($event)"
-        >
-        </span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChatScrollableButtonComponent, selector: "[kendoChatScrollableButton]", inputs: ["prev"], outputs: ["onClick"] }] });
+            >
+          </span>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChatScrollableButtonComponent, selector: "[kendoChatScrollableButton]", inputs: ["prev"], outputs: ["onClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SuggestedActionsComponent, decorators: [{
             type: Component,
@@ -2782,92 +2814,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         },
                         SuggestionsScrollService],
                     template: `
-        <span 
-            *ngIf="hasScrollButtons" 
+        @if (hasScrollButtons) {
+          <span
             #prevScrollButton
             kendoChatScrollableButton
             [prev]="true"
             [title]="getScrollButtonTitle('prev')"
             class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button"
             (onClick)="scrollSuggestions($event)"
-        >
-        </span>
-        <div class="k-suggestion-group" *ngIf="hasScrollButtons; else noScrollButtons" 
+            >
+          </span>
+        }
+        @if (hasScrollButtons) {
+          <div class="k-suggestion-group"
             #suggestionsContainer
             role="group"
             (scroll)="onScroll($event)">
             <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
-        </div>
-
-        <ng-template #noScrollButtons>
-            <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
-        </ng-template>
-
+          </div>
+        } @else {
+          <ng-container *ngTemplateOutlet="suggestionsContent"></ng-container>
+        }
+        
+        
         <ng-template #suggestionsContent>
-            <ng-container *ngIf="actions">
-                <span
-                    #item
-                    *ngFor="let action of actions; index as index; first as first; last as last"
-                    class="k-suggestion k-suggestion-primary"
-                    role="button"
-                    [class.k-selected]="isSelected(index)"
-                    [class.k-focus]="isSelected(index)"
-                    [class.k-active]="isActive(index)"
-                    [attr.tabindex]="0"
-                    (click)="actionClick(action, index)"
-                    (keydown)="actionKeydown($event, action)"
-                    (mousedown)="toggleActiveState(true, index)"
-                    (mouseup)="toggleActiveState(false, index)"
+          @if (actions) {
+            @for (action of actions; track action; let index = $index; let first = $first; let last = $last) {
+              <span
+                #item
+                class="k-suggestion k-suggestion-primary"
+                role="button"
+                [class.k-selected]="isSelected(index)"
+                [class.k-focus]="isSelected(index)"
+                [class.k-active]="isActive(index)"
+                [attr.tabindex]="0"
+                (click)="actionClick(action, index)"
+                (keydown)="actionKeydown($event, action)"
+                (mousedown)="toggleActiveState(true, index)"
+                (mouseup)="toggleActiveState(false, index)"
                 >
-                    {{ action.title || action.value }}
+                {{ action.title || action.value }}
+              </span>
+            }
+          }
+        
+          @if (suggestions) {
+            @if (!suggestionTemplate?.templateRef) {
+              @for (suggestion of suggestions; track suggestion; let index = $index; let first = $first; let last = $last) {
+                <span
+                  #item
+                  class="k-suggestion"
+                  role="button"
+                  [class.k-selected]="isSelected(index)"
+                  [class.k-focus]="isSelected(index)"
+                  [class.k-active]="isActive(index)"
+                  [attr.tabindex]="0"
+                  (click)="suggestionClick(suggestion, index)"
+                  (keydown)="suggestionKeydown($event, suggestion)"
+                  (mousedown)="toggleActiveState(true, index)"
+                  (mouseup)="toggleActiveState(false, index)"
+                  >
+                  {{ suggestion.text }}
                 </span>
-            </ng-container>
-
-            <ng-container *ngIf="suggestions">
-                <ng-container *ngIf="!suggestionTemplate?.templateRef">
-                    <span
-                        #item
-                        *ngFor="let suggestion of suggestions; index as index; first as first; last as last"
-                        class="k-suggestion"
-                        role="button"
-                        [class.k-selected]="isSelected(index)"
-                        [class.k-focus]="isSelected(index)"
-                        [class.k-active]="isActive(index)"
-                        [attr.tabindex]="0"
-                        (click)="suggestionClick(suggestion, index)"
-                        (keydown)="suggestionKeydown($event, suggestion)"
-                        (mousedown)="toggleActiveState(true, index)"
-                        (mouseup)="toggleActiveState(false, index)"
-                    >
-                        {{ suggestion.text }}
-                    </span>
-                </ng-container>
-
-                <ng-container *ngIf="suggestionTemplate?.templateRef">
-                    <ng-container *ngFor="let suggestion of suggestions">
-                        <ng-template
-                            [ngTemplateOutlet]="suggestionTemplate.templateRef"
-                            [ngTemplateOutletContext]="{ $implicit: suggestion }"
-                        >
-                        </ng-template>
-                    </ng-container>
-                </ng-container>
-            </ng-container>
+              }
+            }
+            @if (suggestionTemplate?.templateRef) {
+              @for (suggestion of suggestions; track suggestion) {
+                <ng-template
+                  [ngTemplateOutlet]="suggestionTemplate.templateRef"
+                  [ngTemplateOutletContext]="{ $implicit: suggestion }"
+                  >
+                </ng-template>
+              }
+            }
+          }
         </ng-template>
-
-        <span 
-            *ngIf="hasScrollButtons"
+        
+        @if (hasScrollButtons) {
+          <span
             #nextScrollButton
             kendoChatScrollableButton
             [prev]="false"
             [title]="getScrollButtonTitle('next')"
             class="k-button k-button-md k-button-solid k-button-solid-base k-rounded-md k-icon-button"
             (onClick)="scrollSuggestions($event)"
-        >
-        </span>
-    `,
+            >
+          </span>
+        }
+        `,
                     standalone: true,
-                    imports: [NgFor, NgIf, NgTemplateOutlet, ChatScrollableButtonComponent]
+                    imports: [NgTemplateOutlet, ChatScrollableButtonComponent]
                 }]
         }], ctorParameters: () => [{ type: ChatService }, { type: i1.LocalizationService }, { type: SuggestionsScrollService }, { type: i0.NgZone }, { type: i0.Renderer2 }], propDecorators: { defaultClass: [{
                 type: HostBinding,
@@ -2942,30 +2978,31 @@ class ChatFileComponent extends ChatItem {
     }
     focus() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatFileComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChatFileComponent, isStandalone: true, selector: "li[chatFile]", inputs: { chatFile: "chatFile", removable: "removable", fileActions: "fileActions" }, outputs: { remove: "remove", actionClick: "actionClick", actionsToggle: "actionsToggle", actionButtonClick: "actionButtonClick" }, providers: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ChatFileComponent, isStandalone: true, selector: "li[chatFile]", inputs: { chatFile: "chatFile", removable: "removable", fileActions: "fileActions" }, outputs: { remove: "remove", actionClick: "actionClick", actionsToggle: "actionsToggle", actionButtonClick: "actionButtonClick" }, providers: [{
                 provide: ChatItem,
                 useExisting: forwardRef(() => ChatFileComponent)
             }], usesInheritance: true, ngImport: i0, template: `
         <kendo-icon-wrapper
-            size="xlarge"
-            [name]="fileGroupClass(chatFile.extension)"
-            [svgIcon]="fileThumbnail(chatFile.extension)"
-        >
+          size="xlarge"
+          [name]="fileGroupClass(chatFile.extension)"
+          [svgIcon]="fileThumbnail(chatFile.extension)"
+          >
         </kendo-icon-wrapper>
         <div class="k-chat-file-info">
-            <span class="k-chat-file-name">{{chatFile.name}}</span>
-            <span class="k-chat-file-size">{{getTotalFilesSizeMessage(chatFile)}}</span>
+          <span class="k-chat-file-name">{{chatFile.name}}</span>
+          <span class="k-chat-file-size">{{getTotalFilesSizeMessage(chatFile)}}</span>
         </div>
-        <button
+        @if (removable) {
+          <button
             kendoButton
-            *ngIf="removable"
             [attr.title]="textFor('removeFileTitle')"
             [svgIcon]="deleteIcon"
             (click)="remove.emit(chatFile)"
             fillMode="flat"
-        ></button>
-        <kendo-dropdownbutton
-            *ngIf="fileActions && fileActions.length > 0"
+          ></button>
+        }
+        @if (fileActions && fileActions.length > 0) {
+          <kendo-dropdownbutton
             [data]="fileActions"
             [attr.title]="textFor('fileActionsTitle')"
             fillMode="flat"
@@ -2975,8 +3012,9 @@ class ChatFileComponent extends ChatItem {
             (click)="$event.preventDefault()"
             (open)="actionsToggle.emit(true)"
             (close)="actionsToggle.emit(false)"
-        ></kendo-dropdownbutton>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }] });
+          ></kendo-dropdownbutton>
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["arrowIcon", "icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor", "buttonAttributes"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatFileComponent, decorators: [{
             type: Component,
@@ -2988,25 +3026,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         }],
                     template: `
         <kendo-icon-wrapper
-            size="xlarge"
-            [name]="fileGroupClass(chatFile.extension)"
-            [svgIcon]="fileThumbnail(chatFile.extension)"
-        >
+          size="xlarge"
+          [name]="fileGroupClass(chatFile.extension)"
+          [svgIcon]="fileThumbnail(chatFile.extension)"
+          >
         </kendo-icon-wrapper>
         <div class="k-chat-file-info">
-            <span class="k-chat-file-name">{{chatFile.name}}</span>
-            <span class="k-chat-file-size">{{getTotalFilesSizeMessage(chatFile)}}</span>
+          <span class="k-chat-file-name">{{chatFile.name}}</span>
+          <span class="k-chat-file-size">{{getTotalFilesSizeMessage(chatFile)}}</span>
         </div>
-        <button
+        @if (removable) {
+          <button
             kendoButton
-            *ngIf="removable"
             [attr.title]="textFor('removeFileTitle')"
             [svgIcon]="deleteIcon"
             (click)="remove.emit(chatFile)"
             fillMode="flat"
-        ></button>
-        <kendo-dropdownbutton
-            *ngIf="fileActions && fileActions.length > 0"
+          ></button>
+        }
+        @if (fileActions && fileActions.length > 0) {
+          <kendo-dropdownbutton
             [data]="fileActions"
             [attr.title]="textFor('fileActionsTitle')"
             fillMode="flat"
@@ -3016,10 +3055,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             (click)="$event.preventDefault()"
             (open)="actionsToggle.emit(true)"
             (close)="actionsToggle.emit(false)"
-        ></kendo-dropdownbutton>
-    `,
+          ></kendo-dropdownbutton>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, IconWrapperComponent, ButtonComponent, DropDownButtonComponent]
+                    imports: [IconWrapperComponent, ButtonComponent, DropDownButtonComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }], propDecorators: { chatFile: [{
                 type: Input
@@ -3095,7 +3135,7 @@ const groupItems = (total) => (acc, msg, index) => {
             attachments: msg.attachments,
             attachmentLayout: msg.attachmentLayout,
             timestamp: msg.timestamp,
-            trackBy: msg
+            trackBy: 'attachment-group' + msg.id
         });
     }
     if (msg.suggestedActions && isLastMessage) {
@@ -3103,7 +3143,7 @@ const groupItems = (total) => (acc, msg, index) => {
             type: 'action-group',
             actions: msg.suggestedActions,
             timestamp: msg.timestamp,
-            trackBy: msg
+            trackBy: 'action-group' + msg.id
         });
     }
     return acc;
@@ -3135,18 +3175,24 @@ 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: 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,
@@ -3157,16 +3203,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: ChatService }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -3371,9 +3423,9 @@ class MessageBoxComponent {
         this.executeSuggestion.emit(suggestion);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageBoxComponent, deps: [{ token: ChatService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MessageBoxComponent, isStandalone: true, selector: "kendo-message-box", inputs: { authorId: "authorId", autoScroll: "autoScroll", suggestions: "suggestions", placeholder: "placeholder", inputValue: "inputValue", localization: "localization", messageBoxTemplate: "messageBoxTemplate", suggestionTemplate: "suggestionTemplate" }, outputs: { sendMessage: "sendMessage", executeSuggestion: "executeSuggestion", fileSelect: "fileSelect", fileRemove: "fileRemove" }, host: { properties: { "style.border-color": "this.borderColor", "class.k-message-box-wrapper": "this.messageBoxWrapperClass" } }, viewQueries: [{ propertyName: "messageBoxInput", first: true, predicate: ["messageBoxInput"], descendants: true }, { propertyName: "fileSelectComponent", first: true, predicate: ["fileSelect"], descendants: true }, { propertyName: "suggestedActionsComponent", first: true, predicate: SuggestedActionsComponent, descendants: true }], ngImport: i0, template: `
-    <kendo-chat-suggested-actions
-        *ngIf="suggestions?.length > 0"
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MessageBoxComponent, isStandalone: true, selector: "kendo-message-box", inputs: { authorId: "authorId", autoScroll: "autoScroll", suggestions: "suggestions", placeholder: "placeholder", inputValue: "inputValue", localization: "localization", messageBoxTemplate: "messageBoxTemplate", suggestionTemplate: "suggestionTemplate" }, outputs: { sendMessage: "sendMessage", executeSuggestion: "executeSuggestion", fileSelect: "fileSelect", fileRemove: "fileRemove" }, host: { properties: { "style.border-color": "this.borderColor", "class.k-message-box-wrapper": "this.messageBoxWrapperClass" } }, viewQueries: [{ propertyName: "messageBoxInput", first: true, predicate: ["messageBoxInput"], descendants: true }, { propertyName: "fileSelectComponent", first: true, predicate: ["fileSelect"], descendants: true }, { propertyName: "suggestedActionsComponent", first: true, predicate: SuggestedActionsComponent, descendants: true }], ngImport: i0, template: `
+    @if (suggestions?.length > 0) {
+      <kendo-chat-suggested-actions
         #suggestedActions
         [suggestions]="suggestions"
         type="suggestion"
@@ -3382,110 +3434,120 @@ class MessageBoxComponent {
         (dispatchSuggestion)="dispatchSuggestion($event)"
         (click)="select(suggestedActions, $event)"
         (focus)="select(suggestedActions, $event)"
-    ></kendo-chat-suggested-actions>
-
-    <ng-container *ngIf="!messageBoxTemplate?.templateRef">
-        <kendo-textarea
-            #messageBoxInput
-            class="k-message-box"
-            resizable="none"
-            [rows]="3"
+      ></kendo-chat-suggested-actions>
+    }
+    
+    @if (!messageBoxTemplate?.templateRef) {
+      <kendo-textarea
+        #messageBoxInput
+        class="k-message-box"
+        resizable="none"
+        [rows]="3"
             [inputAttributes]="{
                 'aria-label': textFor('messageBoxInputLabel')
             }"
-            [placeholder]="placeholder || textFor('messagePlaceholder')"
-            [showSuffixSeparator]="false"
-            (keydown)="textAreaKeydown($event)"
-            [value]="inputValue"
-            (valueChange)="onInputValueChange($event)"
+        [placeholder]="placeholder || textFor('messagePlaceholder')"
+        [showSuffixSeparator]="false"
+        (keydown)="textAreaKeydown($event)"
+        [value]="inputValue"
+        (valueChange)="onInputValueChange($event)"
         >
-            <kendo-textarea-prefix *ngIf="reply || (files && files.length > 0)">
-                <div class="k-message-reference k-message-reference-sender" *ngIf="reply" (click)="onReplyReferenceClick($event)">
-                    <chat-message-reference-content [message]="reply"></chat-message-reference-content>
-                    <span class="k-spacer"></span>
-                    <button
-                        kendoButton
-                        [attr.title]="textFor('removeReplyTitle')"
-                        [svgIcon]="deleteIcon"
-                        (click)="removeReply()"
-                        fillMode="flat"
-                    ></button>
-                </div>
-                <ul class="k-chat-file-wrapper">
-                    <li class="k-chat-file"
-                        *ngFor="let file of files; let i = index"
-                        [chatFile]="file"
-                        [removable]="true"
-                        (remove)="removeFile(i)"
-                    ></li>
-                </ul>
-            </kendo-textarea-prefix>
-
-            <kendo-textarea-suffix>
-                <button *ngIf="speechToTextButtonSettings"
-                    kendoSpeechToTextButton
-                    [attr.title]="textFor('speechToTextButtonTitle')"
-                    [continuous]="speechToTextButtonSettings?.continuous"
-                    [disabled]="speechToTextButtonSettings?.disabled"
-                    [fillMode]="speechToTextButtonSettings?.fillMode ?? 'clear'"
-                    [integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
-                    [interimResults]="speechToTextButtonSettings?.interimResults"
-                    [lang]="speechToTextButtonSettings?.lang"
-                    [maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
-                    [rounded]="speechToTextButtonSettings?.rounded"
-                    [size]="speechToTextButtonSettings?.size"
-                    [themeColor]="speechToTextButtonSettings?.themeColor"
-                    (result)="handleSpeechResult($event)"
-                    (start)="isListening = true"
-                    (end)="isListening = false"
-                ></button>
+        @if (reply || (files && files.length > 0)) {
+          <kendo-textarea-prefix>
+            @if (reply) {
+              <div class="k-message-reference k-message-reference-sender" (click)="onReplyReferenceClick($event)">
+                <chat-message-reference-content [message]="reply"></chat-message-reference-content>
+                <span class="k-spacer"></span>
                 <button
-                    kendoButton
-                    *ngIf="enableFileSelect"
-                    [attr.title]="textFor('fileSelectButtonTitle')"
-                    [svgIcon]="attachmentIcon"
-                    icon="attachment"
-                    fillMode="clear"
-                    (click)="selectFiles()"
+                  kendoButton
+                  [attr.title]="textFor('removeReplyTitle')"
+                  [svgIcon]="deleteIcon"
+                  (click)="removeReply()"
+                  fillMode="flat"
                 ></button>
-                <kendo-input-spacer></kendo-input-spacer>
-                <button
-                    kendoButton
-                    [fillMode]="sendButtonSettings?.fillMode"
-                    [themeColor]="sendButtonSettings?.themeColor"
-                    [rounded]="sendButtonSettings?.rounded"
-                    [class]="sendButtonSettings?.buttonClass || 'k-chat-send'"
-                    [icon]="sendButtonSettings?.icon"
-                    [svgIcon]="sendButtonSettings?.svgIcon"
-                    [tabindex]="0"
-                    [attr.title]="textFor('send')"
-                    [class.k-disabled]="isDisabledSendButton"
-                    [attr.aria-disabled]="isDisabledSendButton"
-                    (click)="sendClick()"
-                >
-                </button>
-            </kendo-textarea-suffix>
-        </kendo-textarea>
-    </ng-container>
-
-    <ng-template *ngIf="messageBoxTemplate?.templateRef" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
-
+              </div>
+            }
+            <ul class="k-chat-file-wrapper">
+              @for (file of files; track file; let i = $index) {
+                <li class="k-chat-file"
+                  [chatFile]="file"
+                  [removable]="true"
+                  (remove)="removeFile(i)"
+                ></li>
+              }
+            </ul>
+          </kendo-textarea-prefix>
+        }
+        <kendo-textarea-suffix>
+          @if (speechToTextButtonSettings) {
+            <button
+              kendoSpeechToTextButton
+              [attr.title]="textFor('speechToTextButtonTitle')"
+              [continuous]="speechToTextButtonSettings?.continuous"
+              [disabled]="speechToTextButtonSettings?.disabled"
+              [fillMode]="speechToTextButtonSettings?.fillMode ?? 'clear'"
+              [integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
+              [interimResults]="speechToTextButtonSettings?.interimResults"
+              [lang]="speechToTextButtonSettings?.lang"
+              [maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
+              [rounded]="speechToTextButtonSettings?.rounded"
+              [size]="speechToTextButtonSettings?.size"
+              [themeColor]="speechToTextButtonSettings?.themeColor"
+              (result)="handleSpeechResult($event)"
+              (start)="isListening = true"
+              (end)="isListening = false"
+            ></button>
+          }
+          @if (enableFileSelect) {
+            <button
+              kendoButton
+              [attr.title]="textFor('fileSelectButtonTitle')"
+              [svgIcon]="attachmentIcon"
+              icon="attachment"
+              fillMode="clear"
+              (click)="selectFiles()"
+            ></button>
+          }
+          <kendo-input-spacer></kendo-input-spacer>
+          <button
+            kendoButton
+            [fillMode]="sendButtonSettings?.fillMode"
+            [themeColor]="sendButtonSettings?.themeColor"
+            [rounded]="sendButtonSettings?.rounded"
+            [class]="sendButtonSettings?.buttonClass || 'k-chat-send'"
+            [icon]="sendButtonSettings?.icon"
+            [svgIcon]="sendButtonSettings?.svgIcon"
+            [tabindex]="0"
+            [attr.title]="textFor('send')"
+            [class.k-disabled]="isDisabledSendButton"
+            [attr.aria-disabled]="isDisabledSendButton"
+            (click)="sendClick()"
+            >
+          </button>
+        </kendo-textarea-suffix>
+      </kendo-textarea>
+    }
+    
+    @if (messageBoxTemplate?.templateRef) {
+      <ng-template [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
+    }
+    
     <kendo-fileselect
-        #fileSelect
-        class="k-hidden"
-        [multiple]="true"
-        [showFileList]="false"
-        (select)="handleFileSelect($event)"
+      #fileSelect
+      class="k-hidden"
+      [multiple]="true"
+      [showFileList]="false"
+      (select)="handleFileSelect($event)"
     ></kendo-fileselect>
-`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: TextAreaPrefixComponent, selector: "kendo-textarea-prefix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaPrefix"] }, { kind: "component", type: SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }, { kind: "component", type: InputSpacerComponent, selector: "kendo-input-spacer, kendo-textbox-spacer", inputs: ["width"] }, { kind: "component", type: FileSelectComponent, selector: "kendo-fileselect", inputs: ["name"], outputs: ["valueChange"], exportAs: ["kendoFileSelect"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "suggestions", "tabbable", "type", "suggestionTemplate"], outputs: ["dispatchAction", "dispatchSuggestion"] }, { kind: "component", type: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: TextAreaPrefixComponent, selector: "kendo-textarea-prefix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaPrefix"] }, { kind: "component", type: SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }, { kind: "component", type: InputSpacerComponent, selector: "kendo-input-spacer, kendo-textbox-spacer", inputs: ["width"] }, { kind: "component", type: FileSelectComponent, selector: "kendo-fileselect", inputs: ["name"], outputs: ["valueChange"], exportAs: ["kendoFileSelect"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "suggestions", "tabbable", "type", "suggestionTemplate"], outputs: ["dispatchAction", "dispatchSuggestion"] }, { 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: MessageBoxComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-message-box',
                     template: `
-    <kendo-chat-suggested-actions
-        *ngIf="suggestions?.length > 0"
+    @if (suggestions?.length > 0) {
+      <kendo-chat-suggested-actions
         #suggestedActions
         [suggestions]="suggestions"
         type="suggestion"
@@ -3494,104 +3556,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         (dispatchSuggestion)="dispatchSuggestion($event)"
         (click)="select(suggestedActions, $event)"
         (focus)="select(suggestedActions, $event)"
-    ></kendo-chat-suggested-actions>
-
-    <ng-container *ngIf="!messageBoxTemplate?.templateRef">
-        <kendo-textarea
-            #messageBoxInput
-            class="k-message-box"
-            resizable="none"
-            [rows]="3"
+      ></kendo-chat-suggested-actions>
+    }
+    
+    @if (!messageBoxTemplate?.templateRef) {
+      <kendo-textarea
+        #messageBoxInput
+        class="k-message-box"
+        resizable="none"
+        [rows]="3"
             [inputAttributes]="{
                 'aria-label': textFor('messageBoxInputLabel')
             }"
-            [placeholder]="placeholder || textFor('messagePlaceholder')"
-            [showSuffixSeparator]="false"
-            (keydown)="textAreaKeydown($event)"
-            [value]="inputValue"
-            (valueChange)="onInputValueChange($event)"
+        [placeholder]="placeholder || textFor('messagePlaceholder')"
+        [showSuffixSeparator]="false"
+        (keydown)="textAreaKeydown($event)"
+        [value]="inputValue"
+        (valueChange)="onInputValueChange($event)"
         >
-            <kendo-textarea-prefix *ngIf="reply || (files && files.length > 0)">
-                <div class="k-message-reference k-message-reference-sender" *ngIf="reply" (click)="onReplyReferenceClick($event)">
-                    <chat-message-reference-content [message]="reply"></chat-message-reference-content>
-                    <span class="k-spacer"></span>
-                    <button
-                        kendoButton
-                        [attr.title]="textFor('removeReplyTitle')"
-                        [svgIcon]="deleteIcon"
-                        (click)="removeReply()"
-                        fillMode="flat"
-                    ></button>
-                </div>
-                <ul class="k-chat-file-wrapper">
-                    <li class="k-chat-file"
-                        *ngFor="let file of files; let i = index"
-                        [chatFile]="file"
-                        [removable]="true"
-                        (remove)="removeFile(i)"
-                    ></li>
-                </ul>
-            </kendo-textarea-prefix>
-
-            <kendo-textarea-suffix>
-                <button *ngIf="speechToTextButtonSettings"
-                    kendoSpeechToTextButton
-                    [attr.title]="textFor('speechToTextButtonTitle')"
-                    [continuous]="speechToTextButtonSettings?.continuous"
-                    [disabled]="speechToTextButtonSettings?.disabled"
-                    [fillMode]="speechToTextButtonSettings?.fillMode ?? 'clear'"
-                    [integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
-                    [interimResults]="speechToTextButtonSettings?.interimResults"
-                    [lang]="speechToTextButtonSettings?.lang"
-                    [maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
-                    [rounded]="speechToTextButtonSettings?.rounded"
-                    [size]="speechToTextButtonSettings?.size"
-                    [themeColor]="speechToTextButtonSettings?.themeColor"
-                    (result)="handleSpeechResult($event)"
-                    (start)="isListening = true"
-                    (end)="isListening = false"
-                ></button>
+        @if (reply || (files && files.length > 0)) {
+          <kendo-textarea-prefix>
+            @if (reply) {
+              <div class="k-message-reference k-message-reference-sender" (click)="onReplyReferenceClick($event)">
+                <chat-message-reference-content [message]="reply"></chat-message-reference-content>
+                <span class="k-spacer"></span>
                 <button
-                    kendoButton
-                    *ngIf="enableFileSelect"
-                    [attr.title]="textFor('fileSelectButtonTitle')"
-                    [svgIcon]="attachmentIcon"
-                    icon="attachment"
-                    fillMode="clear"
-                    (click)="selectFiles()"
+                  kendoButton
+                  [attr.title]="textFor('removeReplyTitle')"
+                  [svgIcon]="deleteIcon"
+                  (click)="removeReply()"
+                  fillMode="flat"
                 ></button>
-                <kendo-input-spacer></kendo-input-spacer>
-                <button
-                    kendoButton
-                    [fillMode]="sendButtonSettings?.fillMode"
-                    [themeColor]="sendButtonSettings?.themeColor"
-                    [rounded]="sendButtonSettings?.rounded"
-                    [class]="sendButtonSettings?.buttonClass || 'k-chat-send'"
-                    [icon]="sendButtonSettings?.icon"
-                    [svgIcon]="sendButtonSettings?.svgIcon"
-                    [tabindex]="0"
-                    [attr.title]="textFor('send')"
-                    [class.k-disabled]="isDisabledSendButton"
-                    [attr.aria-disabled]="isDisabledSendButton"
-                    (click)="sendClick()"
-                >
-                </button>
-            </kendo-textarea-suffix>
-        </kendo-textarea>
-    </ng-container>
-
-    <ng-template *ngIf="messageBoxTemplate?.templateRef" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
-
+              </div>
+            }
+            <ul class="k-chat-file-wrapper">
+              @for (file of files; track file; let i = $index) {
+                <li class="k-chat-file"
+                  [chatFile]="file"
+                  [removable]="true"
+                  (remove)="removeFile(i)"
+                ></li>
+              }
+            </ul>
+          </kendo-textarea-prefix>
+        }
+        <kendo-textarea-suffix>
+          @if (speechToTextButtonSettings) {
+            <button
+              kendoSpeechToTextButton
+              [attr.title]="textFor('speechToTextButtonTitle')"
+              [continuous]="speechToTextButtonSettings?.continuous"
+              [disabled]="speechToTextButtonSettings?.disabled"
+              [fillMode]="speechToTextButtonSettings?.fillMode ?? 'clear'"
+              [integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
+              [interimResults]="speechToTextButtonSettings?.interimResults"
+              [lang]="speechToTextButtonSettings?.lang"
+              [maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
+              [rounded]="speechToTextButtonSettings?.rounded"
+              [size]="speechToTextButtonSettings?.size"
+              [themeColor]="speechToTextButtonSettings?.themeColor"
+              (result)="handleSpeechResult($event)"
+              (start)="isListening = true"
+              (end)="isListening = false"
+            ></button>
+          }
+          @if (enableFileSelect) {
+            <button
+              kendoButton
+              [attr.title]="textFor('fileSelectButtonTitle')"
+              [svgIcon]="attachmentIcon"
+              icon="attachment"
+              fillMode="clear"
+              (click)="selectFiles()"
+            ></button>
+          }
+          <kendo-input-spacer></kendo-input-spacer>
+          <button
+            kendoButton
+            [fillMode]="sendButtonSettings?.fillMode"
+            [themeColor]="sendButtonSettings?.themeColor"
+            [rounded]="sendButtonSettings?.rounded"
+            [class]="sendButtonSettings?.buttonClass || 'k-chat-send'"
+            [icon]="sendButtonSettings?.icon"
+            [svgIcon]="sendButtonSettings?.svgIcon"
+            [tabindex]="0"
+            [attr.title]="textFor('send')"
+            [class.k-disabled]="isDisabledSendButton"
+            [attr.aria-disabled]="isDisabledSendButton"
+            (click)="sendClick()"
+            >
+          </button>
+        </kendo-textarea-suffix>
+      </kendo-textarea>
+    }
+    
+    @if (messageBoxTemplate?.templateRef) {
+      <ng-template [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
+    }
+    
     <kendo-fileselect
-        #fileSelect
-        class="k-hidden"
-        [multiple]="true"
-        [showFileList]="false"
-        (select)="handleFileSelect($event)"
+      #fileSelect
+      class="k-hidden"
+      [multiple]="true"
+      [showFileList]="false"
+      (select)="handleFileSelect($event)"
     ></kendo-fileselect>
-`,
+    `,
                     standalone: true,
-                    imports: [NgIf, NgFor, ButtonComponent, FormsModule, NgTemplateOutlet, TextAreaComponent, MessageReferenceComponent, TextAreaSuffixComponent, TextAreaPrefixComponent, SpeechToTextButtonComponent, InputSpacerComponent, FileSelectComponent, SuggestedActionsComponent, ChatFileComponent]
+                    imports: [ButtonComponent, FormsModule, NgTemplateOutlet, TextAreaComponent, MessageReferenceComponent, TextAreaSuffixComponent, TextAreaPrefixComponent, SpeechToTextButtonComponent, InputSpacerComponent, FileSelectComponent, SuggestedActionsComponent, ChatFileComponent]
                 }]
         }], ctorParameters: () => [{ type: ChatService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { borderColor: [{
                 type: HostBinding,
@@ -4098,7 +4170,7 @@ class MessageComponent extends ChatItem {
         this.chatService.toggleMessageState = false;
     }
     onExpandableKeydown(event) {
-        const key = normalizeNumpadKeys(event);
+        const key = normalizeKeys(event);
         const isFileActionButton = event.target.closest(FILE_ACTION_BTN_SELECTOR) || event.target.closest(DOWNLOAD_ALL_SELECTOR);
         if (!isFileActionButton && (key === Keys.Enter || key === Keys.Space)) {
             event.preventDefault();
@@ -4203,178 +4275,188 @@ class MessageComponent extends ChatItem {
         return transformActions(actions);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.IntlService }, { token: ChatService }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MessageComponent, isStandalone: true, selector: "kendo-chat-message", inputs: { message: "message", tabbable: "tabbable", authorMessageContentTemplate: "authorMessageContentTemplate", receiverMessageContentTemplate: "receiverMessageContentTemplate", messageContentTemplate: "messageContentTemplate", authorMessageTemplate: "authorMessageTemplate", receiverMessageTemplate: "receiverMessageTemplate", messageTemplate: "messageTemplate", statusTemplate: "statusTemplate", showMessageTime: "showMessageTime", authorId: "authorId" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.k-message": "this.cssClass", "class.k-message-removed": "this.removedClass", "attr.tabIndex": "this.tabIndex" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MessageComponent, isStandalone: true, selector: "kendo-chat-message", inputs: { message: "message", tabbable: "tabbable", authorMessageContentTemplate: "authorMessageContentTemplate", receiverMessageContentTemplate: "receiverMessageContentTemplate", messageContentTemplate: "messageContentTemplate", authorMessageTemplate: "authorMessageTemplate", receiverMessageTemplate: "receiverMessageTemplate", messageTemplate: "messageTemplate", statusTemplate: "statusTemplate", showMessageTime: "showMessageTime", authorId: "authorId" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.k-message": "this.cssClass", "class.k-message-removed": "this.removedClass", "attr.tabIndex": "this.tabIndex" } }, providers: [
             {
                 provide: ChatItem,
                 useExisting: forwardRef(() => MessageComponent)
             }
         ], usesInheritance: true, ngImport: i0, template: `
-        <ng-container *ngIf="useCustomBubbleTemplate">
-            <ng-container *ngTemplateOutlet="getActiveBubbleTemplate()?.templateRef; context: { $implicit: message };"></ng-container>
-        </ng-container>
+        @if (useCustomBubbleTemplate) {
+          <ng-container *ngTemplateOutlet="getActiveBubbleTemplate()?.templateRef; context: { $implicit: message };"></ng-container>
+        }
 
-        <ng-container *ngIf="!useCustomBubbleTemplate">
+        @if (!useCustomBubbleTemplate) {
+          @if (chatService.timestampVisibility === 'focus' && message.timestamp) {
             <time
-                [attr.aria-hidden]="!selected"
-                class="k-message-time"
-                *ngIf="chatService.timestampVisibility === 'focus' && message.timestamp"
-            >
-                {{ formatTimeStamp(message.timestamp) }}
+              [attr.aria-hidden]="!selected"
+              class="k-message-time"
+              >
+              {{ formatTimeStamp(message.timestamp) }}
             </time>
-
-            <ng-container *ngIf="message.typing">
-                <div class="k-chat-bubble k-bubble">
-                    <div class="k-typing-indicator" [attr.tabindex]="'-1'">
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                    </div>
-                </div>
-            </ng-container>
-
-            <ng-container *ngIf="!message.typing">
-                <div
-                    class="k-chat-bubble k-bubble"
-                    *ngIf="useCustomContentTemplate"
-                    [attr.tabindex]="0"
+          }
+          @if (message.typing) {
+            <div class="k-chat-bubble k-bubble">
+              <div class="k-typing-indicator" [attr.tabindex]="'-1'">
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+            </div>
+          }
+          @if (!message.typing) {
+            @if (useCustomContentTemplate) {
+              <div
+                class="k-chat-bubble k-bubble"
+                [attr.tabindex]="0"
                     [ngClass]="{
-                        'k-bubble-expandable': isMessageExpandable, 
+                        'k-bubble-expandable': isMessageExpandable,
                         'k-expanded': isMessageExpanded,
-                        'k-selected': selected, 
+                        'k-selected': selected,
                         'k-focus': selected,
                         'k-active': isActiveMessage
                     }"
                 >
-                    <div class="k-bubble-content">
-                        <ng-container *ngTemplateOutlet="getActiveContentTemplate()?.templateRef; context: { $implicit: message };"></ng-container>
-                    </div>
-                    <span
-                        class="k-bubble-expandable-indicator"
-                        *ngIf="isMessageExpandable && showExpandCollapseIcon"
-                        [attr.tabindex]="'0'"
-                        [attr.role]="'button'"
-                        [attr.title]="isMessageExpanded ? textFor('collapseTitle') : textFor('expandTitle')"
-                        (mousedown)="chatService.toggleMessageState = true"
-                        (click)="toggleMessageState($event)"
-                    >
-                        <kendo-icon-wrapper
-                            [name]="isMessageExpanded ? 'chevron-up' : 'chevron-down'"
-                            [svgIcon]="isMessageExpanded ? collapseIcon : expandIcon"
-                        >
-                        </kendo-icon-wrapper>
-                    </span>
+                <div class="k-bubble-content">
+                  <ng-container *ngTemplateOutlet="getActiveContentTemplate()?.templateRef; context: { $implicit: message };"></ng-container>
                 </div>
-
-                <div
-                    class="k-chat-bubble k-bubble"
-                    *ngIf="!useCustomContentTemplate && hasMessageContent"
-                    [attr.tabindex]="0"
+                @if (isMessageExpandable && showExpandCollapseIcon) {
+                  <span
+                    class="k-bubble-expandable-indicator"
+                    [attr.tabindex]="'0'"
+                    [attr.role]="'button'"
+                    [attr.title]="isMessageExpanded ? textFor('collapseTitle') : textFor('expandTitle')"
+                    (mousedown)="chatService.toggleMessageState = true"
+                    (click)="toggleMessageState($event)"
+                    >
+                    <kendo-icon-wrapper
+                      [name]="isMessageExpanded ? 'chevron-up' : 'chevron-down'"
+                      [svgIcon]="isMessageExpanded ? collapseIcon : expandIcon"
+                      >
+                    </kendo-icon-wrapper>
+                  </span>
+                }
+              </div>
+            }
+            @if (!useCustomContentTemplate && hasMessageContent) {
+              <div
+                class="k-chat-bubble k-bubble"
+                [attr.tabindex]="0"
                     [ngClass]="{
-                        'k-bubble-expandable': isMessageExpandable, 
-                        'k-expanded': isMessageExpanded, 
-                        'k-selected': selected, 
+                        'k-bubble-expandable': isMessageExpandable,
+                        'k-expanded': isMessageExpanded,
+                        'k-selected': selected,
                         'k-focus': selected,
                         'k-active': isActiveMessage
                     }"
                 >
-                    <div class="k-bubble-content">
-                        <ng-container *ngIf="message.text || message.isDeleted">
-                            <div 
-                                class="k-message-reference k-message-reference-receiver" 
-                                *ngIf="message.replyToId && !message.isDeleted" 
-                                (click)="onReplyReferenceClick($event, message.replyToId)"
-                            >
-                                <chat-message-reference-content [message]="getMessageById(message.replyToId)"></chat-message-reference-content>
-                            </div>
-
-                            <span class="k-chat-bubble-text" *ngIf="message.isDeleted">
-                                {{ getDeletedMessageText() }}
-                            </span>
-
-                            <span class="k-chat-bubble-text" *ngIf="!message.isDeleted && parts.length > 0">
-                                <ng-container *ngFor="let part of parts">
-                                    <ng-container *ngIf="part.type === 'text'">{{part.content}}</ng-container>
-                                    <a *ngIf="part.type === 'link'" [href]="part.href" target="_blank">{{part.content}}</a>
-                                </ng-container>
-                            </span>
-                        </ng-container>
-
-                        <ul 
-                            class="k-chat-file-wrapper" 
-                            *ngIf="hasFiles && !message.isDeleted" 
+                <div class="k-bubble-content">
+                  @if (message.text || message.isDeleted) {
+                    @if (message.replyToId && !message.isDeleted) {
+                      <div
+                        class="k-message-reference k-message-reference-receiver"
+                        (click)="onReplyReferenceClick($event, message.replyToId)"
+                        >
+                        <chat-message-reference-content [message]="getMessageById(message.replyToId)"></chat-message-reference-content>
+                      </div>
+                    }
+                    @if (message.isDeleted) {
+                      <span class="k-chat-bubble-text">
+                        {{ getDeletedMessageText() }}
+                      </span>
+                    }
+                    @if (!message.isDeleted && parts.length > 0) {
+                      <span class="k-chat-bubble-text">
+                        @for (part of parts; track part) {
+                          @if (part.type === 'text') {{{part.content}}}
+                          @if (part.type === 'link') {<a [href]="part.href" target="_blank">{{part.content}}</a>}
+                        }
+                      </span>
+                    }
+                  }
+                  @if (hasFiles && !message.isDeleted) {
+                    <ul
+                      class="k-chat-file-wrapper"
                             [ngClass]="{
-                                'k-chat-files-wrap': chatService.messageFilesLayout === 'wrap', 
+                                'k-chat-files-wrap': chatService.messageFilesLayout === 'wrap',
                                 'k-chat-files-horizontal': chatService.messageFilesLayout === 'horizontal'
                             }"
-                        >
-                            <li
-                                *ngFor="let file of message.files"
-                                class="k-chat-file"
-                                [chatFile]="file"
-                                [fileActions]="fileActions"
-                                (actionClick)="onFileAction($event, file)"
-                                (actionsToggle)="onActionPopupChange($event)"
-                                (actionButtonClick)="onActionButtonClick($event)"
-                            ></li>
-                        </ul>
-
-                        <div class="k-chat-download-button-wrapper" *ngIf="hasMultipleFiles && !message.isDeleted">
-                            <button
-                                kendoButton
-                                class="k-chat-download-button"
-                                fillMode="flat"
-                                icon="download"
-                                [svgIcon]="downloadIcon"
-                                [attr.title]="textFor('downloadAllFilesText')"
-                                (click)="onDownloadAll()"
-                            >{{ textFor('downloadAllFilesText') }}</button>
-                        </div>
+                      >
+                      @for (file of message.files; track file) {
+                        <li
+                          class="k-chat-file"
+                          [chatFile]="file"
+                          [fileActions]="fileActions"
+                          (actionClick)="onFileAction($event, file)"
+                          (actionsToggle)="onActionPopupChange($event)"
+                          (actionButtonClick)="onActionButtonClick($event)"
+                        ></li>
+                      }
+                    </ul>
+                  }
+                  @if (hasMultipleFiles && !message.isDeleted) {
+                    <div class="k-chat-download-button-wrapper">
+                      <button
+                        kendoButton
+                        class="k-chat-download-button"
+                        fillMode="flat"
+                        icon="download"
+                        [svgIcon]="downloadIcon"
+                        [attr.title]="textFor('downloadAllFilesText')"
+                        (click)="onDownloadAll()"
+                      >{{ textFor('downloadAllFilesText') }}</button>
                     </div>
-
-                    <span
-                        class="k-bubble-expandable-indicator"
-                        *ngIf="isMessageExpandable && showExpandCollapseIcon"
-                        [attr.tabindex]="'0'"
-                        [attr.role]="'button'"
-                        [attr.title]="isMessageExpanded ? textFor('collapseTitle') : textFor('expandTitle')"
-                        (mousedown)="chatService.toggleMessageState = true"
-                        (click)="toggleMessageState($event)"
-                    >
-                        <kendo-icon-wrapper
-                            [name]="isMessageExpanded ? 'chevron-up' : 'chevron-down'"
-                            [svgIcon]="isMessageExpanded ? collapseIcon : expandIcon"
-                        >
-                        </kendo-icon-wrapper>
-                    </span>
+                  }
                 </div>
-            </ng-container>
-
-            <span class="k-message-status" *ngIf="message.status">
-                <ng-container *ngIf="statusTemplate?.templateRef">
-                    <ng-template
-                        [ngTemplateOutlet]="statusTemplate.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: message.status, message }"
+                @if (isMessageExpandable && showExpandCollapseIcon) {
+                  <span
+                    class="k-bubble-expandable-indicator"
+                    [attr.tabindex]="'0'"
+                    [attr.role]="'button'"
+                    [attr.title]="isMessageExpanded ? textFor('collapseTitle') : textFor('expandTitle')"
+                    (mousedown)="chatService.toggleMessageState = true"
+                    (click)="toggleMessageState($event)"
                     >
-                    </ng-template>
-                </ng-container>
-                <ng-container *ngIf="!statusTemplate?.templateRef">
-                    {{ message.status }}
-                </ng-container>
+                    <kendo-icon-wrapper
+                      [name]="isMessageExpanded ? 'chevron-up' : 'chevron-down'"
+                      [svgIcon]="isMessageExpanded ? collapseIcon : expandIcon"
+                      >
+                    </kendo-icon-wrapper>
+                  </span>
+                }
+              </div>
+            }
+          }
+          @if (message.status) {
+            <span class="k-message-status">
+              @if (statusTemplate?.templateRef) {
+                <ng-template
+                  [ngTemplateOutlet]="statusTemplate.templateRef"
+                  [ngTemplateOutletContext]="{ $implicit: message.status, message }"
+                  >
+                </ng-template>
+              }
+              @if (!statusTemplate?.templateRef) {
+                {{ message.status }}
+              }
             </span>
-        </ng-container>
-        <kendo-toolbar *ngIf="showToolbar" class="k-chat-message-toolbar" fillMode="flat">
-            <kendo-toolbar-button
-                *ngFor="let action of toolbarActions"
+          }
+        }
+        @if (showToolbar) {
+          <kendo-toolbar class="k-chat-message-toolbar" fillMode="flat">
+            @for (action of toolbarActions; track action) {
+              <kendo-toolbar-button
                 fillMode="flat"
                 [icon]="action.icon"
                 [svgIcon]="action.svgIcon"
                 [disabled]="action.disabled"
                 [title]="action.label"
                 (click)="onToolbarAction($event, action, message)"
-            >
-            </kendo-toolbar-button>
-        </kendo-toolbar>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "rounded", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }] });
+                >
+              </kendo-toolbar-button>
+            }
+          </kendo-toolbar>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }, { kind: "component", type: ToolBarComponent, selector: "kendo-toolbar", inputs: ["overflow", "resizable", "popupSettings", "fillMode", "tabindex", "size", "tabIndex", "showIcon", "showText"], outputs: ["open", "close"], exportAs: ["kendoToolBar"] }, { kind: "component", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: ["showText", "showIcon", "text", "style", "className", "title", "disabled", "toggleable", "look", "togglable", "selected", "fillMode", "rounded", "themeColor", "icon", "iconClass", "svgIcon", "imageUrl"], outputs: ["click", "pointerdown", "selectedChange"], exportAs: ["kendoToolBarButton"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
@@ -4387,174 +4469,184 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         }
                     ],
                     template: `
-        <ng-container *ngIf="useCustomBubbleTemplate">
-            <ng-container *ngTemplateOutlet="getActiveBubbleTemplate()?.templateRef; context: { $implicit: message };"></ng-container>
-        </ng-container>
+        @if (useCustomBubbleTemplate) {
+          <ng-container *ngTemplateOutlet="getActiveBubbleTemplate()?.templateRef; context: { $implicit: message };"></ng-container>
+        }
 
-        <ng-container *ngIf="!useCustomBubbleTemplate">
+        @if (!useCustomBubbleTemplate) {
+          @if (chatService.timestampVisibility === 'focus' && message.timestamp) {
             <time
-                [attr.aria-hidden]="!selected"
-                class="k-message-time"
-                *ngIf="chatService.timestampVisibility === 'focus' && message.timestamp"
-            >
-                {{ formatTimeStamp(message.timestamp) }}
+              [attr.aria-hidden]="!selected"
+              class="k-message-time"
+              >
+              {{ formatTimeStamp(message.timestamp) }}
             </time>
-
-            <ng-container *ngIf="message.typing">
-                <div class="k-chat-bubble k-bubble">
-                    <div class="k-typing-indicator" [attr.tabindex]="'-1'">
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                    </div>
-                </div>
-            </ng-container>
-
-            <ng-container *ngIf="!message.typing">
-                <div
-                    class="k-chat-bubble k-bubble"
-                    *ngIf="useCustomContentTemplate"
-                    [attr.tabindex]="0"
+          }
+          @if (message.typing) {
+            <div class="k-chat-bubble k-bubble">
+              <div class="k-typing-indicator" [attr.tabindex]="'-1'">
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+            </div>
+          }
+          @if (!message.typing) {
+            @if (useCustomContentTemplate) {
+              <div
+                class="k-chat-bubble k-bubble"
+                [attr.tabindex]="0"
                     [ngClass]="{
-                        'k-bubble-expandable': isMessageExpandable, 
+                        'k-bubble-expandable': isMessageExpandable,
                         'k-expanded': isMessageExpanded,
-                        'k-selected': selected, 
+                        'k-selected': selected,
                         'k-focus': selected,
                         'k-active': isActiveMessage
                     }"
                 >
-                    <div class="k-bubble-content">
-                        <ng-container *ngTemplateOutlet="getActiveContentTemplate()?.templateRef; context: { $implicit: message };"></ng-container>
-                    </div>
-                    <span
-                        class="k-bubble-expandable-indicator"
-                        *ngIf="isMessageExpandable && showExpandCollapseIcon"
-                        [attr.tabindex]="'0'"
-                        [attr.role]="'button'"
-                        [attr.title]="isMessageExpanded ? textFor('collapseTitle') : textFor('expandTitle')"
-                        (mousedown)="chatService.toggleMessageState = true"
-                        (click)="toggleMessageState($event)"
-                    >
-                        <kendo-icon-wrapper
-                            [name]="isMessageExpanded ? 'chevron-up' : 'chevron-down'"
-                            [svgIcon]="isMessageExpanded ? collapseIcon : expandIcon"
-                        >
-                        </kendo-icon-wrapper>
-                    </span>
+                <div class="k-bubble-content">
+                  <ng-container *ngTemplateOutlet="getActiveContentTemplate()?.templateRef; context: { $implicit: message };"></ng-container>
                 </div>
-
-                <div
-                    class="k-chat-bubble k-bubble"
-                    *ngIf="!useCustomContentTemplate && hasMessageContent"
-                    [attr.tabindex]="0"
+                @if (isMessageExpandable && showExpandCollapseIcon) {
+                  <span
+                    class="k-bubble-expandable-indicator"
+                    [attr.tabindex]="'0'"
+                    [attr.role]="'button'"
+                    [attr.title]="isMessageExpanded ? textFor('collapseTitle') : textFor('expandTitle')"
+                    (mousedown)="chatService.toggleMessageState = true"
+                    (click)="toggleMessageState($event)"
+                    >
+                    <kendo-icon-wrapper
+                      [name]="isMessageExpanded ? 'chevron-up' : 'chevron-down'"
+                      [svgIcon]="isMessageExpanded ? collapseIcon : expandIcon"
+                      >
+                    </kendo-icon-wrapper>
+                  </span>
+                }
+              </div>
+            }
+            @if (!useCustomContentTemplate && hasMessageContent) {
+              <div
+                class="k-chat-bubble k-bubble"
+                [attr.tabindex]="0"
                     [ngClass]="{
-                        'k-bubble-expandable': isMessageExpandable, 
-                        'k-expanded': isMessageExpanded, 
-                        'k-selected': selected, 
+                        'k-bubble-expandable': isMessageExpandable,
+                        'k-expanded': isMessageExpanded,
+                        'k-selected': selected,
                         'k-focus': selected,
                         'k-active': isActiveMessage
                     }"
                 >
-                    <div class="k-bubble-content">
-                        <ng-container *ngIf="message.text || message.isDeleted">
-                            <div 
-                                class="k-message-reference k-message-reference-receiver" 
-                                *ngIf="message.replyToId && !message.isDeleted" 
-                                (click)="onReplyReferenceClick($event, message.replyToId)"
-                            >
-                                <chat-message-reference-content [message]="getMessageById(message.replyToId)"></chat-message-reference-content>
-                            </div>
-
-                            <span class="k-chat-bubble-text" *ngIf="message.isDeleted">
-                                {{ getDeletedMessageText() }}
-                            </span>
-
-                            <span class="k-chat-bubble-text" *ngIf="!message.isDeleted && parts.length > 0">
-                                <ng-container *ngFor="let part of parts">
-                                    <ng-container *ngIf="part.type === 'text'">{{part.content}}</ng-container>
-                                    <a *ngIf="part.type === 'link'" [href]="part.href" target="_blank">{{part.content}}</a>
-                                </ng-container>
-                            </span>
-                        </ng-container>
-
-                        <ul 
-                            class="k-chat-file-wrapper" 
-                            *ngIf="hasFiles && !message.isDeleted" 
+                <div class="k-bubble-content">
+                  @if (message.text || message.isDeleted) {
+                    @if (message.replyToId && !message.isDeleted) {
+                      <div
+                        class="k-message-reference k-message-reference-receiver"
+                        (click)="onReplyReferenceClick($event, message.replyToId)"
+                        >
+                        <chat-message-reference-content [message]="getMessageById(message.replyToId)"></chat-message-reference-content>
+                      </div>
+                    }
+                    @if (message.isDeleted) {
+                      <span class="k-chat-bubble-text">
+                        {{ getDeletedMessageText() }}
+                      </span>
+                    }
+                    @if (!message.isDeleted && parts.length > 0) {
+                      <span class="k-chat-bubble-text">
+                        @for (part of parts; track part) {
+                          @if (part.type === 'text') {{{part.content}}}
+                          @if (part.type === 'link') {<a [href]="part.href" target="_blank">{{part.content}}</a>}
+                        }
+                      </span>
+                    }
+                  }
+                  @if (hasFiles && !message.isDeleted) {
+                    <ul
+                      class="k-chat-file-wrapper"
                             [ngClass]="{
-                                'k-chat-files-wrap': chatService.messageFilesLayout === 'wrap', 
+                                'k-chat-files-wrap': chatService.messageFilesLayout === 'wrap',
                                 'k-chat-files-horizontal': chatService.messageFilesLayout === 'horizontal'
                             }"
-                        >
-                            <li
-                                *ngFor="let file of message.files"
-                                class="k-chat-file"
-                                [chatFile]="file"
-                                [fileActions]="fileActions"
-                                (actionClick)="onFileAction($event, file)"
-                                (actionsToggle)="onActionPopupChange($event)"
-                                (actionButtonClick)="onActionButtonClick($event)"
-                            ></li>
-                        </ul>
-
-                        <div class="k-chat-download-button-wrapper" *ngIf="hasMultipleFiles && !message.isDeleted">
-                            <button
-                                kendoButton
-                                class="k-chat-download-button"
-                                fillMode="flat"
-                                icon="download"
-                                [svgIcon]="downloadIcon"
-                                [attr.title]="textFor('downloadAllFilesText')"
-                                (click)="onDownloadAll()"
-                            >{{ textFor('downloadAllFilesText') }}</button>
-                        </div>
+                      >
+                      @for (file of message.files; track file) {
+                        <li
+                          class="k-chat-file"
+                          [chatFile]="file"
+                          [fileActions]="fileActions"
+                          (actionClick)="onFileAction($event, file)"
+                          (actionsToggle)="onActionPopupChange($event)"
+                          (actionButtonClick)="onActionButtonClick($event)"
+                        ></li>
+                      }
+                    </ul>
+                  }
+                  @if (hasMultipleFiles && !message.isDeleted) {
+                    <div class="k-chat-download-button-wrapper">
+                      <button
+                        kendoButton
+                        class="k-chat-download-button"
+                        fillMode="flat"
+                        icon="download"
+                        [svgIcon]="downloadIcon"
+                        [attr.title]="textFor('downloadAllFilesText')"
+                        (click)="onDownloadAll()"
+                      >{{ textFor('downloadAllFilesText') }}</button>
                     </div>
-
-                    <span
-                        class="k-bubble-expandable-indicator"
-                        *ngIf="isMessageExpandable && showExpandCollapseIcon"
-                        [attr.tabindex]="'0'"
-                        [attr.role]="'button'"
-                        [attr.title]="isMessageExpanded ? textFor('collapseTitle') : textFor('expandTitle')"
-                        (mousedown)="chatService.toggleMessageState = true"
-                        (click)="toggleMessageState($event)"
-                    >
-                        <kendo-icon-wrapper
-                            [name]="isMessageExpanded ? 'chevron-up' : 'chevron-down'"
-                            [svgIcon]="isMessageExpanded ? collapseIcon : expandIcon"
-                        >
-                        </kendo-icon-wrapper>
-                    </span>
+                  }
                 </div>
-            </ng-container>
-
-            <span class="k-message-status" *ngIf="message.status">
-                <ng-container *ngIf="statusTemplate?.templateRef">
-                    <ng-template
-                        [ngTemplateOutlet]="statusTemplate.templateRef"
-                        [ngTemplateOutletContext]="{ $implicit: message.status, message }"
+                @if (isMessageExpandable && showExpandCollapseIcon) {
+                  <span
+                    class="k-bubble-expandable-indicator"
+                    [attr.tabindex]="'0'"
+                    [attr.role]="'button'"
+                    [attr.title]="isMessageExpanded ? textFor('collapseTitle') : textFor('expandTitle')"
+                    (mousedown)="chatService.toggleMessageState = true"
+                    (click)="toggleMessageState($event)"
                     >
-                    </ng-template>
-                </ng-container>
-                <ng-container *ngIf="!statusTemplate?.templateRef">
-                    {{ message.status }}
-                </ng-container>
+                    <kendo-icon-wrapper
+                      [name]="isMessageExpanded ? 'chevron-up' : 'chevron-down'"
+                      [svgIcon]="isMessageExpanded ? collapseIcon : expandIcon"
+                      >
+                    </kendo-icon-wrapper>
+                  </span>
+                }
+              </div>
+            }
+          }
+          @if (message.status) {
+            <span class="k-message-status">
+              @if (statusTemplate?.templateRef) {
+                <ng-template
+                  [ngTemplateOutlet]="statusTemplate.templateRef"
+                  [ngTemplateOutletContext]="{ $implicit: message.status, message }"
+                  >
+                </ng-template>
+              }
+              @if (!statusTemplate?.templateRef) {
+                {{ message.status }}
+              }
             </span>
-        </ng-container>
-        <kendo-toolbar *ngIf="showToolbar" class="k-chat-message-toolbar" fillMode="flat">
-            <kendo-toolbar-button
-                *ngFor="let action of toolbarActions"
+          }
+        }
+        @if (showToolbar) {
+          <kendo-toolbar class="k-chat-message-toolbar" fillMode="flat">
+            @for (action of toolbarActions; track action) {
+              <kendo-toolbar-button
                 fillMode="flat"
                 [icon]="action.icon"
                 [svgIcon]="action.svgIcon"
                 [disabled]="action.disabled"
                 [title]="action.label"
                 (click)="onToolbarAction($event, action, message)"
-            >
-            </kendo-toolbar-button>
-        </kendo-toolbar>
-    `,
+                >
+              </kendo-toolbar-button>
+            }
+          </kendo-toolbar>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, NgClass, NgFor, NgTemplateOutlet, IconWrapperComponent, KENDO_BUTTONS, ChatFileComponent, ToolBarComponent, ToolBarButtonComponent, MessageReferenceComponent],
+                    imports: [NgClass, NgTemplateOutlet, IconWrapperComponent, KENDO_BUTTONS, ChatFileComponent, ToolBarComponent, ToolBarButtonComponent, MessageReferenceComponent],
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$1.IntlService }, { type: ChatService }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }], propDecorators: { message: [{
                 type: Input
@@ -4618,55 +4710,71 @@ class AttachmentComponent {
     }
     _attachment;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AttachmentComponent, isStandalone: true, selector: "kendo-chat-attachment", inputs: { attachment: "attachment", template: "template" }, ngImport: i0, template: `
-        <ng-container *ngIf="template">
-            <ng-container *ngTemplateOutlet="template.templateRef; context: context;">
-            </ng-container>
-        </ng-container>
-
-        <div *ngIf="!template" class="k-card">
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AttachmentComponent, isStandalone: true, selector: "kendo-chat-attachment", inputs: { attachment: "attachment", template: "template" }, ngImport: i0, template: `
+        @if (template) {
+          <ng-container *ngTemplateOutlet="template.templateRef; context: context;">
+          </ng-container>
+        }
+        
+        @if (!template) {
+          <div class="k-card">
             <div class="k-card-body">
-            <h5 class="k-card-title" *ngIf="attachment.title">
-                {{ attachment.title }}
-            </h5>
-            <h6 class="k-card-subtitle" *ngIf="attachment.subtitle">
-                {{ attachment.subtitle }}
-            </h6>
-            <img *ngIf="image" [attr.src]="attachment.content" />
-            <ng-container *ngIf="unknown">
+              @if (attachment.title) {
+                <h5 class="k-card-title">
+                  {{ attachment.title }}
+                </h5>
+              }
+              @if (attachment.subtitle) {
+                <h6 class="k-card-subtitle">
+                  {{ attachment.subtitle }}
+                </h6>
+              }
+              @if (image) {
+                <img [attr.src]="attachment.content" />
+              }
+              @if (unknown) {
                 {{ attachment.content }}
-            </ng-container>
+              }
             </div>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+          </div>
+        }
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AttachmentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chat-attachment',
                     template: `
-        <ng-container *ngIf="template">
-            <ng-container *ngTemplateOutlet="template.templateRef; context: context;">
-            </ng-container>
-        </ng-container>
-
-        <div *ngIf="!template" class="k-card">
+        @if (template) {
+          <ng-container *ngTemplateOutlet="template.templateRef; context: context;">
+          </ng-container>
+        }
+        
+        @if (!template) {
+          <div class="k-card">
             <div class="k-card-body">
-            <h5 class="k-card-title" *ngIf="attachment.title">
-                {{ attachment.title }}
-            </h5>
-            <h6 class="k-card-subtitle" *ngIf="attachment.subtitle">
-                {{ attachment.subtitle }}
-            </h6>
-            <img *ngIf="image" [attr.src]="attachment.content" />
-            <ng-container *ngIf="unknown">
+              @if (attachment.title) {
+                <h5 class="k-card-title">
+                  {{ attachment.title }}
+                </h5>
+              }
+              @if (attachment.subtitle) {
+                <h6 class="k-card-subtitle">
+                  {{ attachment.subtitle }}
+                </h6>
+              }
+              @if (image) {
+                <img [attr.src]="attachment.content" />
+              }
+              @if (unknown) {
                 {{ attachment.content }}
-            </ng-container>
+              }
             </div>
-        </div>
-    `,
+          </div>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, NgTemplateOutlet]
+                    imports: [NgTemplateOutlet]
                 }]
         }], propDecorators: { attachment: [{
                 type: Input
@@ -4741,7 +4849,7 @@ class MessageAttachmentsComponent extends ChatItem {
     itemKeydown(e, attachment) {
         const keyHandlers = this.layout === 'list' ?
             this.listKeyHandlers : this.carouselKeyHandlers;
-        const code = normalizeNumpadKeys(e);
+        const code = normalizeKeys(e);
         const handler = keyHandlers[code];
         if (handler) {
             handler(e, attachment);
@@ -4791,51 +4899,54 @@ class MessageAttachmentsComponent extends ChatItem {
         return this.localization.get(key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageAttachmentsComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MessageAttachmentsComponent, isStandalone: true, selector: "kendo-chat-message-attachments", inputs: { attachments: "attachments", layout: "layout", tabbable: "tabbable", template: "template", localization: "localization" }, host: { properties: { "class.k-card-deck-scrollwrap": "this.carousel" } }, providers: [{
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MessageAttachmentsComponent, isStandalone: true, selector: "kendo-chat-message-attachments", inputs: { attachments: "attachments", layout: "layout", tabbable: "tabbable", template: "template", localization: "localization" }, host: { properties: { "class.k-card-deck-scrollwrap": "this.carousel" } }, providers: [{
                 provide: ChatItem,
                 useExisting: forwardRef(() => MessageAttachmentsComponent)
             }], viewQueries: [{ propertyName: "deck", first: true, predicate: ["deck"], descendants: true, read: ElementRef, static: true }, { propertyName: "items", predicate: ["item"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
-        <button
-            *ngIf="showLeftArrow"
+        @if (showLeftArrow) {
+          <button
             (click)="scrollTo(-1)"
             kendoButton
             tabindex="-1"
             [attr.title]="textFor('messageAttachmentLeftArrow')"
             [svgIcon]="chevronLeftIcon"
             icon="chevron-left"
-        >
-        </button>
+            >
+          </button>
+        }
         <div
-            #deck
-            [class.k-card-deck]="carousel"
-            [class.k-card-list]="!carousel"
-        >
+          #deck
+          [class.k-card-deck]="carousel"
+          [class.k-card-list]="!carousel"
+          >
+          @for (att of attachments; track att; let index = $index; let first = $first; let last = $last) {
             <kendo-chat-attachment #item
-                *ngFor="let att of attachments; index as index; first as first; last as last"
-                [attachment]="att"
-                [template]="template"
-                [class.k-selected]="isSelected(index)"
-                [class.k-focus]="isSelected(index)"
-                [class.k-card-wrap]="true"
-                [class.k-first]="first"
-                [class.k-last]="last"
-                [attr.tabindex]="tabbable && isSelected(index) ? '0' : '-1'"
-                (click)="itemClick(index)"
-                (keydown)="itemKeydown($event, att)"
-            >
+              [attachment]="att"
+              [template]="template"
+              [class.k-selected]="isSelected(index)"
+              [class.k-focus]="isSelected(index)"
+              [class.k-card-wrap]="true"
+              [class.k-first]="first"
+              [class.k-last]="last"
+              [attr.tabindex]="tabbable && isSelected(index) ? '0' : '-1'"
+              (click)="itemClick(index)"
+              (keydown)="itemKeydown($event, att)"
+              >
             </kendo-chat-attachment>
+          }
         </div>
-        <button
-            *ngIf="showRightArrow"
+        @if (showRightArrow) {
+          <button
             (click)="scrollTo(1)"
             kendoButton
             tabindex="-1"
             [attr.title]="textFor('messageAttachmentRightArrow')"
             [svgIcon]="chevronRightIcon"
             icon="chevron-right"
-        >
-        </button>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }] });
+            >
+          </button>
+        }
+        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageAttachmentsComponent, decorators: [{
             type: Component,
@@ -4846,49 +4957,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         }],
                     selector: 'kendo-chat-message-attachments',
                     template: `
-        <button
-            *ngIf="showLeftArrow"
+        @if (showLeftArrow) {
+          <button
             (click)="scrollTo(-1)"
             kendoButton
             tabindex="-1"
             [attr.title]="textFor('messageAttachmentLeftArrow')"
             [svgIcon]="chevronLeftIcon"
             icon="chevron-left"
-        >
-        </button>
+            >
+          </button>
+        }
         <div
-            #deck
-            [class.k-card-deck]="carousel"
-            [class.k-card-list]="!carousel"
-        >
+          #deck
+          [class.k-card-deck]="carousel"
+          [class.k-card-list]="!carousel"
+          >
+          @for (att of attachments; track att; let index = $index; let first = $first; let last = $last) {
             <kendo-chat-attachment #item
-                *ngFor="let att of attachments; index as index; first as first; last as last"
-                [attachment]="att"
-                [template]="template"
-                [class.k-selected]="isSelected(index)"
-                [class.k-focus]="isSelected(index)"
-                [class.k-card-wrap]="true"
-                [class.k-first]="first"
-                [class.k-last]="last"
-                [attr.tabindex]="tabbable && isSelected(index) ? '0' : '-1'"
-                (click)="itemClick(index)"
-                (keydown)="itemKeydown($event, att)"
-            >
+              [attachment]="att"
+              [template]="template"
+              [class.k-selected]="isSelected(index)"
+              [class.k-focus]="isSelected(index)"
+              [class.k-card-wrap]="true"
+              [class.k-first]="first"
+              [class.k-last]="last"
+              [attr.tabindex]="tabbable && isSelected(index) ? '0' : '-1'"
+              (click)="itemClick(index)"
+              (keydown)="itemKeydown($event, att)"
+              >
             </kendo-chat-attachment>
+          }
         </div>
-        <button
-            *ngIf="showRightArrow"
+        @if (showRightArrow) {
+          <button
             (click)="scrollTo(1)"
             kendoButton
             tabindex="-1"
             [attr.title]="textFor('messageAttachmentRightArrow')"
             [svgIcon]="chevronRightIcon"
             icon="chevron-right"
-        >
-        </button>
-    `,
+            >
+          </button>
+        }
+        `,
                     standalone: true,
-                    imports: [NgIf, ButtonComponent, NgFor, AttachmentComponent]
+                    imports: [ButtonComponent, AttachmentComponent]
                 }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.LocalizationService }], propDecorators: { attachments: [{
                 type: Input
@@ -5035,20 +5149,6 @@ 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) {
@@ -5076,7 +5176,7 @@ 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);
@@ -5093,6 +5193,22 @@ 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);
@@ -5224,231 +5340,269 @@ class MessageListComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageListComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.IntlService }, { token: i0.Renderer2 }, { token: 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"
-                        >
-                            <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>
-    `,
+        `,
                     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$1.IntlService }, { type: i0.Renderer2 }, { type: ChatService }, { type: i0.ChangeDetectorRef }], propDecorators: { messages: [{
                 type: Input
@@ -6096,7 +6250,12 @@ class ChatComponent {
      * @hidden
      */
     get contextMenuActions() {
-        return transformActions(this.chatService.calculatedContextMenuActions);
+        const currentActions = this.chatService.calculatedContextMenuActions;
+        if (currentActions !== this._lastContextMenuActionsReference) {
+            this._cachedContextMenuActions = transformActions(currentActions);
+            this._lastContextMenuActionsReference = currentActions;
+        }
+        return this._cachedContextMenuActions;
     }
     /**
      * @hidden
@@ -6128,6 +6287,8 @@ class ChatComponent {
     _cachedProcessedMessages = [];
     _lastMessagesReference = null;
     _lastModelFields = null;
+    _cachedContextMenuActions = [];
+    _lastContextMenuActionsReference = null;
     constructor(localization, zone, renderer, element, chatService) {
         this.localization = localization;
         this.zone = zone;
@@ -6317,7 +6478,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", 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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.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,
@@ -6327,139 +6488,144 @@ class ChatComponent {
             }
         ], queries: [{ propertyName: "attachmentTemplate", first: true, predicate: AttachmentTemplateDirective, descendants: true }, { propertyName: "chatHeaderTemplate", first: true, predicate: ChatHeaderTemplateDirective, descendants: true }, { propertyName: "chatNoDataTemplate", first: true, predicate: NoDataTemplateDirective, descendants: true }, { propertyName: "authorMessageContentTemplate", first: true, predicate: AuthorMessageContentTemplateDirective, descendants: true }, { propertyName: "receiverMessageContentTemplate", first: true, predicate: ReceiverMessageContentTemplateDirective, descendants: true }, { propertyName: "messageContentTemplate", first: true, predicate: MessageContentTemplateDirective, descendants: true }, { propertyName: "authorMessageTemplate", first: true, predicate: AuthorMessageTemplateDirective, descendants: true }, { propertyName: "receiverMessageTemplate", first: true, predicate: ReceiverMessageTemplateDirective, descendants: true }, { propertyName: "messageTemplate", first: true, predicate: MessageTemplateDirective, descendants: true }, { propertyName: "timestampTemplate", first: true, predicate: ChatTimestampTemplateDirective, descendants: true }, { propertyName: "suggestionTemplate", first: true, predicate: ChatSuggestionTemplateDirective, descendants: true }, { propertyName: "statusTemplate", first: true, predicate: ChatStatusTemplateDirective, descendants: true }, { propertyName: "messageBoxTemplate", first: true, predicate: ChatMessageBoxTemplateDirective, descendants: true }, { propertyName: "userStatusTemplate", first: true, predicate: ChatUserStatusTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "messagesContextMenu", first: true, predicate: ["messagesContextMenu"], descendants: true }, { propertyName: "messageBox", first: true, predicate: ["messageBox"], descendants: true }, { propertyName: "messageList", first: true, predicate: ["messageList"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoChatLocalizedMessages
-            i18n-deletedMessageSenderText="kendo.chat.deletedMessageSenderText|The text that is displayed when the sender deletes a message"
-            deletedMessageSenderText="You removed this message."
-
-            i18n-deletedMessageReceiverText="kendo.chat.deletedMessageReceiverText|The text that is displayed when the receiver deletes a message"
-            deletedMessageReceiverText="This message was removed by its sender."
-
-            i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
-            messagePlaceholder="Type a message..."
-
-            i18n-send="kendo.chat.send|The text for the Send button"
-            send="Send..."
-
-            i18n-messageListLabel="kendo.chat.messageListLabel|The label text for the Message list"
-            messageListLabel="Message list"
-
-            i18n-messageBoxInputLabel="kendo.chat.messageBoxInputLabel|The label text for the Message input box"
-            messageBoxInputLabel="Message"
-
-            i18n-messageAttachmentLeftArrow="kendo.chat.messageAttachmentLeftArrow|The text for the left arrow of the message attachments"
-            messageAttachmentLeftArrow="Previous item"
-
-            i18n-messageAttachmentRightArrow="kendo.chat.messageAttachmentRightArrow|The text for the right arrow of the message attachments"
-            messageAttachmentRightArrow="Next item"
-
-            i18n-speechToTextButtonTitle="kendo.chat.speechToTextButtonTitle|Sets the Speech to Text button title."
-            speechToTextButtonTitle="Speech to Text"
-
-            i18n-fileSelectButtonTitle="kendo.chat.fileSelectButtonTitle|Sets the File Select button title."
-            fileSelectButtonTitle="Select files"
-
-            i18n-removeReplyTitle="kendo.chat.removeReplyTitle|Sets the title of the icon which removes the reply reference in the Message Box."
-            removeReplyTitle="Remove reply"
-
-            i18n-removeFileTitle="kendo.chat.removeFileTitle|Sets the title of the icon which removes a selected file in the Message Box."
-            removeFileTitle="Remove file"
-
-            i18n-expandTitle="kendo.chat.expandTitle|Sets the title of the icon which demonstrates that the message can be expanded."
-            expandTitle="Expand message"
-
-            i18n-collapseTitle="kendo.chat.collapseTitle|Sets the title of the icon which demonstrates that the message can be collapsed."
-            collapseTitle="Collapse message"
-
-            i18n-fileActionsTitle="kendo.chat.fileActionsTitle|Sets the title of the DropDownButton which opens the File actions."
-            fileActionsTitle="File actions"
-
-            i18n-downloadAllFilesText="kendo.chat.downloadAllFilesText|Sets the text that is displayed in the download section of the message."
-            downloadAllFilesText="Download all"
-
-            i18n-previousSuggestionsButtonTitle="kendo.chat.previousSuggestionsButtonTitle|The title of the button that scrolls to the previous suggestions"
-            previousSuggestionsButtonTitle="Scroll left"
-
-            i18n-nextSuggestionsButtonTitle="kendo.chat.nextSuggestionsButtonTitle|The title of the button that scrolls to the next suggestions"
-            nextSuggestionsButtonTitle="Scroll right"
-        >
+          i18n-deletedMessageSenderText="kendo.chat.deletedMessageSenderText|The text that is displayed when the sender deletes a message"
+          deletedMessageSenderText="You removed this message."
+        
+          i18n-deletedMessageReceiverText="kendo.chat.deletedMessageReceiverText|The text that is displayed when the receiver deletes a message"
+          deletedMessageReceiverText="This message was removed by its sender."
+        
+          i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
+          messagePlaceholder="Type a message..."
+        
+          i18n-send="kendo.chat.send|The text for the Send button"
+          send="Send..."
+        
+          i18n-messageListLabel="kendo.chat.messageListLabel|The label text for the Message list"
+          messageListLabel="Message list"
+        
+          i18n-messageBoxInputLabel="kendo.chat.messageBoxInputLabel|The label text for the Message input box"
+          messageBoxInputLabel="Message"
+        
+          i18n-messageAttachmentLeftArrow="kendo.chat.messageAttachmentLeftArrow|The text for the left arrow of the message attachments"
+          messageAttachmentLeftArrow="Previous item"
+        
+          i18n-messageAttachmentRightArrow="kendo.chat.messageAttachmentRightArrow|The text for the right arrow of the message attachments"
+          messageAttachmentRightArrow="Next item"
+        
+          i18n-speechToTextButtonTitle="kendo.chat.speechToTextButtonTitle|Sets the Speech to Text button title."
+          speechToTextButtonTitle="Speech to Text"
+        
+          i18n-fileSelectButtonTitle="kendo.chat.fileSelectButtonTitle|Sets the File Select button title."
+          fileSelectButtonTitle="Select files"
+        
+          i18n-removeReplyTitle="kendo.chat.removeReplyTitle|Sets the title of the icon which removes the reply reference in the Message Box."
+          removeReplyTitle="Remove reply"
+        
+          i18n-removeFileTitle="kendo.chat.removeFileTitle|Sets the title of the icon which removes a selected file in the Message Box."
+          removeFileTitle="Remove file"
+        
+          i18n-expandTitle="kendo.chat.expandTitle|Sets the title of the icon which demonstrates that the message can be expanded."
+          expandTitle="Expand message"
+        
+          i18n-collapseTitle="kendo.chat.collapseTitle|Sets the title of the icon which demonstrates that the message can be collapsed."
+          collapseTitle="Collapse message"
+        
+          i18n-fileActionsTitle="kendo.chat.fileActionsTitle|Sets the title of the DropDownButton which opens the File actions."
+          fileActionsTitle="File actions"
+        
+          i18n-downloadAllFilesText="kendo.chat.downloadAllFilesText|Sets the text that is displayed in the download section of the message."
+          downloadAllFilesText="Download all"
+        
+          i18n-previousSuggestionsButtonTitle="kendo.chat.previousSuggestionsButtonTitle|The title of the button that scrolls to the previous suggestions"
+          previousSuggestionsButtonTitle="Scroll left"
+        
+          i18n-nextSuggestionsButtonTitle="kendo.chat.nextSuggestionsButtonTitle|The title of the button that scrolls to the next suggestions"
+          nextSuggestionsButtonTitle="Scroll right"
+          >
         </ng-container>
-
-        <kendo-appbar *ngIf="chatHeaderTemplate" class="k-chat-header" positionMode="sticky" themeColor="inherit">
+        
+        @if (chatHeaderTemplate) {
+          <kendo-appbar class="k-chat-header" positionMode="sticky" themeColor="inherit">
             <ng-container *ngTemplateOutlet="chatHeaderTemplate.templateRef"></ng-container>
-        </kendo-appbar>
-        <div class="k-message-reference k-message-reference-receiver k-message-pinned" *ngIf="pinnedMessage" (click)="scrollToPinnedMessage()">
+          </kendo-appbar>
+        }
+        @if (pinnedMessage) {
+          <div class="k-message-reference k-message-reference-receiver k-message-pinned" (click)="scrollToPinnedMessage()">
             <kendo-icon-wrapper
-                size="xlarge"
-                name="pin"
-                [svgIcon]="pinIcon"
-            >
+              size="xlarge"
+              name="pin"
+              [svgIcon]="pinIcon"
+              >
             </kendo-icon-wrapper>
             <chat-message-reference-content [message]="pinnedMessage"></chat-message-reference-content>
             <span class="k-spacer"></span>
             <button kendoButton [svgIcon]="deleteIcon" (click)="unpin.emit(pinnedMessage)" fillMode="flat"></button>
-        </div>
+          </div>
+        }
         <div
-            #messageList
-            class="k-message-list"
-            aria-live="polite"
-            role="log"
-            kendoChatScrollAnchor
-            [attr.aria-label]="textFor('messageListLabel')"
-            #anchor="scrollAnchor"
-            [(autoScroll)]="autoScroll"
-        >
-            <div *ngIf="processedMessages && processedMessages.length === 0; else chatMessageList" class="k-message-list-content k-message-list-content-empty">
-                <ng-template
-                    [ngTemplateOutlet]="chatNoDataTemplate?.templateRef">
-                </ng-template>
+          #messageList
+          class="k-message-list"
+          aria-live="polite"
+          role="log"
+          kendoChatScrollAnchor
+          [attr.aria-label]="textFor('messageListLabel')"
+          #anchor="scrollAnchor"
+          [(autoScroll)]="autoScroll"
+          >
+          @if (processedMessages && processedMessages.length === 0) {
+            <div class="k-message-list-content k-message-list-content-empty">
+              <ng-template
+                [ngTemplateOutlet]="chatNoDataTemplate?.templateRef">
+              </ng-template>
             </div>
-            <ng-template #chatMessageList>
-                <kendo-chat-message-list
-                    [messages]="processedMessages"
-                    [authorMessageContentTemplate]="authorMessageContentTemplate"
-                    [receiverMessageContentTemplate]="receiverMessageContentTemplate"
-                    [messageContentTemplate]="messageContentTemplate"
-                    [authorMessageTemplate]="authorMessageTemplate"
-                    [receiverMessageTemplate]="receiverMessageTemplate"
-                    [messageTemplate]="messageTemplate"
-                    [timestampTemplate]="timestampTemplate"
-                    [statusTemplate]="statusTemplate"
-                    [userStatusTemplate]="userStatusTemplate"
-                    [localization]="localizationText"
-                    [attachmentTemplate]="attachmentTemplate"
-                    [authorId]="authorId"
-                    (executeAction)="dispatchAction($event)"
-                    (resize)="anchor.scrollToBottom()"
-                    (navigate)="this.autoScroll = false"
-                >
-                </kendo-chat-message-list>
-            </ng-template>
+          } @else {
+            <kendo-chat-message-list
+              [messages]="processedMessages"
+              [authorMessageContentTemplate]="authorMessageContentTemplate"
+              [receiverMessageContentTemplate]="receiverMessageContentTemplate"
+              [messageContentTemplate]="messageContentTemplate"
+              [authorMessageTemplate]="authorMessageTemplate"
+              [receiverMessageTemplate]="receiverMessageTemplate"
+              [messageTemplate]="messageTemplate"
+              [timestampTemplate]="timestampTemplate"
+              [statusTemplate]="statusTemplate"
+              [userStatusTemplate]="userStatusTemplate"
+              [localization]="localizationText"
+              [attachmentTemplate]="attachmentTemplate"
+              [authorId]="authorId"
+              (executeAction)="dispatchAction($event)"
+              (resize)="anchor.scrollToBottom()"
+              (navigate)="this.autoScroll = false"
+              >
+            </kendo-chat-message-list>
+          }
         </div>
         <kendo-message-box
-            #messageBox
-            [messageBoxTemplate]="messageBoxTemplate"
-            [suggestionTemplate]="suggestionTemplate"
-            [suggestions]="suggestions"
-            [placeholder]="placeholder"
-            [authorId]="authorId"
-            [autoScroll]="autoScroll"
-            [inputValue]="inputValue"
-            [localization]="localizationText"
-            (sendMessage)="sendMessage.emit($event)"
-            (executeSuggestion)="suggestionExecute.emit($event)"
-            (fileSelect)="fileSelect.emit($event)"
-            (fileRemove)="fileRemove.emit($event)"
-        >
+          #messageBox
+          [messageBoxTemplate]="messageBoxTemplate"
+          [suggestionTemplate]="suggestionTemplate"
+          [suggestions]="suggestions"
+          [placeholder]="placeholder"
+          [authorId]="authorId"
+          [autoScroll]="autoScroll"
+          [inputValue]="inputValue"
+          [localization]="localizationText"
+          (sendMessage)="sendMessage.emit($event)"
+          (executeSuggestion)="suggestionExecute.emit($event)"
+          (fileSelect)="fileSelect.emit($event)"
+          (fileRemove)="fileRemove.emit($event)"
+          >
         </kendo-message-box>
-
+        
         <kendo-contextmenu
-            #messagesContextMenu
-            [items]="contextMenuActions"
-            [popupAlign]="{ horizontal: 'right', vertical: 'top' }"
-            [collision]="{ horizontal: 'flip', vertical: 'flip'}"
-            (popupClose)="handleMenuClose($event)"
-            (select)="onContextMenuAction($event.item.originalAction)"
+          #messagesContextMenu
+          [items]="contextMenuActions"
+          [popupAlign]="{ horizontal: 'right', vertical: 'top' }"
+          [collision]="{ horizontal: 'flip', vertical: 'flip'}"
+          (popupClose)="handleMenuClose($event)"
+          (select)="onContextMenuAction($event.item.originalAction)"
         ></kendo-contextmenu>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$1, selector: "[kendoChatLocalizedMessages]" }, { kind: "directive", type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll"], outputs: ["autoScrollChange"], exportAs: ["scrollAnchor"] }, { kind: "component", type: MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "authorMessageContentTemplate", "receiverMessageContentTemplate", "messageContentTemplate", "authorMessageTemplate", "receiverMessageTemplate", "messageTemplate", "timestampTemplate", "statusTemplate", "userStatusTemplate", "localization", "authorId"], outputs: ["executeAction", "navigate", "resize"] }, { kind: "component", type: MessageBoxComponent, selector: "kendo-message-box", inputs: ["authorId", "autoScroll", "suggestions", "placeholder", "inputValue", "localization", "messageBoxTemplate", "suggestionTemplate"], outputs: ["sendMessage", "executeSuggestion", "fileSelect", "fileRemove"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "component", type: AppBarComponent, selector: "kendo-appbar", inputs: ["position", "positionMode", "themeColor"], exportAs: ["kendoAppBar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$1, selector: "[kendoChatLocalizedMessages]" }, { kind: "directive", type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll"], outputs: ["autoScrollChange"], exportAs: ["scrollAnchor"] }, { kind: "component", type: MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "authorMessageContentTemplate", "receiverMessageContentTemplate", "messageContentTemplate", "authorMessageTemplate", "receiverMessageTemplate", "messageTemplate", "timestampTemplate", "statusTemplate", "userStatusTemplate", "localization", "authorId"], outputs: ["executeAction", "navigate", "resize"] }, { kind: "component", type: MessageBoxComponent, selector: "kendo-message-box", inputs: ["authorId", "autoScroll", "suggestions", "placeholder", "inputValue", "localization", "messageBoxTemplate", "suggestionTemplate"], outputs: ["sendMessage", "executeSuggestion", "fileSelect", "fileRemove"] }, { kind: "component", type: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "component", type: AppBarComponent, selector: "kendo-appbar", inputs: ["position", "positionMode", "themeColor"], exportAs: ["kendoAppBar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
@@ -6476,141 +6642,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'kendo-chat',
                     template: `
         <ng-container kendoChatLocalizedMessages
-            i18n-deletedMessageSenderText="kendo.chat.deletedMessageSenderText|The text that is displayed when the sender deletes a message"
-            deletedMessageSenderText="You removed this message."
-
-            i18n-deletedMessageReceiverText="kendo.chat.deletedMessageReceiverText|The text that is displayed when the receiver deletes a message"
-            deletedMessageReceiverText="This message was removed by its sender."
-
-            i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
-            messagePlaceholder="Type a message..."
-
-            i18n-send="kendo.chat.send|The text for the Send button"
-            send="Send..."
-
-            i18n-messageListLabel="kendo.chat.messageListLabel|The label text for the Message list"
-            messageListLabel="Message list"
-
-            i18n-messageBoxInputLabel="kendo.chat.messageBoxInputLabel|The label text for the Message input box"
-            messageBoxInputLabel="Message"
-
-            i18n-messageAttachmentLeftArrow="kendo.chat.messageAttachmentLeftArrow|The text for the left arrow of the message attachments"
-            messageAttachmentLeftArrow="Previous item"
-
-            i18n-messageAttachmentRightArrow="kendo.chat.messageAttachmentRightArrow|The text for the right arrow of the message attachments"
-            messageAttachmentRightArrow="Next item"
-
-            i18n-speechToTextButtonTitle="kendo.chat.speechToTextButtonTitle|Sets the Speech to Text button title."
-            speechToTextButtonTitle="Speech to Text"
-
-            i18n-fileSelectButtonTitle="kendo.chat.fileSelectButtonTitle|Sets the File Select button title."
-            fileSelectButtonTitle="Select files"
-
-            i18n-removeReplyTitle="kendo.chat.removeReplyTitle|Sets the title of the icon which removes the reply reference in the Message Box."
-            removeReplyTitle="Remove reply"
-
-            i18n-removeFileTitle="kendo.chat.removeFileTitle|Sets the title of the icon which removes a selected file in the Message Box."
-            removeFileTitle="Remove file"
-
-            i18n-expandTitle="kendo.chat.expandTitle|Sets the title of the icon which demonstrates that the message can be expanded."
-            expandTitle="Expand message"
-
-            i18n-collapseTitle="kendo.chat.collapseTitle|Sets the title of the icon which demonstrates that the message can be collapsed."
-            collapseTitle="Collapse message"
-
-            i18n-fileActionsTitle="kendo.chat.fileActionsTitle|Sets the title of the DropDownButton which opens the File actions."
-            fileActionsTitle="File actions"
-
-            i18n-downloadAllFilesText="kendo.chat.downloadAllFilesText|Sets the text that is displayed in the download section of the message."
-            downloadAllFilesText="Download all"
-
-            i18n-previousSuggestionsButtonTitle="kendo.chat.previousSuggestionsButtonTitle|The title of the button that scrolls to the previous suggestions"
-            previousSuggestionsButtonTitle="Scroll left"
-
-            i18n-nextSuggestionsButtonTitle="kendo.chat.nextSuggestionsButtonTitle|The title of the button that scrolls to the next suggestions"
-            nextSuggestionsButtonTitle="Scroll right"
-        >
+          i18n-deletedMessageSenderText="kendo.chat.deletedMessageSenderText|The text that is displayed when the sender deletes a message"
+          deletedMessageSenderText="You removed this message."
+        
+          i18n-deletedMessageReceiverText="kendo.chat.deletedMessageReceiverText|The text that is displayed when the receiver deletes a message"
+          deletedMessageReceiverText="This message was removed by its sender."
+        
+          i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
+          messagePlaceholder="Type a message..."
+        
+          i18n-send="kendo.chat.send|The text for the Send button"
+          send="Send..."
+        
+          i18n-messageListLabel="kendo.chat.messageListLabel|The label text for the Message list"
+          messageListLabel="Message list"
+        
+          i18n-messageBoxInputLabel="kendo.chat.messageBoxInputLabel|The label text for the Message input box"
+          messageBoxInputLabel="Message"
+        
+          i18n-messageAttachmentLeftArrow="kendo.chat.messageAttachmentLeftArrow|The text for the left arrow of the message attachments"
+          messageAttachmentLeftArrow="Previous item"
+        
+          i18n-messageAttachmentRightArrow="kendo.chat.messageAttachmentRightArrow|The text for the right arrow of the message attachments"
+          messageAttachmentRightArrow="Next item"
+        
+          i18n-speechToTextButtonTitle="kendo.chat.speechToTextButtonTitle|Sets the Speech to Text button title."
+          speechToTextButtonTitle="Speech to Text"
+        
+          i18n-fileSelectButtonTitle="kendo.chat.fileSelectButtonTitle|Sets the File Select button title."
+          fileSelectButtonTitle="Select files"
+        
+          i18n-removeReplyTitle="kendo.chat.removeReplyTitle|Sets the title of the icon which removes the reply reference in the Message Box."
+          removeReplyTitle="Remove reply"
+        
+          i18n-removeFileTitle="kendo.chat.removeFileTitle|Sets the title of the icon which removes a selected file in the Message Box."
+          removeFileTitle="Remove file"
+        
+          i18n-expandTitle="kendo.chat.expandTitle|Sets the title of the icon which demonstrates that the message can be expanded."
+          expandTitle="Expand message"
+        
+          i18n-collapseTitle="kendo.chat.collapseTitle|Sets the title of the icon which demonstrates that the message can be collapsed."
+          collapseTitle="Collapse message"
+        
+          i18n-fileActionsTitle="kendo.chat.fileActionsTitle|Sets the title of the DropDownButton which opens the File actions."
+          fileActionsTitle="File actions"
+        
+          i18n-downloadAllFilesText="kendo.chat.downloadAllFilesText|Sets the text that is displayed in the download section of the message."
+          downloadAllFilesText="Download all"
+        
+          i18n-previousSuggestionsButtonTitle="kendo.chat.previousSuggestionsButtonTitle|The title of the button that scrolls to the previous suggestions"
+          previousSuggestionsButtonTitle="Scroll left"
+        
+          i18n-nextSuggestionsButtonTitle="kendo.chat.nextSuggestionsButtonTitle|The title of the button that scrolls to the next suggestions"
+          nextSuggestionsButtonTitle="Scroll right"
+          >
         </ng-container>
-
-        <kendo-appbar *ngIf="chatHeaderTemplate" class="k-chat-header" positionMode="sticky" themeColor="inherit">
+        
+        @if (chatHeaderTemplate) {
+          <kendo-appbar class="k-chat-header" positionMode="sticky" themeColor="inherit">
             <ng-container *ngTemplateOutlet="chatHeaderTemplate.templateRef"></ng-container>
-        </kendo-appbar>
-        <div class="k-message-reference k-message-reference-receiver k-message-pinned" *ngIf="pinnedMessage" (click)="scrollToPinnedMessage()">
+          </kendo-appbar>
+        }
+        @if (pinnedMessage) {
+          <div class="k-message-reference k-message-reference-receiver k-message-pinned" (click)="scrollToPinnedMessage()">
             <kendo-icon-wrapper
-                size="xlarge"
-                name="pin"
-                [svgIcon]="pinIcon"
-            >
+              size="xlarge"
+              name="pin"
+              [svgIcon]="pinIcon"
+              >
             </kendo-icon-wrapper>
             <chat-message-reference-content [message]="pinnedMessage"></chat-message-reference-content>
             <span class="k-spacer"></span>
             <button kendoButton [svgIcon]="deleteIcon" (click)="unpin.emit(pinnedMessage)" fillMode="flat"></button>
-        </div>
+          </div>
+        }
         <div
-            #messageList
-            class="k-message-list"
-            aria-live="polite"
-            role="log"
-            kendoChatScrollAnchor
-            [attr.aria-label]="textFor('messageListLabel')"
-            #anchor="scrollAnchor"
-            [(autoScroll)]="autoScroll"
-        >
-            <div *ngIf="processedMessages && processedMessages.length === 0; else chatMessageList" class="k-message-list-content k-message-list-content-empty">
-                <ng-template
-                    [ngTemplateOutlet]="chatNoDataTemplate?.templateRef">
-                </ng-template>
+          #messageList
+          class="k-message-list"
+          aria-live="polite"
+          role="log"
+          kendoChatScrollAnchor
+          [attr.aria-label]="textFor('messageListLabel')"
+          #anchor="scrollAnchor"
+          [(autoScroll)]="autoScroll"
+          >
+          @if (processedMessages && processedMessages.length === 0) {
+            <div class="k-message-list-content k-message-list-content-empty">
+              <ng-template
+                [ngTemplateOutlet]="chatNoDataTemplate?.templateRef">
+              </ng-template>
             </div>
-            <ng-template #chatMessageList>
-                <kendo-chat-message-list
-                    [messages]="processedMessages"
-                    [authorMessageContentTemplate]="authorMessageContentTemplate"
-                    [receiverMessageContentTemplate]="receiverMessageContentTemplate"
-                    [messageContentTemplate]="messageContentTemplate"
-                    [authorMessageTemplate]="authorMessageTemplate"
-                    [receiverMessageTemplate]="receiverMessageTemplate"
-                    [messageTemplate]="messageTemplate"
-                    [timestampTemplate]="timestampTemplate"
-                    [statusTemplate]="statusTemplate"
-                    [userStatusTemplate]="userStatusTemplate"
-                    [localization]="localizationText"
-                    [attachmentTemplate]="attachmentTemplate"
-                    [authorId]="authorId"
-                    (executeAction)="dispatchAction($event)"
-                    (resize)="anchor.scrollToBottom()"
-                    (navigate)="this.autoScroll = false"
-                >
-                </kendo-chat-message-list>
-            </ng-template>
+          } @else {
+            <kendo-chat-message-list
+              [messages]="processedMessages"
+              [authorMessageContentTemplate]="authorMessageContentTemplate"
+              [receiverMessageContentTemplate]="receiverMessageContentTemplate"
+              [messageContentTemplate]="messageContentTemplate"
+              [authorMessageTemplate]="authorMessageTemplate"
+              [receiverMessageTemplate]="receiverMessageTemplate"
+              [messageTemplate]="messageTemplate"
+              [timestampTemplate]="timestampTemplate"
+              [statusTemplate]="statusTemplate"
+              [userStatusTemplate]="userStatusTemplate"
+              [localization]="localizationText"
+              [attachmentTemplate]="attachmentTemplate"
+              [authorId]="authorId"
+              (executeAction)="dispatchAction($event)"
+              (resize)="anchor.scrollToBottom()"
+              (navigate)="this.autoScroll = false"
+              >
+            </kendo-chat-message-list>
+          }
         </div>
         <kendo-message-box
-            #messageBox
-            [messageBoxTemplate]="messageBoxTemplate"
-            [suggestionTemplate]="suggestionTemplate"
-            [suggestions]="suggestions"
-            [placeholder]="placeholder"
-            [authorId]="authorId"
-            [autoScroll]="autoScroll"
-            [inputValue]="inputValue"
-            [localization]="localizationText"
-            (sendMessage)="sendMessage.emit($event)"
-            (executeSuggestion)="suggestionExecute.emit($event)"
-            (fileSelect)="fileSelect.emit($event)"
-            (fileRemove)="fileRemove.emit($event)"
-        >
+          #messageBox
+          [messageBoxTemplate]="messageBoxTemplate"
+          [suggestionTemplate]="suggestionTemplate"
+          [suggestions]="suggestions"
+          [placeholder]="placeholder"
+          [authorId]="authorId"
+          [autoScroll]="autoScroll"
+          [inputValue]="inputValue"
+          [localization]="localizationText"
+          (sendMessage)="sendMessage.emit($event)"
+          (executeSuggestion)="suggestionExecute.emit($event)"
+          (fileSelect)="fileSelect.emit($event)"
+          (fileRemove)="fileRemove.emit($event)"
+          >
         </kendo-message-box>
-
+        
         <kendo-contextmenu
-            #messagesContextMenu
-            [items]="contextMenuActions"
-            [popupAlign]="{ horizontal: 'right', vertical: 'top' }"
-            [collision]="{ horizontal: 'flip', vertical: 'flip'}"
-            (popupClose)="handleMenuClose($event)"
-            (select)="onContextMenuAction($event.item.originalAction)"
+          #messagesContextMenu
+          [items]="contextMenuActions"
+          [popupAlign]="{ horizontal: 'right', vertical: 'top' }"
+          [collision]="{ horizontal: 'flip', vertical: 'flip'}"
+          (popupClose)="handleMenuClose($event)"
+          (select)="onContextMenuAction($event.item.originalAction)"
         ></kendo-contextmenu>
-    `,
+        `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective$1, ScrollAnchorDirective, MessageListComponent, MessageBoxComponent, MessageReferenceComponent, AppBarComponent, NgTemplateOutlet, NgIf, IconWrapperComponent, KENDO_BUTTON, ContextMenuComponent]
+                    imports: [LocalizedMessagesDirective$1, ScrollAnchorDirective, MessageListComponent, MessageBoxComponent, MessageReferenceComponent, AppBarComponent, NgTemplateOutlet, IconWrapperComponent, KENDO_BUTTON, ContextMenuComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: ChatService }], propDecorators: { messages: [{
                 type: Input
@@ -6832,59 +7003,73 @@ class HeroCardComponent {
         this.executeAction.next(action);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HeroCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: HeroCardComponent, isStandalone: true, selector: "kendo-chat-hero-card", inputs: { imageUrl: "imageUrl", title: "title", subtitle: "subtitle", actions: "actions" }, outputs: { executeAction: "executeAction" }, host: { properties: { "class.k-card": "this.cssClass" } }, ngImport: i0, template: `
-        <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: HeroCardComponent, isStandalone: true, selector: "kendo-chat-hero-card", inputs: { imageUrl: "imageUrl", title: "title", subtitle: "subtitle", actions: "actions" }, outputs: { executeAction: "executeAction" }, host: { properties: { "class.k-card": "this.cssClass" } }, ngImport: i0, template: `
+        @if (imageUrl) {
+          <img class="k-card-image" [src]="imageUrl" />
+        }
         <div class="k-card-body">
-        <h5 class="k-card-title" *ngIf="title">
-            {{ title }}
-        </h5>
-        <h6 class="k-card-subtitle" *ngIf="subtitle">
-            {{ subtitle }}
-        </h6>
+          @if (title) {
+            <h5 class="k-card-title">
+              {{ title }}
+            </h5>
+          }
+          @if (subtitle) {
+            <h6 class="k-card-subtitle">
+              {{ subtitle }}
+            </h6>
+          }
         </div>
         <div class="k-card-actions k-card-actions-vertical">
-        <span class="k-card-action"
-                *ngFor="let act of actions"
-        >
-            <button
+          @for (act of actions; track act) {
+            <span class="k-card-action"
+              >
+              <button
                 kendoButton fillMode="flat"
                 (click)="onClick(act)"
-            >
-                    {{ act.title }}
-            </button>
-        </span>
+                >
+                {{ act.title }}
+              </button>
+            </span>
+          }
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
+        `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HeroCardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chat-hero-card',
                     template: `
-        <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />
+        @if (imageUrl) {
+          <img class="k-card-image" [src]="imageUrl" />
+        }
         <div class="k-card-body">
-        <h5 class="k-card-title" *ngIf="title">
-            {{ title }}
-        </h5>
-        <h6 class="k-card-subtitle" *ngIf="subtitle">
-            {{ subtitle }}
-        </h6>
+          @if (title) {
+            <h5 class="k-card-title">
+              {{ title }}
+            </h5>
+          }
+          @if (subtitle) {
+            <h6 class="k-card-subtitle">
+              {{ subtitle }}
+            </h6>
+          }
         </div>
         <div class="k-card-actions k-card-actions-vertical">
-        <span class="k-card-action"
-                *ngFor="let act of actions"
-        >
-            <button
+          @for (act of actions; track act) {
+            <span class="k-card-action"
+              >
+              <button
                 kendoButton fillMode="flat"
                 (click)="onClick(act)"
-            >
-                    {{ act.title }}
-            </button>
-        </span>
+                >
+                {{ act.title }}
+              </button>
+            </span>
+          }
         </div>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgIf, NgFor, ButtonComponent]
+                    imports: [ButtonComponent]
                 }]
         }], propDecorators: { imageUrl: [{
                 type: Input
@@ -7238,7 +7423,7 @@ class InlineAIPromptContentComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InlineAIPromptContentComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1.LocalizationService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: InlineAIPromptContentComponent, isStandalone: true, selector: "kendo-inlineaiprompt-content", inputs: { popupElement: "popupElement", promptValue: "promptValue", placeholder: "placeholder", promptOutput: "promptOutput", enableSpeechToText: "enableSpeechToText", streaming: "streaming", width: "width", maxHeight: "maxHeight", appendTo: "appendTo", outputActions: "outputActions", promptCommands: "promptCommands", outputTemplate: "outputTemplate" }, outputs: { promptRequest: "promptRequest", commandExecute: "commandExecute", outputActionClick: "outputActionClick", promptRequestCancel: "promptRequestCancel", close: "close", promptValueChange: "promptValueChange" }, host: { listeners: { "keydown": "onEscapeKey($event)" }, properties: { "class.k-prompt": "this.className", "attr.dir": "this.dirAttr", "style.max-height": "this.maxHeightStyle", "style.width": "this.widthStyle" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: InlineAIPromptContentComponent, isStandalone: true, selector: "kendo-inlineaiprompt-content", inputs: { popupElement: "popupElement", promptValue: "promptValue", placeholder: "placeholder", promptOutput: "promptOutput", enableSpeechToText: "enableSpeechToText", streaming: "streaming", width: "width", maxHeight: "maxHeight", appendTo: "appendTo", outputActions: "outputActions", promptCommands: "promptCommands", outputTemplate: "outputTemplate" }, outputs: { promptRequest: "promptRequest", commandExecute: "commandExecute", outputActionClick: "outputActionClick", promptRequestCancel: "promptRequestCancel", close: "close", promptValueChange: "promptValueChange" }, host: { listeners: { "keydown": "onEscapeKey($event)" }, properties: { "class.k-prompt": "this.className", "attr.dir": "this.dirAttr", "style.max-height": "this.maxHeightStyle", "style.width": "this.widthStyle" } }, providers: [
             LocalizationService,
             {
                 provide: L10N_PREFIX,
@@ -7246,99 +7431,112 @@ class InlineAIPromptContentComponent {
             },
         ], viewQueries: [{ propertyName: "textArea", first: true, predicate: TextAreaComponent, descendants: true }, { propertyName: "contextMenu", first: true, predicate: ["kendoContextMenu"], descendants: true }], exportAs: ["kendoInlineAIPromptContent"], ngImport: i0, template: `
         <ng-container kendoInlineAIPromptLocalizedMessages
-            i18n-commandsButtonTitle="kendo.inlineaiprompt.commandsButtonTitle|Sets the Commands button title."
-            commandsButtonTitle="Command Menu"
-            i18n-generateButtonTitle="kendo.inlineaiprompt.generateButtonTitle|Sets the Generate button title."
-            generateButtonTitle="Generate"
-            i18n-speechToTextButtonTitle="kendo.inlineaiprompt.speechToTextButtonTitle|Sets the Speech to Text button title."
-            speechToTextButtonTitle="Speech to Text"
-        >
+          i18n-commandsButtonTitle="kendo.inlineaiprompt.commandsButtonTitle|Sets the Commands button title."
+          commandsButtonTitle="Command Menu"
+          i18n-generateButtonTitle="kendo.inlineaiprompt.generateButtonTitle|Sets the Generate button title."
+          generateButtonTitle="Generate"
+          i18n-speechToTextButtonTitle="kendo.inlineaiprompt.speechToTextButtonTitle|Sets the Speech to Text button title."
+          speechToTextButtonTitle="Speech to Text"
+          >
         </ng-container>
         <div class="k-prompt-content">
-            <div class="k-prompt-view">
-                <kendo-card *ngIf="promptOutput" width="100%">
-                    <kendo-card-body>
-                        <ng-container
-                            *ngIf="outputTemplate"
-                            [ngTemplateOutlet]="outputTemplate"
-                            [ngTemplateOutletContext]="{ $implicit: promptOutput }"
-                        >
-                        </ng-container>
-                        <ng-container *ngIf="!outputTemplate">{{promptOutput.output}}</ng-container>
-                    </kendo-card-body>
-                    <kendo-card-actions *ngIf="outputActions && outputActions.length > 0">
-                        <ng-container *ngFor="let action of outputActions">
-                            <button kendoButton *ngIf="action.type === 'button'"
-                                [attr.title]="action?.title"
-                                [fillMode]="action?.fillMode"
-                                [themeColor]="action?.themeColor"
-                                [rounded]="action?.rounded"
-                                [icon]="action?.icon"
-                                [svgIcon]="action?.svgIcon"
-                                (click)="onActionClick(action)"
-                            >{{action?.text}}</button>
-                            <div *ngIf="action.type === 'spacer'" class="k-spacer"></div>
-                        </ng-container>
-                    </kendo-card-actions>
-                </kendo-card>
-                <kendo-textarea
-                    [value]="promptValue ? promptValue : null"
-                    (valueChange)="handlePromptValueChange($event)"
-                    [rows]="initialRows"
-                    resizable="auto"
-                    flow="horizontal"
-                    [placeholder]="placeholder"
-                    [showPrefixSeparator]="true"
-                    [selectOnFocus]="true"
-                    [maxResizableRows]="maxRows"
-                    (keydown)="handleTextAreaKeydown($event)"
-                >
-                    <kendo-textarea-prefix>
-                        <button
-                            kendoButton
-                            #commandMenuButton
-                            *ngIf="promptCommands && promptCommands.length > 0"
-                            [attr.title]="messageFor('commandsButtonTitle')"
-                            fillMode="flat"
-                            icon="menu"
-                            [svgIcon]="commandMenuIcon"
-                            (click)="onCommandButtonClick($event)"
-                        ></button>
-                        <button
-                            kendoSpeechToTextButton
-                            *ngIf="enableSpeechToText"
-                            [attr.title]="messageFor('speechToTextButtonTitle')"
-                            fillMode="flat"
-                            (result)="handleSpeechResult($event)"
-                            (start)="isListening = true"
-                            (end)="isListening = false"
-                        ></button>
-                    </kendo-textarea-prefix>
-                    <kendo-textarea-suffix>
-                        <button
-                            kendoButton
-                            [attr.title]="messageFor('generateButtonTitle')"
-                            fillMode="flat"
-                            class="k-prompt-send"
-                            [ngClass]="{ 'k-generating': streaming, 'k-active': streaming }"
-                            (click)="handlePromptRequest()"
-                            [disabled]="!streaming && (!promptValue?.trim() || isListening)"
-                            [svgIcon]="streaming ? stopGenerationIcon : sendIcon"
-                            [icon]="streaming ? 'stop-sm' : 'paper-plane'"
-                        ></button>
-                    </kendo-textarea-suffix>
-                </kendo-textarea>
-            </div>
+          <div class="k-prompt-view">
+            @if (promptOutput) {
+              <kendo-card width="100%">
+                <kendo-card-body>
+                  @if (outputTemplate) {
+                    <ng-container
+                      [ngTemplateOutlet]="outputTemplate"
+                      [ngTemplateOutletContext]="{ $implicit: promptOutput }"
+                      >
+                    </ng-container>
+                  }
+                  @if (!outputTemplate) {
+                    {{promptOutput.output}}
+                  }
+                </kendo-card-body>
+                @if (outputActions && outputActions.length > 0) {
+                  <kendo-card-actions>
+                    @for (action of outputActions; track action) {
+                      @if (action.type === 'button') {
+                        <button kendoButton
+                          [attr.title]="action?.title"
+                          [fillMode]="action?.fillMode"
+                          [themeColor]="action?.themeColor"
+                          [rounded]="action?.rounded"
+                          [icon]="action?.icon"
+                          [svgIcon]="action?.svgIcon"
+                          (click)="onActionClick(action)"
+                        >{{action?.text}}</button>
+                      }
+                      @if (action.type === 'spacer') {
+                        <div class="k-spacer"></div>
+                      }
+                    }
+                  </kendo-card-actions>
+                }
+              </kendo-card>
+            }
+            <kendo-textarea
+              [value]="promptValue ? promptValue : null"
+              (valueChange)="handlePromptValueChange($event)"
+              [rows]="initialRows"
+              resizable="auto"
+              flow="horizontal"
+              [placeholder]="placeholder"
+              [showPrefixSeparator]="true"
+              [selectOnFocus]="true"
+              [maxResizableRows]="maxRows"
+              (keydown)="handleTextAreaKeydown($event)"
+              >
+              <kendo-textarea-prefix>
+                @if (promptCommands && promptCommands.length > 0) {
+                  <button
+                    kendoButton
+                    #commandMenuButton
+                    [attr.title]="messageFor('commandsButtonTitle')"
+                    fillMode="flat"
+                    icon="menu"
+                    [svgIcon]="commandMenuIcon"
+                    (click)="onCommandButtonClick($event)"
+                  ></button>
+                }
+                @if (enableSpeechToText) {
+                  <button
+                    kendoSpeechToTextButton
+                    [attr.title]="messageFor('speechToTextButtonTitle')"
+                    fillMode="flat"
+                    (result)="handleSpeechResult($event)"
+                    (start)="isListening = true"
+                    (end)="isListening = false"
+                  ></button>
+                }
+              </kendo-textarea-prefix>
+              <kendo-textarea-suffix>
+                <button
+                  kendoButton
+                  [attr.title]="messageFor('generateButtonTitle')"
+                  fillMode="flat"
+                  class="k-prompt-send"
+                  [ngClass]="{ 'k-generating': streaming, 'k-active': streaming }"
+                  (click)="handlePromptRequest()"
+                  [disabled]="!streaming && (!promptValue?.trim() || isListening)"
+                  [svgIcon]="streaming ? stopGenerationIcon : sendIcon"
+                  [icon]="streaming ? 'stop-sm' : 'paper-plane'"
+                ></button>
+              </kendo-textarea-suffix>
+            </kendo-textarea>
+          </div>
         </div>
         <kendo-contextmenu
-            #kendoContextMenu
-            [alignToAnchor]="true"
-            [items]="commandMenuItems"
-            [appendTo]="appendTo"
-            class="k-hidden"
-            (select)="onCommandClick($event)">
+          #kendoContextMenu
+          [alignToAnchor]="true"
+          [items]="commandMenuItems"
+          [appendTo]="appendTo"
+          class="k-hidden"
+          (select)="onCommandClick($event)">
         </kendo-contextmenu>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoInlineAIPromptLocalizedMessages]" }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i2.SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }, { kind: "component", type: i3.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: i3.TextAreaPrefixComponent, selector: "kendo-textarea-prefix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaPrefix"] }, { kind: "component", type: i3.TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: i4.ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "component", type: i5.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "component", type: i5.CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }, { kind: "component", type: i5.CardBodyComponent, selector: "kendo-card-body" }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoInlineAIPromptLocalizedMessages]" }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i2.SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }, { kind: "component", type: i3.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: i3.TextAreaPrefixComponent, selector: "kendo-textarea-prefix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaPrefix"] }, { kind: "component", type: i3.TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: i4.ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "component", type: i5.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "component", type: i5.CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }, { kind: "component", type: i5.CardBodyComponent, selector: "kendo-card-body" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InlineAIPromptContentComponent, decorators: [{
             type: Component,
@@ -7354,101 +7552,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     ],
                     template: `
         <ng-container kendoInlineAIPromptLocalizedMessages
-            i18n-commandsButtonTitle="kendo.inlineaiprompt.commandsButtonTitle|Sets the Commands button title."
-            commandsButtonTitle="Command Menu"
-            i18n-generateButtonTitle="kendo.inlineaiprompt.generateButtonTitle|Sets the Generate button title."
-            generateButtonTitle="Generate"
-            i18n-speechToTextButtonTitle="kendo.inlineaiprompt.speechToTextButtonTitle|Sets the Speech to Text button title."
-            speechToTextButtonTitle="Speech to Text"
-        >
+          i18n-commandsButtonTitle="kendo.inlineaiprompt.commandsButtonTitle|Sets the Commands button title."
+          commandsButtonTitle="Command Menu"
+          i18n-generateButtonTitle="kendo.inlineaiprompt.generateButtonTitle|Sets the Generate button title."
+          generateButtonTitle="Generate"
+          i18n-speechToTextButtonTitle="kendo.inlineaiprompt.speechToTextButtonTitle|Sets the Speech to Text button title."
+          speechToTextButtonTitle="Speech to Text"
+          >
         </ng-container>
         <div class="k-prompt-content">
-            <div class="k-prompt-view">
-                <kendo-card *ngIf="promptOutput" width="100%">
-                    <kendo-card-body>
-                        <ng-container
-                            *ngIf="outputTemplate"
-                            [ngTemplateOutlet]="outputTemplate"
-                            [ngTemplateOutletContext]="{ $implicit: promptOutput }"
-                        >
-                        </ng-container>
-                        <ng-container *ngIf="!outputTemplate">{{promptOutput.output}}</ng-container>
-                    </kendo-card-body>
-                    <kendo-card-actions *ngIf="outputActions && outputActions.length > 0">
-                        <ng-container *ngFor="let action of outputActions">
-                            <button kendoButton *ngIf="action.type === 'button'"
-                                [attr.title]="action?.title"
-                                [fillMode]="action?.fillMode"
-                                [themeColor]="action?.themeColor"
-                                [rounded]="action?.rounded"
-                                [icon]="action?.icon"
-                                [svgIcon]="action?.svgIcon"
-                                (click)="onActionClick(action)"
-                            >{{action?.text}}</button>
-                            <div *ngIf="action.type === 'spacer'" class="k-spacer"></div>
-                        </ng-container>
-                    </kendo-card-actions>
-                </kendo-card>
-                <kendo-textarea
-                    [value]="promptValue ? promptValue : null"
-                    (valueChange)="handlePromptValueChange($event)"
-                    [rows]="initialRows"
-                    resizable="auto"
-                    flow="horizontal"
-                    [placeholder]="placeholder"
-                    [showPrefixSeparator]="true"
-                    [selectOnFocus]="true"
-                    [maxResizableRows]="maxRows"
-                    (keydown)="handleTextAreaKeydown($event)"
-                >
-                    <kendo-textarea-prefix>
-                        <button
-                            kendoButton
-                            #commandMenuButton
-                            *ngIf="promptCommands && promptCommands.length > 0"
-                            [attr.title]="messageFor('commandsButtonTitle')"
-                            fillMode="flat"
-                            icon="menu"
-                            [svgIcon]="commandMenuIcon"
-                            (click)="onCommandButtonClick($event)"
-                        ></button>
-                        <button
-                            kendoSpeechToTextButton
-                            *ngIf="enableSpeechToText"
-                            [attr.title]="messageFor('speechToTextButtonTitle')"
-                            fillMode="flat"
-                            (result)="handleSpeechResult($event)"
-                            (start)="isListening = true"
-                            (end)="isListening = false"
-                        ></button>
-                    </kendo-textarea-prefix>
-                    <kendo-textarea-suffix>
-                        <button
-                            kendoButton
-                            [attr.title]="messageFor('generateButtonTitle')"
-                            fillMode="flat"
-                            class="k-prompt-send"
-                            [ngClass]="{ 'k-generating': streaming, 'k-active': streaming }"
-                            (click)="handlePromptRequest()"
-                            [disabled]="!streaming && (!promptValue?.trim() || isListening)"
-                            [svgIcon]="streaming ? stopGenerationIcon : sendIcon"
-                            [icon]="streaming ? 'stop-sm' : 'paper-plane'"
-                        ></button>
-                    </kendo-textarea-suffix>
-                </kendo-textarea>
-            </div>
+          <div class="k-prompt-view">
+            @if (promptOutput) {
+              <kendo-card width="100%">
+                <kendo-card-body>
+                  @if (outputTemplate) {
+                    <ng-container
+                      [ngTemplateOutlet]="outputTemplate"
+                      [ngTemplateOutletContext]="{ $implicit: promptOutput }"
+                      >
+                    </ng-container>
+                  }
+                  @if (!outputTemplate) {
+                    {{promptOutput.output}}
+                  }
+                </kendo-card-body>
+                @if (outputActions && outputActions.length > 0) {
+                  <kendo-card-actions>
+                    @for (action of outputActions; track action) {
+                      @if (action.type === 'button') {
+                        <button kendoButton
+                          [attr.title]="action?.title"
+                          [fillMode]="action?.fillMode"
+                          [themeColor]="action?.themeColor"
+                          [rounded]="action?.rounded"
+                          [icon]="action?.icon"
+                          [svgIcon]="action?.svgIcon"
+                          (click)="onActionClick(action)"
+                        >{{action?.text}}</button>
+                      }
+                      @if (action.type === 'spacer') {
+                        <div class="k-spacer"></div>
+                      }
+                    }
+                  </kendo-card-actions>
+                }
+              </kendo-card>
+            }
+            <kendo-textarea
+              [value]="promptValue ? promptValue : null"
+              (valueChange)="handlePromptValueChange($event)"
+              [rows]="initialRows"
+              resizable="auto"
+              flow="horizontal"
+              [placeholder]="placeholder"
+              [showPrefixSeparator]="true"
+              [selectOnFocus]="true"
+              [maxResizableRows]="maxRows"
+              (keydown)="handleTextAreaKeydown($event)"
+              >
+              <kendo-textarea-prefix>
+                @if (promptCommands && promptCommands.length > 0) {
+                  <button
+                    kendoButton
+                    #commandMenuButton
+                    [attr.title]="messageFor('commandsButtonTitle')"
+                    fillMode="flat"
+                    icon="menu"
+                    [svgIcon]="commandMenuIcon"
+                    (click)="onCommandButtonClick($event)"
+                  ></button>
+                }
+                @if (enableSpeechToText) {
+                  <button
+                    kendoSpeechToTextButton
+                    [attr.title]="messageFor('speechToTextButtonTitle')"
+                    fillMode="flat"
+                    (result)="handleSpeechResult($event)"
+                    (start)="isListening = true"
+                    (end)="isListening = false"
+                  ></button>
+                }
+              </kendo-textarea-prefix>
+              <kendo-textarea-suffix>
+                <button
+                  kendoButton
+                  [attr.title]="messageFor('generateButtonTitle')"
+                  fillMode="flat"
+                  class="k-prompt-send"
+                  [ngClass]="{ 'k-generating': streaming, 'k-active': streaming }"
+                  (click)="handlePromptRequest()"
+                  [disabled]="!streaming && (!promptValue?.trim() || isListening)"
+                  [svgIcon]="streaming ? stopGenerationIcon : sendIcon"
+                  [icon]="streaming ? 'stop-sm' : 'paper-plane'"
+                ></button>
+              </kendo-textarea-suffix>
+            </kendo-textarea>
+          </div>
         </div>
         <kendo-contextmenu
-            #kendoContextMenu
-            [alignToAnchor]="true"
-            [items]="commandMenuItems"
-            [appendTo]="appendTo"
-            class="k-hidden"
-            (select)="onCommandClick($event)">
+          #kendoContextMenu
+          [alignToAnchor]="true"
+          [items]="commandMenuItems"
+          [appendTo]="appendTo"
+          class="k-hidden"
+          (select)="onCommandClick($event)">
         </kendo-contextmenu>
-    `,
+        `,
                     standalone: true,
-                    imports: [NgClass, NgIf, NgFor, NgTemplateOutlet, LocalizedMessagesDirective, KENDO_BUTTONS, KENDO_TEXTAREA, KENDO_CONTEXTMENU, KENDO_CARD],
+                    imports: [NgClass, NgTemplateOutlet, LocalizedMessagesDirective, KENDO_BUTTONS, KENDO_TEXTAREA, KENDO_CONTEXTMENU, KENDO_CARD],
                 }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1.LocalizationService, decorators: [{
                     type: Optional