@telia-ace/widget-conversation 1.0.41 → 1.1.1-rc.0

package/conversation-78019545.mjs

@@ -0,0 +1,1388 @@
+import { jsx as n, jsxs as h, Fragment as B } from "react/jsx-runtime";
+import { u as ye, a as fe, n as a, I as ne, B as L, b as p, c as y, S as x, d as N, e as oe, f as T, k as pe, T as V, F as be, i as $e, H as Y, L as re, g as G, h as K, j, l as ve, m as J, o as xe, C as k, p as W, W as se, q as we } from "./index-bfc77c45.mjs";
+import { useState as z, useEffect as O, forwardRef as Q, Suspense as ke, useMemo as Ce, useCallback as ae, useRef as Se } from "react";
+import "react-dom";
+import { u as ze, a as X } from "./use-dispatch-86019505.mjs";
+const Le = (e, t) => {
+  const o = ze(), r = ye(), [s, i] = z(void 0), m = fe(), c = e || o.type || "";
+  return O(() => {
+    if (c) {
+      let g;
+      return (t || r).getAsync("componentResolver").then((f) => {
+        if (m.current) {
+          const d = f.getComponent(c);
+          i(d);
+        }
+        g = f.registerResolver(c, (d) => {
+          m.current && i(d);
+        });
+      }), () => {
+        g && g();
+      };
+    }
+  }, [m, c, t, r]), s;
+}, Ie = () => {
+  const [e, t] = z(!1);
+  return O(() => {
+    const o = () => {
+      t(!1);
+    }, r = (s) => {
+      s.keyCode === 9 && t(!0);
+    };
+    return window.addEventListener("keydown", r), window.addEventListener("click", o), () => {
+      window.removeEventListener("keydown", r), window.removeEventListener("click", o);
+    };
+  }, []), e;
+}, Me = ({ className: e }) => {
+  const [t, o] = z(""), [r, s] = z(!1), [i, m] = z(0), [c, g] = z(0), f = Ie(), d = X(), {
+    inputPlaceholder: l = "Type your message",
+    inputHidden: v = !1,
+    inputDisabled: S = !1,
+    sendButtonLabel: I = "Send message",
+    inputMultiline: w = !0,
+    secondaryAction: b
+  } = N(), [de, $] = oe(!0);
+  O(() => {
+    if ($.current) {
+      const { lineHeight: u, maxHeight: H } = getComputedStyle($.current);
+      if (u && u.indexOf("px") > -1) {
+        const M = u.split("px"), he = parseInt(M[0], 10);
+        m(he);
+        const ge = H.split("px");
+        g(parseInt(ge[0], 10));
+      }
+    }
+  }, [$.current]);
+  const E = (u) => {
+    !u.shiftKey || !w ? (u.preventDefault(), t && t.length > 0 && (d("user-submit", { text: t }), o(""), D(""))) : t.length < 1 && u.preventDefault();
+  }, me = (u) => {
+    b && (u.preventDefault(), d("action", {
+      actionKey: b.action,
+      ...b
+    }));
+  }, ue = (u) => {
+    if (w && $.current) {
+      const H = $.current.scrollHeight;
+      if (H > i) {
+        $.current.style.height = "auto";
+        let M = H;
+        u.length < 1 && (M = i), $.current.style.height = `${M}px`, M >= c ? $.current.style.overflowY = "scroll" : $.current.style.overflowY = "hidden";
+      }
+    }
+  }, D = (u) => {
+    ue(u), o(u), u && u.length > 0 && d("user-typing", { textLength: u.length });
+  };
+  return v ? null : /* @__PURE__ */ h(
+    Ae,
+    {
+      grow: w,
+      className: T("humany-conversation-input", e),
+      "data-has-focus": r,
+      scrollableCss: de,
+      isTabbing: f,
+      children: [
+        b && /* @__PURE__ */ n(
+          He,
+          {
+            disabled: S,
+            onClick: me,
+            title: b.label,
+            "aria-label": b.label,
+            children: /* @__PURE__ */ n(
+              x,
+              {
+                size: 24,
+                symbol: { type: "Svg", content: b.icon || "browse" }
+              }
+            )
+          }
+        ),
+        w ? /* @__PURE__ */ n(
+          Ne,
+          {
+            value: t,
+            onChange: D,
+            onEnter: E,
+            disabled: S,
+            "aria-label": l,
+            placeholder: l,
+            onFocusChange: s,
+            type: "textarea",
+            rows: 1,
+            ref: $
+          }
+        ) : /* @__PURE__ */ n(
+          Te,
+          {
+            value: t,
+            onChange: D,
+            onEnter: E,
+            disabled: S,
+            "aria-label": l,
+            placeholder: l,
+            onFocusChange: s
+          }
+        ),
+        /* @__PURE__ */ n(
+          ie,
+          {
+            disabled: S,
+            onClick: E,
+            title: I,
+            "aria-label": I,
+            children: /* @__PURE__ */ n(
+              Re,
+              {
+                size: 22,
+                symbol: { type: "Svg", content: "send" },
+                hasContent: !!t && !!t.length
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, Ne = a(ne)`
+  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.medium;
+}};
+  font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+  border: none;
+  transition: height 200ms linear;
+  outline: none;
+`, Te = a(ne)`
+  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: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
+}};
+  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;
+  }
+`, ie = a(L)`
+  flex: 0 0 50px;
+  align-self: stretch;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  color: #a6a6a6;
+  &:focus-visible {
+    ${p};
+  }
+`, He = a(ie)`
+  border-right: ${(e) => e.theme.border};
+  margin: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}} 0;
+`, Ae = a.div`
+  ${(e) => e.grow ? y`
+          min-height: 50px;
+          max-height: 150px;
+        ` : y`
+          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"] && e.isTabbing && p}
+  textarea {
+    ${(e) => !!e.scrollableCss && e.scrollableCss}
+  }
+`, Re = a(
+  ({
+    hasContent: e,
+    ...t
+  }) => /* @__PURE__ */ n(x, { ...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";
+}};
+  }
+`, Be = a.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: 10px;
+    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;
+}};
+        }
+    }
+`, Ke = pe`
+  0% {
+    opacity: 0;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+`, je = a.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: ${Ke} 1s infinite;
+    }
+    > div:nth-of-type(2) {
+        animation-delay: 100ms;
+    }
+    > div:nth-of-type(3) {
+        animation-delay: 200ms;
+    }
+`, U = a.div`
+    grid-area: content;
+    max-width: 100%;
+    overflow: hidden;
+`, Oe = a(V)`
+    font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+    font-weight: normal;
+    margin: 0;
+`, _ = a.div`
+    display: flex;
+    ${(e) => e.left && "justify-content: start;"};
+    ${(e) => e.center && "justify-content: center;"};
+    ${(e) => e.right && "justify-content: end;"};
+`, q = a.div`
+    ${(e) => {
+  var t;
+  return e.padded && `padding: ${(t = e.theme.sizes) == null ? void 0 : t.medium};`;
+}}
+    ${(e) => !e.user && e.stacked && Ee(e.stacked, e.theme)}
+    ${(e) => e.user && e.stacked && De(e.stacked, e.theme)}
+
+    display: inline-block;
+    margin-top: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    && > * {
+        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%;"}
+`, Ee = (e, t) => {
+  var r, s;
+  const o = y`
+        background-color: ${(r = t.colors) == null ? void 0 : r.accent};
+        color: ${(s = t.colors) == null ? void 0 : s.text};
+        ${t.border && `border: ${t.border};`};
+    `;
+  return t.borderRadius ? y`
+        ${o}
+
+        border-top-right-radius: ${t.borderRadius};
+        border-bottom-right-radius: ${t.borderRadius};
+
+        ${e === "first" && `
+            border-top-left-radius: ${t.borderRadius};
+        `}
+
+        ${e === "last" && `
+            border-bottom-left-radius: ${t.borderRadius};
+        `}
+    ` : o;
+}, De = (e, t) => {
+  var r, s;
+  const o = y`
+        background-color: ${(r = t.colors) == null ? void 0 : r.primary};
+        color: ${(s = t.colors) == null ? void 0 : s.accent};
+    `;
+  return t.borderRadius ? y`
+        ${o}
+
+        border-top-left-radius: ${t.borderRadius};
+        border-bottom-left-radius: ${t.borderRadius};
+
+        ${e === "first" && `
+            border-top-right-radius: ${t.borderRadius};
+        `}
+
+        ${e === "last" && `
+            border-bottom-right-radius: ${t.borderRadius};
+        `}
+    ` : o;
+}, A = a.div`
+    margin-bottom: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    &:last-child {
+        margin-bottom: 0;
+    }
+`, C = (e) => {
+  var t, o;
+  return y`
+    margin: ${(t = e.theme.sizes) == null ? void 0 : t.medium} 0;
+    padding: 0 ${(o = e.theme.sizes) == null ? void 0 : o.medium};
+`;
+}, We = a(be)`
+    & button.humany-form-component-button {
+        ${(e) => {
+  var t, o, r, s;
+  return ((t = e.theme.colors) == null ? void 0 : t.primary) && ((o = e.theme.colors) == null ? void 0 : o.accent) && $e({
+    active: !1,
+    primaryColor: (r = e.theme.colors) == null ? void 0 : r.primary,
+    secondaryColor: (s = e.theme.colors) == null ? void 0 : s.accent,
+    theme: e.theme
+  });
+}};
+        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;
+}};
+        }
+    }
+`, Fe = a(Y)`
+    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) && p;
+}};
+        }
+    }
+`, Pe = a(re)`
+    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;
+}};
+    }
+`, Ue = a.button`
+    ${(e) => G(e)};
+    display: block;
+    background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+    width: 100%;
+    color: #fff;
+    &:focus-visible {
+        ${p}
+        background-color: transparent;
+    }
+`, ee = Q(
+  ({ boxed: e, className: t, agentData: o }, r) => /* @__PURE__ */ n(U, { ref: r, children: /* @__PURE__ */ n(_, { left: e, center: !e, children: /* @__PURE__ */ n(q, { padded: !!e, stacked: e ? "first" : void 0, children: /* @__PURE__ */ h(je, { children: [
+    /* @__PURE__ */ n("div", {}),
+    /* @__PURE__ */ n("div", {}),
+    /* @__PURE__ */ n("div", {})
+  ] }) }) }) })
+), _e = a.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" }), R = ({ className: e, name: t, timestamp: o }) => {
+  if (!t && !o)
+    return null;
+  let r = "";
+  return t ? o ? r = `${t}: ${te(o)}` : r = t : o && (r = te(o)), /* @__PURE__ */ n(_e, { children: r });
+}, le = ({
+  className: e,
+  children: t,
+  sender: o,
+  timestamp: r
+}) => {
+  const { avatar: s, name: i } = o, { avatarSize: m } = N();
+  return /* @__PURE__ */ h(
+    qe,
+    {
+      hasAvatar: !!s,
+      className: T(
+        e,
+        "humany-conversation-agent-message"
+      ),
+      children: [
+        s && /* @__PURE__ */ n(Be, { avatarSize: m, children: typeof s == "string" ? (
+          // eslint-disable-next-line jsx-a11y/alt-text
+          /* @__PURE__ */ n("img", { src: s })
+        ) : /* @__PURE__ */ n(x, { symbol: s }) }),
+        t,
+        /* @__PURE__ */ n(R, { name: i, timestamp: r })
+      ]
+    }
+  );
+}, qe = a.div`
+  display: grid;
+  margin-right: 10%;
+  width: 90%;
+  ${(e) => e.hasAvatar ? y`
+          grid-template-columns: auto 1fr;
+          grid-template-rows: 1fr auto;
+          grid-template-areas:
+            'avatar content'
+            '. info';
+        ` : y`
+          grid-template-columns: 1fr;
+          grid-template-rows: 1fr auto;
+          grid-template-areas:
+            'content'
+            'info';
+        `};
+`, Ve = Q(
+  ({ className: e, children: t, timestamp: o, discrete: r, fullWidth: s }, i) => /* @__PURE__ */ n(
+    Ye,
+    {
+      ref: i,
+      className: T(e, "humany-conversation-system-message"),
+      fullWidth: s,
+      children: r ? /* @__PURE__ */ h(Ge, { className: "humany-conversation-discrete-message", children: [
+        t,
+        /* @__PURE__ */ n(R, { timestamp: o })
+      ] }) : /* @__PURE__ */ h(B, { children: [
+        t,
+        /* @__PURE__ */ n(R, { timestamp: o })
+      ] })
+    }
+  )
+), Ye = a.div`
+    ${(e) => e.fullWidth && "width: 100%"};
+    padding: 0 ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.large;
+}};
+    overflow: auto;
+`, Ge = a.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;
+    }
+`, Je = ({ className: e, children: t, timestamp: o }) => {
+  const { userLabel: r = "" } = N();
+  return /* @__PURE__ */ h(
+    Qe,
+    {
+      className: T(e, "humany-conversation-user-message"),
+      children: [
+        t,
+        /* @__PURE__ */ n(R, { name: r, timestamp: o })
+      ]
+    }
+  );
+}, Qe = a.div`
+    margin-left: 10%;
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+`, Z = (e) => Array.isArray(e) ? e : Object.keys(e).map((t) => ({
+  label: e[t],
+  actionKey: t
+})), Xe = ({ header: e, actions: t, dispatch: o }) => /* @__PURE__ */ n(
+  Ze,
+  {
+    className: "humany-conversation-button-list",
+    header: e,
+    items: Z(t),
+    renderItem: (r) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ h(
+      et,
+      {
+        onClick: () => {
+          o("action", r);
+        },
+        "aria-label": r.label,
+        title: r.label,
+        children: [
+          /* @__PURE__ */ n(x, { symbol: r.symbol }),
+          r.label
+        ]
+      }
+    ) }, r.actionKey)
+  }
+), Ze = a(K)`
+    ${j}
+    > ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+        > li {
+            margin: 0;
+        }
+    }
+    ${C}
+`, et = a(L)`
+    ${G};
+
+    display: block;
+    padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+    background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+    width: 100%;
+    color: #ffffff;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    &:focus-visible {
+        ${p}
+        background-color: transparent;
+    }
+
+    i,
+    svg {
+        margin-right: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}};
+    }
+`, tt = ({ type: e, content: t = {} }) => {
+  const o = Le(e);
+  return !o || !e ? null : /* @__PURE__ */ n(ke, { fallback: null, children: /* @__PURE__ */ n(o, { ...t }) });
+}, nt = ({ body: e }) => /* @__PURE__ */ n(ot, { html: e }), ot = a(Y)`
+    ${ve}
+    color: inherit;
+    white-space: pre-wrap;
+    ${C}
+    a {
+        color: ${(e) => e.theme.colors.link};
+        &:focus-visible {
+            ${p};
+        }
+    }
+`, rt = ({ header: e, actions: t, dispatch: o }) => /* @__PURE__ */ n(
+  st,
+  {
+    className: "humany-conversation-item-list",
+    header: e,
+    items: Z(t),
+    renderItem: (r) => {
+      var s;
+      return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ h(at, { children: [
+        ((s = r.symbol) == null ? void 0 : s.content) && /* @__PURE__ */ n("div", { className: "item-icon", children: /* @__PURE__ */ n(
+          x,
+          {
+            size: 22,
+            symbol: {
+              type: r.symbol.type,
+              content: r.symbol.content
+            }
+          }
+        ) }),
+        /* @__PURE__ */ h("div", { className: "item-body", children: [
+          /* @__PURE__ */ n(
+            L,
+            {
+              onClick: () => {
+                o("action", r);
+              },
+              "aria-label": r.label,
+              title: r.label,
+              children: r.label
+            }
+          ),
+          r.description && /* @__PURE__ */ n("p", { children: r.description })
+        ] })
+      ] }) }, r.actionKey);
+    }
+  }
+), st = a(K)`
+    ${j}
+
+    > .humany-paragraph {
+        ${C}
+        margin-bottom: 0;
+
+        h1 {
+            margin: 0;
+        }
+    }
+
+    ${(e) => J(e)(
+  "h1",
+  y`
+                white-space: normal;
+            `
+)}
+
+    > ul {
+        display: flex;
+        flex-direction: column;
+        gap: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+        > li {
+            margin: 0;
+        }
+    }
+
+    li {
+        border-bottom: ${(e) => e.theme.border};
+
+        &:last-of-type {
+            border-bottom: none;
+        }
+    }
+`, at = a.div`
+    display: flex;
+    gap: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
+}};
+    ${C}
+
+    .item-icon {
+    }
+
+    .item-body {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+
+        p {
+            margin: 0;
+            white-space: normal;
+        }
+    }
+
+    button {
+        background: transparent;
+        border: none;
+        font-family: inherit;
+        font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+        cursor: pointer;
+        padding: 0;
+        margin: 0;
+
+        &:focus-visible {
+            ${p}
+            span {
+                color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+                text-decoration: underline;
+            }
+        }
+    }
+`, it = ({ header: e, actions: t, dispatch: o }) => /* @__PURE__ */ n(
+  lt,
+  {
+    className: "humany-conversation-link-list",
+    header: e,
+    items: Z(t),
+    renderItem: (r) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ h(
+      ct,
+      {
+        help: r.actionKey === "help",
+        onClick: () => {
+          o("action", r);
+        },
+        "aria-label": r.label,
+        title: r.label,
+        children: [
+          r.label,
+          r.actionKey === "help" && /* @__PURE__ */ n(
+            x,
+            {
+              size: 14,
+              symbol: {
+                type: "Svg",
+                content: "caret-down"
+              }
+            }
+          )
+        ]
+      }
+    ) }, r.actionKey)
+  }
+), lt = a(K)`
+    ${j}
+    ${C}
+
+    ${(e) => J(e)(
+  "h1",
+  y`
+                white-space: normal;
+            `
+)}
+
+    > ul {
+        display: flex;
+        flex-direction: column;
+        gap: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+        > li {
+            margin: 0;
+        }
+    }
+`, ct = a(L)`
+    display: block;
+    text-align: left;
+    font-weight: 300;
+    color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+    max-width: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+
+    ${(e) => {
+  var t, o;
+  return e.help && y`
+            color: ${(t = e.theme.colors) == null ? void 0 : t.text};
+            text-decoration: underline;
+
+            i,
+            svg {
+                margin-left: ${(o = e.theme.sizes) == null ? void 0 : o.small};
+            }
+        `;
+}}
+
+    &:focus-visible {
+        ${p}
+        span {
+            color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+            text-decoration: underline;
+        }
+    }
+`, dt = () => /* @__PURE__ */ n(mt, { className: "humany-conversation-separator" }), mt = a.div`
+    ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
+    width: 100%;
+`, ut = ({ text: e }) => /* @__PURE__ */ n(ht, { className: "humany-conversation-text", variant: "span", children: e }), ht = a(V)`
+    ${C}
+`, gt = ({
+  header: e = "Video call",
+  acceptLabel: t = "Accept",
+  declineLabel: o = "Decline",
+  dispatch: r
+}) => {
+  const s = Ce(() => [
+    {
+      label: t,
+      actionKey: "accept-video-call",
+      symbol: {
+        type: "Svg",
+        content: "video"
+      }
+    },
+    {
+      label: o,
+      actionKey: "decline-video-call",
+      symbol: {
+        type: "Svg",
+        content: "close"
+      }
+    }
+  ], [t, o]);
+  return /* @__PURE__ */ n(
+    yt,
+    {
+      className: "humany-conversation-video-request",
+      header: e,
+      items: s,
+      renderItem: (i) => {
+        const m = i.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
+        return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+          ft,
+          {
+            onClick: () => {
+              r("action", i);
+            },
+            "aria-label": i.label,
+            title: i.label,
+            bgColor: m,
+            children: /* @__PURE__ */ n(x, { symbol: i.symbol, size: 25 })
+          }
+        ) }, i.actionKey);
+      }
+    }
+  );
+}, yt = a(K)`
+    ${(e) => j(e)}
+    > ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+        > li {
+            margin: 0;
+        }
+    }
+    ${(e) => C(e)}
+`, ft = a(L)`
+    ${G};
+
+    background-color: ${(e) => e.bgColor};
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #ffffff;
+    width: 46px;
+    height: 46px;
+    border-radius: 100%;
+
+    &:focus-visible {
+        ${p}
+        background-color: transparent;
+
+        i,
+        svg {
+            color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+
+            path {
+                stroke: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+            }
+        }
+    }
+
+    i,
+    svg {
+        color: #fff;
+
+        path {
+            stroke: #fff;
+        }
+    }
+`, pt = ([e, t]) => ({ type: e, content: t }), bt = ({ items: e, dispatch: t }) => /* @__PURE__ */ n(
+  $t,
+  {
+    className: "humany-message-list",
+    items: e.map(pt),
+    renderLi: !0,
+    renderItem: (o) => {
+      switch (o.type) {
+        case k.Text:
+          return /* @__PURE__ */ n(ut, { text: o.content });
+        case k.HTML:
+          return /* @__PURE__ */ n(nt, { ...o.content });
+        case k.Separator:
+          return /* @__PURE__ */ n(dt, { ...o.content });
+        case k.ItemList:
+          return /* @__PURE__ */ n(rt, { ...o.content, dispatch: t });
+        case k.LinkList:
+          return /* @__PURE__ */ n(it, { ...o.content, dispatch: t });
+        case k.ButtonList:
+          return /* @__PURE__ */ n(Xe, { ...o.content, dispatch: t });
+        case k.VideoRequest:
+          return /* @__PURE__ */ n(gt, { ...o.content, dispatch: t });
+        default:
+          return /* @__PURE__ */ n(tt, { type: o.type, content: o.content });
+      }
+    }
+  }
+), $t = a(re)`
+    ${xe}
+
+    > li {
+        margin: 0;
+    }
+`, vt = Q(
+  ({ className: e, timestamp: t, sender: o, type: r, content: s }, i) => {
+    const m = ae(
+      (d) => {
+        let l = "first";
+        return s.length > 1 && (l = d === 0 ? "first" : d + 1 === s.length ? "last" : "middle"), l;
+      },
+      [s]
+    ), c = () => /* @__PURE__ */ n(B, { children: s.map((d) => {
+      const { key: l, body: v, title: S, form: I, actions: w } = d, b = !!v && !S && !I && !w;
+      return /* @__PURE__ */ n(
+        Ve,
+        {
+          className: e,
+          discrete: b,
+          ref: i,
+          timestamp: t,
+          fullWidth: !!I || !!w,
+          children: b && v ? /* @__PURE__ */ n(Y, { html: v }) : /* @__PURE__ */ n(F, { isSystem: !0, content: d })
+        },
+        l
+      );
+    }) }), g = () => /* @__PURE__ */ n(le, { sender: o, timestamp: t, className: e, children: /* @__PURE__ */ n(U, { className: "humany-message-content-bundle", children: s.map((d, l) => /* @__PURE__ */ n(
+      _,
+      {
+        className: "humany-message-container",
+        left: !0,
+        ref: i,
+        children: /* @__PURE__ */ n(
+          F,
+          {
+            content: d,
+            stacked: m(l)
+          }
+        )
+      },
+      d.key
+    )) }) }), f = () => /* @__PURE__ */ n(Je, { timestamp: t, className: e, children: /* @__PURE__ */ n(U, { className: "humany-message-content-bundle", children: s.map((d, l) => /* @__PURE__ */ n(
+      _,
+      {
+        className: "humany-message-container",
+        right: !0,
+        ref: i,
+        children: /* @__PURE__ */ n(
+          F,
+          {
+            isUser: !0,
+            content: d,
+            stacked: m(l)
+          }
+        )
+      },
+      d.key
+    )) }) });
+    switch (r) {
+      case W.System:
+        return c();
+      case W.Agent:
+        return g();
+      case W.User:
+        return f();
+      default:
+        return null;
+    }
+  }
+), F = ({ content: e, isUser: t, isSystem: o, stacked: r }) => {
+  const s = X(), { title: i, body: m, actions: c, form: g, items: f } = e;
+  return f ? /* @__PURE__ */ n(q, { className: "humany-message-content", user: !!t, stacked: r, children: /* @__PURE__ */ n(bt, { items: f, dispatch: s }) }) : /* @__PURE__ */ h(
+    q,
+    {
+      className: "humany-message-content",
+      padded: !o,
+      user: !!t,
+      stacked: r,
+      fullWidth: !!g || !!c,
+      children: [
+        i && /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(Oe, { variant: "h2", children: i }) }),
+        m && /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(Fe, { html: m }) }),
+        g && /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(
+          We,
+          {
+            ...g,
+            onChange: (l, v) => {
+              s("form", {
+                data: v,
+                formKey: g.schema.id,
+                actionKey: l
+              });
+            }
+          }
+        ) }),
+        c && /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(
+          Pe,
+          {
+            items: Object.keys(c).map((l) => ({ label: c[l], actionKey: l })),
+            renderItem: (l) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+              Ue,
+              {
+                onClick: () => {
+                  s("action", l.actionKey);
+                },
+                children: l.label
+              }
+            ) }, l.actionKey)
+          }
+        ) })
+      ]
+    }
+  );
+}, ce = () => {
+  const e = ae((c) => {
+    c && setTimeout(() => {
+      c.scrollIntoView({
+        block: "start",
+        behavior: "smooth"
+      });
+    }, 250);
+  }, []), [t, o] = oe(!0), {
+    messages: r,
+    loading: s,
+    typingActors: i = []
+  } = N(), m = () => i && i.length ? i.map((c, g) => /* @__PURE__ */ n(P, { id: `typing_${c.name}`, children: /* @__PURE__ */ n(le, { timestamp: Date.now(), sender: c, children: /* @__PURE__ */ n(ee, { boxed: !0, ref: e }) }) }, `typing_${c.name}`)) : null;
+  return /* @__PURE__ */ h(B, { children: [
+    /* @__PURE__ */ h(xt, { tabIndex: 0, scrollableCss: t, ref: o, children: [
+      r && r.length ? r.map((c, g) => {
+        const { type: f, timestamp: d, sender: l, content: v } = c;
+        return /* @__PURE__ */ n(
+          P,
+          {
+            className: "humany-conversation-entry",
+            tabIndex: -1,
+            children: /* @__PURE__ */ n(vt, { ...c, ref: e })
+          },
+          `${f}_${l == null ? void 0 : l.name}_${d}_${v[0].key}`
+        );
+      }) : null,
+      m(),
+      s && /* @__PURE__ */ n(P, { children: /* @__PURE__ */ n(ee, { ref: e }) })
+    ] }),
+    /* @__PURE__ */ n(Me, {})
+  ] });
+}, xt = a.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-visible {
+        ${(e) => p(e)};
+    }
+`, P = a.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;
+}};
+    }
+
+    & span,
+    p,
+    a,
+    div {
+        font-weight: 300;
+    }
+
+    & b,
+    h1 {
+        font-weight: normal;
+    }
+    ${(e) => J(e)(
+  "h1",
+  y`
+                font-weight: normal;
+            `
+)}
+`, wt = ({ dispatch: e }) => {
+  const t = Se(null);
+  return O(() => {
+    t.current && t.current.parentNode && e("overlay-mounted", t.current);
+  }, [t]), /* @__PURE__ */ n(
+    se,
+    {
+      portalId: "humany-conversation-overlay-portal",
+      className: "humany-conversation-overlay-outlet",
+      ref: t
+    }
+  );
+}, kt = ({
+  dispatch: e,
+  header: t,
+  buttonLabel: o
+}) => /* @__PURE__ */ h(
+  Ct,
+  {
+    portalId: "humany-conversation-portal",
+    className: "humany-conversation-outlet",
+    children: [
+      /* @__PURE__ */ h(St, { className: "humany-conversation-outlet-head", children: [
+        /* @__PURE__ */ n(
+          Lt,
+          {
+            className: "humany-conversation-outlet-head-button",
+            "aria-label": o,
+            title: o,
+            onClick: () => e("hide-overlay-conversation"),
+            children: /* @__PURE__ */ n(
+              x,
+              {
+                symbol: {
+                  type: "Svg",
+                  content: "caret-down"
+                },
+                size: 20
+              }
+            )
+          }
+        ),
+        t && /* @__PURE__ */ n(
+          zt,
+          {
+            className: "humany-conversation-outlet-header",
+            variant: "h1",
+            children: t
+          }
+        )
+      ] }),
+      /* @__PURE__ */ n(ce, {})
+    ]
+  }
+), Ct = a(se)`
+  z-index: 11;
+  top: auto;
+  height: 65%;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  border-top-right-radius: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.large;
+}};
+  border-top-left-radius: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.large;
+}};
+`, St = a.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+  padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+  ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
+`, zt = a(V)`
+  font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.medium;
+}};
+  color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+  margin: 0;
+`, Lt = a(L)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${(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;
+}};
+  ${(e) => e.theme.borderRadius && `border-radius: ${e.theme.borderRadius};`}
+
+  &:focus-visible {
+    ${p};
+  }
+
+  svg line {
+    stroke: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.text;
+}};
+  }
+`, Rt = ({ className: e, ...t }) => {
+  const {
+    overlay: o,
+    overlayConversationHeader: r,
+    overlayConversationCloseLabel: s,
+    conversationControllerId: i
+  } = N(), m = X();
+  return /* @__PURE__ */ h(
+    we.Provider,
+    {
+      value: i ? { id: i } : null,
+      children: [
+        /* @__PURE__ */ n(
+          It,
+          {
+            ...t,
+            className: T(e, "humany-conversation-component"),
+            children: /* @__PURE__ */ n(ce, {})
+          }
+        ),
+        o && /* @__PURE__ */ h(B, { children: [
+          /* @__PURE__ */ n(wt, { dispatch: m }),
+          o.conversation && /* @__PURE__ */ n(
+            kt,
+            {
+              dispatch: m,
+              header: r,
+              buttonLabel: s
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, It = a.div`
+    position: absolute;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+`;
+export {
+  Rt as default
+};