@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
|
@@ -4,7 +4,6 @@
|
|
|
4
4
|
*-------------------------------------------------------------------------------------------*/
|
|
5
5
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
6
6
|
import { Component, ElementRef, forwardRef, HostBinding, Input, NgZone, QueryList, ViewChild, ViewChildren } from '@angular/core';
|
|
7
|
-
import { NgIf, NgFor } from '@angular/common';
|
|
8
7
|
import { fromEvent } from 'rxjs';
|
|
9
8
|
import { debounceTime } from 'rxjs/operators';
|
|
10
9
|
import { Keys, normalizeNumpadKeys } from '@progress/kendo-angular-common';
|
|
@@ -132,51 +131,54 @@ export class MessageAttachmentsComponent extends ChatItem {
|
|
|
132
131
|
return this.localization.get(key);
|
|
133
132
|
}
|
|
134
133
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageAttachmentsComponent, deps: [{ token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
|
|
135
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
134
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MessageAttachmentsComponent, isStandalone: true, selector: "kendo-chat-message-attachments", inputs: { attachments: "attachments", layout: "layout", tabbable: "tabbable", template: "template", localization: "localization" }, host: { properties: { "class.k-card-deck-scrollwrap": "this.carousel" } }, providers: [{
|
|
136
135
|
provide: ChatItem,
|
|
137
136
|
useExisting: forwardRef(() => MessageAttachmentsComponent)
|
|
138
137
|
}], viewQueries: [{ propertyName: "deck", first: true, predicate: ["deck"], descendants: true, read: ElementRef, static: true }, { propertyName: "items", predicate: ["item"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
|
|
139
|
-
|
|
140
|
-
|
|
138
|
+
@if (showLeftArrow) {
|
|
139
|
+
<button
|
|
141
140
|
(click)="scrollTo(-1)"
|
|
142
141
|
kendoButton
|
|
143
142
|
tabindex="-1"
|
|
144
143
|
[attr.title]="textFor('messageAttachmentLeftArrow')"
|
|
145
144
|
[svgIcon]="chevronLeftIcon"
|
|
146
145
|
icon="chevron-left"
|
|
147
|
-
|
|
148
|
-
|
|
146
|
+
>
|
|
147
|
+
</button>
|
|
148
|
+
}
|
|
149
149
|
<div
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
150
|
+
#deck
|
|
151
|
+
[class.k-card-deck]="carousel"
|
|
152
|
+
[class.k-card-list]="!carousel"
|
|
153
|
+
>
|
|
154
|
+
@for (att of attachments; track att; let index = $index; let first = $first; let last = $last) {
|
|
154
155
|
<kendo-chat-attachment #item
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
>
|
|
156
|
+
[attachment]="att"
|
|
157
|
+
[template]="template"
|
|
158
|
+
[class.k-selected]="isSelected(index)"
|
|
159
|
+
[class.k-focus]="isSelected(index)"
|
|
160
|
+
[class.k-card-wrap]="true"
|
|
161
|
+
[class.k-first]="first"
|
|
162
|
+
[class.k-last]="last"
|
|
163
|
+
[attr.tabindex]="tabbable && isSelected(index) ? '0' : '-1'"
|
|
164
|
+
(click)="itemClick(index)"
|
|
165
|
+
(keydown)="itemKeydown($event, att)"
|
|
166
|
+
>
|
|
167
167
|
</kendo-chat-attachment>
|
|
168
|
+
}
|
|
168
169
|
</div>
|
|
169
|
-
|
|
170
|
-
|
|
170
|
+
@if (showRightArrow) {
|
|
171
|
+
<button
|
|
171
172
|
(click)="scrollTo(1)"
|
|
172
173
|
kendoButton
|
|
173
174
|
tabindex="-1"
|
|
174
175
|
[attr.title]="textFor('messageAttachmentRightArrow')"
|
|
175
176
|
[svgIcon]="chevronRightIcon"
|
|
176
177
|
icon="chevron-right"
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
178
|
+
>
|
|
179
|
+
</button>
|
|
180
|
+
}
|
|
181
|
+
`, 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: "component", type: AttachmentComponent, selector: "kendo-chat-attachment", inputs: ["attachment", "template"] }] });
|
|
180
182
|
}
|
|
181
183
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageAttachmentsComponent, decorators: [{
|
|
182
184
|
type: Component,
|
|
@@ -187,49 +189,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
187
189
|
}],
|
|
188
190
|
selector: 'kendo-chat-message-attachments',
|
|
189
191
|
template: `
|
|
190
|
-
|
|
191
|
-
|
|
192
|
+
@if (showLeftArrow) {
|
|
193
|
+
<button
|
|
192
194
|
(click)="scrollTo(-1)"
|
|
193
195
|
kendoButton
|
|
194
196
|
tabindex="-1"
|
|
195
197
|
[attr.title]="textFor('messageAttachmentLeftArrow')"
|
|
196
198
|
[svgIcon]="chevronLeftIcon"
|
|
197
199
|
icon="chevron-left"
|
|
198
|
-
|
|
199
|
-
|
|
200
|
+
>
|
|
201
|
+
</button>
|
|
202
|
+
}
|
|
200
203
|
<div
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
204
|
+
#deck
|
|
205
|
+
[class.k-card-deck]="carousel"
|
|
206
|
+
[class.k-card-list]="!carousel"
|
|
207
|
+
>
|
|
208
|
+
@for (att of attachments; track att; let index = $index; let first = $first; let last = $last) {
|
|
205
209
|
<kendo-chat-attachment #item
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
>
|
|
210
|
+
[attachment]="att"
|
|
211
|
+
[template]="template"
|
|
212
|
+
[class.k-selected]="isSelected(index)"
|
|
213
|
+
[class.k-focus]="isSelected(index)"
|
|
214
|
+
[class.k-card-wrap]="true"
|
|
215
|
+
[class.k-first]="first"
|
|
216
|
+
[class.k-last]="last"
|
|
217
|
+
[attr.tabindex]="tabbable && isSelected(index) ? '0' : '-1'"
|
|
218
|
+
(click)="itemClick(index)"
|
|
219
|
+
(keydown)="itemKeydown($event, att)"
|
|
220
|
+
>
|
|
218
221
|
</kendo-chat-attachment>
|
|
222
|
+
}
|
|
219
223
|
</div>
|
|
220
|
-
|
|
221
|
-
|
|
224
|
+
@if (showRightArrow) {
|
|
225
|
+
<button
|
|
222
226
|
(click)="scrollTo(1)"
|
|
223
227
|
kendoButton
|
|
224
228
|
tabindex="-1"
|
|
225
229
|
[attr.title]="textFor('messageAttachmentRightArrow')"
|
|
226
230
|
[svgIcon]="chevronRightIcon"
|
|
227
231
|
icon="chevron-right"
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
232
|
+
>
|
|
233
|
+
</button>
|
|
234
|
+
}
|
|
235
|
+
`,
|
|
231
236
|
standalone: true,
|
|
232
|
-
imports: [
|
|
237
|
+
imports: [ButtonComponent, AttachmentComponent]
|
|
233
238
|
}]
|
|
234
239
|
}], ctorParameters: () => [{ type: i0.NgZone }, { type: i1.LocalizationService }], propDecorators: { attachments: [{
|
|
235
240
|
type: Input
|
|
@@ -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 { ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, Input, Output, Renderer2, ViewChild } from '@angular/core';
|
|
6
|
-
import {
|
|
6
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
7
7
|
import { LocalizationService } from '@progress/kendo-angular-l10n';
|
|
8
8
|
import { closest, guid, isPresent, Keys } from '@progress/kendo-angular-common';
|
|
9
9
|
import { paperPlaneIcon, paperclipIcon, fileIcon, xIcon } from '@progress/kendo-svg-icons';
|
|
@@ -217,9 +217,9 @@ export class MessageBoxComponent {
|
|
|
217
217
|
this.executeSuggestion.emit(suggestion);
|
|
218
218
|
}
|
|
219
219
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageBoxComponent, deps: [{ token: i1.ChatService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
220
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
221
|
-
|
|
222
|
-
|
|
220
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MessageBoxComponent, isStandalone: true, selector: "kendo-message-box", inputs: { authorId: "authorId", autoScroll: "autoScroll", suggestions: "suggestions", placeholder: "placeholder", inputValue: "inputValue", localization: "localization", messageBoxTemplate: "messageBoxTemplate", suggestionTemplate: "suggestionTemplate" }, outputs: { sendMessage: "sendMessage", executeSuggestion: "executeSuggestion", fileSelect: "fileSelect", fileRemove: "fileRemove" }, host: { properties: { "style.border-color": "this.borderColor", "class.k-message-box-wrapper": "this.messageBoxWrapperClass" } }, viewQueries: [{ propertyName: "messageBoxInput", first: true, predicate: ["messageBoxInput"], descendants: true }, { propertyName: "fileSelectComponent", first: true, predicate: ["fileSelect"], descendants: true }, { propertyName: "suggestedActionsComponent", first: true, predicate: SuggestedActionsComponent, descendants: true }], ngImport: i0, template: `
|
|
221
|
+
@if (suggestions?.length > 0) {
|
|
222
|
+
<kendo-chat-suggested-actions
|
|
223
223
|
#suggestedActions
|
|
224
224
|
[suggestions]="suggestions"
|
|
225
225
|
type="suggestion"
|
|
@@ -228,110 +228,120 @@ export class MessageBoxComponent {
|
|
|
228
228
|
(dispatchSuggestion)="dispatchSuggestion($event)"
|
|
229
229
|
(click)="select(suggestedActions, $event)"
|
|
230
230
|
(focus)="select(suggestedActions, $event)"
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
231
|
+
></kendo-chat-suggested-actions>
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
@if (!messageBoxTemplate?.templateRef) {
|
|
235
|
+
<kendo-textarea
|
|
236
|
+
#messageBoxInput
|
|
237
|
+
class="k-message-box"
|
|
238
|
+
resizable="none"
|
|
239
|
+
[rows]="3"
|
|
239
240
|
[inputAttributes]="{
|
|
240
241
|
'aria-label': textFor('messageBoxInputLabel')
|
|
241
242
|
}"
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
243
|
+
[placeholder]="placeholder || textFor('messagePlaceholder')"
|
|
244
|
+
[showSuffixSeparator]="false"
|
|
245
|
+
(keydown)="textAreaKeydown($event)"
|
|
246
|
+
[value]="inputValue"
|
|
247
|
+
(valueChange)="onInputValueChange($event)"
|
|
247
248
|
>
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
[attr.title]="textFor('removeReplyTitle')"
|
|
255
|
-
[svgIcon]="deleteIcon"
|
|
256
|
-
(click)="removeReply()"
|
|
257
|
-
fillMode="flat"
|
|
258
|
-
></button>
|
|
259
|
-
</div>
|
|
260
|
-
<ul class="k-chat-file-wrapper">
|
|
261
|
-
<li class="k-chat-file"
|
|
262
|
-
*ngFor="let file of files; let i = index"
|
|
263
|
-
[chatFile]="file"
|
|
264
|
-
[removable]="true"
|
|
265
|
-
(remove)="removeFile(i)"
|
|
266
|
-
></li>
|
|
267
|
-
</ul>
|
|
268
|
-
</kendo-textarea-prefix>
|
|
269
|
-
|
|
270
|
-
<kendo-textarea-suffix>
|
|
271
|
-
<button *ngIf="speechToTextButtonSettings"
|
|
272
|
-
kendoSpeechToTextButton
|
|
273
|
-
[attr.title]="textFor('speechToTextButtonTitle')"
|
|
274
|
-
[continuous]="speechToTextButtonSettings?.continuous"
|
|
275
|
-
[disabled]="speechToTextButtonSettings?.disabled"
|
|
276
|
-
[fillMode]="speechToTextButtonSettings?.fillMode ?? 'clear'"
|
|
277
|
-
[integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
|
|
278
|
-
[interimResults]="speechToTextButtonSettings?.interimResults"
|
|
279
|
-
[lang]="speechToTextButtonSettings?.lang"
|
|
280
|
-
[maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
|
|
281
|
-
[rounded]="speechToTextButtonSettings?.rounded"
|
|
282
|
-
[size]="speechToTextButtonSettings?.size"
|
|
283
|
-
[themeColor]="speechToTextButtonSettings?.themeColor"
|
|
284
|
-
(result)="handleSpeechResult($event)"
|
|
285
|
-
(start)="isListening = true"
|
|
286
|
-
(end)="isListening = false"
|
|
287
|
-
></button>
|
|
249
|
+
@if (reply || (files && files.length > 0)) {
|
|
250
|
+
<kendo-textarea-prefix>
|
|
251
|
+
@if (reply) {
|
|
252
|
+
<div class="k-message-reference k-message-reference-sender" (click)="onReplyReferenceClick($event)">
|
|
253
|
+
<chat-message-reference-content [message]="reply"></chat-message-reference-content>
|
|
254
|
+
<span class="k-spacer"></span>
|
|
288
255
|
<button
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
fillMode="clear"
|
|
295
|
-
(click)="selectFiles()"
|
|
256
|
+
kendoButton
|
|
257
|
+
[attr.title]="textFor('removeReplyTitle')"
|
|
258
|
+
[svgIcon]="deleteIcon"
|
|
259
|
+
(click)="removeReply()"
|
|
260
|
+
fillMode="flat"
|
|
296
261
|
></button>
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
262
|
+
</div>
|
|
263
|
+
}
|
|
264
|
+
<ul class="k-chat-file-wrapper">
|
|
265
|
+
@for (file of files; track file; let i = $index) {
|
|
266
|
+
<li class="k-chat-file"
|
|
267
|
+
[chatFile]="file"
|
|
268
|
+
[removable]="true"
|
|
269
|
+
(remove)="removeFile(i)"
|
|
270
|
+
></li>
|
|
271
|
+
}
|
|
272
|
+
</ul>
|
|
273
|
+
</kendo-textarea-prefix>
|
|
274
|
+
}
|
|
275
|
+
<kendo-textarea-suffix>
|
|
276
|
+
@if (speechToTextButtonSettings) {
|
|
277
|
+
<button
|
|
278
|
+
kendoSpeechToTextButton
|
|
279
|
+
[attr.title]="textFor('speechToTextButtonTitle')"
|
|
280
|
+
[continuous]="speechToTextButtonSettings?.continuous"
|
|
281
|
+
[disabled]="speechToTextButtonSettings?.disabled"
|
|
282
|
+
[fillMode]="speechToTextButtonSettings?.fillMode ?? 'clear'"
|
|
283
|
+
[integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
|
|
284
|
+
[interimResults]="speechToTextButtonSettings?.interimResults"
|
|
285
|
+
[lang]="speechToTextButtonSettings?.lang"
|
|
286
|
+
[maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
|
|
287
|
+
[rounded]="speechToTextButtonSettings?.rounded"
|
|
288
|
+
[size]="speechToTextButtonSettings?.size"
|
|
289
|
+
[themeColor]="speechToTextButtonSettings?.themeColor"
|
|
290
|
+
(result)="handleSpeechResult($event)"
|
|
291
|
+
(start)="isListening = true"
|
|
292
|
+
(end)="isListening = false"
|
|
293
|
+
></button>
|
|
294
|
+
}
|
|
295
|
+
@if (enableFileSelect) {
|
|
296
|
+
<button
|
|
297
|
+
kendoButton
|
|
298
|
+
[attr.title]="textFor('fileSelectButtonTitle')"
|
|
299
|
+
[svgIcon]="attachmentIcon"
|
|
300
|
+
icon="attachment"
|
|
301
|
+
fillMode="clear"
|
|
302
|
+
(click)="selectFiles()"
|
|
303
|
+
></button>
|
|
304
|
+
}
|
|
305
|
+
<kendo-input-spacer></kendo-input-spacer>
|
|
306
|
+
<button
|
|
307
|
+
kendoButton
|
|
308
|
+
[fillMode]="sendButtonSettings?.fillMode"
|
|
309
|
+
[themeColor]="sendButtonSettings?.themeColor"
|
|
310
|
+
[rounded]="sendButtonSettings?.rounded"
|
|
311
|
+
[class]="sendButtonSettings?.buttonClass || 'k-chat-send'"
|
|
312
|
+
[icon]="sendButtonSettings?.icon"
|
|
313
|
+
[svgIcon]="sendButtonSettings?.svgIcon"
|
|
314
|
+
[tabindex]="0"
|
|
315
|
+
[attr.title]="textFor('send')"
|
|
316
|
+
[class.k-disabled]="isDisabledSendButton"
|
|
317
|
+
[attr.aria-disabled]="isDisabledSendButton"
|
|
318
|
+
(click)="sendClick()"
|
|
319
|
+
>
|
|
320
|
+
</button>
|
|
321
|
+
</kendo-textarea-suffix>
|
|
322
|
+
</kendo-textarea>
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
@if (messageBoxTemplate?.templateRef) {
|
|
326
|
+
<ng-template [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
|
|
327
|
+
}
|
|
328
|
+
|
|
319
329
|
<kendo-fileselect
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
330
|
+
#fileSelect
|
|
331
|
+
class="k-hidden"
|
|
332
|
+
[multiple]="true"
|
|
333
|
+
[showFileList]="false"
|
|
334
|
+
(select)="handleFileSelect($event)"
|
|
325
335
|
></kendo-fileselect>
|
|
326
|
-
`, isInline: true, dependencies: [{ kind: "
|
|
336
|
+
`, 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: "ngmodule", type: FormsModule }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: MessageReferenceComponent, selector: "chat-message-reference-content", inputs: ["message"] }, { kind: "component", type: TextAreaSuffixComponent, selector: "kendo-textarea-suffix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaSuffix"] }, { kind: "component", type: TextAreaPrefixComponent, selector: "kendo-textarea-prefix", inputs: ["flow", "orientation"], exportAs: ["kendoTextAreaPrefix"] }, { 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"] }, { kind: "component", type: InputSpacerComponent, selector: "kendo-input-spacer, kendo-textbox-spacer", inputs: ["width"] }, { kind: "component", type: FileSelectComponent, selector: "kendo-fileselect", inputs: ["name"], outputs: ["valueChange"], exportAs: ["kendoFileSelect"] }, { kind: "component", type: SuggestedActionsComponent, selector: "kendo-chat-suggested-actions", inputs: ["actions", "suggestions", "tabbable", "type", "suggestionTemplate"], outputs: ["dispatchAction", "dispatchSuggestion"] }, { kind: "component", type: ChatFileComponent, selector: "li[chatFile]", inputs: ["chatFile", "removable", "fileActions"], outputs: ["remove", "actionClick", "actionsToggle", "actionButtonClick"] }] });
|
|
327
337
|
}
|
|
328
338
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MessageBoxComponent, decorators: [{
|
|
329
339
|
type: Component,
|
|
330
340
|
args: [{
|
|
331
341
|
selector: 'kendo-message-box',
|
|
332
342
|
template: `
|
|
333
|
-
|
|
334
|
-
|
|
343
|
+
@if (suggestions?.length > 0) {
|
|
344
|
+
<kendo-chat-suggested-actions
|
|
335
345
|
#suggestedActions
|
|
336
346
|
[suggestions]="suggestions"
|
|
337
347
|
type="suggestion"
|
|
@@ -340,104 +350,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
340
350
|
(dispatchSuggestion)="dispatchSuggestion($event)"
|
|
341
351
|
(click)="select(suggestedActions, $event)"
|
|
342
352
|
(focus)="select(suggestedActions, $event)"
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
353
|
+
></kendo-chat-suggested-actions>
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
@if (!messageBoxTemplate?.templateRef) {
|
|
357
|
+
<kendo-textarea
|
|
358
|
+
#messageBoxInput
|
|
359
|
+
class="k-message-box"
|
|
360
|
+
resizable="none"
|
|
361
|
+
[rows]="3"
|
|
351
362
|
[inputAttributes]="{
|
|
352
363
|
'aria-label': textFor('messageBoxInputLabel')
|
|
353
364
|
}"
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
365
|
+
[placeholder]="placeholder || textFor('messagePlaceholder')"
|
|
366
|
+
[showSuffixSeparator]="false"
|
|
367
|
+
(keydown)="textAreaKeydown($event)"
|
|
368
|
+
[value]="inputValue"
|
|
369
|
+
(valueChange)="onInputValueChange($event)"
|
|
359
370
|
>
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
[attr.title]="textFor('removeReplyTitle')"
|
|
367
|
-
[svgIcon]="deleteIcon"
|
|
368
|
-
(click)="removeReply()"
|
|
369
|
-
fillMode="flat"
|
|
370
|
-
></button>
|
|
371
|
-
</div>
|
|
372
|
-
<ul class="k-chat-file-wrapper">
|
|
373
|
-
<li class="k-chat-file"
|
|
374
|
-
*ngFor="let file of files; let i = index"
|
|
375
|
-
[chatFile]="file"
|
|
376
|
-
[removable]="true"
|
|
377
|
-
(remove)="removeFile(i)"
|
|
378
|
-
></li>
|
|
379
|
-
</ul>
|
|
380
|
-
</kendo-textarea-prefix>
|
|
381
|
-
|
|
382
|
-
<kendo-textarea-suffix>
|
|
383
|
-
<button *ngIf="speechToTextButtonSettings"
|
|
384
|
-
kendoSpeechToTextButton
|
|
385
|
-
[attr.title]="textFor('speechToTextButtonTitle')"
|
|
386
|
-
[continuous]="speechToTextButtonSettings?.continuous"
|
|
387
|
-
[disabled]="speechToTextButtonSettings?.disabled"
|
|
388
|
-
[fillMode]="speechToTextButtonSettings?.fillMode ?? 'clear'"
|
|
389
|
-
[integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
|
|
390
|
-
[interimResults]="speechToTextButtonSettings?.interimResults"
|
|
391
|
-
[lang]="speechToTextButtonSettings?.lang"
|
|
392
|
-
[maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
|
|
393
|
-
[rounded]="speechToTextButtonSettings?.rounded"
|
|
394
|
-
[size]="speechToTextButtonSettings?.size"
|
|
395
|
-
[themeColor]="speechToTextButtonSettings?.themeColor"
|
|
396
|
-
(result)="handleSpeechResult($event)"
|
|
397
|
-
(start)="isListening = true"
|
|
398
|
-
(end)="isListening = false"
|
|
399
|
-
></button>
|
|
371
|
+
@if (reply || (files && files.length > 0)) {
|
|
372
|
+
<kendo-textarea-prefix>
|
|
373
|
+
@if (reply) {
|
|
374
|
+
<div class="k-message-reference k-message-reference-sender" (click)="onReplyReferenceClick($event)">
|
|
375
|
+
<chat-message-reference-content [message]="reply"></chat-message-reference-content>
|
|
376
|
+
<span class="k-spacer"></span>
|
|
400
377
|
<button
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
fillMode="clear"
|
|
407
|
-
(click)="selectFiles()"
|
|
378
|
+
kendoButton
|
|
379
|
+
[attr.title]="textFor('removeReplyTitle')"
|
|
380
|
+
[svgIcon]="deleteIcon"
|
|
381
|
+
(click)="removeReply()"
|
|
382
|
+
fillMode="flat"
|
|
408
383
|
></button>
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
384
|
+
</div>
|
|
385
|
+
}
|
|
386
|
+
<ul class="k-chat-file-wrapper">
|
|
387
|
+
@for (file of files; track file; let i = $index) {
|
|
388
|
+
<li class="k-chat-file"
|
|
389
|
+
[chatFile]="file"
|
|
390
|
+
[removable]="true"
|
|
391
|
+
(remove)="removeFile(i)"
|
|
392
|
+
></li>
|
|
393
|
+
}
|
|
394
|
+
</ul>
|
|
395
|
+
</kendo-textarea-prefix>
|
|
396
|
+
}
|
|
397
|
+
<kendo-textarea-suffix>
|
|
398
|
+
@if (speechToTextButtonSettings) {
|
|
399
|
+
<button
|
|
400
|
+
kendoSpeechToTextButton
|
|
401
|
+
[attr.title]="textFor('speechToTextButtonTitle')"
|
|
402
|
+
[continuous]="speechToTextButtonSettings?.continuous"
|
|
403
|
+
[disabled]="speechToTextButtonSettings?.disabled"
|
|
404
|
+
[fillMode]="speechToTextButtonSettings?.fillMode ?? 'clear'"
|
|
405
|
+
[integrationMode]="speechToTextButtonSettings?.integrationMode ?? 'webSpeech'"
|
|
406
|
+
[interimResults]="speechToTextButtonSettings?.interimResults"
|
|
407
|
+
[lang]="speechToTextButtonSettings?.lang"
|
|
408
|
+
[maxAlternatives]="speechToTextButtonSettings?.maxAlternatives"
|
|
409
|
+
[rounded]="speechToTextButtonSettings?.rounded"
|
|
410
|
+
[size]="speechToTextButtonSettings?.size"
|
|
411
|
+
[themeColor]="speechToTextButtonSettings?.themeColor"
|
|
412
|
+
(result)="handleSpeechResult($event)"
|
|
413
|
+
(start)="isListening = true"
|
|
414
|
+
(end)="isListening = false"
|
|
415
|
+
></button>
|
|
416
|
+
}
|
|
417
|
+
@if (enableFileSelect) {
|
|
418
|
+
<button
|
|
419
|
+
kendoButton
|
|
420
|
+
[attr.title]="textFor('fileSelectButtonTitle')"
|
|
421
|
+
[svgIcon]="attachmentIcon"
|
|
422
|
+
icon="attachment"
|
|
423
|
+
fillMode="clear"
|
|
424
|
+
(click)="selectFiles()"
|
|
425
|
+
></button>
|
|
426
|
+
}
|
|
427
|
+
<kendo-input-spacer></kendo-input-spacer>
|
|
428
|
+
<button
|
|
429
|
+
kendoButton
|
|
430
|
+
[fillMode]="sendButtonSettings?.fillMode"
|
|
431
|
+
[themeColor]="sendButtonSettings?.themeColor"
|
|
432
|
+
[rounded]="sendButtonSettings?.rounded"
|
|
433
|
+
[class]="sendButtonSettings?.buttonClass || 'k-chat-send'"
|
|
434
|
+
[icon]="sendButtonSettings?.icon"
|
|
435
|
+
[svgIcon]="sendButtonSettings?.svgIcon"
|
|
436
|
+
[tabindex]="0"
|
|
437
|
+
[attr.title]="textFor('send')"
|
|
438
|
+
[class.k-disabled]="isDisabledSendButton"
|
|
439
|
+
[attr.aria-disabled]="isDisabledSendButton"
|
|
440
|
+
(click)="sendClick()"
|
|
441
|
+
>
|
|
442
|
+
</button>
|
|
443
|
+
</kendo-textarea-suffix>
|
|
444
|
+
</kendo-textarea>
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
@if (messageBoxTemplate?.templateRef) {
|
|
448
|
+
<ng-template [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
|
|
449
|
+
}
|
|
450
|
+
|
|
431
451
|
<kendo-fileselect
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
452
|
+
#fileSelect
|
|
453
|
+
class="k-hidden"
|
|
454
|
+
[multiple]="true"
|
|
455
|
+
[showFileList]="false"
|
|
456
|
+
(select)="handleFileSelect($event)"
|
|
437
457
|
></kendo-fileselect>
|
|
438
|
-
`,
|
|
458
|
+
`,
|
|
439
459
|
standalone: true,
|
|
440
|
-
imports: [
|
|
460
|
+
imports: [ButtonComponent, FormsModule, NgTemplateOutlet, TextAreaComponent, MessageReferenceComponent, TextAreaSuffixComponent, TextAreaPrefixComponent, SpeechToTextButtonComponent, InputSpacerComponent, FileSelectComponent, SuggestedActionsComponent, ChatFileComponent]
|
|
441
461
|
}]
|
|
442
462
|
}], ctorParameters: () => [{ type: i1.ChatService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { borderColor: [{
|
|
443
463
|
type: HostBinding,
|