@telia-ace/widget-conversation 1.0.24 → 1.0.25

package/dist/conversation.3981560b.js

@@ -0,0 +1,1100 @@
+var pe = Object.defineProperty, ye = Object.defineProperties;
+var be = Object.getOwnPropertyDescriptors;
+var I = Object.getOwnPropertySymbols;
+var Y = Object.prototype.hasOwnProperty, q = Object.prototype.propertyIsEnumerable;
+var V = (e, t, r) => t in e ? pe(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, z = (e, t) => {
+  for (var r in t || (t = {}))
+    Y.call(t, r) && V(e, r, t[r]);
+  if (I)
+    for (var r of I(t))
+      q.call(t, r) && V(e, r, t[r]);
+  return e;
+}, J = (e, t) => ye(e, be(t));
+var Q = (e, t) => {
+  var r = {};
+  for (var o in e)
+    Y.call(e, o) && t.indexOf(o) < 0 && (r[o] = e[o]);
+  if (e != null && I)
+    for (var o of I(e))
+      t.indexOf(o) < 0 && q.call(e, o) && (r[o] = e[o]);
+  return r;
+};
+import { Input as le, Button as $e, borderTabStyle as x, SymbolBadge as M, useDispatch as U, useProperties as K, useScroll as se, Typography as Ee, useComponent as ke, invertedHoverButton as W, Html as _, List as P, buttonCss as R, Icon as xe, Lightbox as ie, useTransitionEnd as ve, headingElement as we } from "@telia-ace/widget-ui";
+import { appendClassNames as T, uuid as X } from "@telia-ace/widget-utilities";
+import n, { useState as S, useEffect as ce, Suspense as Ce, Fragment as Z, useRef as ze, useCallback as Se } from "react";
+import l, { css as m, keyframes as Te } from "styled-components";
+import { FormComponent as me } from "@telia-ace/widget-forms";
+import { ConversationMessageListItemType as E, ConversationMessageType as B } from "./index.js";
+import "@telia-ace/widget-core";
+import "@telia-ace/widget-services";
+import "@telia-ace/widget-plugins";
+const Le = ({ className: e }) => {
+  const [t, r] = S(""), [o, c] = S(!1), [g, u] = S(0), [p, b] = S(0), d = U(), {
+    inputPlaceholder: a = "Type your message",
+    inputHidden: i = !1,
+    inputDisabled: s = !1,
+    sendButtonLabel: v = "Send message",
+    inputMultiline: y = !0
+  } = K(), [$, f] = se(!0);
+  ce(() => {
+    if (f.current) {
+      const { lineHeight: h, maxHeight: L } = getComputedStyle(f.current);
+      if (h && h.indexOf("px") > -1) {
+        const C = h.split("px"), ge = parseInt(C[0], 10);
+        u(ge);
+        const fe = L.split("px");
+        b(parseInt(fe[0], 10));
+      }
+    }
+  }, [f.current]);
+  const F = (h) => {
+    !h.shiftKey || !y ? (h.preventDefault(), t && t.length > 0 && (d("user-submit", { text: t }), r(""), A(""))) : t.length < 1 && h.preventDefault();
+  }, he = (h) => {
+    if (y && f.current) {
+      const L = f.current.scrollHeight;
+      if (L > g) {
+        f.current.style.height = "auto";
+        let C = L;
+        h.length < 1 && (C = g), f.current.style.height = `${C}px`, C >= p ? f.current.style.overflowY = "scroll" : f.current.style.overflowY = "hidden";
+      }
+    }
+  }, A = (h) => {
+    he(h), r(h), h && h.length > 0 && d("user-typing", { textLength: h.length });
+  };
+  return i ? null : /* @__PURE__ */ n.createElement(He, {
+    grow: y,
+    className: T("humany-conversation-input", e),
+    "data-has-focus": o,
+    scrollableCss: $
+  }, y ? /* @__PURE__ */ n.createElement(de, {
+    value: t,
+    onChange: A,
+    onEnter: F,
+    disabled: s,
+    "aria-label": a,
+    placeholder: a,
+    onFocusChange: c,
+    type: "textarea",
+    rows: 1,
+    ref: f
+  }) : /* @__PURE__ */ n.createElement(Ie, {
+    value: t,
+    onChange: A,
+    onEnter: F,
+    disabled: s,
+    "aria-label": a,
+    placeholder: a,
+    onFocusChange: c
+  }), /* @__PURE__ */ n.createElement(Me, {
+    disabled: s,
+    onClick: F,
+    title: v,
+    "aria-label": v
+  }, /* @__PURE__ */ n.createElement(Ke, {
+    size: 22,
+    symbol: { type: "Svg", content: "send" },
+    hasContent: t && t.length
+  })));
+}, de = l(le)`
+    resize: none;
+    flex: 1;
+    flex-shrink: 1;
+    min-height: 1.2em;
+    max-height: 148px;
+    line-height: 1.2em;
+    height: 1.2em;
+    padding: 0;
+    margin: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}} ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
+}};
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+    border: none;
+    transition: height 200ms linear;
+    outline: none;
+`, Ie = l(le)`
+    flex: 1;
+    border: none;
+    background-color: transparent;
+    font-weight: 300;
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+    line-height: 1.2em;
+    outline: none;
+    padding-left: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.large;
+}};
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+    &::placeholder {
+        color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.textLight;
+}};
+        font-style: italic;
+    }
+`, Me = l($e)`
+    flex: 0 0 50px;
+    align-self: stretch;
+    background-color: transparent;
+    border: none;
+    &:focus {
+        ${(e) => {
+  var t;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && x;
+}};
+    }
+`, He = l.div`
+    ${(e) => e.grow ? m`
+                  min-height: 50px;
+                  max-height: 150px;
+              ` : m`
+                  height: 50px;
+              `}
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.accent;
+}};
+    border-top: ${(e) => e.theme.inputBorder};
+    ${(e) => e["data-has-focus"] && m`
+            ${(t) => {
+  var r;
+  return ((r = t.theme.accessibility) == null ? void 0 : r.isTabbing) && x;
+}};
+        `}
+    ${de} {
+        ${(e) => !!e.scrollableCss && e.scrollableCss}
+    }
+`, Ke = l((r) => {
+  var o = r, { hasContent: e } = o, t = Q(o, ["hasContent"]);
+  return /* @__PURE__ */ n.createElement(M, z({}, t));
+})`
+    line,
+    path {
+        stroke: ${(e) => {
+  var t;
+  return e.hasContent ? (t = e.theme.colors) == null ? void 0 : t.primary : "#a6a6a6";
+}};
+        fill: ${(e) => {
+  var t;
+  return e.hasContent ? (t = e.theme.colors) == null ? void 0 : t.primary : "#a6a6a6";
+}};
+    }
+`, Pe = l.div`
+    width: ${(e) => e.avatarSize || "32px"};
+    height: ${(e) => e.avatarSize || "32px"};
+    border-radius: 50%;
+    background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.accent;
+}};
+    border: ${(e) => e.theme.border};
+    grid-area: avatar;
+    align-self: flex-end;
+    justify-self: center;
+    overflow: hidden;
+    margin-right: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+
+    > img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+    }
+
+    > svg {
+        width: 90%;
+        height: 90%;
+        padding: 10%;
+        color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+
+        line,
+        path,
+        circle,
+        fill {
+            stroke: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+        }
+    }
+`, Fe = Te`
+  0% {
+    opacity: 0;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+`, Ae = l.div`
+    display: flex;
+    justify-content: center;
+    > div {
+        height: 10px;
+        width: 10px;
+        border-radius: 50%;
+        margin: 5px;
+        background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+        animation: ${Fe} 1s infinite;
+    }
+    > div:nth-child(2) {
+        animation-delay: 100ms;
+    }
+    > div:nth-child(3) {
+        animation-delay: 200ms;
+    }
+`, D = l.div`
+    grid-area: content;
+    max-width: 100%;
+    overflow: hidden;
+`, Be = l(Ee)`
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+    font-weight: normal;
+    margin: 0;
+`, j = l.div`
+    display: flex;
+`, G = l.div`
+    background-color: ${(e) => {
+  var t, r;
+  return e.user ? (t = e.theme.colors) == null ? void 0 : t.primary : (r = e.theme.colors) == null ? void 0 : r.accent;
+}};
+    color: ${(e) => {
+  var t, r;
+  return e.user ? (t = e.theme.colors) == null ? void 0 : t.accent : (r = e.theme.colors) == null ? void 0 : r.text;
+}};
+    border-radius: 5px; // TODO: prop?
+    margin-top: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.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%;
+    ${(e) => e.fullWidth && "width: 100%;"}
+
+    ${(e) => !e.user && m`
+            border: ${e.theme.border};
+        `}
+  ${(e) => e.user && "margin-left: auto"};
+
+    ${(e) => e.stacked === "first" && e.user && m`
+            border-bottom-right-radius: 1px; // TODO: Prop?
+        `}
+    ${(e) => e.stacked === "middle" && e.user && m`
+            border-bottom-right-radius: 1px;
+            border-top-right-radius: 1px;
+        `}
+  ${(e) => e.stacked === "last" && e.user && m`
+            border-top-right-radius: 1px;
+        `}
+  ${(e) => e.stacked === "first" && !e.user && m`
+            border-bottom-left-radius: 1px;
+        `}
+  ${(e) => e.stacked === "middle" && !e.user && m`
+            border-bottom-left-radius: 1px;
+            border-top-left-radius: 1px;
+        `}
+  ${(e) => e.stacked === "last" && !e.user && m`
+            border-top-left-radius: 1px;
+        `};
+
+    ${(e) => !e.stacked && m`
+            ${e.user ? "border-bottom-right-radius: 1px;" : "border-bottom-left-radius: 1px;"}
+        `};
+
+    transition: border-radius 500ms linear;
+`, w = l.div`
+    padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
+}};
+
+    ${(e) => e.noPadding && m`
+            padding: 0;
+        `}
+
+    margin-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    &:last-child {
+        margin-bottom: 0;
+    }
+`, ee = ({ className: e, agentData: t }) => /* @__PURE__ */ n.createElement(D, null, /* @__PURE__ */ n.createElement(j, null, /* @__PURE__ */ n.createElement(G, null, /* @__PURE__ */ n.createElement(Ae, null, /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null))))), Ne = l.p`
+    && {
+        font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.small;
+}};
+        font-weight: 300;
+    }
+    margin: 0;
+    line-height: 1.5em;
+    grid-area: info;
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+`, te = (e) => new Date(e).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), H = ({ className: e, name: t, timestamp: r }) => {
+  if (!t && !r)
+    return null;
+  let o = "";
+  return t ? r ? o = `${t}: ${te(r)}` : o = t : r && (o = te(r)), /* @__PURE__ */ n.createElement(Ne, null, o);
+}, ue = ({ className: e, children: t, sender: r, timestamp: o }) => {
+  const { avatar: c, name: g } = r, { avatarSize: u } = K();
+  return /* @__PURE__ */ n.createElement(Oe, {
+    hasAvatar: !!c,
+    className: T(e, "humany-conversation-agent-message")
+  }, c && /* @__PURE__ */ n.createElement(Pe, {
+    avatarSize: u
+  }, typeof c == "string" ? /* @__PURE__ */ n.createElement("img", {
+    src: c
+  }) : /* @__PURE__ */ n.createElement(M, {
+    symbol: c
+  })), t, /* @__PURE__ */ n.createElement(H, {
+    name: g,
+    timestamp: o
+  }));
+}, Oe = l.div`
+    display: grid;
+    margin-right: 0;
+    width: 100%;
+    ${(e) => e.hasAvatar ? m`
+                  grid-template-columns: auto 1fr;
+                  grid-template-rows: 1fr auto;
+                  grid-template-areas:
+                      'avatar content'
+                      '. info';
+              ` : m`
+                  grid-template-columns: 1fr;
+                  grid-template-rows: 1fr auto;
+                  grid-template-areas:
+                      'content'
+                      'info';
+              `};
+`, De = (e) => {
+  const t = ke(e.type);
+  return t ? /* @__PURE__ */ n.createElement(Ce, {
+    fallback: null
+  }, /* @__PURE__ */ n.createElement(G, {
+    user: e.isUser,
+    stacked: !!e.stacked && e.stacked,
+    fullWidth: !!e.content.form || !!e.content.actions
+  }, /* @__PURE__ */ n.createElement(w, {
+    noPadding: !!e.content.noPadding && e.content.noPadding
+  }, /* @__PURE__ */ n.createElement(t, z({}, e.content))))) : null;
+}, je = ({
+  className: e,
+  children: t,
+  timestamp: r,
+  discrete: o,
+  fullWidth: c
+}) => /* @__PURE__ */ n.createElement(Ue, {
+  className: T(e, "humany-conversation-system-message"),
+  fullWidth: c
+}, o ? /* @__PURE__ */ n.createElement(We, {
+  className: "humany-conversation-discrete-message"
+}, t, /* @__PURE__ */ n.createElement(H, {
+  timestamp: r
+})) : /* @__PURE__ */ n.createElement(n.Fragment, null, t, /* @__PURE__ */ n.createElement(H, {
+  timestamp: r
+}))), Ue = l.div`
+    ${(e) => e.fullWidth && "width: 100%"};
+    padding: 0 ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.large;
+}};
+    overflow: auto;
+`, We = l.div`
+    text-align: center;
+    word-wrap: break-word;
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+    > p {
+        margin: 0;
+    }
+`, _e = ({ className: e, children: t, timestamp: r }) => {
+  const { userLabel: o = "" } = K();
+  return /* @__PURE__ */ n.createElement(Re, {
+    className: T(e, "humany-conversation-user-message")
+  }, t, /* @__PURE__ */ n.createElement(H, {
+    name: o,
+    timestamp: r
+  }));
+}, Re = l.div`
+    margin-left: 15%;
+    width: 85%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+`, Ge = (e) => /* @__PURE__ */ n.createElement(ie, {
+  attrs: e
+}), ne = {
+  transform: {
+    img: Ge
+  }
+}, N = ({ content: e, isUser: t, stacked: r }) => {
+  const o = U(), { title: c, body: g, actions: u, form: p, type: b, items: d } = e;
+  return b ? /* @__PURE__ */ n.createElement(De, {
+    type: b,
+    content: e,
+    isUser: t,
+    stacked: r
+  }) : /* @__PURE__ */ n.createElement(G, {
+    noPadding: !0,
+    user: t,
+    stacked: !!r && r,
+    fullWidth: !!p || !!u
+  }, c && /* @__PURE__ */ n.createElement(w, null, /* @__PURE__ */ n.createElement(Be, {
+    variant: "h2"
+  }, c)), g && /* @__PURE__ */ n.createElement(w, null, /* @__PURE__ */ n.createElement(re, {
+    html: g,
+    htmlParseInstruction: ne
+  })), p && /* @__PURE__ */ n.createElement(w, null, /* @__PURE__ */ n.createElement(Ve, J(z({}, p), {
+    onChange: (a, i) => {
+      o("form", {
+        data: i,
+        formKey: p.schema.id,
+        actionKey: a
+      });
+    }
+  }))), u && /* @__PURE__ */ n.createElement(w, null, /* @__PURE__ */ n.createElement(oe, {
+    items: Object.keys(u).map((a) => ({ label: u[a], actionKey: a })),
+    renderItem: (a) => /* @__PURE__ */ n.createElement("li", {
+      key: a.actionKey
+    }, /* @__PURE__ */ n.createElement(Qe, {
+      onClick: () => {
+        o("action", a.actionKey);
+      }
+    }, a.label))
+  })), d && /* @__PURE__ */ n.createElement(Z, null, /* @__PURE__ */ n.createElement(w, {
+    key: X(),
+    noPadding: !0
+  }, /* @__PURE__ */ n.createElement(oe, {
+    items: d.map(([a, i]) => ({ type: a, content: i })),
+    renderItem: (a) => {
+      const i = X();
+      switch (a.type) {
+        case E.Header:
+          return /* @__PURE__ */ n.createElement(k, {
+            key: i
+          }, /* @__PURE__ */ n.createElement("strong", null, a.content));
+        case E.Text:
+          return /* @__PURE__ */ n.createElement(k, {
+            key: i
+          }, /* @__PURE__ */ n.createElement("span", null, a.content));
+        case E.HTML:
+          return /* @__PURE__ */ n.createElement(k, {
+            key: i
+          }, /* @__PURE__ */ n.createElement(re, {
+            html: a.content.body,
+            htmlParseInstruction: ne
+          }));
+        case E.Separator:
+          return /* @__PURE__ */ n.createElement(k, {
+            key: i,
+            noPadding: !0
+          }, /* @__PURE__ */ n.createElement(Xe, null));
+        case E.LinkList:
+          return /* @__PURE__ */ n.createElement(k, {
+            key: i
+          }, /* @__PURE__ */ n.createElement(qe, {
+            items: Object.keys(a.content.actions).map((s) => ({
+              label: a.content.actions[s],
+              actionKey: s
+            })),
+            renderItem: (s) => /* @__PURE__ */ n.createElement("li", {
+              key: s.actionKey
+            }, /* @__PURE__ */ n.createElement(Je, {
+              help: s.actionKey === "help",
+              onClick: () => {
+                o("action", s.actionKey);
+              }
+            }, s.label, s.actionKey === "help" && /* @__PURE__ */ n.createElement(M, {
+              size: 14,
+              symbol: {
+                type: "Svg",
+                content: "caret-down"
+              }
+            })))
+          }));
+        case E.ButtonList:
+          return /* @__PURE__ */ n.createElement(k, {
+            key: i
+          }, /* @__PURE__ */ n.createElement(ae, {
+            items: Object.keys(a.content.actions).map((s) => ({
+              label: a.content.actions[s],
+              actionKey: s
+            })),
+            renderItem: (s) => /* @__PURE__ */ n.createElement("li", {
+              key: s.actionKey
+            }, /* @__PURE__ */ n.createElement(Ye, {
+              onClick: () => {
+                o("action", s.actionKey);
+              }
+            }, s.label))
+          }));
+        case E.NoGoodAlternative:
+          return /* @__PURE__ */ n.createElement(k, {
+            key: i
+          }, /* @__PURE__ */ n.createElement(Ze, {
+            onClick: () => {
+              o("action", "help");
+            }
+          }, /* @__PURE__ */ n.createElement(M, {
+            size: 14,
+            symbol: {
+              type: "FontAwesome",
+              content: "meh-o"
+            }
+          }), /* @__PURE__ */ n.createElement("span", null, a.content.body)));
+        case E.FeedbackList:
+          return /* @__PURE__ */ n.createElement(k, {
+            key: i
+          }, /* @__PURE__ */ n.createElement(ae, {
+            items: Object.keys(a.content.actions).map((s) => ({
+              label: a.content.actions[s],
+              actionKey: s
+            })),
+            renderItem: (s) => /* @__PURE__ */ n.createElement("li", {
+              key: s.actionKey
+            }, /* @__PURE__ */ n.createElement(et, {
+              className: "humany-feedback-button",
+              disabled: !1,
+              "aria-pressed": !0,
+              "data-selected": !0,
+              "data-direction": "vertical",
+              onClick: () => {
+                o("action", s.actionKey);
+              }
+            }, /* @__PURE__ */ n.createElement(xe, {
+              faIcon: s.actionKey == "yes" ? "smile-o" : "frown-o"
+            }), /* @__PURE__ */ n.createElement("span", null, s.label)))
+          }));
+        default:
+          return /* @__PURE__ */ n.createElement(Z, null, /* @__PURE__ */ n.createElement("p", null, "Unknown message type"));
+      }
+    }
+  }))));
+}, Ve = l(me)`
+    & button.humany-form-component-button {
+        ${(e) => {
+  var t, r;
+  return W({
+    active: !1,
+    primaryColor: (t = e.theme.colors) == null ? void 0 : t.primary,
+    secondaryColor: (r = e.theme.colors) == null ? void 0 : r.accent
+  });
+}};
+        display: block;
+        width: 100%;
+        margin-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    }
+    & button.humany-form-component-submit {
+        width: 100%;
+        margin: 0;
+        :not(:last-child) {
+            margin-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+        }
+    }
+`, re = l(_)`
+    white-space: pre-wrap;
+    a {
+        color: ${(e) => e.theme.colors.link};
+        &:focus {
+            ${(e) => {
+  var t;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && x;
+}};
+        }
+    }
+`, oe = l(P)`
+    padding: 0;
+    list-style: none;
+    margin: 0 -${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    > li {
+        margin: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    }
+`, ae = l(P)`
+    padding: 0;
+    list-style: none;
+    > li {
+        margin: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}} ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+        margin-left: 0;
+        display: inline-block;
+    }
+`, Ye = l.button`
+    ${R};
+    display: block;
+    background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+    width: 100%;
+    color: #fff;
+    &:focus {
+        ${(e) => {
+  var t;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && m`
+                ${x}
+                background-color: transparent;
+            `;
+}}
+    }
+`, qe = l(P)`
+    padding: 0;
+    list-style: none;
+    > li {
+        margin-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+`, Je = l.button`
+    display: block;
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    font-weight: 300;
+    font-family: inherit;
+    cursor: pointer;
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+
+    ${(e) => {
+  var t, r;
+  return e.help && m`
+            color: ${(t = e.theme.colors) == null ? void 0 : t.text};
+            text-decoration: underline;
+
+            i,
+            svg {
+                margin-left: ${(r = e.theme.sizes) == null ? void 0 : r.small};
+            }
+        `;
+}}
+`, Qe = l.button`
+    ${R};
+    display: block;
+    background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+    width: 100%;
+    color: #fff;
+    font-family: Lato;
+    font-size: 1rem;
+    font-weight: 300;
+    &:focus {
+        ${(e) => {
+  var t;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && m`
+                ${x}
+                background-color: transparent;
+            `;
+}}
+    }
+`, Xe = l.div`
+    background-color: #efefef;
+    height: 1px;
+    width: 100%;
+`, Ze = l.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    > i,
+    svg {
+        margin-right: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}};
+    }
+`, k = l.li`
+    padding-left: ${(e) => {
+  var t;
+  return e.noPadding ? 0 : (t = e.theme.sizes) == null ? void 0 : t.medium;
+}};
+    padding-right: ${(e) => {
+  var t;
+  return e.noPadding ? 0 : (t = e.theme.sizes) == null ? void 0 : t.medium;
+}};
+`, et = l.button`
+    display: inline-block;
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+    background-color: #ffffff !important;
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}} !important;
+    border-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}} !important;
+    font-weight: 300;
+    && {
+        margin-right: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}};
+    }
+    ${(e) => {
+  var t, r;
+  return e["data-direction"] === "horizontal" && m`
+            width: 225px;
+            max-width: calc(50% - ${(t = e.theme.sizes) == null ? void 0 : t.large} - ${(r = e.theme.sizes) == null ? void 0 : r.small});
+        `;
+}}
+    ${(e) => e["data-direction"] === "vertical" && m`
+            min-width: 150px;
+        `}
+  ${(e) => {
+  var t;
+  return W({
+    active: e["data-selected"],
+    primaryColor: (t = e.theme.colors) == null ? void 0 : t.primary,
+    secondaryColor: "#FFFFFF"
+  });
+}}
+    i {
+        margin: 0 ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}} 0 0;
+        color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}} !important;
+    }
+    span {
+        color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}} !important;
+    }
+`, tt = (e) => /* @__PURE__ */ n.createElement(ie, {
+  attrs: e
+}), nt = {
+  transform: {
+    img: tt
+  }
+}, rt = ({
+  className: e,
+  timestamp: t,
+  sender: r,
+  type: o,
+  content: c
+}) => {
+  U();
+  const g = (d) => {
+    let a;
+    return c.length > 1 && (a = d === 0 ? "first" : d + 1 === c.length ? "last" : "middle"), a;
+  }, u = () => /* @__PURE__ */ n.createElement(n.Fragment, null, c.map((d) => {
+    const { key: a, body: i, title: s, form: v, actions: y } = d, $ = !!i && !s && !v && !y;
+    return /* @__PURE__ */ n.createElement(je, {
+      className: e,
+      key: a,
+      discrete: $,
+      timestamp: t,
+      fullWidth: !!v || !!y
+    }, $ && i ? /* @__PURE__ */ n.createElement(_, {
+      html: i,
+      htmlParseInstruction: nt
+    }) : /* @__PURE__ */ n.createElement(N, {
+      content: d,
+      isUser: !1
+    }));
+  })), p = () => /* @__PURE__ */ n.createElement(ue, {
+    sender: r,
+    timestamp: t,
+    className: e
+  }, /* @__PURE__ */ n.createElement(D, null, c.map((d, a) => /* @__PURE__ */ n.createElement(j, {
+    key: d.key
+  }, /* @__PURE__ */ n.createElement(N, {
+    content: d,
+    isUser: !1,
+    stacked: g(a)
+  }))))), b = () => /* @__PURE__ */ n.createElement(_e, {
+    timestamp: t,
+    className: e
+  }, /* @__PURE__ */ n.createElement(D, null, c.map((d, a) => /* @__PURE__ */ n.createElement(j, {
+    key: d.key
+  }, /* @__PURE__ */ n.createElement(N, {
+    content: d,
+    isUser: !0,
+    stacked: g(a)
+  })))));
+  switch (o) {
+    case B.System:
+      return u();
+    case B.Agent:
+      return p();
+    case B.User:
+      return b();
+    default:
+      return null;
+  }
+};
+l(me)`
+    & button.humany-form-component-button {
+        ${(e) => {
+  var t, r;
+  return W({
+    active: !1,
+    primaryColor: (t = e.theme.colors) == null ? void 0 : t.primary,
+    secondaryColor: (r = e.theme.colors) == null ? void 0 : r.accent
+  });
+}};
+        display: block;
+        width: 100%;
+        margin-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    }
+
+    & button.humany-form-component-submit {
+        width: 100%;
+        margin: 0;
+        :not(:last-child) {
+            margin-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+        }
+    }
+`;
+l(_)`
+    white-space: pre-wrap;
+
+    a {
+        color: ${(e) => e.theme.colors.link};
+        &:focus {
+            ${(e) => {
+  var t;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && x;
+}};
+        }
+    }
+`;
+l(P)`
+    padding: 0;
+    list-style: none;
+    margin: 0 -${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    > li {
+        margin: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    }
+`;
+l.button`
+    ${R};
+    display: block;
+    background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+    width: 100%;
+    color: #fff;
+    &:focus {
+        ${(e) => {
+  var t;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && m`
+                ${x}
+                background-color: transparent;
+            `;
+}}
+    }
+`;
+const pt = ({ className: e }) => {
+  const t = ze(document.createElement("div")), [r, o] = se(!0), { messages: c, loading: g, typingActors: u } = K(), [p, b] = S(!1), d = Se((i, s = !0) => {
+    if (i !== null && i.current !== null) {
+      if (c && c.length === 1 && i.current.focus(), i.current.id.indexOf("typing_") !== -1 && o.current.scrollTopMax - o.current.scrollTop > i.current.clientHeight + 100)
+        return;
+      setTimeout(() => {
+        i.current && i.current.scrollIntoView({
+          block: "end",
+          behavior: s ? "smooth" : "auto"
+        });
+      }, 0);
+    }
+  }, [t]);
+  ce(() => {
+    p && d(t);
+  }, [c, u]), ve(() => {
+    b(!0), d(t, !1);
+  });
+  const a = () => u && u.length ? u.map((i, s) => /* @__PURE__ */ n.createElement(O, {
+    id: `typing_${i.name}`,
+    ref: u.length ? t : null,
+    key: `typing_${i.name}`
+  }, /* @__PURE__ */ n.createElement(ue, {
+    timestamp: Date.now(),
+    sender: i
+  }, /* @__PURE__ */ n.createElement(ee, null)))) : null;
+  return /* @__PURE__ */ n.createElement(ot, {
+    className: T(e, "humany-conversation-component")
+  }, /* @__PURE__ */ n.createElement(at, {
+    tabIndex: 0,
+    scrollableCss: r,
+    ref: o
+  }, c && c.length ? c.map((i, s) => {
+    const { type: v, timestamp: y, sender: $, content: f } = i;
+    return /* @__PURE__ */ n.createElement(O, {
+      className: "humany-conversation-entry",
+      tabIndex: -1,
+      key: `${v}_${$ == null ? void 0 : $.name}_${y}_${f[0].key}`,
+      ref: s + 1 < c.length || u.length ? null : t
+    }, /* @__PURE__ */ n.createElement(rt, z({}, i)));
+  }) : null, a(), g && /* @__PURE__ */ n.createElement(O, null, /* @__PURE__ */ n.createElement(ee, null))), /* @__PURE__ */ n.createElement(Le, null));
+}, ot = l.div`
+    position: absolute;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+`, at = l.div`
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    flex: 0 1 100%;
+    padding: 0 ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
+}};
+    ${(e) => !!e.scrollableCss && e.scrollableCss};
+    &:focus {
+        ${(e) => {
+  var t;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && x;
+}};
+    }
+`, O = l.div`
+    margin: 0;
+    margin-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
+}};
+
+    &:first-of-type {
+        margin-top: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
+}};
+    }
+
+    &:last-of-type {
+        padding-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
+}};
+    }
+
+    * {
+        font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+    }
+
+    & span,
+    p,
+    a,
+    div {
+        font-weight: 300;
+    }
+
+    & b,
+    h1 {
+        font-weight: normal;
+    }
+
+    ${we("h1", m`
+            font-weight: normal;
+        `)}
+`;
+export {
+  pt as default
+};
+//# sourceMappingURL=conversation.3981560b.js.map