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

package/codemods/v20/chat-user.js

@@ -29,24 +29,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = default_1;
 const fs = __importStar(require("fs"));
-const index_1 = require("../template-transformer/index");
 const utils_1 = require("../utils");
 function default_1(fileInfo, api) {
     const filePath = fileInfo.path;
+    // Handle HTML files and inline templates
+    const htmlResult = (0, utils_1.htmlTransformer)(fileInfo, api, (templateContent) => (0, utils_1.attributeNameValueUpdate)(templateContent, 'kendo-chat', 'user', 'authorId', 'id'));
     if (filePath.endsWith('.html')) {
-        if ((0, utils_1.hasKendoInTemplate)(fileInfo.source)) {
-            let updatedContent = fileInfo.source;
-            updatedContent = (0, utils_1.htmlBoundAttributeTransformer)({ ...fileInfo, source: updatedContent }, 'kendo-chat', 'user', 'authorId', 'id');
-            // Only write to file once after all transformations
-            fs.writeFileSync(filePath, updatedContent, 'utf-8');
+        if (htmlResult && htmlResult !== fileInfo.source) {
+            fs.writeFileSync(filePath, htmlResult, 'utf-8');
+            return htmlResult;
         }
-        return;
+        return fileInfo.source; // Return original source if no changes
     }
+    // Handle TypeScript property transformations
     const j = api.jscodeshift;
-    const rootSource = j(fileInfo.source);
-    (0, index_1.templateTransformer)(rootSource, j, (root) => {
-        (0, utils_1.templateBoundAttributeTransformer)(root, 'kendo-chat', 'user', 'authorId', 'id');
-    });
-    (0, utils_1.tsPropertyTransformer)(fileInfo.source, rootSource, j, 'ChatComponent', 'user', 'authorId', 'id');
+    const rootSource = j(htmlResult || fileInfo.source);
+    (0, utils_1.tsPropertyTransformer)(fileInfo.source, rootSource, j, '@progress/kendo-angular-conversational-ui', 'ChatComponent', 'user', 'authorId', 'id');
     return rootSource.toSource();
 }

package/codemods/v21/chat-messagetoolbarvisibility.js

@@ -29,25 +29,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = default_1;
 const fs = __importStar(require("fs"));
-const index_1 = require("../template-transformer/index");
 const utils_1 = require("../utils");
 function default_1(fileInfo, api) {
     const filePath = fileInfo.path;
+    // Handle HTML files and inline templates
+    const htmlResult = (0, utils_1.htmlTransformer)(fileInfo, api, (templateContent) => (0, utils_1.attributeRemoval)(templateContent, 'kendo-chat', 'messageToolbarVisibility'));
     if (filePath.endsWith('.html')) {
-        if ((0, utils_1.hasKendoInTemplate)(fileInfo.source)) {
-            let updatedContent = fileInfo.source;
-            updatedContent = (0, utils_1.htmlAttributeRemoval)({ ...fileInfo, source: updatedContent }, 'kendo-chat', 'messageToolbarVisibility');
-            // Only write to file once after all transformations
-            fs.writeFileSync(filePath, updatedContent, 'utf-8');
+        if (htmlResult && htmlResult !== fileInfo.source) {
+            fs.writeFileSync(filePath, htmlResult, 'utf-8');
+            return htmlResult;
         }
-        return;
+        return fileInfo.source; // Return original source if no changes
     }
+    // Handle TypeScript property transformations
     const j = api.jscodeshift;
-    const rootSource = j(fileInfo.source);
-    (0, index_1.templateTransformer)(rootSource, j, (root) => {
-        (0, utils_1.templateAttributeRemoval)(root, 'kendo-chat', 'messageToolbarVisibility');
-    });
-    (0, utils_1.tsPropertyRemoval)(fileInfo.source, rootSource, j, 'ChatComponent', 'messageToolbarVisibility');
-    (0, utils_1.tsComponentPropertyRemoval)(fileInfo.source, rootSource, j, 'ChatComponent', 'messageToolbarVisibility');
+    const rootSource = j(htmlResult || fileInfo.source);
+    (0, utils_1.tsComponentPropertyRemoval)(fileInfo.source, rootSource, j, '@progress/kendo-angular-conversational-ui', 'ChatComponent', 'messageToolbarVisibility');
     return rootSource.toSource();
 }

package/codemods/v21/chat-pinnedbyfield.js

@@ -13,7 +13,6 @@ function default_1(fileInfo, api) {
     }
     const j = api.jscodeshift;
     const rootSource = j(fileInfo.source);
-    (0, utils_1.tsPropertyRemoval)(fileInfo.source, rootSource, j, 'ConversationalUIModelFields', 'pinnedByField');
-    (0, utils_1.tsComponentPropertyRemoval)(fileInfo.source, rootSource, j, 'ConversationalUIModelFields', 'pinnedByField');
+    (0, utils_1.tsPropertyRemoval)(fileInfo.source, rootSource, j, '@progress/kendo-angular-conversational-ui', 'ConversationalUIModelFields', 'pinnedByField');
     return rootSource.toSource();
 }

package/esm2022/ai-prompt/aiprompt.component.mjs

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, QueryList, Renderer2, ViewChild } from "@angular/core";
-import { NgFor, NgIf, NgTemplateOutlet } from "@angular/common";
+import { NgTemplateOutlet } from "@angular/common";
 import { Subscription } from "rxjs";
 import { sparklesIcon, commentIcon, stopSmIcon } from "@progress/kendo-svg-icons";
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
@@ -300,7 +300,7 @@ export 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: i2.AIPromptService }, { token: i3.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,
@@ -310,82 +310,90 @@ export 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, 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, 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,
@@ -403,84 +411,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, NgFor, ButtonComponent, AIPromptToolbarFocusableDirective, NgIf, NgTemplateOutlet, FloatingActionButtonComponent]
+                    imports: [LocalizedMessagesDirective, ButtonComponent, AIPromptToolbarFocusableDirective, NgTemplateOutlet, FloatingActionButtonComponent]
                 }]
         }], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.AIPromptService }, { type: i3.ToolbarNavigationService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { hostClasses: [{
                 type: HostBinding,