@telia-ace/widget-conversation 1.0.26 → 1.0.28

package/dist/conversation.3981560b.js

@@ -1,1100 +0,0 @@
-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