@telia-ace/widget-conversation 1.0.27 → 1.0.28

package/dist/conversation.70c6987f.js

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