@telia-ace/widget-conversation 1.0.10 → 1.0.13

package/dist/conversation.js

@@ -0,0 +1,1357 @@
+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, useComponent, invertedHoverButton, Html, List, buttonCss, Icon, Lightbox, useTransitionEnd, headingElement } from "@telia-ace/widget-ui";
+import { appendClassNames, uuid } from "@telia-ace/widget-utilities";
+import React, { useState, useEffect, Suspense, Fragment, useRef, useCallback } 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", secondaryAction.action);
+  };
+  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(StyledButton, {
+    disabled: inputDisabled,
+    onClick: onSecondaryActionButtonClick,
+    title: secondaryAction.label,
+    "aria-label": secondaryAction.label
+  }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+    size: 22,
+    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, {
+    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: ${(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;
+}};
+    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 = 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 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%;
+    overflow: hidden;
+`;
+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;
+`;
+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;
+}});
+    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;
+        word-break: break-all;
+        word-break: break-word;
+        hyphens: auto;
+    }
+    max-width: 100%;
+    ${(p) => p.fullWidth && "width: 100%;"}
+
+    ${(p) => !p.user && css`
+            border: ${p.theme.border};
+        `}
+  ${(p) => p.user && "margin-left: auto"};
+
+    ${(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;
+        `}
+  ${(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;
+        `}
+  ${(p) => p.stacked === "last" && !p.user && css`
+            border-top-left-radius: 1px;
+        `};
+
+    ${(p) => !p.stacked && css`
+            ${p.user ? "border-bottom-right-radius: 1px;" : "border-bottom-left-radius: 1px;"}
+        `};
+
+    transition: border-radius 500ms linear;
+`;
+const MessageContentPart = styled.div`
+    padding: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}} ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.medium;
+}};
+
+    ${(p) => p.noPadding && css`
+            padding: 0;
+        `}
+
+    margin-bottom: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+    &:last-child {
+        margin-bottom: 0;
+    }
+`;
+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 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 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,
+  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 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 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 };
+    }),
+    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(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: {
+          return /* @__PURE__ */ React.createElement(ConversationListItem, {
+            key: itemKey
+          }, /* @__PURE__ */ React.createElement(StyledLinkList, {
+            items: Object.keys(item.content.actions).map((i) => {
+              return {
+                label: item.content.actions[i],
+                actionKey: i
+              };
+            }),
+            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: {
+          return /* @__PURE__ */ React.createElement(ConversationListItem, {
+            key: itemKey
+          }, /* @__PURE__ */ React.createElement(StyledButtonList, {
+            items: Object.keys(item.content.actions).map((i) => {
+              return {
+                label: item.content.actions[i],
+                actionKey: i
+              };
+            }),
+            renderItem: (item2) => {
+              return /* @__PURE__ */ React.createElement("li", {
+                key: item2.actionKey
+              }, /* @__PURE__ */ React.createElement(StyledButtonListButton, {
+                onClick: () => {
+                  dispatch("action", item2.actionKey);
+                }
+              }, item2.label));
+            }
+          }));
+        }
+        case ConversationMessageListItemType.NoGoodAlternative: {
+          return /* @__PURE__ */ React.createElement(ConversationListItem, {
+            key: itemKey
+          }, /* @__PURE__ */ React.createElement(NoGoodAlternativeWrapper, {
+            onClick: () => {
+              dispatch("action", "help");
+            }
+          }, /* @__PURE__ */ React.createElement(SymbolBadge, {
+            size: 14,
+            symbol: {
+              type: "FontAwesome",
+              content: "meh-o"
+            }
+          }), /* @__PURE__ */ React.createElement("span", null, item.content.body)));
+        }
+        case ConversationMessageListItemType.FeedbackList: {
+          return /* @__PURE__ */ React.createElement(ConversationListItem, {
+            key: itemKey
+          }, /* @__PURE__ */ React.createElement(StyledButtonList, {
+            items: Object.keys(item.content.actions).map((i) => {
+              return {
+                label: item.content.actions[i],
+                actionKey: i
+              };
+            }),
+            renderItem: (item2) => {
+              return /* @__PURE__ */ React.createElement(FeedbackItem, {
+                key: item2.actionKey
+              }, /* @__PURE__ */ React.createElement(FeedbackButton, {
+                className: "humany-feedback-button",
+                disabled: false,
+                "aria-pressed": true,
+                "data-selected": true,
+                "data-direction": "vertical",
+                onClick: () => {
+                  dispatch("action", item2.actionKey);
+                }
+              }, /* @__PURE__ */ React.createElement(Icon, {
+                faIcon: item2.actionKey == "yes" ? "smile-o" : "frown-o"
+              }), /* @__PURE__ */ React.createElement("span", null, item2.label)));
+            }
+          }));
+        }
+        default: {
+          return /* @__PURE__ */ React.createElement(ConversationListItem, {
+            key: itemKey,
+            noPadding: true
+          }, /* @__PURE__ */ React.createElement(CustomMessageListItem, {
+            type: item.type,
+            content: item.content
+          }));
+        }
+      }
+    }
+  }))));
+};
+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) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+        }
+    }
+`;
+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) => {
+  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;
+    &:focus {
+        ${(p) => {
+  var _a;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
+                ${borderTabStyle}
+                background-color: transparent;
+            `;
+}}
+    }
+`;
+const StyledLinkList = styled(List)`
+    padding: 0;
+    list-style: none;
+    > li {
+        margin-bottom: ${(p) => {
+  var _a;
+  return (_a = p.theme.sizes) == null ? void 0 : _a.normal;
+}};
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+`;
+const HeaderText = styled.strong`
+    font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.huge;
+}};
+`;
+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;
+}};
+
+    ${(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};
+            }
+        `;
+}}
+`;
+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;
+  return ((_a = p.theme.accessibility) == null ? void 0 : _a.isTabbing) && css`
+                ${borderTabStyle}
+                background-color: transparent;
+            `;
+}}
+    }
+`;
+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%;
+`;
+const NoGoodAlternativeWrapper = 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 FeedbackItem = 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 FeedbackButton = 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;
+}};
+    }
+    ${(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 imageLightboxRenderer = (attrs) => /* @__PURE__ */ React.createElement(Lightbox, {
+  attrs
+});
+const htmlParseInstructions = {
+  transform: {
+    img: imageLightboxRenderer
+  }
+};
+const ConversationMessageComponent = ({
+  className,
+  timestamp,
+  sender,
+  type,
+  content
+}) => {
+  useDispatch();
+  const getMessageStackPosition = (index) => {
+    let messageOrder = void 0;
+    if (content.length > 1) {
+      messageOrder = index === 0 ? "first" : index + 1 === content.length ? "last" : "middle";
+    }
+    return messageOrder;
+  };
+  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, {
+        html: body,
+        htmlParseInstruction: htmlParseInstructions
+      }) : /* @__PURE__ */ React.createElement(ConversationContent, {
+        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(ConversationContent, {
+        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, {
+        key: item.key
+      }, /* @__PURE__ */ React.createElement(ConversationContent, {
+        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;
+  }
+};
+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;
+}};
+        }
+    }
+`;
+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;
+}};
+        }
+    }
+`;
+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 }) => {
+  const lastEntry = useRef(document.createElement("div"));
+  const [scrollableCss, viewElem] = useScroll(true);
+  const { messages, loading, typingActors } = useProperties();
+  const [canSmooth, setCanSmooth] = useState(false);
+  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"
+          });
+        }
+      }, 0);
+    }
+  }, [lastEntry]);
+  useEffect(() => {
+    if (canSmooth) {
+      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(Wrapper, {
+    className: appendClassNames(className, "humany-conversation-component")
+  }, /* @__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(ConversationMessageComponent, __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;
+    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;
+}};
+    }
+
+    * {
+        font-size: ${(p) => {
+  var _a;
+  return (_a = p.theme.fonts) == null ? void 0 : _a.normal;
+}};
+    }
+
+    & span,
+    p,
+    a,
+    div {
+        font-weight: 300;
+    }
+
+    & b,
+    h1 {
+        font-weight: normal;
+    }
+
+    ${headingElement("h1", css`
+            font-weight: normal;
+        `)}
+`;
+export { Conversation as default };
+//# sourceMappingURL=conversation.js.map