@progress/kendo-angular-conversational-ui 19.3.0-develop.4 → 19.3.0-develop.40

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

@@ -3,22 +3,28 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Directive, Optional, EventEmitter, Component, HostBinding, ViewChild, Input, Output, isDevMode, forwardRef, ViewChildren, ElementRef, ContentChild, InjectionToken, Inject, Injectable, ContentChildren, NgModule } from '@angular/core';
+import { Directive, Optional, EventEmitter, Component, HostBinding, ViewChild, Input, Output, isDevMode, forwardRef, ViewChildren, ElementRef, ContentChild, InjectionToken, Inject, Injectable, ContentChildren, inject, SkipSelf, HostListener, ViewContainerRef, 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 { 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, thumbUpIcon, thumbDownOutlineIcon, thumbDownIcon, thumbUpOutlineIcon, copyIcon, arrowRotateCwIcon, chevronUpIcon, chevronDownIcon } from '@progress/kendo-svg-icons';
-import { ButtonComponent } from '@progress/kendo-angular-buttons';
-import { TextBoxComponent, TextAreaComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextAreaSuffixComponent } from '@progress/kendo-angular-inputs';
+import { NgIf, NgTemplateOutlet, NgFor, NgSwitch, NgSwitchCase, NgClass } from '@angular/common';
+import { Keys, normalizeNumpadKeys, ResizeSensorComponent, isPresent, focusableSelector, guid, isDocumentAvailable, ResizeBatchService } from '@progress/kendo-angular-common';
+import { paperPlaneIcon, chevronLeftIcon, chevronRightIcon, sparklesIcon, commentIcon, moreHorizontalIcon, stopSmIcon, thumbUpIcon, thumbDownOutlineIcon, thumbDownIcon, thumbUpOutlineIcon, copyIcon, arrowRotateCwIcon, chevronUpIcon, chevronDownIcon, cancelOutlineIcon, menuIcon } from '@progress/kendo-svg-icons';
+import * as i2 from '@progress/kendo-angular-buttons';
+import { ButtonComponent, FloatingActionButtonComponent, SpeechToTextButtonComponent, KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
+import * as i3 from '@progress/kendo-angular-inputs';
+import { TextBoxComponent, TextAreaComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextAreaSuffixComponent, KENDO_TEXTAREA } from '@progress/kendo-angular-inputs';
 import * as i1 from '@progress/kendo-angular-intl';
 import { fromEvent, Subscription, Subject } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
+import { debounceTime, take } from 'rxjs/operators';
 import { IconsService } from '@progress/kendo-angular-icons';
-import { PopupService } from '@progress/kendo-angular-popup';
+import * as i1$2 from '@progress/kendo-angular-popup';
+import { PopupComponent, KENDO_POPUP, PopupService } from '@progress/kendo-angular-popup';
 import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
-import { PanelBarComponent } from '@progress/kendo-angular-layout';
+import * as i5 from '@progress/kendo-angular-layout';
+import { PanelBarComponent, KENDO_CARD } from '@progress/kendo-angular-layout';
+import * as i4 from '@progress/kendo-angular-menu';
+import { KENDO_CONTEXTMENU } from '@progress/kendo-angular-menu';
 
 /**
  * Defines a template for displaying message attachments.
@@ -136,8 +142,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1752065673,
-    version: '19.3.0-develop.4',
+    publishDate: 1754990786,
+    version: '19.3.0-develop.40',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -211,7 +217,7 @@ class MessageBoxComponent {
      * @hidden
      */
     inputKeydown(e) {
-        if (e.keyCode === Keys.Enter) {
+        if (e.code === Keys.Enter || e.code === Keys.NumpadEnter) {
             this.sendClick();
         }
     }
@@ -219,7 +225,7 @@ class MessageBoxComponent {
      * @hidden
      */
     textAreaKeydown(e) {
-        const isEnter = e.keyCode === Keys.Enter;
+        const isEnter = e.code === Keys.Enter || e.code === Keys.NumpadEnter;
         if (!isEnter) {
             return;
         }
@@ -298,7 +304,7 @@ class MessageBoxComponent {
     </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: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { 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: "component", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }] });
+`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageBoxComponent, decorators: [{
             type: Component,
@@ -553,7 +559,7 @@ class SuggestedActionsComponent extends ChatItem {
         this.dispatch.next(action);
     }
     actionKeydown(e, action) {
-        const handler = this.keyHandlers[e.keyCode];
+        const handler = this.keyHandlers[normalizeNumpadKeys(e)];
         if (handler) {
             handler(e, action);
         }
@@ -917,7 +923,8 @@ class MessageAttachmentsComponent extends ChatItem {
     itemKeydown(e, attachment) {
         const keyHandlers = this.layout === 'list' ?
             this.listKeyHandlers : this.carouselKeyHandlers;
-        const handler = keyHandlers[e.keyCode];
+        const code = normalizeNumpadKeys(e);
+        const handler = keyHandlers[code];
         if (handler) {
             handler(e, attachment);
         }
@@ -1149,7 +1156,9 @@ class MessageListComponent {
         return this.intl.formatDate(date, { date: 'full' });
     }
     onKeydown(e) {
-        const action = this.keyActions[e.keyCode];
+        // On some keyboards Numpad keys are used for Home/End/PageUp/PageDown.
+        const code = normalizeNumpadKeys(e);
+        const action = this.keyActions[code];
         if (action) {
             action(e);
         }
@@ -1511,7 +1520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * @hidden
  */
-let Messages$1 = class Messages extends ComponentMessages {
+let Messages$2 = class Messages extends ComponentMessages {
     /**
      * Sets the placeholder text for the message text input.
      */
@@ -1543,7 +1552,7 @@ let Messages$1 = class Messages extends ComponentMessages {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, selector: "kendoConversationalUIMessages", inputs: { messagePlaceholder: "messagePlaceholder", send: "send", messageListLabel: "messageListLabel", messageBoxInputLabel: "messageBoxInputLabel", messageAttachmentLeftArrow: "messageAttachmentLeftArrow", messageAttachmentRightArrow: "messageAttachmentRightArrow", messageAvatarAlt: "messageAvatarAlt" }, usesInheritance: true, ngImport: i0 });
 };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages$1, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages$2, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1569,7 +1578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * @hidden
  */
-let LocalizedMessagesDirective$1 = class LocalizedMessagesDirective extends Messages$1 {
+let LocalizedMessagesDirective$2 = class LocalizedMessagesDirective extends Messages$2 {
     service;
     constructor(service) {
         super();
@@ -1578,18 +1587,18 @@ let LocalizedMessagesDirective$1 = class LocalizedMessagesDirective extends Mess
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoChatLocalizedMessages]", providers: [
             {
-                provide: Messages$1,
+                provide: Messages$2,
                 useExisting: forwardRef(() => LocalizedMessagesDirective)
             }
         ], usesInheritance: true, ngImport: i0 });
 };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective$1, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective$2, decorators: [{
             type: Directive,
             args: [{
                     providers: [
                         {
-                            provide: Messages$1,
-                            useExisting: forwardRef(() => LocalizedMessagesDirective$1)
+                            provide: Messages$2,
+                            useExisting: forwardRef(() => LocalizedMessagesDirective$2)
                         }
                     ],
                     selector: '[kendoChatLocalizedMessages]',
@@ -1786,7 +1795,7 @@ class ChatComponent {
         (sendMessage)="sendMessage.emit($event)"
         >
         </kendo-message-box>
-    `, 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"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$2, 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: "16.2.12", ngImport: i0, type: ChatComponent, decorators: [{
             type: Component,
@@ -1858,7 +1867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </kendo-message-box>
     `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective$1, ScrollAnchorDirective, MessageListComponent, MessageBoxComponent]
+                    imports: [LocalizedMessagesDirective$2, ScrollAnchorDirective, MessageListComponent, MessageBoxComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { messages: [{
                 type: Input
@@ -2003,6 +2012,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
+/**
+ * @hidden
+ * Default settings for the Speech to Text button.
+ * These settings can be overridden by the user.
+ */
+const STB_DEFAULT_SETTINGS = {
+    continuous: false,
+    disabled: false,
+    fillMode: 'flat',
+    integrationMode: 'webSpeech',
+    interimResults: false,
+    lang: 'en-US',
+    maxAlternatives: 1,
+    rounded: 'medium',
+    size: 'medium',
+    themeColor: 'base'
+};
 /**
  * @hidden
  */
@@ -2017,6 +2043,24 @@ class AIPromptService {
     promptCommands;
     promptOutputs;
     promptSuggestions;
+    textAreaSettings;
+    outputTemplate;
+    outputBodyTemplate;
+    _speechToTextButton;
+    get speechToTextButton() {
+        return this._speechToTextButton;
+    }
+    set speechToTextButton(settings) {
+        if (settings === true) {
+            this._speechToTextButton = STB_DEFAULT_SETTINGS;
+        }
+        else if (settings === false) {
+            this._speechToTextButton = null;
+        }
+        else {
+            this._speechToTextButton = { ...settings };
+        }
+    }
     getFlattenPromptCommands(commands = this.promptCommands) {
         let newArr = [];
         commands.forEach(c => {
@@ -2151,9 +2195,10 @@ class AIPromptToolbarFocusableDirective {
         this.element.focus();
     }
     keyDownHandler = (e) => {
+        const code = normalizeNumpadKeys(e);
         const targetsSelf = e.target === this.element;
-        const isLeftArrow = e.keyCode === Keys.ArrowLeft;
-        const isRightArrow = e.keyCode === Keys.ArrowRight;
+        const isLeftArrow = code === Keys.ArrowLeft;
+        const isRightArrow = code === Keys.ArrowRight;
         const isArrow = isLeftArrow || isRightArrow;
         if (!targetsSelf || !isArrow) {
             return;
@@ -2186,7 +2231,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 /**
  * @hidden
  */
-class Messages extends ComponentMessages {
+let Messages$1 = class Messages extends ComponentMessages {
     /**
      * Sets the Toolbar button text for the **Prompt** view.
      */
@@ -2223,10 +2268,14 @@ class Messages extends ComponentMessages {
      * Sets the title of the **Prompt suggestions** button.
      */
     promptSuggestions;
+    /**
+     * Sets the aria-label for the **Speech to Text** button.
+     */
+    speechToTextButton;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, inputs: { promptView: "promptView", outputView: "outputView", generateOutput: "generateOutput", promptPlaceholder: "promptPlaceholder", copyOutput: "copyOutput", retryGeneration: "retryGeneration", outputTitle: "outputTitle", outputRetryTitle: "outputRetryTitle", promptSuggestions: "promptSuggestions" }, usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, inputs: { promptView: "promptView", outputView: "outputView", generateOutput: "generateOutput", promptPlaceholder: "promptPlaceholder", copyOutput: "copyOutput", retryGeneration: "retryGeneration", outputTitle: "outputTitle", outputRetryTitle: "outputRetryTitle", promptSuggestions: "promptSuggestions", speechToTextButton: "speechToTextButton" }, usesInheritance: true, ngImport: i0 });
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages$1, decorators: [{
             type: Directive
         }], propDecorators: { promptView: [{
                 type: Input
@@ -2246,12 +2295,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], promptSuggestions: [{
                 type: Input
+            }], speechToTextButton: [{
+                type: Input
             }] } });
 
 /**
  * @hidden
  */
-class LocalizedMessagesDirective extends Messages {
+let LocalizedMessagesDirective$1 = class LocalizedMessagesDirective extends Messages$1 {
     service;
     constructor(service) {
         super();
@@ -2260,18 +2311,18 @@ class LocalizedMessagesDirective extends Messages {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoAIPromptLocalizedMessages]", providers: [
             {
-                provide: Messages,
+                provide: Messages$1,
                 useExisting: forwardRef(() => LocalizedMessagesDirective)
             }
         ], usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective$1, decorators: [{
             type: Directive,
             args: [{
                     providers: [
                         {
-                            provide: Messages,
-                            useExisting: forwardRef(() => LocalizedMessagesDirective)
+                            provide: Messages$1,
+                            useExisting: forwardRef(() => LocalizedMessagesDirective$1)
                         }
                     ],
                     selector: '[kendoAIPromptLocalizedMessages]',
@@ -2279,6 +2330,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
 
+/**
+ * Represents the template for the response in the AIPrompt component. The template context is set to the current output object.
+ *
+ * @example
+ * ```html
+ * <kendo-aiprompt>
+ *   <ng-template kendoAIPromptOutputTemplate let-output>
+ *     <div>{{output.prompt}}</div>
+ *   </ng-template>
+ * </kendo-aiprompt>
+ * ```
+ */
+class AIPromptOutputTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptOutputTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AIPromptOutputTemplateDirective, isStandalone: true, selector: "[kendoAIPromptOutputTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptOutputTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoAIPromptOutputTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+/**
+ * Represents the template for the body of the response in the AIPrompt component. The template context is set to the current output object.
+ *
+ * @example
+ * ```html
+ * <kendo-aiprompt>
+ *   <ng-template kendoAIPromptOutputBodyTemplate let-output>
+ *     <div>{{output.prompt}}</div>
+ *   </ng-template>
+ * </kendo-aiprompt>
+ * ```
+ */
+class AIPromptOutputBodyTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptOutputBodyTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AIPromptOutputBodyTemplateDirective, isStandalone: true, selector: "[kendoAIPromptOutputBodyTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptOutputBodyTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoAIPromptOutputBodyTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
 /**
  * Represents the [Kendo UI AIPrompt component for Angular](slug:overview_aiprompt).
  *
@@ -2301,21 +2408,29 @@ class AIPromptComponent {
     service;
     navigationService;
     ngZone;
+    element;
+    renderer;
     hostClasses = true;
     get dirAttr() {
         return this.direction;
     }
-    constructor(localization, service, navigationService, ngZone) {
+    constructor(localization, service, navigationService, ngZone, element, renderer) {
         this.localization = localization;
         this.service = service;
         this.navigationService = navigationService;
         this.ngZone = ngZone;
+        this.element = element;
+        this.renderer = renderer;
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         this.subs.add(localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         }));
     }
+    /**
+     * @hidden
+     */
+    fabButton;
     /**
      * @hidden
      */
@@ -2324,6 +2439,14 @@ class AIPromptComponent {
      * @hidden
      */
     toolbarActionsTemplate;
+    /**
+     * @hidden
+     */
+    outputTemplate;
+    /**
+     * @hidden
+     */
+    outputBodyTemplate;
     /**
      * The active view index of the AIPrompt component.
      */
@@ -2337,54 +2460,120 @@ class AIPromptComponent {
         return this._activeView;
     }
     /**
-     * Sets the collection of commands to render in the **Command** view.
+     * Sets the collection of commands to render in the Command view.
      */
     set promptCommands(value) {
         this.service.promptCommands = value;
     }
     /**
-     * Sets the collection of suggestions to render in the **Prompt** view.
+     * Sets the collection of suggestions to render in the Prompt view.
      */
     set promptSuggestions(value) {
         this.service.promptSuggestions = value;
     }
     /**
-     * Sets the collection of generated prompt outputs to render in the **Output** view.
+     * Sets the collection of generated prompt outputs to render in the Output view.
      */
     set promptOutputs(value) {
         this.service.promptOutputs = value;
     }
     /**
-     * Specifies if the rating buttons appear in each **Output** view card.
-     * By default, the rating buttons do not appear.
+     * Specifies whether the rating buttons appear in each Output view card.
+     * The rating buttons do not appear by default.
      * @default false
      */
     set showOutputRating(value) {
         this.service.showOutputRating = value;
     }
+    /**
+     * Specifies whether the Stop generation button appears in the Output view.
+     * The Stop generation button does not appear by default.
+     * @default false
+     */
+    streaming = false;
+    /**
+     * Sets the settings for the Speech to Text button in the Prompt view
+     * ([see example](slug:configuration_aiprompt#enabling-speech-to-text)).
+     */
+    set speechToTextButton(settings) {
+        if (settings) {
+            this.service.speechToTextButton = settings;
+        }
+        else {
+            this.service.speechToTextButton = false;
+        }
+    }
+    /**
+     * Sets the settings for the TextArea in the Prompt view
+     * ([see example](slug:configuration_aiprompt#configuring-the-prompt-text-area)).
+     */
+    set textAreaSettings(settings) {
+        this.service.textAreaSettings = settings;
+    }
+    /**
+     * Sets the SVG icon for the Generate button in the Prompt view.
+     */
+    generateButtonSVGIcon = sparklesIcon;
+    /**
+     * Sets the icon for the Generate button in the Prompt view.
+     * @default 'sparkles'
+     */
+    generateButtonIcon = 'sparkles';
+    /**
+     * Sets the disabled state for the Generate button in the Prompt view.
+     * @default false
+     */
+    disabledGenerateButton = false;
     /**
      * Fires when the `activeView` property is updated.
      * Use this event for two-way binding of the `activeView` property.
      */
     activeViewChange = new EventEmitter();
     /**
-     * Fires when the user clicks the **Generate** button in the **Prompt** view or the **Retry** button in the **Output** view.
+     * Fires when you click the Generate button in the Prompt view or the Retry button in the Output view.
      * Use the event's `isRetry` field to determine the source element.
      */
     promptRequest = new EventEmitter();
     /**
-     * Fires when the user clicks a **Command** view command.
+     * Fires when you click a Command view command.
      * The event data contains the selected command.
      */
     commandExecute = new EventEmitter();
     /**
-     * Fires when the user clicks a **Copy** button in any **Output** view card.
+     * Fires when you click a Copy button in any Output view card.
      */
     outputCopy = new EventEmitter();
     /**
-     * Fires when the user clicks a rating button in any **Output** view card.
+     * Fires when you click a rating button in any Output view card.
      */
     outputRatingChange = new EventEmitter();
+    /**
+     * Fires when you click the Stop Generation button in the Output view.
+     */
+    promptRequestCancel = new EventEmitter();
+    ngOnInit() {
+        const aiPromptElement = this.element.nativeElement;
+        this.subs.add(this.renderer.listen(aiPromptElement, 'keydown', (event) => {
+            if (event.key === 'Escape') {
+                this.promptRequestCancel.emit();
+            }
+        }));
+    }
+    ngOnChanges(changes) {
+        if (changes['streaming'] && changes['streaming'].currentValue === true) {
+            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+                this.fabButton?.focus();
+            });
+        }
+    }
+    ngAfterContentChecked() {
+        if (this.outputTemplate !== this.service.outputTemplate) {
+            this.service.outputTemplate = this.outputTemplate;
+        }
+        if (this.outputBodyTemplate !== this.service.outputBodyTemplate) {
+            this.service.outputBodyTemplate = this.outputBodyTemplate;
+        }
+    }
     ngAfterViewInit() {
         this.ngZone.runOutsideAngular(() => {
             this.service.aiPrompt = this;
@@ -2418,12 +2607,24 @@ class AIPromptComponent {
      * @hidden
      */
     outputIcon = commentIcon;
+    /**
+     * @hidden
+     */
+    fabStopGenerationSVGIcon = stopSmIcon;
     /**
      * @hidden
      */
     get viewsArray() {
         return this.views?.toArray();
     }
+    /**
+     * @hidden
+     */
+    fabPositionMode = 'absolute';
+    /**
+     * @hidden
+     */
+    fabAlignment = { vertical: 'bottom', horizontal: 'end' };
     direction;
     _activeView = 0;
     /**
@@ -2459,8 +2660,8 @@ class AIPromptComponent {
         };
         this.promptRequest.emit(eventArgs);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }, { token: ToolbarNavigationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }, { token: ToolbarNavigationService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AIPromptComponent, isStandalone: true, selector: "kendo-aiprompt", inputs: { activeView: "activeView", promptCommands: "promptCommands", promptSuggestions: "promptSuggestions", promptOutputs: "promptOutputs", showOutputRating: "showOutputRating", streaming: "streaming", speechToTextButton: "speechToTextButton", textAreaSettings: "textAreaSettings", generateButtonSVGIcon: "generateButtonSVGIcon", generateButtonIcon: "generateButtonIcon", disabledGenerateButton: "disabledGenerateButton" }, outputs: { activeViewChange: "activeViewChange", promptRequest: "promptRequest", commandExecute: "commandExecute", outputCopy: "outputCopy", outputRatingChange: "outputRatingChange", promptRequestCancel: "promptRequestCancel" }, host: { properties: { "class.k-prompt": "this.hostClasses", "attr.dir": "this.dirAttr" } }, providers: [
             LocalizationService,
             AIPromptService,
             ToolbarNavigationService,
@@ -2468,7 +2669,7 @@ class AIPromptComponent {
                 provide: L10N_PREFIX,
                 useValue: 'kendo.aiprompt'
             }
-        ], queries: [{ propertyName: "toolbarActionsTemplate", first: true, predicate: AIPromptToolbarActionsDirective, descendants: true }, { propertyName: "views", predicate: BaseView }], exportAs: ["kendoAIPrompt"], ngImport: i0, template: `
+        ], queries: [{ propertyName: "toolbarActionsTemplate", first: true, predicate: AIPromptToolbarActionsDirective, descendants: true }, { propertyName: "outputTemplate", first: true, predicate: AIPromptOutputTemplateDirective, descendants: true }, { propertyName: "outputBodyTemplate", first: true, predicate: AIPromptOutputBodyTemplateDirective, descendants: true }, { propertyName: "views", predicate: BaseView }], viewQueries: [{ propertyName: "fabButton", first: true, predicate: ["fabButton"], descendants: true }], exportAs: ["kendoAIPrompt"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoAIPromptLocalizedMessages
             i18n-promptView="kendo.aiprompt.promptView|The Toolbar button text for the Prompt view."
             promptView="Ask AI"
@@ -2487,7 +2688,9 @@ class AIPromptComponent {
             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">
+            promptSuggestions="Prompt suggestions"
+            i18n-speechToTextButton="kendo.aiprompt.speechToTextButton|The aria-label for the Speech to Text button."
+            speechToTextButton="Voice input">
         </ng-container>
         <div class="k-prompt-header">
             <div class="k-toolbar-flat k-toolbar k-toolbar-md"
@@ -2512,6 +2715,16 @@ class AIPromptComponent {
             </div>
         </div>
         <div class="k-prompt-content">
+            <kendo-floatingactionbutton #fabButton *ngIf="streaming && selectedView?.viewType === 'output'" 
+                class="k-prompt-stop-fab"
+                buttonClass="k-generating k-active" 
+                [positionMode]="fabPositionMode" 
+                [align]="fabAlignment"
+                [svgIcon]="fabStopGenerationSVGIcon"
+                icon="stop"
+                (click)="promptRequestCancel.emit()"
+            >
+            </kendo-floatingactionbutton>
             <div class="k-prompt-view">
                 <ng-container *ngTemplateOutlet="viewTemplate">
                 </ng-container>
@@ -2524,12 +2737,16 @@ class AIPromptComponent {
                     type="button"
                     themeColor="primary"
                     rounded="full"
-                    [svgIcon]="sparklesIcon"
-                    icon="sparkles"
+                    [attr.title]="messageFor('generateOutput')"
+                    [attr.aria-label]="messageFor('generateOutput')"
+                    [attr.aria-disabled]="disabledGenerateButton"
+                    [svgIcon]="generateButtonSVGIcon"
+                    [icon]="generateButtonIcon"
+                    [disabled]="disabledGenerateButton"
                     (click)="handleGenerateOutput()">{{messageFor('generateOutput')}}</button>
             </div>
         </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoAIPromptLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: AIPromptToolbarFocusableDirective, selector: "[kendoAIPromptToolbarFocusable]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$1, selector: "[kendoAIPromptLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: AIPromptToolbarFocusableDirective, selector: "[kendoAIPromptToolbarFocusable]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["themeColor", "size", "rounded", "disabled", "align", "offset", "positionMode", "icon", "svgIcon", "iconClass", "buttonClass", "dialClass", "text", "dialItemAnimation", "tabIndex", "dialItems"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptComponent, decorators: [{
             type: Component,
@@ -2564,7 +2781,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             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">
+            promptSuggestions="Prompt suggestions"
+            i18n-speechToTextButton="kendo.aiprompt.speechToTextButton|The aria-label for the Speech to Text button."
+            speechToTextButton="Voice input">
         </ng-container>
         <div class="k-prompt-header">
             <div class="k-toolbar-flat k-toolbar k-toolbar-md"
@@ -2589,6 +2808,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             </div>
         </div>
         <div class="k-prompt-content">
+            <kendo-floatingactionbutton #fabButton *ngIf="streaming && selectedView?.viewType === 'output'" 
+                class="k-prompt-stop-fab"
+                buttonClass="k-generating k-active" 
+                [positionMode]="fabPositionMode" 
+                [align]="fabAlignment"
+                [svgIcon]="fabStopGenerationSVGIcon"
+                icon="stop"
+                (click)="promptRequestCancel.emit()"
+            >
+            </kendo-floatingactionbutton>
             <div class="k-prompt-view">
                 <ng-container *ngTemplateOutlet="viewTemplate">
                 </ng-container>
@@ -2601,27 +2830,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     type="button"
                     themeColor="primary"
                     rounded="full"
-                    [svgIcon]="sparklesIcon"
-                    icon="sparkles"
+                    [attr.title]="messageFor('generateOutput')"
+                    [attr.aria-label]="messageFor('generateOutput')"
+                    [attr.aria-disabled]="disabledGenerateButton"
+                    [svgIcon]="generateButtonSVGIcon"
+                    [icon]="generateButtonIcon"
+                    [disabled]="disabledGenerateButton"
                     (click)="handleGenerateOutput()">{{messageFor('generateOutput')}}</button>
             </div>
         </div>
     `,
                     standalone: true,
-                    imports: [LocalizedMessagesDirective, NgFor, ButtonComponent, AIPromptToolbarFocusableDirective, NgIf, NgTemplateOutlet]
+                    imports: [LocalizedMessagesDirective$1, NgFor, ButtonComponent, AIPromptToolbarFocusableDirective, NgIf, NgTemplateOutlet, FloatingActionButtonComponent]
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }, { type: ToolbarNavigationService }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }, { type: ToolbarNavigationService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-prompt']
             }], dirAttr: [{
                 type: HostBinding,
                 args: ['attr.dir']
+            }], fabButton: [{
+                type: ViewChild,
+                args: ['fabButton']
             }], views: [{
                 type: ContentChildren,
                 args: [BaseView]
             }], toolbarActionsTemplate: [{
                 type: ContentChild,
                 args: [AIPromptToolbarActionsDirective]
+            }], outputTemplate: [{
+                type: ContentChild,
+                args: [AIPromptOutputTemplateDirective]
+            }], outputBodyTemplate: [{
+                type: ContentChild,
+                args: [AIPromptOutputBodyTemplateDirective]
             }], activeView: [{
                 type: Input
             }], promptCommands: [{
@@ -2632,6 +2874,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], showOutputRating: [{
                 type: Input
+            }], streaming: [{
+                type: Input
+            }], speechToTextButton: [{
+                type: Input
+            }], textAreaSettings: [{
+                type: Input
+            }], generateButtonSVGIcon: [{
+                type: Input
+            }], generateButtonIcon: [{
+                type: Input
+            }], disabledGenerateButton: [{
+                type: Input
             }], activeViewChange: [{
                 type: Output
             }], promptRequest: [{
@@ -2642,6 +2896,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], outputRatingChange: [{
                 type: Output
+            }], promptRequestCancel: [{
+                type: Output
             }] } });
 
 /**
@@ -2747,7 +3003,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * </kendo-aiprompt-messages>
  * ```
  */
-class AIPromptCustomMessagesComponent extends Messages {
+class AIPromptCustomMessagesComponent extends Messages$1 {
     service;
     constructor(service) {
         super();
@@ -2759,7 +3015,7 @@ class AIPromptCustomMessagesComponent extends Messages {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AIPromptCustomMessagesComponent, isStandalone: true, selector: "kendo-aiprompt-messages", providers: [
             {
-                provide: Messages,
+                provide: Messages$1,
                 useExisting: forwardRef(() => AIPromptCustomMessagesComponent)
             }
         ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
@@ -2769,7 +3025,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providers: [
                         {
-                            provide: Messages,
+                            provide: Messages$1,
                             useExisting: forwardRef(() => AIPromptCustomMessagesComponent)
                         }
                     ],
@@ -2906,6 +3162,12 @@ class AIPromptOutputCardComponent {
             this.positiveRatingIcon = thumbUpOutlineIcon;
         }
     }
+    /**
+     * @hidden
+     */
+    get customBodyTemplate() {
+        return this.service.outputBodyTemplate?.templateRef;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptOutputCardComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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">
@@ -2916,7 +3178,13 @@ class AIPromptOutputCardComponent {
             <div class="k-card-subtitle">{{promptOutput.prompt}}</div>
         </div>
         <div class="k-card-body">
-            <p>{{promptOutput.output}}</p>
+            <ng-container *ngIf="customBodyTemplate; else defaultTemplate">
+                <ng-container *ngTemplateOutlet="customBodyTemplate; context: { $implicit: promptOutput }">
+                </ng-container>
+            </ng-container>
+            <ng-template #defaultTemplate>
+                <p>{{promptOutput.output}}</p>
+            </ng-template>
         </div>
         <div class="k-actions k-actions-start k-actions-horizontal k-card-actions">
             <button kendoButton
@@ -2950,7 +3218,7 @@ class AIPromptOutputCardComponent {
                 </button>
             </ng-container>
         </div>
-    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptOutputCardComponent, decorators: [{
             type: Component,
@@ -2965,7 +3233,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <div class="k-card-subtitle">{{promptOutput.prompt}}</div>
         </div>
         <div class="k-card-body">
-            <p>{{promptOutput.output}}</p>
+            <ng-container *ngIf="customBodyTemplate; else defaultTemplate">
+                <ng-container *ngTemplateOutlet="customBodyTemplate; context: { $implicit: promptOutput }">
+                </ng-container>
+            </ng-container>
+            <ng-template #defaultTemplate>
+                <p>{{promptOutput.output}}</p>
+            </ng-template>
         </div>
         <div class="k-actions k-actions-start k-actions-horizontal k-card-actions">
             <button kendoButton
@@ -3001,7 +3275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         </div>
     `,
                     standalone: true,
-                    imports: [ButtonComponent, NgIf]
+                    imports: [ButtonComponent, NgIf, NgTemplateOutlet]
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -3044,6 +3318,12 @@ class OutputViewComponent extends BaseView {
     get promptOutputs() {
         return this.service.promptOutputs;
     }
+    /**
+     * @hidden
+     */
+    get customTemplate() {
+        return this.service.outputTemplate?.templateRef;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OutputViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OutputViewComponent, isStandalone: true, selector: "kendo-aiprompt-output-view", providers: [{
                 provide: BaseView,
@@ -3053,13 +3333,18 @@ class OutputViewComponent extends BaseView {
             <div
                 class="k-card-list"
                 role="list">
-                <div *ngFor="let output of promptOutputs"
-                    kendoAIPromptOutputCard
-                    [promptOutput]="output">
-                </div>
+                <ng-container *ngFor="let output of promptOutputs">
+                    <ng-container *ngIf="customTemplate; else defaultTemplate">
+                        <ng-container *ngTemplateOutlet="customTemplate; context: { $implicit: output }">
+                        </ng-container>
+                    </ng-container>
+                    <ng-template #defaultTemplate>
+                        <div kendoAIPromptOutputCard [promptOutput]="output"></div>
+                    </ng-template>
+                </ng-container>
             </div>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AIPromptOutputCardComponent, selector: "[kendoAIPromptOutputCard]", inputs: ["promptOutput"] }] });
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AIPromptOutputCardComponent, selector: "[kendoAIPromptOutputCard]", inputs: ["promptOutput"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OutputViewComponent, decorators: [{
             type: Component,
@@ -3074,15 +3359,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             <div
                 class="k-card-list"
                 role="list">
-                <div *ngFor="let output of promptOutputs"
-                    kendoAIPromptOutputCard
-                    [promptOutput]="output">
-                </div>
+                <ng-container *ngFor="let output of promptOutputs">
+                    <ng-container *ngIf="customTemplate; else defaultTemplate">
+                        <ng-container *ngTemplateOutlet="customTemplate; context: { $implicit: output }">
+                        </ng-container>
+                    </ng-container>
+                    <ng-template #defaultTemplate>
+                        <div kendoAIPromptOutputCard [promptOutput]="output"></div>
+                    </ng-template>
+                </ng-container>
             </div>
         </ng-template>
     `,
                     standalone: true,
-                    imports: [NgFor, AIPromptOutputCardComponent]
+                    imports: [NgFor, AIPromptOutputCardComponent, NgIf, NgTemplateOutlet]
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; } });
 
@@ -3140,6 +3430,42 @@ class PromptViewComponent extends BaseView {
     suggestionClick(suggestion) {
         this.textAreaValue = this.service.promptValue = suggestion;
     }
+    /**
+     * @hidden
+     */
+    suggestionKeydown(event, suggestion) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            this.suggestionClick(suggestion);
+        }
+    }
+    /**
+     * @hidden
+     */
+    get speechToTextButtonSettings() {
+        return this.service.speechToTextButton;
+    }
+    /**
+     * @hidden
+     */
+    get textareaSettings() {
+        return this.service.textAreaSettings;
+    }
+    /**
+     * @hidden
+     */
+    onSpeechToTextResult(event) {
+        if (event.alternatives && event.alternatives.length > 0) {
+            this.textAreaValue += event.alternatives[0].transcript + ' ';
+        }
+    }
+    /**
+     * @hidden
+     */
+    onSpeechToTextError(event) {
+        if (isDevMode()) {
+            console.error('Speech to Text error:', event.errorMessage);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PromptViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PromptViewComponent, isStandalone: true, selector: "kendo-aiprompt-prompt-view", providers: [
             {
@@ -3149,9 +3475,44 @@ class PromptViewComponent extends BaseView {
         ], usesInheritance: true, ngImport: i0, template: `
         <ng-template #content>
             <kendo-textarea
-                [placeholder]="messageFor('promptPlaceholder')"
-                [rows]="1"
-                [(value)]="textAreaValue">
+                [cols]="textareaSettings?.cols"
+                [disabled]="textareaSettings?.disabled"
+                [fillMode]="textareaSettings?.fillMode"
+                [flow]="textareaSettings?.flow ?? 'vertical'"
+                [inputAttributes]="textareaSettings?.inputAttributes"
+                [maxlength]="textareaSettings?.maxlength"
+                [placeholder]="textareaSettings?.placeholder ?? messageFor('promptPlaceholder')"
+                [readonly]="textareaSettings?.readonly"
+                [resizable]="textareaSettings?.resizable ?? 'vertical'"
+                [rounded]="textareaSettings?.rounded"
+                [rows]="textareaSettings?.rows ?? 1"
+                [selectOnFocus]="textareaSettings?.selectOnFocus"
+                [showSuffixSeparator]="textareaSettings?.showSuffixSeparator ?? true"
+                [size]="textareaSettings?.size"
+                [tabIndex]="textareaSettings?.tabindex"
+                [title]="textareaSettings?.title"
+                [(value)]="textAreaValue"
+            >
+                <kendo-textarea-suffix *ngIf="speechToTextButtonSettings">
+                    <button kendoSpeechToTextButton
+                        role="button"
+                        [continuous]="speechToTextButtonSettings?.continuous" 
+                        [disabled]="speechToTextButtonSettings?.disabled" 
+                        [fillMode]="speechToTextButtonSettings?.fillMode ?? 'flat'"
+                        [integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
+                        [interimResults]="speechToTextButtonSettings?.interimResults"
+                        [lang]="speechToTextButtonSettings?.lang"
+                        [maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
+                        [rounded]="speechToTextButtonSettings?.rounded"
+                        [size]="speechToTextButtonSettings?.size"
+                        [themeColor]="speechToTextButtonSettings?.themeColor"
+                        [attr.aria-label]="messageFor('speechToTextButton')"
+                        [attr.title]="messageFor('speechToTextButton')"
+                        [attr.aria-disabled]="speechToTextButtonSettings?.disabled"
+                        (error)="onSpeechToTextError($event)"
+                        (result)="onSpeechToTextResult($event)"
+                    ></button>
+                </kendo-textarea-suffix>
             </kendo-textarea>
             <div *ngIf="promptSuggestions"
                 class="k-prompt-expander">
@@ -3169,16 +3530,22 @@ class PromptViewComponent extends BaseView {
                     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 class="k-suggestion-group" role="group">
+                        <div *ngFor="let suggestion of promptSuggestions"
+                            class="k-suggestion"
+                            role="button"
+                            [attr.tabindex]="0"
+                            [attr.aria-label]="suggestion"
+                            [attr.title]="suggestion"
+                            (click)="suggestionClick(suggestion)"
+                            (keydown)="suggestionKeydown($event, suggestion)">
+                            {{suggestion}}
+                        </div>
                     </div>
                 </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]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, dependencies: [{ kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PromptViewComponent, decorators: [{
             type: Component,
@@ -3193,9 +3560,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     template: `
         <ng-template #content>
             <kendo-textarea
-                [placeholder]="messageFor('promptPlaceholder')"
-                [rows]="1"
-                [(value)]="textAreaValue">
+                [cols]="textareaSettings?.cols"
+                [disabled]="textareaSettings?.disabled"
+                [fillMode]="textareaSettings?.fillMode"
+                [flow]="textareaSettings?.flow ?? 'vertical'"
+                [inputAttributes]="textareaSettings?.inputAttributes"
+                [maxlength]="textareaSettings?.maxlength"
+                [placeholder]="textareaSettings?.placeholder ?? messageFor('promptPlaceholder')"
+                [readonly]="textareaSettings?.readonly"
+                [resizable]="textareaSettings?.resizable ?? 'vertical'"
+                [rounded]="textareaSettings?.rounded"
+                [rows]="textareaSettings?.rows ?? 1"
+                [selectOnFocus]="textareaSettings?.selectOnFocus"
+                [showSuffixSeparator]="textareaSettings?.showSuffixSeparator ?? true"
+                [size]="textareaSettings?.size"
+                [tabIndex]="textareaSettings?.tabindex"
+                [title]="textareaSettings?.title"
+                [(value)]="textAreaValue"
+            >
+                <kendo-textarea-suffix *ngIf="speechToTextButtonSettings">
+                    <button kendoSpeechToTextButton
+                        role="button"
+                        [continuous]="speechToTextButtonSettings?.continuous" 
+                        [disabled]="speechToTextButtonSettings?.disabled" 
+                        [fillMode]="speechToTextButtonSettings?.fillMode ?? 'flat'"
+                        [integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
+                        [interimResults]="speechToTextButtonSettings?.interimResults"
+                        [lang]="speechToTextButtonSettings?.lang"
+                        [maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
+                        [rounded]="speechToTextButtonSettings?.rounded"
+                        [size]="speechToTextButtonSettings?.size"
+                        [themeColor]="speechToTextButtonSettings?.themeColor"
+                        [attr.aria-label]="messageFor('speechToTextButton')"
+                        [attr.title]="messageFor('speechToTextButton')"
+                        [attr.aria-disabled]="speechToTextButtonSettings?.disabled"
+                        (error)="onSpeechToTextError($event)"
+                        (result)="onSpeechToTextResult($event)"
+                    ></button>
+                </kendo-textarea-suffix>
             </kendo-textarea>
             <div *ngIf="promptSuggestions"
                 class="k-prompt-expander">
@@ -3213,18 +3615,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     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 class="k-suggestion-group" role="group">
+                        <div *ngFor="let suggestion of promptSuggestions"
+                            class="k-suggestion"
+                            role="button"
+                            [attr.tabindex]="0"
+                            [attr.aria-label]="suggestion"
+                            [attr.title]="suggestion"
+                            (click)="suggestionClick(suggestion)"
+                            (keydown)="suggestionKeydown($event, suggestion)">
+                            {{suggestion}}
+                        </div>
                     </div>
                 </div>
             </div>
         </ng-template>
     `,
                     standalone: true,
-                    imports: [TextAreaComponent, NgIf, ButtonComponent, NgFor]
+                    imports: [TextAreaComponent, NgIf, ButtonComponent, NgFor, TextAreaSuffixComponent, SpeechToTextButtonComponent]
                 }]
         }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; } });
 
@@ -3243,7 +3651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * </kendo-chat-messages>
  * ```
  */
-class CustomMessagesComponent extends Messages$1 {
+class CustomMessagesComponent extends Messages$2 {
     service;
     constructor(service) {
         super();
@@ -3255,7 +3663,7 @@ class CustomMessagesComponent extends Messages$1 {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-chat-messages", providers: [
             {
-                provide: Messages$1,
+                provide: Messages$2,
                 useExisting: forwardRef(() => CustomMessagesComponent)
             }
         ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
@@ -3265,7 +3673,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     providers: [
                         {
-                            provide: Messages$1,
+                            provide: Messages$2,
                             useExisting: forwardRef(() => CustomMessagesComponent)
                         }
                     ],
@@ -3387,57 +3795,1104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }] } });
 
 /**
- * Utility array that contains all AIPrompt related components and directives.
- *
- * @example
- * ```ts
- * import { Component } from '@angular/core';
- * import { KENDO_AIPROMPT } from '@progress/kendo-angular-conversational-ui';
- *
- * @Component({
- *   standalone: true,
- *   imports: [KENDO_AIPROMPT],
- *   selector: 'my-app',
- *   template: `<kendo-aiprompt></kendo-aiprompt>`
- * })
- * export class AppComponent {}
- * ```
+ * @hidden
  */
-const KENDO_AIPROMPT = [
-    AIPromptComponent,
-    PromptViewComponent,
-    OutputViewComponent,
-    CommandViewComponent,
-    CustomViewComponent,
-    AIPromptCustomMessagesComponent,
-    AIPromptToolbarActionsDirective,
-    AIPromptToolbarFocusableDirective
-];
+class Messages extends ComponentMessages {
+    /**
+     * Sets the Commands button title.
+     */
+    commandsButtonTitle;
+    /**
+     * Sets the Generate button title.
+     */
+    generateButtonTitle;
+    /**
+     * Sets the Speech to Text button title.
+     */
+    speechToTextButtonTitle;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, inputs: { commandsButtonTitle: "commandsButtonTitle", generateButtonTitle: "generateButtonTitle", speechToTextButtonTitle: "speechToTextButtonTitle" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
+            type: Directive
+        }], propDecorators: { commandsButtonTitle: [{
+                type: Input
+            }], generateButtonTitle: [{
+                type: Input
+            }], speechToTextButtonTitle: [{
+                type: Input
+            }] } });
+
 /**
- * Utility array that contains all Chat related components and directives.
- *
- * @example
- * ```ts
- * import { Component } from '@angular/core';
- * import { KENDO_CHAT } from '@progress/kendo-angular-conversational-ui';
- *
- * @Component({
- *   standalone: true,
- *   imports: [KENDO_CHAT],
- *   selector: 'my-app',
- *   template: `<kendo-chat></kendo-chat>`
- * })
- * export class AppComponent {}
- * ```
+ * @hidden
  */
-const KENDO_CHAT = [
-    ChatComponent,
-    CustomMessagesComponent,
-    AttachmentTemplateDirective,
+class LocalizedMessagesDirective extends Messages {
+    service;
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoInlineAIPromptLocalizedMessages]", providers: [
+            {
+                provide: Messages,
+                useExisting: forwardRef(() => LocalizedMessagesDirective)
+            }
+        ], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => LocalizedMessagesDirective)
+                        }
+                    ],
+                    selector: '[kendoInlineAIPromptLocalizedMessages]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
+
+/**
+ * @hidden
+ */
+const defaultPopupSettings = {
+    popupAlign: { vertical: 'top', horizontal: 'left' },
+    anchorAlign: { horizontal: "left", vertical: "bottom" },
+    positionMode: 'absolute',
+    collision: { horizontal: 'fit', vertical: 'flip' },
+    animate: true,
+    offset: { top: 0, left: 0 },
+    margin: { horizontal: 0, vertical: 0 },
+};
+/**
+ * @hidden
+ */
+const calculateMeasurement = (value) => {
+    return value + (typeof value === 'number' ? 'px' : '');
+};
+/**
+ * @hidden
+ */
+const defaultOutputActions = [{
+        name: 'copy',
+        type: 'button',
+        icon: 'copy',
+        svgIcon: copyIcon,
+        text: 'Copy',
+        fillMode: 'flat',
+        themeColor: 'primary',
+        rounded: 'medium',
+    },
+    {
+        name: 'retry',
+        type: 'button',
+        icon: 'arrow-rotate-cw',
+        svgIcon: arrowRotateCwIcon,
+        text: 'Retry',
+        fillMode: 'flat',
+        themeColor: 'primary',
+        rounded: 'medium',
+    },
+    {
+        name: 'discard',
+        type: 'button',
+        icon: 'cancel-outline',
+        svgIcon: cancelOutlineIcon,
+        text: 'Discard',
+        fillMode: 'flat',
+        themeColor: 'base',
+        rounded: 'medium',
+    }
+];
+
+const TEXTAREA_MAX_ROWS = 5;
+const TEXTAREA_INITIAL_ROWS = 1;
+/**
+ * @hidden
+ */
+class InlineAIPromptContentComponent {
+    ngZone;
+    renderer;
+    element;
+    localization;
+    className = true;
+    get dirAttr() {
+        return this.direction;
+    }
+    get maxHeightStyle() {
+        return this.calculateMeasurement(this.maxHeight);
+    }
+    get widthStyle() {
+        return this.calculateMeasurement(this.width);
+    }
+    popupElement;
+    promptValue = "";
+    placeholder;
+    promptOutput;
+    enableSpeechToText = true;
+    streaming = false;
+    width = 550;
+    maxHeight;
+    appendTo;
+    defaultOutputActions = defaultOutputActions;
+    set outputActions(actions) {
+        this._outputActions = this.mergeWithDefaultActions(actions);
+    }
+    get outputActions() {
+        return this._outputActions;
+    }
+    set promptCommands(commands) {
+        this._promptCommands = commands || [];
+        this.commandMenuItems = this.transformCommands(commands || []);
+    }
+    get promptCommands() {
+        return this._promptCommands;
+    }
+    outputTemplate;
+    promptRequest = new EventEmitter();
+    commandExecute = new EventEmitter();
+    outputActionClick = new EventEmitter();
+    promptRequestCancel = new EventEmitter();
+    close = new EventEmitter();
+    promptValueChange = new EventEmitter();
+    onEscapeKey(event) {
+        if (event.key === 'Escape') {
+            if (this.streaming) {
+                event.stopPropagation();
+                this.promptRequestCancel.emit();
+            }
+            else {
+                this.close.emit();
+            }
+        }
+    }
+    textArea;
+    contextMenu;
+    calculateMeasurement = calculateMeasurement;
+    commandMenuIcon = menuIcon;
+    sendIcon = paperPlaneIcon;
+    stopGenerationIcon = stopSmIcon;
+    isListening = false;
+    commandMenuItems = [];
+    messages = {};
+    maxRows = TEXTAREA_MAX_ROWS;
+    initialRows = TEXTAREA_INITIAL_ROWS;
+    _outputActions = this.defaultOutputActions;
+    _promptCommands = [];
+    direction;
+    localizationSubs = new Subscription();
+    subs = new Subscription();
+    constructor(ngZone, renderer, element, localization) {
+        this.ngZone = ngZone;
+        this.renderer = renderer;
+        this.element = element;
+        this.localization = localization;
+        validatePackage(packageMetadata);
+        if (!this.localization) {
+            this.localization = inject(LocalizationService);
+        }
+        this.direction = this.localization?.rtl ? 'rtl' : 'ltr';
+        this.localizationSubs.add(this.localization.changes.subscribe(({ rtl }) => {
+            this.direction = rtl ? 'rtl' : 'ltr';
+        }));
+    }
+    ngAfterViewInit() {
+        this.ngZone.runOutsideAngular(() => {
+            if (!isDocumentAvailable()) {
+                return;
+            }
+            // add a delay to avoid catching the same click event that triggered the component opening
+            setTimeout(() => {
+                this.subs.add(this.renderer.listen('document', 'click', (e) => {
+                    this.outsideClickClose(e);
+                }));
+            });
+        });
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+        this.localizationSubs.unsubscribe();
+        this.contextMenu?.hide();
+    }
+    focus() {
+        if (this.textArea) {
+            this.textArea.focus();
+        }
+    }
+    onActionClick(event) {
+        const eventArgs = {
+            action: event,
+            output: this.promptOutput,
+        };
+        this.outputActionClick.emit(eventArgs);
+        this.handleDefaultActions(event);
+    }
+    handleDefaultActions(event) {
+        switch (event.name) {
+            case 'copy':
+                navigator.clipboard.writeText(this.promptOutput.output);
+                break;
+            case 'retry':
+                this.promptRequest.emit({
+                    prompt: this.promptOutput?.prompt,
+                    isRetry: true
+                });
+                break;
+            case 'discard':
+                this.close.emit();
+                break;
+        }
+    }
+    handleSpeechResult(event) {
+        if (event.alternatives && event.alternatives.length > 0) {
+            if (!isPresent(this.promptValue)) {
+                this.promptValue = '';
+            }
+            this.promptValue += event.alternatives[0].transcript + ' ';
+        }
+    }
+    onClick(action) {
+        this.commandExecute.next(action);
+    }
+    handlePromptValueChange(value) {
+        this.promptValue = value;
+        this.promptValueChange.emit(value);
+    }
+    handleTextAreaKeydown(event) {
+        if (event.key === 'Enter' && !event.shiftKey && !this.streaming) {
+            event.preventDefault();
+            this.handlePromptRequest();
+        }
+    }
+    onCommandButtonClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.contextMenu) {
+            this.contextMenu.show(this.popupElement);
+        }
+    }
+    onCommandClick(event) {
+        // avoid triggering the document click listener to keep the popup open
+        if (event.originalEvent) {
+            event.originalEvent.stopPropagation();
+            event.originalEvent.preventDefault();
+        }
+        const eventArgs = {
+            ...event.item.originalCommand
+        };
+        this.commandExecute.emit(eventArgs);
+    }
+    messageFor(text) {
+        if (this.messages?.[text]) {
+            return this.messages[text];
+        }
+        return this.localization?.get(text);
+    }
+    handlePromptRequest() {
+        if (this.streaming) {
+            this.promptRequestCancel.emit();
+            return;
+        }
+        if (!this.promptValue) {
+            return;
+        }
+        const eventArgs = {
+            prompt: this.promptValue
+        };
+        this.promptRequest.emit(eventArgs);
+    }
+    mergeWithDefaultActions(userActions) {
+        if (!userActions || userActions.length === 0) {
+            return [];
+        }
+        return userActions.map(userAction => {
+            const defaultAction = defaultOutputActions.find(action => action.name === userAction?.name);
+            if (defaultAction) {
+                return { ...defaultAction, ...userAction };
+            }
+            return userAction;
+        });
+    }
+    transformCommands = (commands) => commands.map(command => ({
+        text: command.text,
+        icon: command.icon,
+        svgIcon: command.svgIcon,
+        disabled: command.disabled,
+        originalCommand: command,
+        items: command.children ? this.transformCommands(command.children) : undefined
+    }));
+    outsideClickClose(e) {
+        if (!this.element.nativeElement.contains(e.target)) {
+            this.ngZone.run(() => {
+                this.close.emit();
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptContentComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1$1.LocalizationService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InlineAIPromptContentComponent, isStandalone: true, selector: "kendo-inlineaiprompt-content", inputs: { popupElement: "popupElement", promptValue: "promptValue", placeholder: "placeholder", promptOutput: "promptOutput", enableSpeechToText: "enableSpeechToText", streaming: "streaming", width: "width", maxHeight: "maxHeight", appendTo: "appendTo", outputActions: "outputActions", promptCommands: "promptCommands", outputTemplate: "outputTemplate" }, outputs: { promptRequest: "promptRequest", commandExecute: "commandExecute", outputActionClick: "outputActionClick", promptRequestCancel: "promptRequestCancel", close: "close", promptValueChange: "promptValueChange" }, host: { listeners: { "keydown": "onEscapeKey($event)" }, properties: { "class.k-prompt": "this.className", "attr.dir": "this.dirAttr", "style.max-height": "this.maxHeightStyle", "style.width": "this.widthStyle" } }, providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.inlineaiprompt',
+            },
+        ], viewQueries: [{ propertyName: "textArea", first: true, predicate: TextAreaComponent, descendants: true }, { propertyName: "contextMenu", first: true, predicate: ["kendoContextMenu"], descendants: true }], exportAs: ["kendoInlineAIPromptContent"], ngImport: i0, template: `
+        <ng-container kendoInlineAIPromptLocalizedMessages
+            i18n-commandsButtonTitle="kendo.inlineaiprompt.commandsButtonTitle|Sets the Commands button title."
+            commandsButtonTitle="Command Menu"
+            i18n-generateButtonTitle="kendo.inlineaiprompt.generateButtonTitle|Sets the Generate button title."
+            generateButtonTitle="Generate"
+            i18n-speechToTextButtonTitle="kendo.inlineaiprompt.speechToTextButtonTitle|Sets the Speech to Text button title."
+            speechToTextButtonTitle="Speech to Text"
+        >
+        </ng-container>
+        <div class="k-prompt-content">
+            <div class="k-prompt-view">
+                <kendo-card *ngIf="promptOutput" width="100%">
+                    <kendo-card-body>
+                        <ng-container
+                            *ngIf="outputTemplate"
+                            [ngTemplateOutlet]="outputTemplate"
+                            [ngTemplateOutletContext]="{ $implicit: promptOutput }"
+                        >
+                        </ng-container>
+                        <ng-container *ngIf="!outputTemplate">{{promptOutput.output}}</ng-container>
+                    </kendo-card-body>
+                    <kendo-card-actions *ngIf="outputActions && outputActions.length > 0">
+                        <ng-container *ngFor="let action of outputActions">
+                            <button kendoButton *ngIf="action.type === 'button'"
+                                [attr.title]="action?.title"
+                                [fillMode]="action?.fillMode"
+                                [themeColor]="action?.themeColor"
+                                [rounded]="action?.rounded"
+                                [icon]="action?.icon"
+                                [svgIcon]="action?.svgIcon"
+                                (click)="onActionClick(action)"
+                            >{{action?.text}}</button>
+                            <div *ngIf="action.type === 'spacer'" class="k-spacer"></div>
+                        </ng-container>
+                    </kendo-card-actions>
+                </kendo-card>
+                <kendo-textarea
+                    [value]="promptValue ? promptValue : null"
+                    (valueChange)="handlePromptValueChange($event)"
+                    [rows]="initialRows"
+                    resizable="auto"
+                    flow="horizontal"
+                    [placeholder]="placeholder"
+                    [showPrefixSeparator]="true"
+                    [selectOnFocus]="true"
+                    [maxResizableRows]="maxRows"
+                    (keydown)="handleTextAreaKeydown($event)"
+                >
+                    <kendo-textarea-prefix>
+                        <button
+                            kendoButton
+                            #commandMenuButton
+                            *ngIf="promptCommands && promptCommands.length > 0"
+                            [attr.title]="messageFor('commandsButtonTitle')"
+                            fillMode="flat"
+                            icon="menu"
+                            [svgIcon]="commandMenuIcon"
+                            (click)="onCommandButtonClick($event)"
+                        ></button>
+                        <button
+                            kendoSpeechToTextButton
+                            *ngIf="enableSpeechToText"
+                            [attr.title]="messageFor('speechToTextButtonTitle')"
+                            fillMode="flat"
+                            (result)="handleSpeechResult($event)"
+                            (start)="isListening = true"
+                            (end)="isListening = false"
+                        ></button>
+                    </kendo-textarea-prefix>
+                    <kendo-textarea-suffix>
+                        <button
+                            kendoButton
+                            [attr.title]="messageFor('generateButtonTitle')"
+                            fillMode="flat"
+                            class="k-prompt-send"
+                            [ngClass]="{ 'k-generating': streaming, 'k-active': streaming }"
+                            (click)="handlePromptRequest()"
+                            [disabled]="!streaming && (!promptValue?.trim() || isListening)"
+                            [svgIcon]="streaming ? stopGenerationIcon : sendIcon"
+                            [icon]="streaming ? 'stop-sm' : 'paper-plane'"
+                        ></button>
+                    </kendo-textarea-suffix>
+                </kendo-textarea>
+            </div>
+        </div>
+        <kendo-contextmenu
+            #kendoContextMenu
+            [alignToAnchor]="true"
+            [items]="commandMenuItems"
+            [appendTo]="appendTo"
+            class="k-hidden"
+            (select)="onCommandClick($event)">
+        </kendo-contextmenu>
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoInlineAIPromptLocalizedMessages]" }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i2.SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }, { kind: "component", type: i3.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: i3.TextAreaPrefixComponent, selector: "kendo-textarea-prefix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaPrefix"] }, { kind: "component", type: i3.TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: i4.ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "component", type: i5.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "component", type: i5.CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }, { kind: "component", type: i5.CardBodyComponent, selector: "kendo-card-body" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoInlineAIPromptContent',
+                    selector: 'kendo-inlineaiprompt-content',
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.inlineaiprompt',
+                        },
+                    ],
+                    template: `
+        <ng-container kendoInlineAIPromptLocalizedMessages
+            i18n-commandsButtonTitle="kendo.inlineaiprompt.commandsButtonTitle|Sets the Commands button title."
+            commandsButtonTitle="Command Menu"
+            i18n-generateButtonTitle="kendo.inlineaiprompt.generateButtonTitle|Sets the Generate button title."
+            generateButtonTitle="Generate"
+            i18n-speechToTextButtonTitle="kendo.inlineaiprompt.speechToTextButtonTitle|Sets the Speech to Text button title."
+            speechToTextButtonTitle="Speech to Text"
+        >
+        </ng-container>
+        <div class="k-prompt-content">
+            <div class="k-prompt-view">
+                <kendo-card *ngIf="promptOutput" width="100%">
+                    <kendo-card-body>
+                        <ng-container
+                            *ngIf="outputTemplate"
+                            [ngTemplateOutlet]="outputTemplate"
+                            [ngTemplateOutletContext]="{ $implicit: promptOutput }"
+                        >
+                        </ng-container>
+                        <ng-container *ngIf="!outputTemplate">{{promptOutput.output}}</ng-container>
+                    </kendo-card-body>
+                    <kendo-card-actions *ngIf="outputActions && outputActions.length > 0">
+                        <ng-container *ngFor="let action of outputActions">
+                            <button kendoButton *ngIf="action.type === 'button'"
+                                [attr.title]="action?.title"
+                                [fillMode]="action?.fillMode"
+                                [themeColor]="action?.themeColor"
+                                [rounded]="action?.rounded"
+                                [icon]="action?.icon"
+                                [svgIcon]="action?.svgIcon"
+                                (click)="onActionClick(action)"
+                            >{{action?.text}}</button>
+                            <div *ngIf="action.type === 'spacer'" class="k-spacer"></div>
+                        </ng-container>
+                    </kendo-card-actions>
+                </kendo-card>
+                <kendo-textarea
+                    [value]="promptValue ? promptValue : null"
+                    (valueChange)="handlePromptValueChange($event)"
+                    [rows]="initialRows"
+                    resizable="auto"
+                    flow="horizontal"
+                    [placeholder]="placeholder"
+                    [showPrefixSeparator]="true"
+                    [selectOnFocus]="true"
+                    [maxResizableRows]="maxRows"
+                    (keydown)="handleTextAreaKeydown($event)"
+                >
+                    <kendo-textarea-prefix>
+                        <button
+                            kendoButton
+                            #commandMenuButton
+                            *ngIf="promptCommands && promptCommands.length > 0"
+                            [attr.title]="messageFor('commandsButtonTitle')"
+                            fillMode="flat"
+                            icon="menu"
+                            [svgIcon]="commandMenuIcon"
+                            (click)="onCommandButtonClick($event)"
+                        ></button>
+                        <button
+                            kendoSpeechToTextButton
+                            *ngIf="enableSpeechToText"
+                            [attr.title]="messageFor('speechToTextButtonTitle')"
+                            fillMode="flat"
+                            (result)="handleSpeechResult($event)"
+                            (start)="isListening = true"
+                            (end)="isListening = false"
+                        ></button>
+                    </kendo-textarea-prefix>
+                    <kendo-textarea-suffix>
+                        <button
+                            kendoButton
+                            [attr.title]="messageFor('generateButtonTitle')"
+                            fillMode="flat"
+                            class="k-prompt-send"
+                            [ngClass]="{ 'k-generating': streaming, 'k-active': streaming }"
+                            (click)="handlePromptRequest()"
+                            [disabled]="!streaming && (!promptValue?.trim() || isListening)"
+                            [svgIcon]="streaming ? stopGenerationIcon : sendIcon"
+                            [icon]="streaming ? 'stop-sm' : 'paper-plane'"
+                        ></button>
+                    </kendo-textarea-suffix>
+                </kendo-textarea>
+            </div>
+        </div>
+        <kendo-contextmenu
+            #kendoContextMenu
+            [alignToAnchor]="true"
+            [items]="commandMenuItems"
+            [appendTo]="appendTo"
+            class="k-hidden"
+            (select)="onCommandClick($event)">
+        </kendo-contextmenu>
+    `,
+                    standalone: true,
+                    imports: [NgClass, NgIf, NgFor, NgTemplateOutlet, LocalizedMessagesDirective, KENDO_BUTTONS, KENDO_TEXTAREA, KENDO_CONTEXTMENU, KENDO_CARD],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1$1.LocalizationService, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }]; }, propDecorators: { className: [{
+                type: HostBinding,
+                args: ['class.k-prompt']
+            }], dirAttr: [{
+                type: HostBinding,
+                args: ['attr.dir']
+            }], maxHeightStyle: [{
+                type: HostBinding,
+                args: ['style.max-height']
+            }], widthStyle: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], popupElement: [{
+                type: Input
+            }], promptValue: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], promptOutput: [{
+                type: Input
+            }], enableSpeechToText: [{
+                type: Input
+            }], streaming: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }], outputActions: [{
+                type: Input
+            }], promptCommands: [{
+                type: Input
+            }], outputTemplate: [{
+                type: Input
+            }], promptRequest: [{
+                type: Output
+            }], commandExecute: [{
+                type: Output
+            }], outputActionClick: [{
+                type: Output
+            }], promptRequestCancel: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], promptValueChange: [{
+                type: Output
+            }], onEscapeKey: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], textArea: [{
+                type: ViewChild,
+                args: [TextAreaComponent]
+            }], contextMenu: [{
+                type: ViewChild,
+                args: ['kendoContextMenu']
+            }] } });
+
+/**
+ * Defines a template for displaying the output of the Inline AI Prompt.
+ *
+ * @example
+ * ```html
+ * <kendo-inlineaiprompt>
+ *   <ng-template kendoInlineAIPromptOutputTemplate let-output>
+ *     <div class="custom-output">
+ *       <h4>AI Response:</h4>
+ *       <p>{{ output.output }}</p>
+ *     </div>
+ *   </ng-template>
+ * </kendo-inlineaiprompt>
+ * ```
+ */
+class InlineAIPromptOutputTemplateDirective {
+    templateRef;
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptOutputTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: InlineAIPromptOutputTemplateDirective, isStandalone: true, selector: "[kendoInlineAIPromptOutputTemplate]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptOutputTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoInlineAIPromptOutputTemplate]',
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
+                    type: Optional
+                }] }]; } });
+
+/**
+ * Represents the Kendo UI InlineAIPrompt component for Angular.
+ *
+ * @remarks
+ * Supported children components are: {@link InlineAIPromptCustomMessagesComponent}
+ *
+ * @example
+ * ```html
+ *  <kendo-inlineaiprompt
+ *      placeholder="Enter your prompt..."
+ *      [promptOutput]="promptOutput"
+ *      (promptRequest)="onPromptRequest($event)">
+ *  </kendo-inlineaiprompt>
+ * ```
+ */
+class InlineAIPromptComponent {
+    ngZone;
+    element;
+    /**
+     * Sets the text of the TextArea.
+     */
+    promptValue = "";
+    /**
+     * Sets the placeholder text that appears in the text area when it is empty.
+     */
+    placeholder;
+    /**
+     * Sets the output data for the prompt.
+     * The output displays as a card above the text area.
+     */
+    promptOutput;
+    /**
+     * Controls the visibility and settings of the Speech to Text button.
+     *
+     * @default true
+     */
+    enableSpeechToText = true;
+    /**
+     * Sets the streaming state of the component.
+     * When set to `true`, the send button displays a generating state and the component emits a `promptRequestCancel` event when you click it.
+     *
+     * @default false
+     */
+    streaming = false;
+    /**
+     * Sets the width of the component.
+     * Accepts a number for pixels or a string for other units.
+     *
+     * @default 550
+     */
+    width = 550;
+    /**
+     * Sets the maximum height of the component.
+     * Accepts a number for pixels or a string for other units.
+     */
+    maxHeight;
+    /**
+     * Represents the configuration of the default output actions.
+     * The default actions are `copy`, `retry`, and `discard`.
+     */
+    defaultOutputActions = defaultOutputActions;
+    /**
+     * Sets the output actions that display in the output card.
+     * The default actions are `copy`, `retry`, and `discard`.
+     * To customize the appearance and order of the default actions, define them with the same `name`.
+     *
+     * @default [{ name: 'copy', type: 'button', icon: 'copy', svgIcon: copyIcon, text: 'Copy', fillMode: 'flat', themeColor: 'primary', rounded: 'medium'}, { name: 'retry', type: 'button', icon: 'arrow-rotate-cw', svgIcon: arrowRotateCwIcon, text: 'Retry', fillMode: 'flat', themeColor: 'primary', rounded: 'medium'}, { name: 'discard', type: 'button', icon: 'cancel-outline', svgIcon: cancelOutlineIcon, text: 'Discard', fillMode: 'flat', themeColor: 'base', rounded: 'medium'}]
+     */
+    outputActions = defaultOutputActions;
+    /**
+     * Sets the available prompt commands.
+     */
+    promptCommands;
+    /**
+     * Sets the popup settings for the component.
+     */
+    set popupSettings(settings) {
+        this._popupSettings = { ...defaultPopupSettings, ...settings };
+    }
+    get popupSettings() {
+        return this._popupSettings;
+    }
+    /**
+     * Fires when you click the send button.
+     */
+    promptRequest = new EventEmitter();
+    /**
+     * Fires when you click a command.
+     */
+    commandExecute = new EventEmitter();
+    /**
+     * Fires when you click an output action button.
+     */
+    outputActionClick = new EventEmitter();
+    /**
+     * Fires when you cancel the prompt request by clicking the stop button.
+     */
+    promptRequestCancel = new EventEmitter();
+    /**
+     * Fires when the component closes, either by clicking outside the popup, clicking the Discard action, or after pressing the Escape key.
+     */
+    close = new EventEmitter();
+    /**
+     * Fires when the value of the TextArea changes.
+     */
+    promptValueChange = new EventEmitter();
+    popupElement;
+    popupViewContainer;
+    contentComponent;
+    outputTemplate;
+    /**
+     * @hidden
+     */
+    calculateMeasurement = calculateMeasurement;
+    _popupSettings = defaultPopupSettings;
+    subs = new Subscription();
+    constructor(ngZone, element) {
+        this.ngZone = ngZone;
+        this.element = element;
+        validatePackage(packageMetadata);
+    }
+    ngAfterViewInit() {
+        if (this.contentComponent && this.popupElement) {
+            this.contentComponent.popupElement = this.popupElement;
+        }
+        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
+            if (this.contentComponent && this.popupViewContainer) {
+                this.contentComponent.appendTo = this.popupViewContainer;
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    /**
+     * Focuses the TextArea of the Inline AI Prompt.
+     */
+    focus() {
+        if (this.contentComponent?.textArea) {
+            this.contentComponent.textArea.focus();
+        }
+    }
+    /**
+     * @hidden
+     */
+    onPromptRequest(event) {
+        this.promptRequest.emit(event);
+    }
+    /**
+     * @hidden
+     */
+    onCommandExecute(event) {
+        this.commandExecute.emit(event);
+    }
+    /**
+     * @hidden
+     */
+    onOutputActionClick(event) {
+        this.outputActionClick.emit(event);
+    }
+    /**
+     * @hidden
+     */
+    onPromptRequestCancel() {
+        this.promptRequestCancel.emit();
+    }
+    /**
+     * @hidden
+     */
+    onClose() {
+        this.close.emit();
+    }
+    /**
+     * @hidden
+     */
+    onPromptValueChange(value) {
+        this.promptValueChange.emit(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InlineAIPromptComponent, isStandalone: true, selector: "kendo-inlineaiprompt", inputs: { promptValue: "promptValue", placeholder: "placeholder", promptOutput: "promptOutput", enableSpeechToText: "enableSpeechToText", streaming: "streaming", width: "width", maxHeight: "maxHeight", outputActions: "outputActions", promptCommands: "promptCommands", popupSettings: "popupSettings" }, outputs: { promptRequest: "promptRequest", commandExecute: "commandExecute", outputActionClick: "outputActionClick", promptRequestCancel: "promptRequestCancel", close: "close", promptValueChange: "promptValueChange" }, providers: [
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.inlineaiprompt',
+            },
+        ], queries: [{ propertyName: "outputTemplate", first: true, predicate: InlineAIPromptOutputTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "popupElement", first: true, predicate: PopupComponent, descendants: true, read: ElementRef }, { propertyName: "popupViewContainer", first: true, predicate: PopupComponent, descendants: true, read: ViewContainerRef }, { propertyName: "contentComponent", first: true, predicate: InlineAIPromptContentComponent, descendants: true }], exportAs: ["kendoInlineAIPrompt"], ngImport: i0, template: `
+        <ng-container kendoInlineAIPromptLocalizedMessages
+            i18n-commandsButtonTitle="kendo.inlineaiprompt.commandsButtonTitle|Sets the Commands button title."
+            commandsButtonTitle="Command Menu"
+            i18n-generateButtonTitle="kendo.inlineaiprompt.generateButtonTitle|Sets the Generate button title."
+            generateButtonTitle="Generate"
+            i18n-speechToTextButtonTitle="kendo.inlineaiprompt.speechToTextButtonTitle|Sets the Speech to Text button title."
+            speechToTextButtonTitle="Speech to Text"
+        >
+        </ng-container>
+        <kendo-popup
+            [style.width]="calculateMeasurement(width)"
+            [anchor]="popupSettings?.anchor"
+            [anchorAlign]="popupSettings?.anchorAlign"
+            [offset]="popupSettings?.offset"
+            [popupAlign]="popupSettings?.popupAlign"
+            [animate]="popupSettings?.animate"
+            [collision]="popupSettings?.collision"
+            [positionMode]="popupSettings?.positionMode"
+            [margin]="popupSettings?.margin"
+            [popupClass]="popupSettings?.popupClass || 'k-prompt-popup'"
+        >
+            <kendo-inlineaiprompt-content
+                [style.width]="width"
+                [promptValue]="promptValue"
+                [placeholder]="placeholder"
+                [promptOutput]="promptOutput"
+                [enableSpeechToText]="enableSpeechToText"
+                [streaming]="streaming"
+                [maxHeight]="maxHeight"
+                [outputActions]="outputActions"
+                [promptCommands]="promptCommands"
+                [outputTemplate]="outputTemplate?.templateRef"
+                (promptRequest)="onPromptRequest($event)"
+                (commandExecute)="onCommandExecute($event)"
+                (outputActionClick)="onOutputActionClick($event)"
+                (promptRequestCancel)="onPromptRequestCancel()"
+                (close)="onClose()"
+                (promptValueChange)="onPromptValueChange($event)"
+            >
+            </kendo-inlineaiprompt-content>
+        </kendo-popup>
+    `, isInline: true, dependencies: [{ kind: "component", type: i1$2.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { kind: "component", type: InlineAIPromptContentComponent, selector: "kendo-inlineaiprompt-content", inputs: ["popupElement", "promptValue", "placeholder", "promptOutput", "enableSpeechToText", "streaming", "width", "maxHeight", "appendTo", "outputActions", "promptCommands", "outputTemplate"], outputs: ["promptRequest", "commandExecute", "outputActionClick", "promptRequestCancel", "close", "promptValueChange"], exportAs: ["kendoInlineAIPromptContent"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoInlineAIPromptLocalizedMessages]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'kendoInlineAIPrompt',
+                    selector: 'kendo-inlineaiprompt',
+                    providers: [
+                        LocalizationService,
+                        {
+                            provide: L10N_PREFIX,
+                            useValue: 'kendo.inlineaiprompt',
+                        },
+                    ],
+                    template: `
+        <ng-container kendoInlineAIPromptLocalizedMessages
+            i18n-commandsButtonTitle="kendo.inlineaiprompt.commandsButtonTitle|Sets the Commands button title."
+            commandsButtonTitle="Command Menu"
+            i18n-generateButtonTitle="kendo.inlineaiprompt.generateButtonTitle|Sets the Generate button title."
+            generateButtonTitle="Generate"
+            i18n-speechToTextButtonTitle="kendo.inlineaiprompt.speechToTextButtonTitle|Sets the Speech to Text button title."
+            speechToTextButtonTitle="Speech to Text"
+        >
+        </ng-container>
+        <kendo-popup
+            [style.width]="calculateMeasurement(width)"
+            [anchor]="popupSettings?.anchor"
+            [anchorAlign]="popupSettings?.anchorAlign"
+            [offset]="popupSettings?.offset"
+            [popupAlign]="popupSettings?.popupAlign"
+            [animate]="popupSettings?.animate"
+            [collision]="popupSettings?.collision"
+            [positionMode]="popupSettings?.positionMode"
+            [margin]="popupSettings?.margin"
+            [popupClass]="popupSettings?.popupClass || 'k-prompt-popup'"
+        >
+            <kendo-inlineaiprompt-content
+                [style.width]="width"
+                [promptValue]="promptValue"
+                [placeholder]="placeholder"
+                [promptOutput]="promptOutput"
+                [enableSpeechToText]="enableSpeechToText"
+                [streaming]="streaming"
+                [maxHeight]="maxHeight"
+                [outputActions]="outputActions"
+                [promptCommands]="promptCommands"
+                [outputTemplate]="outputTemplate?.templateRef"
+                (promptRequest)="onPromptRequest($event)"
+                (commandExecute)="onCommandExecute($event)"
+                (outputActionClick)="onOutputActionClick($event)"
+                (promptRequestCancel)="onPromptRequestCancel()"
+                (close)="onClose()"
+                (promptValueChange)="onPromptValueChange($event)"
+            >
+            </kendo-inlineaiprompt-content>
+        </kendo-popup>
+    `,
+                    standalone: true,
+                    imports: [KENDO_POPUP, InlineAIPromptContentComponent, LocalizedMessagesDirective],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { promptValue: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], promptOutput: [{
+                type: Input
+            }], enableSpeechToText: [{
+                type: Input
+            }], streaming: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }], outputActions: [{
+                type: Input
+            }], promptCommands: [{
+                type: Input
+            }], popupSettings: [{
+                type: Input
+            }], promptRequest: [{
+                type: Output
+            }], commandExecute: [{
+                type: Output
+            }], outputActionClick: [{
+                type: Output
+            }], promptRequestCancel: [{
+                type: Output
+            }], close: [{
+                type: Output
+            }], promptValueChange: [{
+                type: Output
+            }], popupElement: [{
+                type: ViewChild,
+                args: [PopupComponent, { read: ElementRef }]
+            }], popupViewContainer: [{
+                type: ViewChild,
+                args: [PopupComponent, { read: ViewContainerRef }]
+            }], contentComponent: [{
+                type: ViewChild,
+                args: [InlineAIPromptContentComponent]
+            }], outputTemplate: [{
+                type: ContentChild,
+                args: [InlineAIPromptOutputTemplateDirective]
+            }] } });
+
+/**
+ * Represents the custom messages component of the Inline AI Prompt.
+ *
+ * Use this component to override default messages for the Inline AI Prompt.
+ *
+ * @example
+ * ```html
+ * <kendo-inlineaiprompt-messages
+ *   commandsButtonTitle="Commands Menu"
+ *   generateButtonTitle="Generate">
+ * </kendo-inlineaiprompt-messages>
+ * ```
+ */
+class InlineAIPromptCustomMessagesComponent extends Messages {
+    service;
+    constructor(service) {
+        super();
+        this.service = service;
+    }
+    get override() {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InlineAIPromptCustomMessagesComponent, isStandalone: true, selector: "kendo-inlineaiprompt-messages", providers: [
+            {
+                provide: Messages,
+                useExisting: forwardRef(() => InlineAIPromptCustomMessagesComponent)
+            }
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptCustomMessagesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    providers: [
+                        {
+                            provide: Messages,
+                            useExisting: forwardRef(() => InlineAIPromptCustomMessagesComponent)
+                        }
+                    ],
+                    selector: 'kendo-inlineaiprompt-messages',
+                    template: ``,
+                    standalone: true
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
+
+/**
+ * Utility array that contains all AIPrompt related components and directives.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { KENDO_AIPROMPT } from '@progress/kendo-angular-conversational-ui';
+ *
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_AIPROMPT],
+ *   selector: 'my-app',
+ *   template: `<kendo-aiprompt></kendo-aiprompt>`
+ * })
+ * export class AppComponent {}
+ * ```
+ */
+const KENDO_AIPROMPT = [
+    AIPromptComponent,
+    PromptViewComponent,
+    OutputViewComponent,
+    CommandViewComponent,
+    CustomViewComponent,
+    AIPromptCustomMessagesComponent,
+    AIPromptToolbarActionsDirective,
+    AIPromptToolbarFocusableDirective,
+    AIPromptOutputTemplateDirective,
+    AIPromptOutputBodyTemplateDirective,
+];
+/**
+ * Utility array that contains all Chat related components and directives.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { KENDO_CHAT } from '@progress/kendo-angular-conversational-ui';
+ *
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_CHAT],
+ *   selector: 'my-app',
+ *   template: `<kendo-chat></kendo-chat>`
+ * })
+ * export class AppComponent {}
+ * ```
+ */
+const KENDO_CHAT = [
+    ChatComponent,
+    CustomMessagesComponent,
+    AttachmentTemplateDirective,
     MessageTemplateDirective,
     HeroCardComponent,
     ChatMessageBoxTemplateDirective
 ];
+/**
+ * Utility array that contains all InlineAIPrompt related components and directives.
+ *
+ * @example
+ * ```ts
+ * import { Component } from '@angular/core';
+ * import { KENDO_INLINEAIPROMPT } from '@progress/kendo-angular-conversational-ui';
+ *
+ * @Component({
+ *   standalone: true,
+ *   imports: [KENDO_INLINEAIPROMPT],
+ *   selector: 'my-app',
+ *   template: `<kendo-inlineaiprompt></kendo-inlineaiprompt>`
+ * })
+ * export class AppComponent {}
+ * ```
+ */
+const KENDO_INLINEAIPROMPT = [
+    InlineAIPromptComponent,
+    InlineAIPromptOutputTemplateDirective,
+    InlineAIPromptCustomMessagesComponent
+];
 /**
  * Utility array that contains all `@progress/kendo-angular-conversational-ui` related components and directives.
  *
@@ -3460,7 +4915,8 @@ const KENDO_CHAT = [
  */
 const KENDO_CONVERSATIONALUI = [
     ...KENDO_AIPROMPT,
-    ...KENDO_CHAT
+    ...KENDO_CHAT,
+    ...KENDO_INLINEAIPROMPT
 ];
 
 // IMPORTANT: NgModule export kept for backwards compatibility
@@ -3484,7 +4940,7 @@ const KENDO_CONVERSATIONALUI = [
  */
 class AIPromptModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AIPromptModule, imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective], exports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AIPromptModule, imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective], exports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptModule, decorators: [{
@@ -3553,8 +5009,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  */
 class ConversationalUIModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConversationalUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", 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] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConversationalUIModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, ChatComponent, HeroCardComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ConversationalUIModule, imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective, ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective, InlineAIPromptComponent, InlineAIPromptOutputTemplateDirective, InlineAIPromptCustomMessagesComponent], exports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective, ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective, InlineAIPromptComponent, InlineAIPromptOutputTemplateDirective, InlineAIPromptCustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConversationalUIModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, ChatComponent, HeroCardComponent, InlineAIPromptComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConversationalUIModule, decorators: [{
             type: NgModule,
@@ -3565,9 +5021,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+/**
+ * Provides a service for opening Inline AI Prompt components dynamically.
+ *
+ * @example
+ * ```ts
+ * import { InlineAIPromptService } from '@progress/kendo-angular-conversational-ui';
+ *
+ * constructor(private inlineAIPromptService: InlineAIPromptService) {}
+ *
+ * openPrompt(anchor: ElementRef) {
+ *   const promptRef = this.inlineAIPromptService.open({
+ *     anchor: anchor,
+ *     placeholder: 'Enter your prompt...'
+ *   });
+ * }
+ * ```
+ */
+class InlineAIPromptService {
+    popupService;
+    constructor(popupService) {
+        this.popupService = popupService;
+    }
+    /**
+     * Opens an Inline AI Prompt component in a popup. The popup appears near the specified anchor element or at the provided offset coordinates.
+     *
+     * @param {InlineAIPromptSettings} options - The options for the InlineAIPromptComponent.
+     * @returns {PopupRef} A reference to the popup.
+     */
+    open(options) {
+        const popupSettings = { ...defaultPopupSettings, ...options?.popupSettings };
+        const popupRef = this.popupService.open({
+            ...(options?.popupSettings?.anchor && { anchor: options.popupSettings.anchor }),
+            popupClass: 'k-prompt-popup',
+            ...popupSettings,
+            content: InlineAIPromptContentComponent,
+        });
+        const promptInstance = popupRef.content?.instance;
+        if (promptInstance) {
+            const popupViewContainer = popupRef.popup.injector.get(ViewContainerRef);
+            promptInstance.appendTo = popupViewContainer;
+            promptInstance.popupElement = popupRef.popupElement;
+            this.projectComponentInputs(promptInstance, options);
+            if (promptInstance.close) {
+                promptInstance.close.subscribe(() => {
+                    popupRef.close();
+                });
+            }
+            if (popupRef.content.changeDetectorRef) {
+                popupRef.content.changeDetectorRef.detectChanges();
+            }
+        }
+        return popupRef;
+    }
+    /**
+     * Projects the input options onto the component instance.
+     */
+    projectComponentInputs(component, options) {
+        if (!options) {
+            return component;
+        }
+        Object.getOwnPropertyNames(options)
+            .forEach((prop) => {
+            component[prop] = options[prop];
+        });
+        return component;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptService, deps: [{ token: i1$2.PopupService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.PopupService }]; } });
+
+/**
+ * Defines the settings for opening an Inline AI Prompt through the `InlineAIPromptService`.
+ */
+class InlineAIPromptSettings {
+    /**
+     * Specifies the settings for the Inline AI Prompt Popup.
+     */
+    popupSettings;
+    /**
+     * Sets the width of the component.
+     * Accepts a number for pixels or a string for other units, for example, `50%`.
+     */
+    width;
+    /**
+     * Sets the maximum height of the component.
+     * Accepts a number for pixels or a string for other units, for example, `50%`.
+     */
+    maxHeight;
+    /**
+     * Sets the value of the Inline AI Prompt TextArea.
+     */
+    promptValue;
+    /**
+     * Sets the placeholder of the Inline AI Prompt TextArea.
+     */
+    placeholder;
+    /**
+     * Sets the action buttons for the output card.
+     */
+    outputActions;
+    /**
+     * Sets the commands for the Inline AI Prompt TextArea prefix.
+     */
+    promptCommands;
+    /**
+     * Sets the prompt output to display.
+     */
+    promptOutput;
+    /**
+     * Sets the visibility and configuration of the Speech to Text button.
+     */
+    enableSpeechToTextButton;
+    /**
+     * Sets the template for the output content. If not provided, the default output template is used.
+     */
+    outputTemplate;
+    /**
+     * Sets whether the send button turns into a stop button.
+     */
+    streaming;
+    /**
+     * Sets the titles of the buttons shown in the Inline AI Prompt. Use for localization.
+     */
+    messages;
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { AIPromptComponent, AIPromptCustomMessagesComponent, AIPromptModule, AIPromptOutputBodyTemplateDirective, AIPromptOutputTemplateDirective, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, AttachmentTemplateDirective, ChatComponent, ChatMessageBoxTemplateDirective, ChatModule, CommandViewComponent, ConversationalUIModule, CustomMessagesComponent, CustomViewComponent, ExecuteActionEvent, HeroCardComponent, InlineAIPromptComponent, InlineAIPromptCustomMessagesComponent, InlineAIPromptOutputTemplateDirective, InlineAIPromptService, InlineAIPromptSettings, KENDO_AIPROMPT, KENDO_CHAT, KENDO_CONVERSATIONALUI, KENDO_INLINEAIPROMPT, MessageTemplateDirective, OutputViewComponent, PromptViewComponent, SendMessageEvent };