@telia-ace/widget-conversation-flamingo 1.0.14 → 1.0.32
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/{dist/agent.d.ts → agent.d.ts} +0 -1
- package/components/conversation/conversation.d.ts +20 -0
- package/{dist/components → components}/conversation/plugin.d.ts +0 -1
- package/{dist/components → components}/conversation/ui/message-list.d.ts +1 -2
- package/{dist/components → components}/conversation/ui/message-types/message-type-html.d.ts +1 -2
- package/{dist/components → components}/conversation/ui/message-types/message-type-link-list.d.ts +1 -2
- package/{dist/components → components}/conversation/ui/message-types/message-type-separator.d.ts +1 -2
- package/{dist/components → components}/conversation/ui/message.d.ts +2 -3
- package/{dist/components → components}/conversation/utils.d.ts +0 -1
- package/conversation-18045ffc.mjs +1884 -0
- package/conversation-2a8210a9.js +446 -0
- package/{dist/conversation-controller.d.ts → conversation-controller.d.ts} +0 -1
- package/{dist/conversation-history.d.ts → conversation-history.d.ts} +0 -1
- package/{dist/conversation-platform.d.ts → conversation-platform.d.ts} +1 -2
- package/{dist/conversation-provider.d.ts → conversation-provider.d.ts} +0 -1
- package/{dist/index-9688347a-02584d39.js → index-17239ac6.mjs} +245 -245
- package/index-17fa2121.js +1 -0
- package/index-8a04bebb.mjs +3887 -0
- package/index-a12a1d3f.js +160 -0
- package/{dist/index.d.ts → index.d.ts} +0 -1
- package/index.js +1 -0
- package/{dist/index.js → index.mjs} +3 -4
- package/package.json +6 -47
- package/send-1e9780e5.mjs +5 -0
- package/send-df47dcea.js +1 -0
- package/{dist/store.d.ts → store.d.ts} +0 -1
- package/{dist/types.d.ts → types.d.ts} +0 -1
- package/{dist/user.d.ts → user.d.ts} +0 -1
- package/{dist/utils → utils}/custom-message.d.ts +0 -1
- package/{dist/utils → utils}/index.d.ts +0 -1
- package/{dist/utils → utils}/open-chat-widget.d.ts +0 -1
- package/{dist/utils → utils}/swap-provider.d.ts +0 -1
- package/LICENSE.txt +0 -6
- package/README.md +0 -490
- package/dist/agent.d.ts.map +0 -1
- package/dist/components/conversation/conversation.d.ts +0 -26
- package/dist/components/conversation/conversation.d.ts.map +0 -1
- package/dist/components/conversation/plugin.d.ts.map +0 -1
- package/dist/components/conversation/ui/message-list.d.ts.map +0 -1
- package/dist/components/conversation/ui/message-types/message-type-html.d.ts.map +0 -1
- package/dist/components/conversation/ui/message-types/message-type-link-list.d.ts.map +0 -1
- package/dist/components/conversation/ui/message-types/message-type-separator.d.ts.map +0 -1
- package/dist/components/conversation/ui/message.d.ts.map +0 -1
- package/dist/components/conversation/utils.d.ts.map +0 -1
- package/dist/conversation-309361e4.js +0 -2287
- package/dist/conversation-309361e4.js.map +0 -1
- package/dist/conversation-controller.d.ts.map +0 -1
- package/dist/conversation-form-adapter.d.ts +0 -7
- package/dist/conversation-form-adapter.d.ts.map +0 -1
- package/dist/conversation-history.d.ts.map +0 -1
- package/dist/conversation-platform.d.ts.map +0 -1
- package/dist/conversation-provider.d.ts.map +0 -1
- package/dist/index-9688347a-02584d39.js.map +0 -1
- package/dist/index-c61b2340.js +0 -5175
- package/dist/index-c61b2340.js.map +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/resolve-entity-value.d.ts +0 -11
- package/dist/resolve-entity-value.d.ts.map +0 -1
- package/dist/store.d.ts.map +0 -1
- package/dist/types.d.ts.map +0 -1
- package/dist/user.d.ts.map +0 -1
- package/dist/utils/custom-message.d.ts.map +0 -1
- package/dist/utils/index.d.ts.map +0 -1
- package/dist/utils/map-actions.d.ts +0 -2
- package/dist/utils/map-actions.d.ts.map +0 -1
- package/dist/utils/open-chat-widget.d.ts.map +0 -1
- package/dist/utils/swap-provider.d.ts.map +0 -1
package/README.md
DELETED
|
@@ -1,490 +0,0 @@
|
|
|
1
|
-
# Widget Conversation API
|
|
2
|
-
|
|
3
|
-
The Widget Conversation API provides support for reading and writing to a conversational component inside a widget.
|
|
4
|
-
|
|
5
|
-
## Sandbox
|
|
6
|
-
|
|
7
|
-
For demonstration purposes, we've set up a sandbox for the Widget Conversational API so that you can see it in action. Keep in mind that this is for demonstration purposes only and may not reflect best practice.
|
|
8
|
-
|
|
9
|
-
> We do not recommend binding functions to the `window` object.
|
|
10
|
-
|
|
11
|
-
[](https://codesandbox.io/s/elegant-jones-rnyrd?fontsize=14&hidenavigation=1&theme=dark)
|
|
12
|
-
|
|
13
|
-
## Accessing the API
|
|
14
|
-
|
|
15
|
-
In order to access the API you need to have a widget with a conversational component.
|
|
16
|
-
|
|
17
|
-
### Creating the plugin
|
|
18
|
-
|
|
19
|
-
You need to register the conversational provider in the `providers`-property in the component. To access the global instance of `ConversationPlatform`, you pass in the current `Container` to the `getInstance()` method. It will return a `Promise` that is resolved to the `ConversationPlatform` instance. In the instance, register a provider and pass in name and handler by calling the `registerProvider()` function as shown below.
|
|
20
|
-
|
|
21
|
-
The handler function will be called once a conversational component for the specified provider is activated in the widget. Use the provider to interact with the conversation.
|
|
22
|
-
|
|
23
|
-
```ts
|
|
24
|
-
import { ConversationPlatform } from '@telia-ace/widget-conversation';
|
|
25
|
-
|
|
26
|
-
const MyPlugin = async (container) => {
|
|
27
|
-
const platform = await ConversationPlatform.getInstance(container);
|
|
28
|
-
|
|
29
|
-
platform.registerProvider('my-chat', (conversation, component) => {
|
|
30
|
-
// start interacting with the conversation here
|
|
31
|
-
});
|
|
32
|
-
};
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
You also need to register the provider inside the widget configuration:
|
|
36
|
-
|
|
37
|
-
```JSON
|
|
38
|
-
"my-conversation-component": {
|
|
39
|
-
"type": "conversation",
|
|
40
|
-
"properties": {
|
|
41
|
-
"providers": ["my-chat"],
|
|
42
|
-
// ...
|
|
43
|
-
},
|
|
44
|
-
"context": {}
|
|
45
|
-
},
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
### Creating an agent in the conversation
|
|
49
|
-
|
|
50
|
-
When using `createAgent` you can specify both a name and an avatar. These will then be displayed in the conversation alongside that agent's entries.
|
|
51
|
-
|
|
52
|
-
```ts
|
|
53
|
-
const agent = conversation.createAgent({
|
|
54
|
-
name: 'Agent Smith',
|
|
55
|
-
avatar: 'https://www.site.com/avatar.jpg',
|
|
56
|
-
});
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
## Writing to the conversation
|
|
60
|
-
|
|
61
|
-
**`print()` accepts an array, which is considered best practice when writing to the conversation. The previous way of posting an object will still currently be supported, but is considered to be deprecated.**
|
|
62
|
-
|
|
63
|
-
### Posting, updating and removing content
|
|
64
|
-
|
|
65
|
-
When managing content in the conversation you'll first need to create an `Agent`-object and then use its `print()` function. There are serveral types of entries in order to accommodate different types of content.
|
|
66
|
-
|
|
67
|
-
The `print(items: ConversationMessageItem[])` function let's you return a `ConversationEntry` message that can be used to update and/or remove the content from the conversation.
|
|
68
|
-
|
|
69
|
-
##### Example of simple text message
|
|
70
|
-
|
|
71
|
-
```ts
|
|
72
|
-
// print user message
|
|
73
|
-
conversation.user.print([['text', 'Lorem ipsum']]);
|
|
74
|
-
|
|
75
|
-
// print agent message
|
|
76
|
-
const agent = conversation.createAgent();
|
|
77
|
-
agent.print([['text', 'Lorem ipsum']]);
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
##### Example of updating or removing content
|
|
81
|
-
|
|
82
|
-
```ts
|
|
83
|
-
const agent = conversation.createAgent();
|
|
84
|
-
const entry = agent.print([['text', 'Hello world!']]);
|
|
85
|
-
|
|
86
|
-
entry.update([
|
|
87
|
-
// ...
|
|
88
|
-
]);
|
|
89
|
-
|
|
90
|
-
entry.remove();
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
### Entry with list of actions
|
|
94
|
-
|
|
95
|
-
You can post an entry into the conversation with actions. You can specify a title, body and available actions. This is only supported for the `Agent` and will be displayed as a system message.
|
|
96
|
-
|
|
97
|
-
This can be either in the form of a "ButtonList" or an "LinkList" as demostrated below.
|
|
98
|
-
|
|
99
|
-
| Name | Type | Description |
|
|
100
|
-
| --------- | -------- | -------------------------------------------- |
|
|
101
|
-
| `header` | `string` | Header for the entry. |
|
|
102
|
-
| `actions` | `array` | Array of of available actions for the entry. |
|
|
103
|
-
|
|
104
|
-
##### Example of list of actions
|
|
105
|
-
|
|
106
|
-
```ts
|
|
107
|
-
// example of button list
|
|
108
|
-
agent.print([
|
|
109
|
-
[
|
|
110
|
-
'button-list',
|
|
111
|
-
{
|
|
112
|
-
header: 'Download invoices',
|
|
113
|
-
actions: [
|
|
114
|
-
{
|
|
115
|
-
actionKey: 'invoice_190201',
|
|
116
|
-
label: 'Invoice 190201',
|
|
117
|
-
},
|
|
118
|
-
{
|
|
119
|
-
actionKey: 'invoice_190301',
|
|
120
|
-
label: 'Invoice 190301',
|
|
121
|
-
},
|
|
122
|
-
],
|
|
123
|
-
},
|
|
124
|
-
],
|
|
125
|
-
]);
|
|
126
|
-
|
|
127
|
-
// here we use a link list instead, but with the same actions
|
|
128
|
-
agent.print([
|
|
129
|
-
[
|
|
130
|
-
'link-list',
|
|
131
|
-
{
|
|
132
|
-
header: 'Download invoices',
|
|
133
|
-
actions: [
|
|
134
|
-
{
|
|
135
|
-
actionKey: 'invoice_190201',
|
|
136
|
-
label: 'Invoice 190201',
|
|
137
|
-
},
|
|
138
|
-
{
|
|
139
|
-
actionKey: 'invoice_190301',
|
|
140
|
-
label: 'Invoice 190301',
|
|
141
|
-
},
|
|
142
|
-
],
|
|
143
|
-
},
|
|
144
|
-
],
|
|
145
|
-
]);
|
|
146
|
-
|
|
147
|
-
// and an item list could contain an optional icon and description
|
|
148
|
-
agent.print([
|
|
149
|
-
[
|
|
150
|
-
'item-list',
|
|
151
|
-
{
|
|
152
|
-
header: 'Download invoices',
|
|
153
|
-
actions: [
|
|
154
|
-
{
|
|
155
|
-
actionKey: 'invoice_190201',
|
|
156
|
-
label: 'Invoice 190201',
|
|
157
|
-
symbol: {
|
|
158
|
-
type: 'FontAwesome',
|
|
159
|
-
content: 'file',
|
|
160
|
-
},
|
|
161
|
-
},
|
|
162
|
-
{
|
|
163
|
-
actionKey: 'invoice_190301',
|
|
164
|
-
label: 'Invoice 190301',
|
|
165
|
-
description: 'Clicking here will download the invoice',
|
|
166
|
-
},
|
|
167
|
-
],
|
|
168
|
-
},
|
|
169
|
-
],
|
|
170
|
-
]);
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
### Entry with a form
|
|
174
|
-
|
|
175
|
-
You can also post a message with a form attached. This uses the `FormBuilder`-method. This is handled by the `conversation.form` event. It is only supported for `Agent` and will be displayed as a system message.
|
|
176
|
-
|
|
177
|
-
| Name | Type | Description |
|
|
178
|
-
| ------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
179
|
-
| `title` | `string` | Title for the entry. |
|
|
180
|
-
| `body` | `string` | Body content for the entry. Supports HTML. |
|
|
181
|
-
| `form` | `(FormBuilder) => void` | A callback function for building the form. Refer to the [`@telia-ace/widget-forms`](https://www.npmjs.com/package/@telia-ace/widget-forms) package for more information about `FormBuilder`. |
|
|
182
|
-
| `key` | `string` | The key used to refer to the form when validating and submitting the form. |
|
|
183
|
-
|
|
184
|
-
##### Example of an entry with a form
|
|
185
|
-
|
|
186
|
-
```ts
|
|
187
|
-
agent.print({
|
|
188
|
-
title: 'Log in',
|
|
189
|
-
body: 'Enter your ID to login',
|
|
190
|
-
key: 'my-login-form',
|
|
191
|
-
form: (builder) => {
|
|
192
|
-
builder
|
|
193
|
-
.createComponent({
|
|
194
|
-
component: 'Text',
|
|
195
|
-
type: 'number',
|
|
196
|
-
name: 'id',
|
|
197
|
-
title: 'ID',
|
|
198
|
-
required: true,
|
|
199
|
-
})
|
|
200
|
-
.createComponent({
|
|
201
|
-
title: 'Log in',
|
|
202
|
-
actionKey: 'submit',
|
|
203
|
-
name: 'submit',
|
|
204
|
-
component: 'Submit',
|
|
205
|
-
type: 'submit',
|
|
206
|
-
evaluate: true,
|
|
207
|
-
value: 'Log in',
|
|
208
|
-
});
|
|
209
|
-
},
|
|
210
|
-
});
|
|
211
|
-
```
|
|
212
|
-
|
|
213
|
-
### Entry with a video call
|
|
214
|
-
|
|
215
|
-
Use the `video-request` item type to create an entry representing an incoming video call. This entry can also have a form attached, which uses the `FormBuilder`-method and is handled by the `conversation.form` event. It is only supported for an `Agent` and will be displayed as a system message.
|
|
216
|
-
|
|
217
|
-
| Name | Type | Description |
|
|
218
|
-
| -------------- | -------- | ----------------------------------------------- |
|
|
219
|
-
| `header` | `string` | Header for the entry. |
|
|
220
|
-
| `acceptLabel` | `string` | Label to be shown for the "accept call button" |
|
|
221
|
-
| `declineLabel` | `string` | Label to be shown for the "decline call button" |
|
|
222
|
-
|
|
223
|
-
##### Example of an entry for an incoming video call
|
|
224
|
-
|
|
225
|
-
```ts
|
|
226
|
-
agent.print([
|
|
227
|
-
[
|
|
228
|
-
'video-request',
|
|
229
|
-
{
|
|
230
|
-
header: 'Video call',
|
|
231
|
-
accept: 'Accept',
|
|
232
|
-
decline: 'Decline',
|
|
233
|
-
},
|
|
234
|
-
],
|
|
235
|
-
]);
|
|
236
|
-
```
|
|
237
|
-
|
|
238
|
-
When the user presses one of these buttons to accept or decline the call, an action will be dispatched with actionKey `accept-video-call` or `decline-video-call`, depending on which button was clicked.
|
|
239
|
-
|
|
240
|
-
Listening to these actions can be done as following:
|
|
241
|
-
|
|
242
|
-
```ts
|
|
243
|
-
component.actions.watch('conversation.action', (input, next) => {
|
|
244
|
-
if (input.actionKey === 'accept-video-call') {
|
|
245
|
-
// this will render an overlay over the widget,
|
|
246
|
-
// and prepare the widget for displaying the actual call
|
|
247
|
-
component.actions.dispatch('show-overlay', {});
|
|
248
|
-
} else if (input.actionKey === 'decline-video-call') {
|
|
249
|
-
// ...
|
|
250
|
-
}
|
|
251
|
-
return next(input);
|
|
252
|
-
});
|
|
253
|
-
```
|
|
254
|
-
|
|
255
|
-
### Video Call Events
|
|
256
|
-
|
|
257
|
-
| Action Key | Description |
|
|
258
|
-
| --------------------------- | ---------------------------------------------------------------------------------------------- |
|
|
259
|
-
| `show-overlay` | Dispatch this event when you want to render an overlay where you can render the video call |
|
|
260
|
-
| `overlay-mounted` | Dispatched when the overlay is rendered, will provide an HTML element to render the video call |
|
|
261
|
-
| `hide-overlay` | Hide overlay |
|
|
262
|
-
| `show-overlay-conversation` | Show the underlying conversation on top of the video overlay |
|
|
263
|
-
| `hide-overlay-conversation` | Hide the conversation overlay. |
|
|
264
|
-
|
|
265
|
-
#### show-overlay
|
|
266
|
-
|
|
267
|
-
This event is recommended to be used when a user accept an video call. See the example above for one way of implementing it. This event will result in the `overlay-mounted` event being dispatched, which you may subscribe to and use to render the video call.
|
|
268
|
-
|
|
269
|
-
#### overlay-mounted
|
|
270
|
-
|
|
271
|
-
Use an overlay over the conversation to render your video call. The `show-overlay`-action, as described above, accomplishes this. After the overlay is rendered and ready it will dispatch another event: `overlay-mounted`. Use the HTML element this generates to render your video call.
|
|
272
|
-
|
|
273
|
-
```ts
|
|
274
|
-
component.actions.watch('overlay-mounted', (overlayElem, next) => {
|
|
275
|
-
// the overlayElem here may be used to render the ongoing call
|
|
276
|
-
});
|
|
277
|
-
```
|
|
278
|
-
|
|
279
|
-
#### hide-overlay
|
|
280
|
-
|
|
281
|
-
Dispatching this event will hide the overlay
|
|
282
|
-
|
|
283
|
-
```ts
|
|
284
|
-
component.actions.dispatch('hide-overlay', {});
|
|
285
|
-
```
|
|
286
|
-
|
|
287
|
-
#### show-overlay-conversation
|
|
288
|
-
|
|
289
|
-
Dispatching this event will show the underlying conversation on top of the video overlay.
|
|
290
|
-
|
|
291
|
-
```ts
|
|
292
|
-
component.actions.dispatch('show-overlay-conversation', {});
|
|
293
|
-
```
|
|
294
|
-
|
|
295
|
-
#### hide-overlay-conversation
|
|
296
|
-
|
|
297
|
-
Dispatching this event will hide the conversation overlay.
|
|
298
|
-
|
|
299
|
-
```ts
|
|
300
|
-
component.actions.dispatch('hide-overlay-conversation', {});
|
|
301
|
-
```
|
|
302
|
-
|
|
303
|
-
### Available default messages types
|
|
304
|
-
|
|
305
|
-
The below message types are available out of the box.
|
|
306
|
-
|
|
307
|
-
| Message type key | Description | Value |
|
|
308
|
-
| ---------------- | ---------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
309
|
-
| `button-list` | List of action buttons. | `{ header?: string, actions: Array<{ actionKey: string, label: string, symbol?: { type: string, content: string } }> } ` |
|
|
310
|
-
| `link-list` | List of action links. | `{ header?: string, actions: Array<{ actionKey: string, label: string }> }` |
|
|
311
|
-
| `item-list` | List of detailed items with optional description and icon. | `{ header?: string, actions: Array<{ actionKey: string, label: string, description?: string, symbol?: { type: string, content: string } }> }` |
|
|
312
|
-
| `html` | Html content. | `{ body: string }` |
|
|
313
|
-
| `separator` | Separator for dividing different messages. | N/A |
|
|
314
|
-
| `text` | Plain text content. | `string` |
|
|
315
|
-
| `video-request` | Incoming video call prompt. | `{ header: string, accept: string, decline: string }` |
|
|
316
|
-
|
|
317
|
-
### The loading and typing indicators
|
|
318
|
-
|
|
319
|
-
When you need to fetch data from external resource you should use the `loading()` function on the `ConversationProvider` to inform the user that something is about to happen. Even in cases when the response is available immediately it gives a better user experience to present a loading indicator for a short while.
|
|
320
|
-
|
|
321
|
-
When you need to make the user aware that your agent is currently typing, you should use the `typing` function on `Agent`.
|
|
322
|
-
|
|
323
|
-
#### Example of `loading`
|
|
324
|
-
|
|
325
|
-
```ts
|
|
326
|
-
const done = conversation.loading();
|
|
327
|
-
// ...
|
|
328
|
-
done(); // remove loader
|
|
329
|
-
```
|
|
330
|
-
|
|
331
|
-
#### Example of `typing`
|
|
332
|
-
|
|
333
|
-
```ts
|
|
334
|
-
const done = agent.typing();
|
|
335
|
-
// ...
|
|
336
|
-
done(); // remove loader
|
|
337
|
-
```
|
|
338
|
-
|
|
339
|
-
## Writing system messages
|
|
340
|
-
|
|
341
|
-
System message in the conversation are sent by using the `print` method on the `conversation`. The `print` method accepts the same arguments as on the `Agent`.
|
|
342
|
-
|
|
343
|
-
#### Example
|
|
344
|
-
|
|
345
|
-
```ts
|
|
346
|
-
conversation.print([['text', 'Hello world!']]);
|
|
347
|
-
```
|
|
348
|
-
|
|
349
|
-
## Reading from the conversation
|
|
350
|
-
|
|
351
|
-
The second parameter to your provider handler is a `ComponentNode` instance representing the conversational component. From it you can read the component's properties and react to action emitted by the component.
|
|
352
|
-
|
|
353
|
-
The following actions are emitted from the conversational component:
|
|
354
|
-
|
|
355
|
-
> For default actions it is necessary to call `next()` unless you want to completely stop the execution flow for the particular action. Not doing so will stop any succeeding handlers and may unintentionally break functionality.
|
|
356
|
-
|
|
357
|
-
| Action | Name | Type | Description |
|
|
358
|
-
| -------------------------- | ------------ | ---------- | --------------------------------------------------------- |
|
|
359
|
-
| `conversation.user-typing` | `textLength` | `number` | The current text length of the user's message. |
|
|
360
|
-
| `conversation.user-submit` | `text` | `string` | The submitted text. |
|
|
361
|
-
| `conversation.action` | `text` | `string` | Key of the submitted action. |
|
|
362
|
-
| `conversation.form` | `data` | `FormData` | The form data. |
|
|
363
|
-
| `conversation.form` | `formKey` | `string` | The unique key for the form. |
|
|
364
|
-
| `conversation.form` | `actionKey` | `string` | The key of the form component responsible for the change. |
|
|
365
|
-
|
|
366
|
-
If you want to subscribe to any of the `conversation.form`-actions you have access to the `ComponentNodeController`. Example below:
|
|
367
|
-
|
|
368
|
-
```ts
|
|
369
|
-
component.actions.watch('conversation.form', (input, next) => {
|
|
370
|
-
return next(input);
|
|
371
|
-
});
|
|
372
|
-
```
|
|
373
|
-
|
|
374
|
-
### Submitting forms
|
|
375
|
-
|
|
376
|
-
If you want to listen for form events you should subscribe to the `conversation.form` event. By passing a `key` to the form, you are able to target the form in this listener.
|
|
377
|
-
|
|
378
|
-
```ts
|
|
379
|
-
component.actions.watch('conversation.form', (input, next) => {
|
|
380
|
-
if (input.formKey === 'my-login-form' && input.actionKey === 'submit') {
|
|
381
|
-
const username = input.data.username;
|
|
382
|
-
const password = input.data.password;
|
|
383
|
-
}
|
|
384
|
-
|
|
385
|
-
return next(input);
|
|
386
|
-
});
|
|
387
|
-
```
|
|
388
|
-
|
|
389
|
-
### Adding custom list items
|
|
390
|
-
|
|
391
|
-
You can add custom list items to the conversation. To do so you have to register your own custom React component, which will be mapped to a key also provided by you.
|
|
392
|
-
|
|
393
|
-
#### Example of custom list items
|
|
394
|
-
|
|
395
|
-
```ts
|
|
396
|
-
import { registerCustomMessageComponent } from '@telia-ace/widget-conversation';
|
|
397
|
-
|
|
398
|
-
registerCustomMessageComponent(
|
|
399
|
-
container,
|
|
400
|
-
'my-custom-list-item',
|
|
401
|
-
import('./my-custom-list-item')
|
|
402
|
-
);
|
|
403
|
-
```
|
|
404
|
-
|
|
405
|
-
Once the component has been registered it will be available to be used as any other item in the `print` method on the Conversation API.
|
|
406
|
-
|
|
407
|
-
## Custom secondary action
|
|
408
|
-
|
|
409
|
-
You can add a secondary action button that's displayed next to the user input field. This button can run any event that you write. You need to add the `secondaryAction` property to the conversation component in the configuration. It accepts an object with the following properties:
|
|
410
|
-
|
|
411
|
-
| Name | Type | Description |
|
|
412
|
-
| -------- | -------- | ------------------------------------------------------------------- |
|
|
413
|
-
| `action` | `string` | An action that will be dispatched when the button is pressed |
|
|
414
|
-
| `label` | `string` | Will be used as a "title" and aria-label on the HTML button element |
|
|
415
|
-
| `icon` | `string` | An icon to be displayed, defaults to "browse" icon if left empty |
|
|
416
|
-
|
|
417
|
-
```json
|
|
418
|
-
"conversation": {
|
|
419
|
-
"type": "conversation",
|
|
420
|
-
"properties": {
|
|
421
|
-
"secondaryAction": {
|
|
422
|
-
"action": "my-secondary-action",
|
|
423
|
-
"label": "Label for the secondary action",
|
|
424
|
-
"icon": "my-icon"
|
|
425
|
-
}
|
|
426
|
-
// ...other properties
|
|
427
|
-
}
|
|
428
|
-
}
|
|
429
|
-
```
|
|
430
|
-
|
|
431
|
-
When you have added this property to the component, you can create an event for it in your code:
|
|
432
|
-
|
|
433
|
-
```ts
|
|
434
|
-
component.actions.watch('conversation.action', (input, next) => {
|
|
435
|
-
if (input === 'my-secondary-action') {
|
|
436
|
-
// handle action
|
|
437
|
-
}
|
|
438
|
-
});
|
|
439
|
-
```
|
|
440
|
-
|
|
441
|
-
## Completing a conversation (handover)
|
|
442
|
-
|
|
443
|
-
When you are handing over the conversation to another provider, the current provider is disabled until the child provider has completed. To hand it over to the previous provider you should use the `complete()` method on the `ConversationProvider` object.
|
|
444
|
-
|
|
445
|
-
Example:
|
|
446
|
-
|
|
447
|
-
```ts
|
|
448
|
-
if (actionKey === 'email-confirmation-submit') {
|
|
449
|
-
conversation.complete();
|
|
450
|
-
}
|
|
451
|
-
```
|
|
452
|
-
|
|
453
|
-
This will complete the current provider and return to the one that started the now closed provider.
|
|
454
|
-
|
|
455
|
-
## Rehydrating the conversation
|
|
456
|
-
|
|
457
|
-
The conversation may be stored in a session to allow it to remain when reloading the page.
|
|
458
|
-
This behavior is disabled by default but can be turned on by adding the `rehydrate` property to the `ConversationComponent` like this:
|
|
459
|
-
|
|
460
|
-
```
|
|
461
|
-
"components": {
|
|
462
|
-
"type": "conversation",
|
|
463
|
-
"properties": {
|
|
464
|
-
"rehydrate": true
|
|
465
|
-
}
|
|
466
|
-
}
|
|
467
|
-
|
|
468
|
-
```
|
|
469
|
-
|
|
470
|
-
## Reading the conversation history
|
|
471
|
-
|
|
472
|
-
In order to print the complete conversation you can use the `ConversationProvider.getHistory()` method.
|
|
473
|
-
|
|
474
|
-
Example:
|
|
475
|
-
|
|
476
|
-
```ts
|
|
477
|
-
const logs = conversation.getHistory();
|
|
478
|
-
```
|
|
479
|
-
|
|
480
|
-
This will produce an array of items in the following format:
|
|
481
|
-
|
|
482
|
-
```ts
|
|
483
|
-
{
|
|
484
|
-
message?: string; // the body of the message, if any
|
|
485
|
-
options?: string[] // an array of options presented in the message
|
|
486
|
-
alias: string; // name of the message author
|
|
487
|
-
source: string; // agent or user
|
|
488
|
-
timestamp: number; // timestamp of when message was created
|
|
489
|
-
}
|
|
490
|
-
```
|
package/dist/agent.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"agent.d.ts","sourceRoot":"","sources":["../src/agent.ts"],"names":[],"mappings":"AACA,OAAO,EACL,iBAAiB,EAGlB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAEL,2BAA2B,EAC3B,wBAAwB,EACxB,MAAM,EACP,MAAM,SAAS,CAAC;AAEjB,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B,CAAC;AAEF,qBAAa,KAAK;IAMd,OAAO,CAAC,QAAQ;IALlB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;gBAGf,QAAQ,EAAE,oBAAoB,EACtC,QAAQ,EAAE,aAAa;IAOzB,KAAK,aAEC,MAAM,GACN,2BAA2B,GAC3B,yBAAyB,GAAG,CAAC,GAC7B,yBAAyB,GAAG,CAAC,EAAE,YACzB;QACR,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,KACA,iBAAiB,GAAG,SAAS,CAe9B;IACF,MAAM,iCAKJ;IAEF,MAAM,CAAC,QAAQ,EAAE,aAAa,GAAG,IAAI;CAkBtC"}
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import { LitElement, PropertyValueMap } from 'lit';
|
|
2
|
-
import { Ref } from 'lit/directives/ref.js';
|
|
3
|
-
import '@teliads/components/dist/components/telia-icon';
|
|
4
|
-
import './ui/message';
|
|
5
|
-
import './ui/message-list';
|
|
6
|
-
/** Message types */
|
|
7
|
-
import './ui/message-types/message-type-html';
|
|
8
|
-
import './ui/message-types/message-type-link-list';
|
|
9
|
-
import './ui/message-types/message-type-separator';
|
|
10
|
-
declare const WidgetElement: (new (...args: any[]) => import("@telia-ace/widget-runtime-flamingo/dist/mixins/widget-component.mixin").WidgetComponentInterface) & typeof LitElement;
|
|
11
|
-
export declare class ConversationComponent extends WidgetElement {
|
|
12
|
-
static styles: import("lit").CSSResultGroup[];
|
|
13
|
-
_onClick(e: Event): Promise<void>;
|
|
14
|
-
_onSendMessage(e: Event): Promise<void>;
|
|
15
|
-
_inputHandler(e: any): void;
|
|
16
|
-
_actionHandler(e: CustomEvent<{
|
|
17
|
-
actionKey: string;
|
|
18
|
-
payload: Record<string, any> | string;
|
|
19
|
-
}>): void;
|
|
20
|
-
message: string;
|
|
21
|
-
conversationContentRef: Ref<HTMLDivElement>;
|
|
22
|
-
updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
|
|
23
|
-
render(): import("lit").TemplateResult<1>;
|
|
24
|
-
}
|
|
25
|
-
export default ConversationComponent;
|
|
26
|
-
//# sourceMappingURL=conversation.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"conversation.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/conversation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,gBAAgB,EAAsB,MAAM,KAAK,CAAC;AAEvE,OAAO,EAAa,GAAG,EAAO,MAAM,uBAAuB,CAAC;AAM5D,OAAO,gDAAgD,CAAC;AAKxD,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAE3B,oBAAoB;AACpB,OAAO,sCAAsC,CAAC;AAC9C,OAAO,2CAA2C,CAAC;AACnD,OAAO,2CAA2C,CAAC;AAGnD,QAAA,MAAM,aAAa,wJAA8B,CAAC;AAElD,qBACa,qBAAsB,SAAQ,aAAa;IACtD,OAAgB,MAAM,iCAgIpB;IAEI,QAAQ,CAAC,CAAC,EAAE,KAAK;IAKjB,cAAc,CAAC,CAAC,EAAE,KAAK;IAO7B,aAAa,CAAC,CAAC,EAAE,GAAG;IAIpB,cAAc,CACZ,CAAC,EAAE,WAAW,CAAC;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAA;KAAE,CAAC;IAM9E,OAAO,EAAE,MAAM,CAAM;IAErB,sBAAsB,EAAE,GAAG,CAAC,cAAc,CAAC,CAAe;IAEjD,OAAO,CACd,iBAAiB,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GACnE,IAAI;IAcE,MAAM;CA6DhB;AAED,eAAe,qBAAqB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EACL,0BAA0B,EAC1B,yBAAyB,EAC1B,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,mBAAmB,EACnB,uBAAuB,EACxB,MAAM,+BAA+B,CAAC;AAIvC,MAAM,MAAM,0BAA0B,GAAG;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,CAAC,qBAAqB,CAAC,CAAC;IACjC,MAAM,EAAE,yBAAyB,CAAC;IAClC,IAAI,EAAE,uBAAuB,CAAC;CAC/B,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,GAAG,EAAE,MAAM,CAAC;CACb,GAAG,0BAA0B,CAAC;AAE/B,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,YAAY,EAAE,yBAAyB,EAAE,CAAC;IAC1C,QAAQ,EAAE,mBAAmB,EAAE,CAAC;CACjC,CAAC;AAuCF,MAAM,MAAM,+BAA+B,GAAG;IAC5C,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,EAAE,0BAA0B,EAAE,CAAC;IACvC,OAAO,CAAC,EAAE;QAAE,YAAY,EAAE,OAAO,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC;IACxD,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,gBAAgB,EAAE,MAAM,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,GAAG,EAAE,CAAC;IACpB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CACpE,CAAC;AAEF,eAAO,MAAM,qBAAqB,cAAqB,SAAS,kBAkI/D,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"message-list.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/ui/message-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAErD,OAAO,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAE1D,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAapB;IAGF,KAAK,EAAE,wBAAwB,CAAC,GAAG,CAAC,EAAE,CAAM;IAE5C,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,sBAAsB;IAWrB,MAAM;CA4BhB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"message-type-html.d.ts","sourceRoot":"","sources":["../../../../../src/components/conversation/ui/message-types/message-type-html.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,EACL,+BAA+B,EAC/B,wBAAwB,EACzB,MAAM,mBAAmB,CAAC;AAE3B,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BAcpB;IAGF,OAAO,EAAG,wBAAwB,CAAC,+BAA+B,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;IAErE,MAAM;CAKhB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"message-type-link-list.d.ts","sourceRoot":"","sources":["../../../../../src/components/conversation/ui/message-types/message-type-link-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAErD,OAAO,EACL,+BAA+B,EAC/B,wBAAwB,EACzB,MAAM,mBAAmB,CAAC;AAE3B,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,MAAM,4BAyCpB;IAGF,OAAO,EAAG,wBAAwB,CAAC,+BAA+B,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC;IAElF,YAAY,CAAC,IAAI,EAAE,GAAG;IAYb,MAAM;CAkBhB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"message-type-separator.d.ts","sourceRoot":"","sources":["../../../../../src/components/conversation/ui/message-types/message-type-separator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EACL,+BAA+B,EAC/B,wBAAwB,EACzB,MAAM,mBAAmB,CAAC;AAE3B,qBACa,oBAAqB,SAAQ,UAAU;IAClD,OAAgB,MAAM,4BAapB;IAGF,OAAO,EAAG,wBAAwB,CAAC,+BAA+B,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC;IAE1E,MAAM;CAGhB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/ui/message.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAE,0BAA0B,EAAE,MAAM,WAAW,CAAC;AAGvD,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAmFpB;IAGF,OAAO,EAAG,0BAA0B,CAAC;IAErC,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI;IA0B9C,MAAM;CA2DhB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,4BAA4B,SAAU,WAAW,SAQ7D,CAAC"}
|