@progress/kendo-angular-conversational-ui 21.1.1-develop.2 → 21.2.0-develop.10
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/chat.component.d.ts +2 -0
- package/chat/message-list.component.d.ts +2 -2
- package/codemods/utils.js +805 -394
- package/codemods/v20/chat-user.js +9 -12
- package/codemods/v21/chat-messagetoolbarvisibility.js +9 -13
- package/codemods/v21/chat-pinnedbyfield.js +1 -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/common/toolbar-focusable.directive.mjs +2 -2
- 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-view.mjs +2 -2
- package/esm2022/chat/chat.component.mjs +259 -242
- package/esm2022/chat/message-attachments.component.mjs +60 -55
- package/esm2022/chat/message-box.component.mjs +203 -183
- package/esm2022/chat/message-list.component.mjs +249 -209
- package/esm2022/chat/message-reference-content.component.mjs +30 -19
- package/esm2022/chat/message.component.mjs +301 -281
- package/esm2022/chat/suggested-actions.component.mjs +142 -134
- 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 +1988 -1777
- package/package.json +14 -14
- package/codemods/template-transformer/index.js +0 -93
|
@@ -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,
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
import { Directive, ElementRef, Renderer2 } from '@angular/core';
|
|
6
6
|
import { ToolbarNavigationService } from './toolbar-navigation.service';
|
|
7
|
-
import { Keys, focusableSelector,
|
|
7
|
+
import { Keys, focusableSelector, normalizeKeys } from '@progress/kendo-angular-common';
|
|
8
8
|
import * as i0 from "@angular/core";
|
|
9
9
|
import * as i1 from "./toolbar-navigation.service";
|
|
10
10
|
/**
|
|
@@ -38,7 +38,7 @@ export class AIPromptToolbarFocusableDirective {
|
|
|
38
38
|
this.element.focus();
|
|
39
39
|
}
|
|
40
40
|
keyDownHandler = (e) => {
|
|
41
|
-
const code =
|
|
41
|
+
const code = normalizeKeys(e);
|
|
42
42
|
const targetsSelf = e.target === this.element;
|
|
43
43
|
const isLeftArrow = code === Keys.ArrowLeft;
|
|
44
44
|
const isRightArrow = code === Keys.ArrowRight;
|
|
@@ -7,7 +7,7 @@ import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
|
7
7
|
import { BaseView } from './base-view';
|
|
8
8
|
import { AIPromptService } from '../common/aiprompt.service';
|
|
9
9
|
import { AIPromptOutputCardComponent } from '../common/output-card.component';
|
|
10
|
-
import {
|
|
10
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
11
11
|
import * as i0 from "@angular/core";
|
|
12
12
|
import * as i1 from "@progress/kendo-angular-l10n";
|
|
13
13
|
import * as i2 from "../common/aiprompt.service";
|
|
@@ -40,26 +40,25 @@ export class OutputViewComponent extends BaseView {
|
|
|
40
40
|
return this.service.outputTemplate?.templateRef;
|
|
41
41
|
}
|
|
42
42
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OutputViewComponent, deps: [{ token: i1.LocalizationService }, { token: i2.AIPromptService }], target: i0.ɵɵFactoryTarget.Component });
|
|
43
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
43
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: OutputViewComponent, isStandalone: true, selector: "kendo-aiprompt-output-view", providers: [{
|
|
44
44
|
provide: BaseView,
|
|
45
45
|
useExisting: forwardRef(() => OutputViewComponent)
|
|
46
46
|
}], usesInheritance: true, ngImport: i0, template: `
|
|
47
47
|
<ng-template #content>
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
</ng-container>
|
|
55
|
-
</ng-container>
|
|
56
|
-
<ng-template #defaultTemplate>
|
|
57
|
-
<div kendoAIPromptOutputCard [promptOutput]="output"></div>
|
|
58
|
-
</ng-template>
|
|
48
|
+
<div
|
|
49
|
+
class="k-card-list"
|
|
50
|
+
role="list">
|
|
51
|
+
@for (output of promptOutputs; track output) {
|
|
52
|
+
@if (customTemplate) {
|
|
53
|
+
<ng-container *ngTemplateOutlet="customTemplate; context: { $implicit: output }">
|
|
59
54
|
</ng-container>
|
|
60
|
-
|
|
55
|
+
} @else {
|
|
56
|
+
<div kendoAIPromptOutputCard [promptOutput]="output"></div>
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
</div>
|
|
61
60
|
</ng-template>
|
|
62
|
-
|
|
61
|
+
`, isInline: true, dependencies: [{ kind: "component", type: AIPromptOutputCardComponent, selector: "[kendoAIPromptOutputCard]", inputs: ["promptOutput"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
63
62
|
}
|
|
64
63
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OutputViewComponent, decorators: [{
|
|
65
64
|
type: Component,
|
|
@@ -71,22 +70,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
71
70
|
}],
|
|
72
71
|
template: `
|
|
73
72
|
<ng-template #content>
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
</ng-container>
|
|
81
|
-
</ng-container>
|
|
82
|
-
<ng-template #defaultTemplate>
|
|
83
|
-
<div kendoAIPromptOutputCard [promptOutput]="output"></div>
|
|
84
|
-
</ng-template>
|
|
73
|
+
<div
|
|
74
|
+
class="k-card-list"
|
|
75
|
+
role="list">
|
|
76
|
+
@for (output of promptOutputs; track output) {
|
|
77
|
+
@if (customTemplate) {
|
|
78
|
+
<ng-container *ngTemplateOutlet="customTemplate; context: { $implicit: output }">
|
|
85
79
|
</ng-container>
|
|
86
|
-
|
|
80
|
+
} @else {
|
|
81
|
+
<div kendoAIPromptOutputCard [promptOutput]="output"></div>
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
</div>
|
|
87
85
|
</ng-template>
|
|
88
|
-
|
|
86
|
+
`,
|
|
89
87
|
standalone: true,
|
|
90
|
-
imports: [
|
|
88
|
+
imports: [AIPromptOutputCardComponent, NgTemplateOutlet]
|
|
91
89
|
}]
|
|
92
90
|
}], ctorParameters: () => [{ type: i1.LocalizationService }, { type: i2.AIPromptService }] });
|