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

package/dist/conversation-5f8374bf.js

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