@progress/kendo-angular-conversational-ui 21.1.1-develop.1 → 21.2.0-develop.1
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/chat/message-list.component.d.ts +2 -2
- package/esm2022/ai-prompt/aiprompt.component.mjs +155 -139
- package/esm2022/ai-prompt/common/output-card.component.mjs +81 -83
- package/esm2022/ai-prompt/views/output-view.component.mjs +27 -29
- package/esm2022/ai-prompt/views/prompt-view.component.mjs +150 -135
- package/esm2022/chat/attachment.component.mjs +53 -37
- package/esm2022/chat/cards/hero-card.component.mjs +48 -35
- package/esm2022/chat/chat-file.component.mjs +32 -29
- package/esm2022/chat/chat.component.mjs +251 -241
- package/esm2022/chat/message-attachments.component.mjs +58 -53
- package/esm2022/chat/message-box.component.mjs +203 -183
- package/esm2022/chat/message-list.component.mjs +247 -207
- package/esm2022/chat/message-reference-content.component.mjs +30 -19
- package/esm2022/chat/message.component.mjs +307 -279
- package/esm2022/chat/suggested-actions.component.mjs +139 -131
- package/esm2022/inline-ai-prompt/inlineaiprompt-content.component.mjs +205 -179
- package/esm2022/package-metadata.mjs +2 -2
- package/fesm2022/progress-kendo-angular-conversational-ui.mjs +1979 -1767
- package/package.json +14 -14
- package/schematics/ngAdd/index.js +4 -0
|
@@ -59,14 +59,14 @@ export declare class MessageListComponent implements OnInit, AfterViewInit, OnDe
|
|
|
59
59
|
ngOnDestroy(): void;
|
|
60
60
|
onResize(): void;
|
|
61
61
|
onClick(message: any, event: any): void;
|
|
62
|
-
showGroupAuthor(group: any): boolean;
|
|
63
|
-
showGroupAvatar(group: any): boolean;
|
|
64
62
|
onContextMenuClick(message: Message, event: MouseEvent, messageElement?: any): void;
|
|
65
63
|
formatTimeStamp(date: any): string;
|
|
66
64
|
calculateMessageWidthMode(message: any): boolean;
|
|
67
65
|
onKeydown(e: any): void;
|
|
68
66
|
onBlur(args: any): void;
|
|
69
67
|
isOwnMessage(msg: Message): boolean;
|
|
68
|
+
showGroupAuthor(group: any): boolean;
|
|
69
|
+
showGroupAvatar(group: any): boolean;
|
|
70
70
|
dispatchAction(action: Action, message: Message): void;
|
|
71
71
|
trackGroup(_index: number, item: ViewItem): any;
|
|
72
72
|
select(item: ChatItem, event?: Event): void;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, Input, NgZone, Output, QueryList, Renderer2, ViewChild } from "@angular/core";
|
|
6
|
-
import {
|
|
6
|
+
import { NgTemplateOutlet } from "@angular/common";
|
|
7
7
|
import { Subscription } from "rxjs";
|
|
8
8
|
import { sparklesIcon, commentIcon, stopSmIcon } from "@progress/kendo-svg-icons";
|
|
9
9
|
import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
|
|
@@ -300,7 +300,7 @@ export class AIPromptComponent {
|
|
|
300
300
|
this.promptRequest.emit(eventArgs);
|
|
301
301
|
}
|
|
302
302
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AIPromptComponent, deps: [{ token: i1.LocalizationService }, { token: i2.AIPromptService }, { token: i3.ToolbarNavigationService }, { token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
303
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
303
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: [
|
|
304
304
|
LocalizationService,
|
|
305
305
|
AIPromptService,
|
|
306
306
|
ToolbarNavigationService,
|
|
@@ -310,82 +310,90 @@ export class AIPromptComponent {
|
|
|
310
310
|
}
|
|
311
311
|
], 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: `
|
|
312
312
|
<ng-container kendoAIPromptLocalizedMessages
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
313
|
+
i18n-promptView="kendo.aiprompt.promptView|The Toolbar button text for the Prompt view."
|
|
314
|
+
promptView="Ask AI"
|
|
315
|
+
i18n-outputView="kendo.aiprompt.outputView|The Toolbar button text for the Output view."
|
|
316
|
+
outputView="Output"
|
|
317
|
+
i18n-generateOutput="kendo.aiprompt.generateOutput|The text for the Generate button in the Prompt view."
|
|
318
|
+
generateOutput="Generate"
|
|
319
|
+
i18n-promptPlaceholder="kendo.aiprompt.promptPlaceholder|The placeholder text for the Prompt View text area."
|
|
320
|
+
promptPlaceholder="Ask or generate content with AI"
|
|
321
|
+
i18n-copyOutput="kendo.aiprompt.copyOutput|The Copy button text in each Output view card."
|
|
322
|
+
copyOutput="Copy"
|
|
323
|
+
i18n-retryGeneration="kendo.aiprompt.retryGeneration|The Retry button text in each Output view card."
|
|
324
|
+
retryGeneration="Retry"
|
|
325
|
+
i18n-outputTitle="kendo.aiprompt.outputTitle|The title of each Output view card."
|
|
326
|
+
outputTitle="Generated with AI"
|
|
327
|
+
i18n-outputRetryTitle="kendo.aiprompt.outputRetryTitle|The title of each Output view retry card."
|
|
328
|
+
outputRetryTitle="Generated with AI"
|
|
329
|
+
i18n-promptSuggestions="kendo.aiprompt.promptSuggestions|The title of the Prompt suggestions button."
|
|
330
|
+
promptSuggestions="Prompt suggestions"
|
|
331
|
+
i18n-speechToTextButton="kendo.aiprompt.speechToTextButton|The aria-label for the Speech to Text button."
|
|
332
|
+
speechToTextButton="Voice input">
|
|
333
333
|
</ng-container>
|
|
334
334
|
<div class="k-prompt-header">
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
335
|
+
<div class="k-toolbar-flat k-toolbar k-toolbar-md"
|
|
336
|
+
role="toolbar">
|
|
337
|
+
@for (view of viewsArray; track view; let idx = $index) {
|
|
338
|
+
<button
|
|
339
|
+
kendoButton
|
|
340
|
+
kendoAIPromptToolbarFocusable
|
|
341
|
+
type="button"
|
|
342
|
+
fillMode="flat"
|
|
343
|
+
rounded="full"
|
|
344
|
+
themeColor="primary"
|
|
345
|
+
[svgIcon]="view.svgIcon"
|
|
346
|
+
[icon]="view.icon"
|
|
347
|
+
[selected]="idx === activeView"
|
|
348
|
+
(click)="viewChange(idx)">
|
|
349
|
+
{{view.buttonText}}
|
|
350
|
+
</button>
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
@if (toolbarActionsTemplate) {
|
|
354
|
+
<ng-template
|
|
355
|
+
[ngTemplateOutlet]="toolbarActionsTemplate?.templateRef">
|
|
356
|
+
</ng-template>
|
|
357
|
+
}
|
|
358
|
+
</div>
|
|
355
359
|
</div>
|
|
356
360
|
<div class="k-prompt-content">
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
361
|
+
@if (streaming && selectedView?.viewType === 'output') {
|
|
362
|
+
<kendo-floatingactionbutton #fabButton
|
|
363
|
+
class="k-prompt-stop-fab"
|
|
364
|
+
buttonClass="k-generating k-active"
|
|
365
|
+
[positionMode]="fabPositionMode"
|
|
366
|
+
[align]="fabAlignment"
|
|
367
|
+
[svgIcon]="fabStopGenerationSVGIcon"
|
|
368
|
+
icon="stop"
|
|
369
|
+
(click)="promptRequestCancel.emit()"
|
|
370
|
+
>
|
|
366
371
|
</kendo-floatingactionbutton>
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
</
|
|
372
|
+
}
|
|
373
|
+
<div class="k-prompt-view">
|
|
374
|
+
<ng-container *ngTemplateOutlet="viewTemplate">
|
|
375
|
+
</ng-container>
|
|
376
|
+
</div>
|
|
371
377
|
</div>
|
|
372
|
-
|
|
378
|
+
@if (selectedView?.viewType === 'prompt') {
|
|
379
|
+
<div class="k-prompt-footer">
|
|
373
380
|
<div class="k-actions k-actions-start k-actions-horizontal k-prompt-actions">
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
381
|
+
<button
|
|
382
|
+
kendoButton
|
|
383
|
+
type="button"
|
|
384
|
+
themeColor="primary"
|
|
385
|
+
rounded="full"
|
|
386
|
+
[attr.title]="messageFor('generateOutput')"
|
|
387
|
+
[attr.aria-label]="messageFor('generateOutput')"
|
|
388
|
+
[attr.aria-disabled]="disabledGenerateButton"
|
|
389
|
+
[svgIcon]="generateButtonSVGIcon"
|
|
390
|
+
[icon]="generateButtonIcon"
|
|
391
|
+
[disabled]="disabledGenerateButton"
|
|
392
|
+
(click)="handleGenerateOutput()">{{messageFor('generateOutput')}}</button>
|
|
386
393
|
</div>
|
|
387
|
-
|
|
388
|
-
|
|
394
|
+
</div>
|
|
395
|
+
}
|
|
396
|
+
`, isInline: true, dependencies: [{ kind: "directive", type: LocalizedMessagesDirective, selector: "[kendoAIPromptLocalizedMessages]" }, { 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: 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"] }] });
|
|
389
397
|
}
|
|
390
398
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AIPromptComponent, decorators: [{
|
|
391
399
|
type: Component,
|
|
@@ -403,84 +411,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
403
411
|
],
|
|
404
412
|
template: `
|
|
405
413
|
<ng-container kendoAIPromptLocalizedMessages
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
414
|
+
i18n-promptView="kendo.aiprompt.promptView|The Toolbar button text for the Prompt view."
|
|
415
|
+
promptView="Ask AI"
|
|
416
|
+
i18n-outputView="kendo.aiprompt.outputView|The Toolbar button text for the Output view."
|
|
417
|
+
outputView="Output"
|
|
418
|
+
i18n-generateOutput="kendo.aiprompt.generateOutput|The text for the Generate button in the Prompt view."
|
|
419
|
+
generateOutput="Generate"
|
|
420
|
+
i18n-promptPlaceholder="kendo.aiprompt.promptPlaceholder|The placeholder text for the Prompt View text area."
|
|
421
|
+
promptPlaceholder="Ask or generate content with AI"
|
|
422
|
+
i18n-copyOutput="kendo.aiprompt.copyOutput|The Copy button text in each Output view card."
|
|
423
|
+
copyOutput="Copy"
|
|
424
|
+
i18n-retryGeneration="kendo.aiprompt.retryGeneration|The Retry button text in each Output view card."
|
|
425
|
+
retryGeneration="Retry"
|
|
426
|
+
i18n-outputTitle="kendo.aiprompt.outputTitle|The title of each Output view card."
|
|
427
|
+
outputTitle="Generated with AI"
|
|
428
|
+
i18n-outputRetryTitle="kendo.aiprompt.outputRetryTitle|The title of each Output view retry card."
|
|
429
|
+
outputRetryTitle="Generated with AI"
|
|
430
|
+
i18n-promptSuggestions="kendo.aiprompt.promptSuggestions|The title of the Prompt suggestions button."
|
|
431
|
+
promptSuggestions="Prompt suggestions"
|
|
432
|
+
i18n-speechToTextButton="kendo.aiprompt.speechToTextButton|The aria-label for the Speech to Text button."
|
|
433
|
+
speechToTextButton="Voice input">
|
|
426
434
|
</ng-container>
|
|
427
435
|
<div class="k-prompt-header">
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
436
|
+
<div class="k-toolbar-flat k-toolbar k-toolbar-md"
|
|
437
|
+
role="toolbar">
|
|
438
|
+
@for (view of viewsArray; track view; let idx = $index) {
|
|
439
|
+
<button
|
|
440
|
+
kendoButton
|
|
441
|
+
kendoAIPromptToolbarFocusable
|
|
442
|
+
type="button"
|
|
443
|
+
fillMode="flat"
|
|
444
|
+
rounded="full"
|
|
445
|
+
themeColor="primary"
|
|
446
|
+
[svgIcon]="view.svgIcon"
|
|
447
|
+
[icon]="view.icon"
|
|
448
|
+
[selected]="idx === activeView"
|
|
449
|
+
(click)="viewChange(idx)">
|
|
450
|
+
{{view.buttonText}}
|
|
451
|
+
</button>
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
@if (toolbarActionsTemplate) {
|
|
455
|
+
<ng-template
|
|
456
|
+
[ngTemplateOutlet]="toolbarActionsTemplate?.templateRef">
|
|
457
|
+
</ng-template>
|
|
458
|
+
}
|
|
459
|
+
</div>
|
|
448
460
|
</div>
|
|
449
461
|
<div class="k-prompt-content">
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
462
|
+
@if (streaming && selectedView?.viewType === 'output') {
|
|
463
|
+
<kendo-floatingactionbutton #fabButton
|
|
464
|
+
class="k-prompt-stop-fab"
|
|
465
|
+
buttonClass="k-generating k-active"
|
|
466
|
+
[positionMode]="fabPositionMode"
|
|
467
|
+
[align]="fabAlignment"
|
|
468
|
+
[svgIcon]="fabStopGenerationSVGIcon"
|
|
469
|
+
icon="stop"
|
|
470
|
+
(click)="promptRequestCancel.emit()"
|
|
471
|
+
>
|
|
459
472
|
</kendo-floatingactionbutton>
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
</
|
|
473
|
+
}
|
|
474
|
+
<div class="k-prompt-view">
|
|
475
|
+
<ng-container *ngTemplateOutlet="viewTemplate">
|
|
476
|
+
</ng-container>
|
|
477
|
+
</div>
|
|
464
478
|
</div>
|
|
465
|
-
|
|
479
|
+
@if (selectedView?.viewType === 'prompt') {
|
|
480
|
+
<div class="k-prompt-footer">
|
|
466
481
|
<div class="k-actions k-actions-start k-actions-horizontal k-prompt-actions">
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
482
|
+
<button
|
|
483
|
+
kendoButton
|
|
484
|
+
type="button"
|
|
485
|
+
themeColor="primary"
|
|
486
|
+
rounded="full"
|
|
487
|
+
[attr.title]="messageFor('generateOutput')"
|
|
488
|
+
[attr.aria-label]="messageFor('generateOutput')"
|
|
489
|
+
[attr.aria-disabled]="disabledGenerateButton"
|
|
490
|
+
[svgIcon]="generateButtonSVGIcon"
|
|
491
|
+
[icon]="generateButtonIcon"
|
|
492
|
+
[disabled]="disabledGenerateButton"
|
|
493
|
+
(click)="handleGenerateOutput()">{{messageFor('generateOutput')}}</button>
|
|
479
494
|
</div>
|
|
480
|
-
|
|
481
|
-
|
|
495
|
+
</div>
|
|
496
|
+
}
|
|
497
|
+
`,
|
|
482
498
|
standalone: true,
|
|
483
|
-
imports: [LocalizedMessagesDirective,
|
|
499
|
+
imports: [LocalizedMessagesDirective, ButtonComponent, AIPromptToolbarFocusableDirective, NgTemplateOutlet, FloatingActionButtonComponent]
|
|
484
500
|
}]
|
|
485
501
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.AIPromptService }, { type: i3.ToolbarNavigationService }, { type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { hostClasses: [{
|
|
486
502
|
type: HostBinding,
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
* Licensed under commercial license. See LICENSE.md in the project root for more information
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { Component, HostBinding, Input } from '@angular/core';
|
|
6
|
-
import {
|
|
6
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
7
7
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
8
8
|
import { guid, isPresent } from '@progress/kendo-angular-common';
|
|
9
9
|
import { ButtonComponent } from "@progress/kendo-angular-buttons";
|
|
@@ -104,56 +104,55 @@ export class AIPromptOutputCardComponent {
|
|
|
104
104
|
return this.service.outputBodyTemplate?.templateRef;
|
|
105
105
|
}
|
|
106
106
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AIPromptOutputCardComponent, deps: [{ token: i1.LocalizationService }, { token: i2.AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
|
|
107
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
107
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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: `
|
|
108
108
|
<div class="k-card-header">
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
109
|
+
<div
|
|
110
|
+
class="k-card-title"
|
|
111
|
+
[attr.id]="titleId">{{outputTitle}}
|
|
112
|
+
</div>
|
|
113
|
+
<div class="k-card-subtitle">{{promptOutput.prompt}}</div>
|
|
114
114
|
</div>
|
|
115
115
|
<div class="k-card-body">
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
</ng-container>
|
|
116
|
+
@if (customBodyTemplate) {
|
|
117
|
+
<ng-container *ngTemplateOutlet="customBodyTemplate; context: { $implicit: promptOutput }">
|
|
119
118
|
</ng-container>
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
119
|
+
} @else {
|
|
120
|
+
<p>{{promptOutput.output}}</p>
|
|
121
|
+
}
|
|
123
122
|
</div>
|
|
124
123
|
<div class="k-actions k-actions-start k-actions-horizontal k-card-actions">
|
|
124
|
+
<button kendoButton
|
|
125
|
+
fillMode="flat"
|
|
126
|
+
themeColor="primary"
|
|
127
|
+
rounded="full"
|
|
128
|
+
icon="copy"
|
|
129
|
+
[svgIcon]="copyIcon"
|
|
130
|
+
(click)="handleCopy()"
|
|
131
|
+
>{{messageFor('copyOutput')}}</button>
|
|
132
|
+
<button kendoButton
|
|
133
|
+
fillMode="flat"
|
|
134
|
+
rounded="full"
|
|
135
|
+
icon="arrow-rotate-cw"
|
|
136
|
+
[svgIcon]="retryIcon"
|
|
137
|
+
(click)="handleRetry()"
|
|
138
|
+
>{{messageFor('retryGeneration')}}</button>
|
|
139
|
+
@if (showRating) {
|
|
140
|
+
<span class="k-spacer"></span>
|
|
125
141
|
<button kendoButton
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
(click)="handleCopy()"
|
|
132
|
-
>{{messageFor('copyOutput')}}</button>
|
|
142
|
+
fillMode="flat"
|
|
143
|
+
icon="thumb-up-outline"
|
|
144
|
+
[svgIcon]="positiveRatingIcon"
|
|
145
|
+
(click)="handleRating('positive')">
|
|
146
|
+
</button>
|
|
133
147
|
<button kendoButton
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
<ng-container *ngIf="showRating">
|
|
141
|
-
<span class="k-spacer"></span>
|
|
142
|
-
<button kendoButton
|
|
143
|
-
fillMode="flat"
|
|
144
|
-
icon="thumb-up-outline"
|
|
145
|
-
[svgIcon]="positiveRatingIcon"
|
|
146
|
-
(click)="handleRating('positive')">
|
|
147
|
-
</button>
|
|
148
|
-
<button kendoButton
|
|
149
|
-
fillMode="flat"
|
|
150
|
-
icon="thumb-down-outline"
|
|
151
|
-
[svgIcon]="negativeRatingIcon"
|
|
152
|
-
(click)="handleRating('negative')">
|
|
153
|
-
</button>
|
|
154
|
-
</ng-container>
|
|
148
|
+
fillMode="flat"
|
|
149
|
+
icon="thumb-down-outline"
|
|
150
|
+
[svgIcon]="negativeRatingIcon"
|
|
151
|
+
(click)="handleRating('negative')">
|
|
152
|
+
</button>
|
|
153
|
+
}
|
|
155
154
|
</div>
|
|
156
|
-
|
|
155
|
+
`, 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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
157
156
|
}
|
|
158
157
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AIPromptOutputCardComponent, decorators: [{
|
|
159
158
|
type: Component,
|
|
@@ -161,56 +160,55 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
161
160
|
selector: '[kendoAIPromptOutputCard]',
|
|
162
161
|
template: `
|
|
163
162
|
<div class="k-card-header">
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
163
|
+
<div
|
|
164
|
+
class="k-card-title"
|
|
165
|
+
[attr.id]="titleId">{{outputTitle}}
|
|
166
|
+
</div>
|
|
167
|
+
<div class="k-card-subtitle">{{promptOutput.prompt}}</div>
|
|
169
168
|
</div>
|
|
170
169
|
<div class="k-card-body">
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
</ng-container>
|
|
170
|
+
@if (customBodyTemplate) {
|
|
171
|
+
<ng-container *ngTemplateOutlet="customBodyTemplate; context: { $implicit: promptOutput }">
|
|
174
172
|
</ng-container>
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
173
|
+
} @else {
|
|
174
|
+
<p>{{promptOutput.output}}</p>
|
|
175
|
+
}
|
|
178
176
|
</div>
|
|
179
177
|
<div class="k-actions k-actions-start k-actions-horizontal k-card-actions">
|
|
178
|
+
<button kendoButton
|
|
179
|
+
fillMode="flat"
|
|
180
|
+
themeColor="primary"
|
|
181
|
+
rounded="full"
|
|
182
|
+
icon="copy"
|
|
183
|
+
[svgIcon]="copyIcon"
|
|
184
|
+
(click)="handleCopy()"
|
|
185
|
+
>{{messageFor('copyOutput')}}</button>
|
|
186
|
+
<button kendoButton
|
|
187
|
+
fillMode="flat"
|
|
188
|
+
rounded="full"
|
|
189
|
+
icon="arrow-rotate-cw"
|
|
190
|
+
[svgIcon]="retryIcon"
|
|
191
|
+
(click)="handleRetry()"
|
|
192
|
+
>{{messageFor('retryGeneration')}}</button>
|
|
193
|
+
@if (showRating) {
|
|
194
|
+
<span class="k-spacer"></span>
|
|
180
195
|
<button kendoButton
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
(click)="handleCopy()"
|
|
187
|
-
>{{messageFor('copyOutput')}}</button>
|
|
196
|
+
fillMode="flat"
|
|
197
|
+
icon="thumb-up-outline"
|
|
198
|
+
[svgIcon]="positiveRatingIcon"
|
|
199
|
+
(click)="handleRating('positive')">
|
|
200
|
+
</button>
|
|
188
201
|
<button kendoButton
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
<ng-container *ngIf="showRating">
|
|
196
|
-
<span class="k-spacer"></span>
|
|
197
|
-
<button kendoButton
|
|
198
|
-
fillMode="flat"
|
|
199
|
-
icon="thumb-up-outline"
|
|
200
|
-
[svgIcon]="positiveRatingIcon"
|
|
201
|
-
(click)="handleRating('positive')">
|
|
202
|
-
</button>
|
|
203
|
-
<button kendoButton
|
|
204
|
-
fillMode="flat"
|
|
205
|
-
icon="thumb-down-outline"
|
|
206
|
-
[svgIcon]="negativeRatingIcon"
|
|
207
|
-
(click)="handleRating('negative')">
|
|
208
|
-
</button>
|
|
209
|
-
</ng-container>
|
|
202
|
+
fillMode="flat"
|
|
203
|
+
icon="thumb-down-outline"
|
|
204
|
+
[svgIcon]="negativeRatingIcon"
|
|
205
|
+
(click)="handleRating('negative')">
|
|
206
|
+
</button>
|
|
207
|
+
}
|
|
210
208
|
</div>
|
|
211
|
-
|
|
209
|
+
`,
|
|
212
210
|
standalone: true,
|
|
213
|
-
imports: [ButtonComponent,
|
|
211
|
+
imports: [ButtonComponent, NgTemplateOutlet]
|
|
214
212
|
}]
|
|
215
213
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.AIPromptService }], propDecorators: { hostClass: [{
|
|
216
214
|
type: HostBinding,
|