@progress/kendo-angular-conversational-ui 17.0.0-develop.21 → 17.0.0-develop.23

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

@@ -1,3242 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import * as i0 from '@angular/core';
-import { Directive, Optional, EventEmitter, Component, HostBinding, ViewChild, Input, Output, isDevMode, forwardRef, ViewChildren, ElementRef, ContentChild, InjectionToken, Inject, Injectable, ContentChildren, NgModule } from '@angular/core';
-import * as i1$1 from '@progress/kendo-angular-l10n';
-import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { validatePackage } from '@progress/kendo-licensing';
-import { NgIf, NgTemplateOutlet, NgFor, NgSwitch, NgSwitchCase } from '@angular/common';
-import { Keys, ResizeSensorComponent, isPresent, focusableSelector, guid, ResizeBatchService } from '@progress/kendo-angular-common';
-import { paperPlaneIcon, chevronLeftIcon, chevronRightIcon, sparklesIcon, commentIcon, moreHorizontalIcon, copyIcon, arrowRotateCwIcon, thumbUpOutlineIcon, thumbDownOutlineIcon, thumbUpIcon, thumbDownIcon, chevronUpIcon, chevronDownIcon } from '@progress/kendo-svg-icons';
-import { ButtonComponent } from '@progress/kendo-angular-buttons';
-import { TextBoxComponent, TextAreaComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextAreaSuffixComponent } from '@progress/kendo-angular-inputs';
-import { fromEvent, Subscription, Subject } from 'rxjs';
-import * as i1 from '@progress/kendo-angular-intl';
-import { debounceTime } from 'rxjs/operators';
-import { IconsService } from '@progress/kendo-angular-icons';
-import { PopupService } from '@progress/kendo-angular-popup';
-import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
-import { PanelBarComponent } from '@progress/kendo-angular-layout';
-
-/**
- * Defines a template that will be used for displaying message attachments. To define an attachment
- * template, nest an `<ng-template>` tag with the `kendoChatAttachmentTemplate` attribute inside the
- * `<kendo-chat>` component. The template context is set to the attachment instance. For more information,
- * refer to the article on [message attachments]({% slug attachments_chat %}).
- *
- * {% meta height:700 %}
- * {% embed_file chat/attachments/templates/app.component.ts preview %}
- * {% embed_file shared/app.module.ts preview %}
- * {% embed_file shared/main.ts hidden %}
- * {% endmeta %}
- */
-class AttachmentTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-AttachmentTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AttachmentTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-AttachmentTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AttachmentTemplateDirective, isStandalone: true, selector: "[kendoChatAttachmentTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AttachmentTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoChatAttachmentTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i0.TemplateRef, decorators: [{
-                        type: Optional
-                    }] }];
-    } });
-
-/**
- * Arguments for the `SendMessage` event.
- *
- */
-class SendMessageEvent {
-    /**
-     * @hidden
-     */
-    constructor(message) {
-        this.message = message;
-    }
-}
-
-const noop = () => { };
-const handlers = {
-    'reply': (action, sender) => {
-        sender.sendMessage.emit(new SendMessageEvent({
-            author: sender.user,
-            text: action.value,
-            timestamp: new Date()
-        }));
-    },
-    'call': (action) => {
-        window.open('tel:' + action.value);
-    },
-    'openUrl': (action) => {
-        window.open(action.value);
-    }
-};
-/**
- * @hidden
- */
-const makeHandler = (action) => handlers[action.type] || noop;
-
-/**
- * Defines a template that will be used for displaying Chat messages. To define an attachment
- * template, nest an `<ng-template>` tag with the `kendoChatMessageTemplate` attribute inside the
- * `<kendo-chat>` component. The template context is set to the message instance. For more information,
- * refer to the article on [message templates]({% slug message_templates_chat %}).
- *
- * {% meta height:700 %}
- * {% embed_file chat/messages/templates/app.component.ts preview %}
- * {% embed_file shared/app.module.ts preview %}
- * {% embed_file shared/main.ts hidden %}
- * {% endmeta %}
- */
-class MessageTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-MessageTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-MessageTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: MessageTemplateDirective, isStandalone: true, selector: "[kendoChatMessageTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoChatMessageTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i0.TemplateRef, decorators: [{
-                        type: Optional
-                    }] }];
-    } });
-
-/**
- * @hidden
- */
-const packageMetadata = {
-    name: '@progress/kendo-angular-conversational-ui',
-    productName: 'Kendo UI for Angular',
-    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1729874504,
-    version: '17.0.0-develop.21',
-    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
-};
-
-/**
- * Creates a message box area that overrides the default message box of the Conversational UI Component.
- * To define a message-box template, nest an `<ng-template>` tag with the `kendoChatMessageBoxTemplate` directive inside the `<kendo-chat>` tag
- * [see example]({% slug message_box %}#toc-message-box-template).
- */
-class ChatMessageBoxTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-ChatMessageBoxTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatMessageBoxTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ChatMessageBoxTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ChatMessageBoxTemplateDirective, isStandalone: true, selector: "[kendoChatMessageBoxTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatMessageBoxTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoChatMessageBoxTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
-
-/**
- * @hidden
- */
-class MessageBoxComponent {
-    constructor() {
-        this.borderColor = 'inherit';
-        this.sendMessage = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.sendIcon = paperPlaneIcon;
-    }
-    /**
-     * @hidden
-     */
-    sendClick() {
-        const input = this.messageBoxInput;
-        const value = input.value;
-        if (!value) {
-            return;
-        }
-        const message = {
-            author: this.user,
-            text: value,
-            timestamp: new Date()
-        };
-        this.sendMessage.emit(new SendMessageEvent(message));
-        input.value = null;
-        input.focus();
-        this.autoScroll = true;
-    }
-    /**
-     * @hidden
-     */
-    inputKeydown(e) {
-        if (e.keyCode === Keys.Enter) {
-            this.sendClick();
-        }
-    }
-    /**
-     * @hidden
-     */
-    textAreaKeydown(e) {
-        const isEnter = e.keyCode === Keys.Enter;
-        if (!isEnter) {
-            return;
-        }
-        const newLine = (e.metaKey || e.ctrlKey);
-        const enterOnly = !(e.shiftKey || e.metaKey || e.ctrlKey);
-        if (enterOnly) {
-            e.preventDefault();
-            this.sendClick();
-        }
-        if (newLine) {
-            this.messageBoxInput.value += `\r\n`;
-        }
-    }
-    /**
-     * @hidden
-     */
-    textFor(key) {
-        return this.localization.get(key);
-    }
-}
-MessageBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MessageBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MessageBoxComponent, isStandalone: true, selector: "kendo-message-box", inputs: { user: "user", autoScroll: "autoScroll", type: "type", localization: "localization", messageBoxTemplate: "messageBoxTemplate" }, outputs: { sendMessage: "sendMessage" }, host: { properties: { "style.border-color": "this.borderColor" } }, viewQueries: [{ propertyName: "messageBoxInput", first: true, predicate: ["messageBoxInput"], descendants: true }], ngImport: i0, template: `
-    <ng-container *ngIf="!messageBoxTemplate">
-        <kendo-textbox
-            *ngIf="type === 'textbox'"
-            #messageBoxInput
-            class="k-message-box"
-            [inputAttributes]="{
-                'aria-label': textFor('messageBoxInputLabel')
-            }"
-            [placeholder]="textFor('messagePlaceholder')"
-            (keydown)="inputKeydown($event)"
-        >
-            <ng-template kendoTextBoxSuffixTemplate>
-                <kendo-textbox-separator></kendo-textbox-separator>
-                <button
-                    kendoButton
-                    fillMode="flat"
-                    class="k-chat-send"
-                    icon="paper-plane"
-                    [svgIcon]="sendIcon"
-                    [tabindex]="0"
-                    [attr.title]="textFor('send')"
-                    (click)="sendClick()"
-                >
-                </button>
-            </ng-template>
-        </kendo-textbox>
-
-        <kendo-textarea
-            *ngIf="type === 'textarea'"
-            #messageBoxInput
-            class="k-message-box !k-align-items-end"
-            resizable="none"
-            [rows]="3"
-            [inputAttributes]="{
-                'aria-label': textFor('messageBoxInputLabel')
-            }"
-            [placeholder]="textFor('messagePlaceholder')"
-            [showSuffixSeparator]="true"
-            (keydown)="textAreaKeydown($event)"
-        >
-            <kendo-textarea-suffix>
-                <button
-                    kendoButton
-                    fillMode="flat"
-                    class="k-chat-send"
-                    icon="paper-plane"
-                    [svgIcon]="sendIcon"
-                    [tabindex]="0"
-                    [attr.title]="textFor('send')"
-                    (click)="sendClick()"
-                >
-                </button>
-            </kendo-textarea-suffix>
-        </kendo-textarea>
-    </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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageBoxComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-message-box',
-                    template: `
-    <ng-container *ngIf="!messageBoxTemplate">
-        <kendo-textbox
-            *ngIf="type === 'textbox'"
-            #messageBoxInput
-            class="k-message-box"
-            [inputAttributes]="{
-                'aria-label': textFor('messageBoxInputLabel')
-            }"
-            [placeholder]="textFor('messagePlaceholder')"
-            (keydown)="inputKeydown($event)"
-        >
-            <ng-template kendoTextBoxSuffixTemplate>
-                <kendo-textbox-separator></kendo-textbox-separator>
-                <button
-                    kendoButton
-                    fillMode="flat"
-                    class="k-chat-send"
-                    icon="paper-plane"
-                    [svgIcon]="sendIcon"
-                    [tabindex]="0"
-                    [attr.title]="textFor('send')"
-                    (click)="sendClick()"
-                >
-                </button>
-            </ng-template>
-        </kendo-textbox>
-
-        <kendo-textarea
-            *ngIf="type === 'textarea'"
-            #messageBoxInput
-            class="k-message-box !k-align-items-end"
-            resizable="none"
-            [rows]="3"
-            [inputAttributes]="{
-                'aria-label': textFor('messageBoxInputLabel')
-            }"
-            [placeholder]="textFor('messagePlaceholder')"
-            [showSuffixSeparator]="true"
-            (keydown)="textAreaKeydown($event)"
-        >
-            <kendo-textarea-suffix>
-                <button
-                    kendoButton
-                    fillMode="flat"
-                    class="k-chat-send"
-                    icon="paper-plane"
-                    [svgIcon]="sendIcon"
-                    [tabindex]="0"
-                    [attr.title]="textFor('send')"
-                    (click)="sendClick()"
-                >
-                </button>
-            </kendo-textarea-suffix>
-        </kendo-textarea>
-    </ng-container>
-
-    <ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
-`,
-                    standalone: true,
-                    imports: [NgIf, ButtonComponent, NgTemplateOutlet, TextBoxComponent, TextAreaComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextAreaSuffixComponent]
-                }]
-        }], propDecorators: { borderColor: [{
-                type: HostBinding,
-                args: ['style.border-color']
-            }], messageBoxInput: [{
-                type: ViewChild,
-                args: ['messageBoxInput', { static: false }]
-            }], user: [{
-                type: Input
-            }], autoScroll: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], localization: [{
-                type: Input
-            }], messageBoxTemplate: [{
-                type: Input
-            }], sendMessage: [{
-                type: Output
-            }] } });
-
-/**
- * @hidden
- */
-class PreventableEvent {
-    constructor() {
-        this.prevented = false;
-    }
-    /**
-     * Prevents the default action for a specified event.
-     * In this way, the source component suppresses
-     * the built-in behavior that follows the event.
-     */
-    preventDefault() {
-        this.prevented = true;
-    }
-    /**
-     * Returns `true` if the event was prevented
-     * by any of its subscribers.
-     *
-     * @returns `true` if the default action was prevented.
-     * Otherwise, returns `false`.
-     */
-    isDefaultPrevented() {
-        return this.prevented;
-    }
-}
-
-/**
- * Arguments for the `executeAction` event. The `executeAction` event fires when the user clicks
- * a quick action button. Calling `preventDefault()` suppresses the built-in action handler.
- */
-class ExecuteActionEvent extends PreventableEvent {
-    /**
-     * @hidden
-     */
-    constructor(action, message) {
-        super();
-        this.action = action;
-        this.message = message;
-    }
-}
-
-/**
- * @hidden
- */
-const closest = (node, predicate) => {
-    while (node && !predicate(node)) {
-        node = node.parentNode;
-    }
-    return node;
-};
-
-/**
- * @hidden
- */
-class ChatItem {
-}
-
-/**
- * @hidden
- */
-const isAuthor = (user, msg) => user && msg.author && user.id === msg.author.id;
-const last = (arr) => arr[arr.length - 1];
-const dateChanged = (curr, prev) => (curr && prev) && (prev.getDate() !== curr.getDate() ||
-    prev.getMonth() !== curr.getMonth() ||
-    prev.getFullYear() !== curr.getFullYear());
-const addDateMarker = (acc, msg) => {
-    const timestamp = msg.timestamp;
-    const lastItem = last(acc);
-    if (!timestamp) {
-        return;
-    }
-    if (!lastItem || dateChanged(timestamp, lastItem.timestamp)) {
-        const dateMarker = {
-            type: 'date-marker',
-            timestamp: timestamp,
-            trackBy: timestamp.getTime()
-        };
-        acc.push(dateMarker);
-    }
-};
-const groupMessages = (acc, msg, isLastMessage) => {
-    const lastItem = last(acc);
-    let messages;
-    if (isDevMode() && !msg.author) {
-        throw new Error('Author must be set for message: ' + JSON.stringify(msg));
-    }
-    if (msg.typing && !isLastMessage) {
-        return;
-    }
-    if (lastItem && lastItem.type === 'message-group') {
-        messages = lastItem.messages;
-    }
-    if (messages && isAuthor(msg.author, last(messages))) {
-        messages.push(msg);
-    }
-    else {
-        acc.push({
-            type: 'message-group',
-            messages: [msg],
-            author: msg.author,
-            timestamp: msg.timestamp,
-            trackBy: msg
-        });
-    }
-};
-const groupItems = (total) => (acc, msg, index) => {
-    const isLastMessage = index === total - 1;
-    addDateMarker(acc, msg);
-    groupMessages(acc, msg, isLastMessage);
-    if (msg.attachments && msg.attachments.length > 1) {
-        acc.push({
-            type: 'attachment-group',
-            attachments: msg.attachments,
-            attachmentLayout: msg.attachmentLayout,
-            timestamp: msg.timestamp,
-            trackBy: msg
-        });
-    }
-    if (msg.suggestedActions && isLastMessage) {
-        acc.push({
-            type: 'action-group',
-            actions: msg.suggestedActions,
-            timestamp: msg.timestamp,
-            trackBy: msg
-        });
-    }
-    return acc;
-};
-/**
- * @hidden
- */
-const chatView = (messages) => messages.reduce(groupItems(messages.length), []);
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-empty-function */
-/**
- * @hidden
- */
-class SuggestedActionsComponent extends ChatItem {
-    constructor() {
-        super(...arguments);
-        this.dispatch = new EventEmitter();
-        this.defaultClass = true;
-        this.selectedIndex = 0;
-        this.keyHandlers = {
-            [Keys.Tab]: (e) => this.changeSelectedIndex(e),
-            [Keys.Enter]: (_, action) => this.actionClick(action),
-            [Keys.Space]: (_, action) => this.actionClick(action),
-        };
-    }
-    isSelected(index) {
-        return this.selected && this.selectedIndex === index;
-    }
-    actionClick(action) {
-        this.dispatch.next(action);
-    }
-    actionKeydown(e, action) {
-        const handler = this.keyHandlers[e.keyCode];
-        if (handler) {
-            handler(e, action);
-        }
-    }
-    focus() { }
-    changeSelectedIndex(e) {
-        const offset = e.shiftKey ? -1 : 1;
-        const prevIndex = this.selectedIndex;
-        this.selectedIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
-    }
-}
-SuggestedActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestedActionsComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SuggestedActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SuggestedActionsComponent, isStandalone: true, selector: "kendo-chat-suggested-actions", inputs: { actions: "actions", tabbable: "tabbable" }, outputs: { dispatch: "dispatch" }, host: { properties: { "class.k-quick-replies": "this.defaultClass" } }, providers: [{
-            provide: ChatItem,
-            useExisting: forwardRef(() => SuggestedActionsComponent)
-        }], viewQueries: [{ propertyName: "items", predicate: ["item"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <span
-            #item
-            *ngFor="let action of actions; index as index; first as first; last as last"
-            class="k-quick-reply"
-            role="button"
-            [class.k-selected]="isSelected(index)"
-            [class.k-focus]="isSelected(index)"
-            [class.k-first]="first"
-            [class.k-last]="last"
-            [attr.tabindex]="0"
-            (click)="actionClick(action)"
-            (keydown)="actionKeydown($event, action)"
-        >
-        {{ action.title || action.value }}
-        </span>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SuggestedActionsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-chat-suggested-actions',
-                    providers: [{
-                            provide: ChatItem,
-                            useExisting: forwardRef(() => SuggestedActionsComponent)
-                        }],
-                    template: `
-        <span
-            #item
-            *ngFor="let action of actions; index as index; first as first; last as last"
-            class="k-quick-reply"
-            role="button"
-            [class.k-selected]="isSelected(index)"
-            [class.k-focus]="isSelected(index)"
-            [class.k-first]="first"
-            [class.k-last]="last"
-            [attr.tabindex]="0"
-            (click)="actionClick(action)"
-            (keydown)="actionKeydown($event, action)"
-        >
-        {{ action.title || action.value }}
-        </span>
-    `,
-                    standalone: true,
-                    imports: [NgFor]
-                }]
-        }], propDecorators: { actions: [{
-                type: Input
-            }], tabbable: [{
-                type: Input
-            }], dispatch: [{
-                type: Output
-            }], defaultClass: [{
-                type: HostBinding,
-                args: ['class.k-quick-replies']
-            }], items: [{
-                type: ViewChildren,
-                args: ['item']
-            }] } });
-
-// eslint-disable no-forward-ref
-/**
- * @hidden
- */
-class MessageComponent extends ChatItem {
-    constructor(element, intl) {
-        super();
-        this.element = element;
-        this.intl = intl;
-        this.cssClass = true;
-    }
-    get tabIndex() {
-        return this.tabbable ? '0' : '-1';
-    }
-    formatTimeStamp(date) {
-        return this.intl.formatDate(date, { datetime: 'short' });
-    }
-    focus() {
-        this.element.nativeElement.focus();
-    }
-}
-MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageComponent, deps: [{ token: i0.ElementRef }, { token: i1.IntlService }], target: i0.ɵɵFactoryTarget.Component });
-MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MessageComponent, isStandalone: true, selector: "kendo-chat-message", inputs: { message: "message", tabbable: "tabbable", template: "template" }, host: { properties: { "class.k-message": "this.cssClass", "class.k-selected": "this.selected", "class.k-focus": "this.selected", "attr.tabIndex": "this.tabIndex" } }, providers: [{
-            provide: ChatItem,
-            useExisting: forwardRef(() => MessageComponent)
-        }], usesInheritance: true, ngImport: i0, template: `
-        <time
-            [attr.aria-hidden]="!selected"
-            class="k-message-time"
-            *ngIf="message.timestamp"
-        >
-            {{ formatTimeStamp(message.timestamp) }}
-        </time>
-
-        <ng-container *ngIf="!message.typing; else typing">
-            <div class="k-chat-bubble" *ngIf="template">
-                <ng-container
-                    *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"
-                >
-                </ng-container>
-            </div>
-
-            <div class="k-chat-bubble" *ngIf="!template && message.text">
-                {{message.text}}
-            </div>
-        </ng-container>
-
-        <span
-            class="k-message-status"
-            *ngIf="message.status"
-        >
-            {{ message.status }}
-        </span>
-
-        <ng-template #typing>
-            <div class="k-chat-bubble">
-                <div class="k-typing-indicator">
-                <span></span>
-                <span></span>
-                <span></span>
-                </div>
-            </div>
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-chat-message',
-                    providers: [{
-                            provide: ChatItem,
-                            useExisting: forwardRef(() => MessageComponent)
-                        }],
-                    template: `
-        <time
-            [attr.aria-hidden]="!selected"
-            class="k-message-time"
-            *ngIf="message.timestamp"
-        >
-            {{ formatTimeStamp(message.timestamp) }}
-        </time>
-
-        <ng-container *ngIf="!message.typing; else typing">
-            <div class="k-chat-bubble" *ngIf="template">
-                <ng-container
-                    *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"
-                >
-                </ng-container>
-            </div>
-
-            <div class="k-chat-bubble" *ngIf="!template && message.text">
-                {{message.text}}
-            </div>
-        </ng-container>
-
-        <span
-            class="k-message-status"
-            *ngIf="message.status"
-        >
-            {{ message.status }}
-        </span>
-
-        <ng-template #typing>
-            <div class="k-chat-bubble">
-                <div class="k-typing-indicator">
-                <span></span>
-                <span></span>
-                <span></span>
-                </div>
-            </div>
-        </ng-template>
-    `,
-                    standalone: true,
-                    imports: [NgIf, NgTemplateOutlet]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.IntlService }]; }, propDecorators: { message: [{
-                type: Input
-            }], tabbable: [{
-                type: Input
-            }], template: [{
-                type: Input
-            }], cssClass: [{
-                type: HostBinding,
-                args: ['class.k-message']
-            }], selected: [{
-                type: HostBinding,
-                args: ['class.k-selected']
-            }, {
-                type: HostBinding,
-                args: ['class.k-focus']
-            }], tabIndex: [{
-                type: HostBinding,
-                args: ['attr.tabIndex']
-            }] } });
-
-/**
- * @hidden
- */
-class AttachmentComponent {
-    set attachment(value) {
-        this._attachment = value;
-        this.context = {
-            $implicit: this.attachment
-        };
-    }
-    get attachment() {
-        return this._attachment;
-    }
-    get image() {
-        return this.contentType.indexOf('image/') === 0;
-    }
-    get unknown() {
-        return !this.image;
-    }
-    get contentType() {
-        return this.attachment.contentType || '';
-    }
-}
-AttachmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AttachmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AttachmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AttachmentComponent, isStandalone: true, selector: "kendo-chat-attachment", inputs: { attachment: "attachment", template: "template" }, ngImport: i0, template: `
-        <ng-container *ngIf="template">
-            <ng-container *ngTemplateOutlet="template.templateRef; context: context;">
-            </ng-container>
-        </ng-container>
-
-        <div *ngIf="!template" class="k-card">
-            <div class="k-card-body">
-            <h5 class="k-card-title" *ngIf="attachment.title">
-                {{ attachment.title }}
-            </h5>
-            <h6 class="k-card-subtitle" *ngIf="attachment.subtitle">
-                {{ attachment.subtitle }}
-            </h6>
-            <img *ngIf="image" [attr.src]="attachment.content" />
-            <ng-container *ngIf="unknown">
-                {{ attachment.content }}
-            </ng-container>
-            </div>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AttachmentComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-chat-attachment',
-                    template: `
-        <ng-container *ngIf="template">
-            <ng-container *ngTemplateOutlet="template.templateRef; context: context;">
-            </ng-container>
-        </ng-container>
-
-        <div *ngIf="!template" class="k-card">
-            <div class="k-card-body">
-            <h5 class="k-card-title" *ngIf="attachment.title">
-                {{ attachment.title }}
-            </h5>
-            <h6 class="k-card-subtitle" *ngIf="attachment.subtitle">
-                {{ attachment.subtitle }}
-            </h6>
-            <img *ngIf="image" [attr.src]="attachment.content" />
-            <ng-container *ngIf="unknown">
-                {{ attachment.content }}
-            </ng-container>
-            </div>
-        </div>
-    `,
-                    standalone: true,
-                    imports: [NgIf, NgTemplateOutlet]
-                }]
-        }], propDecorators: { attachment: [{
-                type: Input
-            }], template: [{
-                type: Input
-            }] } });
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-// eslint-disable no-forward-ref
-/**
- * @hidden
- */
-class MessageAttachmentsComponent extends ChatItem {
-    constructor(zone, localizationService) {
-        super();
-        this.zone = zone;
-        this.localizationService = localizationService;
-        /**
-         * @hidden
-         */
-        this.chevronLeftIcon = chevronLeftIcon;
-        /**
-         * @hidden
-         */
-        this.chevronRightIcon = chevronRightIcon;
-        this.scrollPosition = 0;
-        this.selectedIndex = 0;
-        this.carouselKeyHandlers = {
-            [Keys.ArrowLeft]: (e) => this.navigateTo(e, this.direction === 'rtl' ? 1 : -1),
-            [Keys.ArrowRight]: (e) => this.navigateTo(e, this.direction === 'rtl' ? -1 : 1)
-        };
-        this.listKeyHandlers = {
-            [Keys.ArrowUp]: (e) => this.navigateTo(e, -1),
-            [Keys.ArrowDown]: (e) => this.navigateTo(e, 1)
-        };
-        this.direction = this.localizationService.rtl ? 'rtl' : 'ltr';
-    }
-    get carousel() {
-        return this.layout !== 'list';
-    }
-    get showLeftArrow() {
-        return this.carousel && this.direction === 'rtl' ? this.scrollPosition > -1 : this.scrollPosition > 0;
-    }
-    get showRightArrow() {
-        return this.carousel && this.direction === 'rtl' ? this.scrollPosition < 0 : this.scrollPosition < 1;
-    }
-    ngAfterViewInit() {
-        this.zone.runOutsideAngular(() => {
-            const scrollDebounceTime = 100;
-            this.scrollSubscription = fromEvent(this.deck.nativeElement, 'scroll')
-                .pipe(debounceTime(scrollDebounceTime))
-                .subscribe(() => this.onScroll());
-        });
-    }
-    ngOnDestroy() {
-        this.scrollSubscription.unsubscribe();
-    }
-    isSelected(index) {
-        return this.selectedIndex === index;
-    }
-    itemKeydown(e, attachment) {
-        const keyHandlers = this.layout === 'list' ?
-            this.listKeyHandlers : this.carouselKeyHandlers;
-        const handler = keyHandlers[e.keyCode];
-        if (handler) {
-            handler(e, attachment);
-        }
-    }
-    itemClick(index) {
-        this.select(index);
-    }
-    focus() {
-        this.select(this.selectedIndex);
-    }
-    scrollTo(dir) {
-        const el = this.deck.nativeElement;
-        const scrollStep = el.scrollWidth / this.items.length;
-        const max = el.scrollWidth - el.offsetWidth;
-        const pos = el.scrollLeft + scrollStep * dir;
-        el.scrollLeft = this.direction === 'rtl' ? Math.min(0, max, pos) : Math.max(0, Math.min(max, pos));
-    }
-    select(index) {
-        this.selectedIndex = index;
-        const item = this.items.toArray()[index];
-        if (item) {
-            item.nativeElement.focus();
-        }
-    }
-    navigateTo(e, offset) {
-        const prevIndex = this.selectedIndex;
-        const nextIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
-        if (nextIndex !== prevIndex) {
-            this.select(nextIndex);
-            e.preventDefault();
-        }
-    }
-    onScroll() {
-        const el = this.deck.nativeElement;
-        if (el.scrollWidth === 0) {
-            return;
-        }
-        const pos = el.scrollLeft / (el.scrollWidth - el.offsetWidth);
-        if (pos !== this.scrollPosition) {
-            this.zone.run(() => {
-                this.scrollPosition = pos;
-            });
-        }
-    }
-    /**
-     * @hidden
-     */
-    textFor(key) {
-        return this.localization.get(key);
-    }
-}
-MessageAttachmentsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageAttachmentsComponent, deps: [{ token: i0.NgZone }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MessageAttachmentsComponent, isStandalone: true, selector: "kendo-chat-message-attachments", inputs: { attachments: "attachments", layout: "layout", tabbable: "tabbable", template: "template", localization: "localization" }, host: { properties: { "class.k-card-deck-scrollwrap": "this.carousel" } }, providers: [{
-            provide: ChatItem,
-            useExisting: forwardRef(() => MessageAttachmentsComponent)
-        }], viewQueries: [{ propertyName: "deck", first: true, predicate: ["deck"], descendants: true, read: ElementRef, static: true }, { propertyName: "items", predicate: ["item"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
-        <button
-            *ngIf="showLeftArrow"
-            (click)="scrollTo(-1)"
-            kendoButton
-            tabindex="-1"
-            [attr.title]="textFor('messageAttachmentLeftArrow')"
-            [svgIcon]="chevronLeftIcon"
-            icon="chevron-left"
-        >
-        </button>
-        <div
-            #deck
-            [class.k-card-deck]="carousel"
-            [class.k-card-list]="!carousel"
-        >
-            <kendo-chat-attachment #item
-                *ngFor="let att of attachments; index as index; first as first; last as last"
-                [attachment]="att"
-                [template]="template"
-                [class.k-selected]="isSelected(index)"
-                [class.k-focus]="isSelected(index)"
-                [class.k-card-wrap]="true"
-                [class.k-first]="first"
-                [class.k-last]="last"
-                [attr.tabindex]="tabbable && isSelected(index) ? '0' : '-1'"
-                (click)="itemClick(index)"
-                (keydown)="itemKeydown($event, att)"
-            >
-            </kendo-chat-attachment>
-        </div>
-        <button
-            *ngIf="showRightArrow"
-            (click)="scrollTo(1)"
-            kendoButton
-            tabindex="-1"
-            [attr.title]="textFor('messageAttachmentRightArrow')"
-            [svgIcon]="chevronRightIcon"
-            icon="chevron-right"
-        >
-        </button>
-    `, 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: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageAttachmentsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [{
-                            provide: ChatItem,
-                            useExisting: forwardRef(() => MessageAttachmentsComponent)
-                        }],
-                    selector: 'kendo-chat-message-attachments',
-                    template: `
-        <button
-            *ngIf="showLeftArrow"
-            (click)="scrollTo(-1)"
-            kendoButton
-            tabindex="-1"
-            [attr.title]="textFor('messageAttachmentLeftArrow')"
-            [svgIcon]="chevronLeftIcon"
-            icon="chevron-left"
-        >
-        </button>
-        <div
-            #deck
-            [class.k-card-deck]="carousel"
-            [class.k-card-list]="!carousel"
-        >
-            <kendo-chat-attachment #item
-                *ngFor="let att of attachments; index as index; first as first; last as last"
-                [attachment]="att"
-                [template]="template"
-                [class.k-selected]="isSelected(index)"
-                [class.k-focus]="isSelected(index)"
-                [class.k-card-wrap]="true"
-                [class.k-first]="first"
-                [class.k-last]="last"
-                [attr.tabindex]="tabbable && isSelected(index) ? '0' : '-1'"
-                (click)="itemClick(index)"
-                (keydown)="itemKeydown($event, att)"
-            >
-            </kendo-chat-attachment>
-        </div>
-        <button
-            *ngIf="showRightArrow"
-            (click)="scrollTo(1)"
-            kendoButton
-            tabindex="-1"
-            [attr.title]="textFor('messageAttachmentRightArrow')"
-            [svgIcon]="chevronRightIcon"
-            icon="chevron-right"
-        >
-        </button>
-    `,
-                    standalone: true,
-                    imports: [NgIf, ButtonComponent, NgFor, AttachmentComponent]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i1$1.LocalizationService }]; }, propDecorators: { attachments: [{
-                type: Input
-            }], layout: [{
-                type: Input
-            }], tabbable: [{
-                type: Input
-            }], template: [{
-                type: Input
-            }], localization: [{
-                type: Input
-            }], carousel: [{
-                type: HostBinding,
-                args: ['class.k-card-deck-scrollwrap']
-            }], deck: [{
-                type: ViewChild,
-                args: ['deck', { read: ElementRef, static: true }]
-            }], items: [{
-                type: ViewChildren,
-                args: ['item', { read: ElementRef }]
-            }] } });
-
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/**
- * @hidden
- */
-class MessageListComponent {
-    constructor(element, intl, renderer) {
-        this.element = element;
-        this.intl = intl;
-        this.renderer = renderer;
-        this.executeAction = new EventEmitter();
-        this.navigate = new EventEmitter();
-        this.resize = new EventEmitter();
-        this.cssClass = true;
-        this.view = [];
-        this.subs = new Subscription();
-        this.keyActions = {
-            [Keys.Home]: (_) => this.onHomeOrEndKeyDown('home'),
-            [Keys.End]: (_) => this.onHomeOrEndKeyDown('end'),
-            [Keys.ArrowUp]: (e) => this.navigateTo(e, -1),
-            [Keys.ArrowDown]: (e) => this.navigateTo(e, 1),
-            [Keys.Tab]: (e) => this.onTabKeyDown(e),
-        };
-    }
-    set messages(value) {
-        const data = value || [];
-        this.view = chatView(data);
-        this._messages = data;
-    }
-    get messages() {
-        return this._messages;
-    }
-    ngOnInit() {
-        const elRef = this.element.nativeElement;
-        this.subs.add(this.renderer.listen(elRef, 'keydown', event => this.onKeydown(event)));
-        this.subs.add(this.renderer.listen(elRef, 'focusout', event => this.onBlur(event)));
-    }
-    ngAfterViewInit() {
-        this.selectedItem = this.items.last;
-    }
-    ngOnDestroy() {
-        this.subs.unsubscribe();
-    }
-    onResize() {
-        this.resize.emit();
-    }
-    formatTimeStamp(date) {
-        return this.intl.formatDate(date, { date: 'full' });
-    }
-    onKeydown(e) {
-        const action = this.keyActions[e.keyCode];
-        if (action) {
-            action(e);
-        }
-    }
-    onBlur(args) {
-        const next = args.relatedTarget || document.activeElement;
-        const outside = !closest(next, (node) => node === this.element.nativeElement);
-        if (outside) {
-            this.select(null);
-        }
-    }
-    isOwnMessage(msg) {
-        return isAuthor(this.user, msg);
-    }
-    dispatchAction(action, message) {
-        const args = new ExecuteActionEvent(action, message);
-        this.executeAction.emit(args);
-    }
-    trackGroup(_index, item) {
-        return item.trackBy;
-    }
-    select(item) {
-        const prevItem = this.selectedItem;
-        if (prevItem) {
-            prevItem.selected = false;
-        }
-        if (item) {
-            item.selected = true;
-            this.selectedItem = item;
-        }
-    }
-    last(items) {
-        if (!items || items.length === 0) {
-            return;
-        }
-        return items[items.length - 1];
-    }
-    onHomeOrEndKeyDown(key) {
-        const items = this.items.toArray();
-        if (key === 'home') {
-            items[0].focus();
-        }
-        else {
-            items[items.length - 1].focus();
-        }
-    }
-    onTabKeyDown(event) {
-        const item = this.items.toArray()[this.items.length - 1];
-        const isLastItemQuickReply = item instanceof SuggestedActionsComponent;
-        const isLastItemMessage = item instanceof MessageComponent;
-        event.target.blur();
-        if (isLastItemQuickReply || isLastItemMessage) {
-            this.select(item);
-            item.focus();
-            this.navigate.emit();
-        }
-    }
-    navigateTo(e, offset) {
-        var _a;
-        const items = this.items.toArray();
-        const prevItem = this.selectedItem;
-        const prevIndex = items.indexOf(prevItem);
-        const nextIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
-        const nextItem = items[nextIndex];
-        const isNextItemQuickReply = nextItem instanceof SuggestedActionsComponent;
-        if (nextItem !== prevItem) {
-            if (isNextItemQuickReply) {
-                (_a = nextItem.items.toArray()[0]) === null || _a === void 0 ? void 0 : _a.nativeElement.focus();
-            }
-            this.select(nextItem);
-            nextItem.focus();
-            this.navigate.emit();
-            e.preventDefault();
-        }
-    }
-    /**
-     * @hidden
-     */
-    textFor(key) {
-        return this.localization.get(key);
-    }
-}
-MessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageListComponent, deps: [{ token: i0.ElementRef }, { token: i1.IntlService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MessageListComponent, isStandalone: true, selector: "kendo-chat-message-list", inputs: { messages: "messages", attachmentTemplate: "attachmentTemplate", messageTemplate: "messageTemplate", localization: "localization", user: "user" }, outputs: { executeAction: "executeAction", navigate: "navigate", resize: "resize" }, host: { properties: { "class.k-message-list-content": "this.cssClass" } }, viewQueries: [{ propertyName: "items", predicate: ChatItem, descendants: true }], ngImport: i0, template: `
-        <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">
-            <ng-container [ngSwitch]="group.type">
-                <div
-                    *ngSwitchCase="'date-marker'"
-                    class="k-timestamp"
-                >
-                    {{ formatTimeStamp(group.timestamp) }}
-                </div>
-                <div
-                    *ngSwitchCase="'message-group'"
-                    class="k-message-group"
-                    [class.k-alt]="isOwnMessage(group.messages[0])"
-                    [class.k-no-avatar]="!group.author.avatarUrl"
-                >
-                    <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>
-                    <div
-                        *ngIf="group.author.avatarUrl"
-                        class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
-                    >
-                        <span class="k-avatar-image">
-                            <img
-                                [attr.src]="group.author.avatarUrl"
-                                [alt]="textFor('messageAvatarAlt')"
-                            />
-                        </span>
-                    </div>
-                    <ng-container
-                        *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
-                    >
-                        <div
-                            *ngIf="msg.user?.avatarUrl"
-                            class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
-                        >
-                            <span class="k-avatar-image">
-                                <img [src]="msg.user?.avatarUrl">
-                            </span>
-                        </div>
-                        <kendo-chat-message #message
-                            [message]="msg"
-                            [tabbable]="lastGroup && lastMessage"
-                            [template]="messageTemplate"
-                            (click)="select(message)"
-                            (focus)="select(message)"
-                            [class.k-only]="group.messages.length === 1"
-                            [class.k-first]="group.messages.length > 1 && firstMessage"
-                            [class.k-last]="group.messages.length > 1 && lastMessage"
-                        >
-                        </kendo-chat-message>
-
-                        <kendo-chat-attachment
-                            *ngIf="msg.attachments && msg.attachments.length === 1"
-                            [attachment]="msg.attachments[0]"
-                            [template]="attachmentTemplate"
-                        >
-                        </kendo-chat-attachment>
-                    </ng-container>
-                </div>
-
-                <kendo-chat-message-attachments #attachments
-                    *ngSwitchCase="'attachment-group'"
-                    [attachments]="group.attachments"
-                    [layout]="group.attachmentLayout"
-                    [localization]="localization"
-                    [tabbable]="lastGroup"
-                    [template]="attachmentTemplate"
-                    (click)="select(attachments)"
-                    (focus)="select(attachments)"
-                >
-                </kendo-chat-message-attachments>
-
-                <kendo-chat-suggested-actions #actions
-                    *ngSwitchCase="'action-group'"
-                    [actions]="group.actions"
-                    [tabbable]="lastGroup"
-                    (dispatch)="dispatchAction($event, last(group.messages))"
-                    (click)="select(actions)"
-                    (focus)="select(actions)"
-                >
-                </kendo-chat-suggested-actions>
-            </ng-container>
-        </ng-container>
-        <kendo-resize-sensor (resize)="onResize()">
-        </kendo-resize-sensor>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MessageComponent, selector: "kendo-chat-message", inputs: ["message", "tabbable", "template"] }, { kind: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }, { kind: "component", type: MessageAttachmentsComponent, selector: "kendo-chat-message-attachments", inputs: ["attachments", "layout", "tabbable", "template", "localization"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "tabbable"], outputs: ["dispatch"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MessageListComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-chat-message-list',
-                    template: `
-        <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">
-            <ng-container [ngSwitch]="group.type">
-                <div
-                    *ngSwitchCase="'date-marker'"
-                    class="k-timestamp"
-                >
-                    {{ formatTimeStamp(group.timestamp) }}
-                </div>
-                <div
-                    *ngSwitchCase="'message-group'"
-                    class="k-message-group"
-                    [class.k-alt]="isOwnMessage(group.messages[0])"
-                    [class.k-no-avatar]="!group.author.avatarUrl"
-                >
-                    <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>
-                    <div
-                        *ngIf="group.author.avatarUrl"
-                        class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
-                    >
-                        <span class="k-avatar-image">
-                            <img
-                                [attr.src]="group.author.avatarUrl"
-                                [alt]="textFor('messageAvatarAlt')"
-                            />
-                        </span>
-                    </div>
-                    <ng-container
-                        *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
-                    >
-                        <div
-                            *ngIf="msg.user?.avatarUrl"
-                            class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
-                        >
-                            <span class="k-avatar-image">
-                                <img [src]="msg.user?.avatarUrl">
-                            </span>
-                        </div>
-                        <kendo-chat-message #message
-                            [message]="msg"
-                            [tabbable]="lastGroup && lastMessage"
-                            [template]="messageTemplate"
-                            (click)="select(message)"
-                            (focus)="select(message)"
-                            [class.k-only]="group.messages.length === 1"
-                            [class.k-first]="group.messages.length > 1 && firstMessage"
-                            [class.k-last]="group.messages.length > 1 && lastMessage"
-                        >
-                        </kendo-chat-message>
-
-                        <kendo-chat-attachment
-                            *ngIf="msg.attachments && msg.attachments.length === 1"
-                            [attachment]="msg.attachments[0]"
-                            [template]="attachmentTemplate"
-                        >
-                        </kendo-chat-attachment>
-                    </ng-container>
-                </div>
-
-                <kendo-chat-message-attachments #attachments
-                    *ngSwitchCase="'attachment-group'"
-                    [attachments]="group.attachments"
-                    [layout]="group.attachmentLayout"
-                    [localization]="localization"
-                    [tabbable]="lastGroup"
-                    [template]="attachmentTemplate"
-                    (click)="select(attachments)"
-                    (focus)="select(attachments)"
-                >
-                </kendo-chat-message-attachments>
-
-                <kendo-chat-suggested-actions #actions
-                    *ngSwitchCase="'action-group'"
-                    [actions]="group.actions"
-                    [tabbable]="lastGroup"
-                    (dispatch)="dispatchAction($event, last(group.messages))"
-                    (click)="select(actions)"
-                    (focus)="select(actions)"
-                >
-                </kendo-chat-suggested-actions>
-            </ng-container>
-        </ng-container>
-        <kendo-resize-sensor (resize)="onResize()">
-        </kendo-resize-sensor>
-    `,
-                    standalone: true,
-                    imports: [NgFor, NgSwitch, NgSwitchCase, NgIf, MessageComponent, AttachmentComponent, MessageAttachmentsComponent, SuggestedActionsComponent, ResizeSensorComponent]
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.IntlService }, { type: i0.Renderer2 }]; }, propDecorators: { messages: [{
-                type: Input
-            }], attachmentTemplate: [{
-                type: Input
-            }], messageTemplate: [{
-                type: Input
-            }], localization: [{
-                type: Input
-            }], user: [{
-                type: Input
-            }], executeAction: [{
-                type: Output
-            }], navigate: [{
-                type: Output
-            }], resize: [{
-                type: Output
-            }], items: [{
-                type: ViewChildren,
-                args: [ChatItem]
-            }], cssClass: [{
-                type: HostBinding,
-                args: ['class.k-message-list-content']
-            }] } });
-
-// Consider scroll to be at the bottom when within this number of pixels from the container height.
-const maxDelta = 2;
-/**
- * @hidden
- */
-class ScrollAnchorDirective {
-    constructor(element, zone, renderer) {
-        this.element = element;
-        this.zone = zone;
-        this.renderer = renderer;
-        this.autoScroll = true;
-        this.autoScrollChange = new EventEmitter();
-        this.overflowAnchor = 'none';
-        this.scrolling = false;
-    }
-    ngOnInit() {
-        this.zone.runOutsideAngular(() => {
-            this.unsubscribe = this.renderer.listen(this.element.nativeElement, 'scroll', () => this.onScroll());
-        });
-    }
-    ngAfterViewInit() {
-        this.scrollToBottom();
-    }
-    ngOnDestroy() {
-        if (this.unsubscribe) {
-            this.unsubscribe();
-        }
-    }
-    onScroll() {
-        if (this.scrolling) {
-            return;
-        }
-        const el = this.element.nativeElement;
-        const bottom = el.scrollTop + el.offsetHeight;
-        const height = el.scrollHeight;
-        const atBottom = height - bottom < maxDelta;
-        if (this.autoScroll !== atBottom) {
-            this.zone.run(() => {
-                this.autoScroll = atBottom;
-                this.autoScrollChange.emit(this.autoScroll);
-            });
-        }
-    }
-    scrollToBottom() {
-        if (!this.autoScroll) {
-            return;
-        }
-        const el = this.element.nativeElement;
-        el.scrollTop = el.scrollHeight - el.clientHeight;
-        this.scrolling = true;
-        this.zone.runOutsideAngular(() => setTimeout(() => this.scrolling = false, 1000));
-    }
-}
-ScrollAnchorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollAnchorDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-ScrollAnchorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: ScrollAnchorDirective, isStandalone: true, selector: "[kendoChatScrollAnchor]", inputs: { autoScroll: "autoScroll" }, outputs: { autoScrollChange: "autoScrollChange" }, host: { properties: { "style.overflow-anchor": "this.overflowAnchor" } }, exportAs: ["scrollAnchor"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScrollAnchorDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoChatScrollAnchor]',
-                    exportAs: 'scrollAnchor',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { autoScroll: [{
-                type: Input
-            }], autoScrollChange: [{
-                type: Output
-            }], overflowAnchor: [{
-                type: HostBinding,
-                args: ['style.overflow-anchor']
-            }] } });
-
-/**
- * @hidden
- */
-let Messages$1 = class Messages extends ComponentMessages {
-};
-Messages$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages$1, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages$1.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: Messages$1, selector: "kendoConversationalUIMessages", inputs: { messagePlaceholder: "messagePlaceholder", send: "send", messageListLabel: "messageListLabel", messageBoxInputLabel: "messageBoxInputLabel", messageAttachmentLeftArrow: "messageAttachmentLeftArrow", messageAttachmentRightArrow: "messageAttachmentRightArrow", messageAvatarAlt: "messageAvatarAlt" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages$1, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'kendoConversationalUIMessages'
-                }]
-        }], propDecorators: { messagePlaceholder: [{
-                type: Input
-            }], send: [{
-                type: Input
-            }], messageListLabel: [{
-                type: Input
-            }], messageBoxInputLabel: [{
-                type: Input
-            }], messageAttachmentLeftArrow: [{
-                type: Input
-            }], messageAttachmentRightArrow: [{
-                type: Input
-            }], messageAvatarAlt: [{
-                type: Input
-            }] } });
-
-// eslint-disable no-forward-ref
-/**
- * @hidden
- */
-let LocalizedMessagesDirective$1 = class LocalizedMessagesDirective extends Messages$1 {
-    constructor(service) {
-        super();
-        this.service = service;
-    }
-};
-LocalizedMessagesDirective$1.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective$1, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective$1.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective$1, isStandalone: true, selector: "[kendoChatLocalizedMessages]", providers: [
-        {
-            provide: Messages$1,
-            useExisting: forwardRef(() => LocalizedMessagesDirective$1)
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective$1, decorators: [{
-            type: Directive,
-            args: [{
-                    providers: [
-                        {
-                            provide: Messages$1,
-                            useExisting: forwardRef(() => LocalizedMessagesDirective$1)
-                        }
-                    ],
-                    selector: '[kendoChatLocalizedMessages]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
-
-/**
- * Represents the Kendo UI Chat component for Angular.
- *
- * {% meta height:700 %}
- * {% embed_file chat/echo/app.component.ts preview %}
- * {% embed_file shared/app.module.ts %}
- * {% embed_file shared/main.ts hidden %}
- * {% endmeta %}
- *
- */
-class ChatComponent {
-    constructor(localization, zone) {
-        this.localization = localization;
-        this.zone = zone;
-        /**
-         * Used to switch between a one-liner input or a textarea.
-         * ([see example]({% slug message_box %})#toc-message-box-types).
-         * @default input
-         */
-        this.messageBoxType = 'textbox';
-        /**
-         * Fires when the user types a message and clicks the **Send** button or presses **Enter**.
-         * Emits the [`SendMessageEvent`]({% slug api_conversational-ui_sendmessageevent %}).
-         *
-         * > The message is not automatically appended to the `messages` array.
-         */
-        this.sendMessage = new EventEmitter();
-        /**
-         * Fires when the user clicks a quick action button.
-         * The Chat internally handles the `reply`, `openUrl`, and `call` [known actions]({% slug api_conversational-ui_actiontype %}).
-         *
-         * Emits the [`ExecuteActionEvent`]({% slug api_conversational-ui_executeactionevent %}).
-         * The event is preventable. If `preventDefault` is called, the built-in action will be suppressed.
-         */
-        this.executeAction = new EventEmitter();
-        /**
-         * @hidden
-         */
-        this.autoScroll = true;
-        validatePackage(packageMetadata);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-        });
-    }
-    get className() {
-        return 'k-chat';
-    }
-    get dirAttr() {
-        return this.direction;
-    }
-    /**
-     * @hidden
-     */
-    get localizationText() {
-        return this.localization;
-    }
-    ngOnChanges() {
-        this.zone.runOutsideAngular(() => setTimeout(() => {
-            this.messageList.nativeElement.style.flex = '1 1 auto';
-        }));
-    }
-    ngAfterViewInit() {
-        if (!isDevMode()) {
-            return;
-        }
-        if (!this.user) {
-            throw new Error('User must be set and have a valid id.');
-        }
-    }
-    ngOnDestroy() {
-        if (this.localizationChangeSubscription) {
-            this.localizationChangeSubscription.unsubscribe();
-        }
-    }
-    /**
-     * @hidden
-     */
-    dispatchAction(e) {
-        this.executeAction.emit(e);
-        if (!e.isDefaultPrevented()) {
-            const handler = makeHandler(e.action);
-            handler(e.action, this);
-            if (!this.messageBoxTemplate) {
-                this.messageBox.messageBoxInput.focus();
-            }
-        }
-    }
-    /**
-     * @hidden
-     */
-    textFor(key) {
-        return this.localization.get(key);
-    }
-}
-ChatComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatComponent, deps: [{ token: i1$1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ChatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChatComponent, isStandalone: true, selector: "kendo-chat", inputs: { messages: "messages", user: "user", messageBoxType: "messageBoxType" }, outputs: { sendMessage: "sendMessage", executeAction: "executeAction" }, host: { properties: { "class": "this.className", "attr.dir": "this.dirAttr" } }, providers: [
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.chat'
-        }
-    ], queries: [{ propertyName: "attachmentTemplate", first: true, predicate: AttachmentTemplateDirective, descendants: true }, { propertyName: "messageTemplate", first: true, predicate: MessageTemplateDirective, descendants: true }, { propertyName: "messageBoxTemplate", first: true, predicate: ChatMessageBoxTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "messageBox", first: true, predicate: ["messageBox"], descendants: true }, { propertyName: "messageList", first: true, predicate: ["messageList"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: `
-        <ng-container kendoChatLocalizedMessages
-            i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
-            messagePlaceholder="Type a message..."
-
-            i18n-send="kendo.chat.send|The text for the Send button"
-            send="Send..."
-
-            i18n-messageListLabel="kendo.chat.messageListLabel|The label text for the Message list"
-            messageListLabel="Message list"
-
-            i18n-messageBoxInputLabel="kendo.chat.messageBoxInputLabel|The label text for the Message input box"
-            messageBoxInputLabel="Message"
-
-            i18n-messageAttachmentLeftArrow="kendo.chat.messageAttachmentLeftArrow|The text for the left arrow of the message attachments"
-            messageAttachmentLeftArrow="Previous item"
-
-            i18n-messageAttachmentRightArrow="kendo.chat.messageAttachmentRightArrow|The text for the right arrow of the message attachments"
-            messageAttachmentRightArrow="Next item"
-
-            i18n-messageAvatarAlt="kendo.chat.messageAvatarAlt|The alt attribute text for the avatar"
-            messageAvatarAlt="Avatar"
-        >
-        </ng-container>
-
-        <div
-            #messageList
-            class="k-message-list k-avatars"
-            aria-live="polite"
-            role="log"
-            kendoChatScrollAnchor
-            [attr.aria-label]="textFor('messageListLabel')"
-            #anchor="scrollAnchor"
-            [(autoScroll)]="autoScroll"
-        >
-            <kendo-chat-message-list
-                [messages]="messages"
-                [messageTemplate]="messageTemplate"
-                [localization]="localizationText"
-                [attachmentTemplate]="attachmentTemplate"
-                [user]="user"
-                (executeAction)="dispatchAction($event)"
-                (resize)="anchor.scrollToBottom()"
-                (navigate)="this.autoScroll = false"
-            >
-            </kendo-chat-message-list>
-        </div>
-        <kendo-message-box
-        #messageBox
-        [messageBoxTemplate]="messageBoxTemplate"
-        [type]="messageBoxType"
-        [user]="user"
-        [autoScroll]="autoScroll"
-        [localization]="localizationText"
-        (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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [
-                        LocalizationService,
-                        {
-                            provide: L10N_PREFIX,
-                            useValue: 'kendo.chat'
-                        }
-                    ],
-                    selector: 'kendo-chat',
-                    template: `
-        <ng-container kendoChatLocalizedMessages
-            i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
-            messagePlaceholder="Type a message..."
-
-            i18n-send="kendo.chat.send|The text for the Send button"
-            send="Send..."
-
-            i18n-messageListLabel="kendo.chat.messageListLabel|The label text for the Message list"
-            messageListLabel="Message list"
-
-            i18n-messageBoxInputLabel="kendo.chat.messageBoxInputLabel|The label text for the Message input box"
-            messageBoxInputLabel="Message"
-
-            i18n-messageAttachmentLeftArrow="kendo.chat.messageAttachmentLeftArrow|The text for the left arrow of the message attachments"
-            messageAttachmentLeftArrow="Previous item"
-
-            i18n-messageAttachmentRightArrow="kendo.chat.messageAttachmentRightArrow|The text for the right arrow of the message attachments"
-            messageAttachmentRightArrow="Next item"
-
-            i18n-messageAvatarAlt="kendo.chat.messageAvatarAlt|The alt attribute text for the avatar"
-            messageAvatarAlt="Avatar"
-        >
-        </ng-container>
-
-        <div
-            #messageList
-            class="k-message-list k-avatars"
-            aria-live="polite"
-            role="log"
-            kendoChatScrollAnchor
-            [attr.aria-label]="textFor('messageListLabel')"
-            #anchor="scrollAnchor"
-            [(autoScroll)]="autoScroll"
-        >
-            <kendo-chat-message-list
-                [messages]="messages"
-                [messageTemplate]="messageTemplate"
-                [localization]="localizationText"
-                [attachmentTemplate]="attachmentTemplate"
-                [user]="user"
-                (executeAction)="dispatchAction($event)"
-                (resize)="anchor.scrollToBottom()"
-                (navigate)="this.autoScroll = false"
-            >
-            </kendo-chat-message-list>
-        </div>
-        <kendo-message-box
-        #messageBox
-        [messageBoxTemplate]="messageBoxTemplate"
-        [type]="messageBoxType"
-        [user]="user"
-        [autoScroll]="autoScroll"
-        [localization]="localizationText"
-        (sendMessage)="sendMessage.emit($event)"
-        >
-        </kendo-message-box>
-    `,
-                    standalone: true,
-                    imports: [LocalizedMessagesDirective$1, ScrollAnchorDirective, MessageListComponent, MessageBoxComponent]
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { messages: [{
-                type: Input
-            }], user: [{
-                type: Input
-            }], messageBoxType: [{
-                type: Input
-            }], sendMessage: [{
-                type: Output
-            }], executeAction: [{
-                type: Output
-            }], className: [{
-                type: HostBinding,
-                args: ['class']
-            }], dirAttr: [{
-                type: HostBinding,
-                args: ['attr.dir']
-            }], attachmentTemplate: [{
-                type: ContentChild,
-                args: [AttachmentTemplateDirective, { static: false }]
-            }], messageTemplate: [{
-                type: ContentChild,
-                args: [MessageTemplateDirective, { static: false }]
-            }], messageBoxTemplate: [{
-                type: ContentChild,
-                args: [ChatMessageBoxTemplateDirective, { static: false }]
-            }], messageBox: [{
-                type: ViewChild,
-                args: ['messageBox', { static: false }]
-            }], messageList: [{
-                type: ViewChild,
-                args: ['messageList', { static: true }]
-            }] } });
-
-/**
- * @hidden
- */
-const MY_TOKEN = new InjectionToken('COMMAND_TOKEN');
-/**
- * @hidden
- */
-const DEFAULT_SVG_ICONS = {
-    prompt: sparklesIcon,
-    output: commentIcon,
-    command: moreHorizontalIcon
-};
-/**
- * @hidden
- */
-const DEFAULT_ICONS = {
-    prompt: 'sparkles',
-    output: 'comment',
-    command: 'more-horizontal'
-};
-
-/**
- * @hidden
- */
-class BaseView {
-    constructor(viewType, localization) {
-        this.viewType = viewType;
-        this.localization = localization;
-        this.hostClasses = true;
-        if (this.viewType !== 'custom') {
-            this.icon = DEFAULT_ICONS[this.viewType];
-            this.svgIcon = DEFAULT_SVG_ICONS[this.viewType];
-        }
-    }
-    /**
-     * The text of the ToolBar button corresponding to the view.
-     */
-    set buttonText(value) {
-        this._buttonText = value;
-    }
-    get buttonText() {
-        return isPresent(this._buttonText) ?
-            this._buttonText :
-            this.messageFor(`${this.viewType}View`);
-    }
-    /**
-    * The font icon of the ToolBar button corresponding to the view.
-    */
-    set icon(value) {
-        if (isPresent(value)) {
-            this._icon = value;
-        }
-        else {
-            this.icon = DEFAULT_ICONS[this.viewType];
-        }
-    }
-    get icon() {
-        return this._icon;
-    }
-    /**
-    * The SVG icon of the ToolBar button corresponding to the view.
-    */
-    set svgIcon(value) {
-        if (isPresent(value)) {
-            this._svgIcon = value;
-        }
-        else {
-            this.svgIcon = DEFAULT_SVG_ICONS[this.viewType];
-        }
-    }
-    get svgIcon() {
-        return this._svgIcon;
-    }
-    /**
-     * @hidden
-     */
-    messageFor(text) {
-        return this.localization.get(text);
-    }
-}
-BaseView.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseView, deps: [{ token: MY_TOKEN }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-BaseView.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: BaseView, inputs: { buttonText: "buttonText", icon: "icon", svgIcon: "svgIcon" }, host: { properties: { "class.k-prompt-view": "this.hostClasses" } }, viewQueries: [{ propertyName: "template", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BaseView, decorators: [{
-            type: Directive
-        }], ctorParameters: function () {
-        return [{ type: undefined, decorators: [{
-                        type: Inject,
-                        args: [MY_TOKEN]
-                    }] }, { type: i1$1.LocalizationService }];
-    }, propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-prompt-view']
-            }], template: [{
-                type: ViewChild,
-                args: ['content', { static: true }]
-            }], buttonText: [{
-                type: Input
-            }], icon: [{
-                type: Input
-            }], svgIcon: [{
-                type: Input
-            }] } });
-
-/**
- * @hidden
- */
-class AIPromptService {
-    constructor() {
-        this.promptValue = '';
-        this.showOutputRating = false;
-        this.requestEvent = new Subject();
-        this.executeEvent = new Subject();
-        this.outputCopyEvent = new Subject();
-        this.outputRatingChangeEvent = new Subject();
-    }
-    getFlattenPromptCommands(commands = this.promptCommands) {
-        let newArr = [];
-        commands.forEach(c => {
-            if (c.hasOwnProperty('children')) {
-                const childrenArr = c.children;
-                newArr = newArr.concat(childrenArr);
-                if (childrenArr.length > 0) {
-                    this.getFlattenPromptCommands(childrenArr);
-                }
-            }
-        });
-        return newArr.concat(this.promptCommands);
-    }
-}
-AIPromptService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-AIPromptService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptService, decorators: [{
-            type: Injectable
-        }] });
-
-/**
- * Represents a template that allows you to define additional ToolBar actions.
- * The actions will be rendered right after all views' ToolBar buttons.
- * To define the template, nest an `<ng-template>` tag
- * with the `kendoAIPromptToolbarActionsTemplate` directive inside the `<kendo-aiprompt>` tag.
- */
-class AIPromptToolbarActionsDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-AIPromptToolbarActionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptToolbarActionsDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-AIPromptToolbarActionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AIPromptToolbarActionsDirective, isStandalone: true, selector: "[kendoAIPromptToolbarActionsTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptToolbarActionsDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoAIPromptToolbarActionsTemplate]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i0.TemplateRef, decorators: [{
-                        type: Optional
-                    }] }];
-    } });
-
-/**
- * @hidden
- */
-class ToolbarNavigationService {
-    constructor(localizationService) {
-        this.localizationService = localizationService;
-        this.focusableElements = [];
-        this.currentFocusedIndex = 0;
-    }
-    register(tool) {
-        if (!this.focusableElements.some(el => el === tool)) {
-            this.focusableElements.push(tool);
-        }
-    }
-    unregister(tool) {
-        this.currentFocusedIndex = 0;
-        this.focusableElements = this.focusableElements.filter(el => el !== tool);
-    }
-    isActive(focusable) {
-        return this.focusableElements[this.currentFocusedIndex] === focusable;
-    }
-    setActiveIndex(tool) {
-        this.currentFocusedIndex = Math.max(this.focusableElements.indexOf(tool), 0);
-    }
-    move(direction) {
-        let delta = direction === 'right' ? 1 : -1;
-        if (this.localizationService.rtl) {
-            delta = -delta;
-        }
-        this.currentFocusedIndex += delta;
-        if (this.currentFocusedIndex < 0) {
-            this.currentFocusedIndex = this.focusableElements.length - 1;
-        }
-        else if (this.currentFocusedIndex >= this.focusableElements.length) {
-            this.currentFocusedIndex = 0;
-        }
-        this.focusableElements[this.currentFocusedIndex].activate();
-    }
-    focusFirst() {
-        this.focusableElements[this.currentFocusedIndex].activate();
-    }
-}
-ToolbarNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarNavigationService, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
-ToolbarNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarNavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToolbarNavigationService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
-
-/**
- * @hidden
- */
-class AIPromptToolbarFocusableDirective {
-    constructor(host, navigationService, renderer) {
-        this.host = host;
-        this.navigationService = navigationService;
-        this.renderer = renderer;
-        this.keyDownHandler = (e) => {
-            const targetsSelf = e.target === this.element;
-            const isLeftArrow = e.keyCode === Keys.ArrowLeft;
-            const isRightArrow = e.keyCode === Keys.ArrowRight;
-            const isArrow = isLeftArrow || isRightArrow;
-            if (!targetsSelf || !isArrow) {
-                return;
-            }
-            this.renderer.setAttribute(this.element, 'tabindex', '-1');
-            this.element.querySelectorAll(focusableSelector).forEach(el => {
-                this.renderer.setAttribute(el, 'tabindex', '-1');
-            });
-            if (isRightArrow) {
-                this.navigationService.move('right');
-            }
-            else if (isLeftArrow) {
-                this.navigationService.move('left');
-            }
-        };
-        this.clickHandler = () => {
-            this.navigationService.setActiveIndex(this);
-        };
-        navigationService.register(this);
-    }
-    get element() {
-        return this.host.nativeElement;
-    }
-    ngAfterViewInit() {
-        this.renderer.setAttribute(this.element, 'tabindex', this.navigationService.isActive(this) ? '0' : '-1');
-        this.element.addEventListener('keydown', this.keyDownHandler, { capture: true });
-        this.element.addEventListener('click', this.clickHandler, { capture: true });
-    }
-    ngOnDestroy() {
-        this.navigationService.unregister(this);
-        this.element.removeEventListener('keydown', this.keyDownHandler, { capture: true });
-        this.element.removeEventListener('click', this.clickHandler, { capture: true });
-    }
-    activate() {
-        this.renderer.setAttribute(this.element, 'tabindex', '0');
-        this.element.focus();
-    }
-}
-AIPromptToolbarFocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptToolbarFocusableDirective, deps: [{ token: i0.ElementRef }, { token: ToolbarNavigationService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-AIPromptToolbarFocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AIPromptToolbarFocusableDirective, isStandalone: true, selector: "[kendoAIPromptToolbarFocusable]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptToolbarFocusableDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoAIPromptToolbarFocusable]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ToolbarNavigationService }, { type: i0.Renderer2 }]; } });
-
-/**
- * @hidden
- */
-class Messages extends ComponentMessages {
-}
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: Messages, inputs: { promptView: "promptView", outputView: "outputView", generateOutput: "generateOutput", promptPlaceholder: "promptPlaceholder", copyOutput: "copyOutput", retryGeneration: "retryGeneration", outputTitle: "outputTitle", outputRetryTitle: "outputRetryTitle", promptSuggestions: "promptSuggestions" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: Messages, decorators: [{
-            type: Directive
-        }], propDecorators: { promptView: [{
-                type: Input
-            }], outputView: [{
-                type: Input
-            }], generateOutput: [{
-                type: Input
-            }], promptPlaceholder: [{
-                type: Input
-            }], copyOutput: [{
-                type: Input
-            }], retryGeneration: [{
-                type: Input
-            }], outputTitle: [{
-                type: Input
-            }], outputRetryTitle: [{
-                type: Input
-            }], promptSuggestions: [{
-                type: Input
-            }] } });
-
-/**
- * @hidden
- */
-class LocalizedMessagesDirective extends Messages {
-    constructor(service) {
-        super();
-        this.service = service;
-    }
-}
-LocalizedMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoAIPromptLocalizedMessages]", providers: [
-        {
-            provide: Messages,
-            useExisting: forwardRef(() => LocalizedMessagesDirective)
-        }
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    providers: [
-                        {
-                            provide: Messages,
-                            useExisting: forwardRef(() => LocalizedMessagesDirective)
-                        }
-                    ],
-                    selector: '[kendoAIPromptLocalizedMessages]',
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
-
-/**
- * Represents the Kendo UI AIPrompt component for Angular.
- */
-class AIPromptComponent {
-    constructor(localization, service, navigationService, ngZone) {
-        this.localization = localization;
-        this.service = service;
-        this.navigationService = navigationService;
-        this.ngZone = ngZone;
-        this.hostClasses = true;
-        /**
-         * Fires when the `activeView` property of the component is updated.
-         * Used to provide a two-way binding for the `activeView` property.
-         */
-        this.activeViewChange = new EventEmitter();
-        /**
-         * Fires each time the user clicks the Prompt view Generate button or the Output view Retry button.
-         * To distinguish the source element, use the event's `isRetry` field.
-         */
-        this.promptRequest = new EventEmitter();
-        /**
-         * Fires each time the user clicks a Command view command. Exposes the selected command as event data.
-         */
-        this.commandExecute = new EventEmitter();
-        /**
-         * Fires each time the user clicks any Output view Copy button.
-         */
-        this.outputCopy = new EventEmitter();
-        /**
-         * Fires each time the user clicks a rating button in any Output view card.
-         */
-        this.outputRatingChange = new EventEmitter();
-        this.subs = new Subscription();
-        /**
-         * @hidden
-         */
-        this.sparklesIcon = sparklesIcon;
-        /**
-         * @hidden
-         */
-        this.outputIcon = commentIcon;
-        this._activeView = 0;
-        validatePackage(packageMetadata);
-        this.direction = localization.rtl ? 'rtl' : 'ltr';
-        this.subs.add(localization.changes.subscribe(({ rtl }) => {
-            this.direction = rtl ? 'rtl' : 'ltr';
-        }));
-    }
-    get dirAttr() {
-        return this.direction;
-    }
-    /**
-     * The active view index of the AIPrompt component.
-     */
-    set activeView(idx) {
-        if (this._activeView !== idx) {
-            this._activeView = idx;
-            this.service.promptValue && (this.service.promptValue = '');
-        }
-    }
-    get activeView() {
-        return this._activeView;
-    }
-    /**
-     * The collection of commands that will be rendered in the Command view.
-     */
-    set promptCommands(value) {
-        this.service.promptCommands = value;
-    }
-    /**
-     * The collection of suggestions that will be rendered in the Prompt view.
-     */
-    set promptSuggestions(value) {
-        this.service.promptSuggestions = value;
-    }
-    /**
-     * The collection of generated prompt outputs that will be rendered in the Output view.
-     */
-    set promptOutputs(value) {
-        this.service.promptOutputs = value;
-    }
-    /**
-     * Specifies if the rating buttons in each Output view card will be rendered.
-     * By default, rating buttons are not rendered.
-     *
-     * @default false
-     */
-    set showOutputRating(value) {
-        this.service.showOutputRating = value;
-    }
-    ngAfterViewInit() {
-        this.ngZone.runOutsideAngular(() => {
-            this.service.aiPrompt = this;
-            this.subs.add(this.service.requestEvent.subscribe(ev => this.promptRequest.emit(ev)));
-            this.subs.add(this.service.executeEvent.subscribe(ev => this.commandExecute.emit(ev)));
-            this.subs.add(this.service.outputCopyEvent.subscribe(ev => this.outputCopy.emit(ev)));
-            this.subs.add(this.service.outputRatingChangeEvent.subscribe(ev => this.outputRatingChange.emit(ev)));
-        });
-    }
-    ngOnDestroy() {
-        this.subs.unsubscribe();
-    }
-    /**
-     * Focuses the first focusable element in the AIPrompt.
-     */
-    focus() {
-        this.navigationService.focusFirst();
-    }
-    /**
-     * @hidden
-     */
-    get selectedView() {
-        return this.viewsArray[this.activeView];
-    }
-    /**
-     * @hidden
-     */
-    get viewsArray() {
-        var _a;
-        return (_a = this.views) === null || _a === void 0 ? void 0 : _a.toArray();
-    }
-    /**
-     * @hidden
-     */
-    viewChange(idx) {
-        if (idx !== this.activeView) {
-            this.activeView = idx;
-            this.activeViewChange.emit(idx);
-        }
-    }
-    /**
-     * @hidden
-     */
-    messageFor(text) {
-        return this.localization.get(text);
-    }
-    /**
-     * @hidden
-     */
-    get viewTemplate() {
-        var _a, _b, _c;
-        return ((_a = this.selectedView) === null || _a === void 0 ? void 0 : _a.viewType) === 'custom' ? (_b = this.selectedView) === null || _b === void 0 ? void 0 : _b.viewTemplate : (_c = this.selectedView) === null || _c === void 0 ? void 0 : _c.template;
-    }
-    /**
-     * @hidden
-     */
-    handleGenerateOutput() {
-        const value = this.service.promptValue;
-        const eventArgs = {
-            prompt: value,
-            sender: this,
-            isRetry: false
-        };
-        this.promptRequest.emit(eventArgs);
-    }
-}
-AIPromptComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }, { token: ToolbarNavigationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AIPromptComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AIPromptComponent, isStandalone: true, selector: "kendo-aiprompt", inputs: { activeView: "activeView", promptCommands: "promptCommands", promptSuggestions: "promptSuggestions", promptOutputs: "promptOutputs", showOutputRating: "showOutputRating" }, outputs: { activeViewChange: "activeViewChange", promptRequest: "promptRequest", commandExecute: "commandExecute", outputCopy: "outputCopy", outputRatingChange: "outputRatingChange" }, host: { properties: { "class.k-prompt": "this.hostClasses", "attr.dir": "this.dirAttr" } }, providers: [
-        LocalizationService,
-        AIPromptService,
-        ToolbarNavigationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.aiprompt'
-        }
-    ], queries: [{ propertyName: "toolbarActionsTemplate", first: true, predicate: AIPromptToolbarActionsDirective, descendants: true }, { propertyName: "views", predicate: BaseView }], exportAs: ["kendoAIPrompt"], ngImport: i0, template: `
-        <ng-container kendoAIPromptLocalizedMessages
-            i18n-promptView="kendo.aiprompt.promptView|The Toolbar button text for the Prompt view."
-            promptView="Ask AI"
-            i18n-outputView="kendo.aiprompt.outputView|The Toolbar button text for the Output view."
-            outputView="Output"
-            i18n-generateOutput="kendo.aiprompt.generateOutput|The text for the Generate button in the Prompt view."
-            generateOutput="Generate"
-            i18n-promptPlaceholder="kendo.aiprompt.promptPlaceholder|The placeholder text for the Prompt View text area."
-            promptPlaceholder="Ask or generate content with AI"
-            i18n-copyOutput="kendo.aiprompt.copyOutput|The Copy button text in each Output view card."
-            copyOutput="Copy"
-            i18n-retryGeneration="kendo.aiprompt.retryGeneration|The Retry button text in each Output view card."
-            retryGeneration="Retry"
-            i18n-outputTitle="kendo.aiprompt.outputTitle|The title of each Output view card."
-            outputTitle="Generated with AI"
-            i18n-outputRetryTitle="kendo.aiprompt.outputRetryTitle|The title of each Output view retry card."
-            outputRetryTitle="Generated with AI"
-            i18n-promptSuggestions="kendo.aiprompt.promptSuggestions|The title of the Prompt suggestions button."
-            promptSuggestions="Prompt suggestions">
-        </ng-container>
-        <div class="k-prompt-header">
-            <div class="k-toolbar-flat k-toolbar k-toolbar-md"
-                role="toolbar">
-                <button *ngFor="let view of viewsArray; let idx = index"
-                    kendoButton
-                    kendoAIPromptToolbarFocusable
-                    type="button"
-                    fillMode="flat"
-                    rounded="full"
-                    themeColor="primary"
-                    [svgIcon]="view.svgIcon"
-                    [icon]="view.icon"
-                    [selected]="idx === activeView"
-                    (click)="viewChange(idx)">
-                    {{view.buttonText}}
-                </button>
-
-                <ng-template *ngIf="toolbarActionsTemplate"
-                    [ngTemplateOutlet]="toolbarActionsTemplate?.templateRef">
-                </ng-template>
-            </div>
-        </div>
-        <div class="k-prompt-content">
-            <div class="k-prompt-view">
-                <ng-container *ngTemplateOutlet="viewTemplate">
-                </ng-container>
-            </div>
-        </div>
-        <div class="k-prompt-footer" *ngIf="selectedView?.viewType === 'prompt'">
-            <div class="k-actions k-actions-start k-actions-horizontal k-prompt-actions">
-                <button
-                    kendoButton
-                    type="button"
-                    themeColor="primary"
-                    rounded="full"
-                    [svgIcon]="sparklesIcon"
-                    icon="sparkles"
-                    (click)="handleGenerateOutput()">{{messageFor('generateOutput')}}</button>
-            </div>
-        </div>
-    `, isInline: true, 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'kendoAIPrompt',
-                    selector: 'kendo-aiprompt',
-                    providers: [
-                        LocalizationService,
-                        AIPromptService,
-                        ToolbarNavigationService,
-                        {
-                            provide: L10N_PREFIX,
-                            useValue: 'kendo.aiprompt'
-                        }
-                    ],
-                    template: `
-        <ng-container kendoAIPromptLocalizedMessages
-            i18n-promptView="kendo.aiprompt.promptView|The Toolbar button text for the Prompt view."
-            promptView="Ask AI"
-            i18n-outputView="kendo.aiprompt.outputView|The Toolbar button text for the Output view."
-            outputView="Output"
-            i18n-generateOutput="kendo.aiprompt.generateOutput|The text for the Generate button in the Prompt view."
-            generateOutput="Generate"
-            i18n-promptPlaceholder="kendo.aiprompt.promptPlaceholder|The placeholder text for the Prompt View text area."
-            promptPlaceholder="Ask or generate content with AI"
-            i18n-copyOutput="kendo.aiprompt.copyOutput|The Copy button text in each Output view card."
-            copyOutput="Copy"
-            i18n-retryGeneration="kendo.aiprompt.retryGeneration|The Retry button text in each Output view card."
-            retryGeneration="Retry"
-            i18n-outputTitle="kendo.aiprompt.outputTitle|The title of each Output view card."
-            outputTitle="Generated with AI"
-            i18n-outputRetryTitle="kendo.aiprompt.outputRetryTitle|The title of each Output view retry card."
-            outputRetryTitle="Generated with AI"
-            i18n-promptSuggestions="kendo.aiprompt.promptSuggestions|The title of the Prompt suggestions button."
-            promptSuggestions="Prompt suggestions">
-        </ng-container>
-        <div class="k-prompt-header">
-            <div class="k-toolbar-flat k-toolbar k-toolbar-md"
-                role="toolbar">
-                <button *ngFor="let view of viewsArray; let idx = index"
-                    kendoButton
-                    kendoAIPromptToolbarFocusable
-                    type="button"
-                    fillMode="flat"
-                    rounded="full"
-                    themeColor="primary"
-                    [svgIcon]="view.svgIcon"
-                    [icon]="view.icon"
-                    [selected]="idx === activeView"
-                    (click)="viewChange(idx)">
-                    {{view.buttonText}}
-                </button>
-
-                <ng-template *ngIf="toolbarActionsTemplate"
-                    [ngTemplateOutlet]="toolbarActionsTemplate?.templateRef">
-                </ng-template>
-            </div>
-        </div>
-        <div class="k-prompt-content">
-            <div class="k-prompt-view">
-                <ng-container *ngTemplateOutlet="viewTemplate">
-                </ng-container>
-            </div>
-        </div>
-        <div class="k-prompt-footer" *ngIf="selectedView?.viewType === 'prompt'">
-            <div class="k-actions k-actions-start k-actions-horizontal k-prompt-actions">
-                <button
-                    kendoButton
-                    type="button"
-                    themeColor="primary"
-                    rounded="full"
-                    [svgIcon]="sparklesIcon"
-                    icon="sparkles"
-                    (click)="handleGenerateOutput()">{{messageFor('generateOutput')}}</button>
-            </div>
-        </div>
-    `,
-                    standalone: true,
-                    imports: [LocalizedMessagesDirective, NgFor, ButtonComponent, AIPromptToolbarFocusableDirective, NgIf, NgTemplateOutlet]
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }, { type: ToolbarNavigationService }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
-                type: HostBinding,
-                args: ['class.k-prompt']
-            }], dirAttr: [{
-                type: HostBinding,
-                args: ['attr.dir']
-            }], views: [{
-                type: ContentChildren,
-                args: [BaseView]
-            }], toolbarActionsTemplate: [{
-                type: ContentChild,
-                args: [AIPromptToolbarActionsDirective]
-            }], activeView: [{
-                type: Input
-            }], promptCommands: [{
-                type: Input
-            }], promptSuggestions: [{
-                type: Input
-            }], promptOutputs: [{
-                type: Input
-            }], showOutputRating: [{
-                type: Input
-            }], activeViewChange: [{
-                type: Output
-            }], promptRequest: [{
-                type: Output
-            }], commandExecute: [{
-                type: Output
-            }], outputCopy: [{
-                type: Output
-            }], outputRatingChange: [{
-                type: Output
-            }] } });
-
-/**
- * The component for rendering the AIPrompt Command View.
- */
-class CommandViewComponent extends BaseView {
-    constructor(localization, service) {
-        super('command', localization);
-        this.service = service;
-        /**
-         * @hidden
-         */
-        this.panelBarItems = [];
-    }
-    ngOnInit() {
-        if (this.service.promptCommands) {
-            this.panelBarItems = this.getPanelBarItems(this.service.promptCommands);
-        }
-    }
-    /**
-     * @hidden
-     */
-    itemClickHandler(ev) {
-        if (ev.item.children) {
-            return;
-        }
-        const selectedCommand = this.service.getFlattenPromptCommands().find(c => c.id == ev.item.id);
-        if (selectedCommand) {
-            const eventArgs = {
-                command: selectedCommand,
-                sender: this.service.aiPrompt,
-                isRetry: false
-            };
-            this.service.executeEvent.next(eventArgs);
-        }
-    }
-    getPanelBarItems(commands) {
-        return commands.map(c => ({
-            title: c.text,
-            id: c.id,
-            icon: c.icon,
-            svgIcon: c.svgIcon,
-            children: c.children ? this.getPanelBarItems(c.children) : null
-        }));
-    }
-}
-CommandViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommandViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
-CommandViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CommandViewComponent, isStandalone: true, selector: "kendo-aiprompt-command-view", providers: [{
-            provide: BaseView,
-            useExisting: forwardRef(() => CommandViewComponent)
-        }], usesInheritance: true, ngImport: i0, template: `
-        <ng-template #content>
-            <kendo-panelbar
-                [items]="panelBarItems"
-                [animate]="false"
-                [selectable]="false"
-                (itemClick)="itemClickHandler($event)"
-            ></kendo-panelbar>
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: PanelBarComponent, selector: "kendo-panelbar", inputs: ["expandMode", "selectable", "animate", "height", "keepItemContent", "items"], outputs: ["stateChange", "select", "expand", "collapse", "itemClick"], exportAs: ["kendoPanelbar"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CommandViewComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-aiprompt-command-view',
-                    providers: [{
-                            provide: BaseView,
-                            useExisting: forwardRef(() => CommandViewComponent)
-                        }],
-                    template: `
-        <ng-template #content>
-            <kendo-panelbar
-                [items]="panelBarItems"
-                [animate]="false"
-                [selectable]="false"
-                (itemClick)="itemClickHandler($event)"
-            ></kendo-panelbar>
-        </ng-template>
-    `,
-                    standalone: true,
-                    imports: [PanelBarComponent]
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; } });
-
-/**
- * Custom component messages override the default component messages.
- * ([see example]({% slug globalization_chat %}#toc-custom-messages)).
- */
-class AIPromptCustomMessagesComponent extends Messages {
-    constructor(service) {
-        super();
-        this.service = service;
-    }
-    get override() {
-        return true;
-    }
-}
-AIPromptCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-AIPromptCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AIPromptCustomMessagesComponent, isStandalone: true, selector: "kendo-aiprompt-messages", providers: [
-        {
-            provide: Messages,
-            useExisting: forwardRef(() => AIPromptCustomMessagesComponent)
-        }
-    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptCustomMessagesComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [
-                        {
-                            provide: Messages,
-                            useExisting: forwardRef(() => AIPromptCustomMessagesComponent)
-                        }
-                    ],
-                    selector: 'kendo-aiprompt-messages',
-                    template: ``,
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
-
-/**
- * The component for rendering an AIPrompt Custom View.
- */
-class CustomViewComponent extends BaseView {
-    constructor(localization) {
-        super('custom', localization);
-    }
-}
-CustomViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomViewComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomViewComponent, isStandalone: true, selector: "kendo-aiprompt-custom-view", inputs: { viewTemplate: "viewTemplate" }, providers: [{
-            provide: BaseView,
-            useExisting: forwardRef(() => CustomViewComponent)
-        }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomViewComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-aiprompt-custom-view',
-                    providers: [{
-                            provide: BaseView,
-                            useExisting: forwardRef(() => CustomViewComponent)
-                        }],
-                    template: ``,
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; }, propDecorators: { viewTemplate: [{
-                type: Input
-            }] } });
-
-/**
- * @hidden
- */
-class AIPromptOutputCardComponent {
-    constructor(localization, service) {
-        this.localization = localization;
-        this.service = service;
-        this.hostClass = true;
-        this.listItemRole = 'listitem';
-        this.tabIndex = 0;
-        this.ariaKeyShortcuts = 'Enter';
-        this.copyIcon = copyIcon;
-        this.retryIcon = arrowRotateCwIcon;
-        this.positiveRatingIcon = thumbUpOutlineIcon;
-        this.negativeRatingIcon = thumbDownOutlineIcon;
-        this.titleId = `k-output-card-${guid()}`;
-    }
-    get ariaDescribedBy() {
-        return this.titleId;
-    }
-    ngOnInit() {
-        var _a, _b;
-        if (((_a = this.promptOutput) === null || _a === void 0 ? void 0 : _a.rating) === 'positive') {
-            this.positiveRatingIcon = thumbUpIcon;
-            this.negativeRatingIcon = thumbDownOutlineIcon;
-        }
-        else if (((_b = this.promptOutput) === null || _b === void 0 ? void 0 : _b.rating) === 'negative') {
-            this.negativeRatingIcon = thumbDownIcon;
-            this.positiveRatingIcon = thumbUpOutlineIcon;
-        }
-    }
-    messageFor(text) {
-        return this.localization.get(text);
-    }
-    get showRating() {
-        return this.service.showOutputRating;
-    }
-    get outputTitle() {
-        if (isPresent(this.promptOutput.title)) {
-            return this.promptOutput.title;
-        }
-        else {
-            const titleMessage = this.promptOutput.isRetry ? 'outputRetryTitle' : 'outputTitle';
-            return this.messageFor(titleMessage);
-        }
-    }
-    handleRetry() {
-        if (this.promptOutput.commandId) {
-            const eventArgs = {
-                command: this.service.getFlattenPromptCommands().find(c => c.id === this.promptOutput.commandId),
-                sender: this.service.aiPrompt,
-                isRetry: true
-            };
-            this.service.executeEvent.next(eventArgs);
-        }
-        else {
-            const eventArgs = {
-                prompt: this.promptOutput.prompt,
-                sender: this.service.aiPrompt,
-                isRetry: true
-            };
-            this.service.requestEvent.next(eventArgs);
-        }
-    }
-    handleCopy() {
-        navigator.clipboard.writeText(this.promptOutput.output);
-        this.service.outputCopyEvent.next(this.promptOutput);
-    }
-    handleRating(ratingType) {
-        const eventArgs = {
-            promptOutput: this.promptOutput,
-            rating: ratingType
-        };
-        this.service.outputRatingChangeEvent.next(eventArgs);
-        if (ratingType === 'positive') {
-            this.positiveRatingIcon = thumbUpIcon;
-            this.negativeRatingIcon = thumbDownOutlineIcon;
-        }
-        else {
-            this.negativeRatingIcon = thumbDownIcon;
-            this.positiveRatingIcon = thumbUpOutlineIcon;
-        }
-    }
-}
-AIPromptOutputCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptOutputCardComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
-AIPromptOutputCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AIPromptOutputCardComponent, isStandalone: true, selector: "[kendoAIPromptOutputCard]", inputs: { promptOutput: "promptOutput" }, host: { properties: { "class.k-card": "this.hostClass", "attr.role": "this.listItemRole", "attr.tabindex": "this.tabIndex", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts" } }, ngImport: i0, template: `
-        <div class="k-card-header">
-            <div
-                class="k-card-title"
-                [attr.id]="titleId">{{outputTitle}}
-            </div>
-            <div class="k-card-subtitle">{{promptOutput.prompt}}</div>
-        </div>
-        <div class="k-card-body">
-            <p>{{promptOutput.output}}</p>
-        </div>
-        <div class="k-actions k-actions-start k-actions-horizontal k-card-actions">
-            <button kendoButton
-                fillMode="flat"
-                themeColor="primary"
-                rounded="full"
-                icon="copy"
-                [svgIcon]="copyIcon"
-                (click)="handleCopy()"
-            >{{messageFor('copyOutput')}}</button>
-            <button kendoButton
-                fillMode="flat"
-                rounded="full"
-                icon="arrow-rotate-cw"
-                [svgIcon]="retryIcon"
-                (click)="handleRetry()"
-            >{{messageFor('retryGeneration')}}</button>
-            <ng-container *ngIf="showRating">
-                <span class="k-spacer"></span>
-                <button kendoButton
-                    fillMode="flat"
-                    icon="thumb-up-outline"
-                    [svgIcon]="positiveRatingIcon"
-                    (click)="handleRating('positive')">
-                </button>
-                <button kendoButton
-                    fillMode="flat"
-                    icon="thumb-down-outline"
-                    [svgIcon]="negativeRatingIcon"
-                    (click)="handleRating('negative')">
-                </button>
-            </ng-container>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptOutputCardComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: '[kendoAIPromptOutputCard]',
-                    template: `
-        <div class="k-card-header">
-            <div
-                class="k-card-title"
-                [attr.id]="titleId">{{outputTitle}}
-            </div>
-            <div class="k-card-subtitle">{{promptOutput.prompt}}</div>
-        </div>
-        <div class="k-card-body">
-            <p>{{promptOutput.output}}</p>
-        </div>
-        <div class="k-actions k-actions-start k-actions-horizontal k-card-actions">
-            <button kendoButton
-                fillMode="flat"
-                themeColor="primary"
-                rounded="full"
-                icon="copy"
-                [svgIcon]="copyIcon"
-                (click)="handleCopy()"
-            >{{messageFor('copyOutput')}}</button>
-            <button kendoButton
-                fillMode="flat"
-                rounded="full"
-                icon="arrow-rotate-cw"
-                [svgIcon]="retryIcon"
-                (click)="handleRetry()"
-            >{{messageFor('retryGeneration')}}</button>
-            <ng-container *ngIf="showRating">
-                <span class="k-spacer"></span>
-                <button kendoButton
-                    fillMode="flat"
-                    icon="thumb-up-outline"
-                    [svgIcon]="positiveRatingIcon"
-                    (click)="handleRating('positive')">
-                </button>
-                <button kendoButton
-                    fillMode="flat"
-                    icon="thumb-down-outline"
-                    [svgIcon]="negativeRatingIcon"
-                    (click)="handleRating('negative')">
-                </button>
-            </ng-container>
-        </div>
-    `,
-                    standalone: true,
-                    imports: [ButtonComponent, NgIf]
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; }, propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class.k-card']
-            }], listItemRole: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], tabIndex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], ariaDescribedBy: [{
-                type: HostBinding,
-                args: ['attr.aria-describedby']
-            }], ariaKeyShortcuts: [{
-                type: HostBinding,
-                args: ['attr.aria-keyshortcuts']
-            }], promptOutput: [{
-                type: Input
-            }] } });
-
-/**
- * The component for rendering the AIPrompt Output View.
- */
-class OutputViewComponent extends BaseView {
-    constructor(localization, service) {
-        super('output', localization);
-        this.service = service;
-    }
-    /**
-     * @hidden
-     */
-    get promptOutputs() {
-        return this.service.promptOutputs;
-    }
-}
-OutputViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OutputViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
-OutputViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OutputViewComponent, isStandalone: true, selector: "kendo-aiprompt-output-view", providers: [{
-            provide: BaseView,
-            useExisting: forwardRef(() => OutputViewComponent)
-        }], usesInheritance: true, ngImport: i0, template: `
-        <ng-template #content>
-            <div
-                class="k-card-list"
-                role="list">
-                <div *ngFor="let output of promptOutputs"
-                    kendoAIPromptOutputCard
-                    [promptOutput]="output">
-                </div>
-            </div>
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AIPromptOutputCardComponent, selector: "[kendoAIPromptOutputCard]", inputs: ["promptOutput"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OutputViewComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-aiprompt-output-view',
-                    providers: [{
-                            provide: BaseView,
-                            useExisting: forwardRef(() => OutputViewComponent)
-                        }],
-                    template: `
-        <ng-template #content>
-            <div
-                class="k-card-list"
-                role="list">
-                <div *ngFor="let output of promptOutputs"
-                    kendoAIPromptOutputCard
-                    [promptOutput]="output">
-                </div>
-            </div>
-        </ng-template>
-    `,
-                    standalone: true,
-                    imports: [NgFor, AIPromptOutputCardComponent]
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; } });
-
-/**
- * The component for rendering the AIPrompt Prompt View.
- */
-class PromptViewComponent extends BaseView {
-    constructor(localization, service) {
-        super('prompt', localization);
-        this.service = service;
-        /**
-         * @hidden
-         */
-        this.showSuggestions = true;
-        /**
-         * @hidden
-         */
-        this.contentId = `k-prompt-suggestions-${guid()}`;
-    }
-    /**
-     * @hidden
-     */
-    get suggestionsIcons() {
-        return this.showSuggestions ?
-            { font: 'chevron-up', svg: chevronUpIcon } :
-            { font: 'chevron-down', svg: chevronDownIcon };
-    }
-    /**
-     * @hidden
-     */
-    get promptSuggestions() {
-        return this.service.promptSuggestions;
-    }
-    /**
-     *
-     * @hidden
-     */
-    set textAreaValue(value) {
-        this.service.promptValue = value;
-    }
-    get textAreaValue() {
-        return this.service.promptValue;
-    }
-    /**
-     * @hidden
-     */
-    suggestionClick(suggestion) {
-        this.textAreaValue = this.service.promptValue = suggestion;
-    }
-}
-PromptViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PromptViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
-PromptViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PromptViewComponent, isStandalone: true, selector: "kendo-aiprompt-prompt-view", providers: [
-        {
-            provide: BaseView,
-            useExisting: forwardRef(() => PromptViewComponent)
-        }
-    ], usesInheritance: true, ngImport: i0, template: `
-        <ng-template #content>
-            <kendo-textarea
-                [placeholder]="messageFor('promptPlaceholder')"
-                [rows]="1"
-                [(value)]="textAreaValue">
-            </kendo-textarea>
-            <div *ngIf="promptSuggestions"
-                class="k-prompt-expander">
-                <button kendoButton
-                    [attr.aria-controls]="contentId"
-                    [attr.aria-expanded]="showSuggestions"
-                    fillMode="flat"
-                    [icon]="suggestionsIcons.font"
-                    [svgIcon]="suggestionsIcons.svg"
-                    type="button"
-                    (click)="showSuggestions = !showSuggestions">
-                    {{messageFor('promptSuggestions')}}
-                </button>
-                <div *ngIf="showSuggestions"
-                    class="k-prompt-expander-content"
-                    role="list"
-                    [attr.id]="contentId">
-                    <div *ngFor="let suggestion of promptSuggestions"
-                        class="k-prompt-suggestion"
-                        role="listitem"
-                        (click)="suggestionClick(suggestion)">
-                        {{suggestion}}
-                    </div>
-                </div>
-            </div>
-        </ng-template>
-    `, isInline: true, dependencies: [{ kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PromptViewComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-aiprompt-prompt-view',
-                    providers: [
-                        {
-                            provide: BaseView,
-                            useExisting: forwardRef(() => PromptViewComponent)
-                        }
-                    ],
-                    template: `
-        <ng-template #content>
-            <kendo-textarea
-                [placeholder]="messageFor('promptPlaceholder')"
-                [rows]="1"
-                [(value)]="textAreaValue">
-            </kendo-textarea>
-            <div *ngIf="promptSuggestions"
-                class="k-prompt-expander">
-                <button kendoButton
-                    [attr.aria-controls]="contentId"
-                    [attr.aria-expanded]="showSuggestions"
-                    fillMode="flat"
-                    [icon]="suggestionsIcons.font"
-                    [svgIcon]="suggestionsIcons.svg"
-                    type="button"
-                    (click)="showSuggestions = !showSuggestions">
-                    {{messageFor('promptSuggestions')}}
-                </button>
-                <div *ngIf="showSuggestions"
-                    class="k-prompt-expander-content"
-                    role="list"
-                    [attr.id]="contentId">
-                    <div *ngFor="let suggestion of promptSuggestions"
-                        class="k-prompt-suggestion"
-                        role="listitem"
-                        (click)="suggestionClick(suggestion)">
-                        {{suggestion}}
-                    </div>
-                </div>
-            </div>
-        </ng-template>
-    `,
-                    standalone: true,
-                    imports: [TextAreaComponent, NgIf, ButtonComponent, NgFor]
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; } });
-
-// eslint-disable no-forward-ref
-/**
- * Custom component messages override default component messages
- * ([see example]({% slug globalization_chat %}#toc-custom-messages)).
- */
-class CustomMessagesComponent extends Messages$1 {
-    constructor(service) {
-        super();
-        this.service = service;
-    }
-    get override() {
-        return true;
-    }
-}
-CustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-CustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-chat-messages", providers: [
-        {
-            provide: Messages$1,
-            useExisting: forwardRef(() => CustomMessagesComponent)
-        }
-    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CustomMessagesComponent, decorators: [{
-            type: Component,
-            args: [{
-                    providers: [
-                        {
-                            provide: Messages$1,
-                            useExisting: forwardRef(() => CustomMessagesComponent)
-                        }
-                    ],
-                    selector: 'kendo-chat-messages',
-                    template: ``,
-                    standalone: true
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
-
-/**
- * Represents a Hero Card component ([see example]({% slug dialogflow_chat %})).
- * Hero cards host a single large image and action buttons with text content.
- */
-class HeroCardComponent {
-    constructor() {
-        this.cssClass = true;
-        /**
-         * Fires when the user clicks a button.
-         */
-        this.executeAction = new EventEmitter();
-    }
-    onClick(action) {
-        this.executeAction.next(action);
-    }
-}
-HeroCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeroCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HeroCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HeroCardComponent, isStandalone: true, selector: "kendo-chat-hero-card", inputs: { imageUrl: "imageUrl", title: "title", subtitle: "subtitle", actions: "actions" }, outputs: { executeAction: "executeAction" }, host: { properties: { "class.k-card": "this.cssClass" } }, ngImport: i0, template: `
-        <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />
-        <div class="k-card-body">
-        <h5 class="k-card-title" *ngIf="title">
-            {{ title }}
-        </h5>
-        <h6 class="k-card-subtitle" *ngIf="subtitle">
-            {{ subtitle }}
-        </h6>
-        </div>
-        <div class="k-card-actions k-card-actions-vertical">
-        <span class="k-card-action"
-                *ngFor="let act of actions"
-        >
-            <button
-                kendoButton fillMode="flat"
-                (click)="onClick(act)"
-            >
-                    {{ act.title }}
-            </button>
-        </span>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HeroCardComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-chat-hero-card',
-                    template: `
-        <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />
-        <div class="k-card-body">
-        <h5 class="k-card-title" *ngIf="title">
-            {{ title }}
-        </h5>
-        <h6 class="k-card-subtitle" *ngIf="subtitle">
-            {{ subtitle }}
-        </h6>
-        </div>
-        <div class="k-card-actions k-card-actions-vertical">
-        <span class="k-card-action"
-                *ngFor="let act of actions"
-        >
-            <button
-                kendoButton fillMode="flat"
-                (click)="onClick(act)"
-            >
-                    {{ act.title }}
-            </button>
-        </span>
-        </div>
-    `,
-                    standalone: true,
-                    imports: [NgIf, NgFor, ButtonComponent]
-                }]
-        }], propDecorators: { imageUrl: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], subtitle: [{
-                type: Input
-            }], actions: [{
-                type: Input
-            }], cssClass: [{
-                type: HostBinding,
-                args: ['class.k-card']
-            }], executeAction: [{
-                type: Output
-            }] } });
-
-/**
- * Utility array that contains all `AIPrompt` related components and directives
- */
-const KENDO_AIPROMPT = [
-    AIPromptComponent,
-    PromptViewComponent,
-    OutputViewComponent,
-    CommandViewComponent,
-    CustomViewComponent,
-    AIPromptCustomMessagesComponent,
-    AIPromptToolbarActionsDirective,
-    AIPromptToolbarFocusableDirective
-];
-/**
- * Utility array that contains all `Chat` related components and directives
- */
-const KENDO_CHAT = [
-    ChatComponent,
-    CustomMessagesComponent,
-    AttachmentTemplateDirective,
-    MessageTemplateDirective,
-    HeroCardComponent,
-    ChatMessageBoxTemplateDirective
-];
-/**
- * Utility array that contains all `@progress/kendo-angular-conversational-ui` related components and directives
- */
-const KENDO_CONVERSATIONALUI = [
-    ...KENDO_AIPROMPT,
-    ...KENDO_CHAT
-];
-
-// IMPORTANT: NgModule export kept for backwards compatibility
-/**
- * The [NgModule](link:site.data.urls.angular['ngmodules']) for the AIPrompt component.
- *
- * @example
- * ```ts-no-run
- * import { NgModule } from '@angular/core';
- * import { Component } from '@angular/core';
- * import { BrowserModule } from '@angular/platform-browser';
- *
- * import { AIPromptModule } from '@progress/kendo-angular-conversational-ui';
- * import { AppComponent }   from './app.component';
- *
- * _@NgModule({
- *   imports:      [ BrowserModule, AIPromptModule ],
- *   declarations: [ AppComponent ],
- *   bootstrap:    [ AppComponent ]
- * })
- *
- * export class AppModule { }
- * ```
- */
-class AIPromptModule {
-}
-AIPromptModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AIPromptModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: AIPromptModule, imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective], exports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective] });
-AIPromptModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AIPromptModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [...KENDO_AIPROMPT],
-                    imports: [...KENDO_AIPROMPT],
-                    providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService]
-                }]
-        }] });
-
-// IMPORTANT: NgModule export kept for backwards compatibility
-/**
- * The [NgModule](link:site.data.urls.angular['ngmodules']) for the Chat component.
- *
- * @example
- * ```ts-no-run
- * import { NgModule } from '@angular/core';
- * import { Component } from '@angular/core';
- * import { BrowserModule } from '@angular/platform-browser';
- *
- * import { ChatModule } from '@progress/kendo-angular-conversational-ui';
- * import { AppComponent }   from './app.component';
- *
- * _@NgModule({
- *   imports:      [ BrowserModule, ChatModule ],
- *   declarations: [ AppComponent ],
- *   bootstrap:    [ AppComponent ]
- * })
- *
- * export class AppModule { }
- * ```
- */
-class ChatModule {
-}
-ChatModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ChatModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ChatModule, imports: [ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective], exports: [ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective] });
-ChatModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatModule, providers: [IconsService, ResizeBatchService], imports: [ChatComponent, CustomMessagesComponent, HeroCardComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChatModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [...KENDO_CHAT],
-                    imports: [...KENDO_CHAT],
-                    providers: [IconsService, ResizeBatchService]
-                }]
-        }] });
-
-// IMPORTANT: NgModule export kept for backwards compatibility
-/**
- * Represents the [NgModule](link:site.data.urls.angular['ngmodules'])
- * definition for the Conversational UI components.
- *
- * @example
- *
- * ```ts-no-run
- * // Import the Conversational UI module
- * import { ConversationalUIModule } from '@progress/kendo-angular-conversational-ui';
- *
- * // The browser platform with a compiler
- * import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
- *
- * import { NgModule } from '@angular/core';
- *
- * // Import the app component
- * import { AppComponent } from './app.component';
- *
- * // Define the app module
- * _@NgModule({
- *     declarations: [AppComponent], // declare app component
- *     imports:      [BrowserModule, ConversationalUIModule], // import Conversational UI module
- *     bootstrap:    [AppComponent]
- * })
- * export class AppModule {}
- *
- * // Compile and launch the module
- * platformBrowserDynamic().bootstrapModule(AppModule);
- *
- * ```
- */
-class ConversationalUIModule {
-}
-ConversationalUIModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ConversationalUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ConversationalUIModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: ConversationalUIModule, imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective], exports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective] });
-ConversationalUIModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ConversationalUIModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, ChatComponent, CustomMessagesComponent, HeroCardComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ConversationalUIModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [...KENDO_CONVERSATIONALUI],
-                    imports: [...KENDO_CONVERSATIONALUI],
-                    providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService]
-                }]
-        }] });
-
-/**
- * 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 };
-