@progress/kendo-angular-conversational-ui 16.5.0 → 16.6.0-develop.10

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

@@ -3,25 +3,22 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Directive, Optional, Input, forwardRef, isDevMode, EventEmitter, Component, Output, HostBinding, ViewChildren, ElementRef, ViewChild, HostListener, ContentChild, InjectionToken, Inject, Injectable, ContentChildren, NgModule } from '@angular/core';
-import * as i1 from '@progress/kendo-angular-l10n';
+import { Directive, Optional, HostBinding, HostListener, EventEmitter, Component, ViewChild, Input, Output, isDevMode, forwardRef, ViewChildren, ElementRef, 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 i3 from '@progress/kendo-angular-common';
-import { Keys, isPresent, guid, focusableSelector, ResizeSensorModule } from '@progress/kendo-angular-common';
+import { NgIf, NgTemplateOutlet, NgFor, NgSwitch, NgSwitchCase } from '@angular/common';
+import { Keys, ResizeSensorComponent, isPresent, focusableSelector, guid, ResizeBatchService } from '@progress/kendo-angular-common';
+import { paperPlaneIcon, chevronLeftIcon, chevronRightIcon, sparklesIcon, commentIcon, moreHorizontalIcon, copyIcon, arrowRotateCwIcon, thumbUpOutlineIcon, thumbDownOutlineIcon, thumbUpIcon, thumbDownIcon, chevronUpIcon, chevronDownIcon } from '@progress/kendo-svg-icons';
+import { ButtonComponent } from '@progress/kendo-angular-buttons';
 import { fromEvent, Subscription, Subject } from 'rxjs';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i1$1 from '@progress/kendo-angular-intl';
+import * as i1 from '@progress/kendo-angular-intl';
 import { debounceTime } from 'rxjs/operators';
-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 i5 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';
+import { IconsService } from '@progress/kendo-angular-icons';
+import { PopupService } from '@progress/kendo-angular-popup';
+import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
+import { PanelBarComponent } from '@progress/kendo-angular-layout';
+import { TextAreaComponent } from '@progress/kendo-angular-inputs';
 
 /**
  * Defines a template that will be used for displaying message attachments. To define an attachment
@@ -41,11 +38,12 @@ class AttachmentTemplateDirective {
     }
 }
 AttachmentTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AttachmentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-AttachmentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AttachmentTemplateDirective, selector: "[kendoChatAttachmentTemplate]", ngImport: i0 });
+AttachmentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AttachmentTemplateDirective, isStandalone: true, selector: "[kendoChatAttachmentTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AttachmentTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoChatAttachmentTemplate]'
+                    selector: '[kendoChatAttachmentTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () {
         return [{ type: i0.TemplateRef, decorators: [{
@@ -105,11 +103,12 @@ class MessageTemplateDirective {
     }
 }
 MessageTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-MessageTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: MessageTemplateDirective, selector: "[kendoChatMessageTemplate]", ngImport: i0 });
+MessageTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: MessageTemplateDirective, isStandalone: true, selector: "[kendoChatMessageTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoChatMessageTemplate]'
+                    selector: '[kendoChatMessageTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () {
         return [{ type: i0.TemplateRef, decorators: [{
@@ -124,8 +123,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-conversational-ui',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1721814415,
-    version: '16.5.0',
+    publishDate: 1722607209,
+    version: '16.6.0-develop.10',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -140,72 +139,227 @@ class ChatMessageBoxTemplateDirective {
     }
 }
 ChatMessageBoxTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatMessageBoxTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ChatMessageBoxTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ChatMessageBoxTemplateDirective, selector: "[kendoChatMessageBoxTemplate]", ngImport: i0 });
+ChatMessageBoxTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ChatMessageBoxTemplateDirective, isStandalone: true, selector: "[kendoChatMessageBoxTemplate]", ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatMessageBoxTemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoChatMessageBoxTemplate]'
+                    selector: '[kendoChatMessageBoxTemplate]',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
 /**
  * @hidden
  */
-let Messages$1 = class Messages extends ComponentMessages {
-};
-Messages$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages$1, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages$1.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: Messages$1, decorators: [{
+class FocusedStateDirective {
+    constructor() {
+        this.focused = false;
+    }
+    onFocus() {
+        this.focused = true;
+    }
+    onBlur() {
+        this.focused = false;
+    }
+}
+FocusedStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusedStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+FocusedStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FocusedStateDirective, isStandalone: true, selector: "[kendoChatFocusedState]", host: { listeners: { "focusin": "onFocus()", "focusout": "onBlur()" }, properties: { "class.k-focus": "this.focused" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusedStateDirective, decorators: [{
             type: Directive,
             args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'kendoConversationalUIMessages'
+                    selector: '[kendoChatFocusedState]',
+                    standalone: true
                 }]
-        }], propDecorators: { messagePlaceholder: [{
-                type: Input
-            }], send: [{
-                type: Input
-            }], messageListLabel: [{
-                type: Input
-            }], messageBoxInputLabel: [{
-                type: Input
-            }], messageAttachmentLeftArrow: [{
-                type: Input
-            }], messageAttachmentRightArrow: [{
-                type: Input
-            }], messageAvatarAlt: [{
-                type: Input
+        }], propDecorators: { focused: [{
+                type: HostBinding,
+                args: ['class.k-focus']
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focusin']
+            }], onBlur: [{
+                type: HostListener,
+                args: ['focusout']
             }] } });
 
-// eslint-disable no-forward-ref
 /**
  * @hidden
  */
-let LocalizedMessagesDirective$1 = class LocalizedMessagesDirective extends Messages$1 {
-    constructor(service) {
-        super();
-        this.service = service;
+class MessageBoxComponent {
+    constructor() {
+        this.hostClasses = 'k-message-box k-input k-input-md k-rounded-md k-input-solid';
+        this.sendMessage = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.sendIcon = paperPlaneIcon;
     }
-};
-LocalizedMessagesDirective$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective$1, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective$1.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective$1, selector: "[kendoChatLocalizedMessages]", providers: [
-        {
-            provide: Messages$1,
-            useExisting: forwardRef(() => LocalizedMessagesDirective$1)
+    get messageBoxValue() {
+        return this.type === 'textarea';
+    }
+    /**
+     * @hidden
+     */
+    sendClick() {
+        const input = this.messageBoxInput.nativeElement;
+        const value = input.value;
+        if (!value) {
+            return;
         }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective$1, decorators: [{
-            type: Directive,
+        const message = {
+            author: this.user,
+            text: value,
+            timestamp: new Date()
+        };
+        this.sendMessage.emit(new SendMessageEvent(message));
+        input.value = null;
+        input.focus();
+        this.autoScroll = true;
+    }
+    /**
+     * @hidden
+     */
+    inputKeydown(e) {
+        if (e.keyCode === Keys.Enter) {
+            this.sendClick();
+        }
+    }
+    /**
+     * @hidden
+     */
+    textAreaKeydown(e) {
+        const isEnter = e.keyCode === Keys.Enter;
+        if (!isEnter) {
+            return;
+        }
+        const newLine = (e.metaKey || e.ctrlKey);
+        const enterOnly = !(e.shiftKey || e.metaKey || e.ctrlKey);
+        if (enterOnly) {
+            e.preventDefault();
+            this.sendClick();
+        }
+        if (newLine) {
+            this.messageBoxInput.nativeElement.value += `\r\n`;
+        }
+    }
+    /**
+     * @hidden
+     */
+    textFor(key) {
+        return this.localization.get(key);
+    }
+}
+MessageBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MessageBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MessageBoxComponent, isStandalone: true, selector: "kendo-message-box", inputs: { user: "user", autoScroll: "autoScroll", type: "type", localization: "localization", messageBoxTemplate: "messageBoxTemplate" }, outputs: { sendMessage: "sendMessage" }, host: { properties: { "class": "this.hostClasses", "class.!k-align-items-end": "this.messageBoxValue" } }, viewQueries: [{ propertyName: "messageBoxInput", first: true, predicate: ["messageBoxInput"], descendants: true }], ngImport: i0, template: `
+    <ng-container *ngIf="!messageBoxTemplate">
+        <input
+            *ngIf="type === 'textbox'"
+            #messageBoxInput
+            [attr.role]="'textbox'"
+            kendoChatFocusedState
+            type="text"
+            class="k-textbox k-input k-input-md k-input-solid"
+            [attr.aria-label]="textFor('messageBoxInputLabel')"
+            [placeholder]="textFor('messagePlaceholder')"
+            (keydown)="inputKeydown($event)"
+        />
+
+        <textarea
+            *ngIf="type === 'textarea'"
+            #messageBoxInput
+            [attr.role]="'textbox'"
+            kendoChatFocusedState
+            [rows]="3"
+            class="k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none"
+            [attr.aria-label]="textFor('messageBoxInputLabel')"
+            [placeholder]="textFor('messagePlaceholder')"
+            (keydown)="textAreaKeydown($event)"
+        ></textarea>
+
+        <button
+            kendoButton
+            fillMode="flat"
+            class="k-chat-send"
+            icon="paper-plane"
+            [svgIcon]="sendIcon"
+            [tabindex]="0"
+            [attr.title]="textFor('send')"
+            (click)="sendClick()"
+        >
+        </button>
+    </ng-container>
+
+    <ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
+`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FocusedStateDirective, selector: "[kendoChatFocusedState]" }, { kind: "component", type: 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"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageBoxComponent, decorators: [{
+            type: Component,
             args: [{
-                    providers: [
-                        {
-                            provide: Messages$1,
-                            useExisting: forwardRef(() => LocalizedMessagesDirective$1)
-                        }
-                    ],
-                    selector: '[kendoChatLocalizedMessages]'
+                    selector: 'kendo-message-box',
+                    template: `
+    <ng-container *ngIf="!messageBoxTemplate">
+        <input
+            *ngIf="type === 'textbox'"
+            #messageBoxInput
+            [attr.role]="'textbox'"
+            kendoChatFocusedState
+            type="text"
+            class="k-textbox k-input k-input-md k-input-solid"
+            [attr.aria-label]="textFor('messageBoxInputLabel')"
+            [placeholder]="textFor('messagePlaceholder')"
+            (keydown)="inputKeydown($event)"
+        />
+
+        <textarea
+            *ngIf="type === 'textarea'"
+            #messageBoxInput
+            [attr.role]="'textbox'"
+            kendoChatFocusedState
+            [rows]="3"
+            class="k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none"
+            [attr.aria-label]="textFor('messageBoxInputLabel')"
+            [placeholder]="textFor('messagePlaceholder')"
+            (keydown)="textAreaKeydown($event)"
+        ></textarea>
+
+        <button
+            kendoButton
+            fillMode="flat"
+            class="k-chat-send"
+            icon="paper-plane"
+            [svgIcon]="sendIcon"
+            [tabindex]="0"
+            [attr.title]="textFor('send')"
+            (click)="sendClick()"
+        >
+        </button>
+    </ng-container>
+
+    <ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
+`,
+                    standalone: true,
+                    imports: [NgIf, FocusedStateDirective, ButtonComponent, NgTemplateOutlet]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], messageBoxValue: [{
+                type: HostBinding,
+                args: ['class.\!k-align-items-end']
+            }], messageBoxInput: [{
+                type: ViewChild,
+                args: ['messageBoxInput', { static: false }]
+            }], user: [{
+                type: Input
+            }], autoScroll: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], localization: [{
+                type: Input
+            }], messageBoxTemplate: [{
+                type: Input
+            }], sendMessage: [{
+                type: Output
+            }] } });
 
 /**
  * @hidden
@@ -378,7 +532,7 @@ class SuggestedActionsComponent extends ChatItem {
     }
 }
 SuggestedActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestedActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SuggestedActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: { actions: "actions", tabbable: "tabbable" }, outputs: { dispatch: "dispatch" }, host: { properties: { "class.k-quick-replies": "this.defaultClass" } }, providers: [{
+SuggestedActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SuggestedActionsComponent, isStandalone: true, selector: "kendo-chat-suggested-actions", inputs: { actions: "actions", tabbable: "tabbable" }, outputs: { dispatch: "dispatch" }, host: { properties: { "class.k-quick-replies": "this.defaultClass" } }, providers: [{
             provide: ChatItem,
             useExisting: forwardRef(() => SuggestedActionsComponent)
         }], viewQueries: [{ propertyName: "items", predicate: ["item"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
@@ -397,7 +551,7 @@ SuggestedActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
         >
         {{ action.title || action.value }}
         </span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestedActionsComponent, decorators: [{
             type: Component,
             args: [{
@@ -422,7 +576,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         >
         {{ action.title || action.value }}
         </span>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgFor]
                 }]
         }], propDecorators: { actions: [{
                 type: Input
@@ -459,8 +615,8 @@ class MessageComponent extends ChatItem {
         this.element.nativeElement.focus();
     }
 }
-MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.IntlService }], target: i0.ɵɵFactoryTarget.Component });
-MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MessageComponent, selector: "kendo-chat-message", inputs: { message: "message", tabbable: "tabbable", template: "template" }, host: { properties: { "class.k-message": "this.cssClass", "class.k-selected": "this.selected", "class.k-focus": "this.selected", "attr.tabIndex": "this.tabIndex" } }, providers: [{
+MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageComponent, deps: [{ token: i0.ElementRef }, { token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Component });
+MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MessageComponent, isStandalone: true, selector: "kendo-chat-message", inputs: { message: "message", tabbable: "tabbable", template: "template" }, host: { properties: { "class.k-message": "this.cssClass", "class.k-selected": "this.selected", "class.k-focus": "this.selected", "attr.tabIndex": "this.tabIndex" } }, providers: [{
             provide: ChatItem,
             useExisting: forwardRef(() => MessageComponent)
         }], usesInheritance: true, ngImport: i0, template: `
@@ -501,7 +657,7 @@ MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", versi
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
             args: [{
@@ -548,9 +704,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 </div>
             </div>
         </ng-template>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgIf, NgTemplateOutlet]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.IntlService }]; }, propDecorators: { message: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.IntlService }]; }, propDecorators: { message: [{
                 type: Input
             }], tabbable: [{
                 type: Input
@@ -594,7 +752,7 @@ class AttachmentComponent {
     }
 }
 AttachmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AttachmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: { attachment: "attachment", template: "template" }, ngImport: i0, template: `
+AttachmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AttachmentComponent, isStandalone: true, selector: "kendo-chat-attachment", inputs: { attachment: "attachment", template: "template" }, ngImport: i0, template: `
         <ng-container *ngIf="template">
             <ng-container *ngTemplateOutlet="template.templateRef; context: context;">
             </ng-container>
@@ -614,7 +772,7 @@ AttachmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             </ng-container>
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AttachmentComponent, decorators: [{
             type: Component,
             args: [{
@@ -639,7 +797,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             </ng-container>
             </div>
         </div>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgIf, NgTemplateOutlet]
                 }]
         }], propDecorators: { attachment: [{
                 type: Input
@@ -755,8 +915,8 @@ class MessageAttachmentsComponent extends ChatItem {
         return this.localization.get(key);
     }
 }
-MessageAttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageAttachmentsComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: { attachments: "attachments", layout: "layout", tabbable: "tabbable", template: "template", localization: "localization" }, host: { properties: { "class.k-card-deck-scrollwrap": "this.carousel" } }, providers: [{
+MessageAttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageAttachmentsComponent, deps: [{ token: i0.NgZone }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MessageAttachmentsComponent, isStandalone: true, selector: "kendo-chat-message-attachments", inputs: { attachments: "attachments", layout: "layout", tabbable: "tabbable", template: "template", localization: "localization" }, host: { properties: { "class.k-card-deck-scrollwrap": "this.carousel" } }, providers: [{
             provide: ChatItem,
             useExisting: forwardRef(() => MessageAttachmentsComponent)
         }], viewQueries: [{ propertyName: "deck", first: true, predicate: ["deck"], descendants: true, read: ElementRef, static: true }, { propertyName: "items", predicate: ["item"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
@@ -800,7 +960,7 @@ MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.
             icon="chevron-right"
         >
         </button>
-    `, isInline: true, dependencies: [{ kind: "component", 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"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: 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"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageAttachmentsComponent, decorators: [{
             type: Component,
             args: [{
@@ -850,9 +1010,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             icon="chevron-right"
         >
         </button>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgIf, ButtonComponent, NgFor, AttachmentComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1.LocalizationService }]; }, propDecorators: { attachments: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$1.LocalizationService }]; }, propDecorators: { attachments: [{
                 type: Input
             }], layout: [{
                 type: Input
@@ -1006,8 +1168,8 @@ class MessageListComponent {
         return this.localization.get(key);
     }
 }
-MessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageListComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.IntlService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MessageListComponent, selector: "kendo-chat-message-list", inputs: { messages: "messages", attachmentTemplate: "attachmentTemplate", messageTemplate: "messageTemplate", localization: "localization", user: "user" }, outputs: { executeAction: "executeAction", navigate: "navigate", resize: "resize" }, host: { properties: { "class.k-message-list-content": "this.cssClass" } }, viewQueries: [{ propertyName: "items", predicate: ChatItem, descendants: true }], ngImport: i0, template: `
+MessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageListComponent, deps: [{ token: i0.ElementRef }, { token: i1.IntlService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MessageListComponent, isStandalone: true, selector: "kendo-chat-message-list", inputs: { messages: "messages", attachmentTemplate: "attachmentTemplate", messageTemplate: "messageTemplate", localization: "localization", user: "user" }, outputs: { executeAction: "executeAction", navigate: "navigate", resize: "resize" }, host: { properties: { "class.k-message-list-content": "this.cssClass" } }, viewQueries: [{ propertyName: "items", predicate: ChatItem, descendants: true }], ngImport: i0, template: `
         <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">
             <ng-container [ngSwitch]="group.type">
                 <div
@@ -1091,7 +1253,7 @@ MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
         </ng-container>
         <kendo-resize-sensor (resize)="onResize()">
         </kendo-resize-sensor>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }, { kind: "component", type: MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: ["attachments", "layout", "tabbable", "template", "localization"] }, { kind: "component", type: MessageComponent, selector: "kendo-chat-message", inputs: ["message", "tabbable", "template"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "tabbable"], outputs: ["dispatch"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MessageComponent, selector: "kendo-chat-message", inputs: ["message", "tabbable", "template"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }, { kind: "component", type: MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: ["attachments", "layout", "tabbable", "template", "localization"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "tabbable"], outputs: ["dispatch"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageListComponent, decorators: [{
             type: Component,
             args: [{
@@ -1180,9 +1342,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         </ng-container>
         <kendo-resize-sensor (resize)="onResize()">
         </kendo-resize-sensor>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgFor, NgSwitch, NgSwitchCase, NgIf, MessageComponent, AttachmentComponent, MessageAttachmentsComponent, SuggestedActionsComponent, ResizeSensorComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.IntlService }, { type: i0.Renderer2 }]; }, propDecorators: { messages: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.IntlService }, { type: i0.Renderer2 }]; }, propDecorators: { messages: [{
                 type: Input
             }], attachmentTemplate: [{
                 type: Input
@@ -1260,12 +1424,13 @@ class ScrollAnchorDirective {
     }
 }
 ScrollAnchorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollAnchorDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-ScrollAnchorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: { autoScroll: "autoScroll" }, outputs: { autoScrollChange: "autoScrollChange" }, host: { properties: { "style.overflow-anchor": "this.overflowAnchor" } }, exportAs: ["scrollAnchor"], ngImport: i0 });
+ScrollAnchorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ScrollAnchorDirective, isStandalone: true, selector: "[kendoChatScrollAnchor]", inputs: { autoScroll: "autoScroll" }, outputs: { autoScrollChange: "autoScrollChange" }, host: { properties: { "style.overflow-anchor": "this.overflowAnchor" } }, exportAs: ["scrollAnchor"], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollAnchorDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoChatScrollAnchor]',
-                    exportAs: 'scrollAnchor'
+                    exportAs: 'scrollAnchor',
+                    standalone: true
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { autoScroll: [{
                 type: Input
@@ -1279,212 +1444,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 /**
  * @hidden
  */
-class FocusedStateDirective {
-    constructor() {
-        this.focused = false;
-    }
-    onFocus() {
-        this.focused = true;
-    }
-    onBlur() {
-        this.focused = false;
-    }
-}
-FocusedStateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusedStateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FocusedStateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: FocusedStateDirective, selector: "[kendoChatFocusedState]", host: { listeners: { "focusin": "onFocus()", "focusout": "onBlur()" }, properties: { "class.k-focus": "this.focused" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FocusedStateDirective, decorators: [{
+let Messages$1 = class Messages extends ComponentMessages {
+};
+Messages$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages$1, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages$1.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: Messages$1, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[kendoChatFocusedState]'
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'kendoConversationalUIMessages'
                 }]
-        }], propDecorators: { focused: [{
-                type: HostBinding,
-                args: ['class.k-focus']
-            }], onFocus: [{
-                type: HostListener,
-                args: ['focusin']
-            }], onBlur: [{
-                type: HostListener,
-                args: ['focusout']
+        }], propDecorators: { messagePlaceholder: [{
+                type: Input
+            }], send: [{
+                type: Input
+            }], messageListLabel: [{
+                type: Input
+            }], messageBoxInputLabel: [{
+                type: Input
+            }], messageAttachmentLeftArrow: [{
+                type: Input
+            }], messageAttachmentRightArrow: [{
+                type: Input
+            }], messageAvatarAlt: [{
+                type: Input
             }] } });
 
+// eslint-disable no-forward-ref
 /**
  * @hidden
  */
-class MessageBoxComponent {
-    constructor() {
-        this.hostClasses = 'k-message-box k-input k-input-md k-rounded-md k-input-solid';
-        this.sendMessage = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.sendIcon = paperPlaneIcon;
-    }
-    get messageBoxValue() {
-        return this.type === 'textarea';
-    }
-    /**
-     * @hidden
-     */
-    sendClick() {
-        const input = this.messageBoxInput.nativeElement;
-        const value = input.value;
-        if (!value) {
-            return;
-        }
-        const message = {
-            author: this.user,
-            text: value,
-            timestamp: new Date()
-        };
-        this.sendMessage.emit(new SendMessageEvent(message));
-        input.value = null;
-        input.focus();
-        this.autoScroll = true;
-    }
-    /**
-     * @hidden
-     */
-    inputKeydown(e) {
-        if (e.keyCode === Keys.Enter) {
-            this.sendClick();
-        }
+let LocalizedMessagesDirective$1 = class LocalizedMessagesDirective extends Messages$1 {
+    constructor(service) {
+        super();
+        this.service = service;
     }
-    /**
-     * @hidden
-     */
-    textAreaKeydown(e) {
-        const isEnter = e.keyCode === Keys.Enter;
-        if (!isEnter) {
-            return;
-        }
-        const newLine = (e.metaKey || e.ctrlKey);
-        const enterOnly = !(e.shiftKey || e.metaKey || e.ctrlKey);
-        if (enterOnly) {
-            e.preventDefault();
-            this.sendClick();
-        }
-        if (newLine) {
-            this.messageBoxInput.nativeElement.value += `\r\n`;
+};
+LocalizedMessagesDirective$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective$1, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective$1.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective$1, isStandalone: true, selector: "[kendoChatLocalizedMessages]", providers: [
+        {
+            provide: Messages$1,
+            useExisting: forwardRef(() => LocalizedMessagesDirective$1)
         }
-    }
-    /**
-     * @hidden
-     */
-    textFor(key) {
-        return this.localization.get(key);
-    }
-}
-MessageBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MessageBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MessageBoxComponent, selector: "kendo-message-box", inputs: { user: "user", autoScroll: "autoScroll", type: "type", localization: "localization", messageBoxTemplate: "messageBoxTemplate" }, outputs: { sendMessage: "sendMessage" }, host: { properties: { "class": "this.hostClasses", "class.!k-align-items-end": "this.messageBoxValue" } }, viewQueries: [{ propertyName: "messageBoxInput", first: true, predicate: ["messageBoxInput"], descendants: true }], ngImport: i0, template: `
-    <ng-container *ngIf="!messageBoxTemplate">
-        <input
-            *ngIf="type === 'textbox'"
-            #messageBoxInput
-            [attr.role]="'textbox'"
-            kendoChatFocusedState
-            type="text"
-            class="k-textbox k-input k-input-md k-input-solid"
-            [attr.aria-label]="textFor('messageBoxInputLabel')"
-            [placeholder]="textFor('messagePlaceholder')"
-            (keydown)="inputKeydown($event)"
-        />
-
-        <textarea
-            *ngIf="type === 'textarea'"
-            #messageBoxInput
-            [attr.role]="'textbox'"
-            kendoChatFocusedState
-            [rows]="3"
-            class="k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none"
-            [attr.aria-label]="textFor('messageBoxInputLabel')"
-            [placeholder]="textFor('messagePlaceholder')"
-            (keydown)="textAreaKeydown($event)"
-        ></textarea>
-
-        <button
-            kendoButton
-            fillMode="flat"
-            class="k-chat-send"
-            icon="paper-plane"
-            [svgIcon]="sendIcon"
-            [tabindex]="0"
-            [attr.title]="textFor('send')"
-            (click)="sendClick()"
-        >
-        </button>
-    </ng-container>
-
-    <ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
-`, isInline: true, dependencies: [{ kind: "component", 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"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: FocusedStateDirective, selector: "[kendoChatFocusedState]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageBoxComponent, decorators: [{
-            type: Component,
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective$1, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'kendo-message-box',
-                    template: `
-    <ng-container *ngIf="!messageBoxTemplate">
-        <input
-            *ngIf="type === 'textbox'"
-            #messageBoxInput
-            [attr.role]="'textbox'"
-            kendoChatFocusedState
-            type="text"
-            class="k-textbox k-input k-input-md k-input-solid"
-            [attr.aria-label]="textFor('messageBoxInputLabel')"
-            [placeholder]="textFor('messagePlaceholder')"
-            (keydown)="inputKeydown($event)"
-        />
-
-        <textarea
-            *ngIf="type === 'textarea'"
-            #messageBoxInput
-            [attr.role]="'textbox'"
-            kendoChatFocusedState
-            [rows]="3"
-            class="k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none"
-            [attr.aria-label]="textFor('messageBoxInputLabel')"
-            [placeholder]="textFor('messagePlaceholder')"
-            (keydown)="textAreaKeydown($event)"
-        ></textarea>
-
-        <button
-            kendoButton
-            fillMode="flat"
-            class="k-chat-send"
-            icon="paper-plane"
-            [svgIcon]="sendIcon"
-            [tabindex]="0"
-            [attr.title]="textFor('send')"
-            (click)="sendClick()"
-        >
-        </button>
-    </ng-container>
-
-    <ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
-`
+                    providers: [
+                        {
+                            provide: Messages$1,
+                            useExisting: forwardRef(() => LocalizedMessagesDirective$1)
+                        }
+                    ],
+                    selector: '[kendoChatLocalizedMessages]',
+                    standalone: true
                 }]
-        }], propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], messageBoxValue: [{
-                type: HostBinding,
-                args: ['class.\!k-align-items-end']
-            }], messageBoxInput: [{
-                type: ViewChild,
-                args: ['messageBoxInput', { static: false }]
-            }], user: [{
-                type: Input
-            }], autoScroll: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], localization: [{
-                type: Input
-            }], messageBoxTemplate: [{
-                type: Input
-            }], sendMessage: [{
-                type: Output
-            }] } });
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
 /**
  * Represents the Kendo UI Chat component for Angular.
@@ -1581,8 +1596,8 @@ class ChatComponent {
         return this.localization.get(key);
     }
 }
-ChatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatComponent, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChatComponent, selector: "kendo-chat", inputs: { messages: "messages", user: "user", messageBoxType: "messageBoxType" }, outputs: { sendMessage: "sendMessage", executeAction: "executeAction" }, host: { properties: { "class": "this.className", "attr.dir": "this.dirAttr" } }, providers: [
+ChatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChatComponent, isStandalone: true, selector: "kendo-chat", inputs: { messages: "messages", user: "user", messageBoxType: "messageBoxType" }, outputs: { sendMessage: "sendMessage", executeAction: "executeAction" }, host: { properties: { "class": "this.className", "attr.dir": "this.dirAttr" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -1645,7 +1660,7 @@ ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version:
         (sendMessage)="sendMessage.emit($event)"
         >
         </kendo-message-box>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$1, selector: "[kendoChatLocalizedMessages]" }, { kind: "component", type: MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "messageTemplate", "localization", "user"], outputs: ["executeAction", "navigate", "resize"] }, { kind: "directive", type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll"], outputs: ["autoScrollChange"], exportAs: ["scrollAnchor"] }, { kind: "component", type: MessageBoxComponent, selector: "kendo-message-box", inputs: ["user", "autoScroll", "type", "localization", "messageBoxTemplate"], outputs: ["sendMessage"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$1, selector: "[kendoChatLocalizedMessages]" }, { kind: "directive", type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll"], outputs: ["autoScrollChange"], exportAs: ["scrollAnchor"] }, { kind: "component", type: MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "messageTemplate", "localization", "user"], outputs: ["executeAction", "navigate", "resize"] }, { kind: "component", type: MessageBoxComponent, selector: "kendo-message-box", inputs: ["user", "autoScroll", "type", "localization", "messageBoxTemplate"], outputs: ["sendMessage"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
             args: [{
@@ -1714,9 +1729,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         (sendMessage)="sendMessage.emit($event)"
         >
         </kendo-message-box>
-    `
+    `,
+                    standalone: true,
+                    imports: [LocalizedMessagesDirective$1, ScrollAnchorDirective, MessageListComponent, MessageBoxComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { messages: [{
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { messages: [{
                 type: Input
             }], user: [{
                 type: Input
@@ -1829,7 +1846,7 @@ class BaseView {
         return this.localization.get(text);
     }
 }
-BaseView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseView, deps: [{ token: MY_TOKEN }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+BaseView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseView, deps: [{ token: MY_TOKEN }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
 BaseView.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: BaseView, decorators: [{
             type: Directive
@@ -1837,7 +1854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         return [{ type: undefined, decorators: [{
                         type: Inject,
                         args: [MY_TOKEN]
-                    }] }, { type: i1.LocalizationService }];
+                    }] }, { type: i1$1.LocalizationService }];
     }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-prompt-view']
@@ -1885,1132 +1902,1069 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
         }] });
 
 /**
- * The component for rendering the AIPrompt Prompt View.
+ * 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 PromptViewComponent extends BaseView {
-    constructor(localization, service) {
-        super('prompt', localization);
-        this.service = service;
-        /**
-         * @hidden
-         */
-        this.showSuggestions = true;
-        /**
-         * @hidden
-         */
-        this.contentId = `k-prompt-suggestions-${guid()}`;
+class AIPromptToolbarActionsDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
     }
