@telia-ace/widget-conversation 1.0.38-next.0 → 1.0.38-next.2

package/README.md

@@ -97,11 +97,11 @@ You can post an entry into the conversation with actions. You can specify a titl
 This can be either in the form of a "ButtonList" or an "LinkList" as demostrated below.
 
 | Name      | Type     | Description                                  |
-| --------- | -------- | -------------------------------------------- |
+|-----------|----------|----------------------------------------------|
 | `header`  | `string` | Header for the entry.                        |
 | `actions` | `array`  | Array of of available actions for the entry. |
 
-##### Example of a list of actions
+##### Example of list of actions
 
 ```ts
 // example of button list
@@ -143,6 +143,31 @@ agent.print([
         },
     ],
 ]);
+
+// and an item list could contain an optional icon and description
+agent.print([
+    [
+        'item-list',
+        {
+            header: 'Download invoices',
+            actions: [
+                {
+                    actionKey: 'invoice_190201',
+                    label: 'Invoice 190201',
+                    symbol: {
+                        type: 'FontAwesome',
+                        content: 'file',
+                    },
+                },
+                {
+                    actionKey: 'invoice_190301',
+                    label: 'Invoice 190301',
+                    description: 'Clicking here will download the invoice',
+                },
+            ],
+        },
+    ],
+]);
 ```
 
 ### Entry with a form
@@ -150,7 +175,7 @@ agent.print([
 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.
 
 | Name    | Type                    | Description                                                                                                                                                                                  |
-| ------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|---------|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | `title` | `string`                | Title for the entry.                                                                                                                                                                         |
 | `body`  | `string`                | Body content for the entry. Supports HTML.                                                                                                                                                   |
 | `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`. |
@@ -190,7 +215,7 @@ agent.print({
 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.
 
 | Name           | Type     | Description                                     |
-| -------------- | -------- | ----------------------------------------------- |
+|----------------|----------|-------------------------------------------------|
 | `header`       | `string` | Header for the entry.                           |
 | `acceptLabel`  | `string` | Label to be shown for the "accept call button"  |
 | `declineLabel` | `string` | Label to be shown for the "decline call button" |
@@ -230,7 +255,7 @@ component.actions.watch('conversation.action', (input, next) => {
 ### Video Call Events
 
 | Action Key                  | Description                                                                                    |
-| --------------------------- | ---------------------------------------------------------------------------------------------- |
+|-----------------------------|------------------------------------------------------------------------------------------------|
 | `show-overlay`              | Dispatch this event when you want to render an overlay where you can render the video call     |
 | `overlay-mounted`           | Dispatched when the overlay is rendered, will provide an HTML element to render the video call |
 | `hide-overlay`              | Hide overlay                                                                                   |
@@ -275,6 +300,19 @@ Dispatching this event will hide the conversation overlay.
 component.actions.dispatch('hide-overlay-conversation', {});
 ```
 
+### Available default messages types
+The below message types are available out of the box.
+
+| Message type key | Description                                                | Value                                                                                                                                         |
+|------------------|------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------|
+| `button-list`    | List of action buttons.                                    | `{ header?: string, actions: Array<{ actionKey: string, label: string, symbol?: { type: string, content: string } }> }      `                 |
+| `link-list`      | List of action links.                                      | `{ header?: string, actions: Array<{ actionKey: string, label: string }> }`                                                                   |
+| `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 } }> }` |
+| `html`           | Html content.                                              | `{ body: string }`                                                                                                                            |
+| `separator`      | Separator for dividing different messages.                 | N/A                                                                                                                                           |
+| `text`           | Plain text content.                                        | `string`                                                                                                                                      |
+| `video-request`  | Incoming video call prompt.                                | `{ header: string, accept: string, decline: string }`                                                                                         |
+
 ### The loading and typing indicators
 
 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.
@@ -316,7 +354,7 @@ The following actions are emitted from the conversational component:
 > 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.
 
 | Action                     | Name         | Type       | Description                                               |
-| -------------------------- | ------------ | ---------- | --------------------------------------------------------- |
+|----------------------------|--------------|------------|-----------------------------------------------------------|
 | `conversation.user-typing` | `textLength` | `number`   | The current text length of the user's message.            |
 | `conversation.user-submit` | `text`       | `string`   | The submitted text.                                       |
 | `conversation.action`      | `text`       | `string`   | Key of the submitted action.                              |
@@ -366,7 +404,7 @@ Once the component has been registered it will be available to be used as any ot
 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:
 
 | Name     | Type     | Description                                                         |
-| -------- | -------- | ------------------------------------------------------------------- |
+|----------|----------|---------------------------------------------------------------------|
 | `action` | `string` | An action that will be dispatched when the button is pressed        |
 | `label`  | `string` | Will be used as a "title" and aria-label on the HTML button element |
 | `icon`   | `string` | An icon to be displayed, defaults to "browse" icon if left empty    |

package/dist/components/conversation/ui/message-list-items/item-list.d.ts

@@ -0,0 +1,8 @@
+import { DispatchAction } from '@telia-ace/widget-ui';
+import { FC } from 'react';
+import { LinkListProperties } from '../../../../types';
+type Props = {
+    dispatch: DispatchAction;
+} & LinkListProperties;
+export declare const ItemList: FC<Props>;
+export {};