@progress/kendo-angular-conversational-ui
Version:
Kendo UI for Angular Conversational UI components
350 lines (349 loc) • 15.6 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { Component, ContentChild, ElementRef, EventEmitter, Input, NgZone, Output, ViewChild, ViewContainerRef, } from '@angular/core';
import { Subscription } from 'rxjs';
import { validatePackage } from '@progress/kendo-licensing';
import { packageMetadata } from '../package-metadata';
import { InlineAIPromptContentComponent } from './inlineaiprompt-content.component';
import { KENDO_POPUP, PopupComponent } from '@progress/kendo-angular-popup';
import { take } from 'rxjs/operators';
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
import { defaultPopupSettings, calculateMeasurement, defaultOutputActions } from './utils';
import { LocalizedMessagesDirective } from './localization/localized-messages.directive';
import { InlineAIPromptOutputTemplateDirective } from './output-template.directive';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-popup";
/**
* Represents the Kendo UI InlineAIPrompt component for Angular.
*
* @remarks
* Supported children components are: {@link InlineAIPromptCustomMessagesComponent}
*
* @example
* ```html
* <kendo-inlineaiprompt
* placeholder="Enter your prompt..."
* [promptOutput]="promptOutput"
* (promptRequest)="onPromptRequest($event)">
* </kendo-inlineaiprompt>
* ```
*/
export class InlineAIPromptComponent {
ngZone;
element;
/**
* Sets the text of the TextArea.
*/
promptValue = "";
/**
* Sets the placeholder text that appears in the text area when it is empty.
*/
placeholder;
/**
* Sets the output data for the prompt.
* The output displays as a card above the text area.
*/
promptOutput;
/**
* Controls the visibility and settings of the Speech to Text button.
*
* @default true
*/
enableSpeechToText = true;
/**
* Sets the streaming state of the component.
* When set to `true`, the send button displays a generating state and the component emits a `promptRequestCancel` event when you click it.
*
* @default false
*/
streaming = false;
/**
* Sets the width of the component.
* Accepts a number for pixels or a string for other units.
*
* @default 550
*/
width = 550;
/**
* Sets the maximum height of the component.
* Accepts a number for pixels or a string for other units.
*/
maxHeight;
/**
* Represents the configuration of the default output actions.
* The default actions are `copy`, `retry`, and `discard`.
*/
defaultOutputActions = defaultOutputActions;
/**
* Sets the output actions that display in the output card.
* The default actions are `copy`, `retry`, and `discard`.
* To customize the appearance and order of the default actions, define them with the same `name`.
*
* @default [{ name: 'copy', type: 'button', icon: 'copy', svgIcon: copyIcon, text: 'Copy', fillMode: 'flat', themeColor: 'primary', rounded: 'medium'}, { name: 'retry', type: 'button', icon: 'arrow-rotate-cw', svgIcon: arrowRotateCwIcon, text: 'Retry', fillMode: 'flat', themeColor: 'primary', rounded: 'medium'}, { name: 'discard', type: 'button', icon: 'cancel-outline', svgIcon: cancelOutlineIcon, text: 'Discard', fillMode: 'flat', themeColor: 'base', rounded: 'medium'}]
*/
outputActions = defaultOutputActions;
/**
* Sets the available prompt commands.
*/
promptCommands;
/**
* Sets the popup settings for the component.
*/
set popupSettings(settings) {
this._popupSettings = { ...defaultPopupSettings, ...settings };
}
get popupSettings() {
return this._popupSettings;
}
/**
* Fires when you click the send button.
*/
promptRequest = new EventEmitter();
/**
* Fires when you click a command.
*/
commandExecute = new EventEmitter();
/**
* Fires when you click an output action button.
*/
outputActionClick = new EventEmitter();
/**
* Fires when you cancel the prompt request by clicking the stop button.
*/
promptRequestCancel = new EventEmitter();
/**
* Fires when the component closes, either by clicking outside the popup, clicking the Discard action, or after pressing the Escape key.
*/
close = new EventEmitter();
/**
* Fires when the value of the TextArea changes.
*/
promptValueChange = new EventEmitter();
popupElement;
popupViewContainer;
contentComponent;
outputTemplate;
/**
* @hidden
*/
calculateMeasurement = calculateMeasurement;
_popupSettings = defaultPopupSettings;
subs = new Subscription();
constructor(ngZone, element) {
this.ngZone = ngZone;
this.element = element;
validatePackage(packageMetadata);
}
ngAfterViewInit() {
if (this.contentComponent && this.popupElement) {
this.contentComponent.popupElement = this.popupElement;
}
this.ngZone.onStable.pipe(take(1)).subscribe(() => {
if (this.contentComponent && this.popupViewContainer) {
this.contentComponent.appendTo = this.popupViewContainer;
}
});
}
ngOnDestroy() {
this.subs.unsubscribe();
}
/**
* Focuses the TextArea of the Inline AI Prompt.
*/
focus() {
if (this.contentComponent?.textArea) {
this.contentComponent.textArea.focus();
}
}
/**
* @hidden
*/
onPromptRequest(event) {
this.promptRequest.emit(event);
}
/**
* @hidden
*/
onCommandExecute(event) {
this.commandExecute.emit(event);
}
/**
* @hidden
*/
onOutputActionClick(event) {
this.outputActionClick.emit(event);
}
/**
* @hidden
*/
onPromptRequestCancel() {
this.promptRequestCancel.emit();
}
/**
* @hidden
*/
onClose() {
this.close.emit();
}
/**
* @hidden
*/
onPromptValueChange(value) {
this.promptValueChange.emit(value);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InlineAIPromptComponent, isStandalone: true, selector: "kendo-inlineaiprompt", inputs: { promptValue: "promptValue", placeholder: "placeholder", promptOutput: "promptOutput", enableSpeechToText: "enableSpeechToText", streaming: "streaming", width: "width", maxHeight: "maxHeight", outputActions: "outputActions", promptCommands: "promptCommands", popupSettings: "popupSettings" }, outputs: { promptRequest: "promptRequest", commandExecute: "commandExecute", outputActionClick: "outputActionClick", promptRequestCancel: "promptRequestCancel", close: "close", promptValueChange: "promptValueChange" }, providers: [
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.inlineaiprompt',
},
], queries: [{ propertyName: "outputTemplate", first: true, predicate: InlineAIPromptOutputTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "popupElement", first: true, predicate: PopupComponent, descendants: true, read: ElementRef }, { propertyName: "popupViewContainer", first: true, predicate: PopupComponent, descendants: true, read: ViewContainerRef }, { propertyName: "contentComponent", first: true, predicate: InlineAIPromptContentComponent, descendants: true }], exportAs: ["kendoInlineAIPrompt"], ngImport: i0, template: `
<ng-container kendoInlineAIPromptLocalizedMessages
i18n-commandsButtonTitle="kendo.inlineaiprompt.commandsButtonTitle|Sets the Commands button title."
commandsButtonTitle="Command Menu"
i18n-generateButtonTitle="kendo.inlineaiprompt.generateButtonTitle|Sets the Generate button title."
generateButtonTitle="Generate"
i18n-speechToTextButtonTitle="kendo.inlineaiprompt.speechToTextButtonTitle|Sets the Speech to Text button title."
speechToTextButtonTitle="Speech to Text"
>
</ng-container>
<kendo-popup
[style.width]="calculateMeasurement(width)"
[anchor]="popupSettings?.anchor"
[anchorAlign]="popupSettings?.anchorAlign"
[offset]="popupSettings?.offset"
[popupAlign]="popupSettings?.popupAlign"
[animate]="popupSettings?.animate"
[collision]="popupSettings?.collision"
[positionMode]="popupSettings?.positionMode"
[margin]="popupSettings?.margin"
[popupClass]="popupSettings?.popupClass || 'k-prompt-popup'"
>
<kendo-inlineaiprompt-content
[style.width]="width"
[promptValue]="promptValue"
[placeholder]="placeholder"
[promptOutput]="promptOutput"
[enableSpeechToText]="enableSpeechToText"
[streaming]="streaming"
[maxHeight]="maxHeight"
[outputActions]="outputActions"
[promptCommands]="promptCommands"
[outputTemplate]="outputTemplate?.templateRef"
(promptRequest)="onPromptRequest($event)"
(commandExecute)="onCommandExecute($event)"
(outputActionClick)="onOutputActionClick($event)"
(promptRequestCancel)="onPromptRequestCancel()"
(close)="onClose()"
(promptValueChange)="onPromptValueChange($event)"
>
</kendo-inlineaiprompt-content>
</kendo-popup>
`, isInline: true, dependencies: [{ kind: "component", type: i1.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { kind: "component", type: InlineAIPromptContentComponent, selector: "kendo-inlineaiprompt-content", inputs: ["popupElement", "promptValue", "placeholder", "promptOutput", "enableSpeechToText", "streaming", "width", "maxHeight", "appendTo", "outputActions", "promptCommands", "outputTemplate"], outputs: ["promptRequest", "commandExecute", "outputActionClick", "promptRequestCancel", "close", "promptValueChange"], exportAs: ["kendoInlineAIPromptContent"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoInlineAIPromptLocalizedMessages]" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoInlineAIPrompt',
selector: 'kendo-inlineaiprompt',
providers: [
LocalizationService,
{
provide: L10N_PREFIX,
useValue: 'kendo.inlineaiprompt',
},
],
template: `
<ng-container kendoInlineAIPromptLocalizedMessages
i18n-commandsButtonTitle="kendo.inlineaiprompt.commandsButtonTitle|Sets the Commands button title."
commandsButtonTitle="Command Menu"
i18n-generateButtonTitle="kendo.inlineaiprompt.generateButtonTitle|Sets the Generate button title."
generateButtonTitle="Generate"
i18n-speechToTextButtonTitle="kendo.inlineaiprompt.speechToTextButtonTitle|Sets the Speech to Text button title."
speechToTextButtonTitle="Speech to Text"
>
</ng-container>
<kendo-popup
[style.width]="calculateMeasurement(width)"
[anchor]="popupSettings?.anchor"
[anchorAlign]="popupSettings?.anchorAlign"
[offset]="popupSettings?.offset"
[popupAlign]="popupSettings?.popupAlign"
[animate]="popupSettings?.animate"
[collision]="popupSettings?.collision"
[positionMode]="popupSettings?.positionMode"
[margin]="popupSettings?.margin"
[popupClass]="popupSettings?.popupClass || 'k-prompt-popup'"
>
<kendo-inlineaiprompt-content
[style.width]="width"
[promptValue]="promptValue"
[placeholder]="placeholder"
[promptOutput]="promptOutput"
[enableSpeechToText]="enableSpeechToText"
[streaming]="streaming"
[maxHeight]="maxHeight"
[outputActions]="outputActions"
[promptCommands]="promptCommands"
[outputTemplate]="outputTemplate?.templateRef"
(promptRequest)="onPromptRequest($event)"
(commandExecute)="onCommandExecute($event)"
(outputActionClick)="onOutputActionClick($event)"
(promptRequestCancel)="onPromptRequestCancel()"
(close)="onClose()"
(promptValueChange)="onPromptValueChange($event)"
>
</kendo-inlineaiprompt-content>
</kendo-popup>
`,
standalone: true,
imports: [KENDO_POPUP, InlineAIPromptContentComponent, LocalizedMessagesDirective],
}]
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { promptValue: [{
type: Input
}], placeholder: [{
type: Input
}], promptOutput: [{
type: Input
}], enableSpeechToText: [{
type: Input
}], streaming: [{
type: Input
}], width: [{
type: Input
}], maxHeight: [{
type: Input
}], outputActions: [{
type: Input
}], promptCommands: [{
type: Input
}], popupSettings: [{
type: Input
}], promptRequest: [{
type: Output
}], commandExecute: [{
type: Output
}], outputActionClick: [{
type: Output
}], promptRequestCancel: [{
type: Output
}], close: [{
type: Output
}], promptValueChange: [{
type: Output
}], popupElement: [{
type: ViewChild,
args: [PopupComponent, { read: ElementRef }]
}], popupViewContainer: [{
type: ViewChild,
args: [PopupComponent, { read: ViewContainerRef }]
}], contentComponent: [{
type: ViewChild,
args: [InlineAIPromptContentComponent]
}], outputTemplate: [{
type: ContentChild,
args: [InlineAIPromptOutputTemplateDirective]
}] } });