-    /**
-     * @hidden
-     */
-    get suggestionsIcons() {
-        return this.showSuggestions ?
-            { font: 'chevron-up', svg: chevronUpIcon } :
-            { font: 'chevron-down', svg: chevronDownIcon };
+}
+AIPromptToolbarActionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptToolbarActionsDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+AIPromptToolbarActionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AIPromptToolbarActionsDirective, isStandalone: true, selector: "[kendoAIPromptToolbarActionsTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptToolbarActionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoAIPromptToolbarActionsTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+
+/**
+ * @hidden
+ */
+class ToolbarNavigationService {
+    constructor(localizationService) {
+        this.localizationService = localizationService;
+        this.focusableElements = [];
+        this.currentFocusedIndex = 0;
     }
-    /**
-     * @hidden
-     */
-    get promptSuggestions() {
-        return this.service.promptSuggestions;
+    register(tool) {
+        if (!this.focusableElements.some(el => el === tool)) {
+            this.focusableElements.push(tool);
+        }
     }
-    /**
-     *
-     * @hidden
-     */
-    set textAreaValue(value) {
-        this.service.promptValue = value;
+    unregister(tool) {
+        this.currentFocusedIndex = 0;
+        this.focusableElements = this.focusableElements.filter(el => el !== tool);
     }
-    get textAreaValue() {
-        return this.service.promptValue;
+    isActive(focusable) {
+        return this.focusableElements[this.currentFocusedIndex] === focusable;
     }
-    /**
-     * @hidden
-     */
-    suggestionClick(suggestion) {
-        this.textAreaValue = this.service.promptValue = suggestion;
+    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();
     }
 }
-PromptViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PromptViewComponent, deps: [{ token: i1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
-PromptViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PromptViewComponent, selector: "kendo-aiprompt-prompt-view", providers: [
+ToolbarNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarNavigationService, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+ToolbarNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarNavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarNavigationService, decorators: [{
+            type: Injectable
+        }], 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: "15.2.10", ngImport: i0, type: AIPromptToolbarFocusableDirective, deps: [{ token: i0.ElementRef }, { token: ToolbarNavigationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+AIPromptToolbarFocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AIPromptToolbarFocusableDirective, isStandalone: true, selector: "[kendoAIPromptToolbarFocusable]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptToolbarFocusableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoAIPromptToolbarFocusable]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ToolbarNavigationService }, { type: i0.Renderer2 }]; } });
+
+/**
+ * @hidden
+ */
+class Messages extends ComponentMessages {
+}
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", 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: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoAIPromptLocalizedMessages]", providers: [
         {
-            provide: BaseView,
-            useExisting: forwardRef(() => PromptViewComponent)
+            provide: Messages,
+            useExisting: forwardRef(() => LocalizedMessagesDirective)
         }
-    ], usesInheritance: true, ngImport: i0, template: `
-        <ng-template #content>
-            <kendo-textarea
-                [placeholder]="messageFor('promptPlaceholder')"
-                [rows]="1"
-                [(value)]="textAreaValue">
-            </kendo-textarea>
-            <div *ngIf="promptSuggestions"
-                class="k-prompt-expander">
-                <button kendoButton
-                    [attr.aria-controls]="contentId"
-                    [attr.aria-expanded]="showSuggestions"
-                    fillMode="flat"
-                    [icon]="suggestionsIcons.font"
-                    [svgIcon]="suggestionsIcons.svg"
-                    type="button"
-                    (click)="showSuggestions = !showSuggestions">
-                    {{messageFor('promptSuggestions')}}
-                </button>
-                <div *ngIf="showSuggestions"
-                    class="k-prompt-expander-content"
-                    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, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", 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"] }, { kind: "component", type: i5.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PromptViewComponent, decorators: [{
-            type: Component,
+    ], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+            type: Directive,
             args: [{
-                    selector: 'kendo-aiprompt-prompt-view',
                     providers: [
                         {
-                            provide: BaseView,
-                            useExisting: forwardRef(() => PromptViewComponent)
+                            provide: Messages,
+                            useExisting: forwardRef(() => LocalizedMessagesDirective)
                         }
                     ],
-                    template: `
-        <ng-template #content>
-            <kendo-textarea
-                [placeholder]="messageFor('promptPlaceholder')"
-                [rows]="1"
-                [(value)]="textAreaValue">
-            </kendo-textarea>
-            <div *ngIf="promptSuggestions"
-                class="k-prompt-expander">
-                <button kendoButton
-                    [attr.aria-controls]="contentId"
-                    [attr.aria-expanded]="showSuggestions"
-                    fillMode="flat"
-                    [icon]="suggestionsIcons.font"
-                    [svgIcon]="suggestionsIcons.svg"
-                    type="button"
-                    (click)="showSuggestions = !showSuggestions">
-                    {{messageFor('promptSuggestions')}}
-                </button>
-                <div *ngIf="showSuggestions"
-                    class="k-prompt-expander-content"
-                    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>
-    `
+                    selector: '[kendoAIPromptLocalizedMessages]',
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: AIPromptService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
 /**
- * @hidden
+ * Represents the Kendo UI AIPrompt component for Angular.
  */
-class AIPromptOutputCardComponent {
-    constructor(localization, service) {
+class AIPromptComponent {
+    constructor(localization, service, navigationService, ngZone) {
         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()}`;
+        this.navigationService = navigationService;
+        this.ngZone = ngZone;
+        this.hostClasses = true;
+        /**
+         * 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;
+        this._activeView = 0;
+        validatePackage(packageMetadata);
+        this.direction = localization.rtl ? 'rtl' : 'ltr';
+        this.subs.add(localization.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        }));
     }
-    get ariaDescribedBy() {
-        return this.titleId;
+    get dirAttr() {
+        return this.direction;
     }
-    ngOnInit() {
-        var _a, _b;
-        if (((_a = this.promptOutput) === null || _a === void 0 ? void 0 : _a.rating) === 'positive') {
-            this.positiveRatingIcon = thumbUpIcon;
-            this.negativeRatingIcon = thumbDownOutlineIcon;
-        }
-        else if (((_b = this.promptOutput) === null || _b === void 0 ? void 0 : _b.rating) === 'negative') {
-            this.negativeRatingIcon = thumbDownIcon;
-            this.positiveRatingIcon = thumbUpOutlineIcon;
+    /**
+     * The active view index of the AIPrompt component.
+     */
+    set activeView(idx) {
+        if (this._activeView !== idx) {
+            this._activeView = idx;
+            this.service.promptValue && (this.service.promptValue = '');
         }
     }
-    messageFor(text) {
-        return this.localization.get(text);
+    get activeView() {
+        return this._activeView;
     }
-    get showRating() {
-        return this.service.showOutputRating;
+    /**
+     * The collection of commands that will be rendered in the Command view.
+     */
+    set promptCommands(value) {
+        this.service.promptCommands = value;
     }
-    get outputTitle() {
-        if (isPresent(this.promptOutput.title)) {
-            return this.promptOutput.title;
-        }
-        else {
-            const titleMessage = this.promptOutput.isRetry ? 'outputRetryTitle' : 'outputTitle';
-            return this.messageFor(titleMessage);
-        }
+    /**
+     * The collection of suggestions that will be rendered in the Prompt view.
+     */
+    set promptSuggestions(value) {
+        this.service.promptSuggestions = value;
     }
-    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);
+    /**
+     * 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 AIPrompt.
+     */
+    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);
         }
     }
-    handleCopy() {
-        navigator.clipboard.writeText(this.promptOutput.output);
-        this.service.outputCopyEvent.next(this.promptOutput);
+    /**
+     * @hidden
+     */
+    messageFor(text) {
+        return this.localization.get(text);
     }
-    handleRating(ratingType) {
+    /**
+     * @hidden
+     */
+    get viewTemplate() {
+        var _a, _b, _c;
+        return ((_a = this.selectedView) === null || _a === void 0 ? void 0 : _a.viewType) === 'custom' ? (_b = this.selectedView) === null || _b === void 0 ? void 0 : _b.viewTemplate : (_c = this.selectedView) === null || _c === void 0 ? void 0 : _c.template;
+    }
+    /**
+     * @hidden
+     */
+    handleGenerateOutput() {
+        const value = this.service.promptValue;
         const eventArgs = {
-            promptOutput: this.promptOutput,
-            rating: ratingType
+            prompt: value,
+            sender: this,
+            isRetry: false
         };
-        this.service.outputRatingChangeEvent.next(eventArgs);
-        if (ratingType === 'positive') {
-            this.positiveRatingIcon = thumbUpIcon;
-            this.negativeRatingIcon = thumbDownOutlineIcon;
-        }
-        else {
-            this.negativeRatingIcon = thumbDownIcon;
-            this.positiveRatingIcon = thumbUpOutlineIcon;
-        }
+        this.promptRequest.emit(eventArgs);
     }
 }
-AIPromptOutputCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptOutputCardComponent, deps: [{ token: i1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
-AIPromptOutputCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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}}
+AIPromptComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", type: AIPromptComponent, isStandalone: true, 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 text area."
+            promptPlaceholder="Ask or generate content with AI"
+            i18n-copyOutput="kendo.aiprompt.copyOutput|The Copy button text in each Output view card."
+            copyOutput="Copy"
+            i18n-retryGeneration="kendo.aiprompt.retryGeneration|The Retry button text in each Output view card."
+            retryGeneration="Retry"
+            i18n-outputTitle="kendo.aiprompt.outputTitle|The title of each Output view card."
+            outputTitle="Generated with AI"
+            i18n-outputRetryTitle="kendo.aiprompt.outputRetryTitle|The title of each Output view retry card."
+            outputRetryTitle="Generated with AI"
+            i18n-promptSuggestions="kendo.aiprompt.promptSuggestions|The title of the Prompt suggestions button."
+            promptSuggestions="Prompt suggestions">
+        </ng-container>
+        <div class="k-prompt-header">
+            <div class="k-toolbar-flat k-toolbar k-toolbar-md"
+                role="toolbar">
+                <button *ngFor="let view of viewsArray; let idx = index"
+                    kendoButton
+                    kendoAIPromptToolbarFocusable
+                    type="button"
+                    fillMode="flat"
+                    rounded="full"
+                    themeColor="primary"
+                    [svgIcon]="view.svgIcon"
+                    [icon]="view.icon"
+                    [selected]="idx === activeView"
+                    (click)="viewChange(idx)">
+                    {{view.buttonText}}
+                </button>
+
+                <ng-template *ngIf="toolbarActionsTemplate"
+                    [ngTemplateOutlet]="toolbarActionsTemplate?.templateRef">
+                </ng-template>
             </div>
-            <div class="k-card-subtitle">{{promptOutput.prompt}}</div>
         </div>
-        <div class="k-card-body">
-            <p>{{promptOutput.output}}</p>
+        <div class="k-prompt-content">
+            <div class="k-prompt-view">
+                <ng-container *ngTemplateOutlet="viewTemplate">
+                </ng-container>
+            </div>
         </div>
-        <div class="k-actions k-actions-start k-actions-horizontal k-card-actions">
-            <button kendoButton
-                fillMode="flat"
-                themeColor="primary"
-                rounded="full"
-                icon="copy"
-                [svgIcon]="copyIcon"
-                (click)="handleCopy()"
-            >{{messageFor('copyOutput')}}</button>
-            <button kendoButton
-                fillMode="flat"
-                rounded="full"
-                icon="arrow-rotate-cw"
-                [svgIcon]="retryIcon"
-                (click)="handleRetry()"
-            >{{messageFor('retryGeneration')}}</button>
-            <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 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, dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptOutputCardComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoAIPromptLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], 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"] }, { kind: "directive", type: AIPromptToolbarFocusableDirective, selector: "[kendoAIPromptToolbarFocusable]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: '[kendoAIPromptOutputCard]',
+                    exportAs: 'kendoAIPrompt',
+                    selector: 'kendo-aiprompt',
+                    providers: [
+                        LocalizationService,
+                        AIPromptService,
+                        ToolbarNavigationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.aiprompt'
+                        }
+                    ],
                     template: `
-        <div class="k-card-header">
-            <div
-                class="k-card-title"
-                [attr.id]="titleId">{{outputTitle}}
+        <ng-container kendoAIPromptLocalizedMessages
+            i18n-promptView="kendo.aiprompt.promptView|The Toolbar button text for the Prompt view."
+            promptView="Ask AI"
+            i18n-outputView="kendo.aiprompt.outputView|The Toolbar button text for the Output view."
+            outputView="Output"
+            i18n-generateOutput="kendo.aiprompt.generateOutput|The text for the Generate button in the Prompt view."
+            generateOutput="Generate"
+            i18n-promptPlaceholder="kendo.aiprompt.promptPlaceholder|The placeholder text for the Prompt View text area."
+            promptPlaceholder="Ask or generate content with AI"
+            i18n-copyOutput="kendo.aiprompt.copyOutput|The Copy button text in each Output view card."
+            copyOutput="Copy"
+            i18n-retryGeneration="kendo.aiprompt.retryGeneration|The Retry button text in each Output view card."
+            retryGeneration="Retry"
+            i18n-outputTitle="kendo.aiprompt.outputTitle|The title of each Output view card."
+            outputTitle="Generated with AI"
+            i18n-outputRetryTitle="kendo.aiprompt.outputRetryTitle|The title of each Output view retry card."
+            outputRetryTitle="Generated with AI"
+            i18n-promptSuggestions="kendo.aiprompt.promptSuggestions|The title of the Prompt suggestions button."
+            promptSuggestions="Prompt suggestions">
+        </ng-container>
+        <div class="k-prompt-header">
+            <div class="k-toolbar-flat k-toolbar k-toolbar-md"
+                role="toolbar">
+                <button *ngFor="let view of viewsArray; let idx = index"
+                    kendoButton
+                    kendoAIPromptToolbarFocusable
+                    type="button"
+                    fillMode="flat"
+                    rounded="full"
+                    themeColor="primary"
+                    [svgIcon]="view.svgIcon"
+                    [icon]="view.icon"
+                    [selected]="idx === activeView"
+                    (click)="viewChange(idx)">
+                    {{view.buttonText}}
+                </button>
+
+                <ng-template *ngIf="toolbarActionsTemplate"
+                    [ngTemplateOutlet]="toolbarActionsTemplate?.templateRef">
+                </ng-template>
             </div>
-            <div class="k-card-subtitle">{{promptOutput.prompt}}</div>
         </div>
-        <div class="k-card-body">
-            <p>{{promptOutput.output}}</p>
+        <div class="k-prompt-content">
+            <div class="k-prompt-view">
+                <ng-container *ngTemplateOutlet="viewTemplate">
+                </ng-container>
+            </div>
         </div>
-        <div class="k-actions k-actions-start k-actions-horizontal k-card-actions">
-            <button kendoButton
-                fillMode="flat"
-                themeColor="primary"
-                rounded="full"
-                icon="copy"
-                [svgIcon]="copyIcon"
-                (click)="handleCopy()"
-            >{{messageFor('copyOutput')}}</button>
-            <button kendoButton
-                fillMode="flat"
-                rounded="full"
-                icon="arrow-rotate-cw"
-                [svgIcon]="retryIcon"
-                (click)="handleRetry()"
-            >{{messageFor('retryGeneration')}}</button>
-            <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 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>
-    `
+    `,
+                    standalone: true,
+                    imports: [LocalizedMessagesDirective, NgFor, ButtonComponent, AIPromptToolbarFocusableDirective, NgIf, NgTemplateOutlet]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: AIPromptService }]; }, propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class.k-card']
-            }], listItemRole: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], tabIndex: [{
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }, { type: ToolbarNavigationService }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
-                args: ['attr.tabindex']
-            }], ariaDescribedBy: [{
-                type: HostBinding,
-                args: ['attr.aria-describedby']
-            }], ariaKeyShortcuts: [{
+                args: ['class.k-prompt']
+            }], dirAttr: [{
                 type: HostBinding,
-                args: ['attr.aria-keyshortcuts']
-            }], promptOutput: [{
+                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 AIPrompt Output View.
+ * The component for rendering the AIPrompt Command View.
  */
-class OutputViewComponent extends BaseView {
+class CommandViewComponent extends BaseView {
     constructor(localization, service) {
-        super('output', localization);
+        super('command', localization);
         this.service = service;
+        /**
+         * @hidden
+         */
+        this.panelBarItems = [];
+    }
+    ngOnInit() {
+        if (this.service.promptCommands) {
+            this.panelBarItems = this.getPanelBarItems(this.service.promptCommands);
+        }
     }
     /**
      * @hidden
      */
-    get promptOutputs() {
-        return this.service.promptOutputs;
+    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
+        }));
     }
 }
-OutputViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OutputViewComponent, deps: [{ token: i1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
-OutputViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OutputViewComponent, selector: "kendo-aiprompt-output-view", providers: [{
+CommandViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommandViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
+CommandViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CommandViewComponent, isStandalone: true, selector: "kendo-aiprompt-command-view", providers: [{
             provide: BaseView,
-            useExisting: forwardRef(() => OutputViewComponent)
+            useExisting: forwardRef(() => CommandViewComponent)
         }], 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>
+            <kendo-panelbar
+                [items]="panelBarItems"
+                [animate]="false"
+                [selectable]="false"
+                (itemClick)="itemClickHandler($event)"
+            ></kendo-panelbar>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AIPromptOutputCardComponent, selector: "[kendoAIPromptOutputCard]", inputs: ["promptOutput"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OutputViewComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "component", type: 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: "15.2.10", ngImport: i0, type: CommandViewComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-aiprompt-output-view',
+                    selector: 'kendo-aiprompt-command-view',
                     providers: [{
                             provide: BaseView,
-                            useExisting: forwardRef(() => OutputViewComponent)
+                            useExisting: forwardRef(() => CommandViewComponent)
                         }],
                     template: `
         <ng-template #content>
-            <div
-                class="k-card-list"
-                role="list">
-                <div *ngFor="let output of promptOutputs"
-                    kendoAIPromptOutputCard
-                    [promptOutput]="output">
-                </div>
-            </div>
+            <kendo-panelbar
+                [items]="panelBarItems"
+                [animate]="false"
+                [selectable]="false"
+                (itemClick)="itemClickHandler($event)"
+            ></kendo-panelbar>
         </ng-template>
-    `
-                }]
-        }], ctorParameters: function () { return [{ type: i1.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: "15.2.10", ngImport: i0, type: AIPromptToolbarActionsDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-AIPromptToolbarActionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AIPromptToolbarActionsDirective, selector: "[kendoAIPromptToolbarActionsTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: ToolbarNavigationService, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
-ToolbarNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarNavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarNavigationService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1.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: "15.2.10", ngImport: i0, type: AIPromptToolbarFocusableDirective, deps: [{ token: i0.ElementRef }, { token: ToolbarNavigationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-AIPromptToolbarFocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AIPromptToolbarFocusableDirective, selector: "[kendoAIPromptToolbarFocusable]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptToolbarFocusableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoAIPromptToolbarFocusable]'
+    `,
+                    standalone: true,
+                    imports: [PanelBarComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ToolbarNavigationService }, { type: i0.Renderer2 }]; } });
-
-/**
- * @hidden
- */
-class Messages extends ComponentMessages {
-}
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", 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
-            }] } });
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; } });
 
 /**
- * @hidden
+ * Custom component messages override the default component messages.
+ * ([see example]({% slug globalization_chat %}#toc-custom-messages)).
  */
