@telia-ace/widget-conversation 1.1.2-rc.6 → 1.1.2-rc.7

package/{conversation-5f3a00de.mjs → conversation-f1d177a6.mjs}

@@ -1,110 +1,120 @@
-import { jsx as n, jsxs as m, Fragment as z } from "react/jsx-runtime";
+import { jsx as n, jsxs as u, Fragment as N } from "react/jsx-runtime";
 import a from "@emotion/styled";
-import { Input as ne, borderTabStyle as b, Button as L, SymbolBadge as x, useIsTabbing as re, useDispatch as _, useProperties as N, useScroll as oe, Typography as F, invertedHoverButton as pe, Html as Y, List as se, buttonCss as B, ItemList as O, itemList as K, Link as be, useComponent as $e, genericHtml as ve, headingElement as G, usePrevious as xe, list as we, WidgetOverlayOutlet as ae, useContainer as ke, ConversationContext as Ce } from "@telia-ace/widget-ui";
-import { appendClassNames as M, htmlParentContains as Se } from "@telia-ace/widget-utilities";
-import { css as p, keyframes as ze } from "@emotion/react";
-import Le, { useState as D, useEffect as J, forwardRef as Q, useContext as Ne, Suspense as Ie, useRef as ie, useMemo as Me, useCallback as le } from "react";
-import { FormComponent as Te } from "@telia-ace/widget-forms";
-import { ConversationMessageListItemType as k, ConversationMessageType as E } from "./index.mjs";
+import { borderTabStyle as f, Input as se, Button as M, SymbolBadge as w, useIsTabbing as ae, useDispatch as Y, useContainer as ie, useProperties as I, useScroll as le, Typography as X, invertedHoverButton as xe, Html as G, List as ce, buttonCss as B, ItemList as K, itemList as D, Link as we, useComponent as ke, genericHtml as Ce, headingElement as J, usePrevious as Se, list as ze, WidgetOverlayOutlet as de, ConversationContext as Le } from "@telia-ace/widget-ui";
+import { appendClassNames as T, htmlParentContains as Ne } from "@telia-ace/widget-utilities";
+import { css as p, keyframes as Me } from "@emotion/react";
+import Ie, { useState as P, useEffect as Q, forwardRef as Z, useContext as Te, Suspense as Ae, useRef as me, useMemo as He, useCallback as ue } from "react";
+import { FormComponent as Oe } from "@telia-ace/widget-forms";
+import { ConversationMessageListItemType as S, ConversationMessageType as W } from "./index.mjs";
 import "@telia-ace/widget-core";
 import "@telia-ace/widget-services";
 import "@telia-ace/widget-plugins";
