@progress/kendo-angular-conversational-ui 14.4.0-develop.9 → 15.0.0-develop.2

package/ai-prompt/views/output-view.component.d.ts

@@ -0,0 +1,22 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { BaseView } from './base-view';
+import { PromptOutput } from '../models/prompt-output.interface';
+import { AIPromptService } from '../common/aiprompt.service';
+import * as i0 from "@angular/core";
+/**
+ * The component for rendering the **Output** view.
+ */
+export declare class OutputViewComponent extends BaseView {
+    private service;
+    constructor(localization: LocalizationService, service: AIPromptService);
+    /**
+     * @hidden
+     */
+    get promptOutputs(): Array<PromptOutput>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OutputViewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OutputViewComponent, "kendo-aiprompt-output-view", never, {}, {}, never, never>;
+}

package/ai-prompt/views/prompt-view.component.d.ts

@@ -0,0 +1,47 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { SVGIcon } from '@progress/kendo-svg-icons';
+import { BaseView } from './base-view';
+import { AIPromptService } from '../common/aiprompt.service';
+import * as i0 from "@angular/core";
+/**
+ * The component for rendering the **Prompt** view.
+ */
+export declare class PromptViewComponent extends BaseView {
+    private service;
+    constructor(localization: LocalizationService, service: AIPromptService);
+    /**
+     * @hidden
+     */
+    get suggestionsIcons(): {
+        font: string;
+        svg: SVGIcon;
+    };
+    /**
+     * @hidden
+     */
+    showSuggestions: boolean;
+    /**
+     * @hidden
+     */
+    contentId: string;
+    /**
+     * @hidden
+     */
+    get promptSuggestions(): string[];
+    /**
+     *
+     * @hidden
+     */
+    set textAreaValue(value: string);
+    get textAreaValue(): string;
+    /**
+     * @hidden
+     */
+    suggestionClick(suggestion: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PromptViewComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PromptViewComponent, "kendo-aiprompt-prompt-view", never, {}, {}, never, never>;
+}

package/{api → chat/api}/execute-action-event.d.ts

@@ -3,7 +3,8 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { PreventableEvent } from "./preventable-event";
-import { Action, Message } from "../api";
+import { Message } from "./message.interface";
+import { Action } from "./action.interface";
 /**
  * Arguments for the `executeAction` event. The `executeAction` event fires when the user clicks
  * a quick action button. Calling `preventDefault()` suppresses the built-in action handler.

package/chat/attachment-template.directive.d.ts

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
  * refer to the article on [message attachments]({% slug attachments_chat %}).
  *
  * {% meta height:700 %}
- * {% embed_file attachments/templates/app.component.ts preview %}
+ * {% embed_file chat/attachments/templates/app.component.ts preview %}
  * {% embed_file shared/app.module.ts preview %}
  * {% embed_file shared/main.ts hidden %}
  * {% endmeta %}

package/chat/attachment.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Attachment } from '../api/attachment.interface';
+import { Attachment } from './api/attachment.interface';
 import { AttachmentTemplateDirective } from './attachment-template.directive';
 import * as i0 from "@angular/core";
 /**

package/chat/builtin-actions.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Action } from '../api/action.interface';
+import { Action } from './api/action.interface';
 import { ChatComponent } from './chat.component';
 /**
  * @hidden

package/chat/chat-view.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Message, User, Action, Attachment, AttachmentLayout } from '../api';
+import { Message, User, Action, Attachment, AttachmentLayout } from './api';
 /**
  * @hidden
  */

package/chat/chat.component.d.ts

@@ -6,8 +6,8 @@ import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, NgZone } from '@ang
 import { AttachmentTemplateDirective } from './attachment-template.directive';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { MessageTemplateDirective } from './message-template.directive';
-import { ExecuteActionEvent, Message, SendMessageEvent, User } from '../api';
-import { MessageBoxType } from '../common/models/message-box-options';
+import { ExecuteActionEvent, Message, SendMessageEvent, User } from './api';
+import { MessageBoxType } from './common/models/message-box-options';
 import { ChatMessageBoxTemplateDirective } from './message-box.directive';
 import { MessageBoxComponent } from './message-box.component';
 import * as i0 from "@angular/core";
@@ -15,7 +15,7 @@ import * as i0 from "@angular/core";
  * Represents the Kendo UI Chat component for Angular.
  *
  * {% meta height:700 %}
- * {% embed_file echo/app.component.ts preview %}
+ * {% embed_file chat/echo/app.component.ts preview %}
  * {% embed_file shared/app.module.ts %}
  * {% embed_file shared/main.ts hidden %}
  * {% endmeta %}

