@telia-ace/widget-conversation 1.1.5 → 1.1.6

package/{conversation-8fab4c79.mjs → conversation-8295aeca.mjs}

@@ -1,110 +1,114 @@
-import { jsx as n, jsxs as u, Fragment as L } from "react/jsx-runtime";
-import a from "@emotion/styled";
-import { Input as ne, borderTabStyle as p, Button as M, SymbolBadge as x, useIsTabbing as re, useDispatch as _, useProperties as C, useScroll as oe, Typography as F, invertedHoverButton as be, Html as Y, List as se, buttonCss as R, ItemList as B, itemList as K, Link as $e, useComponent as ve, genericHtml as xe, headingElement as X, usePrevious as ke, list as we, useContainer as ae, WidgetOverlayOutlet as ie, ConversationContext as Ce } from "@telia-ace/widget-ui";
-import { appendClassNames as H, htmlParentContains as Se } from "@telia-ace/widget-utilities";
-import { css as b, keyframes as ze } from "@emotion/react";
-import Le, { useState as D, useEffect as G, forwardRef as J, useContext as Ne, Suspense as Me, useRef as le, useMemo as Ie, useCallback as ce } from "react";
-import { FormComponent as He } from "@telia-ace/widget-forms";
-import { ConversationMessageListItemType as w, ConversationMessageType as j } from "./index.mjs";
+import { jsx as n, jsxs as u, Fragment as N } from "react/jsx-runtime";
+import i from "@emotion/styled";
+import { Input as oe, borderTabStyle as f, Button as I, SymbolBadge as k, useIsTabbing as se, useDispatch as Y, useProperties as C, useScroll as ae, useContainer as T, Typography as X, invertedHoverButton as $e, Html as G, List as ie, buttonCss as B, ItemList as K, itemList as E, Link as ve, useComponent as xe, genericHtml as ke, headingElement as J, usePrevious as we, list as Ce, WidgetOverlayOutlet as le, ConversationContext as Se } from "@telia-ace/widget-ui";
+import { appendClassNames as A, htmlParentContains as ze } from "@telia-ace/widget-utilities";
+import { css as b, keyframes as Le } from "@emotion/react";
+import Ne, { useState as P, useEffect as Q, forwardRef as Z, useContext as Me, Suspense as Ie, useRef as ce, useMemo as He, useCallback as de } from "react";
+import { FormComponent as Te } from "@telia-ace/widget-forms";
+import { ConversationMessageListItemType as w, ConversationMessageType as W } from "./index.mjs";
 import "@telia-ace/widget-core";
 import "@telia-ace/widget-services";
 import "@telia-ace/widget-plugins";
