@telia-ace/widget-conversation 1.1.1-rc.1 → 1.1.1-rc.3

package/{conversation-78019545.mjs → conversation-24961686.mjs}

@@ -1,137 +1,113 @@
-import { jsx as n, jsxs as h, Fragment as B } from "react/jsx-runtime";
-import { u as ye, a as fe, n as a, I as ne, B as L, b as p, c as y, S as x, d as N, e as oe, f as T, k as pe, T as V, F as be, i as $e, H as Y, L as re, g as G, h as K, j, l as ve, m as J, o as xe, C as k, p as W, W as se, q as we } from "./index-bfc77c45.mjs";
-import { useState as z, useEffect as O, forwardRef as Q, Suspense as ke, useMemo as Ce, useCallback as ae, useRef as Se } from "react";
-import "react-dom";
-import { u as ze, a as X } from "./use-dispatch-86019505.mjs";
-const Le = (e, t) => {
-  const o = ze(), r = ye(), [s, i] = z(void 0), m = fe(), c = e || o.type || "";
-  return O(() => {
-    if (c) {
-      let g;
-      return (t || r).getAsync("componentResolver").then((f) => {
-        if (m.current) {
-          const d = f.getComponent(c);
-          i(d);
-        }
-        g = f.registerResolver(c, (d) => {
-          m.current && i(d);
-        });
-      }), () => {
-        g && g();
-      };
-    }
-  }, [m, c, t, r]), s;
-}, Ie = () => {
-  const [e, t] = z(!1);
-  return O(() => {
-    const o = () => {
-      t(!1);
-    }, r = (s) => {
-      s.keyCode === 9 && t(!0);
-    };
-    return window.addEventListener("keydown", r), window.addEventListener("click", o), () => {
-      window.removeEventListener("keydown", r), window.removeEventListener("click", o);
-    };
-  }, []), e;
-}, Me = ({ className: e }) => {
-  const [t, o] = z(""), [r, s] = z(!1), [i, m] = z(0), [c, g] = z(0), f = Ie(), d = X(), {
+import { jsx as n, jsxs as u, Fragment as B } from "react/jsx-runtime";
+import s from "@emotion/styled";
+import { Input as te, Button as z, borderTabStyle as f, SymbolBadge as x, useIsTabbing as fe, useDispatch as V, useProperties as I, useScroll as ne, Typography as q, invertedHoverButton as pe, Html as Y, List as re, buttonCss as G, ItemList as K, itemList as j, useComponent as ye, genericHtml as be, headingElement as J, list as $e, WidgetOverlayOutlet as oe, ConversationContext as ve } from "@telia-ace/widget-ui";
+import { appendClassNames as M } from "@telia-ace/widget-utilities";
+import { css as g, keyframes as xe } from "@emotion/react";
+import { useState as T, useEffect as se, forwardRef as Q, Suspense as we, useMemo as ke, useCallback as ae, useRef as Ce } from "react";
+import { FormComponent as Se } from "@telia-ace/widget-forms";
+import { ConversationMessageListItemType as k, ConversationMessageType as W } from "./index.mjs";
+import "@telia-ace/widget-core";
+import "@telia-ace/widget-services";
+import "@telia-ace/widget-plugins";
+const ze = ({ className: e }) => {
+  const [t, r] = T(""), [o, a] = T(!1), [i, h] = T(0), [c, p] = T(0), v = fe(), d = V(), {
     inputPlaceholder: l = "Type your message",
-    inputHidden: v = !1,
+    inputHidden: $ = !1,
     inputDisabled: S = !1,
-    sendButtonLabel: I = "Send message",
+    sendButtonLabel: L = "Send message",
     inputMultiline: w = !0,
-    secondaryAction: b
-  } = N(), [de, $] = oe(!0);
-  O(() => {
-    if ($.current) {
-      const { lineHeight: u, maxHeight: H } = getComputedStyle($.current);
-      if (u && u.indexOf("px") > -1) {
-        const M = u.split("px"), he = parseInt(M[0], 10);
-        m(he);
+    secondaryAction: y
+  } = I(), [de, b] = ne(!0);
+  se(() => {
+    if (b.current) {
+      const { lineHeight: m, maxHeight: H } = getComputedStyle(b.current);
+      if (m && m.indexOf("px") > -1) {
+        const N = m.split("px"), he = parseInt(N[0], 10);
+        h(he);
         const ge = H.split("px");
-        g(parseInt(ge[0], 10));
+        p(parseInt(ge[0], 10));
       }
     }
-  }, [$.current]);
-  const E = (u) => {
-    !u.shiftKey || !w ? (u.preventDefault(), t && t.length > 0 && (d("user-submit", { text: t }), o(""), D(""))) : t.length < 1 && u.preventDefault();
-  }, me = (u) => {
-    b && (u.preventDefault(), d("action", {
-      actionKey: b.action,
-      ...b
+  }, [b.current]);
+  const O = (m) => {
+    !m.shiftKey || !w ? (m.preventDefault(), t && t.length > 0 && (d("user-submit", { text: t }), r(""), D(""))) : t.length < 1 && m.preventDefault();
+  }, me = (m) => {
+    y && (m.preventDefault(), d("action", {
+      actionKey: y.action,
+      ...y
     }));
-  }, ue = (u) => {
-    if (w && $.current) {
-      const H = $.current.scrollHeight;
+  }, ue = (m) => {
+    if (w && b.current) {
+      const H = b.current.scrollHeight;
       if (H > i) {
-        $.current.style.height = "auto";
-        let M = H;
-        u.length < 1 && (M = i), $.current.style.height = `${M}px`, M >= c ? $.current.style.overflowY = "scroll" : $.current.style.overflowY = "hidden";
+        b.current.style.height = "auto";
+        let N = H;
+        m.length < 1 && (N = i), b.current.style.height = `${N}px`, N >= c ? b.current.style.overflowY = "scroll" : b.current.style.overflowY = "hidden";
       }
     }
-  }, D = (u) => {
-    ue(u), o(u), u && u.length > 0 && d("user-typing", { textLength: u.length });
+  }, D = (m) => {
+    ue(m), r(m), m && m.length > 0 && d("user-typing", { textLength: m.length });
   };
-  return v ? null : /* @__PURE__ */ h(
-    Ae,
+  return $ ? null : /* @__PURE__ */ u(
+    Me,
     {
       grow: w,
-      className: T("humany-conversation-input", e),
-      "data-has-focus": r,
+      className: M("humany-conversation-input", e),
+      "data-has-focus": o,
       scrollableCss: de,
-      isTabbing: f,
+      isTabbing: v,
       children: [
-        b && /* @__PURE__ */ n(
-          He,
+        y && /* @__PURE__ */ n(
+          Ie,
           {
             disabled: S,
             onClick: me,
-            title: b.label,
-            "aria-label": b.label,
+            title: y.label,
+            "aria-label": y.label,
             children: /* @__PURE__ */ n(
               x,
               {
                 size: 24,
-                symbol: { type: "Svg", content: b.icon || "browse" }
+                symbol: { type: "Svg", content: y.icon || "browse" }
               }
             )
           }
         ),
         w ? /* @__PURE__ */ n(
-          Ne,
+          Le,
           {
             value: t,
             onChange: D,
-            onEnter: E,
+            onEnter: O,
             disabled: S,
             "aria-label": l,
             placeholder: l,
-            onFocusChange: s,
+            onFocusChange: a,
             type: "textarea",
             rows: 1,
-            ref: $
+            ref: b
           }
         ) : /* @__PURE__ */ n(
-          Te,
+          Ne,
           {
             value: t,
             onChange: D,
-            onEnter: E,
+            onEnter: O,
             disabled: S,
             "aria-label": l,
             placeholder: l,
-            onFocusChange: s
+            onFocusChange: a
           }
         ),
         /* @__PURE__ */ n(
           ie,
           {
             disabled: S,
-            onClick: E,
-            title: I,
-            "aria-label": I,
+            onClick: O,
+            title: L,
+            "aria-label": L,
             children: /* @__PURE__ */ n(
-              Re,
+              He,
               {
                 size: 22,
                 symbol: { type: "Svg", content: "send" },
@@ -143,7 +119,7 @@ const Le = (e, t) => {
       ]
     }
   );
-}, Ne = a(ne)`
+}, Le = s(te)`
   resize: none;
   flex: 1;
   flex-shrink: 1;
@@ -163,7 +139,7 @@ const Le = (e, t) => {
   border: none;
   transition: height 200ms linear;
   outline: none;
-`, Te = a(ne)`
+`, Ne = s(te)`
   flex: 1;
   border: none;
   background-color: transparent;
@@ -189,7 +165,7 @@ const Le = (e, t) => {
 }};
     font-style: italic;
   }
-`, ie = a(L)`
+`, ie = s(z)`
   flex: 0 0 50px;
   align-self: stretch;
   background-color: transparent;
@@ -199,19 +175,19 @@ const Le = (e, t) => {
   border: none;
   color: #a6a6a6;
   &:focus-visible {
-    ${p};
+    ${f};
   }
-`, He = a(ie)`
+`, Ie = s(ie)`
   border-right: ${(e) => e.theme.border};
   margin: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }} 0;
-`, Ae = a.div`
-  ${(e) => e.grow ? y`
+`, Me = s.div`
+  ${(e) => e.grow ? g`
           min-height: 50px;
           max-height: 150px;
-        ` : y`
+        ` : g`
           height: 50px;
         `}
   flex: 0 0 auto;
@@ -222,11 +198,11 @@ const Le = (e, t) => {
   return (t = e.theme.colors) == null ? void 0 : t.accent;
 }};
   border-top: ${(e) => e.theme.inputBorder};
-  ${(e) => e["data-has-focus"] && e.isTabbing && p}
+  ${(e) => e["data-has-focus"] && e.isTabbing && f}
   textarea {
     ${(e) => !!e.scrollableCss && e.scrollableCss}
   }
-`, Re = a(
+`, He = s(
   ({
     hasContent: e,
     ...t
@@ -243,7 +219,7 @@ const Le = (e, t) => {
   return e.hasContent ? (t = e.theme.colors) == null ? void 0 : t.primary : "#a6a6a6";
 }};
   }
-`, Be = a.div`
+`, Te = s.div`
     width: ${(e) => e.avatarSize || "32px"};
     height: ${(e) => e.avatarSize || "32px"};
     border-radius: 50%;
@@ -290,7 +266,7 @@ const Le = (e, t) => {
 }};
         }
     }
-`, Ke = pe`
+`, Ae = xe`
   0% {
     opacity: 0;
   }
@@ -300,7 +276,7 @@ const Le = (e, t) => {
   100% {
     opacity: 0;
   }
-`, je = a.div`
+`, Re = s.div`
     display: flex;
     justify-content: center;
     > div {
@@ -312,7 +288,7 @@ const Le = (e, t) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
-        animation: ${Ke} 1s infinite;
+        animation: ${Ae} 1s infinite;
     }
     > div:nth-of-type(2) {
         animation-delay: 100ms;
@@ -320,29 +296,29 @@ const Le = (e, t) => {
     > div:nth-of-type(3) {
         animation-delay: 200ms;
     }
-`, U = a.div`
+`, P = s.div`
     grid-area: content;
     max-width: 100%;
     overflow: hidden;
-`, Oe = a(V)`
+`, Be = s(q)`
     font-size: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.normal;
 }};
     font-weight: normal;
     margin: 0;
-`, _ = a.div`
+`, U = s.div`
     display: flex;
     ${(e) => e.left && "justify-content: start;"};
     ${(e) => e.center && "justify-content: center;"};
     ${(e) => e.right && "justify-content: end;"};
-`, q = a.div`
+`, _ = s.div`
     ${(e) => {
   var t;
   return e.padded && `padding: ${(t = e.theme.sizes) == null ? void 0 : t.medium};`;
 }}
-    ${(e) => !e.user && e.stacked && Ee(e.stacked, e.theme)}
-    ${(e) => e.user && e.stacked && De(e.stacked, e.theme)}
+    ${(e) => !e.user && e.stacked && Ke(e.stacked, e.theme)}
+    ${(e) => e.user && e.stacked && je(e.stacked, e.theme)}
 
     display: inline-block;
     margin-top: ${(e) => {
@@ -358,15 +334,15 @@ const Le = (e, t) => {
     }
     max-width: 100%;
     ${(e) => e.fullWidth && "width: 100%;"}
-`, Ee = (e, t) => {
-  var r, s;
-  const o = y`
-        background-color: ${(r = t.colors) == null ? void 0 : r.accent};
-        color: ${(s = t.colors) == null ? void 0 : s.text};
+`, Ke = (e, t) => {
+  var o, a;
+  const r = g`
+        background-color: ${(o = t.colors) == null ? void 0 : o.accent};
+        color: ${(a = t.colors) == null ? void 0 : a.text};
         ${t.border && `border: ${t.border};`};
     `;
-  return t.borderRadius ? y`
-        ${o}
+  return t.borderRadius ? g`
+        ${r}
 
         border-top-right-radius: ${t.borderRadius};
         border-bottom-right-radius: ${t.borderRadius};
@@ -378,15 +354,15 @@ const Le = (e, t) => {
         ${e === "last" && `
             border-bottom-left-radius: ${t.borderRadius};
         `}
-    ` : o;
-}, De = (e, t) => {
-  var r, s;
-  const o = y`
-        background-color: ${(r = t.colors) == null ? void 0 : r.primary};
-        color: ${(s = t.colors) == null ? void 0 : s.accent};
+    ` : r;
+}, je = (e, t) => {
+  var o, a;
+  const r = g`
+        background-color: ${(o = t.colors) == null ? void 0 : o.primary};
+        color: ${(a = t.colors) == null ? void 0 : a.accent};
     `;
-  return t.borderRadius ? y`
-        ${o}
+  return t.borderRadius ? g`
+        ${r}
 
         border-top-left-radius: ${t.borderRadius};
         border-bottom-left-radius: ${t.borderRadius};
@@ -398,8 +374,8 @@ const Le = (e, t) => {
         ${e === "last" && `
             border-bottom-right-radius: ${t.borderRadius};
         `}
-    ` : o;
-}, A = a.div`
+    ` : r;
+}, A = s.div`
     margin-bottom: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
@@ -408,19 +384,19 @@ const Le = (e, t) => {
         margin-bottom: 0;
     }
 `, C = (e) => {
-  var t, o;
-  return y`
+  var t, r;
+  return g`
     margin: ${(t = e.theme.sizes) == null ? void 0 : t.medium} 0;
-    padding: 0 ${(o = e.theme.sizes) == null ? void 0 : o.medium};
+    padding: 0 ${(r = e.theme.sizes) == null ? void 0 : r.medium};
 `;
-}, We = a(be)`
+}, Oe = s(Se)`
     & button.humany-form-component-button {
         ${(e) => {
-  var t, o, r, s;
-  return ((t = e.theme.colors) == null ? void 0 : t.primary) && ((o = e.theme.colors) == null ? void 0 : o.accent) && $e({
+  var t, r, o, a;
+  return ((t = e.theme.colors) == null ? void 0 : t.primary) && ((r = e.theme.colors) == null ? void 0 : r.accent) && pe({
     active: !1,
-    primaryColor: (r = e.theme.colors) == null ? void 0 : r.primary,
-    secondaryColor: (s = e.theme.colors) == null ? void 0 : s.accent,
+    primaryColor: (o = e.theme.colors) == null ? void 0 : o.primary,
+    secondaryColor: (a = e.theme.colors) == null ? void 0 : a.accent,
     theme: e.theme
   });
 }};
@@ -441,18 +417,18 @@ const Le = (e, t) => {
 }};
         }
     }
-`, Fe = a(Y)`
+`, De = s(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) && p;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && f;
 }};
         }
     }
-`, Pe = a(re)`
+`, We = s(re)`
     padding: 0;
     list-style: none;
     margin: 0 -${(e) => {
@@ -465,7 +441,7 @@ const Le = (e, t) => {
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
     }
-`, Ue = a.button`
+`, Ee = s.button`
     ${(e) => G(e)};
     display: block;
     background-color: ${(e) => {
@@ -475,16 +451,16 @@ const Le = (e, t) => {
     width: 100%;
     color: #fff;
     &:focus-visible {
-        ${p}
+        ${f}
         background-color: transparent;
     }
-`, ee = Q(
-  ({ boxed: e, className: t, agentData: o }, r) => /* @__PURE__ */ n(U, { ref: r, children: /* @__PURE__ */ n(_, { left: e, center: !e, children: /* @__PURE__ */ n(q, { padded: !!e, stacked: e ? "first" : void 0, children: /* @__PURE__ */ h(je, { children: [
+`, Z = Q(
+  ({ boxed: e, className: t, agentData: r }, o) => /* @__PURE__ */ n(P, { ref: o, children: /* @__PURE__ */ n(U, { left: e, center: !e, children: /* @__PURE__ */ n(_, { padded: !!e, stacked: e ? "first" : void 0, children: /* @__PURE__ */ u(Re, { children: [
     /* @__PURE__ */ n("div", {}),
     /* @__PURE__ */ n("div", {}),
     /* @__PURE__ */ n("div", {})
   ] }) }) }) })
-), _e = a.p`
+), Fe = s.p`
     && {
         font-size: ${(e) => {
   var t;
@@ -499,77 +475,77 @@ const Le = (e, t) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
-`, te = (e) => new Date(e).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), R = ({ className: e, name: t, timestamp: o }) => {
-  if (!t && !o)
+`, ee = (e) => new Date(e).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), R = ({ className: e, name: t, timestamp: r }) => {
+  if (!t && !r)
     return null;
-  let r = "";
-  return t ? o ? r = `${t}: ${te(o)}` : r = t : o && (r = te(o)), /* @__PURE__ */ n(_e, { children: r });
+  let o = "";
+  return t ? r ? o = `${t}: ${ee(r)}` : o = t : r && (o = ee(r)), /* @__PURE__ */ n(Fe, { children: o });
 }, le = ({
   className: e,
   children: t,
-  sender: o,
-  timestamp: r
+  sender: r,
+  timestamp: o
 }) => {
-  const { avatar: s, name: i } = o, { avatarSize: m } = N();
-  return /* @__PURE__ */ h(
-    qe,
+  const { avatar: a, name: i } = r, { avatarSize: h } = I();
+  return /* @__PURE__ */ u(
+    Pe,
     {
-      hasAvatar: !!s,
-      className: T(
+      hasAvatar: !!a,
+      className: M(
         e,
         "humany-conversation-agent-message"
       ),
       children: [
-        s && /* @__PURE__ */ n(Be, { avatarSize: m, children: typeof s == "string" ? (
+        a && /* @__PURE__ */ n(Te, { avatarSize: h, children: typeof a == "string" ? (
           // eslint-disable-next-line jsx-a11y/alt-text
-          /* @__PURE__ */ n("img", { src: s })
-        ) : /* @__PURE__ */ n(x, { symbol: s }) }),
+          /* @__PURE__ */ n("img", { src: a })
+        ) : /* @__PURE__ */ n(x, { symbol: a }) }),
         t,
-        /* @__PURE__ */ n(R, { name: i, timestamp: r })
+        /* @__PURE__ */ n(R, { name: i, timestamp: o })
       ]
     }
   );
-}, qe = a.div`
+}, Pe = s.div`
   display: grid;
   margin-right: 10%;
   width: 90%;
-  ${(e) => e.hasAvatar ? y`
+  ${(e) => e.hasAvatar ? g`
           grid-template-columns: auto 1fr;
           grid-template-rows: 1fr auto;
           grid-template-areas:
             'avatar content'
             '. info';
-        ` : y`
+        ` : g`
           grid-template-columns: 1fr;
           grid-template-rows: 1fr auto;
           grid-template-areas:
             'content'
             'info';
         `};
-`, Ve = Q(
-  ({ className: e, children: t, timestamp: o, discrete: r, fullWidth: s }, i) => /* @__PURE__ */ n(
-    Ye,
+`, Ue = Q(
+  ({ className: e, children: t, timestamp: r, discrete: o, fullWidth: a }, i) => /* @__PURE__ */ n(
+    _e,
     {
       ref: i,
-      className: T(e, "humany-conversation-system-message"),
-      fullWidth: s,
-      children: r ? /* @__PURE__ */ h(Ge, { className: "humany-conversation-discrete-message", children: [
+      className: M(e, "humany-conversation-system-message"),
+      fullWidth: a,
+      children: o ? /* @__PURE__ */ u(Ve, { className: "humany-conversation-discrete-message", children: [
         t,
-        /* @__PURE__ */ n(R, { timestamp: o })
-      ] }) : /* @__PURE__ */ h(B, { children: [
+        /* @__PURE__ */ n(R, { timestamp: r })
+      ] }) : /* @__PURE__ */ u(B, { children: [
         t,
-        /* @__PURE__ */ n(R, { timestamp: o })
+        /* @__PURE__ */ n(R, { timestamp: r })
       ] })
     }
   )
-), Ye = a.div`
+), _e = s.div`
     ${(e) => e.fullWidth && "width: 100%"};
     padding: 0 ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.large;
 }};
     overflow: auto;
-`, Ge = a.div`
+`, Ve = s.div`
     text-align: center;
     word-wrap: break-word;
     font-size: ${(e) => {
@@ -583,49 +559,49 @@ const Le = (e, t) => {
     > p {
         margin: 0;
     }
-`, Je = ({ className: e, children: t, timestamp: o }) => {
-  const { userLabel: r = "" } = N();
-  return /* @__PURE__ */ h(
-    Qe,
+`, qe = ({ className: e, children: t, timestamp: r }) => {
+  const { userLabel: o = "" } = I();
+  return /* @__PURE__ */ u(
+    Ye,
     {
-      className: T(e, "humany-conversation-user-message"),
+      className: M(e, "humany-conversation-user-message"),
       children: [
         t,
-        /* @__PURE__ */ n(R, { name: r, timestamp: o })
+        /* @__PURE__ */ n(R, { name: o, timestamp: r })
       ]
     }
   );
-}, Qe = a.div`
+}, Ye = s.div`
     margin-left: 10%;
     width: 90%;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-`, Z = (e) => Array.isArray(e) ? e : Object.keys(e).map((t) => ({
+`, X = (e) => Array.isArray(e) ? e : Object.keys(e).map((t) => ({
   label: e[t],
   actionKey: t
-})), Xe = ({ header: e, actions: t, dispatch: o }) => /* @__PURE__ */ n(
-  Ze,
+})), Ge = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n(
+  Je,
   {
     className: "humany-conversation-button-list",
     header: e,
-    items: Z(t),
-    renderItem: (r) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ h(
-      et,
+    items: X(t),
+    renderItem: (o) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ u(
+      Qe,
       {
         onClick: () => {
-          o("action", r);
+          r("action", o);
         },
-        "aria-label": r.label,
-        title: r.label,
+        "aria-label": o.label,
+        title: o.label,
         children: [
-          /* @__PURE__ */ n(x, { symbol: r.symbol }),
-          r.label
+          /* @__PURE__ */ n(x, { symbol: o.symbol }),
+          o.label
         ]
       }
-    ) }, r.actionKey)
+    ) }, o.actionKey)
   }
-), Ze = a(K)`
+), Je = s(K)`
     ${j}
     > ul {
         display: flex;
@@ -639,7 +615,7 @@ const Le = (e, t) => {
         }
     }
     ${C}
-`, et = a(L)`
+`, Qe = s(z)`
     ${G};
 
     display: block;
@@ -656,7 +632,7 @@ const Le = (e, t) => {
     overflow: hidden;
     text-overflow: ellipsis;
     &:focus-visible {
-        ${p}
+        ${f}
         background-color: transparent;
     }
 
@@ -667,57 +643,57 @@ const Le = (e, t) => {
   return (t = e.theme.sizes) == null ? void 0 : t.small;
 }};
     }
-`, tt = ({ type: e, content: t = {} }) => {
-  const o = Le(e);
-  return !o || !e ? null : /* @__PURE__ */ n(ke, { fallback: null, children: /* @__PURE__ */ n(o, { ...t }) });
-}, nt = ({ body: e }) => /* @__PURE__ */ n(ot, { html: e }), ot = a(Y)`
-    ${ve}
+`, Xe = ({ type: e, content: t = {} }) => {
+  const r = ye(e);
+  return !r || !e ? null : /* @__PURE__ */ n(we, { fallback: null, children: /* @__PURE__ */ n(r, { ...t }) });
+}, Ze = ({ body: e }) => /* @__PURE__ */ n(et, { html: e }), et = s(Y)`
+    ${be}
     color: inherit;
     white-space: pre-wrap;
     ${C}
     a {
         color: ${(e) => e.theme.colors.link};
         &:focus-visible {
-            ${p};
+            ${f};
         }
     }
-`, rt = ({ header: e, actions: t, dispatch: o }) => /* @__PURE__ */ n(
-  st,
+`, tt = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n(
+  nt,
   {
     className: "humany-conversation-item-list",
     header: e,
-    items: Z(t),
-    renderItem: (r) => {
-      var s;
-      return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ h(at, { children: [
-        ((s = r.symbol) == null ? void 0 : s.content) && /* @__PURE__ */ n("div", { className: "item-icon", children: /* @__PURE__ */ n(
+    items: X(t),
+    renderItem: (o) => {
+      var a;
+      return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ u(rt, { children: [
+        ((a = o.symbol) == null ? void 0 : a.content) && /* @__PURE__ */ n("div", { className: "item-icon", children: /* @__PURE__ */ n(
           x,
           {
             size: 22,
             symbol: {
-              type: r.symbol.type,
-              content: r.symbol.content
+              type: o.symbol.type,
+              content: o.symbol.content
             }
           }
         ) }),
-        /* @__PURE__ */ h("div", { className: "item-body", children: [
+        /* @__PURE__ */ u("div", { className: "item-body", children: [
           /* @__PURE__ */ n(
-            L,
+            z,
             {
               onClick: () => {
-                o("action", r);
+                r("action", o);
               },
-              "aria-label": r.label,
-              title: r.label,
-              children: r.label
+              "aria-label": o.label,
+              title: o.label,
+              children: o.label
             }
           ),
-          r.description && /* @__PURE__ */ n("p", { children: r.description })
+          o.description && /* @__PURE__ */ n("p", { children: o.description })
         ] })
-      ] }) }, r.actionKey);
+      ] }) }, o.actionKey);
     }
   }
-), st = a(K)`
+), nt = s(K)`
     ${j}
 
     > .humany-paragraph {
@@ -731,7 +707,7 @@ const Le = (e, t) => {
 
     ${(e) => J(e)(
   "h1",
-  y`
+  g`
                 white-space: normal;
             `
 )}
@@ -755,7 +731,7 @@ const Le = (e, t) => {
             border-bottom: none;
         }
     }
-`, at = a.div`
+`, rt = s.div`
     display: flex;
     gap: ${(e) => {
   var t;
@@ -794,7 +770,7 @@ const Le = (e, t) => {
         margin: 0;
 
         &:focus-visible {
-            ${p}
+            ${f}
             span {
                 color: ${(e) => {
   var t;
@@ -804,24 +780,24 @@ const Le = (e, t) => {
             }
         }
     }
-`, it = ({ header: e, actions: t, dispatch: o }) => /* @__PURE__ */ n(
-  lt,
+`, ot = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n(
+  st,
   {
     className: "humany-conversation-link-list",
     header: e,
-    items: Z(t),
-    renderItem: (r) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ h(
-      ct,
+    items: X(t),
+    renderItem: (o) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ u(
+      at,
       {
-        help: r.actionKey === "help",
+        help: o.actionKey === "help",
         onClick: () => {
-          o("action", r);
+          r("action", o);
         },
-        "aria-label": r.label,
-        title: r.label,
+        "aria-label": o.label,
+        title: o.label,
         children: [
-          r.label,
-          r.actionKey === "help" && /* @__PURE__ */ n(
+          o.label,
+          o.actionKey === "help" && /* @__PURE__ */ n(
             x,
             {
               size: 14,
@@ -833,15 +809,15 @@ const Le = (e, t) => {
           )
         ]
       }
-    ) }, r.actionKey)
+    ) }, o.actionKey)
   }
-), lt = a(K)`
+), st = s(K)`
     ${j}
     ${C}
 
     ${(e) => J(e)(
   "h1",
-  y`
+  g`
                 white-space: normal;
             `
 )}
@@ -857,7 +833,7 @@ const Le = (e, t) => {
             margin: 0;
         }
     }
-`, ct = a(L)`
+`, at = s(z)`
     display: block;
     text-align: left;
     font-weight: 300;
@@ -870,20 +846,20 @@ const Le = (e, t) => {
     overflow: hidden;
 
     ${(e) => {
-  var t, o;
-  return e.help && y`
+  var t, r;
+  return e.help && g`
             color: ${(t = e.theme.colors) == null ? void 0 : t.text};
             text-decoration: underline;
 
             i,
             svg {
-                margin-left: ${(o = e.theme.sizes) == null ? void 0 : o.small};
+                margin-left: ${(r = e.theme.sizes) == null ? void 0 : r.small};
             }
         `;
 }}
 
     &:focus-visible {
-        ${p}
+        ${f}
         span {
             color: ${(e) => {
   var t;
@@ -892,18 +868,18 @@ const Le = (e, t) => {
             text-decoration: underline;
         }
     }
-`, dt = () => /* @__PURE__ */ n(mt, { className: "humany-conversation-separator" }), mt = a.div`
+`, it = () => /* @__PURE__ */ n(lt, { className: "humany-conversation-separator" }), lt = s.div`
     ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
     width: 100%;
-`, ut = ({ text: e }) => /* @__PURE__ */ n(ht, { className: "humany-conversation-text", variant: "span", children: e }), ht = a(V)`
+`, ct = ({ text: e }) => /* @__PURE__ */ n(dt, { className: "humany-conversation-text", variant: "span", children: e }), dt = s(q)`
     ${C}
-`, gt = ({
+`, mt = ({
   header: e = "Video call",
   acceptLabel: t = "Accept",
-  declineLabel: o = "Decline",
-  dispatch: r
+  declineLabel: r = "Decline",
+  dispatch: o
 }) => {
-  const s = Ce(() => [
+  const a = ke(() => [
     {
       label: t,
       actionKey: "accept-video-call",
@@ -913,38 +889,38 @@ const Le = (e, t) => {
       }
     },
     {
-      label: o,
+      label: r,
       actionKey: "decline-video-call",
       symbol: {
         type: "Svg",
         content: "close"
       }
     }
-  ], [t, o]);
+  ], [t, r]);
   return /* @__PURE__ */ n(
-    yt,
+    ut,
     {
       className: "humany-conversation-video-request",
       header: e,
-      items: s,
+      items: a,
       renderItem: (i) => {
-        const m = i.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
+        const h = i.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
         return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
-          ft,
+          ht,
           {
             onClick: () => {
-              r("action", i);
+              o("action", i);
             },
             "aria-label": i.label,
             title: i.label,
-            bgColor: m,
+            bgColor: h,
             children: /* @__PURE__ */ n(x, { symbol: i.symbol, size: 25 })
           }
         ) }, i.actionKey);
       }
     }
   );
-}, yt = a(K)`
+}, ut = s(K)`
     ${(e) => j(e)}
     > ul {
         display: flex;
@@ -958,7 +934,7 @@ const Le = (e, t) => {
         }
     }
     ${(e) => C(e)}
-`, ft = a(L)`
+`, ht = s(z)`
     ${G};
 
     background-color: ${(e) => e.bgColor};
@@ -971,7 +947,7 @@ const Le = (e, t) => {
     border-radius: 100%;
 
     &:focus-visible {
-        ${p}
+        ${f}
         background-color: transparent;
 
         i,
@@ -998,139 +974,139 @@ const Le = (e, t) => {
             stroke: #fff;
         }
     }
-`, pt = ([e, t]) => ({ type: e, content: t }), bt = ({ items: e, dispatch: t }) => /* @__PURE__ */ n(
-  $t,
+`, gt = ([e, t]) => ({ type: e, content: t }), ft = ({ items: e, dispatch: t }) => /* @__PURE__ */ n(
+  pt,
   {
     className: "humany-message-list",
-    items: e.map(pt),
+    items: e.map(gt),
     renderLi: !0,
-    renderItem: (o) => {
-      switch (o.type) {
+    renderItem: (r) => {
+      switch (r.type) {
         case k.Text:
-          return /* @__PURE__ */ n(ut, { text: o.content });
+          return /* @__PURE__ */ n(ct, { text: r.content });
         case k.HTML:
-          return /* @__PURE__ */ n(nt, { ...o.content });
+          return /* @__PURE__ */ n(Ze, { ...r.content });
         case k.Separator:
-          return /* @__PURE__ */ n(dt, { ...o.content });
+          return /* @__PURE__ */ n(it, { ...r.content });
         case k.ItemList:
-          return /* @__PURE__ */ n(rt, { ...o.content, dispatch: t });
+          return /* @__PURE__ */ n(tt, { ...r.content, dispatch: t });
         case k.LinkList:
-          return /* @__PURE__ */ n(it, { ...o.content, dispatch: t });
+          return /* @__PURE__ */ n(ot, { ...r.content, dispatch: t });
         case k.ButtonList:
-          return /* @__PURE__ */ n(Xe, { ...o.content, dispatch: t });
+          return /* @__PURE__ */ n(Ge, { ...r.content, dispatch: t });
         case k.VideoRequest:
-          return /* @__PURE__ */ n(gt, { ...o.content, dispatch: t });
+          return /* @__PURE__ */ n(mt, { ...r.content, dispatch: t });
         default:
-          return /* @__PURE__ */ n(tt, { type: o.type, content: o.content });
+          return /* @__PURE__ */ n(Xe, { type: r.type, content: r.content });
       }
     }
   }
-), $t = a(re)`
-    ${xe}
+), pt = s(re)`
+    ${$e}
 
     > li {
         margin: 0;
     }
-`, vt = Q(
-  ({ className: e, timestamp: t, sender: o, type: r, content: s }, i) => {
-    const m = ae(
+`, yt = Q(
+  ({ className: e, timestamp: t, sender: r, type: o, content: a }, i) => {
+    const h = ae(
       (d) => {
         let l = "first";
-        return s.length > 1 && (l = d === 0 ? "first" : d + 1 === s.length ? "last" : "middle"), l;
+        return a.length > 1 && (l = d === 0 ? "first" : d + 1 === a.length ? "last" : "middle"), l;
       },
-      [s]
-    ), c = () => /* @__PURE__ */ n(B, { children: s.map((d) => {
-      const { key: l, body: v, title: S, form: I, actions: w } = d, b = !!v && !S && !I && !w;
+      [a]
+    ), c = () => /* @__PURE__ */ n(B, { children: a.map((d) => {
+      const { key: l, body: $, title: S, form: L, actions: w } = d, y = !!$ && !S && !L && !w;
       return /* @__PURE__ */ n(
-        Ve,
+        Ue,
         {
           className: e,
-          discrete: b,
+          discrete: y,
           ref: i,
           timestamp: t,
-          fullWidth: !!I || !!w,
-          children: b && v ? /* @__PURE__ */ n(Y, { html: v }) : /* @__PURE__ */ n(F, { isSystem: !0, content: d })
+          fullWidth: !!L || !!w,
+          children: y && $ ? /* @__PURE__ */ n(Y, { html: $ }) : /* @__PURE__ */ n(E, { isSystem: !0, content: d })
         },
         l
       );
-    }) }), g = () => /* @__PURE__ */ n(le, { sender: o, timestamp: t, className: e, children: /* @__PURE__ */ n(U, { className: "humany-message-content-bundle", children: s.map((d, l) => /* @__PURE__ */ n(
-      _,
+    }) }), p = () => /* @__PURE__ */ n(le, { sender: r, timestamp: t, className: e, children: /* @__PURE__ */ n(P, { className: "humany-message-content-bundle", children: a.map((d, l) => /* @__PURE__ */ n(
+      U,
       {
         className: "humany-message-container",
         left: !0,
         ref: i,
         children: /* @__PURE__ */ n(
-          F,
+          E,
           {
             content: d,
-            stacked: m(l)
+            stacked: h(l)
           }
         )
       },
       d.key
-    )) }) }), f = () => /* @__PURE__ */ n(Je, { timestamp: t, className: e, children: /* @__PURE__ */ n(U, { className: "humany-message-content-bundle", children: s.map((d, l) => /* @__PURE__ */ n(
-      _,
+    )) }) }), v = () => /* @__PURE__ */ n(qe, { timestamp: t, className: e, children: /* @__PURE__ */ n(P, { className: "humany-message-content-bundle", children: a.map((d, l) => /* @__PURE__ */ n(
+      U,
       {
         className: "humany-message-container",
         right: !0,
         ref: i,
         children: /* @__PURE__ */ n(
-          F,
+          E,
           {
             isUser: !0,
             content: d,
-            stacked: m(l)
+            stacked: h(l)
           }
         )
       },
       d.key
     )) }) });
-    switch (r) {
+    switch (o) {
       case W.System:
         return c();
       case W.Agent:
-        return g();
+        return p();
       case W.User:
-        return f();
+        return v();
       default:
         return null;
     }
   }
-), F = ({ content: e, isUser: t, isSystem: o, stacked: r }) => {
-  const s = X(), { title: i, body: m, actions: c, form: g, items: f } = e;
-  return f ? /* @__PURE__ */ n(q, { className: "humany-message-content", user: !!t, stacked: r, children: /* @__PURE__ */ n(bt, { items: f, dispatch: s }) }) : /* @__PURE__ */ h(
-    q,
+), E = ({ content: e, isUser: t, isSystem: r, stacked: o }) => {
+  const a = V(), { title: i, body: h, actions: c, form: p, items: v } = e;
+  return v ? /* @__PURE__ */ n(_, { className: "humany-message-content", user: !!t, stacked: o, children: /* @__PURE__ */ n(ft, { items: v, dispatch: a }) }) : /* @__PURE__ */ u(
+    _,
     {
       className: "humany-message-content",
-      padded: !o,
+      padded: !r,
       user: !!t,
-      stacked: r,
-      fullWidth: !!g || !!c,
+      stacked: o,
+      fullWidth: !!p || !!c,
       children: [
-        i && /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(Oe, { variant: "h2", children: i }) }),
-        m && /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(Fe, { html: m }) }),
-        g && /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(
-          We,
+        i && /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(Be, { variant: "h2", children: i }) }),
+        h && /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(De, { html: h }) }),
+        p && /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(
+          Oe,
           {
-            ...g,
-            onChange: (l, v) => {
-              s("form", {
-                data: v,
-                formKey: g.schema.id,
+            ...p,
+            onChange: (l, $) => {
+              a("form", {
+                data: $,
+                formKey: p.schema.id,
                 actionKey: l
               });
             }
           }
         ) }),
         c && /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(
-          Pe,
+          We,
           {
             items: Object.keys(c).map((l) => ({ label: c[l], actionKey: l })),
             renderItem: (l) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
-              Ue,
+              Ee,
               {
                 onClick: () => {
-                  s("action", l.actionKey);
+                  a("action", l.actionKey);
                 },
                 children: l.label
               }
@@ -1148,31 +1124,31 @@ const Le = (e, t) => {
         behavior: "smooth"
       });
     }, 250);
-  }, []), [t, o] = oe(!0), {
-    messages: r,
-    loading: s,
+  }, []), [t, r] = ne(!0), {
+    messages: o,
+    loading: a,
     typingActors: i = []
-  } = N(), m = () => i && i.length ? i.map((c, g) => /* @__PURE__ */ n(P, { id: `typing_${c.name}`, children: /* @__PURE__ */ n(le, { timestamp: Date.now(), sender: c, children: /* @__PURE__ */ n(ee, { boxed: !0, ref: e }) }) }, `typing_${c.name}`)) : null;
-  return /* @__PURE__ */ h(B, { children: [
-    /* @__PURE__ */ h(xt, { tabIndex: 0, scrollableCss: t, ref: o, children: [
-      r && r.length ? r.map((c, g) => {
-        const { type: f, timestamp: d, sender: l, content: v } = c;
+  } = I(), h = () => i && i.length ? i.map((c, p) => /* @__PURE__ */ n(F, { id: `typing_${c.name}`, children: /* @__PURE__ */ n(le, { timestamp: Date.now(), sender: c, children: /* @__PURE__ */ n(Z, { boxed: !0, ref: e }) }) }, `typing_${c.name}`)) : null;
+  return /* @__PURE__ */ u(B, { children: [
+    /* @__PURE__ */ u(bt, { tabIndex: 0, scrollableCss: t, ref: r, children: [
+      o && o.length ? o.map((c, p) => {
+        const { type: v, timestamp: d, sender: l, content: $ } = c;
         return /* @__PURE__ */ n(
-          P,
+          F,
           {
             className: "humany-conversation-entry",
             tabIndex: -1,
-            children: /* @__PURE__ */ n(vt, { ...c, ref: e })
+            children: /* @__PURE__ */ n(yt, { ...c, ref: e })
           },
-          `${f}_${l == null ? void 0 : l.name}_${d}_${v[0].key}`
+          `${v}_${l == null ? void 0 : l.name}_${d}_${$[0].key}`
         );
       }) : null,
-      m(),
-      s && /* @__PURE__ */ n(P, { children: /* @__PURE__ */ n(ee, { ref: e }) })
+      h(),
+      a && /* @__PURE__ */ n(F, { children: /* @__PURE__ */ n(Z, { ref: e }) })
     ] }),
-    /* @__PURE__ */ n(Me, {})
+    /* @__PURE__ */ n(ze, {})
   ] });
-}, xt = a.div`
+}, bt = s.div`
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -1183,9 +1159,9 @@ const Le = (e, t) => {
 }};
     ${(e) => !!e.scrollableCss && e.scrollableCss};
     &:focus-visible {
-        ${(e) => p(e)};
+        ${(e) => f(e)};
     }
-`, P = a.div`
+`, F = s.div`
     margin: 0;
     margin-bottom: ${(e) => {
   var t;
@@ -1219,39 +1195,39 @@ const Le = (e, t) => {
     }
     ${(e) => J(e)(
   "h1",
-  y`
+  g`
                 font-weight: normal;
             `
 )}
-`, wt = ({ dispatch: e }) => {
-  const t = Se(null);
-  return O(() => {
+`, $t = ({ dispatch: e }) => {
+  const t = Ce(null);
+  return se(() => {
     t.current && t.current.parentNode && e("overlay-mounted", t.current);
   }, [t]), /* @__PURE__ */ n(
-    se,
+    oe,
     {
       portalId: "humany-conversation-overlay-portal",
       className: "humany-conversation-overlay-outlet",
       ref: t
     }
   );
-}, kt = ({
+}, vt = ({
   dispatch: e,
   header: t,
-  buttonLabel: o
-}) => /* @__PURE__ */ h(
-  Ct,
+  buttonLabel: r
+}) => /* @__PURE__ */ u(
+  xt,
   {
     portalId: "humany-conversation-portal",
     className: "humany-conversation-outlet",
     children: [
-      /* @__PURE__ */ h(St, { className: "humany-conversation-outlet-head", children: [
+      /* @__PURE__ */ u(wt, { className: "humany-conversation-outlet-head", children: [
         /* @__PURE__ */ n(
-          Lt,
+          Ct,
           {
             className: "humany-conversation-outlet-head-button",
-            "aria-label": o,
-            title: o,
+            "aria-label": r,
+            title: r,
             onClick: () => e("hide-overlay-conversation"),
             children: /* @__PURE__ */ n(
               x,
@@ -1266,7 +1242,7 @@ const Le = (e, t) => {
           }
         ),
         t && /* @__PURE__ */ n(
-          zt,
+          kt,
           {
             className: "humany-conversation-outlet-header",
             variant: "h1",
@@ -1277,7 +1253,7 @@ const Le = (e, t) => {
       /* @__PURE__ */ n(ce, {})
     ]
   }
-), Ct = a(se)`
+), xt = s(oe)`
   z-index: 11;
   top: auto;
   height: 65%;
@@ -1292,7 +1268,7 @@ const Le = (e, t) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.large;
 }};
-`, St = a.div`
+`, wt = s.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -1306,7 +1282,7 @@ const Le = (e, t) => {
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
   ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
-`, zt = a(V)`
+`, kt = s(q)`
   font-size: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.medium;
@@ -1316,7 +1292,7 @@ const Le = (e, t) => {
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
   margin: 0;
-`, Lt = a(L)`
+`, Ct = s(z)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1330,7 +1306,7 @@ const Le = (e, t) => {
   ${(e) => e.theme.borderRadius && `border-radius: ${e.theme.borderRadius};`}
 
   &:focus-visible {
-    ${p};
+    ${f};
   }
 
   svg line {
@@ -1339,41 +1315,41 @@ const Le = (e, t) => {
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
   }
-`, Rt = ({ className: e, ...t }) => {
+`, jt = ({ className: e, ...t }) => {
   const {
-    overlay: o,
-    overlayConversationHeader: r,
-    overlayConversationCloseLabel: s,
+    overlay: r,
+    overlayConversationHeader: o,
+    overlayConversationCloseLabel: a,
     conversationControllerId: i
-  } = N(), m = X();
-  return /* @__PURE__ */ h(
-    we.Provider,
+  } = I(), h = V();
+  return /* @__PURE__ */ u(
+    ve.Provider,
     {
       value: i ? { id: i } : null,
       children: [
         /* @__PURE__ */ n(
-          It,
+          St,
           {
             ...t,
-            className: T(e, "humany-conversation-component"),
+            className: M(e, "humany-conversation-component"),
             children: /* @__PURE__ */ n(ce, {})
           }
         ),
-        o && /* @__PURE__ */ h(B, { children: [
-          /* @__PURE__ */ n(wt, { dispatch: m }),
-          o.conversation && /* @__PURE__ */ n(
-            kt,
+        r && /* @__PURE__ */ u(B, { children: [
+          /* @__PURE__ */ n($t, { dispatch: h }),
+          r.conversation && /* @__PURE__ */ n(
+            vt,
             {
-              dispatch: m,
-              header: r,
-              buttonLabel: s
+              dispatch: h,
+              header: o,
+              buttonLabel: a
             }
           )
         ] })
       ]
     }
   );
-}, It = a.div`
+}, St = s.div`
     position: absolute;
     right: 0;
     left: 0;
@@ -1384,5 +1360,5 @@ const Le = (e, t) => {
     flex-direction: column;
 `;
 export {
-  Rt as default
+  jt as default
 };