@progress/kendo-angular-conversational-ui 13.4.0-develop.1 → 13.4.0-develop.3
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-box.component.d.ts +5 -0
- package/esm2020/chat/message-attachments.component.mjs +36 -28
- package/esm2020/chat/message-box.component.mjs +49 -5
- package/esm2020/chat/message-list.component.mjs +148 -126
- package/esm2020/chat/message.component.mjs +44 -44
- package/esm2020/package-metadata.mjs +2 -2
- package/fesm2015/progress-kendo-angular-conversational-ui.mjs +279 -206
- package/fesm2020/progress-kendo-angular-conversational-ui.mjs +279 -206
- package/package.json +7 -7
|
@@ -9,6 +9,7 @@ import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/k
|
|
|
9
9
|
import { validatePackage } from '@progress/kendo-licensing';
|
|
10
10
|
import * as i6 from '@progress/kendo-angular-common';
|
|
11
11
|
import { Keys, ResizeSensorModule } from '@progress/kendo-angular-common';
|
|
12
|
+
import { paperPlaneIcon, chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
|
|
12
13
|
import * as i1 from '@progress/kendo-angular-buttons';
|
|
13
14
|
import { ButtonModule } from '@progress/kendo-angular-buttons';
|
|
14
15
|
import * as i2 from '@angular/common';
|
|
@@ -16,7 +17,6 @@ import { CommonModule } from '@angular/common';
|
|
|
16
17
|
import * as i1$1 from '@progress/kendo-angular-intl';
|
|
17
18
|
import { fromEvent, Subscription } from 'rxjs';
|
|
18
19
|
import { debounceTime } from 'rxjs/operators';
|
|
19
|
-
import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
|
|
20
20
|
|
|
21
21
|
/**
|
|
22
22
|
* Defines a template that will be used for displaying message attachments. To define an attachment
|
|
@@ -115,8 +115,8 @@ const packageMetadata = {
|
|
|
115
115
|
name: '@progress/kendo-angular-conversational-ui',
|
|
116
116
|
productName: 'Kendo UI for Angular',
|
|
117
117
|
productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
|
|
118
|
-
publishDate:
|
|
119
|
-
version: '13.4.0-develop.
|
|
118
|
+
publishDate: 1692370663,
|
|
119
|
+
version: '13.4.0-develop.3',
|
|
120
120
|
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
|
|
121
121
|
};
|
|
122
122
|
|
|
@@ -171,8 +171,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
171
171
|
args: ['focusout']
|
|
172
172
|
}] } });
|
|
173
173
|
|
|
174
|
-
// tslint:disable-next-line:max-line-length
|
|
175
|
-
const sendIcon = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16"><path d="M0,14.3c-0.1,0.6,0.3,0.8,0.8,0.6l14.8-6.5c0.5-0.2,0.5-0.6,0-0.8L0.8,1.1C0.3,0.9-0.1,1.1,0,1.7l0.7,4.2C0.8,6.5,1.4,7,1.9,7.1l8.8,0.8c0.6,0.1,0.6,0.1,0,0.2L1.9,8.9C1.4,9,0.8,9.5,0.7,10.1L0,14.3z"/></svg>';
|
|
176
174
|
/**
|
|
177
175
|
* @hidden
|
|
178
176
|
*/
|
|
@@ -180,6 +178,10 @@ class MessageBoxComponent {
|
|
|
180
178
|
constructor() {
|
|
181
179
|
this.hostClasses = 'k-message-box k-input k-input-md k-rounded-md k-input-solid';
|
|
182
180
|
this.sendMessage = new EventEmitter();
|
|
181
|
+
/**
|
|
182
|
+
* @hidden
|
|
183
|
+
*/
|
|
184
|
+
this.sendIcon = paperPlaneIcon;
|
|
183
185
|
}
|
|
184
186
|
get messageBoxValue() {
|
|
185
187
|
return this.type === 'textarea';
|
|
@@ -237,7 +239,47 @@ class MessageBoxComponent {
|
|
|
237
239
|
}
|
|
238
240
|
}
|
|
239
241
|
MessageBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
240
|
-
MessageBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MessageBoxComponent, selector: "kendo-message-box", inputs: { user: "user", autoScroll: "autoScroll", type: "type", localization: "localization", messageBoxTemplate: "messageBoxTemplate" }, outputs: { sendMessage: "sendMessage" }, host: { properties: { "class": "this.hostClasses", "class.!k-align-items-end": "this.messageBoxValue" } }, viewQueries: [{ propertyName: "messageBoxInput", first: true, predicate: ["messageBoxInput"], descendants: true }], ngImport: i0, template:
|
|
242
|
+
MessageBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MessageBoxComponent, selector: "kendo-message-box", inputs: { user: "user", autoScroll: "autoScroll", type: "type", localization: "localization", messageBoxTemplate: "messageBoxTemplate" }, outputs: { sendMessage: "sendMessage" }, host: { properties: { "class": "this.hostClasses", "class.!k-align-items-end": "this.messageBoxValue" } }, viewQueries: [{ propertyName: "messageBoxInput", first: true, predicate: ["messageBoxInput"], descendants: true }], ngImport: i0, template: `
|
|
243
|
+
<ng-container *ngIf="!messageBoxTemplate">
|
|
244
|
+
<input
|
|
245
|
+
*ngIf="type === 'textbox'"
|
|
246
|
+
#messageBoxInput
|
|
247
|
+
[attr.role]="'textbox'"
|
|
248
|
+
kendoChatFocusedState
|
|
249
|
+
type="text"
|
|
250
|
+
class="k-textbox k-input k-input-md k-input-solid"
|
|
251
|
+
[attr.aria-label]="textFor('messageBoxInputLabel')"
|
|
252
|
+
[placeholder]="textFor('messagePlaceholder')"
|
|
253
|
+
(keydown)="inputKeydown($event)"
|
|
254
|
+
/>
|
|
255
|
+
|
|
256
|
+
<textarea
|
|
257
|
+
*ngIf="type === 'textarea'"
|
|
258
|
+
#messageBoxInput
|
|
259
|
+
[attr.role]="'textbox'"
|
|
260
|
+
kendoChatFocusedState
|
|
261
|
+
[rows]="3"
|
|
262
|
+
class="k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none"
|
|
263
|
+
[attr.aria-label]="textFor('messageBoxInputLabel')"
|
|
264
|
+
[placeholder]="textFor('messagePlaceholder')"
|
|
265
|
+
(keydown)="textAreaKeydown($event)"
|
|
266
|
+
></textarea>
|
|
267
|
+
|
|
268
|
+
<button
|
|
269
|
+
kendoButton
|
|
270
|
+
fillMode="flat"
|
|
271
|
+
class="k-chat-send"
|
|
272
|
+
icon="paper-plane"
|
|
273
|
+
[svgIcon]="sendIcon"
|
|
274
|
+
[tabindex]="0"
|
|
275
|
+
[attr.title]="textFor('send')"
|
|
276
|
+
(click)="sendClick()"
|
|
277
|
+
>
|
|
278
|
+
</button>
|
|
279
|
+
</ng-container>
|
|
280
|
+
|
|
281
|
+
<ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
|
|
282
|
+
`, isInline: true, components: [{ type: i1.ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: FocusedStateDirective, selector: "[kendoChatFocusedState]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
241
283
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageBoxComponent, decorators: [{
|
|
242
284
|
type: Component,
|
|
243
285
|
args: [{
|
|
@@ -271,12 +313,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
271
313
|
<button
|
|
272
314
|
kendoButton
|
|
273
315
|
fillMode="flat"
|
|
274
|
-
class="k-
|
|
316
|
+
class="k-chat-send"
|
|
317
|
+
icon="paper-plane"
|
|
318
|
+
[svgIcon]="sendIcon"
|
|
275
319
|
[tabindex]="0"
|
|
276
320
|
[attr.title]="textFor('send')"
|
|
277
321
|
(click)="sendClick()"
|
|
278
322
|
>
|
|
279
|
-
${sendIcon}
|
|
280
323
|
</button>
|
|
281
324
|
</ng-container>
|
|
282
325
|
|
|
@@ -565,41 +608,41 @@ MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
|
|
|
565
608
|
useExisting: forwardRef(() => MessageComponent)
|
|
566
609
|
}], usesInheritance: true, ngImport: i0, template: `
|
|
567
610
|
<time
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
611
|
+
[attr.aria-hidden]="!selected"
|
|
612
|
+
class="k-message-time"
|
|
613
|
+
*ngIf="message.timestamp"
|
|
571
614
|
>
|
|
572
|
-
|
|
615
|
+
{{ formatTimeStamp(message.timestamp) }}
|
|
573
616
|
</time>
|
|
574
617
|
|
|
575
618
|
<ng-container *ngIf="!message.typing; else typing">
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
619
|
+
<div class="k-chat-bubble" *ngIf="template">
|
|
620
|
+
<ng-container
|
|
621
|
+
*ngTemplateOutlet="template.templateRef; context: { $implicit: message };"
|
|
622
|
+
>
|
|
623
|
+
</ng-container>
|
|
624
|
+
</div>
|
|
582
625
|
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
626
|
+
<div class="k-chat-bubble" *ngIf="!template && message.text">
|
|
627
|
+
{{message.text}}
|
|
628
|
+
</div>
|
|
586
629
|
</ng-container>
|
|
587
630
|
|
|
588
631
|
<span
|
|
589
|
-
|
|
590
|
-
|
|
632
|
+
class="k-message-status"
|
|
633
|
+
*ngIf="message.status"
|
|
591
634
|
>
|
|
592
|
-
|
|
635
|
+
{{ message.status }}
|
|
593
636
|
</span>
|
|
594
637
|
|
|
595
638
|
<ng-template #typing>
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
639
|
+
<div class="k-chat-bubble">
|
|
640
|
+
<div class="k-typing-indicator">
|
|
641
|
+
<span></span>
|
|
642
|
+
<span></span>
|
|
643
|
+
<span></span>
|
|
644
|
+
</div>
|
|
601
645
|
</div>
|
|
602
|
-
</div>
|
|
603
646
|
</ng-template>
|
|
604
647
|
`, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
605
648
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageComponent, decorators: [{
|
|
@@ -612,41 +655,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
612
655
|
}],
|
|
613
656
|
template: `
|
|
614
657
|
<time
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
658
|
+
[attr.aria-hidden]="!selected"
|
|
659
|
+
class="k-message-time"
|
|
660
|
+
*ngIf="message.timestamp"
|
|
618
661
|
>
|
|
619
|
-
|
|
662
|
+
{{ formatTimeStamp(message.timestamp) }}
|
|
620
663
|
</time>
|
|
621
664
|
|
|
622
665
|
<ng-container *ngIf="!message.typing; else typing">
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
666
|
+
<div class="k-chat-bubble" *ngIf="template">
|
|
667
|
+
<ng-container
|
|
668
|
+
*ngTemplateOutlet="template.templateRef; context: { $implicit: message };"
|
|
669
|
+
>
|
|
670
|
+
</ng-container>
|
|
671
|
+
</div>
|
|
629
672
|
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
673
|
+
<div class="k-chat-bubble" *ngIf="!template && message.text">
|
|
674
|
+
{{message.text}}
|
|
675
|
+
</div>
|
|
633
676
|
</ng-container>
|
|
634
677
|
|
|
635
678
|
<span
|
|
636
|
-
|
|
637
|
-
|
|
679
|
+
class="k-message-status"
|
|
680
|
+
*ngIf="message.status"
|
|
638
681
|
>
|
|
639
|
-
|
|
682
|
+
{{ message.status }}
|
|
640
683
|
</span>
|
|
641
684
|
|
|
642
685
|
<ng-template #typing>
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
686
|
+
<div class="k-chat-bubble">
|
|
687
|
+
<div class="k-typing-indicator">
|
|
688
|
+
<span></span>
|
|
689
|
+
<span></span>
|
|
690
|
+
<span></span>
|
|
691
|
+
</div>
|
|
648
692
|
</div>
|
|
649
|
-
</div>
|
|
650
693
|
</ng-template>
|
|
651
694
|
`
|
|
652
695
|
}]
|
|
@@ -862,21 +905,25 @@ MessageAttachmentsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
|
|
|
862
905
|
icon="chevron-left"
|
|
863
906
|
>
|
|
864
907
|
</button>
|
|
865
|
-
<div
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
[
|
|
869
|
-
[template]="template"
|
|
870
|
-
[class.k-selected]="isSelected(index)"
|
|
871
|
-
[class.k-focus]="isSelected(index)"
|
|
872
|
-
[class.k-card-wrap]="true"
|
|
873
|
-
[class.k-first]="first"
|
|
874
|
-
[class.k-last]="last"
|
|
875
|
-
[attr.tabindex]="tabbable && isSelected(index) ? '0' : '-1'"
|
|
876
|
-
(click)="itemClick(index)"
|
|
877
|
-
(keydown)="itemKeydown($event, att)"
|
|
908
|
+
<div
|
|
909
|
+
#deck
|
|
910
|
+
[class.k-card-deck]="carousel"
|
|
911
|
+
[class.k-card-list]="!carousel"
|
|
878
912
|
>
|
|
879
|
-
|
|
913
|
+
<kendo-chat-attachment #item
|
|
914
|
+
*ngFor="let att of attachments; index as index; first as first; last as last"
|
|
915
|
+
[attachment]="att"
|
|
916
|
+
[template]="template"
|
|
917
|
+
[class.k-selected]="isSelected(index)"
|
|
918
|
+
[class.k-focus]="isSelected(index)"
|
|
919
|
+
[class.k-card-wrap]="true"
|
|
920
|
+
[class.k-first]="first"
|
|
921
|
+
[class.k-last]="last"
|
|
922
|
+
[attr.tabindex]="tabbable && isSelected(index) ? '0' : '-1'"
|
|
923
|
+
(click)="itemClick(index)"
|
|
924
|
+
(keydown)="itemKeydown($event, att)"
|
|
925
|
+
>
|
|
926
|
+
</kendo-chat-attachment>
|
|
880
927
|
</div>
|
|
881
928
|
<button
|
|
882
929
|
*ngIf="carousel && scrollPosition < 1"
|
|
@@ -908,21 +955,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
908
955
|
icon="chevron-left"
|
|
909
956
|
>
|
|
910
957
|
</button>
|
|
911
|
-
<div
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
[
|
|
915
|
-
[template]="template"
|
|
916
|
-
[class.k-selected]="isSelected(index)"
|
|
917
|
-
[class.k-focus]="isSelected(index)"
|
|
918
|
-
[class.k-card-wrap]="true"
|
|
919
|
-
[class.k-first]="first"
|
|
920
|
-
[class.k-last]="last"
|
|
921
|
-
[attr.tabindex]="tabbable && isSelected(index) ? '0' : '-1'"
|
|
922
|
-
(click)="itemClick(index)"
|
|
923
|
-
(keydown)="itemKeydown($event, att)"
|
|
958
|
+
<div
|
|
959
|
+
#deck
|
|
960
|
+
[class.k-card-deck]="carousel"
|
|
961
|
+
[class.k-card-list]="!carousel"
|
|
924
962
|
>
|
|
925
|
-
|
|
963
|
+
<kendo-chat-attachment #item
|
|
964
|
+
*ngFor="let att of attachments; index as index; first as first; last as last"
|
|
965
|
+
[attachment]="att"
|
|
966
|
+
[template]="template"
|
|
967
|
+
[class.k-selected]="isSelected(index)"
|
|
968
|
+
[class.k-focus]="isSelected(index)"
|
|
969
|
+
[class.k-card-wrap]="true"
|
|
970
|
+
[class.k-first]="first"
|
|
971
|
+
[class.k-last]="last"
|
|
972
|
+
[attr.tabindex]="tabbable && isSelected(index) ? '0' : '-1'"
|
|
973
|
+
(click)="itemClick(index)"
|
|
974
|
+
(keydown)="itemKeydown($event, att)"
|
|
975
|
+
>
|
|
976
|
+
</kendo-chat-attachment>
|
|
926
977
|
</div>
|
|
927
978
|
<button
|
|
928
979
|
*ngIf="carousel && scrollPosition < 1"
|
|
@@ -1091,73 +1142,84 @@ class MessageListComponent {
|
|
|
1091
1142
|
MessageListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MessageListComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.IntlService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1092
1143
|
MessageListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MessageListComponent, selector: "kendo-chat-message-list", inputs: { messages: "messages", attachmentTemplate: "attachmentTemplate", messageTemplate: "messageTemplate", localization: "localization", user: "user" }, outputs: { executeAction: "executeAction", navigate: "navigate", resize: "resize" }, host: { properties: { "class.k-message-list-content": "this.cssClass" } }, viewQueries: [{ propertyName: "items", predicate: ChatItem, descendants: true }], ngImport: i0, template: `
|
|
1093
1144
|
<ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
>
|
|
1107
|
-
<img
|
|
1108
|
-
*ngIf="group.author.avatarUrl"
|
|
1109
|
-
[attr.src]="group.author.avatarUrl"
|
|
1110
|
-
[alt]="textFor('messageAvatarAlt')"
|
|
1111
|
-
class="k-avatar"
|
|
1112
|
-
/>
|
|
1113
|
-
<p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>
|
|
1114
|
-
<ng-container
|
|
1115
|
-
*ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
|
|
1116
|
-
>
|
|
1117
|
-
<img *ngIf="msg.user?.avatarUrl" [src]="msg.user?.avatarUrl" class="k-avatar">
|
|
1118
|
-
<kendo-chat-message #message
|
|
1119
|
-
[message]="msg"
|
|
1120
|
-
[tabbable]="lastGroup && lastMessage"
|
|
1121
|
-
[template]="messageTemplate"
|
|
1122
|
-
(click)="select(message)"
|
|
1123
|
-
(focus)="select(message)"
|
|
1124
|
-
[class.k-only]="group.messages.length === 1"
|
|
1125
|
-
[class.k-first]="group.messages.length > 1 && firstMessage"
|
|
1126
|
-
[class.k-last]="group.messages.length > 1 && lastMessage"
|
|
1145
|
+
<ng-container [ngSwitch]="group.type">
|
|
1146
|
+
<div
|
|
1147
|
+
*ngSwitchCase="'date-marker'"
|
|
1148
|
+
class="k-timestamp"
|
|
1149
|
+
>
|
|
1150
|
+
{{ formatTimeStamp(group.timestamp) }}
|
|
1151
|
+
</div>
|
|
1152
|
+
<div
|
|
1153
|
+
*ngSwitchCase="'message-group'"
|
|
1154
|
+
class="k-message-group"
|
|
1155
|
+
[class.k-alt]="isOwnMessage(group.messages[0])"
|
|
1156
|
+
[class.k-no-avatar]="!group.author.avatarUrl"
|
|
1127
1157
|
>
|
|
1128
|
-
|
|
1158
|
+
<div
|
|
1159
|
+
*ngIf="group.author.avatarUrl"
|
|
1160
|
+
class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
|
|
1161
|
+
>
|
|
1162
|
+
<span class="k-avatar-image">
|
|
1163
|
+
<img
|
|
1164
|
+
[attr.src]="group.author.avatarUrl"
|
|
1165
|
+
[alt]="textFor('messageAvatarAlt')"
|
|
1166
|
+
/>
|
|
1167
|
+
</span>
|
|
1168
|
+
</div>
|
|
1169
|
+
<ng-container
|
|
1170
|
+
*ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
|
|
1171
|
+
>
|
|
1172
|
+
<div
|
|
1173
|
+
*ngIf="msg.user?.avatarUrl"
|
|
1174
|
+
class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
|
|
1175
|
+
>
|
|
1176
|
+
<span class="k-avatar-image">
|
|
1177
|
+
<img [src]="msg.user?.avatarUrl">
|
|
1178
|
+
</span>
|
|
1179
|
+
</div>
|
|
1180
|
+
<kendo-chat-message #message
|
|
1181
|
+
[message]="msg"
|
|
1182
|
+
[tabbable]="lastGroup && lastMessage"
|
|
1183
|
+
[template]="messageTemplate"
|
|
1184
|
+
(click)="select(message)"
|
|
1185
|
+
(focus)="select(message)"
|
|
1186
|
+
[class.k-only]="group.messages.length === 1"
|
|
1187
|
+
[class.k-first]="group.messages.length > 1 && firstMessage"
|
|
1188
|
+
[class.k-last]="group.messages.length > 1 && lastMessage"
|
|
1189
|
+
>
|
|
1190
|
+
</kendo-chat-message>
|
|
1191
|
+
|
|
1192
|
+
<kendo-chat-attachment
|
|
1193
|
+
*ngIf="msg.attachments && msg.attachments.length === 1"
|
|
1194
|
+
[attachment]="msg.attachments[0]"
|
|
1195
|
+
[template]="attachmentTemplate"
|
|
1196
|
+
>
|
|
1197
|
+
</kendo-chat-attachment>
|
|
1198
|
+
</ng-container>
|
|
1199
|
+
</div>
|
|
1129
1200
|
|
|
1130
|
-
<kendo-chat-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1201
|
+
<kendo-chat-message-attachments #attachments
|
|
1202
|
+
*ngSwitchCase="'attachment-group'"
|
|
1203
|
+
[attachments]="group.attachments"
|
|
1204
|
+
[layout]="group.attachmentLayout"
|
|
1205
|
+
[localization]="localization"
|
|
1206
|
+
[tabbable]="lastGroup"
|
|
1207
|
+
[template]="attachmentTemplate"
|
|
1208
|
+
(click)="select(attachments)"
|
|
1209
|
+
(focus)="select(attachments)"
|
|
1134
1210
|
>
|
|
1135
|
-
</kendo-chat-
|
|
1136
|
-
</ng-container>
|
|
1137
|
-
</div>
|
|
1211
|
+
</kendo-chat-message-attachments>
|
|
1138
1212
|
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1148
|
-
>
|
|
1149
|
-
</kendo-chat-message-attachments>
|
|
1150
|
-
|
|
1151
|
-
<kendo-chat-suggested-actions #actions
|
|
1152
|
-
*ngSwitchCase="'action-group'"
|
|
1153
|
-
[actions]="group.actions"
|
|
1154
|
-
[tabbable]="lastGroup"
|
|
1155
|
-
(dispatch)="dispatchAction($event, last(group.messages))"
|
|
1156
|
-
(click)="select(actions)"
|
|
1157
|
-
(focus)="select(actions)"
|
|
1158
|
-
>
|
|
1159
|
-
</kendo-chat-suggested-actions>
|
|
1160
|
-
</ng-container>
|
|
1213
|
+
<kendo-chat-suggested-actions #actions
|
|
1214
|
+
*ngSwitchCase="'action-group'"
|
|
1215
|
+
[actions]="group.actions"
|
|
1216
|
+
[tabbable]="lastGroup"
|
|
1217
|
+
(dispatch)="dispatchAction($event, last(group.messages))"
|
|
1218
|
+
(click)="select(actions)"
|
|
1219
|
+
(focus)="select(actions)"
|
|
1220
|
+
>
|
|
1221
|
+
</kendo-chat-suggested-actions>
|
|
1222
|
+
</ng-container>
|
|
1161
1223
|
</ng-container>
|
|
1162
1224
|
<kendo-resize-sensor (resize)="onResize()">
|
|
1163
1225
|
</kendo-resize-sensor>
|
|
@@ -1168,73 +1230,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
|
|
|
1168
1230
|
selector: 'kendo-chat-message-list',
|
|
1169
1231
|
template: `
|
|
1170
1232
|
<ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
>
|
|
1184
|
-
<img
|
|
1185
|
-
*ngIf="group.author.avatarUrl"
|
|
1186
|
-
[attr.src]="group.author.avatarUrl"
|
|
1187
|
-
[alt]="textFor('messageAvatarAlt')"
|
|
1188
|
-
class="k-avatar"
|
|
1189
|
-
/>
|
|
1190
|
-
<p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>
|
|
1191
|
-
<ng-container
|
|
1192
|
-
*ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
|
|
1193
|
-
>
|
|
1194
|
-
<img *ngIf="msg.user?.avatarUrl" [src]="msg.user?.avatarUrl" class="k-avatar">
|
|
1195
|
-
<kendo-chat-message #message
|
|
1196
|
-
[message]="msg"
|
|
1197
|
-
[tabbable]="lastGroup && lastMessage"
|
|
1198
|
-
[template]="messageTemplate"
|
|
1199
|
-
(click)="select(message)"
|
|
1200
|
-
(focus)="select(message)"
|
|
1201
|
-
[class.k-only]="group.messages.length === 1"
|
|
1202
|
-
[class.k-first]="group.messages.length > 1 && firstMessage"
|
|
1203
|
-
[class.k-last]="group.messages.length > 1 && lastMessage"
|
|
1233
|
+
<ng-container [ngSwitch]="group.type">
|
|
1234
|
+
<div
|
|
1235
|
+
*ngSwitchCase="'date-marker'"
|
|
1236
|
+
class="k-timestamp"
|
|
1237
|
+
>
|
|
1238
|
+
{{ formatTimeStamp(group.timestamp) }}
|
|
1239
|
+
</div>
|
|
1240
|
+
<div
|
|
1241
|
+
*ngSwitchCase="'message-group'"
|
|
1242
|
+
class="k-message-group"
|
|
1243
|
+
[class.k-alt]="isOwnMessage(group.messages[0])"
|
|
1244
|
+
[class.k-no-avatar]="!group.author.avatarUrl"
|
|
1204
1245
|
>
|
|
1205
|
-
|
|
1246
|
+
<div
|
|
1247
|
+
*ngIf="group.author.avatarUrl"
|
|
1248
|
+
class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
|
|
1249
|
+
>
|
|
1250
|
+
<span class="k-avatar-image">
|
|
1251
|
+
<img
|
|
1252
|
+
[attr.src]="group.author.avatarUrl"
|
|
1253
|
+
[alt]="textFor('messageAvatarAlt')"
|
|
1254
|
+
/>
|
|
1255
|
+
</span>
|
|
1256
|
+
</div>
|
|
1257
|
+
<ng-container
|
|
1258
|
+
*ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
|
|
1259
|
+
>
|
|
1260
|
+
<div
|
|
1261
|
+
*ngIf="msg.user?.avatarUrl"
|
|
1262
|
+
class="k-avatar k-avatar-md k-avatar-solid k-avatar-solid-primary k-rounded-full"
|
|
1263
|
+
>
|
|
1264
|
+
<span class="k-avatar-image">
|
|
1265
|
+
<img [src]="msg.user?.avatarUrl">
|
|
1266
|
+
</span>
|
|
1267
|
+
</div>
|
|
1268
|
+
<kendo-chat-message #message
|
|
1269
|
+
[message]="msg"
|
|
1270
|
+
[tabbable]="lastGroup && lastMessage"
|
|
1271
|
+
[template]="messageTemplate"
|
|
1272
|
+
(click)="select(message)"
|
|
1273
|
+
(focus)="select(message)"
|
|
1274
|
+
[class.k-only]="group.messages.length === 1"
|
|
1275
|
+
[class.k-first]="group.messages.length > 1 && firstMessage"
|
|
1276
|
+
[class.k-last]="group.messages.length > 1 && lastMessage"
|
|
1277
|
+
>
|
|
1278
|
+
</kendo-chat-message>
|
|
1206
1279
|
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1280
|
+
<kendo-chat-attachment
|
|
1281
|
+
*ngIf="msg.attachments && msg.attachments.length === 1"
|
|
1282
|
+
[attachment]="msg.attachments[0]"
|
|
1283
|
+
[template]="attachmentTemplate"
|
|
1284
|
+
>
|
|
1285
|
+
</kendo-chat-attachment>
|
|
1286
|
+
</ng-container>
|
|
1287
|
+
</div>
|
|
1288
|
+
|
|
1289
|
+
<kendo-chat-message-attachments #attachments
|
|
1290
|
+
*ngSwitchCase="'attachment-group'"
|
|
1291
|
+
[attachments]="group.attachments"
|
|
1292
|
+
[layout]="group.attachmentLayout"
|
|
1293
|
+
[localization]="localization"
|
|
1294
|
+
[tabbable]="lastGroup"
|
|
1295
|
+
[template]="attachmentTemplate"
|
|
1296
|
+
(click)="select(attachments)"
|
|
1297
|
+
(focus)="select(attachments)"
|
|
1211
1298
|
>
|
|
1212
|
-
</kendo-chat-
|
|
1213
|
-
</ng-container>
|
|
1214
|
-
</div>
|
|
1299
|
+
</kendo-chat-message-attachments>
|
|
1215
1300
|
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
>
|
|
1226
|
-
</kendo-chat-message-attachments>
|
|
1227
|
-
|
|
1228
|
-
<kendo-chat-suggested-actions #actions
|
|
1229
|
-
*ngSwitchCase="'action-group'"
|
|
1230
|
-
[actions]="group.actions"
|
|
1231
|
-
[tabbable]="lastGroup"
|
|
1232
|
-
(dispatch)="dispatchAction($event, last(group.messages))"
|
|
1233
|
-
(click)="select(actions)"
|
|
1234
|
-
(focus)="select(actions)"
|
|
1235
|
-
>
|
|
1236
|
-
</kendo-chat-suggested-actions>
|
|
1237
|
-
</ng-container>
|
|
1301
|
+
<kendo-chat-suggested-actions #actions
|
|
1302
|
+
*ngSwitchCase="'action-group'"
|
|
1303
|
+
[actions]="group.actions"
|
|
1304
|
+
[tabbable]="lastGroup"
|
|
1305
|
+
(dispatch)="dispatchAction($event, last(group.messages))"
|
|
1306
|
+
(click)="select(actions)"
|
|
1307
|
+
(focus)="select(actions)"
|
|
1308
|
+
>
|
|
1309
|
+
</kendo-chat-suggested-actions>
|
|
1310
|
+
</ng-container>
|
|
1238
1311
|
</ng-container>
|
|
1239
1312
|
<kendo-resize-sensor (resize)="onResize()">
|
|
1240
1313
|
</kendo-resize-sensor>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-angular-conversational-ui",
|
|
3
|
-
"version": "13.4.0-develop.
|
|
3
|
+
"version": "13.4.0-develop.3",
|
|
4
4
|
"description": "Kendo UI for Angular Conversational UI components",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"author": "Progress",
|
|
@@ -24,16 +24,16 @@
|
|
|
24
24
|
"@angular/core": "13 - 16",
|
|
25
25
|
"@angular/platform-browser": "13 - 16",
|
|
26
26
|
"@progress/kendo-licensing": "^1.0.2",
|
|
27
|
-
"@progress/kendo-angular-buttons": "13.4.0-develop.
|
|
28
|
-
"@progress/kendo-angular-common": "13.4.0-develop.
|
|
29
|
-
"@progress/kendo-angular-intl": "13.4.0-develop.
|
|
30
|
-
"@progress/kendo-angular-l10n": "13.4.0-develop.
|
|
31
|
-
"@progress/kendo-angular-popup": "13.4.0-develop.
|
|
27
|
+
"@progress/kendo-angular-buttons": "13.4.0-develop.3",
|
|
28
|
+
"@progress/kendo-angular-common": "13.4.0-develop.3",
|
|
29
|
+
"@progress/kendo-angular-intl": "13.4.0-develop.3",
|
|
30
|
+
"@progress/kendo-angular-l10n": "13.4.0-develop.3",
|
|
31
|
+
"@progress/kendo-angular-popup": "13.4.0-develop.3",
|
|
32
32
|
"rxjs": "^6.5.3 || ^7.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"tslib": "^2.3.1",
|
|
36
|
-
"@progress/kendo-angular-schematics": "13.4.0-develop.
|
|
36
|
+
"@progress/kendo-angular-schematics": "13.4.0-develop.3"
|
|
37
37
|
},
|
|
38
38
|
"schematics": "./schematics/collection.json",
|
|
39
39
|
"module": "fesm2015/progress-kendo-angular-conversational-ui.mjs",
|