@telia-ace/widget-conversation 1.0.16 → 1.0.19

package/dist/conversation.js

@@ -29,9 +29,9 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { Input, Button, borderTabStyle, SymbolBadge, useDispatch, useProperties, useScroll, Typography, useComponent, invertedHoverButton, Html, List, buttonCss, Lightbox, useTransitionEnd, headingElement } from "@telia-ace/widget-ui";
+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 { appendClassNames, uuid } from "@telia-ace/widget-utilities";
-import React, { useState, useEffect, Suspense, Fragment, useRef, useCallback } from "react";
+import React, { useState, useEffect, Suspense, useCallback, useRef } from "react";
 import styled, { css, keyframes } from "styled-components";
 import { FormComponent } from "@telia-ace/widget-forms";
 import { ConversationMessageListItemType, ConversationMessageType } from "./index.js";
@@ -82,7 +82,9 @@ const ConversationInput = ({ className }) => {
       return;
     }
     e.preventDefault();
-    dispatch("action", secondaryAction.action);
+    dispatch("action", __spreadValues({
+      actionKey: secondaryAction.action
+    }, secondaryAction));
   };
   const calculateHeight = (value) => {
     if (multiline && inputRef.current) {
@@ -117,7 +119,7 @@ const ConversationInput = ({ className }) => {
     className: appendClassNames("humany-conversation-input", className),
     "data-has-focus": inputFocus,
     scrollableCss
-  }, secondaryAction && /* @__PURE__ */ React.createElement(StyledButton, {
+  }, secondaryAction && /* @__PURE__ */ React.createElement(SecondaryActionButton, {
     disabled: inputDisabled,
     onClick: onSecondaryActionButtonClick,
     title: secondaryAction.label,
@@ -164,13 +166,10 @@ const StyledTextArea = styled(Input)`
     line-height: 1.2em;
     height: 1.2em;
     padding: 0;
-    margin: ${(p) => {
+    margin: calc(${(p) => {
   var _a;
   return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}} ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
-}};
+}} * 2);
     font-size: ${(p) => {
   var _a;
   return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
@@ -222,6 +221,13 @@ const StyledButton = styled(Button)`
 }};
     }
 `;
+const SecondaryActionButton = styled(StyledButton)`
+    border-right: ${(p) => p.theme.border};
+    margin: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}} 0;
+`;
 const Wrapper$1 = styled.div`
     ${(p) => p.grow ? css`
                   min-height: 50px;
@@ -349,7 +355,6 @@ const Loader = styled.div`
 const ContentBundle = styled.div`
     grid-area: content;
     max-width: 100%;
-    overflow: hidden;
 `;
 const MessageTitle = styled(Typography)`
     font-size: ${(p) => {
@@ -361,37 +366,17 @@ const MessageTitle = styled(Typography)`
 `;
 const MessageContainer = styled.div`
     display: flex;
+    justify-content: ${(p) => p.user ? "end" : "start"};
 `;
 const MessageContent = styled.div`
-    background-color: ${(p) => {
-  var _a, _b;
-  return p.user ? (_a = p.theme.colors) == null ? void 0 : _a.primary : (_b = p.theme.colors) == null ? void 0 : _b.accent;
-}};
-    color: ${(p) => {
-  var _a, _b;
-  return p.user ? (_a = p.theme.colors) == null ? void 0 : _a.accent : (_b = p.theme.colors) == null ? void 0 : _b.text;
-}};
-    border-radius: 5px; // TODO: prop?
-    border: 1px solid rgb(231, 231, 231);
-    padding-top: calc(${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
-}} - ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}});
-    padding-bottom: calc(${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
-}} - ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}});
+    ${(p) => !p.user && p.stacked && nonUserMessageStyling(p.stacked, p.theme)}
+    ${(p) => p.user && p.stacked && userMessageStyling(p.stacked, p.theme)}
+
+    display: inline-block;
     margin-top: ${(p) => {
   var _a;
   return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
 }};
