@telia-ace/widget-conversation 1.1.2-rc.2 → 1.1.2-rc.3

package/conversation-2acab7f7.mjs

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