@progress/kendo-angular-conversational-ui/esm2022/ai-prompt/views/prompt-view.component.mjs

Kendo UI for Angular Conversational UI components

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, forwardRef, isDevMode } from '@angular/core';
import { NgIf, NgFor } from '@angular/common';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { guid } from '@progress/kendo-angular-common';
import { chevronDownIcon, chevronUpIcon } from '@progress/kendo-svg-icons';
import { ButtonComponent, SpeechToTextButtonComponent } from '@progress/kendo-angular-buttons';
import { TextAreaComponent, TextAreaSuffixComponent } from '@progress/kendo-angular-inputs';
import { BaseView } from './base-view';
import { AIPromptService } from '../common/aiprompt.service';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-l10n";
import * as i2 from "../common/aiprompt.service";
/**
 * Represents the component that renders the **Prompt** view of the AIPrompt.
 *
 * @example
 * ```html
 * <kendo-aiprompt-prompt-view
 *      buttonText="My prompt view">
 * </kendo-aiprompt-prompt-view>
 * ```
 */
export class PromptViewComponent extends BaseView {
    service;
    constructor(localization, service) {
        super('prompt', localization);
        this.service = service;
    }
    /**
     * @hidden
     */
    get suggestionsIcons() {
        return this.showSuggestions ?
            { font: 'chevron-up', svg: chevronUpIcon } :
            { font: 'chevron-down', svg: chevronDownIcon };
    }
    /**
     * @hidden
     */
    showSuggestions = true;
    /**
     * @hidden
     */
    contentId = `k-prompt-suggestions-${guid()}`;
    /**
     * @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;
    }
    /**
     * @hidden
     */
    suggestionKeydown(event, suggestion) {
        if (event.key === 'Enter' || event.key === ' ') {
            this.suggestionClick(suggestion);
        }
    }
    /**
     * @hidden
     */
    get speechToTextButtonSettings() {
        return this.service.speechToTextButton;
    }
    /**
     * @hidden
     */
    get textareaSettings() {
        return this.service.textAreaSettings;
    }
    /**
     * @hidden
     */
    onSpeechToTextResult(event) {
        if (event.alternatives && event.alternatives.length > 0) {
            this.textAreaValue += event.alternatives[0].transcript + ' ';
        }
    }
    /**
     * @hidden
     */
    onSpeechToTextError(event) {
        if (isDevMode()) {
            console.error('Speech to Text error:', event.errorMessage);
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PromptViewComponent, deps: [{ token: i1.LocalizationService }, { token: i2.AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PromptViewComponent, isStandalone: true, selector: "kendo-aiprompt-prompt-view", providers: [
            {
                provide: BaseView,
                useExisting: forwardRef(() => PromptViewComponent)
            }
        ], usesInheritance: true, ngImport: i0, template: `
        <ng-template #content>
            <kendo-textarea
                [cols]="textareaSettings?.cols"
                [disabled]="textareaSettings?.disabled"
                [fillMode]="textareaSettings?.fillMode"
                [flow]="textareaSettings?.flow ?? 'vertical'"
                [inputAttributes]="textareaSettings?.inputAttributes"
                [maxlength]="textareaSettings?.maxlength"
                [placeholder]="textareaSettings?.placeholder ?? messageFor('promptPlaceholder')"
                [readonly]="textareaSettings?.readonly"
                [resizable]="textareaSettings?.resizable ?? 'vertical'"
                [rounded]="textareaSettings?.rounded"
                [rows]="textareaSettings?.rows ?? 1"
                [selectOnFocus]="textareaSettings?.selectOnFocus"
                [showSuffixSeparator]="textareaSettings?.showSuffixSeparator ?? true"
                [size]="textareaSettings?.size"
                [tabIndex]="textareaSettings?.tabindex"
                [title]="textareaSettings?.title"
                [(value)]="textAreaValue"
            >
                <kendo-textarea-suffix *ngIf="speechToTextButtonSettings">
                    <button kendoSpeechToTextButton
                        role="button"
                        [continuous]="speechToTextButtonSettings?.continuous" 
                        [disabled]="speechToTextButtonSettings?.disabled" 
                        [fillMode]="speechToTextButtonSettings?.fillMode ?? 'flat'"
                        [integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
                        [interimResults]="speechToTextButtonSettings?.interimResults"
                        [lang]="speechToTextButtonSettings?.lang"
                        [maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
                        [rounded]="speechToTextButtonSettings?.rounded"
                        [size]="speechToTextButtonSettings?.size"
                        [themeColor]="speechToTextButtonSettings?.themeColor"
                        [attr.aria-label]="messageFor('speechToTextButton')"
                        [attr.title]="messageFor('speechToTextButton')"
                        [attr.aria-disabled]="speechToTextButtonSettings?.disabled"
                        (error)="onSpeechToTextError($event)"
                        (result)="onSpeechToTextResult($event)"
                    ></button>
                </kendo-textarea-suffix>
            </kendo-textarea>
            <div *ngIf="promptSuggestions"
                class="k-prompt-expander">
                <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"
                    [attr.id]="contentId">
                    <div class="k-suggestion-group" role="group">
                        <div *ngFor="let suggestion of promptSuggestions"
                            class="k-suggestion"
                            role="button"
                            [attr.tabindex]="0"
                            [attr.aria-label]="suggestion"
                            [attr.title]="suggestion"
                            (click)="suggestionClick(suggestion)"
                            (keydown)="suggestionKeydown($event, suggestion)">
                            {{suggestion}}
                        </div>
                    </div>
                </div>
            </div>
        </ng-template>
    `, isInline: true, dependencies: [{ kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PromptViewComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'kendo-aiprompt-prompt-view',
                    providers: [
                        {
                            provide: BaseView,
                            useExisting: forwardRef(() => PromptViewComponent)
                        }
                    ],
                    template: `
        <ng-template #content>
            <kendo-textarea
                [cols]="textareaSettings?.cols"
                [disabled]="textareaSettings?.disabled"
                [fillMode]="textareaSettings?.fillMode"
                [flow]="textareaSettings?.flow ?? 'vertical'"
                [inputAttributes]="textareaSettings?.inputAttributes"
                [maxlength]="textareaSettings?.maxlength"
                [placeholder]="textareaSettings?.placeholder ?? messageFor('promptPlaceholder')"
                [readonly]="textareaSettings?.readonly"
                [resizable]="textareaSettings?.resizable ?? 'vertical'"
                [rounded]="textareaSettings?.rounded"
                [rows]="textareaSettings?.rows ?? 1"
                [selectOnFocus]="textareaSettings?.selectOnFocus"
                [showSuffixSeparator]="textareaSettings?.showSuffixSeparator ?? true"
                [size]="textareaSettings?.size"
                [tabIndex]="textareaSettings?.tabindex"
                [title]="textareaSettings?.title"
                [(value)]="textAreaValue"
            >
                <kendo-textarea-suffix *ngIf="speechToTextButtonSettings">
                    <button kendoSpeechToTextButton
                        role="button"
                        [continuous]="speechToTextButtonSettings?.continuous" 
                        [disabled]="speechToTextButtonSettings?.disabled" 
                        [fillMode]="speechToTextButtonSettings?.fillMode ?? 'flat'"
                        [integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
                        [interimResults]="speechToTextButtonSettings?.interimResults"
                        [lang]="speechToTextButtonSettings?.lang"
                        [maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
                        [rounded]="speechToTextButtonSettings?.rounded"
                        [size]="speechToTextButtonSettings?.size"
                        [themeColor]="speechToTextButtonSettings?.themeColor"
                        [attr.aria-label]="messageFor('speechToTextButton')"
                        [attr.title]="messageFor('speechToTextButton')"
                        [attr.aria-disabled]="speechToTextButtonSettings?.disabled"
                        (error)="onSpeechToTextError($event)"
                        (result)="onSpeechToTextResult($event)"
                    ></button>
                </kendo-textarea-suffix>
            </kendo-textarea>
            <div *ngIf="promptSuggestions"
                class="k-prompt-expander">
                <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"
                    [attr.id]="contentId">
                    <div class="k-suggestion-group" role="group">
                        <div *ngFor="let suggestion of promptSuggestions"
                            class="k-suggestion"
                            role="button"
                            [attr.tabindex]="0"
                            [attr.aria-label]="suggestion"
                            [attr.title]="suggestion"
                            (click)="suggestionClick(suggestion)"
                            (keydown)="suggestionKeydown($event, suggestion)">
                            {{suggestion}}
                        </div>
                    </div>
                </div>
            </div>
        </ng-template>
    `,
                    standalone: true,
                    imports: [TextAreaComponent, NgIf, ButtonComponent, NgFor, TextAreaSuffixComponent, SpeechToTextButtonComponent]
                }]
        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.AIPromptService }]; } });