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

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

@@ -3,20 +3,25 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Directive, Optional, isDevMode, EventEmitter, forwardRef, Component, Input, Output, HostBinding, ViewChildren, ElementRef, ViewChild, HostListener, ContentChild, NgModule } from '@angular/core';
+import { Directive, Optional, isDevMode, EventEmitter, forwardRef, Component, Input, Output, HostBinding, ViewChildren, ElementRef, ViewChild, HostListener, ContentChild, InjectionToken, Inject, Injectable, ContentChildren, NgModule } from '@angular/core';
 import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i6 from '@progress/kendo-angular-common';
-import { Keys, ResizeSensorModule } from '@progress/kendo-angular-common';
-import { fromEvent, Subscription } from 'rxjs';
+import { Keys, isPresent, guid, focusableSelector, ResizeSensorModule } from '@progress/kendo-angular-common';
+import { fromEvent, Subscription, Subject } from 'rxjs';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1 from '@progress/kendo-angular-intl';
 import { debounceTime } from 'rxjs/operators';
-import { chevronLeftIcon, chevronRightIcon, paperPlaneIcon } from '@progress/kendo-svg-icons';
-import * as i1$2 from '@progress/kendo-angular-buttons';
-import { ButtonModule } from '@progress/kendo-angular-buttons';
+import { chevronLeftIcon, chevronRightIcon, paperPlaneIcon, sparklesIcon, commentIcon, moreHorizontalIcon, chevronUpIcon, chevronDownIcon, copyIcon, arrowRotateCwIcon, thumbUpOutlineIcon, thumbDownOutlineIcon, thumbUpIcon, thumbDownIcon } from '@progress/kendo-svg-icons';
+import * as i4 from '@progress/kendo-angular-buttons';
+import { ButtonsModule, ButtonModule } from '@progress/kendo-angular-buttons';
+import { IconsModule } from '@progress/kendo-angular-icons';
+import * as i3 from '@progress/kendo-angular-inputs';
+import { InputsModule } from '@progress/kendo-angular-inputs';
+import * as i3$1 from '@progress/kendo-angular-layout';
+import { LayoutModule } from '@progress/kendo-angular-layout';
 
 /**
  * Defines a template that will be used for displaying message attachments. To define an attachment
@@ -119,8 +124,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-conversational-ui',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1705406641,
-    version: '14.4.0-develop.9',
+    publishDate: 1706543943,
+    version: '15.0.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -735,7 +740,7 @@ MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             icon="chevron-right"
         >
         </button>
-    `, isInline: true, components: [{ type: i1$2.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"] }, { type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, 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"] }, { type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageAttachmentsComponent, decorators: [{
             type: Component,
             args: [{
@@ -1278,7 +1283,7 @@ MessageBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
     </ng-container>
 
     <ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
-`, isInline: true, components: [{ type: i1$2.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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusedStateDirective, selector: "[kendoChatFocusedState]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+`, 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusedStateDirective, selector: "[kendoChatFocusedState]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageBoxComponent, decorators: [{
             type: Component,
             args: [{
@@ -1351,11 +1356,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * @hidden
  */
