@telia-ace/widget-conversation 1.0.19 → 1.0.22

package/README.md

@@ -58,32 +58,34 @@ const agent = conversation.createAgent({
 
 ## Writing to the conversation
 
+***`print()` accepts an array, which is considered best practice when writing to the conversation. The previous way of posting an object is still currently be supported, but is considered to be deprecated.**
+
 ### Posting, updating and removing content
 
-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 accommedate different types of content.
+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.
 
-The `print(content: object)` function let's you return a `ConversationEntry` message that can be used to update and/or remove the content from the conversation.
+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.
 
 ##### Example of simple text message
 
 ```ts
 // print user message
-conversation.user.print('Lorem ipsum');
+conversation.user.print([['text', 'Lorem ipsum']]);
 
 // print agent message
 const agent = conversation.createAgent();
-agent.print('Lorem ipsum');
+agent.print([['text', 'Lorem ipsum']]);
 ```
 
 ##### Example of updating or removing content
 
 ```ts
 const agent = conversation.createAgent();
-const entry = agent.print('Hello world!');
+const entry = agent.print([['text', 'Hello world!']]);
 
-entry.update({
+entry.update([
     // ...
-});
+]);
 
 entry.remove();
 ```
@@ -92,24 +94,55 @@ entry.remove();
 
 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.
 
-| Name      | Type     | Description                                                   |
-| --------- | -------- | ------------------------------------------------------------- |
-| `title`   | `string` | Title for the entry.                                          |
-| `body`    | `string` | Body content for the entry. Supports HTML.                    |
-| `actions` | `object` | Key-value-pairs representing available actions for the entry. |
+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
 
 ```ts
-agent.print({
-    title: 'Download invoices',
-    body: 'Click an invoice below to download a copy.',
-    actions: {
-        invoice_190201: 'Invoice 190201',
-        invoice_190301: 'Invoice 190301',
-        invoice_190401: 'Invoice 190401',
-    },
-});
+// example of button list
+agent.print([
+    [
+        'button-list',
+        {
+            header: 'Download invoices',
+            actions: [
+                {
+                    actionKey: 'invoice_190201',
+                    label: 'Invoice 190201',
+                },
+                {
+                    actionKey: 'invoice_190301',
+                    label: 'Invoice 190301',
+                },
+            ],
+        },
+    ],
+]);
+
+// here we use a link list instead, but with the same actions
+agent.print([
+    [
+        'link-list',
+        {
+            header: 'Download invoices',
+            actions: [
+                {
+                    actionKey: 'invoice_190201',
+                    label: 'Invoice 190201',
+                },
+                {
+                    actionKey: 'invoice_190301',
+                    label: 'Invoice 190301',
+                },
+            ],
+        },
+    ],
+]);
 ```
 
 ### Entry with a form
@@ -152,6 +185,56 @@ agent.print({
 });
 ```
 
+### Entry with a video call
+
+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" |
+
+##### Example of an entry for an incoming video call
+
+```ts
+agent.print([
+    [
+        'video-request',
+        {
+            header: 'Video call',
+            accept: 'Accept',
+            decline: 'Decline',
+        },
+    ],
+]);
+```
+
+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.
+
+Listening to these actions can be done as following:
+
+```ts
+component.actions.watch('conversation.action', (input, next) => {
+    if (input.actionKey === 'accept-video-call') {
+        // this will render an overlay over the widget,
+        // and prepare the widget for displaying the actual call
+        component.actions.dispatch('show-overlay', {});
+    } else if (input.actionKey === 'decline-video-call') {
+        // ...
+    }
+    return next(input);
+});
+```
+
+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.
+
+```ts
+component.actions.watch('overlay-mounted', (overlayElem, next) => {
+    // the overlayElem here may be used to render the ongoing call
+});
+```
+
 ### 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.
@@ -181,7 +264,7 @@ System message in the conversation are sent by using the `print` method on the `
 #### Example
 
 ```ts
-conversation.print('Hello world!');
+conversation.print([['text', 'Hello world!']]);
 ```
 
 ## Reading from the conversation

package/dist/components/conversation/ui/loader.d.ts

@@ -4,5 +4,5 @@ declare type Props = {
     className?: string;
     agentData?: ConversationMessageSender;
 };
-declare const ConversationLoader: React.FC<Props>;
+declare const ConversationLoader: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 export default ConversationLoader;

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

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

package/dist/conversation.js

@@ -29,9 +29,9 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { Input, Button, borderTabStyle, SymbolBadge, useDispatch, useProperties, useScroll, Typography, invertedHoverButton, List, buttonCss, Html as Html$1, genericHtml, Lightbox, ItemList, itemList, useComponent, list, headingElement, usePrevious, useTransitionEnd, WidgetOverlayOutlet } from "@telia-ace/widget-ui";
+import { Input, Button, borderTabStyle, SymbolBadge, useDispatch, useProperties, useScroll, Typography, invertedHoverButton, List, buttonCss, Html as Html$1, genericHtml, ItemList, itemList, useComponent, list, headingElement, WidgetOverlayOutlet } from "@telia-ace/widget-ui";
 import { appendClassNames, uuid } from "@telia-ace/widget-utilities";
-import React, { useState, useEffect, Suspense, useCallback, useRef } from "react";
+import React, { useState, useEffect, forwardRef, Suspense, useMemo, useCallback, useRef } from "react";
 import styled, { css, keyframes } from "styled-components";
 import { FormComponent } from "@telia-ace/widget-forms";
 import { ConversationMessageListItemType, ConversationMessageType } from "./index.js";
@@ -146,7 +146,7 @@ const ConversationInput = ({ className }) => {
     "aria-label": inputPlaceholder,
     placeholder: inputPlaceholder,
     onFocusChange: setInputFocus
-  }), /* @__PURE__ */ React.createElement(StyledButton, {
+  }), /* @__PURE__ */ React.createElement(StyledButton$1, {
     disabled: inputDisabled,
     onClick: submit,
     title: sendButtonLabel,
@@ -205,7 +205,7 @@ const StyledInput = styled(Input)`
         font-style: italic;
     }
 `;
-const StyledButton = styled(Button)`
+const StyledButton$1 = styled(Button)`
     flex: 0 0 50px;
     align-self: stretch;
     background-color: transparent;
@@ -221,7 +221,7 @@ const StyledButton = styled(Button)`
 }};
     }
 `;
-const SecondaryActionButton = styled(StyledButton)`
+const SecondaryActionButton = styled(StyledButton$1)`
     border-right: ${(p) => p.theme.border};
     margin: ${(p) => {
   var _a;
@@ -334,6 +334,10 @@ const LoaderAnimation = keyframes`
 const Loader = styled.div`
     display: flex;
     justify-content: center;
+    padding: 0 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
     > div {
         height: 10px;
         width: 10px;
@@ -355,6 +359,7 @@ const Loader = styled.div`
 const ContentBundle = styled.div`
     grid-area: content;
     max-width: 100%;
+    overflow: hidden;
 `;
 const MessageTitle = styled(Typography)`
     font-size: ${(p) => {
@@ -544,21 +549,14 @@ const StyledActionButton = styled.button`
 }}
     }
 `;
-const ConversationLoader = ({ className, agentData }) => {
-  return /* @__PURE__ */ React.createElement(ContentBundle, null, /* @__PURE__ */ React.createElement(MessageContainer, null, /* @__PURE__ */ React.createElement(MessageContent, null, /* @__PURE__ */ React.createElement(Loader, null, /* @__PURE__ */ React.createElement("div", null), /* @__PURE__ */ React.createElement("div", null), /* @__PURE__ */ React.createElement("div", null)))));
-};
-const imageLightboxRenderer = (attrs) => /* @__PURE__ */ React.createElement(Lightbox, {
-  attrs
+const ConversationLoader = forwardRef(({ className, agentData }, ref) => {
+  return /* @__PURE__ */ React.createElement(ContentBundle, {
+    ref
+  }, /* @__PURE__ */ React.createElement(MessageContainer, null, /* @__PURE__ */ React.createElement(MessageContent, null, /* @__PURE__ */ React.createElement(Loader, null, /* @__PURE__ */ React.createElement("div", null), /* @__PURE__ */ React.createElement("div", null), /* @__PURE__ */ React.createElement("div", null)))));
 });
-const htmlParseInstructions = {
-  transform: {
-    img: imageLightboxRenderer
-  }
-};
 const Html = ({ body }) => {
   return /* @__PURE__ */ React.createElement(StyledHtml, {
-    html: body,
-    htmlParseInstruction: htmlParseInstructions
+    html: body
   });
 };
 const StyledHtml = styled(Html$1)`
@@ -835,6 +833,9 @@ const StyledLinkButton = styled(Button)`
   var _a;
   return (_a = p.theme.colors) == null ? void 0 : _a.primary;
 }};
+    max-width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
 
     ${(p) => {
   var _a, _b;
@@ -877,6 +878,114 @@ const Text = ({ text }) => {
 const StyledTypography = styled(Typography)`
     ${messageContentPadding}
 `;
+const VideoRequest = ({
+  header = "Video call",
+  acceptLabel = "Accept",
+  declineLabel = "Decline",
+  dispatch
+}) => {
+  const actions = useMemo(() => {
+    return [
+      {
+        label: acceptLabel,
+        actionKey: "accept-video-call",
+        symbol: {
+          type: "Svg",
+          content: "video"
+        }
+      },
+      {
+        label: declineLabel,
+        actionKey: "decline-video-call",
+        symbol: {
+          type: "Svg",
+          content: "close"
+        }
+      }
+    ];
+  }, [acceptLabel, declineLabel]);
+  return /* @__PURE__ */ React.createElement(StyledItemList, {
+    header,
+    items: actions,
+    renderItem: (item) => {
+      const bgColor = item.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
+      return /* @__PURE__ */ React.createElement("li", {
+        key: item.actionKey
+      }, /* @__PURE__ */ React.createElement(StyledButton, {
+        onClick: () => {
+          dispatch("action", item);
+        },
+        "aria-label": item.label,
+        title: item.label,
+        bgColor
+      }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+        symbol: item.symbol,
+        size: 25
+      })));
+    }
+  });
+};
+const StyledItemList = styled(ItemList)`
+    ${itemList}
+    > ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+        > li {
+            margin: 0;
+        }
+    }
+    ${messageContentPadding}
+`;
+const StyledButton = styled(Button)`
+    ${buttonCss};
+
+    background-color: ${(p) => p.bgColor};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #ffffff;
+    width: 46px;
+    height: 46px;
+    border-radius: 100%;
+
+    &:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
+                ${borderTabStyle}
+                background-color: transparent;
+
+                i,
+                svg {
+                    color: ${(p2) => {
+    var _a2;
+    return (_a2 = p2.theme.colors) == null ? void 0 : _a2.primary;
+  }};
+
+                    path {
+                        stroke: ${(p2) => {
+    var _a2;
+    return (_a2 = p2.theme.colors) == null ? void 0 : _a2.primary;
+  }};
+                    }
+                }
+            `;
+}}
+    }
+
+    i,
+    svg {
+        color: #fff;
+
+        path {
+            stroke: #fff;
+        }
+    }
+`;
 const mapItem = ([type, content]) => {
   return { type, content, id: uuid() };
 };
@@ -907,6 +1016,11 @@ const MessageList = ({ items, dispatch }) => {
             dispatch
           }));
         }
+        case ConversationMessageListItemType.VideoRequest: {
+          return /* @__PURE__ */ React.createElement(VideoRequest, __spreadProps(__spreadValues({}, item.content), {
+            dispatch
+          }));
+        }
         default: {
           return /* @__PURE__ */ React.createElement(Custom, {
             type: item.type,
@@ -1036,56 +1150,31 @@ const Message = ({ content, isUser, stacked }) => {
   }));
 };
 const ConversationContent = () => {
-  const lastEntry = useRef(document.createElement("div"));
+  const lastEntry = useRef(null);
   const [scrollableCss, viewElem] = useScroll(true);
   const { messages, loading, typingActors } = useProperties();
-  const [canSmooth, setCanSmooth] = useState(false);
-  const previousMessages = usePrevious(messages);
-  const previousTypingActors = usePrevious(typingActors);
-  const scrollView = useCallback((lastEntry2, smooth = true) => {
-    if (lastEntry2 !== null && lastEntry2.current !== null) {
-      if (messages && messages.length === 1) {
-        lastEntry2.current.focus();
-      }
-      if (lastEntry2.current.id.indexOf("typing_") !== -1 && viewElem.current.scrollTopMax - viewElem.current.scrollTop > lastEntry2.current.clientHeight + 100) {
-        return;
-      }
-      setTimeout(() => {
-        if (lastEntry2.current) {
-          lastEntry2.current.scrollIntoView({
-            block: "end",
-            behavior: smooth ? "smooth" : "auto"
-          });
-        }
-      }, 150);
+  const scrollView = useCallback(() => {
+    if (lastEntry.current) {
+      lastEntry.current.scrollIntoView({
+        block: "end",
+        behavior: "smooth"
+      });
     }
   }, [lastEntry]);
   useEffect(() => {
-    if (canSmooth) {
-      const messageCountChanged = messages.length !== (previousMessages == null ? void 0 : previousMessages.length);
-      const typingActorCountChanged = typingActors.length !== (previousTypingActors == null ? void 0 : previousTypingActors.length);
-      const messageContentCountChanged = messages.reduce((changed, message, index) => {
-        var _a;
-        if (((_a = previousMessages == null ? void 0 : previousMessages[index]) == null ? void 0 : _a.content.length) !== message.content.length) {
-          return true;
-        }
-        return changed;
-      }, false);
-      if (messageCountChanged || messageContentCountChanged || typingActorCountChanged) {
-        scrollView(lastEntry);
-      }
-    }
+    const handler = setTimeout(scrollView, 250);
+    return () => clearTimeout(handler);
   }, [messages, typingActors]);
-  useTransitionEnd(() => {
-    setCanSmooth(true);
-    scrollView(lastEntry, false);
-  });
+  const isLoadingOrTyping = useMemo(() => {
+    return !!typingActors.length || loading;
+  }, [typingActors, loading]);
   const renderTypingActors = () => {
     if (typingActors && typingActors.length) {
       return typingActors.map((actor, index) => {
+        const isLast = index === typingActors.length - 1;
         return /* @__PURE__ */ React.createElement(MessageEntry, {
           id: `typing_${actor.name}`,
-          ref: typingActors.length ? lastEntry : null,
+          ref: loading ? null : isLast ? lastEntry : null,
           key: `typing_${actor.name}`
         }, /* @__PURE__ */ React.createElement(AgentMessage, {
           timestamp: Date.now(),
@@ -1101,13 +1190,16 @@ const ConversationContent = () => {
     ref: viewElem
   }, messages && messages.length ? messages.map((message, index) => {
     const { type, timestamp, sender, content } = message;
+    const isLast = index === messages.length - 1;
     return /* @__PURE__ */ React.createElement(MessageEntry, {
       className: "humany-conversation-entry",
       tabIndex: -1,
       key: `${type}_${sender == null ? void 0 : sender.name}_${timestamp}_${content[0].key}`,
-      ref: index + 1 < messages.length ? null : typingActors.length ? null : lastEntry
+      ref: isLoadingOrTyping ? null : isLast ? lastEntry : null
     }, /* @__PURE__ */ React.createElement(ConversationMessage, __spreadValues({}, message)));
-  }) : null, renderTypingActors(), loading && /* @__PURE__ */ React.createElement(MessageEntry, null, /* @__PURE__ */ React.createElement(ConversationLoader, null))), /* @__PURE__ */ React.createElement(ConversationInput, null));
+  }) : null, renderTypingActors(), loading && /* @__PURE__ */ React.createElement(MessageEntry, null, /* @__PURE__ */ React.createElement(ConversationLoader, {
+    ref: lastEntry
+  }))), /* @__PURE__ */ React.createElement(ConversationInput, null));
 };
 const Scrollable = styled.div`
     display: flex;