-class LocalizedMessagesDirective extends Messages {
+class AIPromptCustomMessagesComponent extends Messages {
     constructor(service) {
         super();
         this.service = service;
     }
+    get override() {
+        return true;
+    }
 }
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, selector: "[kendoAIPromptLocalizedMessages]", providers: [
+AIPromptCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+AIPromptCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AIPromptCustomMessagesComponent, isStandalone: true, selector: "kendo-aiprompt-messages", providers: [
         {
             provide: Messages,
-            useExisting: forwardRef(() => LocalizedMessagesDirective)
+            useExisting: forwardRef(() => AIPromptCustomMessagesComponent)
         }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
-            type: Directive,
+    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptCustomMessagesComponent, decorators: [{
+            type: Component,
             args: [{
                     providers: [
                         {
                             provide: Messages,
-                            useExisting: forwardRef(() => LocalizedMessagesDirective)
+                            useExisting: forwardRef(() => AIPromptCustomMessagesComponent)
                         }
                     ],
-                    selector: '[kendoAIPromptLocalizedMessages]'
+                    selector: 'kendo-aiprompt-messages',
+                    template: ``,
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
+
+/**
+ * The component for rendering an AIPrompt Custom View.
+ */
+class CustomViewComponent extends BaseView {
+    constructor(localization) {
+        super('custom', localization);
+    }
+}
+CustomViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomViewComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CustomViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomViewComponent, isStandalone: true, 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: "15.2.10", ngImport: i0, type: CustomViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'kendo-aiprompt-custom-view',
+                    providers: [{
+                            provide: BaseView,
+                            useExisting: forwardRef(() => CustomViewComponent)
+                        }],
+                    template: ``,
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; }, propDecorators: { viewTemplate: [{
+                type: Input
+            }] } });
 
 /**
- * Represents the Kendo UI AIPrompt component for Angular.
+ * @hidden
  */
-class AIPromptComponent {
-    constructor(localization, service, navigationService, ngZone) {
+class AIPromptOutputCardComponent {
+    constructor(localization, service) {
         this.localization = localization;
         this.service = service;
-        this.navigationService = navigationService;
-        this.ngZone = ngZone;
-        this.hostClasses = true;
-        /**
-         * 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;
-        this._activeView = 0;
-        validatePackage(packageMetadata);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.subs.add(localization.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-        }));
+        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 dirAttr() {
-        return this.direction;
+    get ariaDescribedBy() {
+        return this.titleId;
     }
-    /**
-     * The active view index of the AIPrompt component.
-     */
-    set activeView(idx) {
-        if (this._activeView !== idx) {
-            this._activeView = idx;
-            this.service.promptValue && (this.service.promptValue = '');
+    ngOnInit() {
+        var _a, _b;
+        if (((_a = this.promptOutput) === null || _a === void 0 ? void 0 : _a.rating) === 'positive') {
+            this.positiveRatingIcon = thumbUpIcon;
+            this.negativeRatingIcon = thumbDownOutlineIcon;
+        }
+        else if (((_b = this.promptOutput) === null || _b === void 0 ? void 0 : _b.rating) === 'negative') {
+            this.negativeRatingIcon = thumbDownIcon;
+            this.positiveRatingIcon = thumbUpOutlineIcon;
         }
     }
-    get activeView() {
-        return this._activeView;
-    }
-    /**
-     * 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 AIPrompt.
-     */
-    focus() {
-        this.navigationService.focusFirst();
-    }
-    /**
-     * @hidden
-     */
-    get selectedView() {
-        return this.viewsArray[this.activeView];
+    messageFor(text) {
+        return this.localization.get(text);
     }
-    /**
-     * @hidden
-     */
-    get viewsArray() {
-        var _a;
-        return (_a = this.views) === null || _a === void 0 ? void 0 : _a.toArray();
+    get showRating() {
+        return this.service.showOutputRating;
     }
-    /**
-     * @hidden
-     */
-    viewChange(idx) {
-        if (idx !== this.activeView) {
-            this.activeView = idx;
-            this.activeViewChange.emit(idx);
+    get outputTitle() {
+        if (isPresent(this.promptOutput.title)) {
+            return this.promptOutput.title;
+        }
+        else {
+            const titleMessage = this.promptOutput.isRetry ? 'outputRetryTitle' : 'outputTitle';
+            return this.messageFor(titleMessage);
         }
     }
-    /**
-     * @hidden
-     */
-    messageFor(text) {
-        return this.localization.get(text);
+    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);
+        }
     }
-    /**
-     * @hidden
-     */
-    get viewTemplate() {
-        var _a, _b, _c;
-        return ((_a = this.selectedView) === null || _a === void 0 ? void 0 : _a.viewType) === 'custom' ? (_b = this.selectedView) === null || _b === void 0 ? void 0 : _b.viewTemplate : (_c = this.selectedView) === null || _c === void 0 ? void 0 : _c.template;
+    handleCopy() {
+        navigator.clipboard.writeText(this.promptOutput.output);
+        this.service.outputCopyEvent.next(this.promptOutput);
     }
-    /**
-     * @hidden
-     */
-    handleGenerateOutput() {
-        const value = this.service.promptValue;
+    handleRating(ratingType) {
         const eventArgs = {
-            prompt: value,
-            sender: this,
-            isRetry: false
+            promptOutput: this.promptOutput,
+            rating: ratingType
         };
-        this.promptRequest.emit(eventArgs);
+        this.service.outputRatingChangeEvent.next(eventArgs);
+        if (ratingType === 'positive') {
+            this.positiveRatingIcon = thumbUpIcon;
+            this.negativeRatingIcon = thumbDownOutlineIcon;
+        }
+        else {
+            this.negativeRatingIcon = thumbDownIcon;
+            this.positiveRatingIcon = thumbUpOutlineIcon;
+        }
     }
 }
-AIPromptComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptComponent, deps: [{ token: i1.LocalizationService }, { token: AIPromptService }, { token: ToolbarNavigationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AIPromptComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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 text area."
-            promptPlaceholder="Ask or generate content with AI"
-            i18n-copyOutput="kendo.aiprompt.copyOutput|The Copy button text in each Output view card."
-            copyOutput="Copy"
-            i18n-retryGeneration="kendo.aiprompt.retryGeneration|The Retry button text in each Output view card."
-            retryGeneration="Retry"
-            i18n-outputTitle="kendo.aiprompt.outputTitle|The title of each Output view card."
-            outputTitle="Generated with AI"
-            i18n-outputRetryTitle="kendo.aiprompt.outputRetryTitle|The title of each Output view retry card."
-            outputRetryTitle="Generated with AI"
-            i18n-promptSuggestions="kendo.aiprompt.promptSuggestions|The title of the Prompt suggestions button."
-            promptSuggestions="Prompt suggestions">
-        </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>
+AIPromptOutputCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptOutputCardComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
+AIPromptOutputCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AIPromptOutputCardComponent, isStandalone: true, selector: "[kendoAIPromptOutputCard]", inputs: { promptOutput: "promptOutput" }, host: { properties: { "class.k-card": "this.hostClass", "attr.role": "this.listItemRole", "attr.tabindex": "this.tabIndex", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts" } }, ngImport: i0, template: `
+        <div class="k-card-header">
+            <div
+                class="k-card-title"
+                [attr.id]="titleId">{{outputTitle}}
             </div>
+            <div class="k-card-subtitle">{{promptOutput.prompt}}</div>
         </div>
-        <div class="k-prompt-content">
-            <div class="k-prompt-view">
-                <ng-container *ngTemplateOutlet="viewTemplate">
-                </ng-container>
-            </div>
+        <div class="k-card-body">
+            <p>{{promptOutput.output}}</p>
         </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 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, dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", 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"] }, { kind: "directive", type: AIPromptToolbarFocusableDirective, selector: "[kendoAIPromptToolbarFocusable]" }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoAIPromptLocalizedMessages]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "component", type: 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"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptOutputCardComponent, decorators: [{
             type: Component,
             args: [{
-                    exportAs: 'kendoAIPrompt',
-                    selector: 'kendo-aiprompt',
-                    providers: [
-                        LocalizationService,
-                        AIPromptService,
-                        ToolbarNavigationService,
-                        {
-                            provide: L10N_PREFIX,
-                            useValue: 'kendo.aiprompt'
-                        }
-                    ],
+                    selector: '[kendoAIPromptOutputCard]',
                     template: `
-        <ng-container kendoAIPromptLocalizedMessages
-            i18n-promptView="kendo.aiprompt.promptView|The Toolbar button text for the Prompt view."
-            promptView="Ask AI"
-            i18n-outputView="kendo.aiprompt.outputView|The Toolbar button text for the Output view."
-            outputView="Output"
-            i18n-generateOutput="kendo.aiprompt.generateOutput|The text for the Generate button in the Prompt view."
-            generateOutput="Generate"
-            i18n-promptPlaceholder="kendo.aiprompt.promptPlaceholder|The placeholder text for the Prompt View text area."
-            promptPlaceholder="Ask or generate content with AI"
-            i18n-copyOutput="kendo.aiprompt.copyOutput|The Copy button text in each Output view card."
-            copyOutput="Copy"
-            i18n-retryGeneration="kendo.aiprompt.retryGeneration|The Retry button text in each Output view card."
-            retryGeneration="Retry"
-            i18n-outputTitle="kendo.aiprompt.outputTitle|The title of each Output view card."
-            outputTitle="Generated with AI"
-            i18n-outputRetryTitle="kendo.aiprompt.outputRetryTitle|The title of each Output view retry card."
-            outputRetryTitle="Generated with AI"
-            i18n-promptSuggestions="kendo.aiprompt.promptSuggestions|The title of the Prompt suggestions button."
-            promptSuggestions="Prompt suggestions">
-        </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 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-prompt-content">
-            <div class="k-prompt-view">
-                <ng-container *ngTemplateOutlet="viewTemplate">
-                </ng-container>
-            </div>
+        <div class="k-card-body">
+            <p>{{promptOutput.output}}</p>
         </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 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>
-    `
+    `,
+                    standalone: true,
+                    imports: [ButtonComponent, NgIf]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: AIPromptService }, { type: ToolbarNavigationService }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
-                args: ['class.k-prompt']
-            }], dirAttr: [{
+                args: ['class.k-card']
+            }], listItemRole: [{
                 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: [{
+                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
-            }], activeViewChange: [{
-                type: Output
-            }], promptRequest: [{
-                type: Output
-            }], commandExecute: [{
-                type: Output
-            }], outputCopy: [{
-                type: Output
-            }], outputRatingChange: [{
-                type: Output
             }] } });
 
 /**
- * The component for rendering the AIPrompt Command View.
+ * The component for rendering the AIPrompt Output View.
  */
-class CommandViewComponent extends BaseView {
+class OutputViewComponent extends BaseView {
     constructor(localization, service) {
-        super('command', localization);
+        super('output', localization);
         this.service = service;
-        /**
-         * @hidden
-         */
-        this.panelBarItems = [];
-    }
-    ngOnInit() {
-        if (this.service.promptCommands) {
-            this.panelBarItems = this.getPanelBarItems(this.service.promptCommands);
-        }
     }
     /**
      * @hidden
      */
-    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
-        }));
+    get promptOutputs() {
+        return this.service.promptOutputs;
     }
 }
-CommandViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommandViewComponent, deps: [{ token: i1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
-CommandViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CommandViewComponent, selector: "kendo-aiprompt-command-view", providers: [{
+OutputViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OutputViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
+OutputViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OutputViewComponent, isStandalone: true, selector: "kendo-aiprompt-output-view", providers: [{
             provide: BaseView,
-            useExisting: forwardRef(() => CommandViewComponent)
+            useExisting: forwardRef(() => OutputViewComponent)
         }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #content>
-            <kendo-panelbar
-                [items]="panelBarItems"
-                [animate]="false"
-                [selectable]="false"
-                (itemClick)="itemClickHandler($event)"
-            ></kendo-panelbar>
+            <div
+                class="k-card-list"
+                role="list">
+                <div *ngFor="let output of promptOutputs"
+                    kendoAIPromptOutputCard
+                    [promptOutput]="output">
+                </div>
+            </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", 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: "15.2.10", ngImport: i0, type: CommandViewComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AIPromptOutputCardComponent, selector: "[kendoAIPromptOutputCard]", inputs: ["promptOutput"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OutputViewComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'kendo-aiprompt-command-view',
+                    selector: 'kendo-aiprompt-output-view',
                     providers: [{
                             provide: BaseView,
-                            useExisting: forwardRef(() => CommandViewComponent)
+                            useExisting: forwardRef(() => OutputViewComponent)
                         }],
                     template: `
         <ng-template #content>
-            <kendo-panelbar
-                [items]="panelBarItems"
-                [animate]="false"
-                [selectable]="false"
-                (itemClick)="itemClickHandler($event)"
-            ></kendo-panelbar>
+            <div
+                class="k-card-list"
+                role="list">
+                <div *ngFor="let output of promptOutputs"
+                    kendoAIPromptOutputCard
+                    [promptOutput]="output">
+                </div>
+            </div>
         </ng-template>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgFor, AIPromptOutputCardComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: AIPromptService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; } });
 
 /**
- * Custom component messages override the default component messages.
- * ([see example]({% slug globalization_chat %}#toc-custom-messages)).
+ * The component for rendering the AIPrompt Prompt View.
  */
-class AIPromptCustomMessagesComponent extends Messages {
-    constructor(service) {
-        super();
+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;
     }
 }
-AIPromptCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-AIPromptCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AIPromptCustomMessagesComponent, selector: "kendo-aiprompt-messages", providers: [
+PromptViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PromptViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
+PromptViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PromptViewComponent, isStandalone: true, selector: "kendo-aiprompt-prompt-view", providers: [
         {
-            provide: Messages,
-            useExisting: forwardRef(() => AIPromptCustomMessagesComponent)
+            provide: BaseView,
+            useExisting: forwardRef(() => PromptViewComponent)
         }
-    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptCustomMessagesComponent, decorators: [{
+    ], usesInheritance: true, ngImport: i0, template: `
+        <ng-template #content>
+            <kendo-textarea
+                [placeholder]="messageFor('promptPlaceholder')"
+                [rows]="1"
+                [(value)]="textAreaValue">
+            </kendo-textarea>
+            <div *ngIf="promptSuggestions"
+                class="k-prompt-expander">
+                <button kendoButton
+                    [attr.aria-controls]="contentId"
+                    [attr.aria-expanded]="showSuggestions"
+                    fillMode="flat"
+                    [icon]="suggestionsIcons.font"
+                    [svgIcon]="suggestionsIcons.svg"
+                    type="button"
+                    (click)="showSuggestions = !showSuggestions">
+                    {{messageFor('promptSuggestions')}}
+                </button>
+                <div *ngIf="showSuggestions"
+                    class="k-prompt-expander-content"
+                    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, dependencies: [{ kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], 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"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PromptViewComponent, decorators: [{
             type: Component,
             args: [{
+                    selector: 'kendo-aiprompt-prompt-view',
                     providers: [
                         {
-                            provide: Messages,
-                            useExisting: forwardRef(() => AIPromptCustomMessagesComponent)
+                            provide: BaseView,
+                            useExisting: forwardRef(() => PromptViewComponent)
                         }
                     ],
-                    selector: 'kendo-aiprompt-messages',
-                    template: ``
-                }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
-
-/**
- * The component for rendering an AIPrompt Custom View.
- */
-class CustomViewComponent extends BaseView {
-    constructor(localization) {
-        super('custom', localization);
-    }
-}
-CustomViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomViewComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", 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.LocalizationService }]; }, propDecorators: { viewTemplate: [{
-                type: Input
-            }] } });
-
-const PUBLIC_DIRECTIVES$1 = [
-    AIPromptComponent,
-    PromptViewComponent,
-    OutputViewComponent,
-    CommandViewComponent,
-    CustomViewComponent,
-    AIPromptCustomMessagesComponent,
-    AIPromptToolbarActionsDirective,
-    AIPromptToolbarFocusableDirective
-];
-const PRIVATE_DIRECTIVES$1 = [
-    LocalizedMessagesDirective,
-    AIPromptOutputCardComponent
-];
-/**
- * The [NgModule](link:site.data.urls.angular['ngmodules']) for the AIPrompt component.
- *
- * @example
- * ```ts-no-run
- * import { NgModule } from '@angular/core';
- * import { Component } from '@angular/core';
- * import { BrowserModule } from '@angular/platform-browser';
- *
- * import { AIPromptModule } from '@progress/kendo-angular-conversational-ui';
- * import { AppComponent }   from './app.component';
- *
- * _@NgModule({
- *   imports:      [ BrowserModule, AIPromptModule ],
- *   declarations: [ AppComponent ],
- *   bootstrap:    [ AppComponent ]
- * })
- *
- * export class AppModule { }
- * ```
- */
-class AIPromptModule {
-}
-AIPromptModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AIPromptModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", 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: "15.2.10", ngImport: i0, type: AIPromptModule, imports: [CommonModule,
-        ButtonsModule,
-        IconsModule,
-        InputsModule,
-        LayoutModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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
-                    ]
+                    template: `
+        <ng-template #content>
+            <kendo-textarea
+                [placeholder]="messageFor('promptPlaceholder')"
+                [rows]="1"
+                [(value)]="textAreaValue">
+            </kendo-textarea>
+            <div *ngIf="promptSuggestions"
+                class="k-prompt-expander">
+                <button kendoButton
+                    [attr.aria-controls]="contentId"
+                    [attr.aria-expanded]="showSuggestions"
+                    fillMode="flat"
+                    [icon]="suggestionsIcons.font"
+                    [svgIcon]="suggestionsIcons.svg"
+                    type="button"
+                    (click)="showSuggestions = !showSuggestions">
+                    {{messageFor('promptSuggestions')}}
+                </button>
+                <div *ngIf="showSuggestions"
+                    class="k-prompt-expander-content"
+                    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>
+    `,
+                    standalone: true,
+                    imports: [TextAreaComponent, NgIf, ButtonComponent, NgFor]
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; } });
 
 // eslint-disable no-forward-ref
 /**
@@ -3026,8 +2980,8 @@ class CustomMessagesComponent extends Messages$1 {
         return true;
     }
 }
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, selector: "kendo-chat-messages", providers: [
+CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-chat-messages", providers: [
         {
             provide: Messages$1,
             useExisting: forwardRef(() => CustomMessagesComponent)
@@ -3043,9 +2997,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                         }
                     ],
                     selector: 'kendo-chat-messages',
-                    template: ``
+                    template: ``,
+                    standalone: true
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
 /**
  * Represents a Hero Card component ([see example]({% slug dialogflow_chat %})).
@@ -3064,7 +3019,7 @@ class HeroCardComponent {
     }
 }
 HeroCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeroCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HeroCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: `
+HeroCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HeroCardComponent, isStandalone: true, selector: "kendo-chat-hero-card", inputs: { imageUrl: "imageUrl", title: "title", subtitle: "subtitle", actions: "actions" }, outputs: { executeAction: "executeAction" }, host: { properties: { "class.k-card": "this.cssClass" } }, ngImport: i0, template: `
         <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />
         <div class="k-card-body">
         <h5 class="k-card-title" *ngIf="title">
@@ -3086,7 +3041,7 @@ HeroCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             </button>
         </span>
         </div>
-    `, isInline: true, dependencies: [{ kind: "component", 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"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton], 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeroCardComponent, decorators: [{
             type: Component,
             args: [{
@@ -3113,7 +3068,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             </button>
         </span>
         </div>
-    `
+    `,
+                    standalone: true,
+                    imports: [NgIf, NgFor, ButtonComponent]
                 }]
         }], propDecorators: { imageUrl: [{
                 type: Input
@@ -3130,7 +3087,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Output
             }] } });
 
-const PUBLIC_DIRECTIVES = [
+/**
+ * Utility array that contains all `AIPrompt` related components and directives
+ */
+const KENDO_AIPROMPT = [
+    AIPromptComponent,
+    PromptViewComponent,
+    OutputViewComponent,
+    CommandViewComponent,
+    CustomViewComponent,
+    AIPromptCustomMessagesComponent,
+    AIPromptToolbarActionsDirective,
+    AIPromptToolbarFocusableDirective
+];
+/**
+ * Utility array that contains all `Chat` related components and directives
+ */
+const KENDO_CHAT = [
     ChatComponent,
     CustomMessagesComponent,
     AttachmentTemplateDirective,
@@ -3138,18 +3111,51 @@ const PUBLIC_DIRECTIVES = [
     HeroCardComponent,
     ChatMessageBoxTemplateDirective
 ];
-const PRIVATE_DIRECTIVES = [
-    AttachmentComponent,
-    FocusedStateDirective,
-    LocalizedMessagesDirective$1,
-    MessageAttachmentsComponent,
-    MessageComponent,
-    MessageListComponent,
-    MessageTemplateDirective,
-    ScrollAnchorDirective,
-    SuggestedActionsComponent,
-    MessageBoxComponent
+/**
+ * Utility array that contains all `@progress/kendo-angular-conversational-ui` related components and directives
+ */
+const KENDO_CONVERSATIONALUI = [
+    ...KENDO_AIPROMPT,
+    ...KENDO_CHAT
 ];
+
+// IMPORTANT: NgModule export kept for backwards compatibility
+/**
+ * The [NgModule](link:site.data.urls.angular['ngmodules']) for the AIPrompt component.
+ *
+ * @example
+ * ```ts-no-run
+ * import { NgModule } from '@angular/core';
+ * import { Component } from '@angular/core';
+ * import { BrowserModule } from '@angular/platform-browser';
+ *
+ * import { AIPromptModule } from '@progress/kendo-angular-conversational-ui';
+ * import { AppComponent }   from './app.component';
+ *
+ * _@NgModule({
+ *   imports:      [ BrowserModule, AIPromptModule ],
+ *   declarations: [ AppComponent ],
+ *   bootstrap:    [ AppComponent ]
+ * })
+ *
+ * export class AppModule { }
+ * ```
+ */
+class AIPromptModule {
+}
+AIPromptModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AIPromptModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AIPromptModule, imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective], exports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective] });
+AIPromptModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [...KENDO_AIPROMPT],
+                    imports: [...KENDO_AIPROMPT],
+                    providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService]
+                }]
+        }] });
+
+// IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * The [NgModule](link:site.data.urls.angular['ngmodules']) for the Chat component.
  *
@@ -3174,47 +3180,18 @@ const PRIVATE_DIRECTIVES = [
 class ChatModule {
 }
 ChatModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ChatModule, declarations: [ChatComponent,
-        CustomMessagesComponent,
-        AttachmentTemplateDirective,
-        MessageTemplateDirective,
-        HeroCardComponent,
-        ChatMessageBoxTemplateDirective, AttachmentComponent,
-        FocusedStateDirective,
-        LocalizedMessagesDirective$1,
-        MessageAttachmentsComponent,
-        MessageComponent,
-        MessageListComponent,
-        MessageTemplateDirective,
-        ScrollAnchorDirective,
-        SuggestedActionsComponent,
-        MessageBoxComponent], imports: [ButtonModule,
-        CommonModule,
-        ResizeSensorModule], exports: [ChatComponent,
-        CustomMessagesComponent,
-        AttachmentTemplateDirective,
-        MessageTemplateDirective,
-        HeroCardComponent,
-        ChatMessageBoxTemplateDirective] });
-ChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatModule, imports: [ButtonModule,
-        CommonModule,
-        ResizeSensorModule] });
+ChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ChatModule, imports: [ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective], exports: [ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective] });
+ChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatModule, providers: [IconsService, ResizeBatchService], imports: [ChatComponent, CustomMessagesComponent, HeroCardComponent] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        ...PUBLIC_DIRECTIVES,
-                        ...PRIVATE_DIRECTIVES
-                    ],
-                    exports: [PUBLIC_DIRECTIVES],
-                    imports: [
-                        ButtonModule,
-                        CommonModule,
-                        ResizeSensorModule
-                    ]
+                    exports: [...KENDO_CHAT],
+                    imports: [...KENDO_CHAT],
+                    providers: [IconsService, ResizeBatchService]
                 }]
         }] });
 