-const Te = ({ className: t }) => {
-  const [e, o] = D(""), [r, s] = D(0), [i, c] = D(0), d = re(), m = _(), {
-    inputPlaceholder: f = "Type your message",
-    inputHidden: k = !1,
+const Ae = ({ className: t }) => {
+  const [e, r] = P(""), [o, s] = P(0), [a, m] = P(0), d = se(), c = Y(), {
+    inputPlaceholder: p = "Type your message",
+    inputHidden: x = !1,
     inputDisabled: l = !1,
     sendButtonLabel: h = "Send message",
-    inputMultiline: $ = !0,
-    secondaryAction: v
-  } = C(), [T, y] = oe(!0);
-  G(() => {
+    inputMultiline: v = !0,
+    secondaryAction: $
+  } = C(), [z, y] = ae(!0), O = T();
+  Q(() => {
     if (y.current) {
-      const { lineHeight: g, maxHeight: A } = getComputedStyle(y.current);
+      const { lineHeight: g, maxHeight: L } = getComputedStyle(y.current);
       if (g && g.indexOf("px") > -1) {
-        const I = g.split("px"), pe = parseInt(I[0], 10);
-        s(pe);
-        const ye = A.split("px");
-        c(parseInt(ye[0], 10));
+        const H = g.split("px"), ye = parseInt(H[0], 10);
+        s(ye);
+        const be = L.split("px");
+        m(parseInt(be[0], 10));
       }
     }
   }, [y.current]);
-  const z = (g) => {
-    !g.shiftKey || !$ ? (g.preventDefault(), e && e.length > 0 && (m("user-submit", { text: e }), o(""), E(""))) : e.length < 1 && g.preventDefault();
-  }, ge = (g) => {
-    v && (g.preventDefault(), m("action", {
-      actionKey: v.action,
-      ...v
-    }));
+  const D = (g) => {
+    !g.shiftKey || !v ? (g.preventDefault(), e && e.length > 0 && (c("user-submit", { text: e }), r(""), j(""))) : e.length < 1 && g.preventDefault();
   }, fe = (g) => {
-    if ($ && y.current) {
-      const A = y.current.scrollHeight;
-      if (A > r) {
+    if (!$)
+      return;
+    g.preventDefault(), c("action", {
+      actionKey: $.action,
+      ...$
+    });
+    const { events: L } = O.get("$widget");
+    L.dispatch("tracking:secondary-clicked", {});
+  }, pe = (g) => {
+    if (v && y.current) {
+      const L = y.current.scrollHeight;
+      if (L > o) {
         y.current.style.height = "auto";
-        let I = A;
-        g.length < 1 && (I = r), y.current.style.height = `${I}px`, I >= i ? y.current.style.overflowY = "scroll" : y.current.style.overflowY = "hidden";
+        let H = L;
+        g.length < 1 && (H = o), y.current.style.height = `${H}px`, H >= a ? y.current.style.overflowY = "scroll" : y.current.style.overflowY = "hidden";
       }
     }
-  }, E = (g) => {
-    fe(g), o(g), g && g.length > 0 && m("user-typing", { textLength: g.length });
+  }, j = (g) => {
+    pe(g), r(g), g && g.length > 0 && c("user-typing", { textLength: g.length });
   };
-  return k ? null : /* @__PURE__ */ u(
-    Be,
+  return x ? null : /* @__PURE__ */ u(
+    Ke,
     {
-      grow: $,
-      className: H("humany-conversation-input", t),
-      scrollableCss: T,
+      grow: v,
+      className: A("humany-conversation-input", t),
+      scrollableCss: z,
       isTabbing: d,
       children: [
-        v && /* @__PURE__ */ n(
-          Re,
+        $ && /* @__PURE__ */ n(
+          Be,
           {
             disabled: l,
-            onClick: ge,
-            title: v.label,
-            "aria-label": v.label,
+            onClick: fe,
+            title: $.label,
+            "aria-label": $.label,
             children: /* @__PURE__ */ n(
-              x,
+              k,
               {
                 size: 24,
-                symbol: { type: "Svg", content: v.icon || "browse" }
+                symbol: { type: "Svg", content: $.icon || "browse" }
               }
             )
           }
         ),
-        $ ? /* @__PURE__ */ n(
-          Ae,
+        v ? /* @__PURE__ */ n(
+          Oe,
           {
             value: e,
-            onChange: E,
-            onEnter: z,
+            onChange: j,
+            onEnter: D,
             disabled: l,
-            "aria-label": f,
-            placeholder: f,
+            "aria-label": p,
+            placeholder: p,
             type: "textarea",
             rows: 1,
             ref: y
           }
         ) : /* @__PURE__ */ n(
-          Oe,
+          Re,
           {
             value: e,
-            onChange: E,
-            onEnter: z,
+            onChange: j,
+            onEnter: D,
             disabled: l,
-            "aria-label": f,
-            placeholder: f
+            "aria-label": p,
+            placeholder: p
           }
         ),
         /* @__PURE__ */ n(
-          de,
+          me,
           {
             disabled: !1,
-            onClick: z,
+            onClick: D,
             title: h,
             "aria-label": h,
             children: /* @__PURE__ */ n(
-              Ke,
+              Ee,
               {
                 size: 22,
                 symbol: { type: "Svg", content: "send" },
@@ -116,7 +120,7 @@ const Te = ({ className: t }) => {
       ]
     }
   );
-}, Ae = a(ne)`
+}, Oe = i(oe)`
   resize: none;
   flex: 1;
   flex-shrink: 1;
@@ -137,10 +141,10 @@ const Te = ({ className: t }) => {
   transition: height 200ms linear;
   outline: none;
   &:focus-visible {
-    ${p};
+    ${f};
     outline-offset: 12px;
   }
-`, Oe = a(ne)`
+`, Re = i(oe)`
   flex: 1;
   border: none;
   background-color: transparent;
@@ -166,7 +170,7 @@ const Te = ({ className: t }) => {
 }};
     font-style: italic;
   }
-`, de = a(M)`
+`, me = i(I)`
   flex: 0 0 50px;
   align-self: stretch;
   background-color: transparent;
@@ -176,15 +180,15 @@ const Te = ({ className: t }) => {
   border: none;
   color: #a6a6a6;
   &:focus-visible {
-    ${p};
+    ${f};
   }
-`, Re = a(de)`
+`, Be = i(me)`
   border-right: ${(t) => t.theme.border};
   margin: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
 }} 0;
-`, Be = a.div`
+`, Ke = i.div`
   ${(t) => t.grow ? b`
           min-height: 50px;
           max-height: 150px;
@@ -199,15 +203,15 @@ const Te = ({ 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 && p}
+  ${(t) => t["data-has-focus"] && t.isTabbing && f}
   textarea {
     ${(t) => !!t.scrollableCss && t.scrollableCss}
   }
-`, Ke = a(
+`, Ee = i(
   ({
     hasContent: t,
     ...e
-  }) => /* @__PURE__ */ n(x, { ...e })
+  }) => /* @__PURE__ */ n(k, { ...e })
 )`
   line,
   path {
@@ -220,7 +224,7 @@ const Te = ({ className: t }) => {
   return t.hasContent ? (e = t.theme.colors) == null ? void 0 : e.primary : "#a6a6a6";
 }};
   }
-`, Ee = a.div`
+`, De = i.div`
   width: ${(t) => t.avatarSize || "32px"};
   height: ${(t) => t.avatarSize || "32px"};
   border-radius: 50%;
@@ -267,7 +271,7 @@ const Te = ({ className: t }) => {
 }};
     }
   }
-`, De = ze`
+`, je = Le`
   0% {
     opacity: 0;
   }
@@ -277,7 +281,7 @@ const Te = ({ className: t }) => {
   100% {
     opacity: 0;
   }
-`, je = a.div`
+`, Pe = i.div`
   display: flex;
   justify-content: center;
   > div {
@@ -289,7 +293,7 @@ const Te = ({ className: t }) => {
   var e;
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
-    animation: ${De} 1s infinite;
+    animation: ${je} 1s infinite;
   }
   > div:nth-of-type(2) {
     animation-delay: 100ms;
@@ -297,29 +301,29 @@ const Te = ({ className: t }) => {
   > div:nth-of-type(3) {
     animation-delay: 200ms;
   }
-`, q = a.div`
+`, V = i.div`
   grid-area: content;
   max-width: 100%;
   overflow: hidden;
-`, Pe = a(F)`
+`, We = i(X)`
   font-size: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.normal;
 }};
   font-weight: normal;
   margin: 0;
-`, U = a.div`
+`, _ = i.div`
   display: flex;
   ${(t) => t.left && "justify-content: start;"};
   ${(t) => t.center && "justify-content: center;"};
   ${(t) => t.right && "justify-content: end;"};
-`, V = a.div`
+`, F = i.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 && qe(t.stacked, t.theme)}
+  ${(t) => !t.user && t.stacked && qe(t.stacked, t.theme)}
+    ${(t) => t.user && t.stacked && Ue(t.stacked, t.theme)}
 
     display: inline-block;
   margin-top: ${(t) => {
@@ -335,15 +339,15 @@ const Te = ({ className: t }) => {
   }
   max-width: 100%;
   ${(t) => t.fullWidth && "width: 100%;"}
-`, We = (t, e) => {
-  var r, s;
-  const o = b`
-    background-color: ${(r = e.colors) == null ? void 0 : r.accent};
+`, qe = (t, e) => {
+  var o, s;
+  const r = b`
+    background-color: ${(o = e.colors) == null ? void 0 : o.accent};
     color: ${(s = e.colors) == null ? void 0 : s.text};
     ${e.border && `border: ${e.border};`};
   `;
   return e.borderRadius ? b`
-    ${o}
+    ${r}
 
     border-top-right-radius: ${e.borderRadius};
     border-bottom-right-radius: ${e.borderRadius};
@@ -355,15 +359,15 @@ const Te = ({ className: t }) => {
     ${t === "last" && `
             border-bottom-left-radius: ${e.borderRadius};
         `}
-  ` : o;
-}, qe = (t, e) => {
-  var r, s;
-  const o = b`
-    background-color: ${(r = e.colors) == null ? void 0 : r.primary};
+  ` : r;
+}, Ue = (t, e) => {
+  var o, s;
+  const r = b`
+    background-color: ${(o = e.colors) == null ? void 0 : o.primary};
     color: ${(s = e.colors) == null ? void 0 : s.accent};
   `;
   return e.borderRadius ? b`
-    ${o}
+    ${r}
 
     border-top-left-radius: ${e.borderRadius};
     border-bottom-left-radius: ${e.borderRadius};
@@ -375,8 +379,8 @@ const Te = ({ className: t }) => {
     ${t === "last" && `
             border-bottom-right-radius: ${e.borderRadius};
         `}
-  ` : o;
-}, O = a.div`
+  ` : r;
+}, R = i.div`
   margin-bottom: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
@@ -385,18 +389,18 @@ const Te = ({ className: t }) => {
     margin-bottom: 0;
   }
 `, S = (t) => {
-  var e, o;
+  var e, r;
   return b`
   margin: ${(e = t.theme.sizes) == null ? void 0 : e.medium} 0;
-  padding: 0 ${(o = t.theme.sizes) == null ? void 0 : o.medium};
+  padding: 0 ${(r = t.theme.sizes) == null ? void 0 : r.medium};
 `;
-}, Ue = a(He)`
+}, Ve = i(Te)`
   & button.humany-form-component-button {
     ${(t) => {
-  var e, o, r, s;
-  return ((e = t.theme.colors) == null ? void 0 : e.primary) && ((o = t.theme.colors) == null ? void 0 : o.accent) && be({
+  var e, r, o, s;
+  return ((e = t.theme.colors) == null ? void 0 : e.primary) && ((r = t.theme.colors) == null ? void 0 : r.accent) && $e({
     active: !1,
-    primaryColor: (r = t.theme.colors) == null ? void 0 : r.primary,
+    primaryColor: (o = t.theme.colors) == null ? void 0 : o.primary,
     secondaryColor: (s = t.theme.colors) == null ? void 0 : s.accent,
     theme: t.theme
   });
@@ -418,18 +422,18 @@ const Te = ({ className: t }) => {
 }};
     }
   }
-`, Ve = a(Y)`
+`, _e = i(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) && p;
+  return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && f;
 }};
     }
   }
-`, _e = a(se)`
+`, Fe = i(ie)`
   padding: 0;
   list-style: none;
   margin: 0 -${(t) => {
@@ -442,8 +446,8 @@ const Te = ({ className: t }) => {
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
 }};
   }
-`, Fe = a.button`
-  ${(t) => R(t)};
+`, Ye = i.button`
+  ${(t) => B(t)};
   display: block;
   background-color: ${(t) => {
   var e;
@@ -452,23 +456,23 @@ const Te = ({ className: t }) => {
   width: 100%;
   color: #fff;
   &:focus-visible {
-    ${p}
+    ${f}
     background-color: transparent;
   }
-`, Z = J(
-  ({ boxed: t, className: e, agentData: o }, r) => /* @__PURE__ */ n(q, { ref: r, children: /* @__PURE__ */ n(U, { left: t, center: !t, children: /* @__PURE__ */ n(
-    V,
+`, te = 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__ */ u(je, { children: [
+      children: /* @__PURE__ */ u(Pe, { children: [
         /* @__PURE__ */ n("div", {}),
         /* @__PURE__ */ n("div", {}),
         /* @__PURE__ */ n("div", {})
       ] })
     }
   ) }) })
-), me = Le.createContext(null), Ye = a.p`
+), ue = Ne.createContext(null), Xe = i.p`
   && {
     font-size: ${(t) => {
   var e;
@@ -483,53 +487,53 @@ const Te = ({ className: t }) => {
   var e;
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
-`, ee = (t, e) => new Date(t).toLocaleTimeString(e || [], {
+`, ne = (t, e) => new Date(t).toLocaleTimeString(e || [], {
   hour: "numeric",
   minute: "2-digit"
-}), N = ({
+}), M = ({
   className: t,
   name: e,
-  timestamp: o,
-  ariaHidden: r = !1
+  timestamp: r,
+  ariaHidden: o = !1
 }) => {
-  const s = Ne(me);
-  if (!e && !o)
+  const s = Me(ue);
+  if (!e && !r)
     return null;
-  let i = "";
-  return e ? o ? i = `${e}: ${ee(o, s)}` : i = e : o && (i = ee(o, s)), /* @__PURE__ */ n(Ye, { "aria-hidden": r, children: i });
-}, ue = ({
+  let a = "";
+  return e ? r ? a = `${e}: ${ne(r, s)}` : a = e : r && (a = ne(r, s)), /* @__PURE__ */ n(Xe, { "aria-hidden": o, children: a });
+}, he = ({
   className: t,
   children: e,
-  sender: o,
-  timestamp: r
+  sender: r,
+  timestamp: o
 }) => {
-  const { avatar: s, name: i } = o, { avatarSize: c } = C();
+  const { avatar: s, name: a } = r, { avatarSize: m } = C();
   return /* @__PURE__ */ u(
-    Xe,
+    Ge,
     {
       hasAvatar: !!s,
-      className: H(
+      className: A(
         t,
         "humany-conversation-agent-message"
       ),
       children: [
-        s && /* @__PURE__ */ n(Ee, { avatarSize: c, children: typeof s == "string" ? (
+        s && /* @__PURE__ */ n(De, { avatarSize: m, children: typeof s == "string" ? (
           // eslint-disable-next-line jsx-a11y/alt-text
           /* @__PURE__ */ n("img", { src: s })
-        ) : /* @__PURE__ */ n(x, { symbol: s }) }),
+        ) : /* @__PURE__ */ n(k, { symbol: s }) }),
         e,
         /* @__PURE__ */ n(
-          N,
+          M,
           {
-            name: i,
-            timestamp: r,
+            name: a,
+            timestamp: o,
             ariaHidden: !0
           }
         )
       ]
     }
   );
-}, Xe = a.div`
+}, Ge = i.div`
   display: grid;
   margin-right: 10%;
   width: 90%;
@@ -546,33 +550,33 @@ const Te = ({ className: t }) => {
             'content'
             'info';
         `};
-`, Ge = J(
-  ({ className: t, children: e, timestamp: o, discrete: r, fullWidth: s }, i) => /* @__PURE__ */ n(
-    Je,
+`, Je = Z(
+  ({ className: t, children: e, timestamp: r, discrete: o, fullWidth: s }, a) => /* @__PURE__ */ n(
+    Qe,
     {
-      ref: i,
-      className: H(
+      ref: a,
+      className: A(
         t,
         "humany-conversation-system-message"
       ),
       fullWidth: s,
-      children: r ? /* @__PURE__ */ u(Qe, { className: "humany-conversation-discrete-message", children: [
+      children: o ? /* @__PURE__ */ u(Ze, { className: "humany-conversation-discrete-message", children: [
         e,
-        /* @__PURE__ */ n(N, { timestamp: o })
-      ] }) : /* @__PURE__ */ u(L, { children: [
+        /* @__PURE__ */ n(M, { timestamp: r })
+      ] }) : /* @__PURE__ */ u(N, { children: [
         e,
-        /* @__PURE__ */ n(N, { timestamp: o })
+        /* @__PURE__ */ n(M, { timestamp: r })
       ] })
     }
   )
-), Je = a.div`
+), Qe = i.div`
   ${(t) => t.fullWidth && "width: 100%"};
   padding: 0 ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.large;
 }};
   overflow: auto;
-`, Qe = a.div`
+`, Ze = i.div`
   text-align: center;
   word-wrap: break-word;
   font-size: ${(t) => {
@@ -586,79 +590,82 @@ const Te = ({ className: t }) => {
   > p {
     margin: 0;
   }
-`, Ze = ({ className: t, children: e, timestamp: o }) => {
-  const { userLabel: r = "" } = C();
+`, et = ({ className: t, children: e, timestamp: r }) => {
+  const { userLabel: o = "" } = C();
   return /* @__PURE__ */ u(
-    et,
+    tt,
     {
-      className: H(
+      className: A(
         t,
         "humany-conversation-user-message"
       ),
       children: [
         e,
         /* @__PURE__ */ n(
-          N,
+          M,
           {
-            name: r,
-            timestamp: o,
+            name: o,
+            timestamp: r,
             ariaHidden: !0
           }
         )
       ]
     }
   );
-}, et = a.div`
+}, tt = i.div`
   margin-left: 10%;
   width: 90%;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-`, Q = (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: o }) => /* @__PURE__ */ n(
-  nt,
-  {
-    className: "humany-conversation-button-list",
-    header: t,
-    items: Q(e),
-    renderItem: (r) => {
-      var i;
-      const s = !!((i = r == null ? void 0 : r.data) != null && i.href);
-      return /* @__PURE__ */ n("li", { children: s ? /* @__PURE__ */ u(
-        rt,
-        {
-          onClick: () => {
-            o("action", r);
-          },
-          href: r.data.href,
-          target: r.data.target,
-          "aria-label": r.label,
-          title: r.label,
-          children: [
-            /* @__PURE__ */ n(x, { symbol: r.symbol }),
-            r.label
-          ]
-        }
-      ) : /* @__PURE__ */ u(
-        ot,
-        {
-          onClick: () => {
-            o("action", r);
-          },
-          "aria-label": r.label,
-          title: r.label,
-          children: [
-            /* @__PURE__ */ n(x, { symbol: r.symbol }),
-            r.label
-          ]
-        }
-      ) }, r.actionKey);
+})), nt = ({ header: t, actions: e, dispatch: r }) => {
+  const o = T(), { events: s } = o.get("$widget");
+  return /* @__PURE__ */ n(
+    rt,
+    {
+      className: "humany-conversation-button-list",
+      header: t,
+      items: ee(e),
+      renderItem: (a) => {
+        var d;
+        const m = !!((d = a == null ? void 0 : a.data) != null && d.href);
+        return /* @__PURE__ */ n("li", { children: m ? /* @__PURE__ */ u(
+          ot,
+          {
+            onClick: () => {
+              r("action", a), s.dispatch("tracking:button-list-item-clicked", a);
+            },
+            href: a.data.href,
+            target: a.data.target,
+            "aria-label": a.label,
+            title: a.label,
+            children: [
+              /* @__PURE__ */ n(k, { symbol: a.symbol }),
+              a.label
+            ]
+          }
+        ) : /* @__PURE__ */ u(
+          st,
+          {
+            onClick: () => {
+              r("action", a), s.dispatch("tracking:button-list-item-clicked", a);
+            },
+            "aria-label": a.label,
+            title: a.label,
+            children: [
+              /* @__PURE__ */ n(k, { symbol: a.symbol }),
+              a.label
+            ]
+          }
+        ) }, a.actionKey);
+      }
     }
-  }
-), nt = a(B)`
-  ${K}
+  );
+}, rt = i(K)`
+  ${E}
   > ul {
     display: flex;
     flex-wrap: wrap;
@@ -671,8 +678,8 @@ const Te = ({ className: t }) => {
     }
   }
   ${S}
-`, rt = a($e)`
-  ${R};
+`, ot = i(ve)`
+  ${B};
 
   display: block;
   padding: ${(t) => {
@@ -688,7 +695,7 @@ const Te = ({ className: t }) => {
   overflow: hidden;
   text-overflow: ellipsis;
   &:focus-visible {
-    ${p}
+    ${f}
     background-color: transparent;
   }
 
@@ -699,8 +706,8 @@ const Te = ({ className: t }) => {
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }};
   }
-`, ot = a(M)`
-  ${R};
+`, st = i(I)`
+  ${B};
 
   display: block;
   padding: ${(t) => {
@@ -716,7 +723,7 @@ const Te = ({ className: t }) => {
   overflow: hidden;
   text-overflow: ellipsis;
   &:focus-visible {
-    ${p}
+    ${f}
     background-color: transparent;
   }
 
@@ -727,58 +734,58 @@ const Te = ({ className: t }) => {
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }};
   }
-`, st = ({ type: t, content: e = {} }) => {
-  const o = ve(t);
-  return !o || !t ? null : /* @__PURE__ */ n(Me, { fallback: null, children: /* @__PURE__ */ n(o, { ...e }) });
-}, at = ({ body: t }) => /* @__PURE__ */ n(it, { html: t }), it = a(Y)`
-  ${xe}
+`, at = ({ type: t, content: e = {} }) => {
+  const r = xe(t);
+  return !r || !t ? null : /* @__PURE__ */ n(Ie, { fallback: null, children: /* @__PURE__ */ n(r, { ...e }) });
+}, it = ({ body: t }) => /* @__PURE__ */ n(lt, { html: t }), lt = i(G)`
+  ${ke}
   color: inherit;
   white-space: pre-wrap;
   ${S}
   a {
     color: ${(t) => t.theme.colors.link};
     &:focus-visible {
-      ${p};
+      ${f};
     }
   }
-`, lt = ({ header: t, actions: e, dispatch: o }) => /* @__PURE__ */ n(
-  ct,
+`, ct = ({ header: t, actions: e, dispatch: r }) => /* @__PURE__ */ n(
+  dt,
   {
     className: "humany-conversation-item-list",
     header: t,
-    items: Q(e),
-    renderItem: (r) => {
+    items: ee(e),
+    renderItem: (o) => {
       var s;
-      return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ u(dt, { children: [
-        ((s = r.symbol) == null ? void 0 : s.content) && /* @__PURE__ */ n("div", { className: "item-icon", children: /* @__PURE__ */ n(
-          x,
+      return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ u(mt, { children: [
+        ((s = o.symbol) == null ? void 0 : s.content) && /* @__PURE__ */ n("div", { className: "item-icon", children: /* @__PURE__ */ n(
+          k,
           {
             size: 22,
             symbol: {
-              type: r.symbol.type,
-              content: r.symbol.content
+              type: o.symbol.type,
+              content: o.symbol.content
             }
           }
         ) }),
         /* @__PURE__ */ u("div", { className: "item-body", children: [
           /* @__PURE__ */ n(
-            M,
+            I,
             {
               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);
     }
   }
-), ct = a(B)`
-  ${K}
+), dt = i(K)`
+  ${E}
 
   > .humany-paragraph {
     ${S}
@@ -789,7 +796,7 @@ const Te = ({ className: t }) => {
     }
   }
 
-  ${(t) => X(t)(
+  ${(t) => J(t)(
   "h1",
   b`
         white-space: normal;
@@ -815,7 +822,7 @@ const Te = ({ className: t }) => {
       border-bottom: none;
     }
   }
-`, dt = a.div`
+`, mt = i.div`
   display: flex;
   gap: ${(t) => {
   var e;
@@ -854,7 +861,7 @@ const Te = ({ className: t }) => {
     margin: 0;
 
     &:focus-visible {
-      ${p}
+      ${f}
       span {
         color: ${(t) => {
   var e;
@@ -864,32 +871,32 @@ const Te = ({ className: t }) => {
       }
     }
   }
-`, mt = ({ header: t, actions: e, dispatch: o }) => {
-  const r = ke(e), s = le(), i = re();
-  return G(() => {
-    if (r && Array.isArray(e) && Array.isArray(r) && r.length < e.length && s.current) {
+`, ut = ({ header: t, actions: e, dispatch: r }) => {
+  const o = we(e), s = ce(), a = se(), m = T(), { events: d } = m.get("$widget");
+  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[r.length];
-      if (c.length === e.length && r.length) {
-        const m = c[r.length - 1];
-        if (m) {
-          const f = m.querySelector(
+      ), p = c[o.length];
+      if (c.length === e.length && o.length) {
+        const x = c[o.length - 1];
+        if (x) {
+          const l = x.querySelector(
             ".humany-button"
           );
-          f && f.focus();
+          l && l.focus();
         }
       } else
-        d && new MutationObserver((f, k) => {
-          f.forEach((l) => {
-            if (l.addedNodes) {
-              const h = Array.from(
-                l.addedNodes
-              ).find(($) => $.tagName === "BUTTON");
-              h && Se(s.current, document.activeElement) && (i && h.focus(), k.disconnect());
+        p && new MutationObserver((l, h) => {
+          l.forEach((v) => {
+            if (v.addedNodes) {
+              const $ = Array.from(
+                v.addedNodes
+              ).find((z) => z.tagName === "BUTTON");
+              $ && ze(s.current, document.activeElement) && (a && $.focus(), h.disconnect());
             }
           });
-        }).observe(d, {
+        }).observe(p, {
           attributes: !1,
           characterData: !1,
           childList: !0,
@@ -899,25 +906,25 @@ const Te = ({ className: t }) => {
         });
     }
   }), /* @__PURE__ */ n(
-    ut,
+    ht,
     {
       ref: s,
       className: "humany-conversation-link-list",
       header: t,
-      items: Q(e),
+      items: ee(e),
       renderItem: (c) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ u(
-        ht,
+        gt,
         {
           help: c.actionKey === "help",
           onClick: () => {
-            o("action", c);
+            r("action", c), d.dispatch("tracking:link-list-item-clicked", c);
           },
           "aria-label": c.label,
           title: c.label,
           children: [
             c.label,
             c.actionKey === "help" && /* @__PURE__ */ n(
-              x,
+              k,
               {
                 size: 14,
                 symbol: {
@@ -931,11 +938,11 @@ const Te = ({ className: t }) => {
       ) }, c.actionKey)
     }
   );
-}, ut = a(B)`
-  ${K}
+}, ht = i(K)`
+  ${E}
   ${S}
 
-    ${(t) => X(t)(
+    ${(t) => J(t)(
   "h1",
   b`
         white-space: normal;
@@ -953,7 +960,7 @@ const Te = ({ className: t }) => {
       margin: 0;
     }
   }
-`, ht = a(M)`
+`, gt = i(I)`
   display: block;
   text-align: left;
   font-weight: 300;
@@ -966,20 +973,20 @@ const Te = ({ className: t }) => {
   overflow: hidden;
 
   ${(t) => {
-  var e, o;
+  var e, r;
   return t.help && b`
       color: ${(e = t.theme.colors) == null ? void 0 : e.text};
       text-decoration: underline;
 
       i,
       svg {
-        margin-left: ${(o = t.theme.sizes) == null ? void 0 : o.small};
+        margin-left: ${(r = t.theme.sizes) == null ? void 0 : r.small};
       }
     `;
 }}
 
   &:focus-visible {
-    ${p}
+    ${f}
     span {
       color: ${(t) => {
   var e;
@@ -988,18 +995,18 @@ const Te = ({ className: t }) => {
       text-decoration: underline;
     }
   }
-`, gt = () => /* @__PURE__ */ n(ft, { className: "humany-conversation-separator" }), ft = a.div`
+`, ft = () => /* @__PURE__ */ n(pt, { className: "humany-conversation-separator" }), pt = i.div`
   ${(t) => t.theme.border && `border-bottom: ${t.theme.border};`}
   width: 100%;
-`, pt = ({ text: t }) => /* @__PURE__ */ n(yt, { className: "humany-conversation-text", variant: "span", children: t }), yt = a(F)`
+`, yt = ({ text: t }) => /* @__PURE__ */ n(bt, { className: "humany-conversation-text", variant: "span", children: t }), bt = i(X)`
   ${S}
-`, bt = ({
+`, $t = ({
   header: t = "Video call",
   acceptLabel: e = "Accept",
-  declineLabel: o = "Decline",
-  dispatch: r
+  declineLabel: r = "Decline",
+  dispatch: o
 }) => {
-  const s = Ie(() => [
+  const s = He(() => [
     {
       label: e,
       actionKey: "accept-video-call",
@@ -1009,39 +1016,39 @@ const Te = ({ className: t }) => {
       }
     },
     {
-      label: o,
+      label: r,
       actionKey: "decline-video-call",
       symbol: {
         type: "Svg",
         content: "close"
       }
     }
-  ], [e, o]);
+  ], [e, r]);
   return /* @__PURE__ */ n(
-    $t,
+    vt,
     {
       className: "humany-conversation-video-request",
       header: t,
       items: s,
-      renderItem: (i) => {
-        const c = i.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
+      renderItem: (a) => {
+        const m = a.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
         return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
-          vt,
+          xt,
           {
             onClick: () => {
-              r("action", i);
+              o("action", a);
             },
-            "aria-label": i.label,
-            title: i.label,
-            bgColor: c,
-            children: /* @__PURE__ */ n(x, { symbol: i.symbol, size: 25 })
+            "aria-label": a.label,
+            title: a.label,
+            bgColor: m,
+            children: /* @__PURE__ */ n(k, { symbol: a.symbol, size: 25 })
           }
-        ) }, i.actionKey);
+        ) }, a.actionKey);
       }
     }
   );
-}, $t = a(B)`
-  ${(t) => K(t)}
+}, vt = i(K)`
+  ${(t) => E(t)}
   > ul {
     display: flex;
     flex-wrap: wrap;
@@ -1054,8 +1061,8 @@ const Te = ({ className: t }) => {
     }
   }
   ${(t) => S(t)}
-`, vt = a(M)`
-  ${R};
+`, xt = i(I)`
+  ${B};
 
   background-color: ${(t) => t.bgColor};
   display: flex;
@@ -1067,7 +1074,7 @@ const Te = ({ className: t }) => {
   border-radius: 100%;
 
   &:focus-visible {
-    ${p}
+    ${f}
     background-color: transparent;
 
     i,
@@ -1094,81 +1101,81 @@ const Te = ({ className: t }) => {
       stroke: #fff;
     }
   }
-`, xt = ([t, e]) => ({ type: t, content: e }), kt = ({ items: t, dispatch: e }) => /* @__PURE__ */ n(
-  wt,
+`, kt = ([t, e]) => ({ type: t, content: e }), wt = ({ items: t, dispatch: e }) => /* @__PURE__ */ n(
+  Ct,
   {
     role: "none",
     className: "humany-message-list",
-    items: t.map(xt),
+    items: t.map(kt),
     renderLi: !0,
-    renderItem: (o) => {
-      switch (o.type) {
+    renderItem: (r) => {
+      switch (r.type) {
         case w.Text:
-          return /* @__PURE__ */ n(pt, { text: o.content });
+          return /* @__PURE__ */ n(yt, { text: r.content });
         case w.HTML:
-          return /* @__PURE__ */ n(at, { ...o.content });
+          return /* @__PURE__ */ n(it, { ...r.content });
         case w.Separator:
-          return /* @__PURE__ */ n(gt, { ...o.content });
+          return /* @__PURE__ */ n(ft, { ...r.content });
         case w.ItemList:
-          return /* @__PURE__ */ n(lt, { ...o.content, dispatch: e });
+          return /* @__PURE__ */ n(ct, { ...r.content, dispatch: e });
         case w.LinkList:
-          return /* @__PURE__ */ n(mt, { ...o.content, dispatch: e });
+          return /* @__PURE__ */ n(ut, { ...r.content, dispatch: e });
         case w.ButtonList:
-          return /* @__PURE__ */ n(tt, { ...o.content, dispatch: e });
+          return /* @__PURE__ */ n(nt, { ...r.content, dispatch: e });
         case w.VideoRequest:
-          return /* @__PURE__ */ n(bt, { ...o.content, dispatch: e });
+          return /* @__PURE__ */ n($t, { ...r.content, dispatch: e });
         default:
-          return /* @__PURE__ */ n(st, { type: o.type, content: o.content });
+          return /* @__PURE__ */ n(at, { type: r.type, content: r.content });
       }
     }
   }
-), wt = a(se)`
-  ${we}
+), Ct = i(ie)`
+  ${Ce}
 
   > li {
     margin: 0;
   }
-`, Ct = J(
-  ({ className: t, timestamp: e, sender: o, type: r, content: s }, i) => {
-    const c = ce(
+`, St = Z(
+  ({ className: t, timestamp: e, sender: r, type: o, content: s }, a) => {
+    const m = de(
       (l) => {
         let h = "first";
         return s.length > 1 && (h = l === 0 ? "first" : l + 1 === s.length ? "last" : "middle"), h;
       },
       [s]
-    ), { userLabel: d = "" } = C(), m = () => /* @__PURE__ */ n(L, { children: s.map((l) => {
-      const { key: h, body: $, title: v, form: T, actions: y } = l, z = !!$ && !v && !T && !y;
+    ), { userLabel: d = "" } = C(), c = () => /* @__PURE__ */ n(N, { children: s.map((l) => {
+      const { key: h, body: v, title: $, form: z, actions: y } = l, O = !!v && !$ && !z && !y;
       return /* @__PURE__ */ n(
-        Ge,
+        Je,
         {
           className: t,
-          discrete: z,
-          ref: i,
+          discrete: O,
+          ref: a,
           timestamp: e,
-          fullWidth: !!T || !!y,
-          children: z && $ ? /* @__PURE__ */ n(Y, { html: $ }) : /* @__PURE__ */ n(P, { isSystem: !0, content: l })
+          fullWidth: !!z || !!y,
+          children: O && v ? /* @__PURE__ */ n(G, { html: v }) : /* @__PURE__ */ n(q, { isSystem: !0, content: l })
         },
         h
       );
-    }) }), f = () => /* @__PURE__ */ u(L, { children: [
-      /* @__PURE__ */ n(te, { className: "humany-sr-only", children: /* @__PURE__ */ n(N, { name: o == null ? void 0 : o.name, timestamp: e }) }),
+    }) }), p = () => /* @__PURE__ */ u(N, { children: [
+      /* @__PURE__ */ n(re, { className: "humany-sr-only", children: /* @__PURE__ */ n(M, { name: r == null ? void 0 : r.name, timestamp: e }) }),
       /* @__PURE__ */ n(
-        ue,
+        he,
         {
-          sender: o,
+          sender: r,
           timestamp: e,
           className: t,
-          children: /* @__PURE__ */ n(q, { className: "humany-message-content-bundle", children: s.map((l, h) => /* @__PURE__ */ n(
-            U,
+          children: /* @__PURE__ */ n(V, { className: "humany-message-content-bundle", children: s.map((l, h) => /* @__PURE__ */ n(
+            _,
             {
               className: "humany-message-container",
               left: !0,
-              ref: i,
+              ref: a,
               children: /* @__PURE__ */ n(
-                P,
+                q,
                 {
                   content: l,
-                  stacked: c(h)
+                  stacked: m(h)
                 }
               )
             },
@@ -1176,82 +1183,82 @@ const Te = ({ className: t }) => {
           )) })
         }
       )
-    ] }), k = () => /* @__PURE__ */ u(L, { children: [
-      /* @__PURE__ */ n(te, { className: "humany-sr-only", children: /* @__PURE__ */ n(N, { name: d, timestamp: e }) }),
-      /* @__PURE__ */ n(Ze, { timestamp: e, className: t, children: /* @__PURE__ */ n(q, { className: "humany-message-content-bundle", children: s.map((l, h) => /* @__PURE__ */ n(
-        U,
+    ] }), x = () => /* @__PURE__ */ u(N, { children: [
+      /* @__PURE__ */ n(re, { className: "humany-sr-only", children: /* @__PURE__ */ n(M, { name: d, timestamp: e }) }),
+      /* @__PURE__ */ n(et, { timestamp: e, className: t, children: /* @__PURE__ */ n(V, { className: "humany-message-content-bundle", children: s.map((l, h) => /* @__PURE__ */ n(
+        _,
         {
           className: "humany-message-container",
           right: !0,
-          ref: i,
+          ref: a,
           children: /* @__PURE__ */ n(
-            P,
+            q,
             {
               isUser: !0,
               content: l,
-              stacked: c(h)
+              stacked: m(h)
             }
           )
         },
         l.key
       )) }) })
     ] });
-    switch (r) {
-      case j.System:
-        return m();
-      case j.Agent:
-        return f();
-      case j.User:
-        return k();
+    switch (o) {
+      case W.System:
+        return c();
+      case W.Agent:
+        return p();
+      case W.User:
+        return x();
       default:
         return null;
     }
   }
-), P = ({
+), q = ({
   content: t,
   isUser: e,
-  isSystem: o,
-  stacked: r
+  isSystem: r,
+  stacked: o
 }) => {
-  const s = _(), { title: i, body: c, actions: d, form: m, items: f } = t;
-  return f ? /* @__PURE__ */ n(
-    V,
+  const s = Y(), { title: a, body: m, actions: d, form: c, items: p } = t;
+  return p ? /* @__PURE__ */ n(
+    F,
     {
       className: "humany-message-content",
       user: !!e,
-      stacked: r,
-      children: /* @__PURE__ */ n(kt, { items: f, dispatch: s })
+      stacked: o,
+      children: /* @__PURE__ */ n(wt, { items: p, dispatch: s })
     }
   ) : /* @__PURE__ */ u(
-    V,
+    F,
     {
       className: "humany-message-content",
-      padded: !o,
+      padded: !r,
       user: !!e,
-      stacked: r,
-      fullWidth: !!m || !!d,
+      stacked: o,
+      fullWidth: !!c || !!d,
       children: [
-        i && /* @__PURE__ */ n(O, { children: /* @__PURE__ */ n(Pe, { variant: "h2", children: i }) }),
-        c && /* @__PURE__ */ n(O, { children: /* @__PURE__ */ n(Ve, { html: c }) }),
-        m && /* @__PURE__ */ n(O, { children: /* @__PURE__ */ n(
-          Ue,
+        a && /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(We, { variant: "h2", children: a }) }),
+        m && /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(_e, { html: m }) }),
+        c && /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(
+          Ve,
           {
-            ...m,
+            ...c,
             onChange: (l, h) => {
               s("form", {
                 data: h,
-                formKey: m.schema.id,
+                formKey: c.schema.id,
                 actionKey: l
               });
             }
           }
         ) }),
-        d && /* @__PURE__ */ n(O, { children: /* @__PURE__ */ n(
-          _e,
+        d && /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(
+          Fe,
           {
             items: Object.keys(d).map((l) => ({ label: d[l], actionKey: l })),
             renderItem: (l) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
-              Fe,
+              Ye,
               {
                 onClick: () => {
                   s("action", l.actionKey);
@@ -1264,7 +1271,7 @@ const Te = ({ className: t }) => {
       ]
     }
   );
-}, te = a.div`
+}, re = i.div`
   position: absolute !important;
   height: 1px;
   width: 1px;
@@ -1273,28 +1280,28 @@ const Te = ({ className: t }) => {
   clip: rect(1px, 1px, 1px, 1px);
   left: -10000000px;
   top: auto;
-`, St = () => {
-  const { skipToLatestMessageLabel: t = "Skip to latest message" } = C(), e = ae(), o = () => {
-    const r = e.get("widgetDOMElement");
-    if (r) {
-      const s = r.querySelectorAll(
+`, zt = () => {
+  const { skipToLatestMessageLabel: t = "Skip to latest message" } = C(), e = T(), r = () => {
+    const o = e.get("widgetDOMElement");
+    if (o) {
+      const s = o.querySelectorAll(
         ".humany-conversation-entry"
       );
       s.length && s[s.length - 1].focus();
     }
   };
   return /* @__PURE__ */ n(
-    zt,
+    Lt,
     {
       className: "humany-skip-to-latest-message",
-      onKeyDown: (r) => {
-        (r.key === "Enter" || r.keyCode === 13) && o();
+      onKeyDown: (o) => {
+        (o.key === "Enter" || o.keyCode === 13) && r();
       },
-      onClick: o,
+      onClick: r,
       children: t
     }
   );
-}, zt = a.button`
+}, Lt = i.button`
   position: absolute;
   bottom: 60px;
   text-align: center;
@@ -1312,26 +1319,26 @@ const Te = ({ className: t }) => {
   &:focus-visible {
     left: 50%;
     transform: translateX(-50%);
-    ${p};
+    ${f};
   }
-`, he = () => {
-  const t = ce((d) => {
+`, ge = () => {
+  const t = de((d) => {
     d && setTimeout(() => {
       d.scrollIntoView({
         block: "start",
         behavior: "smooth"
       });
     }, 250);
-  }, []), [e, o] = oe(!0), {
-    messages: r,
+  }, []), [e, r] = ae(!0), {
+    messages: o,
     loading: s,
-    typingActors: i = []
-  } = C(), c = () => i && i.length ? i.map((d, m) => /* @__PURE__ */ n(
-    W,
+    typingActors: a = []
+  } = C(), m = () => a && a.length ? a.map((d, c) => /* @__PURE__ */ n(
+    U,
     {
       id: `typing_${d.name}`,
-      children: /* @__PURE__ */ n(ue, { timestamp: Date.now(), sender: d, children: /* @__PURE__ */ n(
-        Z,
+      children: /* @__PURE__ */ n(he, { timestamp: Date.now(), sender: d, children: /* @__PURE__ */ n(
+        te,
         {
           boxed: !0,
           ref: t
@@ -1340,27 +1347,27 @@ const Te = ({ className: t }) => {
     },
     `typing_${d.name}`
   )) : null;
-  return /* @__PURE__ */ u(L, { children: [
-    /* @__PURE__ */ u(Lt, { tabIndex: 0, scrollableCss: e, ref: o, children: [
-      r && r.length ? r.map((d, m) => {
-        const { type: f, timestamp: k, sender: l, content: h } = d;
+  return /* @__PURE__ */ u(N, { children: [
+    /* @__PURE__ */ u(Nt, { tabIndex: 0, scrollableCss: e, ref: r, children: [
+      o && o.length ? o.map((d, c) => {
+        const { type: p, timestamp: x, sender: l, content: h } = d;
         return /* @__PURE__ */ n(
-          W,
+          U,
           {
             className: "humany-conversation-entry",
             tabIndex: -1,
-            children: /* @__PURE__ */ n(Ct, { ...d, ref: t })
+            children: /* @__PURE__ */ n(St, { ...d, ref: t })
           },
-          `${f}_${l == null ? void 0 : l.name}_${k}_${h[0].key}`
+          `${p}_${l == null ? void 0 : l.name}_${x}_${h[0].key}`
         );
       }) : null,
-      c(),
-      s && /* @__PURE__ */ n(W, { children: /* @__PURE__ */ n(Z, { ref: t }) })
+      m(),
+      s && /* @__PURE__ */ n(U, { children: /* @__PURE__ */ n(te, { ref: t }) })
     ] }),
-    /* @__PURE__ */ n(Te, {}),
-    /* @__PURE__ */ n(St, {})
+    /* @__PURE__ */ n(Ae, {}),
+    /* @__PURE__ */ n(zt, {})
   ] });
-}, Lt = a.div`
+}, Nt = i.div`
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1371,9 +1378,9 @@ const Te = ({ className: t }) => {
 }};
   ${(t) => !!t.scrollableCss && t.scrollableCss};
   &:focus-visible {
-    ${(t) => p(t)};
+    ${(t) => f(t)};
   }
-`, W = a.div`
+`, U = i.div`
   margin: 0;
   margin-bottom: ${(t) => {
   var e;
@@ -1407,50 +1414,50 @@ const Te = ({ className: t }) => {
   }
 
   &:focus-visible {
-    ${p}
+    ${f}
     border-radius: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }};
   }
-  ${(t) => X(t)(
+  ${(t) => J(t)(
   "h1",
   b`
         font-weight: normal;
       `
 )}
-`, Nt = ({ dispatch: t }) => {
-  const e = le(null);
-  return G(() => {
+`, Mt = ({ dispatch: t }) => {
+  const e = ce(null);
+  return Q(() => {
     e.current && e.current.parentNode && t("overlay-mounted", e.current);
   }, [e]), /* @__PURE__ */ n(
-    ie,
+    le,
     {
       portalId: "humany-conversation-overlay-portal",
       className: "humany-conversation-overlay-outlet",
       ref: e
     }
   );
-}, Mt = ({
+}, It = ({
   dispatch: t,
   header: e,
-  buttonLabel: o
+  buttonLabel: r
 }) => /* @__PURE__ */ u(
-  It,
+  Ht,
   {
     portalId: "humany-conversation-portal",
     className: "humany-conversation-outlet",
     children: [
-      /* @__PURE__ */ u(Ht, { className: "humany-conversation-outlet-head", children: [
+      /* @__PURE__ */ u(Tt, { className: "humany-conversation-outlet-head", children: [
         /* @__PURE__ */ n(
-          At,
+          Ot,
           {
             className: "humany-conversation-outlet-head-button",
-            "aria-label": o,
-            title: o,
+            "aria-label": r,
+            title: r,
             onClick: () => t("hide-overlay-conversation"),
             children: /* @__PURE__ */ n(
-              x,
+              k,
               {
                 symbol: {
                   type: "Svg",
@@ -1462,7 +1469,7 @@ const Te = ({ className: t }) => {
           }
         ),
         e && /* @__PURE__ */ n(
-          Tt,
+          At,
           {
             className: "humany-conversation-outlet-header",
             variant: "h1",
@@ -1470,10 +1477,10 @@ const Te = ({ className: t }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ n(he, {})
+      /* @__PURE__ */ n(ge, {})
     ]
   }
-), It = a(ie)`
+), Ht = i(le)`
   z-index: 11;
   top: auto;
   height: 65%;
@@ -1488,7 +1495,7 @@ const Te = ({ className: t }) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.large;
 }};
-`, Ht = a.div`
+`, Tt = i.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -1502,7 +1509,7 @@ const Te = ({ className: t }) => {
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
 }};
   ${(t) => t.theme.border && `border-bottom: ${t.theme.border};`}
-`, Tt = a(F)`
+`, At = i(X)`
   font-size: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.medium;
@@ -1512,7 +1519,7 @@ const Te = ({ className: t }) => {
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
   margin: 0;
-`, At = a(M)`
+`, Ot = i(I)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1526,7 +1533,7 @@ const Te = ({ className: t }) => {
   ${(t) => t.theme.borderRadius && `border-radius: ${t.theme.borderRadius};`}
 
   &:focus-visible {
-    ${p};
+    ${f};
   }
 
   svg line {
@@ -1535,37 +1542,37 @@ const Te = ({ className: t }) => {
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
   }
-`, _t = ({ className: t, ...e }) => {
+`, Ft = ({ className: t, ...e }) => {
   const {
-    overlay: o,
-    overlayConversationHeader: r,
+    overlay: r,
+    overlayConversationHeader: o,
     overlayConversationCloseLabel: s,
-    conversationControllerId: i
-  } = C(), c = _(), m = ae().get("$settings");
+    conversationControllerId: a
+  } = C(), m = Y(), c = T().get("$settings");
   return /* @__PURE__ */ n(
-    Ce.Provider,
+    Se.Provider,
     {
-      value: i ? { id: i } : null,
-      children: /* @__PURE__ */ u(me.Provider, { value: m == null ? void 0 : m.language, children: [
+      value: a ? { id: a } : null,
+      children: /* @__PURE__ */ u(ue.Provider, { value: c == null ? void 0 : c.language, children: [
         /* @__PURE__ */ n(
-          Ot,
+          Rt,
           {
             "aria-live": "assertive",
             ...e,
-            className: H(
+            className: A(
               t,
               "humany-conversation-component"
             ),
-            children: /* @__PURE__ */ n(he, {})
+            children: /* @__PURE__ */ n(ge, {})
           }
         ),
-        o && /* @__PURE__ */ u(L, { children: [
-          /* @__PURE__ */ n(Nt, { dispatch: c }),
-          o.conversation && /* @__PURE__ */ n(
-            Mt,
+        r && /* @__PURE__ */ u(N, { children: [
+          /* @__PURE__ */ n(Mt, { dispatch: m }),
+          r.conversation && /* @__PURE__ */ n(
+            It,
             {
-              dispatch: c,
-              header: r,
+              dispatch: m,
+              header: o,
               buttonLabel: s
             }
           )
@@ -1573,7 +1580,7 @@ const Te = ({ className: t }) => {
       ] })
     }
   );
-}, Ot = a.div`
+}, Rt = i.div`
   position: absolute;
   right: 0;
   left: 0;
@@ -1584,5 +1591,5 @@ const Te = ({ className: t }) => {
   flex-direction: column;
 `;
 export {
-  _t as default
+  Ft as default
 };