@progress/kendo-angular-conversational-ui 4.1.0 → 5.0.0-dev.202204131603

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.
Files changed (163) hide show
  1. package/{dist/es2015/api → api}/action.interface.d.ts +0 -0
  2. package/{dist/es2015/api → api}/attachment.interface.d.ts +0 -0
  3. package/{dist/es2015/api → api}/execute-action-event.d.ts +1 -1
  4. package/{dist/es/api/user.interface.js → api/index.d.ts} +6 -0
  5. package/{dist/es2015/api → api}/message.interface.d.ts +0 -0
  6. package/{dist/es2015/api → api}/post-message-event.d.ts +0 -0
  7. package/{dist/es2015/api → api}/preventable-event.d.ts +0 -0
  8. package/{dist/es2015/api → api}/user.interface.d.ts +0 -0
  9. package/bundles/kendo-angular-conversational-ui.umd.js +5 -0
  10. package/{dist/es2015/cards → cards}/hero-card.component.d.ts +3 -0
  11. package/{dist/es2015/chat → chat}/attachment-template.directive.d.ts +3 -0
  12. package/{dist/es2015/chat → chat}/attachment.component.d.ts +9 -5
  13. package/{dist/es2015/chat → chat}/builtin-actions.d.ts +0 -0
  14. package/{dist/es2015/chat → chat}/chat-item.d.ts +0 -0
  15. package/{dist/es2015/chat → chat}/chat-view.d.ts +1 -1
  16. package/{dist/es2015/chat → chat}/chat.component.d.ts +7 -7
  17. package/{dist/es2015/chat → chat}/chat.directives.d.ts +0 -0
  18. package/chat/chat.module.d.ts +49 -0
  19. package/{dist/es2015/chat → chat}/l10n/custom-messages.component.d.ts +4 -1
  20. package/{dist/es2015/chat → chat}/l10n/localized-messages.directive.d.ts +3 -0
  21. package/{dist/es2015/chat → chat}/l10n/messages.d.ts +3 -0
  22. package/{dist/es2015/chat → chat}/message-attachments.component.d.ts +5 -2
  23. package/{dist/es2015/chat → chat}/message-box.component.d.ts +4 -1
  24. package/{dist/es2015/chat → chat}/message-box.directive.d.ts +3 -0
  25. package/{dist/es2015/chat → chat}/message-list.component.d.ts +9 -8
  26. package/{dist/es2015/chat → chat}/message-template.directive.d.ts +3 -0
  27. package/{dist/es2015/chat → chat}/message.component.d.ts +4 -1
  28. package/{dist/es2015/chat → chat}/suggested-actions.component.d.ts +4 -1
  29. package/common/focused-state.directive.d.ts +15 -0
  30. package/{dist/es2015/common → common}/keys.enum.d.ts +0 -0
  31. package/{dist/es2015/common → common}/models/message-box-options.d.ts +0 -0
  32. package/{dist/es2015/common → common}/scroll-anchor.directive.d.ts +3 -0
  33. package/{dist/es2015/common → common}/utils.d.ts +0 -0
  34. package/{dist/es2015 → esm2015}/api/action.interface.js +2 -1
  35. package/{dist/es2015 → esm2015}/api/attachment.interface.js +1 -0
  36. package/{dist/es2015 → esm2015}/api/execute-action-event.js +0 -0
  37. package/{dist/es/api/attachment.interface.js → esm2015/api/index.js} +6 -0
  38. package/{dist/es → esm2015}/api/message.interface.js +1 -0
  39. package/{dist/es2015 → esm2015}/api/post-message-event.js +0 -0
  40. package/{dist/es2015 → esm2015}/api/preventable-event.js +0 -0
  41. package/{dist/es2015 → esm2015}/api/user.interface.js +1 -0
  42. package/esm2015/cards/hero-card.component.js +90 -0
  43. package/{dist/es2015 → esm2015}/chat/attachment-template.directive.js +14 -12
  44. package/esm2015/chat/attachment.component.js +83 -0
  45. package/{dist/es2015 → esm2015}/chat/builtin-actions.js +13 -16
  46. package/{dist/es2015 → esm2015}/chat/chat-item.js +0 -0
  47. package/{dist/es2015 → esm2015}/chat/chat-view.js +0 -6
  48. package/esm2015/chat/chat.component.js +246 -0
  49. package/{dist/es → esm2015}/chat/chat.directives.js +0 -0
  50. package/{dist/es2015 → esm2015}/chat/chat.module.js +43 -15
  51. package/esm2015/chat/l10n/custom-messages.component.js +42 -0
  52. package/esm2015/chat/l10n/localized-messages.directive.js +37 -0
  53. package/esm2015/chat/l10n/messages.js +25 -0
  54. package/{dist/es2015 → esm2015}/chat/message-attachments.component.js +71 -48
  55. package/esm2015/chat/message-box.component.js +141 -0
  56. package/esm2015/chat/message-box.directive.js +24 -0
  57. package/esm2015/chat/message-list.component.js +279 -0
  58. package/{dist/es2015 → esm2015}/chat/message-template.directive.js +14 -12
  59. package/esm2015/chat/message.component.js +140 -0
  60. package/esm2015/chat/suggested-actions.component.js +113 -0
  61. package/esm2015/common/focused-state.directive.js +37 -0
  62. package/{dist/es2015 → esm2015}/common/keys.enum.js +1 -0
  63. package/{dist/es → esm2015}/common/models/message-box-options.js +1 -0
  64. package/{dist/es2015 → esm2015}/common/scroll-anchor.directive.js +20 -26
  65. package/{dist/es2015 → esm2015}/common/utils.js +0 -0
  66. package/{dist/es/api/action.interface.js → esm2015/kendo-angular-conversational-ui.js} +4 -1
  67. package/esm2015/main.js +10 -0
  68. package/{dist/es2015 → esm2015}/package-metadata.js +1 -1
  69. package/fesm2015/kendo-angular-conversational-ui.js +1757 -0
  70. package/{dist/es2015/common/focused-state.directive.d.ts → kendo-angular-conversational-ui.d.ts} +3 -6
  71. package/main.d.ts +11 -0
  72. package/{dist/es2015/package-metadata.d.ts → package-metadata.d.ts} +0 -0
  73. package/package.json +38 -107
  74. package/schematics/ngAdd/index.js +5 -2
  75. package/schematics/ngAdd/index.js.map +1 -1
  76. package/dist/cdn/js/kendo-angular-conversational-ui.js +0 -20
  77. package/dist/cdn/main.js +0 -5
  78. package/dist/es/api/execute-action-event.js +0 -24
  79. package/dist/es/api/post-message-event.js +0 -18
  80. package/dist/es/api/preventable-event.js +0 -32
  81. package/dist/es/cards/hero-card.component.js +0 -54
  82. package/dist/es/chat/attachment-template.directive.js +0 -32
  83. package/dist/es/chat/attachment.component.js +0 -65
  84. package/dist/es/chat/builtin-actions.js +0 -28
  85. package/dist/es/chat/chat-item.js +0 -13
  86. package/dist/es/chat/chat-view.js +0 -92
  87. package/dist/es/chat/chat.component.js +0 -190
  88. package/dist/es/chat/chat.module.js +0 -80
  89. package/dist/es/chat/l10n/custom-messages.component.js +0 -45
  90. package/dist/es/chat/l10n/localized-messages.directive.js +0 -36
  91. package/dist/es/chat/l10n/messages.js +0 -26
  92. package/dist/es/chat/message-attachments.component.js +0 -148
  93. package/dist/es/chat/message-box.component.js +0 -124
  94. package/dist/es/chat/message-box.directive.js +0 -24
  95. package/dist/es/chat/message-list.component.js +0 -165
  96. package/dist/es/chat/message-template.directive.js +0 -32
  97. package/dist/es/chat/message.component.js +0 -77
  98. package/dist/es/chat/suggested-actions.component.js +0 -91
  99. package/dist/es/common/focused-state.directive.js +0 -43
  100. package/dist/es/common/keys.enum.js +0 -4
  101. package/dist/es/common/scroll-anchor.directive.js +0 -87
  102. package/dist/es/common/utils.js +0 -13
  103. package/dist/es/index.js +0 -22
  104. package/dist/es/main.js +0 -8
  105. package/dist/es/package-metadata.js +0 -15
  106. package/dist/es2015/api/message.interface.js +0 -4
  107. package/dist/es2015/cards/hero-card.component.js +0 -79
  108. package/dist/es2015/chat/attachment.component.js +0 -66
  109. package/dist/es2015/chat/chat.component.js +0 -214
  110. package/dist/es2015/chat/chat.directives.js +0 -8
  111. package/dist/es2015/chat/chat.module.d.ts +0 -27
  112. package/dist/es2015/chat/l10n/custom-messages.component.js +0 -37
  113. package/dist/es2015/chat/l10n/localized-messages.directive.js +0 -32
  114. package/dist/es2015/chat/l10n/messages.js +0 -20
  115. package/dist/es2015/chat/message-box.component.js +0 -157
  116. package/dist/es2015/chat/message-box.directive.js +0 -23
  117. package/dist/es2015/chat/message-list.component.js +0 -227
  118. package/dist/es2015/chat/message.component.js +0 -107
  119. package/dist/es2015/chat/suggested-actions.component.js +0 -105
  120. package/dist/es2015/common/focused-state.directive.js +0 -45
  121. package/dist/es2015/common/models/message-box-options.js +0 -4
  122. package/dist/es2015/index.d.ts +0 -22
  123. package/dist/es2015/index.js +0 -22
  124. package/dist/es2015/index.metadata.json +0 -1
  125. package/dist/es2015/main.d.ts +0 -13
  126. package/dist/es2015/main.js +0 -8
  127. package/dist/fesm2015/index.js +0 -1554
  128. package/dist/fesm5/index.js +0 -1383
  129. package/dist/npm/api/action.interface.js +0 -7
  130. package/dist/npm/api/attachment.interface.js +0 -6
  131. package/dist/npm/api/execute-action-event.js +0 -26
  132. package/dist/npm/api/message.interface.js +0 -6
  133. package/dist/npm/api/post-message-event.js +0 -20
  134. package/dist/npm/api/preventable-event.js +0 -34
  135. package/dist/npm/api/user.interface.js +0 -6
  136. package/dist/npm/cards/hero-card.component.js +0 -56
  137. package/dist/npm/chat/attachment-template.directive.js +0 -34
  138. package/dist/npm/chat/attachment.component.js +0 -67
  139. package/dist/npm/chat/builtin-actions.js +0 -33
  140. package/dist/npm/chat/chat-item.js +0 -15
  141. package/dist/npm/chat/chat-view.js +0 -98
  142. package/dist/npm/chat/chat.component.js +0 -192
  143. package/dist/npm/chat/chat.directives.js +0 -14
  144. package/dist/npm/chat/chat.module.js +0 -82
  145. package/dist/npm/chat/l10n/custom-messages.component.js +0 -47
  146. package/dist/npm/chat/l10n/localized-messages.directive.js +0 -38
  147. package/dist/npm/chat/l10n/messages.js +0 -28
  148. package/dist/npm/chat/message-attachments.component.js +0 -150
  149. package/dist/npm/chat/message-box.component.js +0 -126
  150. package/dist/npm/chat/message-box.directive.js +0 -26
  151. package/dist/npm/chat/message-list.component.js +0 -167
  152. package/dist/npm/chat/message-template.directive.js +0 -34
  153. package/dist/npm/chat/message.component.js +0 -79
  154. package/dist/npm/chat/suggested-actions.component.js +0 -93
  155. package/dist/npm/common/focused-state.directive.js +0 -45
  156. package/dist/npm/common/keys.enum.js +0 -6
  157. package/dist/npm/common/models/message-box-options.js +0 -6
  158. package/dist/npm/common/scroll-anchor.directive.js +0 -89
  159. package/dist/npm/common/utils.js +0 -15
  160. package/dist/npm/index.js +0 -39
  161. package/dist/npm/main.js +0 -11
  162. package/dist/npm/package-metadata.js +0 -17
  163. package/dist/systemjs/kendo-angular-conversational-ui.js +0 -5
