@telia-ace/widget-conversation 1.0.21 → 1.0.24

package/dist/conversation.edf14596.js

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