@telia-ace/widget-conversation 1.0.24 → 1.0.25

package/dist/conversation.edf14596.js

@@ -1,1191 +0,0 @@
-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