-    display: inline-block;
     && > * {
         overflow-wrap: break-word;
         word-wrap: break-word;
@@ -401,63 +386,196 @@ const MessageContent = styled.div`
     }
     max-width: 100%;
     ${(p) => p.fullWidth && "width: 100%;"}
+`;
+const nonUserMessageStyling = (stacked, theme) => {
+  var _a, _b;
+  const colors = css`
+        background-color: ${(_a = theme.colors) == null ? void 0 : _a.accent};
+        color: ${(_b = theme.colors) == null ? void 0 : _b.text};
+        ${theme.border && `border: ${theme.border};`};
+    `;
+  if (!theme.borderRadius) {
+    return colors;
+  }
+  return css`
+        ${colors}
 
-    ${(p) => !p.user && css`
-            border: ${p.theme.border};
-        `}
-  ${(p) => p.user && "margin-left: auto"};
+        border-top-right-radius: ${theme.borderRadius};
+        border-bottom-right-radius: ${theme.borderRadius};
 
-    ${(p) => p.stacked === "first" && p.user && css`
-            border-bottom-right-radius: 1px; // TODO: Prop?
-        `}
-    ${(p) => p.stacked === "middle" && p.user && css`
-            border-bottom-right-radius: 1px;
-            border-top-right-radius: 1px;
+        ${stacked === "first" && `
+            border-top-left-radius: ${theme.borderRadius};
         `}
-  ${(p) => p.stacked === "last" && p.user && css`
-            border-top-right-radius: 1px;
-        `}
-  ${(p) => p.stacked === "first" && !p.user && css`
-            border-bottom-left-radius: 1px;
-        `}
-  ${(p) => p.stacked === "middle" && !p.user && css`
-            border-bottom-left-radius: 1px;
-            border-top-left-radius: 1px;
+
+        ${stacked === "last" && `
+            border-bottom-left-radius: ${theme.borderRadius};
         `}
-  ${(p) => p.stacked === "last" && !p.user && css`
-            border-top-left-radius: 1px;
-        `};
+    `;
+};
+const userMessageStyling = (stacked, theme) => {
+  var _a, _b;
+  const colors = css`
+        background-color: ${(_a = theme.colors) == null ? void 0 : _a.primary};
+        color: ${(_b = theme.colors) == null ? void 0 : _b.accent};
+    `;
+  if (!theme.borderRadius) {
+    return colors;
+  }
+  return css`
+        ${colors}
 
-    ${(p) => !p.stacked && css`
-            ${p.user ? "border-bottom-right-radius: 1px;" : "border-bottom-left-radius: 1px;"}
-        `};
+        border-top-left-radius: ${theme.borderRadius};
+        border-bottom-left-radius: ${theme.borderRadius};
 
-    transition: border-radius 500ms linear;
-`;
+        ${stacked === "first" && `
+            border-top-right-radius: ${theme.borderRadius};
+        `}
+
+        ${stacked === "last" && `
+            border-bottom-right-radius: ${theme.borderRadius};
+        `}
+    `;
+};
 const MessageContentPart = styled.div`
-    padding: ${(p) => {
+    margin-bottom: ${(p) => {
   var _a;
   return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}} ${(p) => {
+}};
+    &:last-child {
+        margin-bottom: 0;
+    }
+`;
+const messageContentPadding = css`
+    margin: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}} 0;
+    padding: 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+`;
+const StyledForm = styled(FormComponent)`
+    margin: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}} 0;
+    padding: 0 ${(p) => {
   var _a;
   return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
 }};
-
-    ${(p) => p.noPadding && css`
-            padding: 0;
-        `}
-
-    margin-bottom: ${(p) => {
+    & button.humany-form-component-button {
+        ${(p) => {
+  var _a, _b;
+  return invertedHoverButton({
+    active: false,
+    primaryColor: (_a = p.theme.colors) == null ? void 0 : _a.primary,
+    secondaryColor: (_b = p.theme.colors) == null ? void 0 : _b.accent
+  });
+}};
+        display: block;
+        width: 100%;
+        margin-bottom: ${(p) => {
   var _a;
   return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
 }};
-    &:last-child {
-        margin-bottom: 0;
+    }
+    & button.humany-form-component-submit {
+        width: 100%;
+        margin: 0;
+        :not(:last-child) {
+            margin-bottom: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+        }
+    }
+`;
+const StyledActionList = styled(List)`
+    padding: 0;
+    list-style: none;
+    button {
+        font-size: inherit;
+    }
+    margin: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}} 0;
+    padding: 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}};
+    display: flex;
+    gap: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+`;
+const StyledActionButton = styled.button`
+    ${buttonCss};
+    display: block;
+    background-color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
+}};
+    width: 100%;
+    color: #fff;
+    margin: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}} 0;
+    padding: 0 ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}};
+    font-family: Lato;
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.huge;
+}};
+    font-weight: 300;
+    &:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
+                ${borderTabStyle}
+                background-color: transparent;
+            `;
+}}
     }
 `;
 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 htmlParseInstructions = {
+  transform: {
+    img: imageLightboxRenderer
+  }
+};
+const Html = ({ body }) => {
+  return /* @__PURE__ */ React.createElement(StyledHtml, {
+    html: body,
+    htmlParseInstruction: htmlParseInstructions
+  });
+};
+const StyledHtml = styled(Html$1)`
+    ${genericHtml}
+    color: inherit;
+    white-space: pre-wrap;
+    ${messageContentPadding}
+    a {
+        color: ${(p) => p.theme.colors.link};
+        &:focus {
+            ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && borderTabStyle;
+}};
+        }
+    }
+`;
 const StyledTimestamp = styled.p`
     && {
         font-size: ${(p) => {
@@ -532,21 +650,6 @@ const StyledAgentMessage = styled.div`
                       'info';
               `};
 `;
