@telia-ace/widget-conversation 0.0.1

package/conversation-3787f6ba.mjs

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