+// IMPORTANT: NgModule export kept for backwards compatibility
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
  * definition for the Conversational UI components.
@@ -3249,12 +3226,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
 class ConversationalUIModule {
 }
 ConversationalUIModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ConversationalUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ConversationalUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ConversationalUIModule, exports: [AIPromptModule, ChatModule] });
-ConversationalUIModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ConversationalUIModule, imports: [AIPromptModule, ChatModule] });
+ConversationalUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ConversationalUIModule, imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective], exports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective] });
+ConversationalUIModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ConversationalUIModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, ChatComponent, CustomMessagesComponent, HeroCardComponent] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ConversationalUIModule, decorators: [{
             type: NgModule,
             args: [{
-                    exports: [AIPromptModule, ChatModule]
+                    exports: [...KENDO_CONVERSATIONALUI],
+                    imports: [...KENDO_CONVERSATIONALUI],
+                    providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService]
                 }]
         }] });
 
@@ -3262,5 +3241,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AIPromptComponent, AIPromptCustomMessagesComponent, AIPromptModule, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, AttachmentTemplateDirective, ChatComponent, ChatMessageBoxTemplateDirective, ChatModule, CommandViewComponent, ConversationalUIModule, CustomMessagesComponent, CustomViewComponent, ExecuteActionEvent, HeroCardComponent, MessageTemplateDirective, OutputViewComponent, PromptViewComponent, SendMessageEvent };
+export { AIPromptComponent, AIPromptCustomMessagesComponent, AIPromptModule, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, AttachmentTemplateDirective, ChatComponent, ChatMessageBoxTemplateDirective, ChatModule, CommandViewComponent, ConversationalUIModule, CustomMessagesComponent, CustomViewComponent, ExecuteActionEvent, HeroCardComponent, KENDO_AIPROMPT, KENDO_CHAT, KENDO_CONVERSATIONALUI, MessageTemplateDirective, OutputViewComponent, PromptViewComponent, SendMessageEvent };