@progress/kendo-angular-conversational-ui 19.3.0-develop.3 → 19.3.0-develop.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ai-prompt/aiprompt.component.d.ts +80 -13
- package/ai-prompt/aiprompt.module.d.ts +3 -1
- package/ai-prompt/common/aiprompt.service.d.ts +10 -0
- package/ai-prompt/common/output-card.component.d.ts +4 -0
- package/ai-prompt/localization/messages.d.ts +5 -1
- package/ai-prompt/models/ai-prompt-settings.d.ts +60 -0
- package/ai-prompt/models/index.d.ts +1 -0
- package/ai-prompt/templates/aiprompt-output-body-template.directive.d.ts +24 -0
- package/ai-prompt/templates/aiprompt-output-template.directive.d.ts +24 -0
- package/ai-prompt/views/output-view.component.d.ts +4 -0
- package/ai-prompt/views/prompt-view.component.d.ts +23 -1
- package/conversational-ui.module.d.ts +12 -7
- package/directives.d.ts +8 -2
- package/esm2022/ai-prompt/aiprompt.component.mjs +177 -25
- package/esm2022/ai-prompt/aiprompt.module.mjs +3 -1
- package/esm2022/ai-prompt/common/aiprompt.service.mjs +35 -0
- package/esm2022/ai-prompt/common/output-card.component.mjs +23 -5
- package/esm2022/ai-prompt/localization/messages.mjs +7 -1
- package/esm2022/ai-prompt/models/ai-prompt-settings.mjs +5 -0
- package/esm2022/ai-prompt/templates/aiprompt-output-body-template.directive.mjs +33 -0
- package/esm2022/ai-prompt/templates/aiprompt-output-template.directive.mjs +33 -0
- package/esm2022/ai-prompt/views/output-view.component.mjs +27 -11
- package/esm2022/ai-prompt/views/prompt-view.component.mjs +139 -21
- package/esm2022/chat/message-box.component.mjs +1 -1
- package/esm2022/conversational-ui.module.mjs +13 -8
- package/esm2022/directives.mjs +15 -2
- package/esm2022/index.mjs +7 -0
- package/esm2022/inline-ai-prompt/inlineaiprompt-content.component.mjs +552 -0
- package/esm2022/inline-ai-prompt/inlineaiprompt.component.mjs +342 -0
- package/esm2022/inline-ai-prompt/inlineaiprompt.service.mjs +85 -0
- package/esm2022/inline-ai-prompt/localization/custom-messages.component.mjs +53 -0
- package/esm2022/inline-ai-prompt/localization/localized-messages.directive.mjs +39 -0
- package/esm2022/inline-ai-prompt/localization/messages.mjs +35 -0
- package/esm2022/inline-ai-prompt/models/command.interface.mjs +5 -0
- package/esm2022/inline-ai-prompt/models/index.mjs +5 -0
- package/esm2022/inline-ai-prompt/models/inlineaiprompt-popupsettings.mjs +5 -0
- package/esm2022/inline-ai-prompt/models/inlineaiprompt-settings.mjs +59 -0
- package/esm2022/inline-ai-prompt/models/messages.mjs +8 -0
- package/esm2022/inline-ai-prompt/models/output-action-click-event.mjs +5 -0
- package/esm2022/inline-ai-prompt/models/output-action.interface.mjs +5 -0
- package/esm2022/inline-ai-prompt/models/prompt-output.interface.mjs +5 -0
- package/esm2022/inline-ai-prompt/models/prompt-request-event.mjs +5 -0
- package/esm2022/inline-ai-prompt/output-template.directive.mjs +38 -0
- package/esm2022/inline-ai-prompt/utils.mjs +22 -0
- package/esm2022/package-metadata.mjs +2 -2
- package/fesm2022/progress-kendo-angular-conversational-ui.mjs +1696 -140
- package/index.d.ts +7 -0
- package/inline-ai-prompt/inlineaiprompt-content.component.d.ts +82 -0
- package/inline-ai-prompt/inlineaiprompt.component.d.ts +150 -0
- package/inline-ai-prompt/inlineaiprompt.service.d.ts +41 -0
- package/inline-ai-prompt/localization/custom-messages.component.d.ts +27 -0
- package/inline-ai-prompt/localization/localized-messages.directive.d.ts +16 -0
- package/inline-ai-prompt/localization/messages.d.ts +25 -0
- package/inline-ai-prompt/models/command.interface.d.ts +38 -0
- package/inline-ai-prompt/models/index.d.ts +12 -0
- package/inline-ai-prompt/models/inlineaiprompt-popupsettings.d.ts +10 -0
- package/inline-ai-prompt/models/inlineaiprompt-settings.d.ts +66 -0
- package/inline-ai-prompt/models/messages.d.ts +21 -0
- package/inline-ai-prompt/models/output-action-click-event.d.ts +19 -0
- package/inline-ai-prompt/models/output-action.interface.d.ts +52 -0
- package/inline-ai-prompt/models/prompt-output.interface.d.ts +25 -0
- package/inline-ai-prompt/models/prompt-request-event.d.ts +17 -0
- package/inline-ai-prompt/output-template.directive.d.ts +27 -0
- package/inline-ai-prompt/utils.d.ts +13 -0
- package/package.json +13 -12
@@ -3,22 +3,28 @@
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
5
5
|
import * as i0 from '@angular/core';
|
6
|
-
import { Directive, Optional, EventEmitter, Component, HostBinding, ViewChild, Input, Output, isDevMode, forwardRef, ViewChildren, ElementRef, ContentChild, InjectionToken, Inject, Injectable, ContentChildren, NgModule } from '@angular/core';
|
6
|
+
import { Directive, Optional, EventEmitter, Component, HostBinding, ViewChild, Input, Output, isDevMode, forwardRef, ViewChildren, ElementRef, ContentChild, InjectionToken, Inject, Injectable, ContentChildren, inject, SkipSelf, HostListener, ViewContainerRef, NgModule } from '@angular/core';
|
7
7
|
import * as i1$1 from '@progress/kendo-angular-l10n';
|
8
8
|
import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
|
9
9
|
import { validatePackage } from '@progress/kendo-licensing';
|
10
|
-
import { NgIf, NgTemplateOutlet, NgFor, NgSwitch, NgSwitchCase } from '@angular/common';
|
11
|
-
import { Keys, ResizeSensorComponent, isPresent, focusableSelector, guid, ResizeBatchService } from '@progress/kendo-angular-common';
|
12
|
-
import { paperPlaneIcon, chevronLeftIcon, chevronRightIcon, sparklesIcon, commentIcon, moreHorizontalIcon, thumbUpIcon, thumbDownOutlineIcon, thumbDownIcon, thumbUpOutlineIcon, copyIcon, arrowRotateCwIcon, chevronUpIcon, chevronDownIcon } from '@progress/kendo-svg-icons';
|
13
|
-
import
|
14
|
-
import {
|
10
|
+
import { NgIf, NgTemplateOutlet, NgFor, NgSwitch, NgSwitchCase, NgClass } from '@angular/common';
|
11
|
+
import { Keys, ResizeSensorComponent, isPresent, focusableSelector, guid, isDocumentAvailable, ResizeBatchService } from '@progress/kendo-angular-common';
|
12
|
+
import { paperPlaneIcon, chevronLeftIcon, chevronRightIcon, sparklesIcon, commentIcon, moreHorizontalIcon, stopSmIcon, thumbUpIcon, thumbDownOutlineIcon, thumbDownIcon, thumbUpOutlineIcon, copyIcon, arrowRotateCwIcon, chevronUpIcon, chevronDownIcon, cancelOutlineIcon, menuIcon } from '@progress/kendo-svg-icons';
|
13
|
+
import * as i2 from '@progress/kendo-angular-buttons';
|
14
|
+
import { ButtonComponent, FloatingActionButtonComponent, SpeechToTextButtonComponent, KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
|
15
|
+
import * as i3 from '@progress/kendo-angular-inputs';
|
16
|
+
import { TextBoxComponent, TextAreaComponent, InputSeparatorComponent, TextBoxSuffixTemplateDirective, TextAreaSuffixComponent, KENDO_TEXTAREA } from '@progress/kendo-angular-inputs';
|
15
17
|
import * as i1 from '@progress/kendo-angular-intl';
|
16
18
|
import { fromEvent, Subscription, Subject } from 'rxjs';
|
17
|
-
import { debounceTime } from 'rxjs/operators';
|
19
|
+
import { debounceTime, take } from 'rxjs/operators';
|
18
20
|
import { IconsService } from '@progress/kendo-angular-icons';
|
19
|
-
import
|
21
|
+
import * as i1$2 from '@progress/kendo-angular-popup';
|
22
|
+
import { PopupComponent, KENDO_POPUP, PopupService } from '@progress/kendo-angular-popup';
|
20
23
|
import { DialogContainerService, DialogService, WindowService, WindowContainerService } from '@progress/kendo-angular-dialog';
|
21
|
-
import
|
24
|
+
import * as i5 from '@progress/kendo-angular-layout';
|
25
|
+
import { PanelBarComponent, KENDO_CARD } from '@progress/kendo-angular-layout';
|
26
|
+
import * as i4 from '@progress/kendo-angular-menu';
|
27
|
+
import { KENDO_CONTEXTMENU } from '@progress/kendo-angular-menu';
|
22
28
|
|
23
29
|
/**
|
24
30
|
* Defines a template for displaying message attachments.
|
@@ -136,8 +142,8 @@ const packageMetadata = {
|
|
136
142
|
productName: 'Kendo UI for Angular',
|
137
143
|
productCode: 'KENDOUIANGULAR',
|
138
144
|
productCodes: ['KENDOUIANGULAR'],
|
139
|
-
publishDate:
|
140
|
-
version: '19.3.0-develop.
|
145
|
+
publishDate: 1754576682,
|
146
|
+
version: '19.3.0-develop.31',
|
141
147
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
142
148
|
};
|
143
149
|
|
@@ -298,7 +304,7 @@ class MessageBoxComponent {
|
|
298
304
|
</ng-container>
|
299
305
|
|
300
306
|
<ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
|
301
|
-
`, 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"] }] });
|
307
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TextBoxComponent, selector: "kendo-textbox", inputs: ["focusableId", "title", "type", "disabled", "readonly", "tabindex", "value", "selectOnFocus", "showSuccessIcon", "showErrorIcon", "clearButton", "successIcon", "successSvgIcon", "errorIcon", "errorSvgIcon", "clearButtonIcon", "clearButtonSvgIcon", "size", "rounded", "fillMode", "tabIndex", "placeholder", "maxlength", "inputAttributes"], outputs: ["valueChange", "inputFocus", "inputBlur", "focus", "blur"], exportAs: ["kendoTextBox"] }, { kind: "component", type: TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: InputSeparatorComponent, selector: "kendo-input-separator, kendo-textbox-separator", inputs: ["orientation"] }, { kind: "directive", type: TextBoxSuffixTemplateDirective, selector: "[kendoTextBoxSuffixTemplate]", inputs: ["showSeparator"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }] });
|
302
308
|
}
|
303
309
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MessageBoxComponent, decorators: [{
|
304
310
|
type: Component,
|
@@ -1511,7 +1517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
1511
1517
|
/**
|
1512
1518
|
* @hidden
|
1513
1519
|
*/
|
1514
|
-
let Messages$
|
1520
|
+
let Messages$2 = class Messages extends ComponentMessages {
|
1515
1521
|
/**
|
1516
1522
|
* Sets the placeholder text for the message text input.
|
1517
1523
|
*/
|
@@ -1543,7 +1549,7 @@ let Messages$1 = class Messages extends ComponentMessages {
|
|
1543
1549
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
1544
1550
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, selector: "kendoConversationalUIMessages", inputs: { messagePlaceholder: "messagePlaceholder", send: "send", messageListLabel: "messageListLabel", messageBoxInputLabel: "messageBoxInputLabel", messageAttachmentLeftArrow: "messageAttachmentLeftArrow", messageAttachmentRightArrow: "messageAttachmentRightArrow", messageAvatarAlt: "messageAvatarAlt" }, usesInheritance: true, ngImport: i0 });
|
1545
1551
|
};
|
1546
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages$
|
1552
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages$2, decorators: [{
|
1547
1553
|
type: Directive,
|
1548
1554
|
args: [{
|
1549
1555
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
@@ -1569,7 +1575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
1569
1575
|
/**
|
1570
1576
|
* @hidden
|
1571
1577
|
*/
|
1572
|
-
let LocalizedMessagesDirective$
|
1578
|
+
let LocalizedMessagesDirective$2 = class LocalizedMessagesDirective extends Messages$2 {
|
1573
1579
|
service;
|
1574
1580
|
constructor(service) {
|
1575
1581
|
super();
|
@@ -1578,18 +1584,18 @@ let LocalizedMessagesDirective$1 = class LocalizedMessagesDirective extends Mess
|
|
1578
1584
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
|
1579
1585
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoChatLocalizedMessages]", providers: [
|
1580
1586
|
{
|
1581
|
-
provide: Messages$
|
1587
|
+
provide: Messages$2,
|
1582
1588
|
useExisting: forwardRef(() => LocalizedMessagesDirective)
|
1583
1589
|
}
|
1584
1590
|
], usesInheritance: true, ngImport: i0 });
|
1585
1591
|
};
|
1586
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective$
|
1592
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective$2, decorators: [{
|
1587
1593
|
type: Directive,
|
1588
1594
|
args: [{
|
1589
1595
|
providers: [
|
1590
1596
|
{
|
1591
|
-
provide: Messages$
|
1592
|
-
useExisting: forwardRef(() => LocalizedMessagesDirective$
|
1597
|
+
provide: Messages$2,
|
1598
|
+
useExisting: forwardRef(() => LocalizedMessagesDirective$2)
|
1593
1599
|
}
|
1594
1600
|
],
|
1595
1601
|
selector: '[kendoChatLocalizedMessages]',
|
@@ -1786,7 +1792,7 @@ class ChatComponent {
|
|
1786
1792
|
(sendMessage)="sendMessage.emit($event)"
|
1787
1793
|
>
|
1788
1794
|
</kendo-message-box>
|
1789
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$
|
1795
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$2, selector: "[kendoChatLocalizedMessages]" }, { kind: "directive", type: ScrollAnchorDirective, selector: "[kendoChatScrollAnchor]", inputs: ["autoScroll"], outputs: ["autoScrollChange"], exportAs: ["scrollAnchor"] }, { kind: "component", type: MessageListComponent, selector: "kendo-chat-message-list", inputs: ["messages", "attachmentTemplate", "messageTemplate", "localization", "user"], outputs: ["executeAction", "navigate", "resize"] }, { kind: "component", type: MessageBoxComponent, selector: "kendo-message-box", inputs: ["user", "autoScroll", "type", "localization", "messageBoxTemplate"], outputs: ["sendMessage"] }] });
|
1790
1796
|
}
|
1791
1797
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChatComponent, decorators: [{
|
1792
1798
|
type: Component,
|
@@ -1858,7 +1864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
1858
1864
|
</kendo-message-box>
|
1859
1865
|
`,
|
1860
1866
|
standalone: true,
|
1861
|
-
imports: [LocalizedMessagesDirective$
|
1867
|
+
imports: [LocalizedMessagesDirective$2, ScrollAnchorDirective, MessageListComponent, MessageBoxComponent]
|
1862
1868
|
}]
|
1863
1869
|
}], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: i0.NgZone }]; }, propDecorators: { messages: [{
|
1864
1870
|
type: Input
|
@@ -2003,6 +2009,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2003
2009
|
type: Input
|
2004
2010
|
}] } });
|
2005
2011
|
|
2012
|
+
/**
|
2013
|
+
* @hidden
|
2014
|
+
* Default settings for the Speech to Text button.
|
2015
|
+
* These settings can be overridden by the user.
|
2016
|
+
*/
|
2017
|
+
const STB_DEFAULT_SETTINGS = {
|
2018
|
+
continuous: false,
|
2019
|
+
disabled: false,
|
2020
|
+
fillMode: 'flat',
|
2021
|
+
integrationMode: 'webSpeech',
|
2022
|
+
interimResults: false,
|
2023
|
+
lang: 'en-US',
|
2024
|
+
maxAlternatives: 1,
|
2025
|
+
rounded: 'medium',
|
2026
|
+
size: 'medium',
|
2027
|
+
themeColor: 'base'
|
2028
|
+
};
|
2006
2029
|
/**
|
2007
2030
|
* @hidden
|
2008
2031
|
*/
|
@@ -2017,6 +2040,24 @@ class AIPromptService {
|
|
2017
2040
|
promptCommands;
|
2018
2041
|
promptOutputs;
|
2019
2042
|
promptSuggestions;
|
2043
|
+
textAreaSettings;
|
2044
|
+
outputTemplate;
|
2045
|
+
outputBodyTemplate;
|
2046
|
+
_speechToTextButton;
|
2047
|
+
get speechToTextButton() {
|
2048
|
+
return this._speechToTextButton;
|
2049
|
+
}
|
2050
|
+
set speechToTextButton(settings) {
|
2051
|
+
if (settings === true) {
|
2052
|
+
this._speechToTextButton = STB_DEFAULT_SETTINGS;
|
2053
|
+
}
|
2054
|
+
else if (settings === false) {
|
2055
|
+
this._speechToTextButton = null;
|
2056
|
+
}
|
2057
|
+
else {
|
2058
|
+
this._speechToTextButton = { ...settings };
|
2059
|
+
}
|
2060
|
+
}
|
2020
2061
|
getFlattenPromptCommands(commands = this.promptCommands) {
|
2021
2062
|
let newArr = [];
|
2022
2063
|
commands.forEach(c => {
|
@@ -2186,7 +2227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2186
2227
|
/**
|
2187
2228
|
* @hidden
|
2188
2229
|
*/
|
2189
|
-
class Messages extends ComponentMessages {
|
2230
|
+
let Messages$1 = class Messages extends ComponentMessages {
|
2190
2231
|
/**
|
2191
2232
|
* Sets the Toolbar button text for the **Prompt** view.
|
2192
2233
|
*/
|
@@ -2223,10 +2264,14 @@ class Messages extends ComponentMessages {
|
|
2223
2264
|
* Sets the title of the **Prompt suggestions** button.
|
2224
2265
|
*/
|
2225
2266
|
promptSuggestions;
|
2267
|
+
/**
|
2268
|
+
* Sets the aria-label for the **Speech to Text** button.
|
2269
|
+
*/
|
2270
|
+
speechToTextButton;
|
2226
2271
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
2227
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, inputs: { promptView: "promptView", outputView: "outputView", generateOutput: "generateOutput", promptPlaceholder: "promptPlaceholder", copyOutput: "copyOutput", retryGeneration: "retryGeneration", outputTitle: "outputTitle", outputRetryTitle: "outputRetryTitle", promptSuggestions: "promptSuggestions" }, usesInheritance: true, ngImport: i0 });
|
2228
|
-
}
|
2229
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
|
2272
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, inputs: { promptView: "promptView", outputView: "outputView", generateOutput: "generateOutput", promptPlaceholder: "promptPlaceholder", copyOutput: "copyOutput", retryGeneration: "retryGeneration", outputTitle: "outputTitle", outputRetryTitle: "outputRetryTitle", promptSuggestions: "promptSuggestions", speechToTextButton: "speechToTextButton" }, usesInheritance: true, ngImport: i0 });
|
2273
|
+
};
|
2274
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages$1, decorators: [{
|
2230
2275
|
type: Directive
|
2231
2276
|
}], propDecorators: { promptView: [{
|
2232
2277
|
type: Input
|
@@ -2246,12 +2291,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2246
2291
|
type: Input
|
2247
2292
|
}], promptSuggestions: [{
|
2248
2293
|
type: Input
|
2294
|
+
}], speechToTextButton: [{
|
2295
|
+
type: Input
|
2249
2296
|
}] } });
|
2250
2297
|
|
2251
2298
|
/**
|
2252
2299
|
* @hidden
|
2253
2300
|
*/
|
2254
|
-
class LocalizedMessagesDirective extends Messages {
|
2301
|
+
let LocalizedMessagesDirective$1 = class LocalizedMessagesDirective extends Messages$1 {
|
2255
2302
|
service;
|
2256
2303
|
constructor(service) {
|
2257
2304
|
super();
|
@@ -2260,18 +2307,18 @@ class LocalizedMessagesDirective extends Messages {
|
|
2260
2307
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
|
2261
2308
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoAIPromptLocalizedMessages]", providers: [
|
2262
2309
|
{
|
2263
|
-
provide: Messages,
|
2310
|
+
provide: Messages$1,
|
2264
2311
|
useExisting: forwardRef(() => LocalizedMessagesDirective)
|
2265
2312
|
}
|
2266
2313
|
], usesInheritance: true, ngImport: i0 });
|
2267
|
-
}
|
2268
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
|
2314
|
+
};
|
2315
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective$1, decorators: [{
|
2269
2316
|
type: Directive,
|
2270
2317
|
args: [{
|
2271
2318
|
providers: [
|
2272
2319
|
{
|
2273
|
-
provide: Messages,
|
2274
|
-
useExisting: forwardRef(() => LocalizedMessagesDirective)
|
2320
|
+
provide: Messages$1,
|
2321
|
+
useExisting: forwardRef(() => LocalizedMessagesDirective$1)
|
2275
2322
|
}
|
2276
2323
|
],
|
2277
2324
|
selector: '[kendoAIPromptLocalizedMessages]',
|
@@ -2279,6 +2326,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2279
2326
|
}]
|
2280
2327
|
}], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
|
2281
2328
|
|
2329
|
+
/**
|
2330
|
+
* Represents the template for the response in the AIPrompt component. The template context is set to the current output object.
|
2331
|
+
*
|
2332
|
+
* @example
|
2333
|
+
* ```html
|
2334
|
+
* <kendo-aiprompt>
|
2335
|
+
* <ng-template kendoAIPromptOutputTemplate let-output>
|
2336
|
+
* <div>{{output.prompt}}</div>
|
2337
|
+
* </ng-template>
|
2338
|
+
* </kendo-aiprompt>
|
2339
|
+
* ```
|
2340
|
+
*/
|
2341
|
+
class AIPromptOutputTemplateDirective {
|
2342
|
+
templateRef;
|
2343
|
+
constructor(templateRef) {
|
2344
|
+
this.templateRef = templateRef;
|
2345
|
+
}
|
2346
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptOutputTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
2347
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AIPromptOutputTemplateDirective, isStandalone: true, selector: "[kendoAIPromptOutputTemplate]", ngImport: i0 });
|
2348
|
+
}
|
2349
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptOutputTemplateDirective, decorators: [{
|
2350
|
+
type: Directive,
|
2351
|
+
args: [{
|
2352
|
+
selector: '[kendoAIPromptOutputTemplate]',
|
2353
|
+
standalone: true
|
2354
|
+
}]
|
2355
|
+
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
2356
|
+
|
2357
|
+
/**
|
2358
|
+
* Represents the template for the body of the response in the AIPrompt component. The template context is set to the current output object.
|
2359
|
+
*
|
2360
|
+
* @example
|
2361
|
+
* ```html
|
2362
|
+
* <kendo-aiprompt>
|
2363
|
+
* <ng-template kendoAIPromptOutputBodyTemplate let-output>
|
2364
|
+
* <div>{{output.prompt}}</div>
|
2365
|
+
* </ng-template>
|
2366
|
+
* </kendo-aiprompt>
|
2367
|
+
* ```
|
2368
|
+
*/
|
2369
|
+
class AIPromptOutputBodyTemplateDirective {
|
2370
|
+
templateRef;
|
2371
|
+
constructor(templateRef) {
|
2372
|
+
this.templateRef = templateRef;
|
2373
|
+
}
|
2374
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptOutputBodyTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
|
2375
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AIPromptOutputBodyTemplateDirective, isStandalone: true, selector: "[kendoAIPromptOutputBodyTemplate]", ngImport: i0 });
|
2376
|
+
}
|
2377
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptOutputBodyTemplateDirective, decorators: [{
|
2378
|
+
type: Directive,
|
2379
|
+
args: [{
|
2380
|
+
selector: '[kendoAIPromptOutputBodyTemplate]',
|
2381
|
+
standalone: true
|
2382
|
+
}]
|
2383
|
+
}], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
|
2384
|
+
|
2282
2385
|
/**
|
2283
2386
|
* Represents the [Kendo UI AIPrompt component for Angular](slug:overview_aiprompt).
|
2284
2387
|
*
|
@@ -2301,21 +2404,29 @@ class AIPromptComponent {
|
|
2301
2404
|
service;
|
2302
2405
|
navigationService;
|
2303
2406
|
ngZone;
|
2407
|
+
element;
|
2408
|
+
renderer;
|
2304
2409
|
hostClasses = true;
|
2305
2410
|
get dirAttr() {
|
2306
2411
|
return this.direction;
|
2307
2412
|
}
|
2308
|
-
constructor(localization, service, navigationService, ngZone) {
|
2413
|
+
constructor(localization, service, navigationService, ngZone, element, renderer) {
|
2309
2414
|
this.localization = localization;
|
2310
2415
|
this.service = service;
|
2311
2416
|
this.navigationService = navigationService;
|
2312
2417
|
this.ngZone = ngZone;
|
2418
|
+
this.element = element;
|
2419
|
+
this.renderer = renderer;
|
2313
2420
|
validatePackage(packageMetadata);
|
2314
2421
|
this.direction = localization.rtl ? 'rtl' : 'ltr';
|
2315
2422
|
this.subs.add(localization.changes.subscribe(({ rtl }) => {
|
2316
2423
|
this.direction = rtl ? 'rtl' : 'ltr';
|
2317
2424
|
}));
|
2318
2425
|
}
|
2426
|
+
/**
|
2427
|
+
* @hidden
|
2428
|
+
*/
|
2429
|
+
fabButton;
|
2319
2430
|
/**
|
2320
2431
|
* @hidden
|
2321
2432
|
*/
|
@@ -2324,6 +2435,14 @@ class AIPromptComponent {
|
|
2324
2435
|
* @hidden
|
2325
2436
|
*/
|
2326
2437
|
toolbarActionsTemplate;
|
2438
|
+
/**
|
2439
|
+
* @hidden
|
2440
|
+
*/
|
2441
|
+
outputTemplate;
|
2442
|
+
/**
|
2443
|
+
* @hidden
|
2444
|
+
*/
|
2445
|
+
outputBodyTemplate;
|
2327
2446
|
/**
|
2328
2447
|
* The active view index of the AIPrompt component.
|
2329
2448
|
*/
|
@@ -2337,54 +2456,120 @@ class AIPromptComponent {
|
|
2337
2456
|
return this._activeView;
|
2338
2457
|
}
|
2339
2458
|
/**
|
2340
|
-
* Sets the collection of commands to render in the
|
2459
|
+
* Sets the collection of commands to render in the Command view.
|
2341
2460
|
*/
|
2342
2461
|
set promptCommands(value) {
|
2343
2462
|
this.service.promptCommands = value;
|
2344
2463
|
}
|
2345
2464
|
/**
|
2346
|
-
* Sets the collection of suggestions to render in the
|
2465
|
+
* Sets the collection of suggestions to render in the Prompt view.
|
2347
2466
|
*/
|
2348
2467
|
set promptSuggestions(value) {
|
2349
2468
|
this.service.promptSuggestions = value;
|
2350
2469
|
}
|
2351
2470
|
/**
|
2352
|
-
* Sets the collection of generated prompt outputs to render in the
|
2471
|
+
* Sets the collection of generated prompt outputs to render in the Output view.
|
2353
2472
|
*/
|
2354
2473
|
set promptOutputs(value) {
|
2355
2474
|
this.service.promptOutputs = value;
|
2356
2475
|
}
|
2357
2476
|
/**
|
2358
|
-
* Specifies
|
2359
|
-
*
|
2477
|
+
* Specifies whether the rating buttons appear in each Output view card.
|
2478
|
+
* The rating buttons do not appear by default.
|
2360
2479
|
* @default false
|
2361
2480
|
*/
|
2362
2481
|
set showOutputRating(value) {
|
2363
2482
|
this.service.showOutputRating = value;
|
2364
2483
|
}
|
2484
|
+
/**
|
2485
|
+
* Specifies whether the Stop generation button appears in the Output view.
|
2486
|
+
* The Stop generation button does not appear by default.
|
2487
|
+
* @default false
|
2488
|
+
*/
|
2489
|
+
streaming = false;
|
2490
|
+
/**
|
2491
|
+
* Sets the settings for the Speech to Text button in the Prompt view
|
2492
|
+
* ([see example](slug:configuration_aiprompt#enabling-speech-to-text)).
|
2493
|
+
*/
|
2494
|
+
set speechToTextButton(settings) {
|
2495
|
+
if (settings) {
|
2496
|
+
this.service.speechToTextButton = settings;
|
2497
|
+
}
|
2498
|
+
else {
|
2499
|
+
this.service.speechToTextButton = false;
|
2500
|
+
}
|
2501
|
+
}
|
2502
|
+
/**
|
2503
|
+
* Sets the settings for the TextArea in the Prompt view
|
2504
|
+
* ([see example](slug:configuration_aiprompt#configuring-the-prompt-text-area)).
|
2505
|
+
*/
|
2506
|
+
set textAreaSettings(settings) {
|
2507
|
+
this.service.textAreaSettings = settings;
|
2508
|
+
}
|
2509
|
+
/**
|
2510
|
+
* Sets the SVG icon for the Generate button in the Prompt view.
|
2511
|
+
*/
|
2512
|
+
generateButtonSVGIcon = sparklesIcon;
|
2513
|
+
/**
|
2514
|
+
* Sets the icon for the Generate button in the Prompt view.
|
2515
|
+
* @default 'sparkles'
|
2516
|
+
*/
|
2517
|
+
generateButtonIcon = 'sparkles';
|
2518
|
+
/**
|
2519
|
+
* Sets the disabled state for the Generate button in the Prompt view.
|
2520
|
+
* @default false
|
2521
|
+
*/
|
2522
|
+
disabledGenerateButton = false;
|
2365
2523
|
/**
|
2366
2524
|
* Fires when the `activeView` property is updated.
|
2367
2525
|
* Use this event for two-way binding of the `activeView` property.
|
2368
2526
|
*/
|
2369
2527
|
activeViewChange = new EventEmitter();
|
2370
2528
|
/**
|
2371
|
-
* Fires when
|
2529
|
+
* Fires when you click the Generate button in the Prompt view or the Retry button in the Output view.
|
2372
2530
|
* Use the event's `isRetry` field to determine the source element.
|
2373
2531
|
*/
|
2374
2532
|
promptRequest = new EventEmitter();
|
2375
2533
|
/**
|
2376
|
-
* Fires when
|
2534
|
+
* Fires when you click a Command view command.
|
2377
2535
|
* The event data contains the selected command.
|
2378
2536
|
*/
|
2379
2537
|
commandExecute = new EventEmitter();
|
2380
2538
|
/**
|
2381
|
-
* Fires when
|
2539
|
+
* Fires when you click a Copy button in any Output view card.
|
2382
2540
|
*/
|
2383
2541
|
outputCopy = new EventEmitter();
|
2384
2542
|
/**
|
2385
|
-
* Fires when
|
2543
|
+
* Fires when you click a rating button in any Output view card.
|
2386
2544
|
*/
|
2387
2545
|
outputRatingChange = new EventEmitter();
|
2546
|
+
/**
|
2547
|
+
* Fires when you click the Stop Generation button in the Output view.
|
2548
|
+
*/
|
2549
|
+
promptRequestCancel = new EventEmitter();
|
2550
|
+
ngOnInit() {
|
2551
|
+
const aiPromptElement = this.element.nativeElement;
|
2552
|
+
this.subs.add(this.renderer.listen(aiPromptElement, 'keydown', (event) => {
|
2553
|
+
if (event.key === 'Escape') {
|
2554
|
+
this.promptRequestCancel.emit();
|
2555
|
+
}
|
2556
|
+
}));
|
2557
|
+
}
|
2558
|
+
ngOnChanges(changes) {
|
2559
|
+
if (changes['streaming'] && changes['streaming'].currentValue === true) {
|
2560
|
+
this.ngZone.onStable.pipe(take(1)).subscribe(() => {
|
2561
|
+
this.fabButton?.focus();
|
2562
|
+
});
|
2563
|
+
}
|
2564
|
+
}
|
2565
|
+
ngAfterContentChecked() {
|
2566
|
+
if (this.outputTemplate !== this.service.outputTemplate) {
|
2567
|
+
this.service.outputTemplate = this.outputTemplate;
|
2568
|
+
}
|
2569
|
+
if (this.outputBodyTemplate !== this.service.outputBodyTemplate) {
|
2570
|
+
this.service.outputBodyTemplate = this.outputBodyTemplate;
|
2571
|
+
}
|
2572
|
+
}
|
2388
2573
|
ngAfterViewInit() {
|
2389
2574
|
this.ngZone.runOutsideAngular(() => {
|
2390
2575
|
this.service.aiPrompt = this;
|
@@ -2418,12 +2603,24 @@ class AIPromptComponent {
|
|
2418
2603
|
* @hidden
|
2419
2604
|
*/
|
2420
2605
|
outputIcon = commentIcon;
|
2606
|
+
/**
|
2607
|
+
* @hidden
|
2608
|
+
*/
|
2609
|
+
fabStopGenerationSVGIcon = stopSmIcon;
|
2421
2610
|
/**
|
2422
2611
|
* @hidden
|
2423
2612
|
*/
|
2424
2613
|
get viewsArray() {
|
2425
2614
|
return this.views?.toArray();
|
2426
2615
|
}
|
2616
|
+
/**
|
2617
|
+
* @hidden
|
2618
|
+
*/
|
2619
|
+
fabPositionMode = 'absolute';
|
2620
|
+
/**
|
2621
|
+
* @hidden
|
2622
|
+
*/
|
2623
|
+
fabAlignment = { vertical: 'bottom', horizontal: 'end' };
|
2427
2624
|
direction;
|
2428
2625
|
_activeView = 0;
|
2429
2626
|
/**
|
@@ -2459,8 +2656,8 @@ class AIPromptComponent {
|
|
2459
2656
|
};
|
2460
2657
|
this.promptRequest.emit(eventArgs);
|
2461
2658
|
}
|
2462
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }, { token: ToolbarNavigationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
2463
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AIPromptComponent, isStandalone: true, selector: "kendo-aiprompt", inputs: { activeView: "activeView", promptCommands: "promptCommands", promptSuggestions: "promptSuggestions", promptOutputs: "promptOutputs", showOutputRating: "showOutputRating" }, outputs: { activeViewChange: "activeViewChange", promptRequest: "promptRequest", commandExecute: "commandExecute", outputCopy: "outputCopy", outputRatingChange: "outputRatingChange" }, host: { properties: { "class.k-prompt": "this.hostClasses", "attr.dir": "this.dirAttr" } }, providers: [
|
2659
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }, { token: ToolbarNavigationService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
2660
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AIPromptComponent, isStandalone: true, selector: "kendo-aiprompt", inputs: { activeView: "activeView", promptCommands: "promptCommands", promptSuggestions: "promptSuggestions", promptOutputs: "promptOutputs", showOutputRating: "showOutputRating", streaming: "streaming", speechToTextButton: "speechToTextButton", textAreaSettings: "textAreaSettings", generateButtonSVGIcon: "generateButtonSVGIcon", generateButtonIcon: "generateButtonIcon", disabledGenerateButton: "disabledGenerateButton" }, outputs: { activeViewChange: "activeViewChange", promptRequest: "promptRequest", commandExecute: "commandExecute", outputCopy: "outputCopy", outputRatingChange: "outputRatingChange", promptRequestCancel: "promptRequestCancel" }, host: { properties: { "class.k-prompt": "this.hostClasses", "attr.dir": "this.dirAttr" } }, providers: [
|
2464
2661
|
LocalizationService,
|
2465
2662
|
AIPromptService,
|
2466
2663
|
ToolbarNavigationService,
|
@@ -2468,7 +2665,7 @@ class AIPromptComponent {
|
|
2468
2665
|
provide: L10N_PREFIX,
|
2469
2666
|
useValue: 'kendo.aiprompt'
|
2470
2667
|
}
|
2471
|
-
], queries: [{ propertyName: "toolbarActionsTemplate", first: true, predicate: AIPromptToolbarActionsDirective, descendants: true }, { propertyName: "views", predicate: BaseView }], exportAs: ["kendoAIPrompt"], ngImport: i0, template: `
|
2668
|
+
], queries: [{ propertyName: "toolbarActionsTemplate", first: true, predicate: AIPromptToolbarActionsDirective, descendants: true }, { propertyName: "outputTemplate", first: true, predicate: AIPromptOutputTemplateDirective, descendants: true }, { propertyName: "outputBodyTemplate", first: true, predicate: AIPromptOutputBodyTemplateDirective, descendants: true }, { propertyName: "views", predicate: BaseView }], viewQueries: [{ propertyName: "fabButton", first: true, predicate: ["fabButton"], descendants: true }], exportAs: ["kendoAIPrompt"], usesOnChanges: true, ngImport: i0, template: `
|
2472
2669
|
<ng-container kendoAIPromptLocalizedMessages
|
2473
2670
|
i18n-promptView="kendo.aiprompt.promptView|The Toolbar button text for the Prompt view."
|
2474
2671
|
promptView="Ask AI"
|
@@ -2487,7 +2684,9 @@ class AIPromptComponent {
|
|
2487
2684
|
i18n-outputRetryTitle="kendo.aiprompt.outputRetryTitle|The title of each Output view retry card."
|
2488
2685
|
outputRetryTitle="Generated with AI"
|
2489
2686
|
i18n-promptSuggestions="kendo.aiprompt.promptSuggestions|The title of the Prompt suggestions button."
|
2490
|
-
promptSuggestions="Prompt suggestions"
|
2687
|
+
promptSuggestions="Prompt suggestions"
|
2688
|
+
i18n-speechToTextButton="kendo.aiprompt.speechToTextButton|The aria-label for the Speech to Text button."
|
2689
|
+
speechToTextButton="Voice input">
|
2491
2690
|
</ng-container>
|
2492
2691
|
<div class="k-prompt-header">
|
2493
2692
|
<div class="k-toolbar-flat k-toolbar k-toolbar-md"
|
@@ -2512,6 +2711,16 @@ class AIPromptComponent {
|
|
2512
2711
|
</div>
|
2513
2712
|
</div>
|
2514
2713
|
<div class="k-prompt-content">
|
2714
|
+
<kendo-floatingactionbutton #fabButton *ngIf="streaming && selectedView?.viewType === 'output'"
|
2715
|
+
class="k-prompt-stop-fab"
|
2716
|
+
buttonClass="k-generating k-active"
|
2717
|
+
[positionMode]="fabPositionMode"
|
2718
|
+
[align]="fabAlignment"
|
2719
|
+
[svgIcon]="fabStopGenerationSVGIcon"
|
2720
|
+
icon="stop"
|
2721
|
+
(click)="promptRequestCancel.emit()"
|
2722
|
+
>
|
2723
|
+
</kendo-floatingactionbutton>
|
2515
2724
|
<div class="k-prompt-view">
|
2516
2725
|
<ng-container *ngTemplateOutlet="viewTemplate">
|
2517
2726
|
</ng-container>
|
@@ -2524,12 +2733,16 @@ class AIPromptComponent {
|
|
2524
2733
|
type="button"
|
2525
2734
|
themeColor="primary"
|
2526
2735
|
rounded="full"
|
2527
|
-
[
|
2528
|
-
|
2736
|
+
[attr.title]="messageFor('generateOutput')"
|
2737
|
+
[attr.aria-label]="messageFor('generateOutput')"
|
2738
|
+
[attr.aria-disabled]="disabledGenerateButton"
|
2739
|
+
[svgIcon]="generateButtonSVGIcon"
|
2740
|
+
[icon]="generateButtonIcon"
|
2741
|
+
[disabled]="disabledGenerateButton"
|
2529
2742
|
(click)="handleGenerateOutput()">{{messageFor('generateOutput')}}</button>
|
2530
2743
|
</div>
|
2531
2744
|
</div>
|
2532
|
-
`, 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"] }] });
|
2745
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective$1, selector: "[kendoAIPromptLocalizedMessages]" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: AIPromptToolbarFocusableDirective, selector: "[kendoAIPromptToolbarFocusable]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: ["themeColor", "size", "rounded", "disabled", "align", "offset", "positionMode", "icon", "svgIcon", "iconClass", "buttonClass", "dialClass", "text", "dialItemAnimation", "tabIndex", "dialItems"], outputs: ["blur", "focus", "dialItemClick", "open", "close"] }] });
|
2533
2746
|
}
|
2534
2747
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptComponent, decorators: [{
|
2535
2748
|
type: Component,
|
@@ -2564,7 +2777,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2564
2777
|
i18n-outputRetryTitle="kendo.aiprompt.outputRetryTitle|The title of each Output view retry card."
|
2565
2778
|
outputRetryTitle="Generated with AI"
|
2566
2779
|
i18n-promptSuggestions="kendo.aiprompt.promptSuggestions|The title of the Prompt suggestions button."
|
2567
|
-
promptSuggestions="Prompt suggestions"
|
2780
|
+
promptSuggestions="Prompt suggestions"
|
2781
|
+
i18n-speechToTextButton="kendo.aiprompt.speechToTextButton|The aria-label for the Speech to Text button."
|
2782
|
+
speechToTextButton="Voice input">
|
2568
2783
|
</ng-container>
|
2569
2784
|
<div class="k-prompt-header">
|
2570
2785
|
<div class="k-toolbar-flat k-toolbar k-toolbar-md"
|
@@ -2589,6 +2804,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2589
2804
|
</div>
|
2590
2805
|
</div>
|
2591
2806
|
<div class="k-prompt-content">
|
2807
|
+
<kendo-floatingactionbutton #fabButton *ngIf="streaming && selectedView?.viewType === 'output'"
|
2808
|
+
class="k-prompt-stop-fab"
|
2809
|
+
buttonClass="k-generating k-active"
|
2810
|
+
[positionMode]="fabPositionMode"
|
2811
|
+
[align]="fabAlignment"
|
2812
|
+
[svgIcon]="fabStopGenerationSVGIcon"
|
2813
|
+
icon="stop"
|
2814
|
+
(click)="promptRequestCancel.emit()"
|
2815
|
+
>
|
2816
|
+
</kendo-floatingactionbutton>
|
2592
2817
|
<div class="k-prompt-view">
|
2593
2818
|
<ng-container *ngTemplateOutlet="viewTemplate">
|
2594
2819
|
</ng-container>
|
@@ -2601,27 +2826,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2601
2826
|
type="button"
|
2602
2827
|
themeColor="primary"
|
2603
2828
|
rounded="full"
|
2604
|
-
[
|
2605
|
-
|
2829
|
+
[attr.title]="messageFor('generateOutput')"
|
2830
|
+
[attr.aria-label]="messageFor('generateOutput')"
|
2831
|
+
[attr.aria-disabled]="disabledGenerateButton"
|
2832
|
+
[svgIcon]="generateButtonSVGIcon"
|
2833
|
+
[icon]="generateButtonIcon"
|
2834
|
+
[disabled]="disabledGenerateButton"
|
2606
2835
|
(click)="handleGenerateOutput()">{{messageFor('generateOutput')}}</button>
|
2607
2836
|
</div>
|
2608
2837
|
</div>
|
2609
2838
|
`,
|
2610
2839
|
standalone: true,
|
2611
|
-
imports: [LocalizedMessagesDirective, NgFor, ButtonComponent, AIPromptToolbarFocusableDirective, NgIf, NgTemplateOutlet]
|
2840
|
+
imports: [LocalizedMessagesDirective$1, NgFor, ButtonComponent, AIPromptToolbarFocusableDirective, NgIf, NgTemplateOutlet, FloatingActionButtonComponent]
|
2612
2841
|
}]
|
2613
|
-
}], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }, { type: ToolbarNavigationService }, { type: i0.NgZone }]; }, propDecorators: { hostClasses: [{
|
2842
|
+
}], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }, { type: ToolbarNavigationService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { hostClasses: [{
|
2614
2843
|
type: HostBinding,
|
2615
2844
|
args: ['class.k-prompt']
|
2616
2845
|
}], dirAttr: [{
|
2617
2846
|
type: HostBinding,
|
2618
2847
|
args: ['attr.dir']
|
2848
|
+
}], fabButton: [{
|
2849
|
+
type: ViewChild,
|
2850
|
+
args: ['fabButton']
|
2619
2851
|
}], views: [{
|
2620
2852
|
type: ContentChildren,
|
2621
2853
|
args: [BaseView]
|
2622
2854
|
}], toolbarActionsTemplate: [{
|
2623
2855
|
type: ContentChild,
|
2624
2856
|
args: [AIPromptToolbarActionsDirective]
|
2857
|
+
}], outputTemplate: [{
|
2858
|
+
type: ContentChild,
|
2859
|
+
args: [AIPromptOutputTemplateDirective]
|
2860
|
+
}], outputBodyTemplate: [{
|
2861
|
+
type: ContentChild,
|
2862
|
+
args: [AIPromptOutputBodyTemplateDirective]
|
2625
2863
|
}], activeView: [{
|
2626
2864
|
type: Input
|
2627
2865
|
}], promptCommands: [{
|
@@ -2632,6 +2870,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2632
2870
|
type: Input
|
2633
2871
|
}], showOutputRating: [{
|
2634
2872
|
type: Input
|
2873
|
+
}], streaming: [{
|
2874
|
+
type: Input
|
2875
|
+
}], speechToTextButton: [{
|
2876
|
+
type: Input
|
2877
|
+
}], textAreaSettings: [{
|
2878
|
+
type: Input
|
2879
|
+
}], generateButtonSVGIcon: [{
|
2880
|
+
type: Input
|
2881
|
+
}], generateButtonIcon: [{
|
2882
|
+
type: Input
|
2883
|
+
}], disabledGenerateButton: [{
|
2884
|
+
type: Input
|
2635
2885
|
}], activeViewChange: [{
|
2636
2886
|
type: Output
|
2637
2887
|
}], promptRequest: [{
|
@@ -2642,6 +2892,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2642
2892
|
type: Output
|
2643
2893
|
}], outputRatingChange: [{
|
2644
2894
|
type: Output
|
2895
|
+
}], promptRequestCancel: [{
|
2896
|
+
type: Output
|
2645
2897
|
}] } });
|
2646
2898
|
|
2647
2899
|
/**
|
@@ -2747,7 +2999,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2747
2999
|
* </kendo-aiprompt-messages>
|
2748
3000
|
* ```
|
2749
3001
|
*/
|
2750
|
-
class AIPromptCustomMessagesComponent extends Messages {
|
3002
|
+
class AIPromptCustomMessagesComponent extends Messages$1 {
|
2751
3003
|
service;
|
2752
3004
|
constructor(service) {
|
2753
3005
|
super();
|
@@ -2759,7 +3011,7 @@ class AIPromptCustomMessagesComponent extends Messages {
|
|
2759
3011
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
2760
3012
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AIPromptCustomMessagesComponent, isStandalone: true, selector: "kendo-aiprompt-messages", providers: [
|
2761
3013
|
{
|
2762
|
-
provide: Messages,
|
3014
|
+
provide: Messages$1,
|
2763
3015
|
useExisting: forwardRef(() => AIPromptCustomMessagesComponent)
|
2764
3016
|
}
|
2765
3017
|
], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
|
@@ -2769,7 +3021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2769
3021
|
args: [{
|
2770
3022
|
providers: [
|
2771
3023
|
{
|
2772
|
-
provide: Messages,
|
3024
|
+
provide: Messages$1,
|
2773
3025
|
useExisting: forwardRef(() => AIPromptCustomMessagesComponent)
|
2774
3026
|
}
|
2775
3027
|
],
|
@@ -2906,6 +3158,12 @@ class AIPromptOutputCardComponent {
|
|
2906
3158
|
this.positiveRatingIcon = thumbUpOutlineIcon;
|
2907
3159
|
}
|
2908
3160
|
}
|
3161
|
+
/**
|
3162
|
+
* @hidden
|
3163
|
+
*/
|
3164
|
+
get customBodyTemplate() {
|
3165
|
+
return this.service.outputBodyTemplate?.templateRef;
|
3166
|
+
}
|
2909
3167
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptOutputCardComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
|
2910
3168
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AIPromptOutputCardComponent, isStandalone: true, selector: "[kendoAIPromptOutputCard]", inputs: { promptOutput: "promptOutput" }, host: { properties: { "class.k-card": "this.hostClass", "attr.role": "this.listItemRole", "attr.tabindex": "this.tabIndex", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts" } }, ngImport: i0, template: `
|
2911
3169
|
<div class="k-card-header">
|
@@ -2916,7 +3174,13 @@ class AIPromptOutputCardComponent {
|
|
2916
3174
|
<div class="k-card-subtitle">{{promptOutput.prompt}}</div>
|
2917
3175
|
</div>
|
2918
3176
|
<div class="k-card-body">
|
2919
|
-
<
|
3177
|
+
<ng-container *ngIf="customBodyTemplate; else defaultTemplate">
|
3178
|
+
<ng-container *ngTemplateOutlet="customBodyTemplate; context: { $implicit: promptOutput }">
|
3179
|
+
</ng-container>
|
3180
|
+
</ng-container>
|
3181
|
+
<ng-template #defaultTemplate>
|
3182
|
+
<p>{{promptOutput.output}}</p>
|
3183
|
+
</ng-template>
|
2920
3184
|
</div>
|
2921
3185
|
<div class="k-actions k-actions-start k-actions-horizontal k-card-actions">
|
2922
3186
|
<button kendoButton
|
@@ -2950,7 +3214,7 @@ class AIPromptOutputCardComponent {
|
|
2950
3214
|
</button>
|
2951
3215
|
</ng-container>
|
2952
3216
|
</div>
|
2953
|
-
`, 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"] }] });
|
3217
|
+
`, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
2954
3218
|
}
|
2955
3219
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptOutputCardComponent, decorators: [{
|
2956
3220
|
type: Component,
|
@@ -2965,7 +3229,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2965
3229
|
<div class="k-card-subtitle">{{promptOutput.prompt}}</div>
|
2966
3230
|
</div>
|
2967
3231
|
<div class="k-card-body">
|
2968
|
-
<
|
3232
|
+
<ng-container *ngIf="customBodyTemplate; else defaultTemplate">
|
3233
|
+
<ng-container *ngTemplateOutlet="customBodyTemplate; context: { $implicit: promptOutput }">
|
3234
|
+
</ng-container>
|
3235
|
+
</ng-container>
|
3236
|
+
<ng-template #defaultTemplate>
|
3237
|
+
<p>{{promptOutput.output}}</p>
|
3238
|
+
</ng-template>
|
2969
3239
|
</div>
|
2970
3240
|
<div class="k-actions k-actions-start k-actions-horizontal k-card-actions">
|
2971
3241
|
<button kendoButton
|
@@ -3001,7 +3271,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
3001
3271
|
</div>
|
3002
3272
|
`,
|
3003
3273
|
standalone: true,
|
3004
|
-
imports: [ButtonComponent, NgIf]
|
3274
|
+
imports: [ButtonComponent, NgIf, NgTemplateOutlet]
|
3005
3275
|
}]
|
3006
3276
|
}], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; }, propDecorators: { hostClass: [{
|
3007
3277
|
type: HostBinding,
|
@@ -3044,6 +3314,12 @@ class OutputViewComponent extends BaseView {
|
|
3044
3314
|
get promptOutputs() {
|
3045
3315
|
return this.service.promptOutputs;
|
3046
3316
|
}
|
3317
|
+
/**
|
3318
|
+
* @hidden
|
3319
|
+
*/
|
3320
|
+
get customTemplate() {
|
3321
|
+
return this.service.outputTemplate?.templateRef;
|
3322
|
+
}
|
3047
3323
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OutputViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
|
3048
3324
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: OutputViewComponent, isStandalone: true, selector: "kendo-aiprompt-output-view", providers: [{
|
3049
3325
|
provide: BaseView,
|
@@ -3053,13 +3329,18 @@ class OutputViewComponent extends BaseView {
|
|
3053
3329
|
<div
|
3054
3330
|
class="k-card-list"
|
3055
3331
|
role="list">
|
3056
|
-
<
|
3057
|
-
|
3058
|
-
|
3059
|
-
|
3332
|
+
<ng-container *ngFor="let output of promptOutputs">
|
3333
|
+
<ng-container *ngIf="customTemplate; else defaultTemplate">
|
3334
|
+
<ng-container *ngTemplateOutlet="customTemplate; context: { $implicit: output }">
|
3335
|
+
</ng-container>
|
3336
|
+
</ng-container>
|
3337
|
+
<ng-template #defaultTemplate>
|
3338
|
+
<div kendoAIPromptOutputCard [promptOutput]="output"></div>
|
3339
|
+
</ng-template>
|
3340
|
+
</ng-container>
|
3060
3341
|
</div>
|
3061
3342
|
</ng-template>
|
3062
|
-
`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AIPromptOutputCardComponent, selector: "[kendoAIPromptOutputCard]", inputs: ["promptOutput"] }] });
|
3343
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AIPromptOutputCardComponent, selector: "[kendoAIPromptOutputCard]", inputs: ["promptOutput"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
3063
3344
|
}
|
3064
3345
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: OutputViewComponent, decorators: [{
|
3065
3346
|
type: Component,
|
@@ -3074,15 +3355,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
3074
3355
|
<div
|
3075
3356
|
class="k-card-list"
|
3076
3357
|
role="list">
|
3077
|
-
<
|
3078
|
-
|
3079
|
-
|
3080
|
-
|
3358
|
+
<ng-container *ngFor="let output of promptOutputs">
|
3359
|
+
<ng-container *ngIf="customTemplate; else defaultTemplate">
|
3360
|
+
<ng-container *ngTemplateOutlet="customTemplate; context: { $implicit: output }">
|
3361
|
+
</ng-container>
|
3362
|
+
</ng-container>
|
3363
|
+
<ng-template #defaultTemplate>
|
3364
|
+
<div kendoAIPromptOutputCard [promptOutput]="output"></div>
|
3365
|
+
</ng-template>
|
3366
|
+
</ng-container>
|
3081
3367
|
</div>
|
3082
3368
|
</ng-template>
|
3083
3369
|
`,
|
3084
3370
|
standalone: true,
|
3085
|
-
imports: [NgFor, AIPromptOutputCardComponent]
|
3371
|
+
imports: [NgFor, AIPromptOutputCardComponent, NgIf, NgTemplateOutlet]
|
3086
3372
|
}]
|
3087
3373
|
}], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; } });
|
3088
3374
|
|
@@ -3140,6 +3426,42 @@ class PromptViewComponent extends BaseView {
|
|
3140
3426
|
suggestionClick(suggestion) {
|
3141
3427
|
this.textAreaValue = this.service.promptValue = suggestion;
|
3142
3428
|
}
|
3429
|
+
/**
|
3430
|
+
* @hidden
|
3431
|
+
*/
|
3432
|
+
suggestionKeydown(event, suggestion) {
|
3433
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
3434
|
+
this.suggestionClick(suggestion);
|
3435
|
+
}
|
3436
|
+
}
|
3437
|
+
/**
|
3438
|
+
* @hidden
|
3439
|
+
*/
|
3440
|
+
get speechToTextButtonSettings() {
|
3441
|
+
return this.service.speechToTextButton;
|
3442
|
+
}
|
3443
|
+
/**
|
3444
|
+
* @hidden
|
3445
|
+
*/
|
3446
|
+
get textareaSettings() {
|
3447
|
+
return this.service.textAreaSettings;
|
3448
|
+
}
|
3449
|
+
/**
|
3450
|
+
* @hidden
|
3451
|
+
*/
|
3452
|
+
onSpeechToTextResult(event) {
|
3453
|
+
if (event.alternatives && event.alternatives.length > 0) {
|
3454
|
+
this.textAreaValue += event.alternatives[0].transcript + ' ';
|
3455
|
+
}
|
3456
|
+
}
|
3457
|
+
/**
|
3458
|
+
* @hidden
|
3459
|
+
*/
|
3460
|
+
onSpeechToTextError(event) {
|
3461
|
+
if (isDevMode()) {
|
3462
|
+
console.error('Speech to Text error:', event.errorMessage);
|
3463
|
+
}
|
3464
|
+
}
|
3143
3465
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PromptViewComponent, deps: [{ token: i1$1.LocalizationService }, { token: AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
|
3144
3466
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PromptViewComponent, isStandalone: true, selector: "kendo-aiprompt-prompt-view", providers: [
|
3145
3467
|
{
|
@@ -3149,9 +3471,44 @@ class PromptViewComponent extends BaseView {
|
|
3149
3471
|
], usesInheritance: true, ngImport: i0, template: `
|
3150
3472
|
<ng-template #content>
|
3151
3473
|
<kendo-textarea
|
3152
|
-
[
|
3153
|
-
[
|
3154
|
-
[
|
3474
|
+
[cols]="textareaSettings?.cols"
|
3475
|
+
[disabled]="textareaSettings?.disabled"
|
3476
|
+
[fillMode]="textareaSettings?.fillMode"
|
3477
|
+
[flow]="textareaSettings?.flow ?? 'vertical'"
|
3478
|
+
[inputAttributes]="textareaSettings?.inputAttributes"
|
3479
|
+
[maxlength]="textareaSettings?.maxlength"
|
3480
|
+
[placeholder]="textareaSettings?.placeholder ?? messageFor('promptPlaceholder')"
|
3481
|
+
[readonly]="textareaSettings?.readonly"
|
3482
|
+
[resizable]="textareaSettings?.resizable ?? 'vertical'"
|
3483
|
+
[rounded]="textareaSettings?.rounded"
|
3484
|
+
[rows]="textareaSettings?.rows ?? 1"
|
3485
|
+
[selectOnFocus]="textareaSettings?.selectOnFocus"
|
3486
|
+
[showSuffixSeparator]="textareaSettings?.showSuffixSeparator ?? true"
|
3487
|
+
[size]="textareaSettings?.size"
|
3488
|
+
[tabIndex]="textareaSettings?.tabindex"
|
3489
|
+
[title]="textareaSettings?.title"
|
3490
|
+
[(value)]="textAreaValue"
|
3491
|
+
>
|
3492
|
+
<kendo-textarea-suffix *ngIf="speechToTextButtonSettings">
|
3493
|
+
<button kendoSpeechToTextButton
|
3494
|
+
role="button"
|
3495
|
+
[continuous]="speechToTextButtonSettings?.continuous"
|
3496
|
+
[disabled]="speechToTextButtonSettings?.disabled"
|
3497
|
+
[fillMode]="speechToTextButtonSettings?.fillMode ?? 'flat'"
|
3498
|
+
[integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
|
3499
|
+
[interimResults]="speechToTextButtonSettings?.interimResults"
|
3500
|
+
[lang]="speechToTextButtonSettings?.lang"
|
3501
|
+
[maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
|
3502
|
+
[rounded]="speechToTextButtonSettings?.rounded"
|
3503
|
+
[size]="speechToTextButtonSettings?.size"
|
3504
|
+
[themeColor]="speechToTextButtonSettings?.themeColor"
|
3505
|
+
[attr.aria-label]="messageFor('speechToTextButton')"
|
3506
|
+
[attr.title]="messageFor('speechToTextButton')"
|
3507
|
+
[attr.aria-disabled]="speechToTextButtonSettings?.disabled"
|
3508
|
+
(error)="onSpeechToTextError($event)"
|
3509
|
+
(result)="onSpeechToTextResult($event)"
|
3510
|
+
></button>
|
3511
|
+
</kendo-textarea-suffix>
|
3155
3512
|
</kendo-textarea>
|
3156
3513
|
<div *ngIf="promptSuggestions"
|
3157
3514
|
class="k-prompt-expander">
|
@@ -3169,16 +3526,22 @@ class PromptViewComponent extends BaseView {
|
|
3169
3526
|
class="k-prompt-expander-content"
|
3170
3527
|
role="list"
|
3171
3528
|
[attr.id]="contentId">
|
3172
|
-
<div
|
3173
|
-
|
3174
|
-
|
3175
|
-
|
3176
|
-
|
3529
|
+
<div class="k-suggestion-group" role="group">
|
3530
|
+
<div *ngFor="let suggestion of promptSuggestions"
|
3531
|
+
class="k-suggestion"
|
3532
|
+
role="button"
|
3533
|
+
[attr.tabindex]="0"
|
3534
|
+
[attr.aria-label]="suggestion"
|
3535
|
+
[attr.title]="suggestion"
|
3536
|
+
(click)="suggestionClick(suggestion)"
|
3537
|
+
(keydown)="suggestionKeydown($event, suggestion)">
|
3538
|
+
{{suggestion}}
|
3539
|
+
</div>
|
3177
3540
|
</div>
|
3178
3541
|
</div>
|
3179
3542
|
</div>
|
3180
3543
|
</ng-template>
|
3181
|
-
`, 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"] }] });
|
3544
|
+
`, 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"] }] });
|
3182
3545
|
}
|
3183
3546
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PromptViewComponent, decorators: [{
|
3184
3547
|
type: Component,
|
@@ -3193,9 +3556,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
3193
3556
|
template: `
|
3194
3557
|
<ng-template #content>
|
3195
3558
|
<kendo-textarea
|
3196
|
-
[
|
3197
|
-
[
|
3198
|
-
[
|
3559
|
+
[cols]="textareaSettings?.cols"
|
3560
|
+
[disabled]="textareaSettings?.disabled"
|
3561
|
+
[fillMode]="textareaSettings?.fillMode"
|
3562
|
+
[flow]="textareaSettings?.flow ?? 'vertical'"
|
3563
|
+
[inputAttributes]="textareaSettings?.inputAttributes"
|
3564
|
+
[maxlength]="textareaSettings?.maxlength"
|
3565
|
+
[placeholder]="textareaSettings?.placeholder ?? messageFor('promptPlaceholder')"
|
3566
|
+
[readonly]="textareaSettings?.readonly"
|
3567
|
+
[resizable]="textareaSettings?.resizable ?? 'vertical'"
|
3568
|
+
[rounded]="textareaSettings?.rounded"
|
3569
|
+
[rows]="textareaSettings?.rows ?? 1"
|
3570
|
+
[selectOnFocus]="textareaSettings?.selectOnFocus"
|
3571
|
+
[showSuffixSeparator]="textareaSettings?.showSuffixSeparator ?? true"
|
3572
|
+
[size]="textareaSettings?.size"
|
3573
|
+
[tabIndex]="textareaSettings?.tabindex"
|
3574
|
+
[title]="textareaSettings?.title"
|
3575
|
+
[(value)]="textAreaValue"
|
3576
|
+
>
|
3577
|
+
<kendo-textarea-suffix *ngIf="speechToTextButtonSettings">
|
3578
|
+
<button kendoSpeechToTextButton
|
3579
|
+
role="button"
|
3580
|
+
[continuous]="speechToTextButtonSettings?.continuous"
|
3581
|
+
[disabled]="speechToTextButtonSettings?.disabled"
|
3582
|
+
[fillMode]="speechToTextButtonSettings?.fillMode ?? 'flat'"
|
3583
|
+
[integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
|
3584
|
+
[interimResults]="speechToTextButtonSettings?.interimResults"
|
3585
|
+
[lang]="speechToTextButtonSettings?.lang"
|
3586
|
+
[maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
|
3587
|
+
[rounded]="speechToTextButtonSettings?.rounded"
|
3588
|
+
[size]="speechToTextButtonSettings?.size"
|
3589
|
+
[themeColor]="speechToTextButtonSettings?.themeColor"
|
3590
|
+
[attr.aria-label]="messageFor('speechToTextButton')"
|
3591
|
+
[attr.title]="messageFor('speechToTextButton')"
|
3592
|
+
[attr.aria-disabled]="speechToTextButtonSettings?.disabled"
|
3593
|
+
(error)="onSpeechToTextError($event)"
|
3594
|
+
(result)="onSpeechToTextResult($event)"
|
3595
|
+
></button>
|
3596
|
+
</kendo-textarea-suffix>
|
3199
3597
|
</kendo-textarea>
|
3200
3598
|
<div *ngIf="promptSuggestions"
|
3201
3599
|
class="k-prompt-expander">
|
@@ -3213,18 +3611,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
3213
3611
|
class="k-prompt-expander-content"
|
3214
3612
|
role="list"
|
3215
3613
|
[attr.id]="contentId">
|
3216
|
-
<div
|
3217
|
-
|
3218
|
-
|
3219
|
-
|
3220
|
-
|
3614
|
+
<div class="k-suggestion-group" role="group">
|
3615
|
+
<div *ngFor="let suggestion of promptSuggestions"
|
3616
|
+
class="k-suggestion"
|
3617
|
+
role="button"
|
3618
|
+
[attr.tabindex]="0"
|
3619
|
+
[attr.aria-label]="suggestion"
|
3620
|
+
[attr.title]="suggestion"
|
3621
|
+
(click)="suggestionClick(suggestion)"
|
3622
|
+
(keydown)="suggestionKeydown($event, suggestion)">
|
3623
|
+
{{suggestion}}
|
3624
|
+
</div>
|
3221
3625
|
</div>
|
3222
3626
|
</div>
|
3223
3627
|
</div>
|
3224
3628
|
</ng-template>
|
3225
3629
|
`,
|
3226
3630
|
standalone: true,
|
3227
|
-
imports: [TextAreaComponent, NgIf, ButtonComponent, NgFor]
|
3631
|
+
imports: [TextAreaComponent, NgIf, ButtonComponent, NgFor, TextAreaSuffixComponent, SpeechToTextButtonComponent]
|
3228
3632
|
}]
|
3229
3633
|
}], ctorParameters: function () { return [{ type: i1$1.LocalizationService }, { type: AIPromptService }]; } });
|
3230
3634
|
|
@@ -3243,7 +3647,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
3243
3647
|
* </kendo-chat-messages>
|
3244
3648
|
* ```
|
3245
3649
|
*/
|
3246
|
-
class CustomMessagesComponent extends Messages$
|
3650
|
+
class CustomMessagesComponent extends Messages$2 {
|
3247
3651
|
service;
|
3248
3652
|
constructor(service) {
|
3249
3653
|
super();
|
@@ -3255,7 +3659,7 @@ class CustomMessagesComponent extends Messages$1 {
|
|
3255
3659
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
3256
3660
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CustomMessagesComponent, isStandalone: true, selector: "kendo-chat-messages", providers: [
|
3257
3661
|
{
|
3258
|
-
provide: Messages$
|
3662
|
+
provide: Messages$2,
|
3259
3663
|
useExisting: forwardRef(() => CustomMessagesComponent)
|
3260
3664
|
}
|
3261
3665
|
], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
|
@@ -3265,7 +3669,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
3265
3669
|
args: [{
|
3266
3670
|
providers: [
|
3267
3671
|
{
|
3268
|
-
provide: Messages$
|
3672
|
+
provide: Messages$2,
|
3269
3673
|
useExisting: forwardRef(() => CustomMessagesComponent)
|
3270
3674
|
}
|
3271
3675
|
],
|
@@ -3387,57 +3791,1076 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
3387
3791
|
}] } });
|
3388
3792
|
|
3389
3793
|
/**
|
3390
|
-
*
|
3391
|
-
*
|
3392
|
-
* @example
|
3393
|
-
* ```ts
|
3394
|
-
* import { Component } from '@angular/core';
|
3395
|
-
* import { KENDO_AIPROMPT } from '@progress/kendo-angular-conversational-ui';
|
3396
|
-
*
|
3397
|
-
* @Component({
|
3398
|
-
* standalone: true,
|
3399
|
-
* imports: [KENDO_AIPROMPT],
|
3400
|
-
* selector: 'my-app',
|
3401
|
-
* template: `<kendo-aiprompt></kendo-aiprompt>`
|
3402
|
-
* })
|
3403
|
-
* export class AppComponent {}
|
3404
|
-
* ```
|
3794
|
+
* @hidden
|
3405
3795
|
*/
|
3406
|
-
|
3407
|
-
|
3408
|
-
|
3409
|
-
|
3410
|
-
|
3411
|
-
|
3412
|
-
|
3413
|
-
|
3414
|
-
|
3415
|
-
|
3796
|
+
class Messages extends ComponentMessages {
|
3797
|
+
/**
|
3798
|
+
* Sets the Commands button title.
|
3799
|
+
*/
|
3800
|
+
commandsButtonTitle;
|
3801
|
+
/**
|
3802
|
+
* Sets the Generate button title.
|
3803
|
+
*/
|
3804
|
+
generateButtonTitle;
|
3805
|
+
/**
|
3806
|
+
* Sets the Speech to Text button title.
|
3807
|
+
*/
|
3808
|
+
speechToTextButtonTitle;
|
3809
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
|
3810
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, inputs: { commandsButtonTitle: "commandsButtonTitle", generateButtonTitle: "generateButtonTitle", speechToTextButtonTitle: "speechToTextButtonTitle" }, usesInheritance: true, ngImport: i0 });
|
3811
|
+
}
|
3812
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
|
3813
|
+
type: Directive
|
3814
|
+
}], propDecorators: { commandsButtonTitle: [{
|
3815
|
+
type: Input
|
3816
|
+
}], generateButtonTitle: [{
|
3817
|
+
type: Input
|
3818
|
+
}], speechToTextButtonTitle: [{
|
3819
|
+
type: Input
|
3820
|
+
}] } });
|
3821
|
+
|
3416
3822
|
/**
|
3417
|
-
*
|
3418
|
-
*
|
3419
|
-
* @example
|
3420
|
-
* ```ts
|
3421
|
-
* import { Component } from '@angular/core';
|
3422
|
-
* import { KENDO_CHAT } from '@progress/kendo-angular-conversational-ui';
|
3423
|
-
*
|
3424
|
-
* @Component({
|
3425
|
-
* standalone: true,
|
3426
|
-
* imports: [KENDO_CHAT],
|
3427
|
-
* selector: 'my-app',
|
3428
|
-
* template: `<kendo-chat></kendo-chat>`
|
3429
|
-
* })
|
3430
|
-
* export class AppComponent {}
|
3431
|
-
* ```
|
3823
|
+
* @hidden
|
3432
3824
|
*/
|
3433
|
-
|
3434
|
-
|
3435
|
-
|
3436
|
-
|
3825
|
+
class LocalizedMessagesDirective extends Messages {
|
3826
|
+
service;
|
3827
|
+
constructor(service) {
|
3828
|
+
super();
|
3829
|
+
this.service = service;
|
3830
|
+
}
|
3831
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
|
3832
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedMessagesDirective, isStandalone: true, selector: "[kendoInlineAIPromptLocalizedMessages]", providers: [
|
3833
|
+
{
|
3834
|
+
provide: Messages,
|
3835
|
+
useExisting: forwardRef(() => LocalizedMessagesDirective)
|
3836
|
+
}
|
3837
|
+
], usesInheritance: true, ngImport: i0 });
|
3838
|
+
}
|
3839
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedMessagesDirective, decorators: [{
|
3840
|
+
type: Directive,
|
3841
|
+
args: [{
|
3842
|
+
providers: [
|
3843
|
+
{
|
3844
|
+
provide: Messages,
|
3845
|
+
useExisting: forwardRef(() => LocalizedMessagesDirective)
|
3846
|
+
}
|
3847
|
+
],
|
3848
|
+
selector: '[kendoInlineAIPromptLocalizedMessages]',
|
3849
|
+
standalone: true
|
3850
|
+
}]
|
3851
|
+
}], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
|
3852
|
+
|
3853
|
+
/**
|
3854
|
+
* @hidden
|
3855
|
+
*/
|
3856
|
+
const defaultPopupSettings = {
|
3857
|
+
popupAlign: { vertical: 'top', horizontal: 'left' },
|
3858
|
+
anchorAlign: { horizontal: "left", vertical: "bottom" },
|
3859
|
+
positionMode: 'absolute',
|
3860
|
+
collision: { horizontal: 'fit', vertical: 'flip' },
|
3861
|
+
animate: true,
|
3862
|
+
offset: { top: 0, left: 0 },
|
3863
|
+
margin: { horizontal: 0, vertical: 0 },
|
3864
|
+
};
|
3865
|
+
/**
|
3866
|
+
* @hidden
|
3867
|
+
*/
|
3868
|
+
const calculateMeasurement = (value) => {
|
3869
|
+
return value + (typeof value === 'number' ? 'px' : '');
|
3870
|
+
};
|
3871
|
+
|
3872
|
+
const TEXTAREA_MAX_ROWS = 5;
|
3873
|
+
const TEXTAREA_INITIAL_ROWS = 1;
|
3874
|
+
/**
|
3875
|
+
* @hidden
|
3876
|
+
*/
|
3877
|
+
class InlineAIPromptContentComponent {
|
3878
|
+
ngZone;
|
3879
|
+
renderer;
|
3880
|
+
element;
|
3881
|
+
localization;
|
3882
|
+
className = true;
|
3883
|
+
get dirAttr() {
|
3884
|
+
return this.direction;
|
3885
|
+
}
|
3886
|
+
get maxHeightStyle() {
|
3887
|
+
return this.calculateMeasurement(this.maxHeight);
|
3888
|
+
}
|
3889
|
+
get widthStyle() {
|
3890
|
+
return this.calculateMeasurement(this.width);
|
3891
|
+
}
|
3892
|
+
popupElement;
|
3893
|
+
promptValue;
|
3894
|
+
placeholder;
|
3895
|
+
promptOutput;
|
3896
|
+
enableSpeechToText = true;
|
3897
|
+
streaming = false;
|
3898
|
+
width = 550;
|
3899
|
+
maxHeight;
|
3900
|
+
appendTo;
|
3901
|
+
defaultOutputActions = [{
|
3902
|
+
name: 'copy',
|
3903
|
+
type: 'button',
|
3904
|
+
icon: 'copy',
|
3905
|
+
svgIcon: copyIcon,
|
3906
|
+
text: 'Copy',
|
3907
|
+
fillMode: 'flat',
|
3908
|
+
themeColor: 'primary',
|
3909
|
+
rounded: 'medium',
|
3910
|
+
},
|
3911
|
+
{
|
3912
|
+
name: 'retry',
|
3913
|
+
type: 'button',
|
3914
|
+
icon: 'arrow-rotate-cw',
|
3915
|
+
svgIcon: arrowRotateCwIcon,
|
3916
|
+
text: 'Retry',
|
3917
|
+
fillMode: 'flat',
|
3918
|
+
themeColor: 'primary',
|
3919
|
+
rounded: 'medium',
|
3920
|
+
},
|
3921
|
+
{
|
3922
|
+
name: 'discard',
|
3923
|
+
type: 'button',
|
3924
|
+
icon: 'cancel-outline',
|
3925
|
+
svgIcon: cancelOutlineIcon,
|
3926
|
+
text: 'Discard',
|
3927
|
+
fillMode: 'flat',
|
3928
|
+
themeColor: 'base',
|
3929
|
+
rounded: 'medium',
|
3930
|
+
}
|
3931
|
+
];
|
3932
|
+
set outputActions(actions) {
|
3933
|
+
this._outputActions = this.mergeWithDefaultActions(actions);
|
3934
|
+
}
|
3935
|
+
get outputActions() {
|
3936
|
+
return this._outputActions;
|
3937
|
+
}
|
3938
|
+
set promptCommands(commands) {
|
3939
|
+
this._promptCommands = commands || [];
|
3940
|
+
this.commandMenuItems = this.transformCommands(commands || []);
|
3941
|
+
}
|
3942
|
+
get promptCommands() {
|
3943
|
+
return this._promptCommands;
|
3944
|
+
}
|
3945
|
+
outputTemplate;
|
3946
|
+
promptRequest = new EventEmitter();
|
3947
|
+
commandExecute = new EventEmitter();
|
3948
|
+
outputActionClick = new EventEmitter();
|
3949
|
+
promptRequestCancel = new EventEmitter();
|
3950
|
+
close = new EventEmitter();
|
3951
|
+
promptValueChange = new EventEmitter();
|
3952
|
+
onEscapeKey(event) {
|
3953
|
+
if (event.key === 'Escape') {
|
3954
|
+
if (this.streaming) {
|
3955
|
+
event.stopPropagation();
|
3956
|
+
this.promptRequestCancel.emit();
|
3957
|
+
}
|
3958
|
+
else {
|
3959
|
+
this.close.emit();
|
3960
|
+
}
|
3961
|
+
}
|
3962
|
+
}
|
3963
|
+
textArea;
|
3964
|
+
contextMenu;
|
3965
|
+
calculateMeasurement = calculateMeasurement;
|
3966
|
+
commandMenuIcon = menuIcon;
|
3967
|
+
sendIcon = paperPlaneIcon;
|
3968
|
+
stopGenerationIcon = stopSmIcon;
|
3969
|
+
isListening = false;
|
3970
|
+
commandMenuItems = [];
|
3971
|
+
messages = {};
|
3972
|
+
maxRows = TEXTAREA_MAX_ROWS;
|
3973
|
+
initialRows = TEXTAREA_INITIAL_ROWS;
|
3974
|
+
_outputActions = this.defaultOutputActions;
|
3975
|
+
_promptCommands = [];
|
3976
|
+
direction;
|
3977
|
+
localizationSubs = new Subscription();
|
3978
|
+
subs = new Subscription();
|
3979
|
+
constructor(ngZone, renderer, element, localization) {
|
3980
|
+
this.ngZone = ngZone;
|
3981
|
+
this.renderer = renderer;
|
3982
|
+
this.element = element;
|
3983
|
+
this.localization = localization;
|
3984
|
+
validatePackage(packageMetadata);
|
3985
|
+
if (!this.localization) {
|
3986
|
+
this.localization = inject(LocalizationService);
|
3987
|
+
}
|
3988
|
+
this.direction = this.localization?.rtl ? 'rtl' : 'ltr';
|
3989
|
+
this.localizationSubs.add(this.localization.changes.subscribe(({ rtl }) => {
|
3990
|
+
this.direction = rtl ? 'rtl' : 'ltr';
|
3991
|
+
}));
|
3992
|
+
}
|
3993
|
+
ngAfterViewInit() {
|
3994
|
+
this.ngZone.runOutsideAngular(() => {
|
3995
|
+
if (!isDocumentAvailable()) {
|
3996
|
+
return;
|
3997
|
+
}
|
3998
|
+
// add a delay to avoid catching the same click event that triggered the component opening
|
3999
|
+
setTimeout(() => {
|
4000
|
+
this.subs.add(this.renderer.listen('document', 'click', (e) => {
|
4001
|
+
this.outsideClickClose(e);
|
4002
|
+
}));
|
4003
|
+
});
|
4004
|
+
});
|
4005
|
+
}
|
4006
|
+
ngOnDestroy() {
|
4007
|
+
this.subs.unsubscribe();
|
4008
|
+
this.localizationSubs.unsubscribe();
|
4009
|
+
this.contextMenu?.hide();
|
4010
|
+
}
|
4011
|
+
focus() {
|
4012
|
+
if (this.textArea) {
|
4013
|
+
this.textArea.focus();
|
4014
|
+
}
|
4015
|
+
}
|
4016
|
+
onActionClick(event) {
|
4017
|
+
const eventArgs = {
|
4018
|
+
action: event,
|
4019
|
+
output: this.promptOutput,
|
4020
|
+
};
|
4021
|
+
this.outputActionClick.emit(eventArgs);
|
4022
|
+
this.handleDefaultActions(event);
|
4023
|
+
}
|
4024
|
+
handleDefaultActions(event) {
|
4025
|
+
switch (event.name) {
|
4026
|
+
case 'copy':
|
4027
|
+
navigator.clipboard.writeText(this.promptOutput.output);
|
4028
|
+
break;
|
4029
|
+
case 'retry':
|
4030
|
+
this.promptRequest.emit({
|
4031
|
+
prompt: this.promptOutput?.prompt,
|
4032
|
+
isRetry: true
|
4033
|
+
});
|
4034
|
+
break;
|
4035
|
+
case 'discard':
|
4036
|
+
this.close.emit();
|
4037
|
+
break;
|
4038
|
+
}
|
4039
|
+
}
|
4040
|
+
handleSpeechResult(event) {
|
4041
|
+
if (event.alternatives && event.alternatives.length > 0) {
|
4042
|
+
if (!isPresent(this.promptValue)) {
|
4043
|
+
this.promptValue = '';
|
4044
|
+
}
|
4045
|
+
this.promptValue += event.alternatives[0].transcript + ' ';
|
4046
|
+
}
|
4047
|
+
}
|
4048
|
+
onClick(action) {
|
4049
|
+
this.commandExecute.next(action);
|
4050
|
+
}
|
4051
|
+
handlePromptValueChange(value) {
|
4052
|
+
this.promptValue = value;
|
4053
|
+
this.promptValueChange.emit(value);
|
4054
|
+
}
|
4055
|
+
handleTextAreaKeydown(event) {
|
4056
|
+
if (event.key === 'Enter' && !event.shiftKey && !this.streaming) {
|
4057
|
+
event.preventDefault();
|
4058
|
+
this.handlePromptRequest();
|
4059
|
+
}
|
4060
|
+
}
|
4061
|
+
onCommandButtonClick(event) {
|
4062
|
+
event.preventDefault();
|
4063
|
+
event.stopPropagation();
|
4064
|
+
if (this.contextMenu) {
|
4065
|
+
this.contextMenu.show(this.popupElement);
|
4066
|
+
}
|
4067
|
+
}
|
4068
|
+
onCommandClick(event) {
|
4069
|
+
// avoid triggering the document click listener to keep the popup open
|
4070
|
+
if (event.originalEvent) {
|
4071
|
+
event.originalEvent.stopPropagation();
|
4072
|
+
event.originalEvent.preventDefault();
|
4073
|
+
}
|
4074
|
+
const eventArgs = {
|
4075
|
+
...event.item.originalCommand
|
4076
|
+
};
|
4077
|
+
this.commandExecute.emit(eventArgs);
|
4078
|
+
}
|
4079
|
+
messageFor(text) {
|
4080
|
+
if (this.messages?.[text]) {
|
4081
|
+
return this.messages[text];
|
4082
|
+
}
|
4083
|
+
return this.localization?.get(text);
|
4084
|
+
}
|
4085
|
+
handlePromptRequest() {
|
4086
|
+
if (this.streaming) {
|
4087
|
+
this.promptRequestCancel.emit();
|
4088
|
+
return;
|
4089
|
+
}
|
4090
|
+
if (!this.promptValue) {
|
4091
|
+
return;
|
4092
|
+
}
|
4093
|
+
const eventArgs = {
|
4094
|
+
prompt: this.promptValue
|
4095
|
+
};
|
4096
|
+
this.promptRequest.emit(eventArgs);
|
4097
|
+
}
|
4098
|
+
mergeWithDefaultActions(userActions) {
|
4099
|
+
if (!userActions || userActions.length === 0) {
|
4100
|
+
return [];
|
4101
|
+
}
|
4102
|
+
return userActions.map(userAction => {
|
4103
|
+
const defaultAction = this.defaultOutputActions.find(action => action.name === userAction?.name);
|
4104
|
+
if (defaultAction) {
|
4105
|
+
return { ...defaultAction, ...userAction };
|
4106
|
+
}
|
4107
|
+
return userAction;
|
4108
|
+
});
|
4109
|
+
}
|
4110
|
+
transformCommands = (commands) => commands.map(command => ({
|
4111
|
+
text: command.text,
|
4112
|
+
icon: command.icon,
|
4113
|
+
svgIcon: command.svgIcon,
|
4114
|
+
disabled: command.disabled,
|
4115
|
+
originalCommand: command,
|
4116
|
+
items: command.children ? this.transformCommands(command.children) : undefined
|
4117
|
+
}));
|
4118
|
+
outsideClickClose(e) {
|
4119
|
+
if (!this.element.nativeElement.contains(e.target)) {
|
4120
|
+
this.ngZone.run(() => {
|
4121
|
+
this.close.emit();
|
4122
|
+
});
|
4123
|
+
}
|
4124
|
+
}
|
4125
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptContentComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i1$1.LocalizationService, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
|
4126
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InlineAIPromptContentComponent, isStandalone: true, selector: "kendo-inlineaiprompt-content", inputs: { popupElement: "popupElement", promptValue: "promptValue", placeholder: "placeholder", promptOutput: "promptOutput", enableSpeechToText: "enableSpeechToText", streaming: "streaming", width: "width", maxHeight: "maxHeight", appendTo: "appendTo", outputActions: "outputActions", promptCommands: "promptCommands", outputTemplate: "outputTemplate" }, outputs: { promptRequest: "promptRequest", commandExecute: "commandExecute", outputActionClick: "outputActionClick", promptRequestCancel: "promptRequestCancel", close: "close", promptValueChange: "promptValueChange" }, host: { listeners: { "keydown": "onEscapeKey($event)" }, properties: { "class.k-prompt": "this.className", "attr.dir": "this.dirAttr", "style.max-height": "this.maxHeightStyle", "style.width": "this.widthStyle" } }, providers: [
|
4127
|
+
LocalizationService,
|
4128
|
+
{
|
4129
|
+
provide: L10N_PREFIX,
|
4130
|
+
useValue: 'kendo.inlineaiprompt',
|
4131
|
+
},
|
4132
|
+
], viewQueries: [{ propertyName: "textArea", first: true, predicate: TextAreaComponent, descendants: true }, { propertyName: "contextMenu", first: true, predicate: ["kendoContextMenu"], descendants: true }], exportAs: ["kendoInlineAIPromptContent"], ngImport: i0, template: `
|
4133
|
+
<ng-container kendoInlineAIPromptLocalizedMessages
|
4134
|
+
i18n-commandsButtonTitle="kendo.inlineaiprompt.commandsButtonTitle|Sets the Commands button title."
|
4135
|
+
commandsButtonTitle="Command Menu"
|
4136
|
+
i18n-generateButtonTitle="kendo.inlineaiprompt.generateButtonTitle|Sets the Generate button title."
|
4137
|
+
generateButtonTitle="Generate"
|
4138
|
+
i18n-speechToTextButtonTitle="kendo.inlineaiprompt.speechToTextButtonTitle|Sets the Speech to Text button title."
|
4139
|
+
speechToTextButtonTitle="Speech to Text"
|
4140
|
+
>
|
4141
|
+
</ng-container>
|
4142
|
+
<div class="k-prompt-content">
|
4143
|
+
<div class="k-prompt-view">
|
4144
|
+
<kendo-card *ngIf="promptOutput" width="100%">
|
4145
|
+
<kendo-card-body>
|
4146
|
+
<ng-container
|
4147
|
+
*ngIf="outputTemplate"
|
4148
|
+
[ngTemplateOutlet]="outputTemplate"
|
4149
|
+
[ngTemplateOutletContext]="{ $implicit: promptOutput }"
|
4150
|
+
>
|
4151
|
+
</ng-container>
|
4152
|
+
<ng-container *ngIf="!outputTemplate">{{promptOutput.output}}</ng-container>
|
4153
|
+
</kendo-card-body>
|
4154
|
+
<kendo-card-actions *ngIf="outputActions && outputActions.length > 0">
|
4155
|
+
<ng-container *ngFor="let action of outputActions">
|
4156
|
+
<button kendoButton *ngIf="action.type === 'button'"
|
4157
|
+
[attr.title]="action?.title"
|
4158
|
+
[fillMode]="action?.fillMode"
|
4159
|
+
[themeColor]="action?.themeColor"
|
4160
|
+
[rounded]="action?.rounded"
|
4161
|
+
[icon]="action?.icon"
|
4162
|
+
[svgIcon]="action?.svgIcon"
|
4163
|
+
(click)="onActionClick(action)"
|
4164
|
+
>{{action?.text}}</button>
|
4165
|
+
<div *ngIf="action.type === 'spacer'" class="k-spacer"></div>
|
4166
|
+
</ng-container>
|
4167
|
+
</kendo-card-actions>
|
4168
|
+
</kendo-card>
|
4169
|
+
<kendo-textarea
|
4170
|
+
[value]="promptValue ? promptValue : null"
|
4171
|
+
(valueChange)="handlePromptValueChange($event)"
|
4172
|
+
[rows]="initialRows"
|
4173
|
+
resizable="auto"
|
4174
|
+
flow="horizontal"
|
4175
|
+
[placeholder]="placeholder"
|
4176
|
+
[showPrefixSeparator]="true"
|
4177
|
+
[selectOnFocus]="true"
|
4178
|
+
[maxResizableRows]="maxRows"
|
4179
|
+
(keydown)="handleTextAreaKeydown($event)"
|
4180
|
+
>
|
4181
|
+
<kendo-textarea-prefix>
|
4182
|
+
<button
|
4183
|
+
kendoButton
|
4184
|
+
#commandMenuButton
|
4185
|
+
*ngIf="promptCommands && promptCommands.length > 0"
|
4186
|
+
[attr.title]="messageFor('commandsButtonTitle')"
|
4187
|
+
fillMode="flat"
|
4188
|
+
icon="menu"
|
4189
|
+
[svgIcon]="commandMenuIcon"
|
4190
|
+
(click)="onCommandButtonClick($event)"
|
4191
|
+
></button>
|
4192
|
+
<button
|
4193
|
+
kendoSpeechToTextButton
|
4194
|
+
*ngIf="enableSpeechToText"
|
4195
|
+
[attr.title]="messageFor('speechToTextButtonTitle')"
|
4196
|
+
fillMode="flat"
|
4197
|
+
(result)="handleSpeechResult($event)"
|
4198
|
+
(start)="isListening = true"
|
4199
|
+
(end)="isListening = false"
|
4200
|
+
></button>
|
4201
|
+
</kendo-textarea-prefix>
|
4202
|
+
<kendo-textarea-suffix>
|
4203
|
+
<button
|
4204
|
+
kendoButton
|
4205
|
+
[attr.title]="messageFor('generateButtonTitle')"
|
4206
|
+
fillMode="flat"
|
4207
|
+
class="k-prompt-send"
|
4208
|
+
[ngClass]="{ 'k-generating': streaming, 'k-active': streaming }"
|
4209
|
+
(click)="handlePromptRequest()"
|
4210
|
+
[disabled]="!streaming && (!promptValue?.trim() || isListening)"
|
4211
|
+
[svgIcon]="streaming ? stopGenerationIcon : sendIcon"
|
4212
|
+
[icon]="streaming ? 'stop-sm' : 'paper-plane'"
|
4213
|
+
></button>
|
4214
|
+
</kendo-textarea-suffix>
|
4215
|
+
</kendo-textarea>
|
4216
|
+
</div>
|
4217
|
+
</div>
|
4218
|
+
<kendo-contextmenu
|
4219
|
+
#kendoContextMenu
|
4220
|
+
[alignToAnchor]="true"
|
4221
|
+
[items]="commandMenuItems"
|
4222
|
+
[appendTo]="appendTo"
|
4223
|
+
class="k-hidden"
|
4224
|
+
(select)="onCommandClick($event)">
|
4225
|
+
</kendo-contextmenu>
|
4226
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoInlineAIPromptLocalizedMessages]" }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "component", type: i2.SpeechToTextButtonComponent, selector: "button[kendoSpeechToTextButton]", inputs: ["disabled", "size", "rounded", "fillMode", "themeColor", "integrationMode", "lang", "continuous", "interimResults", "maxAlternatives"], outputs: ["start", "end", "result", "error", "click"], exportAs: ["kendoSpeechToTextButton"] }, { kind: "component", type: i3.TextAreaComponent, selector: "kendo-textarea", inputs: ["focusableId", "flow", "inputAttributes", "adornmentsOrientation", "rows", "cols", "maxlength", "maxResizableRows", "tabindex", "tabIndex", "resizable", "size", "rounded", "fillMode", "showPrefixSeparator", "showSuffixSeparator"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoTextArea"] }, { kind: "component", type: i3.TextAreaPrefixComponent, selector: "kendo-textarea-prefix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaPrefix"] }, { kind: "component", type: i3.TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: i4.ContextMenuComponent, selector: "kendo-contextmenu", inputs: ["showOn", "target", "filter", "alignToAnchor", "vertical", "popupAnimate", "popupAlign", "anchorAlign", "collision", "appendTo", "ariaLabel"], outputs: ["popupOpen", "popupClose", "select", "open", "close"], exportAs: ["kendoContextMenu"] }, { kind: "component", type: i5.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "component", type: i5.CardActionsComponent, selector: "kendo-card-actions", inputs: ["orientation", "layout", "actions"], outputs: ["action"] }, { kind: "component", type: i5.CardBodyComponent, selector: "kendo-card-body" }] });
|
4227
|
+
}
|
4228
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptContentComponent, decorators: [{
|
4229
|
+
type: Component,
|
4230
|
+
args: [{
|
4231
|
+
exportAs: 'kendoInlineAIPromptContent',
|
4232
|
+
selector: 'kendo-inlineaiprompt-content',
|
4233
|
+
providers: [
|
4234
|
+
LocalizationService,
|
4235
|
+
{
|
4236
|
+
provide: L10N_PREFIX,
|
4237
|
+
useValue: 'kendo.inlineaiprompt',
|
4238
|
+
},
|
4239
|
+
],
|
4240
|
+
template: `
|
4241
|
+
<ng-container kendoInlineAIPromptLocalizedMessages
|
4242
|
+
i18n-commandsButtonTitle="kendo.inlineaiprompt.commandsButtonTitle|Sets the Commands button title."
|
4243
|
+
commandsButtonTitle="Command Menu"
|
4244
|
+
i18n-generateButtonTitle="kendo.inlineaiprompt.generateButtonTitle|Sets the Generate button title."
|
4245
|
+
generateButtonTitle="Generate"
|
4246
|
+
i18n-speechToTextButtonTitle="kendo.inlineaiprompt.speechToTextButtonTitle|Sets the Speech to Text button title."
|
4247
|
+
speechToTextButtonTitle="Speech to Text"
|
4248
|
+
>
|
4249
|
+
</ng-container>
|
4250
|
+
<div class="k-prompt-content">
|
4251
|
+
<div class="k-prompt-view">
|
4252
|
+
<kendo-card *ngIf="promptOutput" width="100%">
|
4253
|
+
<kendo-card-body>
|
4254
|
+
<ng-container
|
4255
|
+
*ngIf="outputTemplate"
|
4256
|
+
[ngTemplateOutlet]="outputTemplate"
|
4257
|
+
[ngTemplateOutletContext]="{ $implicit: promptOutput }"
|
4258
|
+
>
|
4259
|
+
</ng-container>
|
4260
|
+
<ng-container *ngIf="!outputTemplate">{{promptOutput.output}}</ng-container>
|
4261
|
+
</kendo-card-body>
|
4262
|
+
<kendo-card-actions *ngIf="outputActions && outputActions.length > 0">
|
4263
|
+
<ng-container *ngFor="let action of outputActions">
|
4264
|
+
<button kendoButton *ngIf="action.type === 'button'"
|
4265
|
+
[attr.title]="action?.title"
|
4266
|
+
[fillMode]="action?.fillMode"
|
4267
|
+
[themeColor]="action?.themeColor"
|
4268
|
+
[rounded]="action?.rounded"
|
4269
|
+
[icon]="action?.icon"
|
4270
|
+
[svgIcon]="action?.svgIcon"
|
4271
|
+
(click)="onActionClick(action)"
|
4272
|
+
>{{action?.text}}</button>
|
4273
|
+
<div *ngIf="action.type === 'spacer'" class="k-spacer"></div>
|
4274
|
+
</ng-container>
|
4275
|
+
</kendo-card-actions>
|
4276
|
+
</kendo-card>
|
4277
|
+
<kendo-textarea
|
4278
|
+
[value]="promptValue ? promptValue : null"
|
4279
|
+
(valueChange)="handlePromptValueChange($event)"
|
4280
|
+
[rows]="initialRows"
|
4281
|
+
resizable="auto"
|
4282
|
+
flow="horizontal"
|
4283
|
+
[placeholder]="placeholder"
|
4284
|
+
[showPrefixSeparator]="true"
|
4285
|
+
[selectOnFocus]="true"
|
4286
|
+
[maxResizableRows]="maxRows"
|
4287
|
+
(keydown)="handleTextAreaKeydown($event)"
|
4288
|
+
>
|
4289
|
+
<kendo-textarea-prefix>
|
4290
|
+
<button
|
4291
|
+
kendoButton
|
4292
|
+
#commandMenuButton
|
4293
|
+
*ngIf="promptCommands && promptCommands.length > 0"
|
4294
|
+
[attr.title]="messageFor('commandsButtonTitle')"
|
4295
|
+
fillMode="flat"
|
4296
|
+
icon="menu"
|
4297
|
+
[svgIcon]="commandMenuIcon"
|
4298
|
+
(click)="onCommandButtonClick($event)"
|
4299
|
+
></button>
|
4300
|
+
<button
|
4301
|
+
kendoSpeechToTextButton
|
4302
|
+
*ngIf="enableSpeechToText"
|
4303
|
+
[attr.title]="messageFor('speechToTextButtonTitle')"
|
4304
|
+
fillMode="flat"
|
4305
|
+
(result)="handleSpeechResult($event)"
|
4306
|
+
(start)="isListening = true"
|
4307
|
+
(end)="isListening = false"
|
4308
|
+
></button>
|
4309
|
+
</kendo-textarea-prefix>
|
4310
|
+
<kendo-textarea-suffix>
|
4311
|
+
<button
|
4312
|
+
kendoButton
|
4313
|
+
[attr.title]="messageFor('generateButtonTitle')"
|
4314
|
+
fillMode="flat"
|
4315
|
+
class="k-prompt-send"
|
4316
|
+
[ngClass]="{ 'k-generating': streaming, 'k-active': streaming }"
|
4317
|
+
(click)="handlePromptRequest()"
|
4318
|
+
[disabled]="!streaming && (!promptValue?.trim() || isListening)"
|
4319
|
+
[svgIcon]="streaming ? stopGenerationIcon : sendIcon"
|
4320
|
+
[icon]="streaming ? 'stop-sm' : 'paper-plane'"
|
4321
|
+
></button>
|
4322
|
+
</kendo-textarea-suffix>
|
4323
|
+
</kendo-textarea>
|
4324
|
+
</div>
|
4325
|
+
</div>
|
4326
|
+
<kendo-contextmenu
|
4327
|
+
#kendoContextMenu
|
4328
|
+
[alignToAnchor]="true"
|
4329
|
+
[items]="commandMenuItems"
|
4330
|
+
[appendTo]="appendTo"
|
4331
|
+
class="k-hidden"
|
4332
|
+
(select)="onCommandClick($event)">
|
4333
|
+
</kendo-contextmenu>
|
4334
|
+
`,
|
4335
|
+
standalone: true,
|
4336
|
+
imports: [NgClass, NgIf, NgFor, NgTemplateOutlet, LocalizedMessagesDirective, KENDO_BUTTONS, KENDO_TEXTAREA, KENDO_CONTEXTMENU, KENDO_CARD],
|
4337
|
+
}]
|
4338
|
+
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i1$1.LocalizationService, decorators: [{
|
4339
|
+
type: Optional
|
4340
|
+
}, {
|
4341
|
+
type: SkipSelf
|
4342
|
+
}] }]; }, propDecorators: { className: [{
|
4343
|
+
type: HostBinding,
|
4344
|
+
args: ['class.k-prompt']
|
4345
|
+
}], dirAttr: [{
|
4346
|
+
type: HostBinding,
|
4347
|
+
args: ['attr.dir']
|
4348
|
+
}], maxHeightStyle: [{
|
4349
|
+
type: HostBinding,
|
4350
|
+
args: ['style.max-height']
|
4351
|
+
}], widthStyle: [{
|
4352
|
+
type: HostBinding,
|
4353
|
+
args: ['style.width']
|
4354
|
+
}], popupElement: [{
|
4355
|
+
type: Input
|
4356
|
+
}], promptValue: [{
|
4357
|
+
type: Input
|
4358
|
+
}], placeholder: [{
|
4359
|
+
type: Input
|
4360
|
+
}], promptOutput: [{
|
4361
|
+
type: Input
|
4362
|
+
}], enableSpeechToText: [{
|
4363
|
+
type: Input
|
4364
|
+
}], streaming: [{
|
4365
|
+
type: Input
|
4366
|
+
}], width: [{
|
4367
|
+
type: Input
|
4368
|
+
}], maxHeight: [{
|
4369
|
+
type: Input
|
4370
|
+
}], appendTo: [{
|
4371
|
+
type: Input
|
4372
|
+
}], outputActions: [{
|
4373
|
+
type: Input
|
4374
|
+
}], promptCommands: [{
|
4375
|
+
type: Input
|
4376
|
+
}], outputTemplate: [{
|
4377
|
+
type: Input
|
4378
|
+
}], promptRequest: [{
|
4379
|
+
type: Output
|
4380
|
+
}], commandExecute: [{
|
4381
|
+
type: Output
|
4382
|
+
}], outputActionClick: [{
|
4383
|
+
type: Output
|
4384
|
+
}], promptRequestCancel: [{
|
4385
|
+
type: Output
|
4386
|
+
}], close: [{
|
4387
|
+
type: Output
|
4388
|
+
}], promptValueChange: [{
|
4389
|
+
type: Output
|
4390
|
+
}], onEscapeKey: [{
|
4391
|
+
type: HostListener,
|
4392
|
+
args: ['keydown', ['$event']]
|
4393
|
+
}], textArea: [{
|
4394
|
+
type: ViewChild,
|
4395
|
+
args: [TextAreaComponent]
|
4396
|
+
}], contextMenu: [{
|
4397
|
+
type: ViewChild,
|
4398
|
+
args: ['kendoContextMenu']
|
4399
|
+
}] } });
|
4400
|
+
|
4401
|
+
/**
|
4402
|
+
* Defines a template for displaying the output of the Inline AI Prompt.
|
4403
|
+
*
|
4404
|
+
* @example
|
4405
|
+
* ```html
|
4406
|
+
* <kendo-inlineaiprompt>
|
4407
|
+
* <ng-template kendoInlineAIPromptOutputTemplate let-output>
|
4408
|
+
* <div class="custom-output">
|
4409
|
+
* <h4>AI Response:</h4>
|
4410
|
+
* <p>{{ output.output }}</p>
|
4411
|
+
* </div>
|
4412
|
+
* </ng-template>
|
4413
|
+
* </kendo-inlineaiprompt>
|
4414
|
+
* ```
|
4415
|
+
*/
|
4416
|
+
class InlineAIPromptOutputTemplateDirective {
|
4417
|
+
templateRef;
|
4418
|
+
constructor(templateRef) {
|
4419
|
+
this.templateRef = templateRef;
|
4420
|
+
}
|
4421
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptOutputTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
4422
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: InlineAIPromptOutputTemplateDirective, isStandalone: true, selector: "[kendoInlineAIPromptOutputTemplate]", ngImport: i0 });
|
4423
|
+
}
|
4424
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptOutputTemplateDirective, decorators: [{
|
4425
|
+
type: Directive,
|
4426
|
+
args: [{
|
4427
|
+
selector: '[kendoInlineAIPromptOutputTemplate]',
|
4428
|
+
standalone: true
|
4429
|
+
}]
|
4430
|
+
}], ctorParameters: function () { return [{ type: i0.TemplateRef, decorators: [{
|
4431
|
+
type: Optional
|
4432
|
+
}] }]; } });
|
4433
|
+
|
4434
|
+
/**
|
4435
|
+
* Represents the Kendo UI InlineAIPrompt component for Angular.
|
4436
|
+
*
|
4437
|
+
* @remarks
|
4438
|
+
* Supported children components are: {@link InlineAIPromptCustomMessagesComponent}
|
4439
|
+
*
|
4440
|
+
* @example
|
4441
|
+
* ```html
|
4442
|
+
* <kendo-inlineaiprompt
|
4443
|
+
* placeholder="Enter your prompt..."
|
4444
|
+
* [promptOutput]="promptOutput"
|
4445
|
+
* (promptRequest)="onPromptRequest($event)">
|
4446
|
+
* </kendo-inlineaiprompt>
|
4447
|
+
* ```
|
4448
|
+
*/
|
4449
|
+
class InlineAIPromptComponent {
|
4450
|
+
ngZone;
|
4451
|
+
element;
|
4452
|
+
/**
|
4453
|
+
* Sets the text of the TextArea.
|
4454
|
+
*/
|
4455
|
+
promptValue;
|
4456
|
+
/**
|
4457
|
+
* Sets the placeholder text that appears in the text area when it is empty.
|
4458
|
+
*/
|
4459
|
+
placeholder;
|
4460
|
+
/**
|
4461
|
+
* Sets the output data for the prompt.
|
4462
|
+
* The output displays as a card above the text area.
|
4463
|
+
*/
|
4464
|
+
promptOutput;
|
4465
|
+
/**
|
4466
|
+
* Controls the visibility and settings of the Speech to Text button.
|
4467
|
+
*
|
4468
|
+
* @default true
|
4469
|
+
*/
|
4470
|
+
enableSpeechToText = true;
|
4471
|
+
/**
|
4472
|
+
* Sets the streaming state of the component.
|
4473
|
+
* When set to `true`, the send button displays a generating state and the component emits a `promptRequestCancel` event when you click it.
|
4474
|
+
*
|
4475
|
+
* @default false
|
4476
|
+
*/
|
4477
|
+
streaming = false;
|
4478
|
+
/**
|
4479
|
+
* Sets the width of the component.
|
4480
|
+
* Accepts a number for pixels or a string for other units.
|
4481
|
+
*
|
4482
|
+
* @default 550
|
4483
|
+
*/
|
4484
|
+
width = 550;
|
4485
|
+
/**
|
4486
|
+
* Sets the maximum height of the component.
|
4487
|
+
* Accepts a number for pixels or a string for other units.
|
4488
|
+
*/
|
4489
|
+
maxHeight;
|
4490
|
+
/**
|
4491
|
+
* Sets the output actions that display in the output card.
|
4492
|
+
* The default actions are `copy`, `retry`, and `discard`.
|
4493
|
+
* To customize the appearance and order of the default actions, define them with the same `name`.
|
4494
|
+
*/
|
4495
|
+
outputActions;
|
4496
|
+
/**
|
4497
|
+
* Sets the available prompt commands.
|
4498
|
+
*/
|
4499
|
+
promptCommands;
|
4500
|
+
/**
|
4501
|
+
* Sets the popup settings for the component.
|
4502
|
+
*/
|
4503
|
+
set popupSettings(settings) {
|
4504
|
+
this._popupSettings = { ...defaultPopupSettings, ...settings };
|
4505
|
+
}
|
4506
|
+
get popupSettings() {
|
4507
|
+
return this._popupSettings;
|
4508
|
+
}
|
4509
|
+
/**
|
4510
|
+
* Fires when you click the send button.
|
4511
|
+
*/
|
4512
|
+
promptRequest = new EventEmitter();
|
4513
|
+
/**
|
4514
|
+
* Fires when you click a command.
|
4515
|
+
*/
|
4516
|
+
commandExecute = new EventEmitter();
|
4517
|
+
/**
|
4518
|
+
* Fires when you click an output action button.
|
4519
|
+
*/
|
4520
|
+
outputActionClick = new EventEmitter();
|
4521
|
+
/**
|
4522
|
+
* Fires when you cancel the prompt request by clicking the stop button.
|
4523
|
+
*/
|
4524
|
+
promptRequestCancel = new EventEmitter();
|
4525
|
+
/**
|
4526
|
+
* Fires when the component closes, either by clicking outside the popup or by clicking the Discard action.
|
4527
|
+
*/
|
4528
|
+
close = new EventEmitter();
|
4529
|
+
/**
|
4530
|
+
* Fires when the value of the TextArea changes.
|
4531
|
+
*/
|
4532
|
+
promptValueChange = new EventEmitter();
|
4533
|
+
popupElement;
|
4534
|
+
popupViewContainer;
|
4535
|
+
contentComponent;
|
4536
|
+
outputTemplate;
|
4537
|
+
/**
|
4538
|
+
* @hidden
|
4539
|
+
*/
|
4540
|
+
calculateMeasurement = calculateMeasurement;
|
4541
|
+
_popupSettings = defaultPopupSettings;
|
4542
|
+
subs = new Subscription();
|
4543
|
+
constructor(ngZone, element) {
|
4544
|
+
this.ngZone = ngZone;
|
4545
|
+
this.element = element;
|
4546
|
+
validatePackage(packageMetadata);
|
4547
|
+
}
|
4548
|
+
ngAfterViewInit() {
|
4549
|
+
if (this.contentComponent && this.popupElement) {
|
4550
|
+
this.contentComponent.popupElement = this.popupElement;
|
4551
|
+
}
|
4552
|
+
this.ngZone.onStable.pipe(take(1)).subscribe(() => {
|
4553
|
+
if (this.contentComponent && this.popupViewContainer) {
|
4554
|
+
this.contentComponent.appendTo = this.popupViewContainer;
|
4555
|
+
}
|
4556
|
+
});
|
4557
|
+
}
|
4558
|
+
ngOnDestroy() {
|
4559
|
+
this.subs.unsubscribe();
|
4560
|
+
}
|
4561
|
+
/**
|
4562
|
+
* Focuses the TextArea of the Inline AI Prompt.
|
4563
|
+
*/
|
4564
|
+
focus() {
|
4565
|
+
if (this.contentComponent?.textArea) {
|
4566
|
+
this.contentComponent.textArea.focus();
|
4567
|
+
}
|
4568
|
+
}
|
4569
|
+
/**
|
4570
|
+
* @hidden
|
4571
|
+
*/
|
4572
|
+
onPromptRequest(event) {
|
4573
|
+
this.promptRequest.emit(event);
|
4574
|
+
}
|
4575
|
+
/**
|
4576
|
+
* @hidden
|
4577
|
+
*/
|
4578
|
+
onCommandExecute(event) {
|
4579
|
+
this.commandExecute.emit(event);
|
4580
|
+
}
|
4581
|
+
/**
|
4582
|
+
* @hidden
|
4583
|
+
*/
|
4584
|
+
onOutputActionClick(event) {
|
4585
|
+
this.outputActionClick.emit(event);
|
4586
|
+
}
|
4587
|
+
/**
|
4588
|
+
* @hidden
|
4589
|
+
*/
|
4590
|
+
onPromptRequestCancel() {
|
4591
|
+
this.promptRequestCancel.emit();
|
4592
|
+
}
|
4593
|
+
/**
|
4594
|
+
* @hidden
|
4595
|
+
*/
|
4596
|
+
onClose() {
|
4597
|
+
this.close.emit();
|
4598
|
+
}
|
4599
|
+
/**
|
4600
|
+
* @hidden
|
4601
|
+
*/
|
4602
|
+
onPromptValueChange(value) {
|
4603
|
+
this.promptValueChange.emit(value);
|
4604
|
+
}
|
4605
|
+
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 });
|
4606
|
+
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: [
|
4607
|
+
LocalizationService,
|
4608
|
+
{
|
4609
|
+
provide: L10N_PREFIX,
|
4610
|
+
useValue: 'kendo.inlineaiprompt',
|
4611
|
+
},
|
4612
|
+
], 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: `
|
4613
|
+
<ng-container kendoInlineAIPromptLocalizedMessages
|
4614
|
+
i18n-commandsButtonTitle="kendo.inlineaiprompt.commandsButtonTitle|Sets the Commands button title."
|
4615
|
+
commandsButtonTitle="Command Menu"
|
4616
|
+
i18n-generateButtonTitle="kendo.inlineaiprompt.generateButtonTitle|Sets the Generate button title."
|
4617
|
+
generateButtonTitle="Generate"
|
4618
|
+
i18n-speechToTextButtonTitle="kendo.inlineaiprompt.speechToTextButtonTitle|Sets the Speech to Text button title."
|
4619
|
+
speechToTextButtonTitle="Speech to Text"
|
4620
|
+
>
|
4621
|
+
</ng-container>
|
4622
|
+
<kendo-popup
|
4623
|
+
[style.width]="calculateMeasurement(width)"
|
4624
|
+
[anchor]="popupSettings?.anchor"
|
4625
|
+
[anchorAlign]="popupSettings?.anchorAlign"
|
4626
|
+
[offset]="popupSettings?.offset"
|
4627
|
+
[popupAlign]="popupSettings?.popupAlign"
|
4628
|
+
[animate]="popupSettings?.animate"
|
4629
|
+
[collision]="popupSettings?.collision"
|
4630
|
+
[positionMode]="popupSettings?.positionMode"
|
4631
|
+
[margin]="popupSettings?.margin"
|
4632
|
+
[popupClass]="popupSettings?.popupClass || 'k-prompt-popup'"
|
4633
|
+
>
|
4634
|
+
<kendo-inlineaiprompt-content
|
4635
|
+
[style.width]="width"
|
4636
|
+
[promptValue]="promptValue"
|
4637
|
+
[placeholder]="placeholder"
|
4638
|
+
[promptOutput]="promptOutput"
|
4639
|
+
[enableSpeechToText]="enableSpeechToText"
|
4640
|
+
[streaming]="streaming"
|
4641
|
+
[maxHeight]="maxHeight"
|
4642
|
+
[outputActions]="outputActions"
|
4643
|
+
[promptCommands]="promptCommands"
|
4644
|
+
[outputTemplate]="outputTemplate?.templateRef"
|
4645
|
+
(promptRequest)="onPromptRequest($event)"
|
4646
|
+
(commandExecute)="onCommandExecute($event)"
|
4647
|
+
(outputActionClick)="onOutputActionClick($event)"
|
4648
|
+
(promptRequestCancel)="onPromptRequestCancel()"
|
4649
|
+
(close)="onClose()"
|
4650
|
+
(promptValueChange)="onPromptValueChange($event)"
|
4651
|
+
>
|
4652
|
+
</kendo-inlineaiprompt-content>
|
4653
|
+
</kendo-popup>
|
4654
|
+
`, isInline: true, dependencies: [{ kind: "component", type: i1$2.PopupComponent, selector: "kendo-popup", inputs: ["animate", "anchor", "anchorAlign", "collision", "popupAlign", "copyAnchorStyles", "popupClass", "positionMode", "offset", "margin"], outputs: ["anchorViewportLeave", "close", "open", "positionChange"], exportAs: ["kendo-popup"] }, { kind: "component", type: InlineAIPromptContentComponent, selector: "kendo-inlineaiprompt-content", inputs: ["popupElement", "promptValue", "placeholder", "promptOutput", "enableSpeechToText", "streaming", "width", "maxHeight", "appendTo", "outputActions", "promptCommands", "outputTemplate"], outputs: ["promptRequest", "commandExecute", "outputActionClick", "promptRequestCancel", "close", "promptValueChange"], exportAs: ["kendoInlineAIPromptContent"] }, { kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoInlineAIPromptLocalizedMessages]" }] });
|
4655
|
+
}
|
4656
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptComponent, decorators: [{
|
4657
|
+
type: Component,
|
4658
|
+
args: [{
|
4659
|
+
exportAs: 'kendoInlineAIPrompt',
|
4660
|
+
selector: 'kendo-inlineaiprompt',
|
4661
|
+
providers: [
|
4662
|
+
LocalizationService,
|
4663
|
+
{
|
4664
|
+
provide: L10N_PREFIX,
|
4665
|
+
useValue: 'kendo.inlineaiprompt',
|
4666
|
+
},
|
4667
|
+
],
|
4668
|
+
template: `
|
4669
|
+
<ng-container kendoInlineAIPromptLocalizedMessages
|
4670
|
+
i18n-commandsButtonTitle="kendo.inlineaiprompt.commandsButtonTitle|Sets the Commands button title."
|
4671
|
+
commandsButtonTitle="Command Menu"
|
4672
|
+
i18n-generateButtonTitle="kendo.inlineaiprompt.generateButtonTitle|Sets the Generate button title."
|
4673
|
+
generateButtonTitle="Generate"
|
4674
|
+
i18n-speechToTextButtonTitle="kendo.inlineaiprompt.speechToTextButtonTitle|Sets the Speech to Text button title."
|
4675
|
+
speechToTextButtonTitle="Speech to Text"
|
4676
|
+
>
|
4677
|
+
</ng-container>
|
4678
|
+
<kendo-popup
|
4679
|
+
[style.width]="calculateMeasurement(width)"
|
4680
|
+
[anchor]="popupSettings?.anchor"
|
4681
|
+
[anchorAlign]="popupSettings?.anchorAlign"
|
4682
|
+
[offset]="popupSettings?.offset"
|
4683
|
+
[popupAlign]="popupSettings?.popupAlign"
|
4684
|
+
[animate]="popupSettings?.animate"
|
4685
|
+
[collision]="popupSettings?.collision"
|
4686
|
+
[positionMode]="popupSettings?.positionMode"
|
4687
|
+
[margin]="popupSettings?.margin"
|
4688
|
+
[popupClass]="popupSettings?.popupClass || 'k-prompt-popup'"
|
4689
|
+
>
|
4690
|
+
<kendo-inlineaiprompt-content
|
4691
|
+
[style.width]="width"
|
4692
|
+
[promptValue]="promptValue"
|
4693
|
+
[placeholder]="placeholder"
|
4694
|
+
[promptOutput]="promptOutput"
|
4695
|
+
[enableSpeechToText]="enableSpeechToText"
|
4696
|
+
[streaming]="streaming"
|
4697
|
+
[maxHeight]="maxHeight"
|
4698
|
+
[outputActions]="outputActions"
|
4699
|
+
[promptCommands]="promptCommands"
|
4700
|
+
[outputTemplate]="outputTemplate?.templateRef"
|
4701
|
+
(promptRequest)="onPromptRequest($event)"
|
4702
|
+
(commandExecute)="onCommandExecute($event)"
|
4703
|
+
(outputActionClick)="onOutputActionClick($event)"
|
4704
|
+
(promptRequestCancel)="onPromptRequestCancel()"
|
4705
|
+
(close)="onClose()"
|
4706
|
+
(promptValueChange)="onPromptValueChange($event)"
|
4707
|
+
>
|
4708
|
+
</kendo-inlineaiprompt-content>
|
4709
|
+
</kendo-popup>
|
4710
|
+
`,
|
4711
|
+
standalone: true,
|
4712
|
+
imports: [KENDO_POPUP, InlineAIPromptContentComponent, LocalizedMessagesDirective],
|
4713
|
+
}]
|
4714
|
+
}], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }]; }, propDecorators: { promptValue: [{
|
4715
|
+
type: Input
|
4716
|
+
}], placeholder: [{
|
4717
|
+
type: Input
|
4718
|
+
}], promptOutput: [{
|
4719
|
+
type: Input
|
4720
|
+
}], enableSpeechToText: [{
|
4721
|
+
type: Input
|
4722
|
+
}], streaming: [{
|
4723
|
+
type: Input
|
4724
|
+
}], width: [{
|
4725
|
+
type: Input
|
4726
|
+
}], maxHeight: [{
|
4727
|
+
type: Input
|
4728
|
+
}], outputActions: [{
|
4729
|
+
type: Input
|
4730
|
+
}], promptCommands: [{
|
4731
|
+
type: Input
|
4732
|
+
}], popupSettings: [{
|
4733
|
+
type: Input
|
4734
|
+
}], promptRequest: [{
|
4735
|
+
type: Output
|
4736
|
+
}], commandExecute: [{
|
4737
|
+
type: Output
|
4738
|
+
}], outputActionClick: [{
|
4739
|
+
type: Output
|
4740
|
+
}], promptRequestCancel: [{
|
4741
|
+
type: Output
|
4742
|
+
}], close: [{
|
4743
|
+
type: Output
|
4744
|
+
}], promptValueChange: [{
|
4745
|
+
type: Output
|
4746
|
+
}], popupElement: [{
|
4747
|
+
type: ViewChild,
|
4748
|
+
args: [PopupComponent, { read: ElementRef }]
|
4749
|
+
}], popupViewContainer: [{
|
4750
|
+
type: ViewChild,
|
4751
|
+
args: [PopupComponent, { read: ViewContainerRef }]
|
4752
|
+
}], contentComponent: [{
|
4753
|
+
type: ViewChild,
|
4754
|
+
args: [InlineAIPromptContentComponent]
|
4755
|
+
}], outputTemplate: [{
|
4756
|
+
type: ContentChild,
|
4757
|
+
args: [InlineAIPromptOutputTemplateDirective]
|
4758
|
+
}] } });
|
4759
|
+
|
4760
|
+
/**
|
4761
|
+
* Represents the custom messages component of the Inline AI Prompt.
|
4762
|
+
*
|
4763
|
+
* Use this component to override default messages for the Inline AI Prompt.
|
4764
|
+
*
|
4765
|
+
* @example
|
4766
|
+
* ```html
|
4767
|
+
* <kendo-inlineaiprompt-messages
|
4768
|
+
* commandsButtonTitle="Commands Menu"
|
4769
|
+
* generateButtonTitle="Generate">
|
4770
|
+
* </kendo-inlineaiprompt-messages>
|
4771
|
+
* ```
|
4772
|
+
*/
|
4773
|
+
class InlineAIPromptCustomMessagesComponent extends Messages {
|
4774
|
+
service;
|
4775
|
+
constructor(service) {
|
4776
|
+
super();
|
4777
|
+
this.service = service;
|
4778
|
+
}
|
4779
|
+
get override() {
|
4780
|
+
return true;
|
4781
|
+
}
|
4782
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptCustomMessagesComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
4783
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: InlineAIPromptCustomMessagesComponent, isStandalone: true, selector: "kendo-inlineaiprompt-messages", providers: [
|
4784
|
+
{
|
4785
|
+
provide: Messages,
|
4786
|
+
useExisting: forwardRef(() => InlineAIPromptCustomMessagesComponent)
|
4787
|
+
}
|
4788
|
+
], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
|
4789
|
+
}
|
4790
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptCustomMessagesComponent, decorators: [{
|
4791
|
+
type: Component,
|
4792
|
+
args: [{
|
4793
|
+
providers: [
|
4794
|
+
{
|
4795
|
+
provide: Messages,
|
4796
|
+
useExisting: forwardRef(() => InlineAIPromptCustomMessagesComponent)
|
4797
|
+
}
|
4798
|
+
],
|
4799
|
+
selector: 'kendo-inlineaiprompt-messages',
|
4800
|
+
template: ``,
|
4801
|
+
standalone: true
|
4802
|
+
}]
|
4803
|
+
}], ctorParameters: function () { return [{ type: i1$1.LocalizationService }]; } });
|
4804
|
+
|
4805
|
+
/**
|
4806
|
+
* Utility array that contains all AIPrompt related components and directives.
|
4807
|
+
*
|
4808
|
+
* @example
|
4809
|
+
* ```ts
|
4810
|
+
* import { Component } from '@angular/core';
|
4811
|
+
* import { KENDO_AIPROMPT } from '@progress/kendo-angular-conversational-ui';
|
4812
|
+
*
|
4813
|
+
* @Component({
|
4814
|
+
* standalone: true,
|
4815
|
+
* imports: [KENDO_AIPROMPT],
|
4816
|
+
* selector: 'my-app',
|
4817
|
+
* template: `<kendo-aiprompt></kendo-aiprompt>`
|
4818
|
+
* })
|
4819
|
+
* export class AppComponent {}
|
4820
|
+
* ```
|
4821
|
+
*/
|
4822
|
+
const KENDO_AIPROMPT = [
|
4823
|
+
AIPromptComponent,
|
4824
|
+
PromptViewComponent,
|
4825
|
+
OutputViewComponent,
|
4826
|
+
CommandViewComponent,
|
4827
|
+
CustomViewComponent,
|
4828
|
+
AIPromptCustomMessagesComponent,
|
4829
|
+
AIPromptToolbarActionsDirective,
|
4830
|
+
AIPromptToolbarFocusableDirective,
|
4831
|
+
AIPromptOutputTemplateDirective,
|
4832
|
+
AIPromptOutputBodyTemplateDirective,
|
4833
|
+
];
|
4834
|
+
/**
|
4835
|
+
* Utility array that contains all Chat related components and directives.
|
4836
|
+
*
|
4837
|
+
* @example
|
4838
|
+
* ```ts
|
4839
|
+
* import { Component } from '@angular/core';
|
4840
|
+
* import { KENDO_CHAT } from '@progress/kendo-angular-conversational-ui';
|
4841
|
+
*
|
4842
|
+
* @Component({
|
4843
|
+
* standalone: true,
|
4844
|
+
* imports: [KENDO_CHAT],
|
4845
|
+
* selector: 'my-app',
|
4846
|
+
* template: `<kendo-chat></kendo-chat>`
|
4847
|
+
* })
|
4848
|
+
* export class AppComponent {}
|
4849
|
+
* ```
|
4850
|
+
*/
|
4851
|
+
const KENDO_CHAT = [
|
4852
|
+
ChatComponent,
|
4853
|
+
CustomMessagesComponent,
|
4854
|
+
AttachmentTemplateDirective,
|
3437
4855
|
MessageTemplateDirective,
|
3438
4856
|
HeroCardComponent,
|
3439
4857
|
ChatMessageBoxTemplateDirective
|
3440
4858
|
];
|
4859
|
+
const KENDO_INLINEAIPROMPT = [
|
4860
|
+
InlineAIPromptComponent,
|
4861
|
+
InlineAIPromptOutputTemplateDirective,
|
4862
|
+
InlineAIPromptCustomMessagesComponent
|
4863
|
+
];
|
3441
4864
|
/**
|
3442
4865
|
* Utility array that contains all `@progress/kendo-angular-conversational-ui` related components and directives.
|
3443
4866
|
*
|
@@ -3460,7 +4883,8 @@ const KENDO_CHAT = [
|
|
3460
4883
|
*/
|
3461
4884
|
const KENDO_CONVERSATIONALUI = [
|
3462
4885
|
...KENDO_AIPROMPT,
|
3463
|
-
...KENDO_CHAT
|
4886
|
+
...KENDO_CHAT,
|
4887
|
+
...KENDO_INLINEAIPROMPT
|
3464
4888
|
];
|
3465
4889
|
|
3466
4890
|
// IMPORTANT: NgModule export kept for backwards compatibility
|
@@ -3484,7 +4908,7 @@ const KENDO_CONVERSATIONALUI = [
|
|
3484
4908
|
*/
|
3485
4909
|
class AIPromptModule {
|
3486
4910
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
3487
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AIPromptModule, imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective], exports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective] });
|
4911
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: AIPromptModule, imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective], exports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective] });
|
3488
4912
|
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent] });
|
3489
4913
|
}
|
3490
4914
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AIPromptModule, decorators: [{
|
@@ -3553,8 +4977,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
3553
4977
|
*/
|
3554
4978
|
class ConversationalUIModule {
|
3555
4979
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConversationalUIModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
3556
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ConversationalUIModule, imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective], exports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective] });
|
3557
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConversationalUIModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, ChatComponent, HeroCardComponent] });
|
4980
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ConversationalUIModule, imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective, ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective, InlineAIPromptComponent, InlineAIPromptOutputTemplateDirective, InlineAIPromptCustomMessagesComponent], exports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, CustomViewComponent, AIPromptCustomMessagesComponent, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, AIPromptOutputTemplateDirective, AIPromptOutputBodyTemplateDirective, ChatComponent, CustomMessagesComponent, AttachmentTemplateDirective, MessageTemplateDirective, HeroCardComponent, ChatMessageBoxTemplateDirective, InlineAIPromptComponent, InlineAIPromptOutputTemplateDirective, InlineAIPromptCustomMessagesComponent] });
|
4981
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConversationalUIModule, providers: [IconsService, PopupService, ResizeBatchService, DialogContainerService, DialogService, WindowService, WindowContainerService], imports: [AIPromptComponent, PromptViewComponent, OutputViewComponent, CommandViewComponent, ChatComponent, HeroCardComponent, InlineAIPromptComponent] });
|
3558
4982
|
}
|
3559
4983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ConversationalUIModule, decorators: [{
|
3560
4984
|
type: NgModule,
|
@@ -3565,9 +4989,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
3565
4989
|
}]
|
3566
4990
|
}] });
|
3567
4991
|
|
4992
|
+
/**
|
4993
|
+
* Provides a service for opening Inline AI Prompt components dynamically.
|
4994
|
+
*
|
4995
|
+
* @example
|
4996
|
+
* ```ts
|
4997
|
+
* import { InlineAIPromptService } from '@progress/kendo-angular-conversational-ui';
|
4998
|
+
*
|
4999
|
+
* constructor(private inlineAIPromptService: InlineAIPromptService) {}
|
5000
|
+
*
|
5001
|
+
* openPrompt(anchor: ElementRef) {
|
5002
|
+
* const promptRef = this.inlineAIPromptService.open({
|
5003
|
+
* anchor: anchor,
|
5004
|
+
* placeholder: 'Enter your prompt...'
|
5005
|
+
* });
|
5006
|
+
* }
|
5007
|
+
* ```
|
5008
|
+
*/
|
5009
|
+
class InlineAIPromptService {
|
5010
|
+
popupService;
|
5011
|
+
constructor(popupService) {
|
5012
|
+
this.popupService = popupService;
|
5013
|
+
}
|
5014
|
+
/**
|
5015
|
+
* Opens an Inline AI Prompt component in a popup. The popup appears near the specified anchor element or at the provided offset coordinates.
|
5016
|
+
*
|
5017
|
+
* @param {InlineAIPromptSettings} options - The options for the InlineAIPromptComponent.
|
5018
|
+
* @returns {PopupRef} A reference to the popup.
|
5019
|
+
*/
|
5020
|
+
open(options) {
|
5021
|
+
const popupSettings = { ...defaultPopupSettings, ...options?.popupSettings };
|
5022
|
+
const popupRef = this.popupService.open({
|
5023
|
+
...(options?.popupSettings?.anchor && { anchor: options.popupSettings.anchor }),
|
5024
|
+
popupClass: 'k-prompt-popup',
|
5025
|
+
...popupSettings,
|
5026
|
+
content: InlineAIPromptContentComponent,
|
5027
|
+
});
|
5028
|
+
const promptInstance = popupRef.content?.instance;
|
5029
|
+
if (promptInstance) {
|
5030
|
+
const popupViewContainer = popupRef.popup.injector.get(ViewContainerRef);
|
5031
|
+
promptInstance.appendTo = popupViewContainer;
|
5032
|
+
promptInstance.popupElement = popupRef.popupElement;
|
5033
|
+
this.projectComponentInputs(promptInstance, options);
|
5034
|
+
if (promptInstance.close) {
|
5035
|
+
promptInstance.close.subscribe(() => {
|
5036
|
+
popupRef.close();
|
5037
|
+
});
|
5038
|
+
}
|
5039
|
+
if (popupRef.content.changeDetectorRef) {
|
5040
|
+
popupRef.content.changeDetectorRef.detectChanges();
|
5041
|
+
}
|
5042
|
+
}
|
5043
|
+
return popupRef;
|
5044
|
+
}
|
5045
|
+
/**
|
5046
|
+
* Projects the input options onto the component instance.
|
5047
|
+
*/
|
5048
|
+
projectComponentInputs(component, options) {
|
5049
|
+
if (!options) {
|
5050
|
+
return component;
|
5051
|
+
}
|
5052
|
+
Object.getOwnPropertyNames(options)
|
5053
|
+
.forEach((prop) => {
|
5054
|
+
component[prop] = options[prop];
|
5055
|
+
});
|
5056
|
+
return component;
|
5057
|
+
}
|
5058
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptService, deps: [{ token: i1$2.PopupService }], target: i0.ɵɵFactoryTarget.Injectable });
|
5059
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptService, providedIn: 'root' });
|
5060
|
+
}
|
5061
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InlineAIPromptService, decorators: [{
|
5062
|
+
type: Injectable,
|
5063
|
+
args: [{
|
5064
|
+
providedIn: 'root'
|
5065
|
+
}]
|
5066
|
+
}], ctorParameters: function () { return [{ type: i1$2.PopupService }]; } });
|
5067
|
+
|
5068
|
+
/**
|
5069
|
+
* Defines the settings for opening an Inline AI Prompt through the `InlineAIPromptService`.
|
5070
|
+
*/
|
5071
|
+
class InlineAIPromptSettings {
|
5072
|
+
/**
|
5073
|
+
* Specifies the settings for the Inline AI Prompt Popup.
|
5074
|
+
*/
|
5075
|
+
popupSettings;
|
5076
|
+
/**
|
5077
|
+
* Sets the width of the component.
|
5078
|
+
* Accepts a number for pixels or a string for other units, for example, `50%`.
|
5079
|
+
*/
|
5080
|
+
width;
|
5081
|
+
/**
|
5082
|
+
* Sets the maximum height of the component.
|
5083
|
+
* Accepts a number for pixels or a string for other units, for example, `50%`.
|
5084
|
+
*/
|
5085
|
+
maxHeight;
|
5086
|
+
/**
|
5087
|
+
* Sets the value of the Inline AI Prompt TextArea.
|
5088
|
+
*/
|
5089
|
+
promptValue;
|
5090
|
+
/**
|
5091
|
+
* Sets the placeholder of the Inline AI Prompt TextArea.
|
5092
|
+
*/
|
5093
|
+
placeholder;
|
5094
|
+
/**
|
5095
|
+
* Sets the action buttons for the output card.
|
5096
|
+
*/
|
5097
|
+
outputActions;
|
5098
|
+
/**
|
5099
|
+
* Sets the commands for the Inline AI Prompt TextArea prefix.
|
5100
|
+
*/
|
5101
|
+
promptCommands;
|
5102
|
+
/**
|
5103
|
+
* Sets the prompt output to display.
|
5104
|
+
*/
|
5105
|
+
promptOutput;
|
5106
|
+
/**
|
5107
|
+
* Sets the visibility and configuration of the Speech to Text button.
|
5108
|
+
*/
|
5109
|
+
enableSpeechToTextButton;
|
5110
|
+
/**
|
5111
|
+
* Sets the template for the output content. If not provided, the default output template is used.
|
5112
|
+
*/
|
5113
|
+
outputTemplate;
|
5114
|
+
/**
|
5115
|
+
* Sets whether the send button turns into a stop button.
|
5116
|
+
*/
|
5117
|
+
streaming;
|
5118
|
+
/**
|
5119
|
+
* Sets the titles of the buttons shown in the Inline AI Prompt. Use for localization.
|
5120
|
+
*/
|
5121
|
+
messages;
|
5122
|
+
}
|
5123
|
+
|
3568
5124
|
/**
|
3569
5125
|
* Generated bundle index. Do not edit.
|
3570
5126
|
*/
|
3571
5127
|
|
3572
|
-
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 };
|
5128
|
+
export { AIPromptComponent, AIPromptCustomMessagesComponent, AIPromptModule, AIPromptOutputBodyTemplateDirective, AIPromptOutputTemplateDirective, AIPromptToolbarActionsDirective, AIPromptToolbarFocusableDirective, AttachmentTemplateDirective, ChatComponent, ChatMessageBoxTemplateDirective, ChatModule, CommandViewComponent, ConversationalUIModule, CustomMessagesComponent, CustomViewComponent, ExecuteActionEvent, HeroCardComponent, InlineAIPromptComponent, InlineAIPromptCustomMessagesComponent, InlineAIPromptOutputTemplateDirective, InlineAIPromptService, InlineAIPromptSettings, KENDO_AIPROMPT, KENDO_CHAT, KENDO_CONVERSATIONALUI, KENDO_INLINEAIPROMPT, MessageTemplateDirective, OutputViewComponent, PromptViewComponent, SendMessageEvent };
|
3573
5129
|
|