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

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

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

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

@@ -0,0 +1,79 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { IconsModule } from '@progress/kendo-angular-icons';
+import { ButtonsModule } from "@progress/kendo-angular-buttons";
+import { InputsModule } from '@progress/kendo-angular-inputs';
+import { LayoutModule } from '@progress/kendo-angular-layout';
+import { PromptViewComponent } from "./views/prompt-view.component";
+import { OutputViewComponent } from "./views/output-view.component";
+import { AIPromptComponent } from "./aiprompt.component";
+import { CommandViewComponent } from "./views/command-view.component";
+import { LocalizedMessagesDirective } from "./localization/localized-messages.directive";
+import { AIPromptCustomMessagesComponent } from "./localization/custom-messages.component";
+import { AIPromptOutputCardComponent } from './common/output-card.component';
+import { CustomViewComponent } from './views/custom-view.component';
+import { AIPromptToolbarActionsDirective } from './templates/toolbar-actions.template';
+import { AIPromptToolbarFocusableDirective } from './common/toolbar-focusable.directive';
+import * as i0 from "@angular/core";
+const PUBLIC_DIRECTIVES = [
+    AIPromptComponent,
+    PromptViewComponent,
+    OutputViewComponent,
+    CommandViewComponent,
+    CustomViewComponent,
+    AIPromptCustomMessagesComponent,
+    AIPromptToolbarActionsDirective,
+    AIPromptToolbarFocusableDirective
+];
+const PRIVATE_DIRECTIVES = [
+    LocalizedMessagesDirective,
+    AIPromptOutputCardComponent
+];
+export class AIPromptModule {
+}
+AIPromptModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AIPromptModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptModule, declarations: [AIPromptComponent,
+        PromptViewComponent,
+        OutputViewComponent,
+        CommandViewComponent,
+        CustomViewComponent,
+        AIPromptCustomMessagesComponent,
+        AIPromptToolbarActionsDirective,
+        AIPromptToolbarFocusableDirective, LocalizedMessagesDirective,
+        AIPromptOutputCardComponent], imports: [CommonModule,
+        ButtonsModule,
+        IconsModule,
+        InputsModule,
+        LayoutModule], exports: [AIPromptComponent,
+        PromptViewComponent,
+        OutputViewComponent,
+        CommandViewComponent,
+        CustomViewComponent,
+        AIPromptCustomMessagesComponent,
+        AIPromptToolbarActionsDirective,
+        AIPromptToolbarFocusableDirective] });
+AIPromptModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptModule, imports: [[
+            CommonModule,
+            ButtonsModule,
+            IconsModule,
+            InputsModule,
+            LayoutModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [...PUBLIC_DIRECTIVES, ...PRIVATE_DIRECTIVES],
+                    exports: [...PUBLIC_DIRECTIVES],
+                    imports: [
+                        CommonModule,
+                        ButtonsModule,
+                        IconsModule,
+                        InputsModule,
+                        LayoutModule
+                    ]
+                }]
+        }] });

package/esm2020/ai-prompt/common/aiprompt.service.mjs

@@ -0,0 +1,38 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class AIPromptService {
+    constructor() {
+        this.promptValue = '';
+        this.showOutputRating = false;
+        this.requestEvent = new Subject();
+        this.executeEvent = new Subject();
+        this.outputCopyEvent = new Subject();
+        this.outputRatingChangeEvent = new Subject();
+    }
+    getFlattenPromptCommands(commands = this.promptCommands) {
+        let newArr = [];
+        commands.forEach(c => {
+            if (c.hasOwnProperty('children')) {
+                const childrenArr = c.children;
+                newArr = newArr.concat(childrenArr);
+                if (childrenArr.length > 0) {
+                    this.getFlattenPromptCommands(childrenArr);
+                }
+            }
+        });
+        return newArr.concat(this.promptCommands);
+    }
+}
+AIPromptService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+AIPromptService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptService, decorators: [{
+            type: Injectable
+        }] });

package/esm2020/ai-prompt/common/output-card.component.mjs

@@ -0,0 +1,199 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Component, HostBinding, Input } from '@angular/core';
+import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { guid, isPresent } from '@progress/kendo-angular-common';
+import { arrowRotateCwIcon, copyIcon, thumbDownIcon, thumbDownOutlineIcon, thumbUpIcon, thumbUpOutlineIcon } from '@progress/kendo-svg-icons';
+import { AIPromptService } from './aiprompt.service';
+import * as i0 from "@angular/core";
+import * as i1 from "@progress/kendo-angular-l10n";
+import * as i2 from "./aiprompt.service";
+import * as i3 from "@progress/kendo-angular-buttons";
+import * as i4 from "@angular/common";
+/**
+ * @hidden
+ */
+export class AIPromptOutputCardComponent {
+    constructor(localization, service) {
+        this.localization = localization;
+        this.service = service;
+        this.hostClass = true;
+        this.listItemRole = 'listitem';
+        this.tabIndex = 0;
+        this.ariaKeyShortcuts = 'Enter';
+        this.copyIcon = copyIcon;
+        this.retryIcon = arrowRotateCwIcon;
+        this.positiveRatingIcon = thumbUpOutlineIcon;
+        this.negativeRatingIcon = thumbDownOutlineIcon;
+        this.titleId = `k-output-card-${guid()}`;
+    }
+    get ariaDescribedBy() {
+        return this.titleId;
+    }
+    messageFor(text) {
+        return this.localization.get(text);
+    }
+    get showRating() {
+        return this.service.showOutputRating;
+    }
+    get outputTitle() {
+        if (isPresent(this.promptOutput.title)) {
+            return this.promptOutput.title;
+        }
+        else {
+            const titleMessage = this.promptOutput.isRetry ? 'outputRetryTitle' : 'outputTitle';
+            return this.messageFor(titleMessage);
+        }
+    }
+    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: "13.3.12", ngImport: i0, type: AIPromptOutputCardComponent, deps: [{ token: i1.LocalizationService }, { token: i2.AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
+AIPromptOutputCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AIPromptOutputCardComponent, selector: "[kendoAIPromptOutputCard]", inputs: { promptOutput: "promptOutput" }, host: { properties: { "class.k-card": "this.hostClass", "attr.role": "this.listItemRole", "attr.tabindex": "this.tabIndex", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts" } }, ngImport: i0, template: `
+        <div class="k-card-header">
+            <div
+                class="k-card-title"
+                [attr.id]="titleId">{{outputTitle}}
+            </div>
+            <div class="k-card-subtitle">{{promptOutput.prompt}}</div>
+        </div>
+        <div class="k-card-body">
+            <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, components: [{ type: i3.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AIPromptOutputCardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[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>
+    `
+                }]
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.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
+            }] } });