@@ -1,1554 +0,0 @@
1
- /**-----------------------------------------------------------------------------------------
2
- * Copyright © 2021 Progress Software Corporation. All rights reserved.
3
- * Licensed under commercial license. See LICENSE.md in the project root for more information
4
- *-------------------------------------------------------------------------------------------*/
5
- import { __decorate, __param, __metadata } from 'tslib';
6
- import { Directive, Optional, TemplateRef, EventEmitter, HostBinding, ViewChild, ElementRef, Input, Output, Component, isDevMode, ContentChild, NgZone, forwardRef, HostListener, ViewChildren, QueryList, Renderer2, NgModule } from '@angular/core';
7
- import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
8
- import { validatePackage } from '@progress/kendo-licensing';
9
- import { Keys, ResizeSensorModule } from '@progress/kendo-angular-common';
10
- import { ButtonModule } from '@progress/kendo-angular-buttons';
11
- import { CommonModule } from '@angular/common';
12
- import { fromEvent } from 'rxjs';
13
- import { debounceTime } from 'rxjs/operators';
14
- import { IntlService } from '@progress/kendo-angular-intl';
15
-
16
- /**
17
- * Defines a template that will be used for displaying message attachments. To define an attachment
18
- * template, nest an `<ng-template>` tag with the `kendoChatAttachmentTemplate` attribute inside the
19
- * `<kendo-chat>` component. The template context is set to the attachment instance. For more information,
20
- * refer to the article on [message attachments]({% slug attachments_chat %}).
21
- *
22
- * {% meta height:700 %}
23
- * {% embed_file attachments/templates/app.component.ts preview %}
24
- * {% embed_file shared/app.module.ts preview %}
25
- * {% embed_file shared/main.ts hidden %}
26
- * {% endmeta %}
27
- */
28
- let AttachmentTemplateDirective = class AttachmentTemplateDirective {
29
- constructor(templateRef) {
30
- this.templateRef = templateRef;
31
- }
32
- };
33
- AttachmentTemplateDirective = __decorate([
34
- Directive({
35
- selector: '[kendoChatAttachmentTemplate]'
36
- }),
37
- __param(0, Optional()),
38
- __metadata("design:paramtypes", [TemplateRef])
39
- ], AttachmentTemplateDirective);
40
-
41
- /**
42
- * Arguments for the `SendMessage` event.
43
- *
44
- */
45
- class SendMessageEvent {
46
- /**
47
- * @hidden
48
- */
49
- constructor(message) {
50
- this.message = message;
51
- }
52
- }
53
-
54
- const noop = () => { };
55
- const ɵ1 = (action, sender) => {
56
- sender.sendMessage.emit(new SendMessageEvent({
57
- author: sender.user,
58
- text: action.value,
59
- timestamp: new Date()
60
- }));
61
- }, ɵ2 = (action) => {
62
- window.open('tel:' + action.value);
63
- }, ɵ3 = (action) => {
64
- window.open(action.value);
65
- };
66
- const handlers = {
67
- 'reply': ɵ1,
68
- 'call': ɵ2,
69
- 'openUrl': ɵ3
70
- };
71
- /**
72
- * @hidden
73
- */
74
- const makeHandler = (action) => handlers[action.type] || noop;
75
-
76
- /**
77
- * Defines a template that will be used for displaying Chat messages. To define an attachment
78
- * template, nest an `<ng-template>` tag with the `kendoChatMessageTemplate` attribute inside the
79
- * `<kendo-chat>` component. The template context is set to the message instance. For more information,
80
- * refer to the article on [message templates]({% slug message_templates_chat %}).
81
- *
82
- * {% meta height:700 %}
83
- * {% embed_file messages/templates/app.component.ts preview %}
84
- * {% embed_file shared/app.module.ts preview %}
85
- * {% embed_file shared/main.ts hidden %}
86
- * {% endmeta %}
87
- */
88
- let MessageTemplateDirective = class MessageTemplateDirective {
89
- constructor(templateRef) {
90
- this.templateRef = templateRef;
91
- }
92
- };
93
- MessageTemplateDirective = __decorate([
94
- Directive({
95
- selector: '[kendoChatMessageTemplate]'
96
- }),
97
- __param(0, Optional()),
98
- __metadata("design:paramtypes", [TemplateRef])
99
- ], MessageTemplateDirective);
100
-
101
- /**
102
- * @hidden
103
- */
104
- const packageMetadata = {
105
- name: '@progress/kendo-angular-conversational-ui',
106
- productName: 'Kendo UI for Angular',
107
- productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
108
- publishDate: 1649323827,
109
- version: '',
110
- licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
111
- };
112
-
113
- /**
114
- * Creates a message box area that overrides the default message box of the Conversational UI Component.
115
- * To define a message-box template, nest an `<ng-template>` tag with the `kendoChatMessageBoxTemplate` directive inside the `<kendo-chat>` tag
116
- * [see example]({% slug message_box %}#toc-message-box-template).
117
- */
118
- let ChatMessageBoxTemplateDirective = class ChatMessageBoxTemplateDirective {
119
- constructor(templateRef) {
120
- this.templateRef = templateRef;
121
- }
122
- };
123
- ChatMessageBoxTemplateDirective = __decorate([
124
- Directive({
125
- selector: '[kendoChatMessageBoxTemplate]'
126
- }),
127
- __metadata("design:paramtypes", [TemplateRef])
128
- ], ChatMessageBoxTemplateDirective);
129
-
130
- // tslint:disable-next-line:max-line-length
131
- 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>';
132
- /**
133
- * @hidden
134
- */
135
- let MessageBoxComponent = class MessageBoxComponent {
136
- /**
137
- * @hidden
138
- */
139
- constructor() {
140
- this.hostClasses = 'k-message-box k-input k-input-md k-rounded-md k-input-solid';
141
- this.sendMessage = new EventEmitter();
142
- }
143
- get messageBoxValue() {
144
- return this.type === 'textarea';
145
- }
146
- /**
147
- * @hidden
148
- */
149
- sendClick() {
150
- const input = this.messageBoxInput.nativeElement;
151
- const value = input.value;
152
- if (!value) {
153
- return;
154
- }
155
- const message = {
156
- author: this.user,
157
- text: value,
158
- timestamp: new Date()
159
- };
160
- this.sendMessage.emit(new SendMessageEvent(message));
161
- input.value = null;
162
- input.focus();
163
- this.autoScroll = true;
164
- }
165
- /**
166
- * @hidden
167
- */
168
- inputKeydown(e) {
169
- if (e.keyCode === Keys.Enter) {
170
- this.sendClick();
171
- }
172
- }
173
- /**
174
- * @hidden
175
- */
176
- textAreaKeydown(e) {
177
- const isEnter = e.keyCode === Keys.Enter;
178
- if (!isEnter) {
179
- return;
180
- }
181
- const newLine = (e.metaKey || e.ctrlKey);
182
- const enterOnly = !(e.shiftKey || e.metaKey || e.ctrlKey);
183
- if (enterOnly) {
184
- e.preventDefault();
185
- this.sendClick();
186
- }
187
- if (newLine) {
188
- this.messageBoxInput.nativeElement.value += `\r\n`;
189
- }
190
- }
191
- /**
192
- * @hidden
193
- */
194
- textFor(key) {
195
- return this.localization.get(key);
196
- }
197
- };
198
- __decorate([
199
- HostBinding('class'),
200
- __metadata("design:type", String)
201
- ], MessageBoxComponent.prototype, "hostClasses", void 0);
202
- __decorate([
203
- HostBinding('class.\!k-align-items-end'),
204
- __metadata("design:type", Boolean),
205
- __metadata("design:paramtypes", [])
206
- ], MessageBoxComponent.prototype, "messageBoxValue", null);
207
- __decorate([
208
- ViewChild('messageBoxInput', { static: false }),
209
- __metadata("design:type", ElementRef)
210
- ], MessageBoxComponent.prototype, "messageBoxInput", void 0);
211
- __decorate([
212
- Input(),
213
- __metadata("design:type", Object)
214
- ], MessageBoxComponent.prototype, "user", void 0);
215
- __decorate([
216
- Input(),
217
- __metadata("design:type", Boolean)
218
- ], MessageBoxComponent.prototype, "autoScroll", void 0);
219
- __decorate([
220
- Input(),
221
- __metadata("design:type", String)
222
- ], MessageBoxComponent.prototype, "type", void 0);
223
- __decorate([
224
- Input(),
225
- __metadata("design:type", LocalizationService)
226
- ], MessageBoxComponent.prototype, "localization", void 0);
227
- __decorate([
228
- Input(),
229
- __metadata("design:type", ChatMessageBoxTemplateDirective)
230
- ], MessageBoxComponent.prototype, "messageBoxTemplate", void 0);
231
- __decorate([
232
- Output(),
233
- __metadata("design:type", EventEmitter)
234
- ], MessageBoxComponent.prototype, "sendMessage", void 0);
235
- MessageBoxComponent = __decorate([
236
- Component({
237
- selector: 'kendo-message-box',
238
- template: `
239
- <ng-container *ngIf="!messageBoxTemplate">
240
- <input
241
- *ngIf="type === 'textbox'"
242
- #messageBoxInput
243
- kendoChatFocusedState
244
- type="text"
245
- class="k-textbox k-input k-input-md k-input-solid"
246
- [placeholder]="textFor('messagePlaceholder')"
247
- (keydown)="inputKeydown($event)"
248
- />
249
-
250
- <textarea
251
- *ngIf="type === 'textarea'"
252
- #messageBoxInput
253
- kendoChatFocusedState
254
- [rows]="3"
255
- class="k-textarea k-input k-input-md k-input-solid !k-overflow-y-auto k-resize-none"
256
- [placeholder]="textFor('messagePlaceholder')"
257
- (keydown)="textAreaKeydown($event)"
258
- ></textarea>
259
-
260
- <button
261
- kendoButton
262
- fillMode="flat"
263
- class="k-button-send"
264
- [tabindex]="0"
265
- [attr.title]="textFor('send')"
266
- (click)="sendClick()"
267
- >
268
- ${sendIcon}
269
- </button>
270
- </ng-container>
271
-
272
- <ng-template *ngIf="messageBoxTemplate" [ngTemplateOutlet]="messageBoxTemplate?.templateRef"></ng-template>
273
- `
274
- })
275
- ], MessageBoxComponent);
276
-
277
- /**
278
- * Represents the Kendo UI Chat component for Angular.
279
- *
280
- * {% meta height:700 %}
281
- * {% embed_file echo/app.component.ts preview %}
282
- * {% embed_file shared/app.module.ts %}
283
- * {% embed_file shared/main.ts hidden %}
284
- * {% endmeta %}
285
- *
286
- */
287
- let ChatComponent = class ChatComponent {
288
- constructor(localization, zone) {
289
- this.localization = localization;
290
- this.zone = zone;
291
- /**
292
- * Used to switch between a one-liner input or a textarea.
293
- * ([see example]({% slug message_box %})#toc-message-box-types).
294
- * @default input
295
- */
296
- this.messageBoxType = 'textbox';
297
- /**
298
- * Fires when the user types a message and clicks the **Send** button or presses **Enter**.
299
- * Emits the [`SendMessageEvent`]({% slug api_conversational-ui_sendmessageevent %}).
300
- *
301
- * > The message is not automatically appended to the `messages` array.
302
- */
303
- this.sendMessage = new EventEmitter();
304
- /**
305
- * Fires when the user clicks a quick action button.
306
- * The Chat internally handles the `reply`, `openUrl`, and `call` [known actions]({% slug api_conversational-ui_actiontype %}).
307
- *
308
- * Emits the [`ExecuteActionEvent`]({% slug api_conversational-ui_executeactionevent %}).
309
- * The event is preventable. If `preventDefault` is called, the built-in action will be suppressed.
310
- */
311
- this.executeAction = new EventEmitter();
312
- /**
313
- * @hidden
314
- */
315
- this.autoScroll = true;
316
- validatePackage(packageMetadata);
317
- this.direction = localization.rtl ? 'rtl' : 'ltr';
318
- this.localizationChangeSubscription = localization.changes.subscribe(({ rtl }) => {
319
- this.direction = rtl ? 'rtl' : 'ltr';
320
- });
321
- }
322
- get className() {
323
- return 'k-chat';
324
- }
325
- get dirAttr() {
326
- return this.direction;
327
- }
328
- /**
329
- * @hidden
330
- */
331
- get localizationText() {
332
- return this.localization;
333
- }
334
- ngOnChanges() {
335
- this.zone.runOutsideAngular(() => setTimeout(() => {
336
- this.messageList.nativeElement.style.flex = '1 1 auto';
337
- }));
338
- }
339
- ngAfterViewInit() {
340
- if (!isDevMode()) {
341
- return;
342
- }
343
- if (!this.user) {
344
- throw new Error('User must be set and have a valid id.');
345
- }
346
- }
347
- ngOnDestroy() {
348
- if (this.localizationChangeSubscription) {
349
- this.localizationChangeSubscription.unsubscribe();
350
- }
351
- }
352
- /**
353
- * @hidden
354
- */
355
- dispatchAction(e) {
356
- this.executeAction.emit(e);
357
- if (!e.isDefaultPrevented()) {
358
- const handler = makeHandler(e.action);
359
- handler(e.action, this);
360
- if (!this.messageBoxTemplate) {
361
- this.messageBox.messageBoxInput.nativeElement.focus();
362
- }
363
- }
364
- }
365
- /**
366
- * @hidden
367
- */
368
- textFor(key) {
369
- return this.localization.get(key);
370
- }
371
- };
372
- __decorate([
373
- Input(),
374
- __metadata("design:type", Array)
375
- ], ChatComponent.prototype, "messages", void 0);
376
- __decorate([
377
- Input(),
378
- __metadata("design:type", Object)
379
- ], ChatComponent.prototype, "user", void 0);
380
- __decorate([
381
- Input(),
382
- __metadata("design:type", String)
383
- ], ChatComponent.prototype, "messageBoxType", void 0);
384
- __decorate([
385
- Output(),
386
- __metadata("design:type", EventEmitter)
387
- ], ChatComponent.prototype, "sendMessage", void 0);
388
- __decorate([
389
- Output(),
390
- __metadata("design:type", EventEmitter)
391
- ], ChatComponent.prototype, "executeAction", void 0);
392
- __decorate([
393
- HostBinding('class'),
394
- __metadata("design:type", String),
395
- __metadata("design:paramtypes", [])
396
- ], ChatComponent.prototype, "className", null);
397
- __decorate([
398
- HostBinding('attr.dir'),
399
- __metadata("design:type", String),
400
- __metadata("design:paramtypes", [])
401
- ], ChatComponent.prototype, "dirAttr", null);
402
- __decorate([
403
- ContentChild(AttachmentTemplateDirective, { static: false }),
404
- __metadata("design:type", AttachmentTemplateDirective)
405
- ], ChatComponent.prototype, "attachmentTemplate", void 0);
406
- __decorate([
407
- ContentChild(MessageTemplateDirective, { static: false }),
408
- __metadata("design:type", MessageTemplateDirective)
409
- ], ChatComponent.prototype, "messageTemplate", void 0);
410
- __decorate([
411
- ContentChild(ChatMessageBoxTemplateDirective, { static: false }),
412
- __metadata("design:type", ChatMessageBoxTemplateDirective)
413
- ], ChatComponent.prototype, "messageBoxTemplate", void 0);
414
- __decorate([
415
- ViewChild('messageBox', { static: false }),
416
- __metadata("design:type", MessageBoxComponent)
417
- ], ChatComponent.prototype, "messageBox", void 0);
418
- __decorate([
419
- ViewChild('messageList', { static: true }),
420
- __metadata("design:type", ElementRef)
421
- ], ChatComponent.prototype, "messageList", void 0);
422
- ChatComponent = __decorate([
423
- Component({
424
- providers: [
425
- LocalizationService,
426
- {
427
- provide: L10N_PREFIX,
428
- useValue: 'kendo.chat'
429
- }
430
- ],
431
- selector: 'kendo-chat',
432
- template: `
433
- <ng-container
434
- kendoChatLocalizedMessages
435
- i18n-messagePlaceholder="kendo.chat.messagePlaceholder|The placholder text of the message text input"
436
- messagePlaceholder="Type a message..."
437
-
438
- i18n-send="kendo.chat.send|The text for the Send button"
439
- send="Send..."
440
- >
441
- </ng-container>
442
-
443
- <div
444
- #messageList
445
- class="k-message-list k-avatars"
446
- aria-live="polite" role="log"
447
- kendoChatScrollAnchor
448
- #anchor="scrollAnchor"
449
- [(autoScroll)]="autoScroll"
450
- >
451
- <kendo-chat-message-list
452
- [messages]="messages"
453
- [messageTemplate]="messageTemplate"
454
- [attachmentTemplate]="attachmentTemplate"
455
- [user]="user"
456
- (executeAction)="dispatchAction($event)"
457
- (resize)="anchor.scrollToBottom()"
458
- (navigate)="this.autoScroll = false"
459
- >
460
- </kendo-chat-message-list>
461
- </div>
462
- <kendo-message-box
463
- #messageBox
464
- [messageBoxTemplate]="messageBoxTemplate"
465
- [type]="messageBoxType"
466
- [user]="user"
467
- [autoScroll]="autoScroll"
468
- [localization]="localizationText"
469
- (sendMessage)="sendMessage.emit($event)"
470
- >
471
- </kendo-message-box>
472
- `
473
- }),
474
- __metadata("design:paramtypes", [LocalizationService, NgZone])
475
- ], ChatComponent);
476
-
477
- /**
478
- * @hidden
479
- */
480
- let AttachmentComponent = class AttachmentComponent {
481
- set attachment(value) {
482
- this._attachment = value;
483
- this.context = {
484
- $implicit: this.attachment
485
- };
486
- }
487
- get attachment() {
488
- return this._attachment;
489
- }
490
- get image() {
491
- return this.contentType.indexOf('image/') === 0;
492
- }
493
- get unknown() {
494
- return !this.image;
495
- }
496
- get contentType() {
497
- return this.attachment.contentType || '';
498
- }
499
- };
500
- __decorate([
501
- Input(),
502
- __metadata("design:type", Object),
503
- __metadata("design:paramtypes", [Object])
504
- ], AttachmentComponent.prototype, "attachment", null);
505
- __decorate([
506
- Input(),
507
- __metadata("design:type", AttachmentTemplateDirective)
508
- ], AttachmentComponent.prototype, "template", void 0);
509
- AttachmentComponent = __decorate([
510
- Component({
511
- selector: 'kendo-chat-attachment',
512
- template: `
513
- <ng-container *ngIf="template">
514
- <ng-container *ngTemplateOutlet="template.templateRef; context: context;">
515
- </ng-container>
516
- </ng-container>
517
-
518
- <div *ngIf="!template" class="k-card">
519
- <div class="k-card-body">
520
- <h5 class="k-card-title" *ngIf="attachment.title">
521
- {{ attachment.title }}
522
- </h5>
523
- <h6 class="k-card-subtitle" *ngIf="attachment.subtitle">
524
- {{ attachment.subtitle }}
525
- </h6>
526
- <img *ngIf="image" [attr.src]="attachment.content" />
527
- <ng-container *ngIf="unknown">
528
- {{ attachment.content }}
529
- </ng-container>
530
- </div>
531
- </div>
532
- `
533
- })
534
- ], AttachmentComponent);
535
-
536
- /**
537
- * @hidden
538
- */
539
- class Messages extends ComponentMessages {
540
- }
541
- __decorate([
542
- Input(),
543
- __metadata("design:type", String)
544
- ], Messages.prototype, "messagePlaceholder", void 0);
545
- __decorate([
546
- Input(),
547
- __metadata("design:type", String)
548
- ], Messages.prototype, "send", void 0);
549
-
550
- var CustomMessagesComponent_1;
551
- // tslint:disable:no-forward-ref
552
- /**
553
- * Custom component messages override default component messages
554
- * ([see example]({% slug globalization_chat %}#toc-custom-messages)).
555
- */
556
- let CustomMessagesComponent = CustomMessagesComponent_1 = class CustomMessagesComponent extends Messages {
557
- constructor(service) {
558
- super();
559
- this.service = service;
560
- }
561
- get override() {
562
- return true;
563
- }
564
- };
565
- CustomMessagesComponent = CustomMessagesComponent_1 = __decorate([
566
- Component({
567
- providers: [
568
- {
569
- provide: Messages,
570
- useExisting: forwardRef(() => CustomMessagesComponent_1)
571
- }
572
- ],
573
- selector: 'kendo-chat-messages',
574
- template: ``
575
- }),
576
- __metadata("design:paramtypes", [LocalizationService])
577
- ], CustomMessagesComponent);
578
-
579
- /**
580
- * @hidden
581
- */
582
- let FocusedStateDirective = class FocusedStateDirective {
583
- /**
584
- * @hidden
585
- */
586
- constructor() {
587
- this.focused = false;
588
- }
589
- onFocus() {
590
- this.focused = true;
591
- }
592
- onBlur() {
593
- this.focused = false;
594
- }
595
- };
596
- __decorate([
597
- HostBinding('class.k-focus'),
598
- __metadata("design:type", Boolean)
599
- ], FocusedStateDirective.prototype, "focused", void 0);
600
- __decorate([
601
- HostListener('focusin'),
602
- __metadata("design:type", Function),
603
- __metadata("design:paramtypes", []),
604
- __metadata("design:returntype", void 0)
605
- ], FocusedStateDirective.prototype, "onFocus", null);
606
- __decorate([
607
- HostListener('focusout'),
608
- __metadata("design:type", Function),
609
- __metadata("design:paramtypes", []),
610
- __metadata("design:returntype", void 0)
611
- ], FocusedStateDirective.prototype, "onBlur", null);
612
- FocusedStateDirective = __decorate([
613
- Directive({
614
- selector: '[kendoChatFocusedState]'
615
- })
616
- ], FocusedStateDirective);
617
-
618
- /**
619
- * Represents a Hero Card component ([see example]({% slug dialogflow_chat %})).
620
- * Hero cards host a single large image and action buttons with text content.
621
- */
622
- let HeroCardComponent = class HeroCardComponent {
623
- /**
624
- * Represents a Hero Card component ([see example]({% slug dialogflow_chat %})).
625
- * Hero cards host a single large image and action buttons with text content.
626
- */
627
- constructor() {
628
- this.cssClass = true;
629
- /**
630
- * Fires when the user clicks a button.
631
- */
632
- this.executeAction = new EventEmitter();
633
- }
634
- onClick(action) {
635
- this.executeAction.next(action);
636
- }
637
- };
638
- __decorate([
639
- Input(),
640
- __metadata("design:type", String)
641
- ], HeroCardComponent.prototype, "imageUrl", void 0);
642
- __decorate([
643
- Input(),
644
- __metadata("design:type", String)
645
- ], HeroCardComponent.prototype, "title", void 0);
646
- __decorate([
647
- Input(),
648
- __metadata("design:type", String)
649
- ], HeroCardComponent.prototype, "subtitle", void 0);
650
- __decorate([
651
- Input(),
652
- __metadata("design:type", Array)
653
- ], HeroCardComponent.prototype, "actions", void 0);
654
- __decorate([
655
- HostBinding('class.k-card'),
656
- __metadata("design:type", Boolean)
657
- ], HeroCardComponent.prototype, "cssClass", void 0);
658
- __decorate([
659
- Output(),
660
- __metadata("design:type", EventEmitter)
661
- ], HeroCardComponent.prototype, "executeAction", void 0);
662
- HeroCardComponent = __decorate([
663
- Component({
664
- selector: 'kendo-chat-hero-card',
665
- template: `
666
- <img class="k-card-image" [src]="imageUrl" *ngIf="imageUrl" />
667
- <div class="k-card-body">
668
- <h5 class="k-card-title" *ngIf="title">
669
- {{ title }}
670
- </h5>
671
- <h6 class="k-card-subtitle" *ngIf="subtitle">
672
- {{ subtitle }}
673
- </h6>
674
- </div>
675
- <div class="k-card-actions k-card-actions-vertical">
676
- <span class="k-card-action"
677
- *ngFor="let act of actions"
678
- >
679
- <button
680
- kendoButton fillMode="flat"
681
- (click)="onClick(act)"
682
- >
683
- {{ act.title }}
684
- </button>
685
- </span>
686
- </div>
687
- `
688
- })
689
- ], HeroCardComponent);
690
-
691
- var LocalizedMessagesDirective_1;
692
- // tslint:disable:no-forward-ref
693
- /**
694
- * @hidden
695
- */
696
- let LocalizedMessagesDirective = LocalizedMessagesDirective_1 = class LocalizedMessagesDirective extends Messages {
697
- constructor(service) {
698
- super();
699
- this.service = service;
700
- }
701
- };
702
- LocalizedMessagesDirective = LocalizedMessagesDirective_1 = __decorate([
703
- Directive({
704
- providers: [
705
- {
706
- provide: Messages,
707
- useExisting: forwardRef(() => LocalizedMessagesDirective_1)
708
- }
709
- ],
710
- selector: '[kendoChatLocalizedMessages]'
711
- }),
712
- __metadata("design:paramtypes", [LocalizationService])
713
- ], LocalizedMessagesDirective);
714
-
715
- /**
716
- * @hidden
717
- */
718
- class ChatItem {
719
- }
720
-
721
- var MessageAttachmentsComponent_1;
722
- // tslint:disable:no-forward-ref
723
- /**
724
- * @hidden
725
- */
726
- let MessageAttachmentsComponent = MessageAttachmentsComponent_1 = class MessageAttachmentsComponent extends ChatItem {
727
- constructor(zone) {
728
- super();
729
- this.zone = zone;
730
- this.scrollPosition = 0;
731
- this.selectedIndex = 0;
732
- this.carouselKeyHandlers = {
733
- [37 /* left */]: (e) => this.navigateTo(e, -1),
734
- [39 /* right */]: (e) => this.navigateTo(e, 1)
735
- };
736
- this.listKeyHandlers = {
737
- [38 /* up */]: (e) => this.navigateTo(e, -1),
738
- [40 /* down */]: (e) => this.navigateTo(e, 1)
739
- };
740
- }
741
- get carousel() {
742
- return this.layout !== 'list';
743
- }
744
- ngAfterViewInit() {
745
- this.zone.runOutsideAngular(() => {
746
- const scrollDebounceTime = 100;
747
- this.scrollSubscription = fromEvent(this.deck.nativeElement, 'scroll')
748
- .pipe(debounceTime(scrollDebounceTime))
749
- .subscribe(() => this.onScroll());
750
- });
751
- }
752
- ngOnDestroy() {
753
- this.scrollSubscription.unsubscribe();
754
- }
755
- isSelected(index) {
756
- return this.selectedIndex === index;
757
- }
758
- itemKeydown(e, attachment) {
759
- const keyHandlers = this.layout === 'list' ?
760
- this.listKeyHandlers : this.carouselKeyHandlers;
761
- const handler = keyHandlers[e.keyCode];
762
- if (handler) {
763
- handler(e, attachment);
764
- }
765
- }
766
- itemClick(index) {
767
- this.select(index);
768
- }
769
- focus() {
770
- this.select(this.selectedIndex);
771
- }
772
- scrollTo(dir) {
773
- const el = this.deck.nativeElement;
774
- const scrollStep = el.scrollWidth / this.items.length;
775
- const max = el.scrollWidth - el.offsetWidth;
776
- const pos = el.scrollLeft + scrollStep * dir;
777
- el.scrollLeft = Math.max(0, Math.min(max, pos));
778
- }
779
- select(index) {
780
- this.selectedIndex = index;
781
- const item = this.items.toArray()[index];
782
- if (item) {
783
- item.nativeElement.focus();
784
- }
785
- }
786
- navigateTo(e, offset) {
787
- const prevIndex = this.selectedIndex;
788
- const nextIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
789
- if (nextIndex !== prevIndex) {
790
- this.select(nextIndex);
791
- e.preventDefault();
792
- }
793
- }
794
- onScroll() {
795
- const el = this.deck.nativeElement;
796
- if (el.scrollWidth === 0) {
797
- return;
798
- }
799
- const pos = el.scrollLeft / (el.scrollWidth - el.offsetWidth);
800
- if (pos !== this.scrollPosition) {
801
- this.zone.run(() => {
802
- this.scrollPosition = pos;
803
- });
804
- }
805
- }
806
- };
807
- __decorate([
808
- Input(),
809
- __metadata("design:type", Array)
810
- ], MessageAttachmentsComponent.prototype, "attachments", void 0);
811
- __decorate([
812
- Input(),
813
- __metadata("design:type", String)
814
- ], MessageAttachmentsComponent.prototype, "layout", void 0);
815
- __decorate([
816
- Input(),
817
- __metadata("design:type", Boolean)
818
- ], MessageAttachmentsComponent.prototype, "tabbable", void 0);
819
- __decorate([
820
- Input(),
821
- __metadata("design:type", AttachmentTemplateDirective)
822
- ], MessageAttachmentsComponent.prototype, "template", void 0);
823
- __decorate([
824
- HostBinding('class.k-card-deck-scrollwrap'),
825
- __metadata("design:type", Boolean),
826
- __metadata("design:paramtypes", [])
827
- ], MessageAttachmentsComponent.prototype, "carousel", null);
828
- __decorate([
829
- ViewChild('deck', { read: ElementRef, static: true }),
830
- __metadata("design:type", ElementRef)
831
- ], MessageAttachmentsComponent.prototype, "deck", void 0);
832
- __decorate([
833
- ViewChildren('item', { read: ElementRef }),
834
- __metadata("design:type", QueryList)
835
- ], MessageAttachmentsComponent.prototype, "items", void 0);
836
- MessageAttachmentsComponent = MessageAttachmentsComponent_1 = __decorate([
837
- Component({
838
- providers: [{
839
- provide: ChatItem,
840
- useExisting: forwardRef(() => MessageAttachmentsComponent_1)
841
- }],
842
- selector: 'kendo-chat-message-attachments',
843
- template: `
844
- <button
845
- *ngIf="carousel && scrollPosition > 0"
846
- (click)="scrollTo(-1)"
847
- class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
848
- tabindex="-1">
849
- <span class="k-icon k-button-icon k-i-arrow-chevron-left"></span>
850
- </button>
851
- <div #deck [class.k-card-deck]="carousel">
852
- <kendo-chat-attachment #item
853
- *ngFor="let att of attachments; index as index; first as first; last as last"
854
- [attachment]="att"
855
- [template]="template"
856
- [class.k-state-selected]="isSelected(index)"
857
- [class.k-state-focused]="isSelected(index)"
858
- [class.k-card-wrap]="true"
859
- [class.k-first]="first"
860
- [class.k-last]="last"
861
- [attr.tabindex]="tabbable && isSelected(index) ? '0' : '-1'"
862
- (click)="itemClick(index)"
863
- (keydown)="itemKeydown($event, att)"
864
- >
865
- </kendo-chat-attachment>
866
- </div>
867
- <button
868
- *ngIf="carousel && scrollPosition < 1"
869
- (click)="scrollTo(1)"
870
- class="k-button k-icon-button k-button-md k-rounded-md k-button-solid k-button-solid-base"
871
- tabindex="-1">
872
- <span class="k-icon k-button-icon k-i-arrow-chevron-right"></span>
873
- </button>
874
- `
875
- }),
876
- __metadata("design:paramtypes", [NgZone])
877
- ], MessageAttachmentsComponent);
878
-
879
- var MessageComponent_1;
880
- // tslint:disable:no-forward-ref
881
- /**
882
- * @hidden
883
- */
884
- let MessageComponent = MessageComponent_1 = class MessageComponent extends ChatItem {
885
- constructor(element, intl) {
886
- super();
887
- this.element = element;
888
- this.intl = intl;
889
- this.cssClass = true;
890
- }
891
- get tabIndex() {
892
- return this.tabbable ? '0' : '-1';
893
- }
894
- formatTimeStamp(date) {
895
- return this.intl.formatDate(date, { datetime: 'short' });
896
- }
897
- focus() {
898
- this.element.nativeElement.focus();
899
- }
900
- };
901
- __decorate([
902
- Input(),
903
- __metadata("design:type", Object)
904
- ], MessageComponent.prototype, "message", void 0);
905
- __decorate([
906
- Input(),
907
- __metadata("design:type", Boolean)
908
- ], MessageComponent.prototype, "tabbable", void 0);
909
- __decorate([
910
- Input(),
911
- __metadata("design:type", MessageTemplateDirective)
912
- ], MessageComponent.prototype, "template", void 0);
913
- __decorate([
914
- HostBinding('class.k-message'),
915
- __metadata("design:type", Boolean)
916
- ], MessageComponent.prototype, "cssClass", void 0);
917
- __decorate([
918
- HostBinding('class.k-state-selected'),
919
- HostBinding('class.k-state-focused'),
920
- __metadata("design:type", Boolean)
921
- ], MessageComponent.prototype, "selected", void 0);
922
- __decorate([
923
- HostBinding('attr.tabIndex'),
924
- __metadata("design:type", String),
925
- __metadata("design:paramtypes", [])
926
- ], MessageComponent.prototype, "tabIndex", null);
927
- MessageComponent = MessageComponent_1 = __decorate([
928
- Component({
929
- selector: 'kendo-chat-message',
930
- providers: [{
931
- provide: ChatItem,
932
- useExisting: forwardRef(() => MessageComponent_1)
933
- }],
934
- template: `
935
- <time
936
- [attr.aria-hidden]="!selected"
937
- class="k-message-time"
938
- *ngIf="message.timestamp"
939
- >
940
- {{ formatTimeStamp(message.timestamp) }}
941
- </time>
942
-
943
- <ng-container *ngIf="!message.typing; else typing">
944
- <div class="k-bubble" *ngIf="template">
945
- <ng-container
946
- *ngTemplateOutlet="template.templateRef; context: { $implicit: message };"
947
- >
948
- </ng-container>
949
- </div>
950
-
951
- <div class="k-bubble" *ngIf="!template && message.text">
952
- {{message.text}}
953
- </div>
954
- </ng-container>
955
-
956
- <span
957
- class="k-message-status"
958
- *ngIf="message.status"
959
- >
960
- {{ message.status }}
961
- </span>
962
-
963
- <ng-template #typing>
964
- <div class="k-bubble">
965
- <div class="k-typing-indicator">
966
- <span></span>
967
- <span></span>
968
- <span></span>
969
- </div>
970
- </div>
971
- </ng-template>
972
- `
973
- }),
974
- __metadata("design:paramtypes", [ElementRef, IntlService])
975
- ], MessageComponent);
976
-
977
- /**
978
- * @hidden
979
- */
980
- class PreventableEvent {
981
- constructor() {
982
- this.prevented = false;
983
- }
984
- /**
985
- * Prevents the default action for a specified event.
986
- * In this way, the source component suppresses
987
- * the built-in behavior that follows the event.
988
- */
989
- preventDefault() {
990
- this.prevented = true;
991
- }
992
- /**
993
- * Returns `true` if the event was prevented
994
- * by any of its subscribers.
995
- *
996
- * @returns `true` if the default action was prevented.
997
- * Otherwise, returns `false`.
998
- */
999
- isDefaultPrevented() {
1000
- return this.prevented;
1001
- }
1002
- }
1003
-
1004
- /**
1005
- * Arguments for the `executeAction` event. The `executeAction` event fires when the user clicks
1006
- * a quick action button. Calling `preventDefault()` suppresses the built-in action handler.
1007
- */
1008
- class ExecuteActionEvent extends PreventableEvent {
1009
- /**
1010
- * @hidden
1011
- */
1012
- constructor(action, message) {
1013
- super();
1014
- this.action = action;
1015
- this.message = message;
1016
- }
1017
- }
1018
-
1019
- /**
1020
- * @hidden
1021
- */
1022
- const closest = (node, predicate) => {
1023
- while (node && !predicate(node)) {
1024
- node = node.parentNode;
1025
- }
1026
- return node;
1027
- };
1028
-
1029
- /**
1030
- * @hidden
1031
- */
1032
- const isAuthor = (user, msg) => user && msg.author && user.id === msg.author.id;
1033
- const last = (arr) => arr[arr.length - 1];
1034
- const dateChanged = (curr, prev) => (curr && prev) && (prev.getDate() !== curr.getDate() ||
1035
- prev.getMonth() !== curr.getMonth() ||
1036
- prev.getFullYear() !== curr.getFullYear());
1037
- const addDateMarker = (acc, msg) => {
1038
- const timestamp = msg.timestamp;
1039
- const lastItem = last(acc);
1040
- if (!timestamp) {
1041
- return;
1042
- }
1043
- if (!lastItem || dateChanged(timestamp, lastItem.timestamp)) {
1044
- const dateMarker = {
1045
- type: 'date-marker',
1046
- timestamp: timestamp,
1047
- trackBy: timestamp.getTime()
1048
- };
1049
- acc.push(dateMarker);
1050
- }
1051
- };
1052
- const groupMessages = (acc, msg, isLastMessage) => {
1053
- const lastItem = last(acc);
1054
- let messages;
1055
- if (isDevMode() && !msg.author) {
1056
- throw new Error('Author must be set for message: ' + JSON.stringify(msg));
1057
- }
1058
- if (msg.typing && !isLastMessage) {
1059
- return;
1060
- }
1061
- if (lastItem && lastItem.type === 'message-group') {
1062
- messages = lastItem.messages;
1063
- }
1064
- if (messages && isAuthor(msg.author, last(messages))) {
1065
- messages.push(msg);
1066
- }
1067
- else {
1068
- acc.push({
1069
- type: 'message-group',
1070
- messages: [msg],
1071
- author: msg.author,
1072
- timestamp: msg.timestamp,
1073
- trackBy: msg
1074
- });
1075
- }
1076
- };
1077
- const groupItems = (total) => (acc, msg, index) => {
1078
- const isLastMessage = index === total - 1;
1079
- addDateMarker(acc, msg);
1080
- groupMessages(acc, msg, isLastMessage);
1081
- if (msg.attachments && msg.attachments.length > 1) {
1082
- acc.push({
1083
- type: 'attachment-group',
1084
- attachments: msg.attachments,
1085
- attachmentLayout: msg.attachmentLayout,
1086
- timestamp: msg.timestamp,
1087
- trackBy: msg
1088
- });
1089
- }
1090
- if (msg.suggestedActions && isLastMessage) {
1091
- acc.push({
1092
- type: 'action-group',
1093
- actions: msg.suggestedActions,
1094
- timestamp: msg.timestamp,
1095
- trackBy: msg
1096
- });
1097
- }
1098
- return acc;
1099
- };
1100
- /**
1101
- * @hidden
1102
- */
1103
- const chatView = (messages) => messages.reduce(groupItems(messages.length), []);
1104
-
1105
- /**
1106
- * @hidden
1107
- */
1108
- let MessageListComponent = class MessageListComponent {
1109
- constructor(element, intl) {
1110
- this.element = element;
1111
- this.intl = intl;
1112
- this.executeAction = new EventEmitter();
1113
- this.navigate = new EventEmitter();
1114
- this.resize = new EventEmitter();
1115
- this.cssClass = true;
1116
- this.view = [];
1117
- this.keyActions = {
1118
- [38 /* up */]: (e) => this.navigateTo(e, -1),
1119
- [40 /* down */]: (e) => this.navigateTo(e, 1)
1120
- };
1121
- }
1122
- set messages(value) {
1123
- const data = value || [];
1124
- this.view = chatView(data);
1125
- this._messages = data;
1126
- }
1127
- get messages() {
1128
- return this._messages;
1129
- }
1130
- ngAfterViewInit() {
1131
- this.selectedItem = this.items.last;
1132
- }
1133
- onResize() {
1134
- this.resize.emit();
1135
- }
1136
- formatTimeStamp(date) {
1137
- return this.intl.formatDate(date, { date: 'full' });
1138
- }
1139
- onKeydown(e) {
1140
- const action = this.keyActions[e.keyCode];
1141
- if (action) {
1142
- action(e);
1143
- }
1144
- }
1145
- onBlur(args) {
1146
- const next = args.relatedTarget || document.activeElement;
1147
- const outside = !closest(next, (node) => node === this.element.nativeElement);
1148
- if (outside) {
1149
- this.select(null);
1150
- }
1151
- }
1152
- isOwnMessage(msg) {
1153
- return isAuthor(this.user, msg);
1154
- }
1155
- dispatchAction(action, message) {
1156
- const args = new ExecuteActionEvent(action, message);
1157
- this.executeAction.emit(args);
1158
- }
1159
- trackGroup(_index, item) {
1160
- return item.trackBy;
1161
- }
1162
- select(item) {
1163
- const prevItem = this.selectedItem;
1164
- if (prevItem) {
1165
- prevItem.selected = false;
1166
- }
1167
- if (item) {
1168
- item.selected = true;
1169
- this.selectedItem = item;
1170
- }
1171
- }
1172
- last(items) {
1173
- if (!items || items.length === 0) {
1174
- return;
1175
- }
1176
- return items[items.length - 1];
1177
- }
1178
- navigateTo(e, offset) {
1179
- const items = this.items.toArray();
1180
- const prevItem = this.selectedItem;
1181
- const prevIndex = items.indexOf(prevItem);
1182
- const nextIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
1183
- const nextItem = items[nextIndex];
1184
- if (nextItem !== prevItem) {
1185
- this.select(nextItem);
1186
- nextItem.focus();
1187
- this.navigate.emit();
1188
- e.preventDefault();
1189
- }
1190
- }
1191
- };
1192
- __decorate([
1193
- Input(),
1194
- __metadata("design:type", Array),
1195
- __metadata("design:paramtypes", [Array])
1196
- ], MessageListComponent.prototype, "messages", null);
1197
- __decorate([
1198
- Input(),
1199
- __metadata("design:type", AttachmentTemplateDirective)
1200
- ], MessageListComponent.prototype, "attachmentTemplate", void 0);
1201
- __decorate([
1202
- Input(),
1203
- __metadata("design:type", MessageTemplateDirective)
1204
- ], MessageListComponent.prototype, "messageTemplate", void 0);
1205
- __decorate([
1206
- Input(),
1207
- __metadata("design:type", Object)
1208
- ], MessageListComponent.prototype, "user", void 0);
1209
- __decorate([
1210
- Output(),
1211
- __metadata("design:type", EventEmitter)
1212
- ], MessageListComponent.prototype, "executeAction", void 0);
1213
- __decorate([
1214
- Output(),
1215
- __metadata("design:type", EventEmitter)
1216
- ], MessageListComponent.prototype, "navigate", void 0);
1217
- __decorate([
1218
- Output(),
1219
- __metadata("design:type", EventEmitter)
1220
- ], MessageListComponent.prototype, "resize", void 0);
1221
- __decorate([
1222
- ViewChildren(ChatItem),
1223
- __metadata("design:type", QueryList)
1224
- ], MessageListComponent.prototype, "items", void 0);
1225
- __decorate([
1226
- HostBinding('class.k-message-list-content'),
1227
- __metadata("design:type", Boolean)
1228
- ], MessageListComponent.prototype, "cssClass", void 0);
1229
- __decorate([
1230
- HostListener('keydown', ['$event']),
1231
- __metadata("design:type", Function),
1232
- __metadata("design:paramtypes", [Object]),
1233
- __metadata("design:returntype", void 0)
1234
- ], MessageListComponent.prototype, "onKeydown", null);
1235
- __decorate([
1236
- HostListener('focusout', ['$event']),
1237
- __metadata("design:type", Function),
1238
- __metadata("design:paramtypes", [FocusEvent]),
1239
- __metadata("design:returntype", void 0)
1240
- ], MessageListComponent.prototype, "onBlur", null);
1241
- MessageListComponent = __decorate([
1242
- Component({
1243
- selector: 'kendo-chat-message-list',
1244
- template: `
1245
- <ng-container *ngFor="let group of view; last as lastGroup; trackBy: trackGroup">
1246
- <ng-container [ngSwitch]="group.type">
1247
- <div
1248
- *ngSwitchCase="'date-marker'"
1249
- class="k-timestamp"
1250
- >
1251
- {{ formatTimeStamp(group.timestamp) }}
1252
- </div>
1253
- <div
1254
- *ngSwitchCase="'message-group'"
1255
- class="k-message-group"
1256
- [class.k-alt]="isOwnMessage(group.messages[0])"
1257
- [class.k-no-avatar]="!group.author.avatarUrl"
1258
- >
1259
- <img
1260
- *ngIf="group.author.avatarUrl"
1261
- [attr.src]="group.author.avatarUrl"
1262
- class="k-avatar"
1263
- />
1264
- <p *ngIf="group.author.name" class="k-author">{{ group.author.name }}</p>
1265
- <ng-container
1266
- *ngFor="let msg of group.messages; first as firstMessage; last as lastMessage"
1267
- >
1268
- <img *ngIf="msg.user?.avatarUrl" [src]="msg.user?.avatarUrl" class="k-avatar">
1269
- <kendo-chat-message #message
1270
- [message]="msg"
1271
- [tabbable]="lastGroup && lastMessage"
1272
- [template]="messageTemplate"
1273
- (click)="select(message)"
1274
- (focus)="select(message)"
1275
- [class.k-only]="group.messages.length === 1"
1276
- [class.k-first]="group.messages.length > 1 && firstMessage"
1277
- [class.k-last]="group.messages.length > 1 && lastMessage"
1278
- >
1279
- </kendo-chat-message>
1280
-
1281
- <kendo-chat-attachment
1282
- *ngIf="msg.attachments && msg.attachments.length === 1"
1283
- [attachment]="msg.attachments[0]"
1284
- [template]="attachmentTemplate"
1285
- >
1286
- </kendo-chat-attachment>
1287
- </ng-container>
1288
- </div>
1289
-
1290
- <kendo-chat-message-attachments #attachments
1291
- *ngSwitchCase="'attachment-group'"
1292
- [attachments]="group.attachments"
1293
- [layout]="group.attachmentLayout"
1294
- [tabbable]="lastGroup"
1295
- [template]="attachmentTemplate"
1296
- (click)="select(attachments)"
1297
- (focus)="select(attachments)"
1298
- >
1299
- </kendo-chat-message-attachments>
1300
-
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>
1311
- </ng-container>
1312
- <kendo-resize-sensor (resize)="onResize()">
1313
- </kendo-resize-sensor>
1314
- `
1315
- }),
1316
- __metadata("design:paramtypes", [ElementRef, IntlService])
1317
- ], MessageListComponent);
1318
-
1319
- // Consider scroll to be at the bottom when within this number of pixels from the container height.
1320
- const maxDelta = 2;
1321
- /**
1322
- * @hidden
1323
- */
1324
- let ScrollAnchorDirective = class ScrollAnchorDirective {
1325
- constructor(element, zone, renderer) {
1326
- this.element = element;
1327
- this.zone = zone;
1328
- this.renderer = renderer;
1329
- this.autoScroll = true;
1330
- this.autoScrollChange = new EventEmitter();
1331
- this.overflowAnchor = 'none';
1332
- this.scrolling = false;
1333
- }
1334
- ngOnInit() {
1335
- this.zone.runOutsideAngular(() => {
1336
- this.unsubscribe = this.renderer.listen(this.element.nativeElement, 'scroll', () => this.onScroll());
1337
- });
1338
- }
1339
- ngAfterViewInit() {
1340
- this.scrollToBottom();
1341
- }
1342
- ngOnDestroy() {
1343
- if (this.unsubscribe) {
1344
- this.unsubscribe();
1345
- }
1346
- }
1347
- onScroll() {
1348
- if (this.scrolling) {
1349
- return;
1350
- }
1351
- const el = this.element.nativeElement;
1352
- const bottom = el.scrollTop + el.offsetHeight;
1353
- const height = el.scrollHeight;
1354
- const atBottom = height - bottom < maxDelta;
1355
- if (this.autoScroll !== atBottom) {
1356
- this.zone.run(() => {
1357
- this.autoScroll = atBottom;
1358
- this.autoScrollChange.emit(this.autoScroll);
1359
- });
1360
- }
1361
- }
1362
- scrollToBottom() {
1363
- if (!this.autoScroll) {
1364
- return;
1365
- }
1366
- const el = this.element.nativeElement;
1367
- el.scrollTop = el.scrollHeight - el.clientHeight;
1368
- this.scrolling = true;
1369
- this.zone.runOutsideAngular(() => setTimeout(() => this.scrolling = false, 1000));
1370
- }
1371
- };
1372
- __decorate([
1373
- Input(),
1374
- __metadata("design:type", Boolean)
1375
- ], ScrollAnchorDirective.prototype, "autoScroll", void 0);
1376
- __decorate([
1377
- Output(),
1378
- __metadata("design:type", EventEmitter)
1379
- ], ScrollAnchorDirective.prototype, "autoScrollChange", void 0);
1380
- __decorate([
1381
- HostBinding('style.overflow-anchor'),
1382
- __metadata("design:type", String)
1383
- ], ScrollAnchorDirective.prototype, "overflowAnchor", void 0);
1384
- ScrollAnchorDirective = __decorate([
1385
- Directive({
1386
- selector: '[kendoChatScrollAnchor]',
1387
- exportAs: 'scrollAnchor'
1388
- }),
1389
- __metadata("design:paramtypes", [ElementRef,
1390
- NgZone,
1391
- Renderer2])
1392
- ], ScrollAnchorDirective);
1393
-
1394
- var SuggestedActionsComponent_1;
1395
- // tslint:disable:no-forward-ref
1396
- /**
1397
- * @hidden
1398
- */
1399
- let SuggestedActionsComponent = SuggestedActionsComponent_1 = class SuggestedActionsComponent extends ChatItem {
1400
- // tslint:disable:no-forward-ref
1401
- /**
1402
- * @hidden
1403
- */
1404
- constructor() {
1405
- super(...arguments);
1406
- this.dispatch = new EventEmitter();
1407
- this.defaultClass = true;
1408
- this.selectedIndex = 0;
1409
- this.keyHandlers = {
1410
- [37 /* left */]: (e) => this.navigateTo(e, -1),
1411
- [39 /* right */]: (e) => this.navigateTo(e, 1),
1412
- [13 /* enter */]: (_, action) => this.actionClick(action)
1413
- };
1414
- }
1415
- isSelected(index) {
1416
- return this.selected && this.selectedIndex === index;
1417
- }
1418
- actionClick(action) {
1419
- this.dispatch.next(action);
1420
- }
1421
- actionKeydown(e, action) {
1422
- const handler = this.keyHandlers[e.keyCode];
1423
- if (handler) {
1424
- handler(e, action);
1425
- }
1426
- }
1427
- focus() {
1428
- this.select(this.selectedIndex);
1429
- }
1430
- select(index) {
1431
- this.selectedIndex = index;
1432
- const item = this.items.toArray()[index];
1433
- if (item) {
1434
- item.nativeElement.focus();
1435
- }
1436
- }
1437
- navigateTo(e, offset) {
1438
- const prevIndex = this.selectedIndex;
1439
- const nextIndex = Math.max(0, Math.min(prevIndex + offset, this.items.length - 1));
1440
- if (nextIndex !== prevIndex) {
1441
- this.select(nextIndex);
1442
- e.preventDefault();
1443
- }
1444
- }
1445
- };
1446
- __decorate([
1447
- Input(),
1448
- __metadata("design:type", Array)
1449
- ], SuggestedActionsComponent.prototype, "actions", void 0);
1450
- __decorate([
1451
- Input(),
1452
- __metadata("design:type", Boolean)
1453
- ], SuggestedActionsComponent.prototype, "tabbable", void 0);
1454
- __decorate([
1455
- Output(),
1456
- __metadata("design:type", EventEmitter)
1457
- ], SuggestedActionsComponent.prototype, "dispatch", void 0);
1458
- __decorate([
1459
- HostBinding('class.k-quick-replies'),
1460
- __metadata("design:type", Boolean)
1461
- ], SuggestedActionsComponent.prototype, "defaultClass", void 0);
1462
- __decorate([
1463
- ViewChildren('item'),
1464
- __metadata("design:type", QueryList)
1465
- ], SuggestedActionsComponent.prototype, "items", void 0);
1466
- SuggestedActionsComponent = SuggestedActionsComponent_1 = __decorate([
1467
- Component({
1468
- selector: 'kendo-chat-suggested-actions',
1469
- providers: [{
1470
- provide: ChatItem,
1471
- useExisting: forwardRef(() => SuggestedActionsComponent_1)
1472
- }],
1473
- template: `
1474
- <span
1475
- #item
1476
- *ngFor="let action of actions; index as index; first as first; last as last"
1477
- class="k-quick-reply"
1478
- [class.k-state-selected]="isSelected(index)"
1479
- [class.k-state-focused]="isSelected(index)"
1480
- [class.k-first]="first"
1481
- [class.k-last]="last"
1482
- [attr.tabindex]="tabbable && selectedIndex === index ? '0' : '-1'"
1483
- (click)="actionClick(action)"
1484
- (keydown)="actionKeydown($event, action)"
1485
- >
1486
- {{ action.title || action.value }}
1487
- </span>
1488
- `
1489
- })
1490
- ], SuggestedActionsComponent);
1491
-
1492
- const PUBLIC_DIRECTIVES = [
1493
- ChatComponent,
1494
- CustomMessagesComponent,
1495
- AttachmentTemplateDirective,
1496
- MessageTemplateDirective,
1497
- HeroCardComponent,
1498
- ChatMessageBoxTemplateDirective
1499
- ];
1500
- const PRIVATE_DIRECTIVES = [
1501
- AttachmentComponent,
1502
- FocusedStateDirective,
1503
- LocalizedMessagesDirective,
1504
- MessageAttachmentsComponent,
1505
- MessageComponent,
1506
- MessageListComponent,
1507
- MessageTemplateDirective,
1508
- ScrollAnchorDirective,
1509
- SuggestedActionsComponent,
1510
- MessageBoxComponent
1511
- ];
1512
- /**
1513
- * The [NgModule]({{ site.data.urls.angular['ngmodules'] }}) for the Chat component.
1514
- *
1515
- * @example
1516
- * ```ts-no-run
1517
- * import { NgModule } from '@angular/core';
1518
- * import { Component } from '@angular/core';
1519
- * import { BrowserModule } from '@angular/platform-browser';
1520
- *
1521
- * import { ChatModule } from '@progress/kendo-angular-conversational-ui';
1522
- * import { AppComponent } from './app.component';
1523
- *
1524
- * _@NgModule({
1525
- * imports: [ BrowserModule, ChatModule ],
1526
- * declarations: [ AppComponent ],
1527
- * bootstrap: [ AppComponent ]
1528
- * })
1529
- *
1530
- * export class AppModule { }
1531
- * ```
1532
- */
1533
- let ChatModule = class ChatModule {
1534
- };
1535
- ChatModule = __decorate([
1536
- NgModule({
1537
- declarations: [
1538
- ...PUBLIC_DIRECTIVES,
1539
- ...PRIVATE_DIRECTIVES
1540
- ],
1541
- exports: [PUBLIC_DIRECTIVES],
1542
- imports: [
1543
- ButtonModule,
1544
- CommonModule,
1545
- ResizeSensorModule
1546
- ]
1547
- })
1548
- ], ChatModule);
1549
-
1550
- /**
1551
- * Generated bundle index. Do not edit.
1552
- */
1553
-
1554
- export { PreventableEvent, HeroCardComponent, AttachmentComponent, ChatItem, CustomMessagesComponent, LocalizedMessagesDirective, Messages, MessageAttachmentsComponent, MessageBoxComponent, MessageListComponent, MessageComponent, SuggestedActionsComponent, FocusedStateDirective, ScrollAnchorDirective, ChatComponent, AttachmentTemplateDirective, MessageTemplateDirective, ChatMessageBoxTemplateDirective, ChatModule, ExecuteActionEvent, SendMessageEvent };