-const Ae = ({ className: t }) => {
-  const [e, r] = D(""), [o, s] = D(0), [i, c] = D(0), d = re(), u = _(), {
-    inputPlaceholder: f = "Type your message",
-    inputHidden: w = !1,
-    inputDisabled: l = !1,
-    sendButtonLabel: h = "Send message",
-    inputMultiline: $ = !0,
-    secondaryAction: v
-  } = N(), [T, y] = oe(!0);
-  J(() => {
-    if (y.current) {
-      const { lineHeight: g, maxHeight: A } = getComputedStyle(y.current);
-      if (g && g.indexOf("px") > -1) {
-        const I = g.split("px"), fe = parseInt(I[0], 10);
-        s(fe);
-        const ye = A.split("px");
-        c(parseInt(ye[0], 10));
+const Re = ({ className: t }) => {
+  const [e, r] = P(""), [o, s] = P(0), [i, c] = P(0), m = ae(), h = Y(), y = ie(), {
+    inputPlaceholder: b = "Type your message",
+    inputHidden: l = !1,
+    inputDisabled: g = !1,
+    sendButtonLabel: k = "Send message",
+    inputMultiline: L = !0,
+    secondaryAction: $,
+    skipToLatestMessageLabel: A = "Skip to latest message"
+  } = I(), [H, v] = le(!0);
+  Q(() => {
+    if (v.current) {
+      const { lineHeight: d, maxHeight: C } = getComputedStyle(v.current);
+      if (d && d.indexOf("px") > -1) {
+        const x = d.split("px"), te = parseInt(x[0], 10);
+        s(te);
+        const ve = C.split("px");
+        c(parseInt(ve[0], 10));
       }
     }
-  }, [y.current]);
-  const S = (g) => {
-    !g.shiftKey || !$ ? (g.preventDefault(), e && e.length > 0 && (u("user-submit", { text: e }), r(""), j(""))) : e.length < 1 && g.preventDefault();
-  }, he = (g) => {
-    v && (g.preventDefault(), u("action", {
-      actionKey: v.action,
-      ...v
+  }, [v.current]);
+  const E = (d) => {
+    !d.shiftKey || !L ? (d.preventDefault(), e && e.length > 0 && (h("user-submit", { text: e }), r(""), j(""))) : e.length < 1 && d.preventDefault();
+  }, pe = (d) => {
+    $ && (d.preventDefault(), h("action", {
+      actionKey: $.action,
+      ...$
     }));
-  }, ge = (g) => {
-    if ($ && y.current) {
-      const A = y.current.scrollHeight;
-      if (A > o) {
-        y.current.style.height = "auto";
-        let I = A;
-        g.length < 1 && (I = o), y.current.style.height = `${I}px`, I >= i ? y.current.style.overflowY = "scroll" : y.current.style.overflowY = "hidden";
+  }, be = (d) => {
+    if (L && v.current) {
+      const C = v.current.scrollHeight;
+      if (C > o) {
+        v.current.style.height = "auto";
+        let x = C;
+        d.length < 1 && (x = o), v.current.style.height = `${x}px`, x >= i ? v.current.style.overflowY = "scroll" : v.current.style.overflowY = "hidden";
       }
     }
-  }, j = (g) => {
-    ge(g), r(g), g && g.length > 0 && u("user-typing", { textLength: g.length });
+  }, j = (d) => {
+    be(d), r(d), d && d.length > 0 && h("user-typing", { textLength: d.length });
+  }, $e = (d) => {
+    d.preventDefault();
+    const C = y.get("widgetDOMElement");
+    if (C) {
+      const x = C.querySelectorAll(
+        ".humany-conversation-entry"
+      );
+      x.length && x[x.length - 1].focus();
+    }
   };
-  return w ? null : /* @__PURE__ */ m(
-    Oe,
+  return l ? null : /* @__PURE__ */ u(
+    je,
     {
-      grow: $,
-      className: M("humany-conversation-input", t),
-      scrollableCss: T,
-      isTabbing: d,
+      grow: L,
+      className: T("humany-conversation-input", t),
+      scrollableCss: H,
+      isTabbing: m,
       children: [
-        v && /* @__PURE__ */ n(
-          Be,
+        $ && /* @__PURE__ */ n(
+          Ee,
           {
-            disabled: l,
-            onClick: he,
-            title: v.label,
-            "aria-label": v.label,
+            disabled: g,
+            onClick: pe,
+            title: $.label,
+            "aria-label": $.label,
             children: /* @__PURE__ */ n(
-              x,
+              w,
               {
                 size: 24,
-                symbol: { type: "Svg", content: v.icon || "browse" }
+                symbol: { type: "Svg", content: $.icon || "browse" }
               }
             )
           }
         ),
-        $ ? /* @__PURE__ */ n(
-          He,
+        L ? /* @__PURE__ */ n(
+          Ke,
           {
             value: e,
             onChange: j,
-            onEnter: S,
-            disabled: l,
-            "aria-label": f,
-            placeholder: f,
+            onEnter: E,
+            disabled: g,
+            "aria-label": b,
+            placeholder: b,
             type: "textarea",
             rows: 1,
-            ref: y
+            ref: v
           }
         ) : /* @__PURE__ */ n(
-          Re,
+          De,
           {
             value: e,
             onChange: j,
-            onEnter: S,
-            disabled: l,
-            "aria-label": f,
-            placeholder: f
+            onEnter: E,
+            disabled: g,
+            "aria-label": b,
+            placeholder: b
           }
         ),
         /* @__PURE__ */ n(
-          ce,
+          he,
           {
             disabled: !1,
-            onClick: S,
-            title: h,
-            "aria-label": h,
+            onClick: E,
+            title: k,
+            "aria-label": k,
             children: /* @__PURE__ */ n(
-              Ke,
+              Pe,
               {
                 size: 22,
                 symbol: { type: "Svg", content: "send" },
@@ -112,11 +122,35 @@ const Ae = ({ className: t }) => {
               }
             )
           }
+        ),
+        /* @__PURE__ */ n(
+          Be,
+          {
+            onKeyDown: (d) => {
+              (d.key === "Enter" || d.keyCode === 13) && $e(d);
+            },
+            children: /* @__PURE__ */ n("a", { href: "", className: "humany-skip-to-latest-message", children: A })
+          }
         )
       ]
     }
   );
-}, He = a(ne)`
+}, Be = a.div`
+  position: absolute;
+  bottom: 80px;
+  width: 100%;
+  text-align: center;
+  a {
+    position: absolute;
+    left: -10000000px;
+  }
+  a:focus {
+    left: 50%;
+    transform: translateX(-50%);
+    ${f};
+    outline-offset: 12px;
+  }
+`, Ke = a(se)`
   resize: none;
   flex: 1;
   flex-shrink: 1;
@@ -137,10 +171,10 @@ const Ae = ({ className: t }) => {
   transition: height 200ms linear;
   outline: none;
   &:focus-visible {
-    ${b};
+    ${f};
     outline-offset: 12px;
   }
-`, Re = a(ne)`
+`, De = a(se)`
   flex: 1;
   border: none;
   background-color: transparent;
@@ -166,7 +200,7 @@ const Ae = ({ className: t }) => {
 }};
     font-style: italic;
   }
-`, ce = a(L)`
+`, he = a(M)`
   flex: 0 0 50px;
   align-self: stretch;
   background-color: transparent;
@@ -176,15 +210,15 @@ const Ae = ({ className: t }) => {
   border: none;
   color: #a6a6a6;
   &:focus-visible {
-    ${b};
+    ${f};
   }
-`, Be = a(ce)`
+`, Ee = a(he)`
   border-right: ${(t) => t.theme.border};
   margin: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
 }} 0;
-`, Oe = a.div`
+`, je = a.div`
   ${(t) => t.grow ? p`
           min-height: 50px;
           max-height: 150px;
@@ -199,15 +233,15 @@ const Ae = ({ className: t }) => {
   return (e = t.theme.colors) == null ? void 0 : e.accent;
 }};
   border-top: ${(t) => t.theme.inputBorder};
-  ${(t) => t["data-has-focus"] && t.isTabbing && b}
+  ${(t) => t["data-has-focus"] && t.isTabbing && f}
   textarea {
     ${(t) => !!t.scrollableCss && t.scrollableCss}
   }
-`, Ke = a(
+`, Pe = a(
   ({
     hasContent: t,
     ...e
-  }) => /* @__PURE__ */ n(x, { ...e })
+  }) => /* @__PURE__ */ n(w, { ...e })
 )`
   line,
   path {
@@ -220,7 +254,7 @@ const Ae = ({ className: t }) => {
   return t.hasContent ? (e = t.theme.colors) == null ? void 0 : e.primary : "#a6a6a6";
 }};
   }
-`, je = a.div`
+`, We = a.div`
   width: ${(t) => t.avatarSize || "32px"};
   height: ${(t) => t.avatarSize || "32px"};
   border-radius: 50%;
@@ -267,7 +301,7 @@ const Ae = ({ className: t }) => {
 }};
     }
   }
-`, De = ze`
+`, qe = Me`
   0% {
     opacity: 0;
   }
@@ -277,7 +311,7 @@ const Ae = ({ className: t }) => {
   100% {
     opacity: 0;
   }
-`, Ee = a.div`
+`, Ue = a.div`
   display: flex;
   justify-content: center;
   > div {
@@ -289,7 +323,7 @@ const Ae = ({ className: t }) => {
   var e;
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
-    animation: ${De} 1s infinite;
+    animation: ${qe} 1s infinite;
   }
   > div:nth-of-type(2) {
     animation-delay: 100ms;
@@ -297,29 +331,29 @@ const Ae = ({ className: t }) => {
   > div:nth-of-type(3) {
     animation-delay: 200ms;
   }
-`, U = a.div`
+`, V = a.div`
   grid-area: content;
   max-width: 100%;
   overflow: hidden;
-`, Pe = a(F)`
+`, Ve = a(X)`
   font-size: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.normal;
 }};
   font-weight: normal;
   margin: 0;
-`, V = a.div`
+`, _ = a.div`
   display: flex;
   ${(t) => t.left && "justify-content: start;"};
   ${(t) => t.center && "justify-content: center;"};
   ${(t) => t.right && "justify-content: end;"};
-`, q = a.div`
+`, F = a.div`
   ${(t) => {
   var e;
   return t.padded && `padding: ${(e = t.theme.sizes) == null ? void 0 : e.medium};`;
 }}
-  ${(t) => !t.user && t.stacked && We(t.stacked, t.theme)}
-    ${(t) => t.user && t.stacked && Ue(t.stacked, t.theme)}
+  ${(t) => !t.user && t.stacked && _e(t.stacked, t.theme)}
+    ${(t) => t.user && t.stacked && Fe(t.stacked, t.theme)}
 
     display: inline-block;
   margin-top: ${(t) => {
@@ -335,7 +369,7 @@ const Ae = ({ className: t }) => {
   }
   max-width: 100%;
   ${(t) => t.fullWidth && "width: 100%;"}
-`, We = (t, e) => {
+`, _e = (t, e) => {
   var o, s;
   const r = p`
     background-color: ${(o = e.colors) == null ? void 0 : o.accent};
@@ -356,7 +390,7 @@ const Ae = ({ className: t }) => {
             border-bottom-left-radius: ${e.borderRadius};
         `}
   ` : r;
-}, Ue = (t, e) => {
+}, Fe = (t, e) => {
   var o, s;
   const r = p`
     background-color: ${(o = e.colors) == null ? void 0 : o.primary};
@@ -376,7 +410,7 @@ const Ae = ({ className: t }) => {
             border-bottom-right-radius: ${e.borderRadius};
         `}
   ` : r;
-}, H = a.div`
+}, O = a.div`
   margin-bottom: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
@@ -384,17 +418,17 @@ const Ae = ({ className: t }) => {
   &:last-child {
     margin-bottom: 0;
   }
-`, C = (t) => {
+`, z = (t) => {
   var e, r;
   return p`
   margin: ${(e = t.theme.sizes) == null ? void 0 : e.medium} 0;
   padding: 0 ${(r = t.theme.sizes) == null ? void 0 : r.medium};
 `;
-}, Ve = a(Te)`
+}, Ye = a(Oe)`
   & button.humany-form-component-button {
     ${(t) => {
   var e, r, o, s;
-  return ((e = t.theme.colors) == null ? void 0 : e.primary) && ((r = t.theme.colors) == null ? void 0 : r.accent) && pe({
+  return ((e = t.theme.colors) == null ? void 0 : e.primary) && ((r = t.theme.colors) == null ? void 0 : r.accent) && xe({
     active: !1,
     primaryColor: (o = t.theme.colors) == null ? void 0 : o.primary,
     secondaryColor: (s = t.theme.colors) == null ? void 0 : s.accent,
@@ -418,18 +452,18 @@ const Ae = ({ className: t }) => {
 }};
     }
   }
-`, qe = a(Y)`
+`, Xe = a(G)`
   white-space: pre-wrap;
   a {
     color: ${(t) => t.theme.colors.link};
     &:focus {
       ${(t) => {
   var e;
-  return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && b;
+  return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && f;
 }};
     }
   }
-`, _e = a(se)`
+`, Ge = a(ce)`
   padding: 0;
   list-style: none;
   margin: 0 -${(t) => {
@@ -442,7 +476,7 @@ const Ae = ({ className: t }) => {
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
 }};
   }
-`, Fe = a.button`
+`, Je = a.button`
   ${(t) => B(t)};
   display: block;
   background-color: ${(t) => {
@@ -452,23 +486,23 @@ const Ae = ({ className: t }) => {
   width: 100%;
   color: #fff;
   &:focus-visible {
-    ${b}
+    ${f}
     background-color: transparent;
   }
-`, Z = Q(
-  ({ boxed: t, className: e, agentData: r }, o) => /* @__PURE__ */ n(U, { ref: o, children: /* @__PURE__ */ n(V, { left: t, center: !t, children: /* @__PURE__ */ n(
-    q,
+`, ne = Z(
+  ({ boxed: t, className: e, agentData: r }, o) => /* @__PURE__ */ n(V, { ref: o, children: /* @__PURE__ */ n(_, { left: t, center: !t, children: /* @__PURE__ */ n(
+    F,
     {
       padded: !!t,
       stacked: t ? "first" : void 0,
-      children: /* @__PURE__ */ m(Ee, { children: [
+      children: /* @__PURE__ */ u(Ue, { children: [
         /* @__PURE__ */ n("div", {}),
         /* @__PURE__ */ n("div", {}),
         /* @__PURE__ */ n("div", {})
       ] })
     }
   ) }) })
-), de = Le.createContext(null), Ye = a.p`
+), ge = Ie.createContext(null), Qe = a.p`
   && {
     font-size: ${(t) => {
   var e;
@@ -483,41 +517,41 @@ const Ae = ({ className: t }) => {
   var e;
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
-`, ee = (t, e) => new Date(t).toLocaleTimeString(e || [], {
+`, re = (t, e) => new Date(t).toLocaleTimeString(e || [], {
   hour: "numeric",
   minute: "2-digit"
 }), R = ({ className: t, name: e, timestamp: r }) => {
-  const o = Ne(de);
+  const o = Te(ge);
   if (!e && !r)
     return null;
   let s = "";
-  return e ? r ? s = `${e}: ${ee(r, o)}` : s = e : r && (s = ee(r, o)), /* @__PURE__ */ n(Ye, { children: s });
-}, me = ({
+  return e ? r ? s = `${e}: ${re(r, o)}` : s = e : r && (s = re(r, o)), /* @__PURE__ */ n(Qe, { children: s });
+}, fe = ({
   className: t,
   children: e,
   sender: r,
   timestamp: o
 }) => {
-  const { avatar: s, name: i } = r, { avatarSize: c } = N();
-  return /* @__PURE__ */ m(
-    Ge,
+  const { avatar: s, name: i } = r, { avatarSize: c } = I();
+  return /* @__PURE__ */ u(
+    Ze,
     {
       hasAvatar: !!s,
-      className: M(
+      className: T(
         t,
         "humany-conversation-agent-message"
       ),
       children: [
-        s && /* @__PURE__ */ n(je, { avatarSize: c, children: typeof s == "string" ? (
+        s && /* @__PURE__ */ n(We, { avatarSize: c, children: typeof s == "string" ? (
           // eslint-disable-next-line jsx-a11y/alt-text
           /* @__PURE__ */ n("img", { src: s })
-        ) : /* @__PURE__ */ n(x, { symbol: s }) }),
+        ) : /* @__PURE__ */ n(w, { symbol: s }) }),
         e,
         /* @__PURE__ */ n(R, { name: i, timestamp: o })
       ]
     }
   );
-}, Ge = a.div`
+}, Ze = a.div`
   display: grid;
   margin-right: 10%;
   width: 90%;
@@ -534,33 +568,33 @@ const Ae = ({ className: t }) => {
             'content'
             'info';
         `};
-`, Je = Q(
+`, et = Z(
   ({ className: t, children: e, timestamp: r, discrete: o, fullWidth: s }, i) => /* @__PURE__ */ n(
-    Qe,
+    tt,
     {
       ref: i,
-      className: M(
+      className: T(
         t,
         "humany-conversation-system-message"
       ),
       fullWidth: s,
-      children: o ? /* @__PURE__ */ m(Xe, { className: "humany-conversation-discrete-message", children: [
+      children: o ? /* @__PURE__ */ u(nt, { className: "humany-conversation-discrete-message", children: [
         e,
         /* @__PURE__ */ n(R, { timestamp: r })
-      ] }) : /* @__PURE__ */ m(z, { children: [
+      ] }) : /* @__PURE__ */ u(N, { children: [
         e,
         /* @__PURE__ */ n(R, { timestamp: r })
       ] })
     }
   )
-), Qe = a.div`
+), tt = a.div`
   ${(t) => t.fullWidth && "width: 100%"};
   padding: 0 ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.large;
 }};
   overflow: auto;
-`, Xe = a.div`
+`, nt = a.div`
   text-align: center;
   word-wrap: break-word;
   font-size: ${(t) => {
@@ -574,12 +608,12 @@ const Ae = ({ className: t }) => {
   > p {
     margin: 0;
   }
-`, Ze = ({ className: t, children: e, timestamp: r }) => {
-  const { userLabel: o = "" } = N();
-  return /* @__PURE__ */ m(
-    et,
+`, rt = ({ className: t, children: e, timestamp: r }) => {
+  const { userLabel: o = "" } = I();
+  return /* @__PURE__ */ u(
+    ot,
     {
-      className: M(
+      className: T(
         t,
         "humany-conversation-user-message"
       ),
@@ -589,26 +623,26 @@ const Ae = ({ className: t }) => {
       ]
     }
   );
-}, et = a.div`
+}, ot = a.div`
   margin-left: 10%;
   width: 90%;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-`, X = (t) => Array.isArray(t) ? t : Object.keys(t).map((e) => ({
+`, ee = (t) => Array.isArray(t) ? t : Object.keys(t).map((e) => ({
   label: t[e],
   actionKey: e
-})), tt = ({ header: t, actions: e, dispatch: r }) => /* @__PURE__ */ n(
-  nt,
+})), st = ({ header: t, actions: e, dispatch: r }) => /* @__PURE__ */ n(
+  at,
   {
     className: "humany-conversation-button-list",
     header: t,
-    items: X(e),
+    items: ee(e),
     renderItem: (o) => {
       var i;
       const s = !!((i = o == null ? void 0 : o.data) != null && i.href);
-      return /* @__PURE__ */ n("li", { children: s ? /* @__PURE__ */ m(
-        rt,
+      return /* @__PURE__ */ n("li", { children: s ? /* @__PURE__ */ u(
+        it,
         {
           onClick: () => {
             r("action", o);
@@ -618,12 +652,12 @@ const Ae = ({ className: t }) => {
           "aria-label": o.label,
           title: o.label,
           children: [
-            /* @__PURE__ */ n(x, { symbol: o.symbol }),
+            /* @__PURE__ */ n(w, { symbol: o.symbol }),
             o.label
           ]
         }
-      ) : /* @__PURE__ */ m(
-        ot,
+      ) : /* @__PURE__ */ u(
+        lt,
         {
           onClick: () => {
             r("action", o);
@@ -631,15 +665,15 @@ const Ae = ({ className: t }) => {
           "aria-label": o.label,
           title: o.label,
           children: [
-            /* @__PURE__ */ n(x, { symbol: o.symbol }),
+            /* @__PURE__ */ n(w, { symbol: o.symbol }),
             o.label
           ]
         }
       ) }, o.actionKey);
     }
   }
-), nt = a(O)`
-  ${K}
+), at = a(K)`
+  ${D}
   > ul {
     display: flex;
     flex-wrap: wrap;
@@ -651,8 +685,8 @@ const Ae = ({ className: t }) => {
       margin: 0;
     }
   }
-  ${C}
-`, rt = a(be)`
+  ${z}
+`, it = a(we)`
   ${B};
 
   display: block;
@@ -669,7 +703,7 @@ const Ae = ({ className: t }) => {
   overflow: hidden;
   text-overflow: ellipsis;
   &:focus-visible {
-    ${b}
+    ${f}
     background-color: transparent;
   }
 
@@ -680,7 +714,7 @@ const Ae = ({ className: t }) => {
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }};
   }
-`, ot = a(L)`
+`, lt = a(M)`
   ${B};
 
   display: block;
@@ -697,7 +731,7 @@ const Ae = ({ className: t }) => {
   overflow: hidden;
   text-overflow: ellipsis;
   &:focus-visible {
-    ${b}
+    ${f}
     background-color: transparent;
   }
 
@@ -708,31 +742,31 @@ const Ae = ({ className: t }) => {
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }};
   }
-`, st = ({ type: t, content: e = {} }) => {
-  const r = $e(t);
-  return !r || !t ? null : /* @__PURE__ */ n(Ie, { fallback: null, children: /* @__PURE__ */ n(r, { ...e }) });
-}, at = ({ body: t }) => /* @__PURE__ */ n(it, { html: t }), it = a(Y)`
-  ${ve}
+`, ct = ({ type: t, content: e = {} }) => {
+  const r = ke(t);
+  return !r || !t ? null : /* @__PURE__ */ n(Ae, { fallback: null, children: /* @__PURE__ */ n(r, { ...e }) });
+}, dt = ({ body: t }) => /* @__PURE__ */ n(mt, { html: t }), mt = a(G)`
+  ${Ce}
   color: inherit;
   white-space: pre-wrap;
-  ${C}
+  ${z}
   a {
     color: ${(t) => t.theme.colors.link};
     &:focus-visible {
-      ${b};
+      ${f};
     }
   }
-`, lt = ({ header: t, actions: e, dispatch: r }) => /* @__PURE__ */ n(
-  ct,
+`, ut = ({ header: t, actions: e, dispatch: r }) => /* @__PURE__ */ n(
+  ht,
   {
     className: "humany-conversation-item-list",
     header: t,
-    items: X(e),
+    items: ee(e),
     renderItem: (o) => {
       var s;
-      return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ m(dt, { children: [
+      return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ u(gt, { children: [
         ((s = o.symbol) == null ? void 0 : s.content) && /* @__PURE__ */ n("div", { className: "item-icon", children: /* @__PURE__ */ n(
-          x,
+          w,
           {
             size: 22,
             symbol: {
@@ -741,9 +775,9 @@ const Ae = ({ className: t }) => {
             }
           }
         ) }),
-        /* @__PURE__ */ m("div", { className: "item-body", children: [
+        /* @__PURE__ */ u("div", { className: "item-body", children: [
           /* @__PURE__ */ n(
-            L,
+            M,
             {
               onClick: () => {
                 r("action", o);
@@ -758,11 +792,11 @@ const Ae = ({ className: t }) => {
       ] }) }, o.actionKey);
     }
   }
-), ct = a(O)`
-  ${K}
+), ht = a(K)`
+  ${D}
 
   > .humany-paragraph {
-    ${C}
+    ${z}
     margin-bottom: 0;
 
     h1 {
@@ -770,7 +804,7 @@ const Ae = ({ className: t }) => {
     }
   }
 
-  ${(t) => G(t)(
+  ${(t) => J(t)(
   "h1",
   p`
         white-space: normal;
@@ -796,13 +830,13 @@ const Ae = ({ className: t }) => {
       border-bottom: none;
     }
   }
-`, dt = a.div`
+`, gt = a.div`
   display: flex;
   gap: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.medium;
 }};
-  ${C}
+  ${z}
 
   .item-icon {
   }
@@ -835,7 +869,7 @@ const Ae = ({ className: t }) => {
     margin: 0;
 
     &:focus-visible {
-      ${b}
+      ${f}
       span {
         color: ${(t) => {
   var e;
@@ -845,32 +879,32 @@ const Ae = ({ className: t }) => {
       }
     }
   }
-`, mt = ({ header: t, actions: e, dispatch: r }) => {
-  const o = xe(e), s = ie(), i = re();
-  return J(() => {
+`, ft = ({ header: t, actions: e, dispatch: r }) => {
+  const o = Se(e), s = me(), i = ae();
+  return Q(() => {
     if (o && Array.isArray(e) && Array.isArray(o) && o.length < e.length && s.current) {
       const c = s.current.querySelectorAll(
         ".humany-conversation-link-list > ul > li"
-      ), d = c[o.length];
+      ), m = c[o.length];
       if (c.length === e.length && o.length) {
-        const u = c[o.length - 1];
-        if (u) {
-          const f = u.querySelector(
+        const h = c[o.length - 1];
+        if (h) {
+          const y = h.querySelector(
             ".humany-button"
           );
-          f && f.focus();
+          y && y.focus();
         }
       } else
-        d && new MutationObserver((f, w) => {
-          f.forEach((l) => {
+        m && new MutationObserver((y, b) => {
+          y.forEach((l) => {
             if (l.addedNodes) {
-              const h = Array.from(
+              const g = Array.from(
                 l.addedNodes
-              ).find(($) => $.tagName === "BUTTON");
-              h && Se(s.current, document.activeElement) && (i && h.focus(), w.disconnect());
+              ).find((k) => k.tagName === "BUTTON");
+              g && Ne(s.current, document.activeElement) && (i && g.focus(), b.disconnect());
             }
           });
-        }).observe(d, {
+        }).observe(m, {
           attributes: !1,
           characterData: !1,
           childList: !0,
@@ -880,14 +914,14 @@ const Ae = ({ className: t }) => {
         });
     }
   }), /* @__PURE__ */ n(
-    ut,
+    yt,
     {
       ref: s,
       className: "humany-conversation-link-list",
       header: t,
-      items: X(e),
-      renderItem: (c) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ m(
-        ht,
+      items: ee(e),
+      renderItem: (c) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ u(
+        pt,
         {
           help: c.actionKey === "help",
           onClick: () => {
@@ -898,7 +932,7 @@ const Ae = ({ className: t }) => {
           children: [
             c.label,
             c.actionKey === "help" && /* @__PURE__ */ n(
-              x,
+              w,
               {
                 size: 14,
                 symbol: {
@@ -912,11 +946,11 @@ const Ae = ({ className: t }) => {
       ) }, c.actionKey)
     }
   );
-}, ut = a(O)`
-  ${K}
-  ${C}
+}, yt = a(K)`
+  ${D}
+  ${z}
 
-    ${(t) => G(t)(
+    ${(t) => J(t)(
   "h1",
   p`
         white-space: normal;
@@ -934,7 +968,7 @@ const Ae = ({ className: t }) => {
       margin: 0;
     }
   }
-`, ht = a(L)`
+`, pt = a(M)`
   display: block;
   text-align: left;
   font-weight: 300;
@@ -960,7 +994,7 @@ const Ae = ({ className: t }) => {
 }}
 
   &:focus-visible {
-    ${b}
+    ${f}
     span {
       color: ${(t) => {
   var e;
@@ -969,18 +1003,18 @@ const Ae = ({ className: t }) => {
       text-decoration: underline;
     }
   }
-`, gt = () => /* @__PURE__ */ n(ft, { className: "humany-conversation-separator" }), ft = a.div`
+`, bt = () => /* @__PURE__ */ n($t, { className: "humany-conversation-separator" }), $t = a.div`
   ${(t) => t.theme.border && `border-bottom: ${t.theme.border};`}
   width: 100%;
-`, yt = ({ text: t }) => /* @__PURE__ */ n(pt, { className: "humany-conversation-text", variant: "span", children: t }), pt = a(F)`
-  ${C}
-`, bt = ({
+`, vt = ({ text: t }) => /* @__PURE__ */ n(xt, { className: "humany-conversation-text", variant: "span", children: t }), xt = a(X)`
+  ${z}
+`, wt = ({
   header: t = "Video call",
   acceptLabel: e = "Accept",
   declineLabel: r = "Decline",
   dispatch: o
 }) => {
-  const s = Me(() => [
+  const s = He(() => [
     {
       label: e,
       actionKey: "accept-video-call",
@@ -999,7 +1033,7 @@ const Ae = ({ className: t }) => {
     }
   ], [e, r]);
   return /* @__PURE__ */ n(
-    $t,
+    kt,
     {
       className: "humany-conversation-video-request",
       header: t,
@@ -1007,7 +1041,7 @@ const Ae = ({ className: t }) => {
       renderItem: (i) => {
         const c = i.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
         return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
-          vt,
+          Ct,
           {
             onClick: () => {
               o("action", i);
@@ -1015,14 +1049,14 @@ const Ae = ({ className: t }) => {
             "aria-label": i.label,
             title: i.label,
             bgColor: c,
-            children: /* @__PURE__ */ n(x, { symbol: i.symbol, size: 25 })
+            children: /* @__PURE__ */ n(w, { symbol: i.symbol, size: 25 })
           }
         ) }, i.actionKey);
       }
     }
   );
-}, $t = a(O)`
-  ${(t) => K(t)}
+}, kt = a(K)`
+  ${(t) => D(t)}
   > ul {
     display: flex;
     flex-wrap: wrap;
@@ -1034,8 +1068,8 @@ const Ae = ({ className: t }) => {
       margin: 0;
     }
   }
-  ${(t) => C(t)}
-`, vt = a(L)`
+  ${(t) => z(t)}
+`, Ct = a(M)`
   ${B};
 
   background-color: ${(t) => t.bgColor};
@@ -1048,7 +1082,7 @@ const Ae = ({ className: t }) => {
   border-radius: 100%;
 
   &:focus-visible {
-    ${b}
+    ${f}
     background-color: transparent;
 
     i,
@@ -1075,84 +1109,84 @@ const Ae = ({ className: t }) => {
       stroke: #fff;
     }
   }
-`, xt = ([t, e]) => ({ type: t, content: e }), wt = ({ items: t, dispatch: e }) => /* @__PURE__ */ n(
-  kt,
+`, St = ([t, e]) => ({ type: t, content: e }), zt = ({ items: t, dispatch: e }) => /* @__PURE__ */ n(
+  Lt,
   {
     role: "none",
     className: "humany-message-list",
-    items: t.map(xt),
+    items: t.map(St),
     renderLi: !0,
     renderItem: (r) => {
       switch (r.type) {
-        case k.Text:
-          return /* @__PURE__ */ n(yt, { text: r.content });
-        case k.HTML:
-          return /* @__PURE__ */ n(at, { ...r.content });
-        case k.Separator:
-          return /* @__PURE__ */ n(gt, { ...r.content });
-        case k.ItemList:
-          return /* @__PURE__ */ n(lt, { ...r.content, dispatch: e });
-        case k.LinkList:
-          return /* @__PURE__ */ n(mt, { ...r.content, dispatch: e });
-        case k.ButtonList:
-          return /* @__PURE__ */ n(tt, { ...r.content, dispatch: e });
-        case k.VideoRequest:
-          return /* @__PURE__ */ n(bt, { ...r.content, dispatch: e });
+        case S.Text:
+          return /* @__PURE__ */ n(vt, { text: r.content });
+        case S.HTML:
+          return /* @__PURE__ */ n(dt, { ...r.content });
+        case S.Separator:
+          return /* @__PURE__ */ n(bt, { ...r.content });
+        case S.ItemList:
+          return /* @__PURE__ */ n(ut, { ...r.content, dispatch: e });
+        case S.LinkList:
+          return /* @__PURE__ */ n(ft, { ...r.content, dispatch: e });
+        case S.ButtonList:
+          return /* @__PURE__ */ n(st, { ...r.content, dispatch: e });
+        case S.VideoRequest:
+          return /* @__PURE__ */ n(wt, { ...r.content, dispatch: e });
         default:
-          return /* @__PURE__ */ n(st, { type: r.type, content: r.content });
+          return /* @__PURE__ */ n(ct, { type: r.type, content: r.content });
       }
     }
   }
-), kt = a(se)`
-  ${we}
+), Lt = a(ce)`
+  ${ze}
 
   > li {
     margin: 0;
   }
-`, Ct = Q(
+`, Nt = Z(
   ({ className: t, timestamp: e, sender: r, type: o, content: s }, i) => {
-    const c = le(
+    const c = ue(
       (l) => {
-        let h = "first";
-        return s.length > 1 && (h = l === 0 ? "first" : l + 1 === s.length ? "last" : "middle"), h;
+        let g = "first";
+        return s.length > 1 && (g = l === 0 ? "first" : l + 1 === s.length ? "last" : "middle"), g;
       },
       [s]
-    ), { userLabel: d = "" } = N(), u = () => /* @__PURE__ */ n(z, { children: s.map((l) => {
-      const { key: h, body: $, title: v, form: T, actions: y } = l, S = !!$ && !v && !T && !y;
+    ), { userLabel: m = "" } = I(), h = () => /* @__PURE__ */ n(N, { children: s.map((l) => {
+      const { key: g, body: k, title: L, form: $, actions: A } = l, H = !!k && !L && !$ && !A;
       return /* @__PURE__ */ n(
-        Je,
+        et,
         {
           className: t,
-          discrete: S,
+          discrete: H,
           ref: i,
           timestamp: e,
-          fullWidth: !!T || !!y,
-          children: S && $ ? /* @__PURE__ */ n(Y, { html: $ }) : /* @__PURE__ */ n(P, { isSystem: !0, content: l })
+          fullWidth: !!$ || !!A,
+          children: H && k ? /* @__PURE__ */ n(G, { html: k }) : /* @__PURE__ */ n(q, { isSystem: !0, content: l })
         },
-        h
+        g
       );
-    }) }), f = () => /* @__PURE__ */ m(z, { children: [
-      /* @__PURE__ */ m(te, { className: "humany-sr-only", children: [
+    }) }), y = () => /* @__PURE__ */ u(N, { children: [
+      /* @__PURE__ */ u(oe, { className: "humany-sr-only", children: [
         r == null ? void 0 : r.name,
         ":"
       ] }),
       /* @__PURE__ */ n(
-        me,
+        fe,
         {
           sender: r,
           timestamp: e,
           className: t,
-          children: /* @__PURE__ */ n(U, { className: "humany-message-content-bundle", children: s.map((l, h) => /* @__PURE__ */ n(
-            V,
+          children: /* @__PURE__ */ n(V, { className: "humany-message-content-bundle", children: s.map((l, g) => /* @__PURE__ */ n(
+            _,
             {
               className: "humany-message-container",
               left: !0,
               ref: i,
               children: /* @__PURE__ */ n(
-                P,
+                q,
                 {
                   content: l,
-                  stacked: c(h)
+                  stacked: c(g)
                 }
               )
             },
@@ -1160,23 +1194,23 @@ const Ae = ({ className: t }) => {
           )) })
         }
       )
-    ] }), w = () => /* @__PURE__ */ m(z, { children: [
-      /* @__PURE__ */ m(te, { className: "humany-sr-only", children: [
-        d,
+    ] }), b = () => /* @__PURE__ */ u(N, { children: [
+      /* @__PURE__ */ u(oe, { className: "humany-sr-only", children: [
+        m,
         ":"
       ] }),
-      /* @__PURE__ */ n(Ze, { timestamp: e, className: t, children: /* @__PURE__ */ n(U, { className: "humany-message-content-bundle", children: s.map((l, h) => /* @__PURE__ */ n(
-        V,
+      /* @__PURE__ */ n(rt, { timestamp: e, className: t, children: /* @__PURE__ */ n(V, { className: "humany-message-content-bundle", children: s.map((l, g) => /* @__PURE__ */ n(
+        _,
         {
           className: "humany-message-container",
           right: !0,
           ref: i,
           children: /* @__PURE__ */ n(
-            P,
+            q,
             {
               isUser: !0,
               content: l,
-              stacked: c(h)
+              stacked: c(g)
             }
           )
         },
@@ -1184,61 +1218,61 @@ const Ae = ({ className: t }) => {
       )) }) })
     ] });
     switch (o) {
-      case E.System:
-        return u();
-      case E.Agent:
-        return f();
-      case E.User:
-        return w();
+      case W.System:
+        return h();
+      case W.Agent:
+        return y();
+      case W.User:
+        return b();
       default:
         return null;
     }
   }
-), P = ({
+), q = ({
   content: t,
   isUser: e,
   isSystem: r,
   stacked: o
 }) => {
-  const s = _(), { title: i, body: c, actions: d, form: u, items: f } = t;
-  return f ? /* @__PURE__ */ n(
-    q,
+  const s = Y(), { title: i, body: c, actions: m, form: h, items: y } = t;
+  return y ? /* @__PURE__ */ n(
+    F,
     {
       className: "humany-message-content",
       user: !!e,
       stacked: o,
-      children: /* @__PURE__ */ n(wt, { items: f, dispatch: s })
+      children: /* @__PURE__ */ n(zt, { items: y, dispatch: s })
     }
-  ) : /* @__PURE__ */ m(
-    q,
+  ) : /* @__PURE__ */ u(
+    F,
     {
       className: "humany-message-content",
       padded: !r,
       user: !!e,
       stacked: o,
-      fullWidth: !!u || !!d,
+      fullWidth: !!h || !!m,
       children: [
-        i && /* @__PURE__ */ n(H, { children: /* @__PURE__ */ n(Pe, { variant: "h2", children: i }) }),
-        c && /* @__PURE__ */ n(H, { children: /* @__PURE__ */ n(qe, { html: c }) }),
-        u && /* @__PURE__ */ n(H, { children: /* @__PURE__ */ n(
-          Ve,
+        i && /* @__PURE__ */ n(O, { children: /* @__PURE__ */ n(Ve, { variant: "h2", children: i }) }),
+        c && /* @__PURE__ */ n(O, { children: /* @__PURE__ */ n(Xe, { html: c }) }),
+        h && /* @__PURE__ */ n(O, { children: /* @__PURE__ */ n(
+          Ye,
           {
-            ...u,
-            onChange: (l, h) => {
+            ...h,
+            onChange: (l, g) => {
               s("form", {
-                data: h,
-                formKey: u.schema.id,
+                data: g,
+                formKey: h.schema.id,
                 actionKey: l
               });
             }
           }
         ) }),
-        d && /* @__PURE__ */ n(H, { children: /* @__PURE__ */ n(
-          _e,
+        m && /* @__PURE__ */ n(O, { children: /* @__PURE__ */ n(
+          Ge,
           {
-            items: Object.keys(d).map((l) => ({ label: d[l], actionKey: l })),
+            items: Object.keys(m).map((l) => ({ label: m[l], actionKey: l })),
             renderItem: (l) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
-              Fe,
+              Je,
               {
                 onClick: () => {
                   s("action", l.actionKey);
@@ -1251,59 +1285,59 @@ const Ae = ({ className: t }) => {
       ]
     }
   );
-}, te = a.div`
+}, oe = a.div`
   position: absolute;
   left: -10000px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
-`, ue = () => {
-  const t = le((d) => {
-    d && setTimeout(() => {
-      d.scrollIntoView({
+`, ye = () => {
+  const t = ue((m) => {
+    m && setTimeout(() => {
+      m.scrollIntoView({
         block: "start",
         behavior: "smooth"
       });
     }, 250);
-  }, []), [e, r] = oe(!0), {
+  }, []), [e, r] = le(!0), {
     messages: o,
     loading: s,
     typingActors: i = []
-  } = N(), c = () => i && i.length ? i.map((d, u) => /* @__PURE__ */ n(
-    W,
+  } = I(), c = () => i && i.length ? i.map((m, h) => /* @__PURE__ */ n(
+    U,
     {
-      id: `typing_${d.name}`,
-      children: /* @__PURE__ */ n(me, { timestamp: Date.now(), sender: d, children: /* @__PURE__ */ n(
-        Z,
+      id: `typing_${m.name}`,
+      children: /* @__PURE__ */ n(fe, { timestamp: Date.now(), sender: m, children: /* @__PURE__ */ n(
+        ne,
         {
           boxed: !0,
           ref: t
         }
       ) })
     },
-    `typing_${d.name}`
+    `typing_${m.name}`
   )) : null;
-  return /* @__PURE__ */ m(z, { children: [
-    /* @__PURE__ */ m(St, { tabIndex: 0, scrollableCss: e, ref: r, children: [
-      o && o.length ? o.map((d, u) => {
-        const { type: f, timestamp: w, sender: l, content: h } = d;
+  return /* @__PURE__ */ u(N, { children: [
+    /* @__PURE__ */ u(Mt, { tabIndex: 0, scrollableCss: e, ref: r, children: [
+      o && o.length ? o.map((m, h) => {
+        const { type: y, timestamp: b, sender: l, content: g } = m;
         return /* @__PURE__ */ n(
-          W,
+          U,
           {
             className: "humany-conversation-entry",
             tabIndex: -1,
-            children: /* @__PURE__ */ n(Ct, { ...d, ref: t })
+            children: /* @__PURE__ */ n(Nt, { ...m, ref: t })
           },
-          `${f}_${l == null ? void 0 : l.name}_${w}_${h[0].key}`
+          `${y}_${l == null ? void 0 : l.name}_${b}_${g[0].key}`
         );
       }) : null,
       c(),
-      s && /* @__PURE__ */ n(W, { children: /* @__PURE__ */ n(Z, { ref: t }) })
+      s && /* @__PURE__ */ n(U, { children: /* @__PURE__ */ n(ne, { ref: t }) })
     ] }),
-    /* @__PURE__ */ n(Ae, {})
+    /* @__PURE__ */ n(Re, {})
   ] });
-}, St = a.div`
+}, Mt = a.div`
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1314,9 +1348,9 @@ const Ae = ({ className: t }) => {
 }};
   ${(t) => !!t.scrollableCss && t.scrollableCss};
   &:focus-visible {
-    ${(t) => b(t)};
+    ${(t) => f(t)};
   }
-`, W = a.div`
+`, U = a.div`
   margin: 0;
   margin-bottom: ${(t) => {
   var e;
@@ -1348,44 +1382,44 @@ const Ae = ({ className: t }) => {
   h1 {
     font-weight: normal;
   }
-  ${(t) => G(t)(
+  ${(t) => J(t)(
   "h1",
   p`
         font-weight: normal;
       `
 )}
-`, zt = ({ dispatch: t }) => {
-  const e = ie(null);
-  return J(() => {
+`, It = ({ dispatch: t }) => {
+  const e = me(null);
+  return Q(() => {
     e.current && e.current.parentNode && t("overlay-mounted", e.current);
   }, [e]), /* @__PURE__ */ n(
-    ae,
+    de,
     {
       portalId: "humany-conversation-overlay-portal",
       className: "humany-conversation-overlay-outlet",
       ref: e
     }
   );
-}, Lt = ({
+}, Tt = ({
   dispatch: t,
   header: e,
   buttonLabel: r
-}) => /* @__PURE__ */ m(
-  Nt,
+}) => /* @__PURE__ */ u(
+  At,
   {
     portalId: "humany-conversation-portal",
     className: "humany-conversation-outlet",
     children: [
-      /* @__PURE__ */ m(It, { className: "humany-conversation-outlet-head", children: [
+      /* @__PURE__ */ u(Ht, { className: "humany-conversation-outlet-head", children: [
         /* @__PURE__ */ n(
-          Tt,
+          Rt,
           {
             className: "humany-conversation-outlet-head-button",
             "aria-label": r,
             title: r,
             onClick: () => t("hide-overlay-conversation"),
             children: /* @__PURE__ */ n(
-              x,
+              w,
               {
                 symbol: {
                   type: "Svg",
@@ -1397,7 +1431,7 @@ const Ae = ({ className: t }) => {
           }
         ),
         e && /* @__PURE__ */ n(
-          Mt,
+          Ot,
           {
             className: "humany-conversation-outlet-header",
             variant: "h1",
@@ -1405,10 +1439,10 @@ const Ae = ({ className: t }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ n(ue, {})
+      /* @__PURE__ */ n(ye, {})
     ]
   }
-), Nt = a(ae)`
+), At = a(de)`
   z-index: 11;
   top: auto;
   height: 65%;
@@ -1423,7 +1457,7 @@ const Ae = ({ className: t }) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.large;
 }};
-`, It = a.div`
+`, Ht = a.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -1437,7 +1471,7 @@ const Ae = ({ className: t }) => {
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
 }};
   ${(t) => t.theme.border && `border-bottom: ${t.theme.border};`}
-`, Mt = a(F)`
+`, Ot = a(X)`
   font-size: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.medium;
@@ -1447,7 +1481,7 @@ const Ae = ({ className: t }) => {
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
   margin: 0;
-`, Tt = a(L)`
+`, Rt = a(M)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1461,7 +1495,7 @@ const Ae = ({ className: t }) => {
   ${(t) => t.theme.borderRadius && `border-radius: ${t.theme.borderRadius};`}
 
   &:focus-visible {
-    ${b};
+    ${f};
   }
 
   svg line {
@@ -1470,34 +1504,34 @@ const Ae = ({ className: t }) => {
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
   }
-`, Vt = ({ className: t, ...e }) => {
+`, Yt = ({ className: t, ...e }) => {
   const {
     overlay: r,
     overlayConversationHeader: o,
     overlayConversationCloseLabel: s,
     conversationControllerId: i
-  } = N(), c = _(), u = ke().get("$settings");
+  } = I(), c = Y(), h = ie().get("$settings");
   return /* @__PURE__ */ n(
-    Ce.Provider,
+    Le.Provider,
     {
       value: i ? { id: i } : null,
-      children: /* @__PURE__ */ m(de.Provider, { value: u == null ? void 0 : u.language, children: [
+      children: /* @__PURE__ */ u(ge.Provider, { value: h == null ? void 0 : h.language, children: [
         /* @__PURE__ */ n(
-          At,
+          Bt,
           {
             "aria-live": "assertive",
             ...e,
-            className: M(
+            className: T(
               t,
               "humany-conversation-component"
             ),
-            children: /* @__PURE__ */ n(ue, {})
+            children: /* @__PURE__ */ n(ye, {})
           }
         ),
-        r && /* @__PURE__ */ m(z, { children: [
-          /* @__PURE__ */ n(zt, { dispatch: c }),
+        r && /* @__PURE__ */ u(N, { children: [
+          /* @__PURE__ */ n(It, { dispatch: c }),
           r.conversation && /* @__PURE__ */ n(
-            Lt,
+            Tt,
             {
               dispatch: c,
               header: o,
@@ -1508,7 +1542,7 @@ const Ae = ({ className: t }) => {
       ] })
     }
   );
-}, At = a.div`
+}, Bt = a.div`
   position: absolute;
   right: 0;
   left: 0;
@@ -1519,5 +1553,5 @@ const Ae = ({ className: t }) => {
   flex-direction: column;
 `;
 export {
-  Vt as default
+  Yt as default
 };