-const CustomMessage = (props) => {
-  const CustomComponent = useComponent(props.type);
-  if (!CustomComponent) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(Suspense, {
-    fallback: null
-  }, /* @__PURE__ */ React.createElement(MessageContent, {
-    user: props.isUser,
-    stacked: !!props.stacked && props.stacked,
-    fullWidth: !!props.content.form || !!props.content.actions
-  }, /* @__PURE__ */ React.createElement(MessageContentPart, {
-    noPadding: !!props.content.noPadding && props.content.noPadding
-  }, /* @__PURE__ */ React.createElement(CustomComponent, __spreadValues({}, props.content)))));
-};
 const SystemMessage = ({
   className,
   children,
@@ -604,241 +707,60 @@ const StyledUserMessage = styled.div`
     flex-direction: column;
     align-items: flex-end;
 `;
-const CustomMessageListItem = ({ type, content = {} }) => {
-  const Component = useComponent(type);
-  if (!Component || !type) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(Component, __spreadValues({}, content));
-};
-const imageLightboxRenderer$1 = (attrs) => /* @__PURE__ */ React.createElement(Lightbox, {
-  attrs
+const mapActions = (actions) => Array.isArray(actions) ? actions : Object.keys(actions).map((i) => {
+  return {
+    label: actions[i],
+    actionKey: i
+  };
 });
-const htmlParseInstructions$1 = {
-  transform: {
-    img: imageLightboxRenderer$1
-  }
-};
-const ConversationContent = ({ content, isUser, stacked }) => {
-  const dispatch = useDispatch();
-  const { title, body, actions, form, type, items } = content;
-  if (type)
-    return /* @__PURE__ */ React.createElement(CustomMessage, {
-      type,
-      content,
-      isUser,
-      stacked
-    });
-  return /* @__PURE__ */ React.createElement(MessageContent, {
-    noPadding: true,
-    user: isUser,
-    stacked: !!stacked && stacked,
-    fullWidth: !!form || !!actions
-  }, title && /* @__PURE__ */ React.createElement(MessageContentPart, null, /* @__PURE__ */ React.createElement(MessageTitle, {
-    variant: "h2"
-  }, title)), body && /* @__PURE__ */ React.createElement(MessageContentPart, null, /* @__PURE__ */ React.createElement(StyledHtml, {
-    html: body,
-    htmlParseInstruction: htmlParseInstructions$1
-  })), form && /* @__PURE__ */ React.createElement(MessageContentPart, null, /* @__PURE__ */ React.createElement(StyledForm, __spreadProps(__spreadValues({}, form), {
-    onChange: (key, data) => {
-      dispatch("form", {
-        data,
-        formKey: form.schema.id,
-        actionKey: key
-      });
-    }
-  }))), actions && /* @__PURE__ */ React.createElement(MessageContentPart, null, /* @__PURE__ */ React.createElement(StyledActionList, {
-    items: Object.keys(actions).map((i) => {
-      return { label: actions[i], actionKey: i };
-    }),
+const ButtonList = ({ header, actions, dispatch }) => {
+  return /* @__PURE__ */ React.createElement(StyledButtonList, {
+    header,
+    items: mapActions(actions),
     renderItem: (item) => {
       return /* @__PURE__ */ React.createElement("li", {
         key: item.actionKey
-      }, /* @__PURE__ */ React.createElement(StyledActionButton, {
+      }, /* @__PURE__ */ React.createElement(StyledButtonListButton, {
         onClick: () => {
-          dispatch("action", item.actionKey);
-        }
-      }, item.label));
-    }
-  })), items && /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(MessageContentPart, {
-    key: uuid(),
-    noPadding: true
-  }, /* @__PURE__ */ React.createElement(StyledActionList, {
-    items: items.map(([type2, content2]) => {
-      return { type: type2, content: content2 };
-    }),
-    renderItem: (item) => {
-      const itemKey = uuid();
-      switch (item.type) {
-        case ConversationMessageListItemType.Header: {
-          return /* @__PURE__ */ React.createElement(ConversationListItem, {
-            key: itemKey
-          }, /* @__PURE__ */ React.createElement(HeaderText, null, item.content));
-        }
-        case ConversationMessageListItemType.Text: {
-          return /* @__PURE__ */ React.createElement(ConversationListItem, {
-            key: itemKey
-          }, /* @__PURE__ */ React.createElement("span", null, item.content));
-        }
-        case ConversationMessageListItemType.HTML: {
-          return /* @__PURE__ */ React.createElement(ConversationListItem, {
-            key: itemKey
-          }, /* @__PURE__ */ React.createElement(StyledHtml, {
-            html: item.content.body,
-            htmlParseInstruction: htmlParseInstructions$1
-          }));
-        }
-        case ConversationMessageListItemType.Separator: {
-          return /* @__PURE__ */ React.createElement(ConversationListItem, {
-            key: itemKey,
-            noPadding: true
-          }, /* @__PURE__ */ React.createElement(SeparatorPadding, null, /* @__PURE__ */ React.createElement(Separator, null)));
-        }
-        case ConversationMessageListItemType.LinkList: {
-          const items2 = Array.isArray(item.content.actions) ? item.content.actions : Object.keys(item.content.actions).map((i) => {
-            return {
-              label: item.content.actions[i],
-              actionKey: i
-            };
-          });
-          return /* @__PURE__ */ React.createElement(ConversationListItem, {
-            key: itemKey
-          }, /* @__PURE__ */ React.createElement(StyledLinkList, {
-            items: items2,
-            renderItem: (item2) => {
-              return /* @__PURE__ */ React.createElement("li", {
-                key: item2.actionKey
-              }, /* @__PURE__ */ React.createElement(StyledLinkButton, {
-                help: item2.actionKey === "help",
-                onClick: () => {
-                  dispatch("action", item2.actionKey);
-                }
-              }, item2.label, item2.actionKey === "help" && /* @__PURE__ */ React.createElement(SymbolBadge, {
-                size: 14,
-                symbol: {
-                  type: "Svg",
-                  content: "caret-down"
-                }
-              })));
-            }
-          }));
-        }
-        case ConversationMessageListItemType.ButtonList: {
-          const items2 = Array.isArray(item.content.actions) ? item.content.actions : Object.keys(item.content.actions).map((i) => {
-            return {
-              label: item.content.actions[i],
-              actionKey: i
-            };
-          });
-          return /* @__PURE__ */ React.createElement(ConversationListItem, {
-            key: itemKey
-          }, /* @__PURE__ */ React.createElement(StyledButtonList, {
-            items: items2,
-            renderItem: (item2) => {
-              return /* @__PURE__ */ React.createElement("li", {
-                key: item2.actionKey
-              }, /* @__PURE__ */ React.createElement(StyledButtonListButton, {
-                onClick: () => {
-                  dispatch("action", item2.actionKey);
-                }
-              }, /* @__PURE__ */ React.createElement(SymbolBadge, {
-                symbol: item2.symbol
-              }), item2.label));
-            }
-          }));
-        }
-        default: {
-          return /* @__PURE__ */ React.createElement(ConversationListItem, {
-            key: itemKey,
-            noPadding: true
-          }, /* @__PURE__ */ React.createElement(CustomMessageListItem, {
-            type: item.type,
-            content: item.content
-          }));
-        }
-      }
+          dispatch("action", item);
+        },
+        "aria-label": item.label,
+        title: item.label
+      }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+        symbol: item.symbol
+      }), item.label));
     }
-  }))));
-};
-const StyledForm = styled(FormComponent)`
-    & button.humany-form-component-button {
-        ${(p) => {
-  var _a, _b;
-  return invertedHoverButton({
-    active: false,
-    primaryColor: (_a = p.theme.colors) == null ? void 0 : _a.primary,
-    secondaryColor: (_b = p.theme.colors) == null ? void 0 : _b.accent
   });
-}};
-        display: block;
-        width: 100%;
-        margin-bottom: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    }
-    & button.humany-form-component-submit {
-        width: 100%;
-        margin: 0;
-        :not(:last-child) {
-            margin-bottom: ${(p) => {
+};
+const StyledButtonList = 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 StyledHtml = styled(Html)`
-    white-space: pre-wrap;
-    a {
-        color: ${(p) => p.theme.colors.link};
-        &:focus {
-            ${(p) => {
-  var _a;
-  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && borderTabStyle;
-}};
-        }
-    }
-`;
-const StyledActionList = styled(List)`
-    padding: 0;
-    list-style: none;
-    margin: 0 -${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    > li {
-        margin: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    }
-`;
-const StyledButtonList = styled(List)`
-    padding: 0;
-    list-style: none;
-    > li {
-        margin: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}} ${(p) => {
+const StyledButtonListButton = styled(Button)`
+    ${buttonCss};
+
+    display: block;
+    padding: ${(p) => {
   var _a;
   return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
 }};
-        margin-left: 0;
-        display: inline-block;
-    }
-`;
-const StyledButtonListButton = styled.button`
-    ${buttonCss};
-    display: block;
-    text-align: left;
     background-color: ${(p) => {
   var _a;
   return (_a = p.theme.colors) == null ? void 0 : _a.primary;
 }};
     width: 100%;
-    color: #fff;
+    color: #ffffff;
     &:focus {
         ${(p) => {
   var _a;
@@ -857,35 +779,58 @@ const StyledButtonListButton = styled.button`
 }};
     }
 `;
-const StyledLinkList = styled(List)`
-    padding: 0;
-    list-style: none;
-    > li {
-        margin-bottom: ${(p) => {
+const Custom = ({ type, content = {} }) => {
+  const Component = useComponent(type);
+  if (!Component || !type) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Suspense, {
+    fallback: null
+  }, /* @__PURE__ */ React.createElement(Component, __spreadValues({}, content)));
+};
+const LinkList = ({ header, actions, dispatch }) => {
+  return /* @__PURE__ */ React.createElement(StyledLinkList, {
+    header,
+    items: mapActions(actions),
+    renderItem: (item) => {
+      return /* @__PURE__ */ React.createElement("li", {
+        key: item.actionKey
+      }, /* @__PURE__ */ React.createElement(StyledLinkButton, {
+        help: item.actionKey === "help",
+        onClick: () => {
+          dispatch("action", item);
+        },
+        "aria-label": item.label,
+        title: item.label
+      }, item.label, item.actionKey === "help" && /* @__PURE__ */ React.createElement(SymbolBadge, {
+        size: 14,
+        symbol: {
+          type: "Svg",
+          content: "caret-down"
+        }
+      })));
+    }
+  });
+};
+const StyledLinkList = styled(ItemList)`
+    ${itemList}
+    ${messageContentPadding}
+    > ul {
+        display: flex;
+        flex-direction: column;
+        gap: ${(p) => {
   var _a;
   return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
 }};
-
-        &:last-child {
-            margin-bottom: 0;
+        > li {
+            margin: 0;
         }
     }
 `;
-const HeaderText = styled.strong`
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.huge;
-}};
-`;
-const StyledLinkButton = styled.button`
+const StyledLinkButton = styled(Button)`
     display: block;
-    background-color: transparent;
     text-align: left;
-    border: none;
-    padding: 0;
     font-weight: 300;
-    font-family: inherit;
-    cursor: pointer;
     color: ${(p) => {
   var _a;
   return (_a = p.theme.colors) == null ? void 0 : _a.primary;
@@ -903,167 +848,96 @@ const StyledLinkButton = styled.button`
             }
         `;
 }}
-`;
-styled(SymbolBadge)`
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.large;
-}} !important;
-    margin-right: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-`;
-const StyledActionButton = styled.button`
-    ${buttonCss};
-    display: block;
-    background-color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
-}};
-    width: 100%;
-    color: #fff;
-    font-family: Lato;
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.huge;
-}};
-    font-weight: 300;
+
     &:focus {
         ${(p) => {
-  var _a;
+  var _a, _b;
   return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
                 ${borderTabStyle}
-                background-color: transparent;
+                span {
+                    color: ${(_b = p.theme.colors) == null ? void 0 : _b.primary};
+                    text-decoration: underline;
+                }
             `;
-}}
-    }
-`;
-const SeparatorPadding = styled.div`
-    padding-top: calc(${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
-}} - ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}});
-    padding-bottom: calc(${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
-}} - ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}});
-`;
-const Separator = styled.div`
-    background-color: #efefef;
-    height: 1px;
-    width: 100%;
-`;
-styled.div`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-
-    > i,
-    svg {
-        margin-right: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
 }};
     }
 `;
-const ConversationListItem = styled.li`
-    padding-left: ${(p) => {
-  var _a;
-  return p.noPadding ? 0 : (_a = p.theme.sizes) == null ? void 0 : _a.medium;
-}};
-    padding-right: ${(p) => {
-  var _a;
-  return p.noPadding ? 0 : (_a = p.theme.sizes) == null ? void 0 : _a.medium;
-}};
+const Separator = () => {
+  return /* @__PURE__ */ React.createElement(StyledSeparator, null);
+};
+const StyledSeparator = styled.div`
+    ${(p) => p.theme.border && `border-bottom: ${p.theme.border};`}
+    width: 100%;
 `;
-styled.li`
-    @media (min-width: 768px) {
-        display: list-item !important;
-        margin-right: 0 !important;
-        margin-top: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}} !important;
-    }
+const Text = ({ text }) => {
+  return /* @__PURE__ */ React.createElement(StyledTypography, {
+    variant: "span"
+  }, text);
+};
+const StyledTypography = styled(Typography)`
+    ${messageContentPadding}
 `;
-styled.button`
-    @media (min-width: 768px) {
-        min-width: 100%;
-        margin-right: 0;
-    }
-    display: inline-block;
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
-}};
-    border-color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
-}} !important;
-    font-weight: 300;
-    && {
-        margin-right: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}};
+const mapItem = ([type, content]) => {
+  return { type, content, id: uuid() };
+};
+const MessageList = ({ items, dispatch }) => {
+  return /* @__PURE__ */ React.createElement(StyledList, {
+    items: items.map(mapItem),
+    renderLi: true,
+    renderItem: (item) => {
+      switch (item.type) {
+        case ConversationMessageListItemType.Text: {
+          return /* @__PURE__ */ React.createElement(Text, {
+            text: item.content
+          });
+        }
+        case ConversationMessageListItemType.HTML: {
+          return /* @__PURE__ */ React.createElement(Html, __spreadValues({}, item.content));
+        }
+        case ConversationMessageListItemType.Separator: {
+          return /* @__PURE__ */ React.createElement(Separator, __spreadValues({}, item.content));
+        }
+        case ConversationMessageListItemType.LinkList: {
+          return /* @__PURE__ */ React.createElement(LinkList, __spreadProps(__spreadValues({}, item.content), {
+            dispatch
+          }));
+        }
+        case ConversationMessageListItemType.ButtonList: {
+          return /* @__PURE__ */ React.createElement(ButtonList, __spreadProps(__spreadValues({}, item.content), {
+            dispatch
+          }));
+        }
+        default: {
+          return /* @__PURE__ */ React.createElement(Custom, {
+            type: item.type,
+            content: item.content
+          });
+        }
+      }
     }
-    ${(p) => {
-  var _a, _b;
-  return p["data-direction"] === "horizontal" && css`
-            width: 225px;
-            max-width: calc(50% - ${(_a = p.theme.sizes) == null ? void 0 : _a.large} - ${(_b = p.theme.sizes) == null ? void 0 : _b.small});
-        `;
-}}
-    ${(p) => p["data-direction"] === "vertical" && css`
-            min-width: 150px;
-        `}
-  ${(p) => {
-  var _a;
-  return invertedHoverButton({
-    primaryColor: `${(_a = p.theme.colors) == null ? void 0 : _a.primary}`,
-    secondaryColor: "#FFFFFF"
   });
-}}
-    i {
-        margin: 0 ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}} 0 0;
-    }
-    span {
+};
+const StyledList = styled(List)`
+    ${list}
+
+    > li {
+        margin: 0;
     }
 `;
-const imageLightboxRenderer = (attrs) => /* @__PURE__ */ React.createElement(Lightbox, {
-  attrs
-});
-const htmlParseInstructions = {
-  transform: {
-    img: imageLightboxRenderer
-  }
-};
-const ConversationMessageComponent = ({
+const ConversationMessage = ({
   className,
   timestamp,
   sender,
   type,
   content
 }) => {
-  useDispatch();
-  const getMessageStackPosition = (index) => {
-    let messageOrder = void 0;
+  const getMessageStackPosition = useCallback((index) => {
+    let messageOrder = "first";
     if (content.length > 1) {
       messageOrder = index === 0 ? "first" : index + 1 === content.length ? "last" : "middle";
     }
     return messageOrder;
-  };
+  }, [content]);
   const createSystemMessage = () => {
     return /* @__PURE__ */ React.createElement(React.Fragment, null, content.map((item) => {
       const { key, body, title, form, actions } = item;
@@ -1075,9 +949,8 @@ const ConversationMessageComponent = ({
         timestamp,
         fullWidth: !!form || !!actions
       }, discrete && body ? /* @__PURE__ */ React.createElement(Html, {
-        html: body,
-        htmlParseInstruction: htmlParseInstructions
-      }) : /* @__PURE__ */ React.createElement(ConversationContent, {
+        body
+      }) : /* @__PURE__ */ React.createElement(Message, {
         content: item,
         isUser: false
       }));
@@ -1091,7 +964,7 @@ const ConversationMessageComponent = ({
     }, /* @__PURE__ */ React.createElement(ContentBundle, null, content.map((item, index) => {
       return /* @__PURE__ */ React.createElement(MessageContainer, {
         key: item.key
-      }, /* @__PURE__ */ React.createElement(ConversationContent, {
+      }, /* @__PURE__ */ React.createElement(Message, {
         content: item,
         isUser: false,
         stacked: getMessageStackPosition(index)
@@ -1104,8 +977,9 @@ const ConversationMessageComponent = ({
       className
     }, /* @__PURE__ */ React.createElement(ContentBundle, null, content.map((item, index) => {
       return /* @__PURE__ */ React.createElement(MessageContainer, {
+        user: true,
         key: item.key
-      }, /* @__PURE__ */ React.createElement(ConversationContent, {
+      }, /* @__PURE__ */ React.createElement(Message, {
         content: item,
         isUser: true,
         stacked: getMessageStackPosition(index)
@@ -1123,86 +997,51 @@ const ConversationMessageComponent = ({
       return null;
   }
 };
-styled(FormComponent)`
-    & button.humany-form-component-button {
-        ${(p) => {
-  var _a, _b;
-  return invertedHoverButton({
-    active: false,
-    primaryColor: (_a = p.theme.colors) == null ? void 0 : _a.primary,
-    secondaryColor: (_b = p.theme.colors) == null ? void 0 : _b.accent
-  });
-}};
-        display: block;
-        width: 100%;
-        margin-bottom: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    }
-
-    & button.humany-form-component-submit {
-        width: 100%;
-        margin: 0;
-        :not(:last-child) {
-            margin-bottom: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-        }
+const Message = ({ content, isUser, stacked }) => {
+  const dispatch = useDispatch();
+  const { title, body, actions, form, items } = content;
+  return /* @__PURE__ */ React.createElement(MessageContent, {
+    user: isUser,
+    stacked,
+    fullWidth: !!form || !!actions
+  }, title && /* @__PURE__ */ React.createElement(MessageContentPart, null, /* @__PURE__ */ React.createElement(MessageTitle, {
+    variant: "h2"
+  }, title)), body && /* @__PURE__ */ React.createElement(MessageContentPart, null, /* @__PURE__ */ React.createElement(Html, {
+    body
+  })), form && /* @__PURE__ */ React.createElement(MessageContentPart, null, /* @__PURE__ */ React.createElement(StyledForm, __spreadProps(__spreadValues({}, form), {
+    onChange: (key, data) => {
+      dispatch("form", {
+        data,
+        formKey: form.schema.id,
+        actionKey: key
+      });
     }
-`;
-styled(Html)`
-    white-space: pre-wrap;
-
-    a {
-        color: ${(p) => p.theme.colors.link};
-        &:focus {
-            ${(p) => {
-  var _a;
-  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && borderTabStyle;
-}};
+  }))), actions && /* @__PURE__ */ React.createElement(MessageContentPart, null, /* @__PURE__ */ React.createElement(StyledActionList, {
+    items: Object.keys(actions).map((i) => {
+      return { label: actions[i], actionKey: i };
+    }),
+    renderItem: (item) => {
+      return /* @__PURE__ */ React.createElement("li", {
+        key: item.actionKey
+      }, /* @__PURE__ */ React.createElement(StyledActionButton, {
+        onClick: () => {
+          dispatch("action", item.actionKey);
         }
+      }, item.label));
     }
-`;
-styled(List)`
-    padding: 0;
-    list-style: none;
-    margin: 0 -${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    > li {
-        margin: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    }
-`;
-styled.button`
-    ${buttonCss};
-    display: block;
-    background-color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
-}};
-    width: 100%;
-    color: #fff;
-    &:focus {
-        ${(p) => {
-  var _a;
-  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
-                ${borderTabStyle}
-                background-color: transparent;
-            `;
-}}
-    }
-`;
-const Conversation = ({ className }) => {
+  })), items && /* @__PURE__ */ React.createElement(MessageList, {
+    key: uuid(),
+    items,
+    dispatch
+  }));
+};
+const ConversationContent = () => {
   const lastEntry = useRef(document.createElement("div"));
   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) {
@@ -1218,12 +1057,23 @@ const Conversation = ({ className }) => {
             behavior: smooth ? "smooth" : "auto"
           });
         }
-      }, 0);
+      }, 150);
     }
   }, [lastEntry]);
   useEffect(() => {
     if (canSmooth) {
-      scrollView(lastEntry);
+      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);
+      }
     }
   }, [messages, typingActors]);
   useTransitionEnd(() => {
@@ -1245,9 +1095,7 @@ const Conversation = ({ className }) => {
     }
     return null;
   };
-  return /* @__PURE__ */ React.createElement(Wrapper, {
-    className: appendClassNames(className, "humany-conversation-component")
-  }, /* @__PURE__ */ React.createElement(Scrollable, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Scrollable, {
     tabIndex: 0,
     scrollableCss,
     ref: viewElem
@@ -1258,19 +1106,9 @@ const Conversation = ({ className }) => {
       tabIndex: -1,
       key: `${type}_${sender == null ? void 0 : sender.name}_${timestamp}_${content[0].key}`,
       ref: index + 1 < messages.length ? null : typingActors.length ? null : lastEntry
-    }, /* @__PURE__ */ React.createElement(ConversationMessageComponent, __spreadValues({}, message)));
+    }, /* @__PURE__ */ React.createElement(ConversationMessage, __spreadValues({}, message)));
   }) : null, renderTypingActors(), loading && /* @__PURE__ */ React.createElement(MessageEntry, null, /* @__PURE__ */ React.createElement(ConversationLoader, null))), /* @__PURE__ */ React.createElement(ConversationInput, null));
 };
