@telia-ace/widget-conversation 1.0.21 → 1.0.24

package/dist/conversation.js

@@ -1,1415 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  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 { appendClassNames, uuid } from "@telia-ace/widget-utilities";
-import React, { useState, useEffect, 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";
-import "@telia-ace/widget-core";
-import "@telia-ace/widget-services";
-import "@telia-ace/widget-plugins";
-const ConversationInput = ({ className }) => {
-  const [inputText, setInputText] = useState("");
-  const [inputFocus, setInputFocus] = useState(false);
-  const [calculatedLineHeight, setCalculatedLineHeight] = useState(0);
-  const [textareaMaxHeight, setTextareaMaxHeight] = useState(0);
-  const dispatch = useDispatch();
-  const {
-    inputPlaceholder = "Type your message",
-    inputHidden = false,
-    inputDisabled = false,
-    sendButtonLabel = "Send message",
-    inputMultiline: multiline = true,
-    secondaryAction
-  } = useProperties();
-  const [scrollableCss, inputRef] = useScroll(true);
-  useEffect(() => {
-    if (inputRef.current) {
-      const { lineHeight, maxHeight } = getComputedStyle(inputRef.current);
-      if (lineHeight && lineHeight.indexOf("px") > -1) {
-        const lineHeightNumber = lineHeight.split("px");
-        const calcLH = parseInt(lineHeightNumber[0], 10);
-        setCalculatedLineHeight(calcLH);
-        const maxHeightNumber = maxHeight.split("px");
-        setTextareaMaxHeight(parseInt(maxHeightNumber[0], 10));
-      }
-    }
-  }, [inputRef.current]);
-  const submit = (e) => {
-    if (!e.shiftKey || !multiline) {
-      e.preventDefault();
-      if (inputText && inputText.length > 0) {
-        dispatch("user-submit", { text: inputText });
-        setInputText("");
-        onChange("");
-      }
-    } else if (inputText.length < 1) {
-      e.preventDefault();
-    }
-  };
-  const onSecondaryActionButtonClick = (e) => {
-    if (!secondaryAction) {
-      return;
-    }
-    e.preventDefault();
-    dispatch("action", __spreadValues({
-      actionKey: secondaryAction.action
-    }, secondaryAction));
-  };
-  const calculateHeight = (value) => {
-    if (multiline && inputRef.current) {
-      const scrollHeight = inputRef.current.scrollHeight;
-      if (scrollHeight > calculatedLineHeight) {
-        inputRef.current.style.height = "auto";
-        let areaHeight = scrollHeight;
-        if (value.length < 1) {
-          areaHeight = calculatedLineHeight;
-        }
-        inputRef.current.style.height = `${areaHeight}px`;
-        if (areaHeight >= textareaMaxHeight) {
-          inputRef.current.style.overflowY = "scroll";
-        } else {
-          inputRef.current.style.overflowY = "hidden";
-        }
-      }
-    }
-  };
-  const onChange = (value) => {
-    calculateHeight(value);
-    setInputText(value);
-    if (value && value.length > 0) {
-      dispatch("user-typing", { textLength: value.length });
-    }
-  };
-  if (inputHidden) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(Wrapper$1, {
-    grow: multiline,
-    className: appendClassNames("humany-conversation-input", className),
-    "data-has-focus": inputFocus,
-    scrollableCss
-  }, secondaryAction && /* @__PURE__ */ React.createElement(SecondaryActionButton, {
-    disabled: inputDisabled,
-    onClick: onSecondaryActionButtonClick,
-    title: secondaryAction.label,
-    "aria-label": secondaryAction.label
-  }, /* @__PURE__ */ React.createElement(SymbolBadge, {
-    size: 24,
-    symbol: { type: "Svg", content: secondaryAction.icon || "browse" }
-  })), multiline ? /* @__PURE__ */ React.createElement(StyledTextArea, {
-    value: inputText,
-    onChange,
-    onEnter: submit,
-    disabled: inputDisabled,
-    "aria-label": inputPlaceholder,
-    placeholder: inputPlaceholder,
-    onFocusChange: setInputFocus,
-    type: "textarea",
-    rows: 1,
-    ref: inputRef
-  }) : /* @__PURE__ */ React.createElement(StyledInput, {
-    value: inputText,
-    onChange,
-    onEnter: submit,
-    disabled: inputDisabled,
-    "aria-label": inputPlaceholder,
-    placeholder: inputPlaceholder,
-    onFocusChange: setInputFocus
-  }), /* @__PURE__ */ React.createElement(StyledButton$1, {
-    disabled: inputDisabled,
-    onClick: submit,
-    title: sendButtonLabel,
-    "aria-label": sendButtonLabel
-  }, /* @__PURE__ */ React.createElement(SendSymbol, {
-    size: 22,
-    symbol: { type: "Svg", content: "send" },
-    hasContent: inputText && inputText.length
-  })));
-};
-const StyledTextArea = styled(Input)`
-    resize: none;
-    flex: 1;
-    flex-shrink: 1;
-    min-height: 1.2em;
-    max-height: 148px;
-    line-height: 1.2em;
-    height: 1.2em;
-    padding: 0;
-    margin: calc(${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}} * 2);
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
-}};
-    border: none;
-    transition: height 200ms linear;
-    outline: none;
-`;
-const StyledInput = styled(Input)`
-    flex: 1;
-    border: none;
-    background-color: transparent;
-    font-weight: 300;
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
-}};
-    line-height: 1.2em;
-    outline: none;
-    padding-left: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
-}};
-    color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-    &::placeholder {
-        color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.textLight;
-}};
-        font-style: italic;
-    }
-`;
-const StyledButton$1 = styled(Button)`
-    flex: 0 0 50px;
-    align-self: stretch;
-    background-color: transparent;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    color: #a6a6a6;
-    &:focus {
-        ${(p) => {
-  var _a;
-  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && borderTabStyle;
-}};
-    }
-`;
-const SecondaryActionButton = styled(StyledButton$1)`
-    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;
-                  max-height: 150px;
-              ` : css`
-                  height: 50px;
-              `}
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    background-color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.accent;
-}};
-    border-top: ${(p) => p.theme.inputBorder};
-    ${(p) => p["data-has-focus"] && css`
-            ${(p2) => {
-  var _a;
-  return ((_a = p2.theme.accessibility) == null ? void 0 : _a.isTabbing) && borderTabStyle;
-}};
-        `}
-    ${StyledTextArea} {
-        ${(p) => !!p.scrollableCss && p.scrollableCss}
-    }
-`;
-const SendSymbol = styled((_a) => {
-  var _b = _a, { hasContent } = _b, other = __objRest(_b, ["hasContent"]);
-  return /* @__PURE__ */ React.createElement(SymbolBadge, __spreadValues({}, other));
-})`
-    line,
-    path {
-        stroke: ${(p) => {
-  var _a;
-  return p.hasContent ? (_a = p.theme.colors) == null ? void 0 : _a.primary : "#a6a6a6";
-}};
-        fill: ${(p) => {
-  var _a;
-  return p.hasContent ? (_a = p.theme.colors) == null ? void 0 : _a.primary : "#a6a6a6";
-}};
-    }
-`;
-const Avatar = styled.div`
-    width: ${(p) => p.avatarSize || "32px"};
-    height: ${(p) => p.avatarSize || "32px"};
-    border-radius: 50%;
-    background-color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.accent;
-}};
-    border: ${(p) => p.theme.border};
-    grid-area: avatar;
-    align-self: flex-end;
-    justify-self: center;
-    overflow: hidden;
-    margin-right: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-
-    > img {
-        height: 100%;
-        width: 100%;
-        object-fit: cover;
-    }
-
-    > svg {
-        width: 90%;
-        height: 90%;
-        padding: 10%;
-        color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-
-        line,
-        path,
-        circle,
-        fill {
-            stroke: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-        }
-    }
-`;
-const LoaderAnimation = keyframes`
-  0% {
-    opacity: 0;
-  }
-  75% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-`;
-const Loader = styled.div`
-    display: flex;
-    justify-content: center;
-    > div {
-        height: 10px;
-        width: 10px;
-        border-radius: 50%;
-        margin: 5px;
-        background-color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-        animation: ${LoaderAnimation} 1s infinite;
-    }
-    > div:nth-child(2) {
-        animation-delay: 100ms;
-    }
-    > div:nth-child(3) {
-        animation-delay: 200ms;
-    }
-`;
-const ContentBundle = styled.div`
-    grid-area: content;
-    max-width: 100%;
-`;
-const MessageTitle = styled(Typography)`
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
-}};
-    font-weight: normal;
-    margin: 0;
-`;
-const MessageContainer = styled.div`
-    display: flex;
-    justify-content: ${(p) => p.user ? "end" : "start"};
-`;
-const MessageContent = styled.div`
-    ${(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;
-}};
-    && > * {
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        word-break: break-all;
-        word-break: break-word;
-        hyphens: auto;
-    }
-    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}
-
-        border-top-right-radius: ${theme.borderRadius};
-        border-bottom-right-radius: ${theme.borderRadius};
-
-        ${stacked === "first" && `
-            border-top-left-radius: ${theme.borderRadius};
-        `}
-
-        ${stacked === "last" && `
-            border-bottom-left-radius: ${theme.borderRadius};
-        `}
-    `;
-};
-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}
-
-        border-top-left-radius: ${theme.borderRadius};
-        border-bottom-left-radius: ${theme.borderRadius};
-
-        ${stacked === "first" && `
-            border-top-right-radius: ${theme.borderRadius};
-        `}
-
-        ${stacked === "last" && `
-            border-bottom-right-radius: ${theme.borderRadius};
-        `}
-    `;
-};
-const MessageContentPart = styled.div`
-    margin-bottom: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    &: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;
-}};
-    & 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 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) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.small;
-}};
-        font-weight: 300;
-    }
-    padding-top: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}};
-    margin: 0;
-    line-height: 1.5em;
-    grid-area: info;
-    color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-`;
-const getTimestamp = (raw) => {
-  return new Date(raw).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-};
-const Timestamp = ({ className, name, timestamp }) => {
-  if (!name && !timestamp) {
-    return null;
-  }
-  let output = "";
-  if (name) {
-    if (timestamp) {
-      output = `${name}: ${getTimestamp(timestamp)}`;
-    } else {
-      output = name;
-    }
-  } else if (timestamp) {
-    output = getTimestamp(timestamp);
-  }
-  return /* @__PURE__ */ React.createElement(StyledTimestamp, null, output);
-};
-const AgentMessage = ({ className, children, sender, timestamp }) => {
-  const { avatar, name } = sender;
-  const { avatarSize } = useProperties();
-  return /* @__PURE__ */ React.createElement(StyledAgentMessage, {
-    hasAvatar: !!avatar,
-    className: appendClassNames(className, "humany-conversation-agent-message")
-  }, avatar && /* @__PURE__ */ React.createElement(Avatar, {
-    avatarSize
-  }, typeof avatar === "string" ? /* @__PURE__ */ React.createElement("img", {
-    src: avatar
-  }) : /* @__PURE__ */ React.createElement(SymbolBadge, {
-    symbol: avatar
-  })), children, /* @__PURE__ */ React.createElement(Timestamp, {
-    name,
-    timestamp
-  }));
-};
-const StyledAgentMessage = styled.div`
-    display: grid;
-    margin-right: 10%;
-    width: 90%;
-    ${(p) => p.hasAvatar ? css`
-                  grid-template-columns: auto 1fr;
-                  grid-template-rows: 1fr auto;
-                  grid-template-areas:
-                      'avatar content'
-                      '. info';
-              ` : css`
-                  grid-template-columns: 1fr;
-                  grid-template-rows: 1fr auto;
-                  grid-template-areas:
-                      'content'
-                      'info';
-              `};
-`;
-const SystemMessage = ({
-  className,
-  children,
-  timestamp,
-  discrete,
-  fullWidth
-}) => {
-  return /* @__PURE__ */ React.createElement(StyledSystemMessage, {
-    className: appendClassNames(className, "humany-conversation-system-message"),
-    fullWidth
-  }, discrete ? /* @__PURE__ */ React.createElement(Discrete, {
-    className: "humany-conversation-discrete-message"
-  }, children, /* @__PURE__ */ React.createElement(Timestamp, {
-    timestamp
-  })) : /* @__PURE__ */ React.createElement(React.Fragment, null, children, /* @__PURE__ */ React.createElement(Timestamp, {
-    timestamp
-  })));
-};
-const StyledSystemMessage = styled.div`
-    ${(p) => p.fullWidth && "width: 100%"};
-    padding: 0 ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.large;
-}};
-    overflow: auto;
-`;
-const Discrete = styled.div`
-    text-align: center;
-    word-wrap: break-word;
-    font-size: ${(p) => {
-  var _a;
-  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
-}};
-    color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.text;
-}};
-    > p {
-        margin: 0;
-    }
-`;
-const UserMessage = ({ className, children, timestamp }) => {
-  const { userLabel = "" } = useProperties();
-  return /* @__PURE__ */ React.createElement(StyledUserMessage, {
-    className: appendClassNames(className, "humany-conversation-user-message")
-  }, children, /* @__PURE__ */ React.createElement(Timestamp, {
-    name: userLabel,
-    timestamp
-  }));
-};
-const StyledUserMessage = styled.div`
-    margin-left: 10%;
-    width: 90%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-`;
-const mapActions = (actions) => Array.isArray(actions) ? actions : 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(StyledButtonListButton, {
-        onClick: () => {
-          dispatch("action", item);
-        },
-        "aria-label": item.label,
-        title: item.label
-      }, /* @__PURE__ */ React.createElement(SymbolBadge, {
-        symbol: item.symbol
-      }), item.label));
-    }
-  });
-};
-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 StyledButtonListButton = styled(Button)`
-    ${buttonCss};
-
-    display: block;
-    padding: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    background-color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
-}};
-    width: 100%;
-    color: #ffffff;
-    &:focus {
-        ${(p) => {
-  var _a;
-  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
-                ${borderTabStyle}
-                background-color: transparent;
-            `;
-}}
-    }
-
-    i,
-    svg {
-        margin-right: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.small;
-}};
-    }
-`;
-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;
-}};
-        > li {
-            margin: 0;
-        }
-    }
-`;
-const StyledLinkButton = styled(Button)`
-    display: block;
-    text-align: left;
-    font-weight: 300;
-    color: ${(p) => {
-  var _a;
-  return (_a = p.theme.colors) == null ? void 0 : _a.primary;
-}};
-
-    ${(p) => {
-  var _a, _b;
-  return p.help && css`
-            color: ${(_a = p.theme.colors) == null ? void 0 : _a.text};
-            text-decoration: underline;
-
-            i,
-            svg {
-                margin-left: ${(_b = p.theme.sizes) == null ? void 0 : _b.small};
-            }
-        `;
-}}
-
-    &:focus {
-        ${(p) => {
-  var _a, _b;
-  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
-                ${borderTabStyle}
-                span {
-                    color: ${(_b = p.theme.colors) == null ? void 0 : _b.primary};
-                    text-decoration: underline;
-                }
-            `;
-}};
-    }
-`;
-const Separator = () => {
-  return /* @__PURE__ */ React.createElement(StyledSeparator, null);
-};
-const StyledSeparator = styled.div`
-    ${(p) => p.theme.border && `border-bottom: ${p.theme.border};`}
-    width: 100%;
-`;
-const Text = ({ text }) => {
-  return /* @__PURE__ */ React.createElement(StyledTypography, {
-    variant: "span"
-  }, 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() };
-};
-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
-          }));
-        }
-        case ConversationMessageListItemType.VideoRequest: {
-          return /* @__PURE__ */ React.createElement(VideoRequest, __spreadProps(__spreadValues({}, item.content), {
-            dispatch
-          }));
-        }
-        default: {
-          return /* @__PURE__ */ React.createElement(Custom, {
-            type: item.type,
-            content: item.content
-          });
-        }
-      }
-    }
-  });
-};
-const StyledList = styled(List)`
-    ${list}
-
-    > li {
-        margin: 0;
-    }
-`;
-const ConversationMessage = ({
-  className,
-  timestamp,
-  sender,
-  type,
-  content
-}) => {
-  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;
-      const discrete = !!body && !title && !form && !actions;
-      return /* @__PURE__ */ React.createElement(SystemMessage, {
-        className,
-        key,
-        discrete,
-        timestamp,
-        fullWidth: !!form || !!actions
-      }, discrete && body ? /* @__PURE__ */ React.createElement(Html, {
-        body
-      }) : /* @__PURE__ */ React.createElement(Message, {
-        content: item,
-        isUser: false
-      }));
-    }));
-  };
-  const createAgentMessage = () => {
-    return /* @__PURE__ */ React.createElement(AgentMessage, {
-      sender,
-      timestamp,
-      className
-    }, /* @__PURE__ */ React.createElement(ContentBundle, null, content.map((item, index) => {
-      return /* @__PURE__ */ React.createElement(MessageContainer, {
-        key: item.key
-      }, /* @__PURE__ */ React.createElement(Message, {
-        content: item,
-        isUser: false,
-        stacked: getMessageStackPosition(index)
-      }));
-    })));
-  };
-  const createUserMessage = () => {
-    return /* @__PURE__ */ React.createElement(UserMessage, {
-      timestamp,
-      className
-    }, /* @__PURE__ */ React.createElement(ContentBundle, null, content.map((item, index) => {
-      return /* @__PURE__ */ React.createElement(MessageContainer, {
-        user: true,
-        key: item.key
-      }, /* @__PURE__ */ React.createElement(Message, {
-        content: item,
-        isUser: true,
-        stacked: getMessageStackPosition(index)
-      }));
-    })));
-  };
-  switch (type) {
-    case ConversationMessageType.System:
-      return createSystemMessage();
-    case ConversationMessageType.Agent:
-      return createAgentMessage();
-    case ConversationMessageType.User:
-      return createUserMessage();
-    default:
-      return null;
-  }
-};
-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
-      });
-    }
-  }))), 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));
-    }
-  })), 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) {
-        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);
-    }
-  }, [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);
-      }
-    }
-  }, [messages, typingActors]);
-  useTransitionEnd(() => {
-    setCanSmooth(true);
-    scrollView(lastEntry, false);
-  });
-  const renderTypingActors = () => {
-    if (typingActors && typingActors.length) {
-      return typingActors.map((actor, index) => {
-        return /* @__PURE__ */ React.createElement(MessageEntry, {
-          id: `typing_${actor.name}`,
-          ref: typingActors.length ? lastEntry : null,
-          key: `typing_${actor.name}`
-        }, /* @__PURE__ */ React.createElement(AgentMessage, {
-          timestamp: Date.now(),
-          sender: actor
-        }, /* @__PURE__ */ React.createElement(ConversationLoader, null)));
-      });
-    }
-    return null;
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Scrollable, {
-    tabIndex: 0,
-    scrollableCss,
-    ref: viewElem
-  }, messages && messages.length ? messages.map((message, index) => {
-    const { type, timestamp, sender, content } = message;
-    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
-    }, /* @__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 Scrollable = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    flex: 0 1 100%;
-    padding: 0 ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
-}};
-    ${(p) => !!p.scrollableCss && p.scrollableCss};
-    &:focus {
-        ${(p) => {
-  var _a;
-  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && borderTabStyle;
-}};
-    }
-`;
-const MessageEntry = styled.div`
-    margin: 0;
-    margin-bottom: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
-}};
-
-    &:first-of-type {
-        margin-top: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
-}};
-    }
-
-    &:last-of-type {
-        padding-bottom: ${(p) => {
-  var _a;
-  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
-}};
-    }
-
-    & span,
-    p,
-    a,
-    div {
-        font-weight: 300;
-    }
-
-    & b,
-    h1 {
-        font-weight: normal;
-    }
-
-    ${headingElement("h1", css`
-            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