package/chat/chat.module.d.ts

@@ -7,15 +7,15 @@ import * as i1 from "./chat.component";
 import * as i2 from "./l10n/custom-messages.component";
 import * as i3 from "./attachment-template.directive";
 import * as i4 from "./message-template.directive";
-import * as i5 from "../cards/hero-card.component";
+import * as i5 from "./cards/hero-card.component";
 import * as i6 from "./message-box.directive";
 import * as i7 from "./attachment.component";
-import * as i8 from "../common/focused-state.directive";
+import * as i8 from "./common/focused-state.directive";
 import * as i9 from "./l10n/localized-messages.directive";
 import * as i10 from "./message-attachments.component";
 import * as i11 from "./message.component";
 import * as i12 from "./message-list.component";
-import * as i13 from "../common/scroll-anchor.directive";
+import * as i13 from "./common/scroll-anchor.directive";
 import * as i14 from "./suggested-actions.component";
 import * as i15 from "./message-box.component";
 import * as i16 from "@progress/kendo-angular-buttons";

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { AfterViewInit, ElementRef, NgZone, OnDestroy, QueryList } from '@angular/core';
-import { Attachment, AttachmentLayout } from '../api/attachment.interface';
+import { Attachment, AttachmentLayout } from './api/attachment.interface';
 import { ChatItem } from './chat-item';
 import { AttachmentTemplateDirective } from './attachment-template.directive';
 import { SVGIcon } from '@progress/kendo-svg-icons';

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

@@ -3,8 +3,8 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { ElementRef, EventEmitter } from '@angular/core';
-import { User } from '../api/user.interface';
-import { MessageBoxType } from '../common/models/message-box-options';
+import { User } from './api/user.interface';
+import { MessageBoxType } from './common/models/message-box-options';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { ChatMessageBoxTemplateDirective } from './message-box.directive';
 import { SVGIcon } from '@progress/kendo-svg-icons';

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

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, OnInit, QueryList, Renderer2 } from '@angular/core';
-import { Action, ExecuteActionEvent, Message, User } from '../api';
+import { Action, ExecuteActionEvent, Message, User } from './api';
 import { ChatItem } from './chat-item';
 import { ViewItem } from './chat-view';
 import { AttachmentTemplateDirective } from './attachment-template.directive';

package/chat/message-template.directive.d.ts

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
  * refer to the article on [message templates]({% slug message_templates_chat %}).
  *
  * {% meta height:700 %}
- * {% embed_file messages/templates/app.component.ts preview %}
+ * {% embed_file chat/messages/templates/app.component.ts preview %}
  * {% embed_file shared/app.module.ts preview %}
  * {% embed_file shared/main.ts hidden %}
  * {% endmeta %}

package/chat/message.component.d.ts

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { ElementRef } from '@angular/core';
-import { Message } from '../api/message.interface';
+import { Message } from './api/message.interface';
 import { ChatItem } from './chat-item';
 import { MessageTemplateDirective } from './message-template.directive';
 import { IntlService } from '@progress/kendo-angular-intl';

package/chat/suggested-actions.component.d.ts

@@ -3,7 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { ElementRef, EventEmitter, QueryList } from '@angular/core';
-import { Action } from '../api/action.interface';
+import { Action } from './api/action.interface';
 import { ChatItem } from './chat-item';
 import * as i0 from "@angular/core";
 /**

package/conversational-ui.module.d.ts

@@ -0,0 +1,43 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as i0 from "@angular/core";
+import * as i1 from "./ai-prompt/aiprompt.module";
+import * as i2 from "./chat/chat.module";
+/**
+ * Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
+ * definition for the Conversational UI components.
+ *
+ * @example
+ *
+ * ```ts-no-run
+ * // Import the Conversational UI module
+ * import { ConversationalUIModule } from '@progress/kendo-angular-conversational-ui';
+ *
+ * // The browser platform with a compiler
+ * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+ *
+ * import { NgModule } from '@angular/core';
+ *
+ * // Import the app component
+ * import { AppComponent } from './app.component';
+ *
+ * // Define the app module
+ * _@NgModule({
+ *     declarations: [AppComponent], // declare app component
+ *     imports:      [BrowserModule, ConversationalUIModule], // import Conversational UI module
+ *     bootstrap:    [AppComponent]
+ * })
+ * export class AppModule {}
+ *
+ * // Compile and launch the module
+ * platformBrowserDynamic().bootstrapModule(AppModule);
+ *
+ * ```
+ */
+export declare class ConversationalUIModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConversationalUIModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ConversationalUIModule, never, never, [typeof i1.AIPromptModule, typeof i2.ChatModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ConversationalUIModule>;
+}

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