-const Wrapper = styled.div`
-    position: absolute;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    top: 0;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-`;
 const Scrollable = styled.div`
     display: flex;
     flex-direction: column;
@@ -1309,13 +1147,6 @@ const MessageEntry = styled.div`
 }};
     }
 
-    * {
-        font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
-}};
-    }
-
     & span,
     p,
     a,
@@ -1332,5 +1163,140 @@ const MessageEntry = styled.div`
             font-weight: normal;
         `)}
 `;
+const OverlayOutlet = ({ dispatch }) => {
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    if (wrapperRef.current && wrapperRef.current.parentNode) {
+      dispatch("overlay-mounted", wrapperRef.current);
+    }
+  }, [wrapperRef]);
+  return /* @__PURE__ */ React.createElement(WidgetOverlayOutlet, {
+    portalId: "humany-conversation-overlay-portal",
+    className: "humany-conversation-overlay-outlet",
+    ref: wrapperRef
+  });
+};
+const ConversationOverlayOutlet = ({
+  dispatch,
+  header,
+  buttonLabel
+}) => {
+  return /* @__PURE__ */ React.createElement(StyledWidgetOverlayOutlet, {
+    portalId: "humany-conversation-portal",
+    className: "humany-conversation-outlet"
+  }, /* @__PURE__ */ React.createElement(ConversationOverlayHead, {
+    className: "humany-conversation-outlet-head"
+  }, /* @__PURE__ */ React.createElement(ConversationOverlayHeadButton, {
+    className: "humany-conversation-outlet-head-button",
+    "aria-label": buttonLabel,
+    title: buttonLabel,
+    onClick: () => dispatch("hide-overlay-conversation")
+  }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+    symbol: {
+      type: "Svg",
+      content: "caret-down"
+    },
+    size: 20
+  })), header && /* @__PURE__ */ React.createElement(ConversationOverlayHeader, {
+    className: "humany-conversation-outlet-header",
+    variant: "h1"
+  }, header)), /* @__PURE__ */ React.createElement(ConversationContent, null));
+};
+const StyledWidgetOverlayOutlet = styled(WidgetOverlayOutlet)`
+    z-index: 11;
+    top: auto;
+    height: 65%;
+    background-color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    border-top-right-radius: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+    border-top-left-radius: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
+}};
+`;
+const ConversationOverlayHead = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+    padding: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+    ${(p) => p.theme.border && `border-bottom: ${p.theme.border};`}
+`;
+const ConversationOverlayHeader = styled(Typography)`
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.medium;
+}};
+    color: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    margin: 0;
+`;
+const ConversationOverlayHeadButton = styled(Button)`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
+}} ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}};
+    ${(p) => p.theme.borderRadius && `border-radius: ${p.theme.borderRadius};`}
+
+    &:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && borderTabStyle;
+}};
+    }
+
+    svg line {
+        stroke: ${(p) => {
+  var _a;
+  return (_a = p.theme.colors) == null ? void 0 : _a.text;
+}};
+    }
+`;
+const Conversation = ({ className }) => {
+  const {
+    overlay,
+    overlayConversationHeader,
+    overlayConversationCloseLabel
+  } = useProperties();
+  const dispatch = useDispatch();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Wrapper, {
+    className: appendClassNames(className, "humany-conversation-component")
+  }, /* @__PURE__ */ React.createElement(ConversationContent, null)), overlay && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(OverlayOutlet, {
+    dispatch
+  }), overlay.conversation && /* @__PURE__ */ React.createElement(ConversationOverlayOutlet, {
+    dispatch,
+    header: overlayConversationHeader,
+    buttonLabel: overlayConversationCloseLabel
+  })));
+};
+const Wrapper = styled.div`
+    position: absolute;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+`;
 export { Conversation as default };
 //# sourceMappingURL=conversation.js.map