-class Messages extends ComponentMessages {
+class Messages$1 extends ComponentMessages {
 }
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, selector: "kendoConversationalUIMessages", inputs: { messagePlaceholder: "messagePlaceholder", send: "send", messageListLabel: "messageListLabel", messageBoxInputLabel: "messageBoxInputLabel", messageAttachmentLeftArrow: "messageAttachmentLeftArrow", messageAttachmentRightArrow: "messageAttachmentRightArrow", messageAvatarAlt: "messageAvatarAlt" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, decorators: [{
+Messages$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages$1, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages$1.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages$1, selector: "kendoConversationalUIMessages", inputs: { messagePlaceholder: "messagePlaceholder", send: "send", messageListLabel: "messageListLabel", messageBoxInputLabel: "messageBoxInputLabel", messageAttachmentLeftArrow: "messageAttachmentLeftArrow", messageAttachmentRightArrow: "messageAttachmentRightArrow", messageAvatarAlt: "messageAvatarAlt" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages$1, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1381,26 +1386,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /**
  * @hidden
  */
-class LocalizedMessagesDirective extends Messages {
+class LocalizedMessagesDirective$1 extends Messages$1 {
     constructor(service) {
         super();
         this.service = service;
     }
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LocalizedMessagesDirective, selector: "[kendoChatLocalizedMessages]", providers: [
+LocalizedMessagesDirective$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective$1, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective$1.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LocalizedMessagesDirective$1, selector: "[kendoChatLocalizedMessages]", providers: [
         {
-            provide: Messages,
-            useExisting: forwardRef(() => LocalizedMessagesDirective)
+            provide: Messages$1,
+            useExisting: forwardRef(() => LocalizedMessagesDirective$1)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective$1, decorators: [{
             type: Directive,
             args: [{
                     providers: [
                         {
-                            provide: Messages,
-                            useExisting: forwardRef(() => LocalizedMessagesDirective)
+                            provide: Messages$1,
+                            useExisting: forwardRef(() => LocalizedMessagesDirective$1)
                         }
                     ],
                     selector: '[kendoChatLocalizedMessages]'
@@ -1636,7 +1641,7 @@ ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         (sendMessage)="sendMessage.emit($event)"
         >
         </kendo-message-box>
-    `, isInline: true, components: [{ type: MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "messageTemplate", "localization", "user"], outputs: ["executeAction", "navigate", "resize"] }, { type: MessageBoxComponent, selector: "kendo-message-box", inputs: ["user", "autoScroll", "type", "localization", "messageBoxTemplate"], outputs: ["sendMessage"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoChatLocalizedMessages]" }, { type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll"], outputs: ["autoScrollChange"], exportAs: ["scrollAnchor"] }] });
+    `, isInline: true, components: [{ type: MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "messageTemplate", "localization", "user"], outputs: ["executeAction", "navigate", "resize"] }, { type: MessageBoxComponent, selector: "kendo-message-box", inputs: ["user", "autoScroll", "type", "localization", "messageBoxTemplate"], outputs: ["sendMessage"] }], directives: [{ type: LocalizedMessagesDirective$1, selector: "[kendoChatLocalizedMessages]" }, { type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll"], outputs: ["autoScrollChange"], exportAs: ["scrollAnchor"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
             args: [{
@@ -1740,176 +1745,1390 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 args: ['messageList', { static: true }]
             }] } });
 
-// eslint-disable no-forward-ref
 /**
- * Custom component messages override default component messages
- * ([see example]({% slug globalization_chat %}#toc-custom-messages)).
+ * @hidden
  */
-class CustomMessagesComponent extends Messages {
-    constructor(service) {
-        super();
+const MY_TOKEN = new InjectionToken('COMMAND_TOKEN');
+/**
+ * @hidden
+ */
+const DEFAULT_SVG_ICONS = {
+    prompt: sparklesIcon,
+    output: commentIcon,
+    command: moreHorizontalIcon
+};
+/**
+ * @hidden
+ */
+const DEFAULT_ICONS = {
+    prompt: 'sparkles',
+    output: 'comment',
+    command: 'more-horizontal'
+};
+
+/**
+ * @hidden
+ */
+class BaseView {
+    constructor(viewType, localization) {
+        this.viewType = viewType;
+        this.localization = localization;
+        this.hostClasses = true;
+        if (this.viewType !== 'custom') {
+            this.icon = DEFAULT_ICONS[this.viewType];
+            this.svgIcon = DEFAULT_SVG_ICONS[this.viewType];
+        }
+    }
+    /**
+     * The text of the ToolBar button corresponding to the view.
+     */
+    set buttonText(value) {
+        this._buttonText = value;
+    }
+    get buttonText() {
+        return isPresent(this._buttonText) ?
+            this._buttonText :
+            this.messageFor(`${this.viewType}View`);
+    }
+    /**
+    * The font icon of the ToolBar button corresponding to the view.
+    */
+    set icon(value) {
+        if (isPresent(value)) {
+            this._icon = value;
+        }
+        else {
+            this.icon = DEFAULT_ICONS[this.viewType];
+        }
+    }
+    get icon() {
+        return this._icon;
+    }
+    /**
+    * The SVG icon of the ToolBar button corresponding to the view.
+    */
+    set svgIcon(value) {
+        if (isPresent(value)) {
+            this._svgIcon = value;
+        }
+        else {
+            this.svgIcon = DEFAULT_SVG_ICONS[this.viewType];
+        }
+    }
+    get svgIcon() {
+        return this._svgIcon;
+    }
+    /**
+     * @hidden
+     */
+    messageFor(text) {
+        return this.localization.get(text);
+    }
+}
+BaseView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaseView, deps: [{ token: MY_TOKEN }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+BaseView.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: BaseView, inputs: { buttonText: "buttonText", icon: "icon", svgIcon: "svgIcon" }, host: { properties: { "class.k-prompt-view": "this.hostClasses" } }, viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BaseView, decorators: [{
+            type: Directive
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MY_TOKEN]
+                    }] }, { type: i1$1.LocalizationService }];
+    }, propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-prompt-view']
+            }], template: [{
+                type: ViewChild,
+                args: ['content', { static: true }]
+            }], buttonText: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], svgIcon: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class AIPromptService {
+    constructor() {
+        this.promptValue = '';
+        this.showOutputRating = false;
+        this.requestEvent = new Subject();
+        this.executeEvent = new Subject();
+        this.outputCopyEvent = new Subject();
+        this.outputRatingChangeEvent = new Subject();
+    }
+    getFlattenPromptCommands(commands = this.promptCommands) {
+        let newArr = [];
+        commands.forEach(c => {
+            if (c.hasOwnProperty('children')) {
+                const childrenArr = c.children;
+                newArr = newArr.concat(childrenArr);
+                if (childrenArr.length > 0) {
+                    this.getFlattenPromptCommands(childrenArr);
+                }
+            }
+        });
+        return newArr.concat(this.promptCommands);
+    }
+}
+AIPromptService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AIPromptService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptService, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * The component for rendering the **Prompt** view.
+ */
+class PromptViewComponent extends BaseView {
+    constructor(localization, service) {
+        super('prompt', localization);
         this.service = service;
+        /**
+         * @hidden
+         */
+        this.showSuggestions = true;
+        /**
+         * @hidden
+         */
+        this.contentId = `k-prompt-suggestions-${guid()}`;
     }
-    get override() {
-        return true;
+    /**
+     * @hidden
+     */
+    get suggestionsIcons() {
+        return this.showSuggestions ?
+            { font: 'chevron-up', svg: chevronUpIcon } :
+            { font: 'chevron-down', svg: chevronDownIcon };
+    }
+    /**
+     * @hidden
+     */
+    get promptSuggestions() {
+        return this.service.promptSuggestions;
+    }
+    /**
+     *
+     * @hidden
+     */
+    set textAreaValue(value) {
+        this.service.promptValue = value;
+    }
+    ;
+    get textAreaValue() {
+        return this.service.promptValue;
+    }
+    /**
+     * @hidden
+     */
+    suggestionClick(suggestion) {
+        this.textAreaValue = this.service.promptValue = suggestion;
     }
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CustomMessagesComponent, selector: "kendo-chat-messages", providers: [
+PromptViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PromptViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
+PromptViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PromptViewComponent, selector: "kendo-aiprompt-prompt-view", providers: [
         {
-            provide: Messages,
-            useExisting: forwardRef(() => CustomMessagesComponent)
+            provide: BaseView,
+            useExisting: forwardRef(() => PromptViewComponent)
         }
-    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+    ], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #content>
+            <kendo-textarea
+                [placeholder]="messageFor('promptPlaceholder')"
+                [rows]="1"
+                [(value)]="textAreaValue">
+            </kendo-textarea>
+            <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>
+                <div *ngIf="showSuggestions"
+                    class="k-prompt-expander-content"
+                    role="list"
+                    [attr.id]="contentId">
+                    <div *ngFor="let suggestion of promptSuggestions"
+                        class="k-prompt-suggestion"
+                        role="listitem"
+                        (click)="suggestionClick(suggestion)">
+                        {{suggestion}}
+                    </div>
+                </div>
+            </div>
+        </ng-template>
+    `, isInline: true, components: [{ type: i3.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "adornmentsOrientation", "rows", "cols", "maxlength", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PromptViewComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-aiprompt-prompt-view',
                     providers: [
                         {
-                            provide: Messages,
-                            useExisting: forwardRef(() => CustomMessagesComponent)
+                            provide: BaseView,
+                            useExisting: forwardRef(() => PromptViewComponent)
                         }
                     ],
-                    selector: 'kendo-chat-messages',
-                    template: ``
+                    template: `
+        <ng-template #content>
+            <kendo-textarea
+                [placeholder]="messageFor('promptPlaceholder')"
+                [rows]="1"
+                [(value)]="textAreaValue">
+            </kendo-textarea>
+            <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>
+                <div *ngIf="showSuggestions"
+                    class="k-prompt-expander-content"
+                    role="list"
+                    [attr.id]="contentId">
+                    <div *ngFor="let suggestion of promptSuggestions"
+                        class="k-prompt-suggestion"
+                        role="listitem"
+                        (click)="suggestionClick(suggestion)">
+                        {{suggestion}}
+                    </div>
+                </div>
+            </div>
+        </ng-template>
+    `
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; } });
 
 /**
- * Represents a Hero Card component ([see example]({% slug dialogflow_chat %})).
- * Hero cards host a single large image and action buttons with text content.
+ * @hidden
  */
-class HeroCardComponent {
-    constructor() {
-        this.cssClass = true;
-        /**
-         * Fires when the user clicks a button.
-         */
-        this.executeAction = new EventEmitter();
+class AIPromptOutputCardComponent {
+    constructor(localization, service) {
+        this.localization = localization;
+        this.service = service;
+        this.hostClass = true;
+        this.listItemRole = 'listitem';
+        this.tabIndex = 0;
+        this.ariaKeyShortcuts = 'Enter';
+        this.copyIcon = copyIcon;
+        this.retryIcon = arrowRotateCwIcon;
+        this.positiveRatingIcon = thumbUpOutlineIcon;
+        this.negativeRatingIcon = thumbDownOutlineIcon;
+        this.titleId = `k-output-card-${guid()}`;
+    }
+    get ariaDescribedBy() {
+        return this.titleId;
+    }
+    messageFor(text) {
+        return this.localization.get(text);
+    }
+    get showRating() {
+        return this.service.showOutputRating;
+    }
+    get outputTitle() {
+        if (isPresent(this.promptOutput.title)) {
+            return this.promptOutput.title;
+        }
+        else {
+            const titleMessage = this.promptOutput.isRetry ? 'outputRetryTitle' : 'outputTitle';
+            return this.messageFor(titleMessage);
+        }
     }
-    onClick(action) {
-        this.executeAction.next(action);
+    handleRetry() {
+        if (this.promptOutput.commandId) {
+            const eventArgs = {
+                command: this.service.getFlattenPromptCommands().find(c => c.id === this.promptOutput.commandId),
+                sender: this.service.aiPrompt,
+                isRetry: true
+            };
+            this.service.executeEvent.next(eventArgs);
+        }
+        else {
+            const eventArgs = {
+                prompt: this.promptOutput.prompt,
+                sender: this.service.aiPrompt,
+                isRetry: true
+            };
+            this.service.requestEvent.next(eventArgs);
+        }
+    }
+    handleCopy() {
+        navigator.clipboard.writeText(this.promptOutput.output);
+        this.service.outputCopyEvent.next(this.promptOutput);
+    }
+    handleRating(ratingType) {
+        const eventArgs = {
+            promptOutput: this.promptOutput,
+            rating: ratingType
+        };
+        this.service.outputRatingChangeEvent.next(eventArgs);
+        if (ratingType === 'positive') {
+            this.positiveRatingIcon = thumbUpIcon;
+            this.negativeRatingIcon = thumbDownOutlineIcon;
+        }
+        else {
+            this.negativeRatingIcon = thumbDownIcon;
+            this.positiveRatingIcon = thumbUpOutlineIcon;
+        }
     }
 }
-HeroCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeroCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HeroCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HeroCardComponent, 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" />
+AIPromptOutputCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptOutputCardComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
+AIPromptOutputCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AIPromptOutputCardComponent, 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>
         <div class="k-card-body">
-        <h5 class="k-card-title" *ngIf="title">
-            {{ title }}
-        </h5>
-        <h6 class="k-card-subtitle" *ngIf="subtitle">
-            {{ subtitle }}
-        </h6>
+            <p>{{promptOutput.output}}</p>
         </div>
-        <div class="k-card-actions k-card-actions-vertical">
-        <span class="k-card-action"
-                *ngFor="let act of actions"
-        >
-            <button
-                kendoButton fillMode="flat"
-                (click)="onClick(act)"
-            >
-                    {{ act.title }}
-            </button>
-        </span>
+        <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>
+            <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>
         </div>
-    `, isInline: true, components: [{ type: i1$2.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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeroCardComponent, decorators: [{
+    `, 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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptOutputCardComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-chat-hero-card',
+                    selector: '[kendoAIPromptOutputCard]',
                     template: `
-        <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />
+        <div class="k-card-header">
+            <div
+                class="k-card-title"
+                [attr.id]="titleId">{{outputTitle}}
+            </div>
+            <div class="k-card-subtitle">{{promptOutput.prompt}}</div>
+        </div>
         <div class="k-card-body">
-        <h5 class="k-card-title" *ngIf="title">
-            {{ title }}
-        </h5>
-        <h6 class="k-card-subtitle" *ngIf="subtitle">
-            {{ subtitle }}
-        </h6>
+            <p>{{promptOutput.output}}</p>
         </div>
-        <div class="k-card-actions k-card-actions-vertical">
-        <span class="k-card-action"
-                *ngFor="let act of actions"
-        >
-            <button
-                kendoButton fillMode="flat"
-                (click)="onClick(act)"
-            >
-                    {{ act.title }}
-            </button>
-        </span>
+        <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>
+            <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>
         </div>
     `
                 }]
-        }], propDecorators: { imageUrl: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], subtitle: [{
-                type: Input
-            }], actions: [{
-                type: Input
-            }], cssClass: [{
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-card']
-            }], executeAction: [{
-                type: Output
+            }], listItemRole: [{
+                type: HostBinding,
+                args: ['attr.role']
+            }], tabIndex: [{
+                type: HostBinding,
+                args: ['attr.tabindex']
+            }], ariaDescribedBy: [{
+                type: HostBinding,
+                args: ['attr.aria-describedby']
+            }], ariaKeyShortcuts: [{
+                type: HostBinding,
+                args: ['attr.aria-keyshortcuts']
+            }], promptOutput: [{
+                type: Input
             }] } });
 
-const PUBLIC_DIRECTIVES = [
-    ChatComponent,
-    CustomMessagesComponent,
-    AttachmentTemplateDirective,
-    MessageTemplateDirective,
-    HeroCardComponent,
-    ChatMessageBoxTemplateDirective
-];
-const PRIVATE_DIRECTIVES = [
-    AttachmentComponent,
-    FocusedStateDirective,
-    LocalizedMessagesDirective,
-    MessageAttachmentsComponent,
-    MessageComponent,
-    MessageListComponent,
-    MessageTemplateDirective,
-    ScrollAnchorDirective,
-    SuggestedActionsComponent,
-    MessageBoxComponent
-];
 /**
- * The [NgModule](link:site.data.urls.angular['ngmodules']) for the Chat component.
- *
- * @example
- * ```ts-no-run
- * import { NgModule } from '@angular/core';
- * import { Component } from '@angular/core';
- * import { BrowserModule } from '@angular/platform-browser';
- *
- * import { ChatModule } from '@progress/kendo-angular-conversational-ui';
- * import { AppComponent }   from './app.component';
- *
- * _@NgModule({
- *   imports:      [ BrowserModule, ChatModule ],
- *   declarations: [ AppComponent ],
- *   bootstrap:    [ AppComponent ]
- * })
- *
- * export class AppModule { }
- * ```
+ * The component for rendering the **Output** view.
  */
-class ChatModule {
+class OutputViewComponent extends BaseView {
+    constructor(localization, service) {
+        super('output', localization);
+        this.service = service;
+    }
+    /**
+     * @hidden
+     */
+    get promptOutputs() {
+        return this.service.promptOutputs;
+    }
 }
-ChatModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatModule, declarations: [ChatComponent,
+OutputViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: OutputViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
+OutputViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: OutputViewComponent, 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">
+                <div *ngFor="let output of promptOutputs"
+                    kendoAIPromptOutputCard
+                    [promptOutput]="output">
+                </div>
+            </div>
+        </ng-template>
+    `, isInline: true, components: [{ type: AIPromptOutputCardComponent, selector: "[kendoAIPromptOutputCard]", inputs: ["promptOutput"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: OutputViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-aiprompt-output-view',
+                    providers: [{
+                            provide: BaseView,
+                            useExisting: forwardRef(() => OutputViewComponent)
+                        }],
+                    template: `
+        <ng-template #content>
+            <div
+                class="k-card-list"
+                role="list">
+                <div *ngFor="let output of promptOutputs"
+                    kendoAIPromptOutputCard
+                    [promptOutput]="output">
+                </div>
+            </div>
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; } });
+
+/**
+ * Represents a template that allows you to define additional ToolBar actions.
+ * The actions will be rendered right after all views' ToolBar buttons.
+ * To define the template, nest an `<ng-template>` tag
+ * with the `kendoAIPromptToolbarActionsTemplate` directive inside the `<kendo-aiprompt>` tag.
+ */
+class AIPromptToolbarActionsDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+AIPromptToolbarActionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptToolbarActionsDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+AIPromptToolbarActionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: AIPromptToolbarActionsDirective, selector: "[kendoAIPromptToolbarActionsTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptToolbarActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoAIPromptToolbarActionsTemplate]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+
+/**
+ * @hidden
+ */
+class ToolbarNavigationService {
+    constructor(localizationService) {
+        this.localizationService = localizationService;
+        this.focusableElements = [];
+        this.currentFocusedIndex = 0;
+    }
+    register(tool) {
+        if (!this.focusableElements.some(el => el === tool)) {
+            this.focusableElements.push(tool);
+        }
+    }
+    unregister(tool) {
+        this.currentFocusedIndex = 0;
+        this.focusableElements = this.focusableElements.filter(el => el !== tool);
+    }
+    isActive(focusable) {
+        return this.focusableElements[this.currentFocusedIndex] === focusable;
+    }
+    setActiveIndex(tool) {
+        this.currentFocusedIndex = Math.max(this.focusableElements.indexOf(tool), 0);
+    }
+    move(direction) {
+        let delta = direction === 'right' ? 1 : -1;
+        if (this.localizationService.rtl) {
+            delta = -delta;
+        }
+        this.currentFocusedIndex += delta;
+        if (this.currentFocusedIndex < 0) {
+            this.currentFocusedIndex = this.focusableElements.length - 1;
+        }
+        else if (this.currentFocusedIndex >= this.focusableElements.length) {
+            this.currentFocusedIndex = 0;
+        }
+        this.focusableElements[this.currentFocusedIndex].activate();
+    }
+    focusFirst() {
+        this.focusableElements[this.currentFocusedIndex].activate();
+    }
+}
+ToolbarNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationService, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+ToolbarNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
+
+/**
+ * @hidden
+ */
+class Messages extends ComponentMessages {
+}
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: Messages, inputs: { promptView: "promptView", outputView: "outputView", generateOutput: "generateOutput", promptPlaceholder: "promptPlaceholder", copyOutput: "copyOutput", retryGeneration: "retryGeneration", outputTitle: "outputTitle", outputRetryTitle: "outputRetryTitle", promptSuggestions: "promptSuggestions" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: Messages, decorators: [{
+            type: Directive
+        }], propDecorators: { promptView: [{
+                type: Input
+            }], outputView: [{
+                type: Input
+            }], generateOutput: [{
+                type: Input
+            }], promptPlaceholder: [{
+                type: Input
+            }], copyOutput: [{
+                type: Input
+            }], retryGeneration: [{
+                type: Input
+            }], outputTitle: [{
+                type: Input
+            }], outputRetryTitle: [{
+                type: Input
+            }], promptSuggestions: [{
+                type: Input
+            }] } });
+
+/**
+ * @hidden
+ */
+class LocalizedMessagesDirective extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+}
+LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: LocalizedMessagesDirective, selector: "[kendoAIPromptLocalizedMessages]", providers: [
+        {
+            provide: Messages,
+            useExisting: forwardRef(() => LocalizedMessagesDirective)
+        }
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => LocalizedMessagesDirective)
+                        }
+                    ],
+                    selector: '[kendoAIPromptLocalizedMessages]'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
+
+/**
+ * @hidden
+ */
+class AIPromptToolbarFocusableDirective {
+    constructor(host, navigationService, renderer) {
+        this.host = host;
+        this.navigationService = navigationService;
+        this.renderer = renderer;
+        this.keyDownHandler = (e) => {
+            const targetsSelf = e.target === this.element;
+            const isLeftArrow = e.keyCode === Keys.ArrowLeft;
+            const isRightArrow = e.keyCode === Keys.ArrowRight;
+            const isArrow = isLeftArrow || isRightArrow;
+            if (!targetsSelf || !isArrow) {
+                return;
+            }
+            this.renderer.setAttribute(this.element, 'tabindex', '-1');
+            this.element.querySelectorAll(focusableSelector).forEach(el => {
+                this.renderer.setAttribute(el, 'tabindex', '-1');
+            });
+            if (isRightArrow) {
+                this.navigationService.move('right');
+            }
+            else if (isLeftArrow) {
+                this.navigationService.move('left');
+            }
+        };
+        this.clickHandler = () => {
+            this.navigationService.setActiveIndex(this);
+        };
+        navigationService.register(this);
+    }
+    get element() {
+        return this.host.nativeElement;
+    }
+    ngAfterViewInit() {
+        this.renderer.setAttribute(this.element, 'tabindex', this.navigationService.isActive(this) ? '0' : '-1');
+        this.element.addEventListener('keydown', this.keyDownHandler, { capture: true });
+        this.element.addEventListener('click', this.clickHandler, { capture: true });
+    }
+    ngOnDestroy() {
+        this.navigationService.unregister(this);
+        this.element.removeEventListener('keydown', this.keyDownHandler, { capture: true });
+        this.element.removeEventListener('click', this.clickHandler, { capture: true });
+    }
+    activate() {
+        this.renderer.setAttribute(this.element, 'tabindex', '0');
+        this.element.focus();
+    }
+}
+AIPromptToolbarFocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptToolbarFocusableDirective, deps: [{ token: i0.ElementRef }, { token: ToolbarNavigationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+AIPromptToolbarFocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: AIPromptToolbarFocusableDirective, selector: "[kendoAIPromptToolbarFocusable]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptToolbarFocusableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoAIPromptToolbarFocusable]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ToolbarNavigationService }, { type: i0.Renderer2 }]; } });
+
+/**
+ * Represents the Kendo UI AIPrompt component for Angular
+ */
+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() {
+        var _a;
+        return (_a = this.views) === null || _a === void 0 ? void 0 : _a.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() {
+        var _a, _b;
+        return this.selectedView.viewType === 'custom' ? (_a = this.selectedView) === null || _a === void 0 ? void 0 : _a.viewTemplate : (_b = this.selectedView) === null || _b === void 0 ? void 0 : _b.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$1.LocalizationService }, { token: AIPromptService }, { token: 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: LocalizedMessagesDirective, selector: "[kendoAIPromptLocalizedMessages]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: AIPromptToolbarFocusableDirective, selector: "[kendoAIPromptToolbarFocusable]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.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$1.LocalizationService }, { type: AIPromptService }, { type: 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
+            }] } });
+
+/**
+ * The component for rendering the **Command** view.
+ */
+class CommandViewComponent extends BaseView {
+    constructor(localization, service) {
+        super('command', localization);
+        this.service = service;
+        this.panelBarItems = [];
+    }
+    ngOnInit() {
+        this.panelBarItems = this.getPanelBarItems(this.service.promptCommands);
+    }
+    itemClickHandler(ev) {
+        if (ev.item.children) {
+            return;
+        }
+        const selectedCommand = this.service.getFlattenPromptCommands().find(c => c.id == ev.item.id);
+        if (selectedCommand) {
+            const eventArgs = {
+                command: selectedCommand,
+                sender: this.service.aiPrompt,
+                isRetry: false
+            };
+            this.service.executeEvent.next(eventArgs);
+        }
+    }
+    getPanelBarItems(commands) {
+        return commands.map(c => ({
+            title: c.text,
+            id: c.id,
+            icon: c.icon,
+            svgIcon: c.svgIcon,
+            children: c.children ? this.getPanelBarItems(c.children) : null
+        }));
+    }
+}
+CommandViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CommandViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
+CommandViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CommandViewComponent, selector: "kendo-aiprompt-command-view", providers: [{
+            provide: BaseView,
+            useExisting: forwardRef(() => CommandViewComponent)
+        }], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #content>
+            <kendo-panelbar
+                [items]="panelBarItems"
+                [animate]="false"
+                [selectable]="false"
+                (itemClick)="itemClickHandler($event)"
+            ></kendo-panelbar>
+        </ng-template>
+    `, isInline: true, components: [{ type: i3$1.PanelBarComponent, selector: "kendo-panelbar", inputs: ["expandMode", "selectable", "animate", "height", "keepItemContent", "items"], outputs: ["stateChange", "select", "expand", "collapse", "itemClick"], exportAs: ["kendoPanelbar"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CommandViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-aiprompt-command-view',
+                    providers: [{
+                            provide: BaseView,
+                            useExisting: forwardRef(() => CommandViewComponent)
+                        }],
+                    template: `
+        <ng-template #content>
+            <kendo-panelbar
+                [items]="panelBarItems"
+                [animate]="false"
+                [selectable]="false"
+                (itemClick)="itemClickHandler($event)"
+            ></kendo-panelbar>
+        </ng-template>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; } });
+
+/**
+ * Custom component messages override default component messages.
+ */
+class AIPromptCustomMessagesComponent extends Messages {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+}
+AIPromptCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+AIPromptCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AIPromptCustomMessagesComponent, selector: "kendo-aiprompt-messages", providers: [
+        {
+            provide: Messages,
+            useExisting: forwardRef(() => AIPromptCustomMessagesComponent)
+        }
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptCustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => AIPromptCustomMessagesComponent)
+                        }
+                    ],
+                    selector: 'kendo-aiprompt-messages',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
+
+/**
+ * The component for rendering a **Custom** view.
+ */
+class CustomViewComponent extends BaseView {
+    constructor(localization) {
+        super('custom', localization);
+    }
+}
+CustomViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomViewComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CustomViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CustomViewComponent, selector: "kendo-aiprompt-custom-view", inputs: { viewTemplate: "viewTemplate" }, providers: [{
+            provide: BaseView,
+            useExisting: forwardRef(() => CustomViewComponent)
+        }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-aiprompt-custom-view',
+                    providers: [{
+                            provide: BaseView,
+                            useExisting: forwardRef(() => CustomViewComponent)
+                        }],
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; }, propDecorators: { viewTemplate: [{
+                type: Input
+            }] } });
+
+const PUBLIC_DIRECTIVES$1 = [
+    AIPromptComponent,
+    PromptViewComponent,
+    OutputViewComponent,
+    CommandViewComponent,
+    CustomViewComponent,
+    AIPromptCustomMessagesComponent,
+    AIPromptToolbarActionsDirective,
+    AIPromptToolbarFocusableDirective
+];
+const PRIVATE_DIRECTIVES$1 = [
+    LocalizedMessagesDirective,
+    AIPromptOutputCardComponent
+];
+class AIPromptModule {
+}
+AIPromptModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AIPromptModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptModule, declarations: [AIPromptComponent,
+        PromptViewComponent,
+        OutputViewComponent,
+        CommandViewComponent,
+        CustomViewComponent,
+        AIPromptCustomMessagesComponent,
+        AIPromptToolbarActionsDirective,
+        AIPromptToolbarFocusableDirective, LocalizedMessagesDirective,
+        AIPromptOutputCardComponent], imports: [CommonModule,
+        ButtonsModule,
+        IconsModule,
+        InputsModule,
+        LayoutModule], exports: [AIPromptComponent,
+        PromptViewComponent,
+        OutputViewComponent,
+        CommandViewComponent,
+        CustomViewComponent,
+        AIPromptCustomMessagesComponent,
+        AIPromptToolbarActionsDirective,
+        AIPromptToolbarFocusableDirective] });
+AIPromptModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptModule, imports: [[
+            CommonModule,
+            ButtonsModule,
+            IconsModule,
+            InputsModule,
+            LayoutModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...PUBLIC_DIRECTIVES$1, ...PRIVATE_DIRECTIVES$1],
+                    exports: [...PUBLIC_DIRECTIVES$1],
+                    imports: [
+                        CommonModule,
+                        ButtonsModule,
+                        IconsModule,
+                        InputsModule,
+                        LayoutModule
+                    ]
+                }]
+        }] });
+
+// eslint-disable no-forward-ref
+/**
+ * Custom component messages override default component messages
+ * ([see example]({% slug globalization_chat %}#toc-custom-messages)).
+ */
+class CustomMessagesComponent extends Messages$1 {
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+}
+CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CustomMessagesComponent, selector: "kendo-chat-messages", providers: [
+        {
+            provide: Messages$1,
+            useExisting: forwardRef(() => CustomMessagesComponent)
+        }
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages$1,
+                            useExisting: forwardRef(() => CustomMessagesComponent)
+                        }
+                    ],
+                    selector: 'kendo-chat-messages',
+                    template: ``
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
+
+/**
+ * Represents a Hero Card component ([see example]({% slug dialogflow_chat %})).
+ * Hero cards host a single large image and action buttons with text content.
+ */
+class HeroCardComponent {
+    constructor() {
+        this.cssClass = true;
+        /**
+         * Fires when the user clicks a button.
+         */
+        this.executeAction = new EventEmitter();
+    }
+    onClick(action) {
+        this.executeAction.next(action);
+    }
+}
+HeroCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeroCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HeroCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HeroCardComponent, 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" />
+        <div class="k-card-body">
+        <h5 class="k-card-title" *ngIf="title">
+            {{ title }}
+        </h5>
+        <h6 class="k-card-subtitle" *ngIf="subtitle">
+            {{ subtitle }}
+        </h6>
+        </div>
+        <div class="k-card-actions k-card-actions-vertical">
+        <span class="k-card-action"
+                *ngFor="let act of actions"
+        >
+            <button
+                kendoButton fillMode="flat"
+                (click)="onClick(act)"
+            >
+                    {{ act.title }}
+            </button>
+        </span>
+        </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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeroCardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-chat-hero-card',
+                    template: `
+        <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />
+        <div class="k-card-body">
+        <h5 class="k-card-title" *ngIf="title">
+            {{ title }}
+        </h5>
+        <h6 class="k-card-subtitle" *ngIf="subtitle">
+            {{ subtitle }}
+        </h6>
+        </div>
+        <div class="k-card-actions k-card-actions-vertical">
+        <span class="k-card-action"
+                *ngFor="let act of actions"
+        >
+            <button
+                kendoButton fillMode="flat"
+                (click)="onClick(act)"
+            >
+                    {{ act.title }}
+            </button>
+        </span>
+        </div>
+    `
+                }]
+        }], propDecorators: { imageUrl: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], actions: [{
+                type: Input
+            }], cssClass: [{
+                type: HostBinding,
+                args: ['class.k-card']
+            }], executeAction: [{
+                type: Output
+            }] } });
+
+const PUBLIC_DIRECTIVES = [
+    ChatComponent,
+    CustomMessagesComponent,
+    AttachmentTemplateDirective,
+    MessageTemplateDirective,
+    HeroCardComponent,
+    ChatMessageBoxTemplateDirective
+];
+const PRIVATE_DIRECTIVES = [
+    AttachmentComponent,
+    FocusedStateDirective,
+    LocalizedMessagesDirective$1,
+    MessageAttachmentsComponent,
+    MessageComponent,
+    MessageListComponent,
+    MessageTemplateDirective,
+    ScrollAnchorDirective,
+    SuggestedActionsComponent,
+    MessageBoxComponent
+];
+/**
+ * The [NgModule](link:site.data.urls.angular['ngmodules']) for the Chat component.
+ *
+ * @example
+ * ```ts-no-run
+ * import { NgModule } from '@angular/core';
+ * import { Component } from '@angular/core';
+ * import { BrowserModule } from '@angular/platform-browser';
+ *
+ * import { ChatModule } from '@progress/kendo-angular-conversational-ui';
+ * import { AppComponent }   from './app.component';
+ *
+ * _@NgModule({
+ *   imports:      [ BrowserModule, ChatModule ],
+ *   declarations: [ AppComponent ],
+ *   bootstrap:    [ AppComponent ]
+ * })
+ *
+ * export class AppModule { }
+ * ```
+ */
+class ChatModule {
+}
+ChatModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ChatModule, declarations: [ChatComponent,
         CustomMessagesComponent,
         AttachmentTemplateDirective,
         MessageTemplateDirective,
         HeroCardComponent,
         ChatMessageBoxTemplateDirective, AttachmentComponent,
         FocusedStateDirective,
-        LocalizedMessagesDirective,
+        LocalizedMessagesDirective$1,
         MessageAttachmentsComponent,
         MessageComponent,
         MessageListComponent,
@@ -1945,9 +3164,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }] });
 
+/**
+ * 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);
+ *
+ * ```
+ */
+class ConversationalUIModule {
+}
+ConversationalUIModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ConversationalUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ConversationalUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ConversationalUIModule, exports: [AIPromptModule, ChatModule] });
+ConversationalUIModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ConversationalUIModule, imports: [AIPromptModule, ChatModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ConversationalUIModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [AIPromptModule, ChatModule]
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AttachmentTemplateDirective, ChatComponent, ChatMessageBoxTemplateDirective, ChatModule, CustomMessagesComponent, ExecuteActionEvent, HeroCardComponent, MessageTemplateDirective, SendMessageEvent };
+export { AIPromptComponent, AIPromptCustomMessagesComponent, AIPromptModule, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, AttachmentTemplateDirective, ChatComponent, ChatMessageBoxTemplateDirective, ChatModule, CommandViewComponent, ConversationalUIModule, CustomMessagesComponent, CustomViewComponent, ExecuteActionEvent, HeroCardComponent, MessageTemplateDirective, OutputViewComponent, PromptViewComponent, SendMessageEvent };