@@ -0,0 +1,348 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, ContentChild, ContentChildren, EventEmitter, HostBinding, Input, NgZone, Output, QueryList } from "@angular/core";
+import { sparklesIcon, commentIcon } from "@progress/kendo-svg-icons";
+import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
+import { validatePackage } from "@progress/kendo-licensing";
+import { BaseView } from "./views/base-view";
+import { packageMetadata } from "../package-metadata";
+import { Subscription } from "rxjs";
+import { AIPromptService } from "./common/aiprompt.service";
+import { AIPromptToolbarActionsDirective } from "./templates/toolbar-actions.template";
+import { ToolbarNavigationService } from "./common/toolbar-navigation.service";
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./common/aiprompt.service";
+import * as i3 from "./common/toolbar-navigation.service";
+import * as i4 from "@progress/kendo-angular-buttons";
+import * as i5 from "./localization/localized-messages.directive";
+import * as i6 from "@angular/common";
+import * as i7 from "./common/toolbar-focusable.directive";
+/**
+ * Represents the Kendo UI AIPrompt component for Angular
+ */
+export class AIPromptComponent {
+    constructor(localization, service, navigationService, ngZone) {
+        this.localization = localization;
+        this.service = service;
+        this.navigationService = navigationService;
+        this.ngZone = ngZone;
+        this.hostClasses = true;
+        /**
+         * The active view index of the AIPrompt component.
+         */
+        this.activeView = 0;
+        /**
+         * Fires when the `activeView` property of the component is updated.
+         * Used to provide a two-way binding for the `activeView` property.
+         */
+        this.activeViewChange = new EventEmitter();
+        /**
+         * Fires each time the user clicks the Prompt view Generate button or the Output view Retry button.
+         * To distinguish the source element, use the event's `isRetry` field.
+         */
+        this.promptRequest = new EventEmitter();
+        /**
+         * Fires each time the user clicks a Command view command. Exposes the selected command as event data.
+         */
+        this.commandExecute = new EventEmitter();
+        /**
+         * Fires each time the user clicks any Output view Copy button.
+         */
+        this.outputCopy = new EventEmitter();
+        /**
+         * Fires each time the user clicks a rating button in any Output view card.
+         */
+        this.outputRatingChange = new EventEmitter();
+        this.subs = new Subscription();
+        /**
+         * @hidden
+         */
+        this.sparklesIcon = sparklesIcon;
+        /**
+         * @hidden
+         */
+        this.outputIcon = commentIcon;
+        validatePackage(packageMetadata);
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this.subs.add(localization.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        }));
+    }
+    get dirAttr() {
+        return this.direction;
+    }
+    /**
+     * The collection of commands that will be rendered in the Command view.
+     */
+    set promptCommands(value) {
+        this.service.promptCommands = value;
+    }
+    /**
+     * The collection of suggestions that will be rendered in the Prompt view.
+     */
+    set promptSuggestions(value) {
+        this.service.promptSuggestions = value;
+    }
+    /**
+     * The collection of generated prompt outputs that will be rendered in the Output view.
+     */
+    set promptOutputs(value) {
+        this.service.promptOutputs = value;
+    }
+    /**
+     * Specifies if the rating buttons in each Output view card will be rendered.
+     * By default, rating buttons are not rendered.
+     *
+     * @default false
+     */
+    set showOutputRating(value) {
+        this.service.showOutputRating = value;
+    }
+    ngAfterViewInit() {
+        this.ngZone.runOutsideAngular(() => {
+            this.service.aiPrompt = this;
+            this.subs.add(this.service.requestEvent.subscribe(ev => this.promptRequest.emit(ev)));
+            this.subs.add(this.service.executeEvent.subscribe(ev => this.commandExecute.emit(ev)));
+            this.subs.add(this.service.outputCopyEvent.subscribe(ev => this.outputCopy.emit(ev)));
+            this.subs.add(this.service.outputRatingChangeEvent.subscribe(ev => this.outputRatingChange.emit(ev)));
+        });
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    /**
+     * Focuses the first focusable element in the AI Prompt.
+     */
+    focus() {
+        this.navigationService.focusFirst();
+    }
+    /**
+     * @hidden
+     */
+    get selectedView() {
+        return this.viewsArray[this.activeView];
+    }
+    /**
+     * @hidden
+     */
+    get viewsArray() {
+        return this.views?.toArray();
+    }
+    /**
+     * @hidden
+     */
+    viewChange(idx) {
+        if (idx !== this.activeView) {
+            this.activeView = idx;
+            this.activeViewChange.emit(idx);
+        }
+    }
+    /**
+     * @hidden
+     */
+    messageFor(text) {
+        return this.localization.get(text);
+    }
+    /**
+     * @hidden
+     */
+    get viewTemplate() {
+        return this.selectedView.viewType === 'custom' ? this.selectedView?.viewTemplate : this.selectedView?.template;
+    }
+    /**
+     * @hidden
+     */
+    handleGenerateOutput() {
+        const value = this.service.promptValue;
+        const eventArgs = {
+            prompt: value,
+            sender: this,
+            isRetry: false
+        };
+        this.promptRequest.emit(eventArgs);
+    }
+}
+AIPromptComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptComponent, deps: [{ token: i1.LocalizationService }, { token: i2.AIPromptService }, { token: i3.ToolbarNavigationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+AIPromptComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AIPromptComponent, selector: "kendo-aiprompt", inputs: { activeView: "activeView", promptCommands: "promptCommands", promptSuggestions: "promptSuggestions", promptOutputs: "promptOutputs", showOutputRating: "showOutputRating" }, outputs: { activeViewChange: "activeViewChange", promptRequest: "promptRequest", commandExecute: "commandExecute", outputCopy: "outputCopy", outputRatingChange: "outputRatingChange" }, host: { properties: { "class.k-prompt": "this.hostClasses", "attr.dir": "this.dirAttr" } }, providers: [
+        LocalizationService,
+        AIPromptService,
+        ToolbarNavigationService,
+        {
+            provide: L10N_PREFIX,
+            useValue: 'kendo.aiprompt'
+        }
+    ], queries: [{ propertyName: "toolbarActionsTemplate", first: true, predicate: AIPromptToolbarActionsDirective, descendants: true }, { propertyName: "views", predicate: BaseView }], exportAs: ["kendoAIPrompt"], 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 textarea."
+            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">
+        </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>
+        <div class="k-prompt-content">
+            <div class="k-prompt-view">
+                <ng-container *ngTemplateOutlet="viewTemplate">
+                </ng-container>
+            </div>
+        </div>
+        <div class="k-prompt-footer" *ngIf="selectedView.viewType === 'prompt'">
+            <div class="k-actions k-actions-start k-actions-horizontal k-prompt-actions">
+                <button
+                    kendoButton
+                    type="button"
+                    themeColor="primary"
+                    rounded="full"
+                    [svgIcon]="sparklesIcon"
+                    icon="sparkles"
+                    (click)="handleGenerateOutput()">{{messageFor('generateOutput')}}</button>
+            </div>
+        </div>
+    `, isInline: true, components: [{ type: i4.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i5.LocalizedMessagesDirective, selector: "[kendoAIPromptLocalizedMessages]" }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7.AIPromptToolbarFocusableDirective, selector: "[kendoAIPromptToolbarFocusable]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoAIPrompt',
+                    selector: 'kendo-aiprompt',
+                    providers: [
+                        LocalizationService,
+                        AIPromptService,
+                        ToolbarNavigationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.aiprompt'
+                        }
+                    ],
+                    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 textarea."
+            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">
+        </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>
+        <div class="k-prompt-content">
+            <div class="k-prompt-view">
+                <ng-container *ngTemplateOutlet="viewTemplate">
+                </ng-container>
+            </div>
+        </div>
+        <div class="k-prompt-footer" *ngIf="selectedView.viewType === 'prompt'">
+            <div class="k-actions k-actions-start k-actions-horizontal k-prompt-actions">
+                <button
+                    kendoButton
+                    type="button"
+                    themeColor="primary"
+                    rounded="full"
+                    [svgIcon]="sparklesIcon"
+                    icon="sparkles"
+                    (click)="handleGenerateOutput()">{{messageFor('generateOutput')}}</button>
+            </div>
+        </div>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.AIPromptService }, { type: i3.ToolbarNavigationService }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-prompt']
+            }], dirAttr: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], views: [{
+                type: ContentChildren,
+                args: [BaseView]
+            }], toolbarActionsTemplate: [{
+                type: ContentChild,
+                args: [AIPromptToolbarActionsDirective]
+            }], activeView: [{
+                type: Input
+            }], promptCommands: [{
+                type: Input
+            }], promptSuggestions: [{
+                type: Input
+            }], promptOutputs: [{
+                type: Input
+            }], showOutputRating: [{
+                type: Input
+            }], activeViewChange: [{
+                type: Output
+            }], promptRequest: [{
+                type: Output
+            }], commandExecute: [{
+                type: Output
+            }], outputCopy: [{
+                type: Output
+            }], outputRatingChange: [{
+                type: Output
+            }] } });