@telia-ace/widget-conversation 1.0.29-next.0 → 1.0.29-next.10

package/dist/conversation.fe5da693.js

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