@telia-ace/widget-conversation 1.3.0-rc.8 → 1.3.0

package/{conversation-3b96821f.mjs → conversation-43344a01.mjs}

@@ -1,71 +1,71 @@
-import { jsx as n, jsxs as u, Fragment as N } from "react/jsx-runtime";
+import { jsx as n, jsxs as h, Fragment as N } from "react/jsx-runtime";
 import i from "@emotion/styled";
-import { Input as se, borderTabStyle as f, Button as I, SymbolBadge as k, useIsTabbing as ae, useDispatch as X, useProperties as S, useScroll as ie, useContainer as T, Typography as G, invertedHoverButton as ve, Html as J, List as le, buttonCss as K, ItemList as E, itemList as j, Link as xe, useComponent as ke, genericHtml as we, headingElement as Q, usePrevious as Se, list as Ce, WidgetOverlayOutlet as ce, ConversationContext as ze } from "@telia-ace/widget-ui";
-import { appendClassNames as A, htmlParentContains as Le } from "@telia-ace/widget-utilities";
-import { css as b, keyframes as Ne } from "@emotion/react";
-import Me, { useState as W, useEffect as Z, forwardRef as ee, useContext as Ie, Suspense as Ae, useRef as de, useMemo as He, useCallback as me } from "react";
+import { Input as se, borderTabStyle as b, Button as A, SymbolBadge as k, useIsTabbing as ae, useDispatch as G, useProperties as S, useScroll as ie, useContainer as I, Typography as J, invertedHoverButton as xe, Html as Q, List as le, buttonCss as B, ItemList as K, itemList as D, Link as ke, useComponent as we, genericHtml as Se, headingElement as Z, usePrevious as Ce, list as Le, WidgetOverlayOutlet as ce, ConversationContext as ze } from "@telia-ace/widget-ui";
+import { appendClassNames as H, htmlParentContains as Ne } from "@telia-ace/widget-utilities";
+import { css as x, keyframes as Me } from "@emotion/react";
+import de, { useState as q, useEffect as j, forwardRef as ee, useContext as Ae, Suspense as Ie, useRef as me, useMemo as He, useCallback as ue } from "react";
 import { FormComponent as Te } from "@telia-ace/widget-forms";
-import { ConversationMessageListItemType as w, ConversationMessageType as q } from "./index.mjs";
+import { ConversationMessageListItemType as w, ConversationMessageType as U } from "./index.mjs";
 import "@telia-ace/widget-core";
 import "@telia-ace/widget-services";
 import "@telia-ace/widget-plugins";
 const Oe = ({ className: t }) => {
-  const [e, o] = W(""), [s, a] = W(0), [r, m] = W(0), c = ae(), d = X(), {
-    inputPlaceholder: y = "Type your message",
-    inputHidden: x = !1,
-    inputDisabled: l = !1,
-    sendButtonLabel: h = "Send message",
-    inputMultiline: v = !0,
+  const [e, o] = q(""), [s, a] = q(0), [r, d] = q(0), u = ae(), l = G(), {
+    inputPlaceholder: m = "Type your message",
+    inputHidden: y = !1,
+    inputDisabled: c = !1,
+    sendButtonLabel: g = "Send message",
+    inputMultiline: p = !0,
     secondaryAction: $
-  } = S(), [z, p] = ie(!0), O = T();
-  Z(() => {
-    if (p.current) {
-      const { lineHeight: g, maxHeight: L } = getComputedStyle(p.current);
-      if (g && g.indexOf("px") > -1) {
-        const H = g.split("px"), be = parseInt(H[0], 10);
-        a(be);
-        const $e = L.split("px");
-        m(parseInt($e[0], 10));
+  } = S(), [L, v] = ie(!0), O = I();
+  j(() => {
+    if (v.current) {
+      const { lineHeight: f, maxHeight: z } = getComputedStyle(v.current);
+      if (f && f.indexOf("px") > -1) {
+        const T = f.split("px"), $e = parseInt(T[0], 10);
+        a($e);
+        const ve = z.split("px");
+        d(parseInt(ve[0], 10));
       }
     }
-  }, [p.current]);
-  const D = (g) => {
-    !g.shiftKey || !v ? (g.preventDefault(), e && e.length > 0 && (d("user-submit", { text: e }), o(""), P(""))) : e.length < 1 && g.preventDefault();
-  }, ye = (g) => {
+  }, [v.current]);
+  const P = (f) => {
+    !f.shiftKey || !p ? (f.preventDefault(), e && e.length > 0 && (l("user-submit", { text: e }), o(""), W(""))) : e.length < 1 && f.preventDefault();
+  }, pe = (f) => {
     if (!$)
       return;
-    g.preventDefault(), d("action", {
+    f.preventDefault(), l("action", {
       actionKey: $.action,
       ...$
     });
-    const { events: L } = O.get("$widget");
-    L.dispatch("tracking:secondary-clicked", {});
-  }, pe = (g) => {
-    if (v && p.current) {
-      const L = p.current.scrollHeight;
-      if (L > s) {
-        p.current.style.height = "auto";
-        let H = L;
-        g.length < 1 && (H = s), p.current.style.height = `${H}px`, H >= r ? p.current.style.overflowY = "scroll" : p.current.style.overflowY = "hidden";
+    const { events: z } = O.get("$widget");
+    z.dispatch("tracking:secondary-clicked", {});
+  }, be = (f) => {
+    if (p && v.current) {
+      const z = v.current.scrollHeight;
+      if (z > s) {
+        v.current.style.height = "auto";
+        let T = z;
+        f.length < 1 && (T = s), v.current.style.height = `${T}px`, T >= r ? v.current.style.overflowY = "scroll" : v.current.style.overflowY = "hidden";
       }
     }
-  }, P = (g) => {
-    pe(g), o(g), g && g.length > 0 && d("user-typing", { textLength: g.length });
+  }, W = (f) => {
+    be(f), o(f), f && f.length > 0 && l("user-typing", { textLength: f.length });
   };
-  return x ? null : /* @__PURE__ */ u(
-    Ee,
+  return y ? null : /* @__PURE__ */ h(
+    Ke,
     {
-      grow: v,
-      className: A("humany-conversation-input", t),
-      scrollableCss: z,
-      isTabbing: c,
+      grow: p,
+      className: H("humany-conversation-input", t),
+      scrollableCss: L,
+      isTabbing: u,
       children: [
         $ && /* @__PURE__ */ n(
-          Ke,
+          Be,
           {
             className: "humany-secondary-button",
-            disabled: l,
-            onClick: ye,
+            disabled: c,
+            onClick: pe,
             title: $.label,
             "aria-label": $.label,
             children: /* @__PURE__ */ n(
@@ -77,40 +77,40 @@ const Oe = ({ className: t }) => {
             )
           }
         ),
-        v ? /* @__PURE__ */ n(
-          Re,
+        p ? /* @__PURE__ */ n(
+          Ee,
           {
             value: e,
-            onChange: P,
-            onEnter: D,
-            disabled: l,
-            "aria-label": y,
-            placeholder: y,
+            onChange: W,
+            onEnter: P,
+            disabled: c,
+            "aria-label": m,
+            placeholder: m,
             type: "textarea",
             rows: 1,
-            ref: p
+            ref: v
           }
         ) : /* @__PURE__ */ n(
-          Be,
+          Re,
           {
             value: e,
-            onChange: P,
-            onEnter: D,
-            disabled: l,
-            "aria-label": y,
-            placeholder: y
+            onChange: W,
+            onEnter: P,
+            disabled: c,
+            "aria-label": m,
+            placeholder: m
           }
         ),
         /* @__PURE__ */ n(
-          ue,
+          he,
           {
             className: "humany-send-button",
             disabled: !1,
-            onClick: D,
-            title: h,
-            "aria-label": h,
+            onClick: P,
+            title: g,
+            "aria-label": g,
             children: /* @__PURE__ */ n(
-              je,
+              De,
               {
                 size: 22,
                 symbol: { type: "Svg", content: "send" },
@@ -122,7 +122,7 @@ const Oe = ({ className: t }) => {
       ]
     }
   );
-}, Re = i(se)`
+}, Ee = i(se)`
   resize: none;
   flex: 1;
   flex-shrink: 1;
@@ -143,10 +143,10 @@ const Oe = ({ className: t }) => {
   transition: height 200ms linear;
   outline: none;
   &:focus-visible {
-    ${f};
+    ${b};
     outline-offset: 12px;
   }
-`, Be = i(se)`
+`, Re = i(se)`
   flex: 1;
   border: none;
   background-color: transparent;
@@ -172,7 +172,7 @@ const Oe = ({ className: t }) => {
 }};
     font-style: italic;
   }
-`, ue = i(I)`
+`, he = i(A)`
   flex: 0 0 50px;
   align-self: stretch;
   background-color: transparent;
@@ -182,19 +182,19 @@ const Oe = ({ className: t }) => {
   border: none;
   color: #a6a6a6;
   &:focus-visible {
-    ${f};
+    ${b};
   }
-`, Ke = i(ue)`
+`, Be = i(he)`
   border-right: ${(t) => t.theme.border};
   margin: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
 }} 0;
-`, Ee = i.div`
-  ${(t) => t.grow ? b`
+`, Ke = i.div`
+  ${(t) => t.grow ? x`
           min-height: 50px;
           max-height: 150px;
-        ` : b`
+        ` : x`
           height: 50px;
         `}
   flex: 0 0 auto;
@@ -205,11 +205,11 @@ const Oe = ({ 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 && f}
+  ${(t) => t["data-has-focus"] && t.isTabbing && b}
   textarea {
     ${(t) => !!t.scrollableCss && t.scrollableCss}
   }
-`, je = i(
+`, De = i(
   ({
     hasContent: t,
     ...e
@@ -226,7 +226,7 @@ const Oe = ({ className: t }) => {
   return t.hasContent ? (e = t.theme.colors) == null ? void 0 : e.primary : "#a6a6a6";
 }};
   }
-`, De = i.div`
+`, je = i.div`
   width: ${(t) => t.avatarSize || "32px"};
   height: ${(t) => t.avatarSize || "32px"};
   border-radius: 50%;
@@ -273,7 +273,7 @@ const Oe = ({ className: t }) => {
 }};
     }
   }
-`, Pe = Ne`
+`, Pe = Me`
   0% {
     opacity: 0;
   }
@@ -303,23 +303,23 @@ const Oe = ({ className: t }) => {
   > div:nth-of-type(3) {
     animation-delay: 200ms;
   }
-`, _ = i.div`
+`, F = i.div`
   grid-area: content;
   max-width: 100%;
   overflow: hidden;
-`, qe = i(G)`
+`, qe = i(J)`
   font-size: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.normal;
 }};
   font-weight: normal;
   margin: 0;
-`, F = i.div`
+`, Y = i.div`
   display: flex;
   ${(t) => t.left && "justify-content: start;"};
   ${(t) => t.center && "justify-content: center;"};
   ${(t) => t.right && "justify-content: end;"};
-`, Y = i.div`
+`, X = i.div`
   ${(t) => {
   var e;
   return t.padded && `padding: ${(e = t.theme.sizes) == null ? void 0 : e.medium};`;
@@ -343,12 +343,12 @@ const Oe = ({ className: t }) => {
   ${(t) => t.fullWidth && "width: 100%;"}
 `, Ue = (t, e) => {
   var s, a;
-  const o = b`
+  const o = x`
     background-color: ${(s = e.colors) == null ? void 0 : s.accent};
     color: ${(a = e.colors) == null ? void 0 : a.text};
     ${e.border && `border: ${e.border};`};
   `;
-  return e.borderRadius ? b`
+  return e.borderRadius ? x`
     ${o}
 
     border-top-right-radius: ${e.borderRadius};
@@ -364,11 +364,11 @@ const Oe = ({ className: t }) => {
   ` : o;
 }, Ve = (t, e) => {
   var s, a;
-  const o = b`
+  const o = x`
     background-color: ${(s = e.colors) == null ? void 0 : s.primary};
     color: ${(a = e.colors) == null ? void 0 : a.accent};
   `;
-  return e.borderRadius ? b`
+  return e.borderRadius ? x`
     ${o}
 
     border-top-left-radius: ${e.borderRadius};
@@ -382,7 +382,7 @@ const Oe = ({ className: t }) => {
             border-bottom-right-radius: ${e.borderRadius};
         `}
   ` : o;
-}, R = i.div`
+}, E = i.div`
   margin-bottom: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
@@ -392,7 +392,7 @@ const Oe = ({ className: t }) => {
   }
 `, C = (t) => {
   var e, o;
-  return b`
+  return x`
   margin: ${(e = t.theme.sizes) == null ? void 0 : e.medium} 0;
   padding: 0 ${(o = t.theme.sizes) == null ? void 0 : o.medium};
 `;
@@ -400,7 +400,7 @@ const Oe = ({ className: t }) => {
   & button.humany-form-component-button {
     ${(t) => {
   var e, o, s, a;
-  return ((e = t.theme.colors) == null ? void 0 : e.primary) && ((o = t.theme.colors) == null ? void 0 : o.accent) && ve({
+  return ((e = t.theme.colors) == null ? void 0 : e.primary) && ((o = t.theme.colors) == null ? void 0 : o.accent) && xe({
     active: !1,
     primaryColor: (s = t.theme.colors) == null ? void 0 : s.primary,
     secondaryColor: (a = t.theme.colors) == null ? void 0 : a.accent,
@@ -424,14 +424,14 @@ const Oe = ({ className: t }) => {
 }};
     }
   }
-`, Fe = i(J)`
+`, Fe = i(Q)`
   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) && f;
+  return ((e = t.theme.accessibility) == null ? void 0 : e.isTabbing) && b;
 }};
     }
   }
@@ -449,7 +449,7 @@ const Oe = ({ className: t }) => {
 }};
   }
 `, Xe = i.button`
-  ${(t) => K(t)};
+  ${(t) => B(t)};
   display: block;
   background-color: ${(t) => {
   var e;
@@ -458,23 +458,23 @@ const Oe = ({ className: t }) => {
   width: 100%;
   color: #fff;
   &:focus-visible {
-    ${f}
+    ${b}
     background-color: transparent;
   }
 `, ne = ee(
-  ({ boxed: t, className: e, agentData: o }, s) => /* @__PURE__ */ n(_, { ref: s, children: /* @__PURE__ */ n(F, { left: t, center: !t, children: /* @__PURE__ */ n(
-    Y,
+  ({ boxed: t, className: e, agentData: o }, s) => /* @__PURE__ */ n(F, { ref: s, children: /* @__PURE__ */ n(Y, { left: t, center: !t, children: /* @__PURE__ */ n(
+    X,
     {
       padded: !!t,
       stacked: t ? "first" : void 0,
-      children: /* @__PURE__ */ u(We, { children: [
+      children: /* @__PURE__ */ h(We, { children: [
         /* @__PURE__ */ n("div", {}),
         /* @__PURE__ */ n("div", {}),
         /* @__PURE__ */ n("div", {})
       ] })
     }
   ) }) })
-), he = Me.createContext(null), Ge = i.p`
+), ge = de.createContext(null), Ge = i.p`
   && {
     font-size: ${(t) => {
   var e;
@@ -498,30 +498,30 @@ const Oe = ({ className: t }) => {
   timestamp: o,
   ariaHidden: s = !1
 }) => {
-  const a = Ie(he);
+  const a = Ae(ge);
   if (!e && !o)
     return null;
   let r = "";
   return e ? o ? r = `${e}: ${re(o, a)}` : r = e : o && (r = re(o, a)), /* @__PURE__ */ n(Ge, { "aria-hidden": s, children: r });
-}, ge = ({
+}, fe = ({
   className: t,
   children: e,
   sender: o,
   timestamp: s
 }) => {
-  const { avatar: a, name: r } = o, { avatarSize: m } = S();
-  return /* @__PURE__ */ u(
+  const { avatar: a, name: r } = o, { avatarSize: d, avatarLabel: u = "Avatar" } = S();
+  return /* @__PURE__ */ h(
     Je,
     {
       hasAvatar: !!a,
-      className: A(
+      className: H(
         t,
         "humany-conversation-agent-message"
       ),
       children: [
-        a && /* @__PURE__ */ n(De, { className: "humany-agent-avatar", avatarSize: m, children: typeof a == "string" ? (
+        a && /* @__PURE__ */ n(je, { className: "humany-agent-avatar", avatarSize: d, children: typeof a == "string" ? (
           // eslint-disable-next-line jsx-a11y/alt-text
-          /* @__PURE__ */ n("img", { src: a })
+          /* @__PURE__ */ n("img", { src: a, alt: u })
         ) : /* @__PURE__ */ n(k, { symbol: a }) }),
         e,
         /* @__PURE__ */ n(
@@ -539,13 +539,13 @@ const Oe = ({ className: t }) => {
   display: grid;
   margin-right: 10%;
   width: 90%;
-  ${(t) => t.hasAvatar ? b`
+  ${(t) => t.hasAvatar ? x`
           grid-template-columns: auto 1fr;
           grid-template-rows: 1fr auto;
           grid-template-areas:
             'avatar content'
             '. info';
-        ` : b`
+        ` : x`
           grid-template-columns: 1fr;
           grid-template-rows: 1fr auto;
           grid-template-areas:
@@ -557,15 +557,15 @@ const Oe = ({ className: t }) => {
     Ze,
     {
       ref: r,
-      className: A(
+      className: H(
         t,
         "humany-conversation-system-message"
       ),
       fullWidth: a,
-      children: s ? /* @__PURE__ */ u(et, { className: "humany-conversation-discrete-message", children: [
+      children: s ? /* @__PURE__ */ h(et, { className: "humany-conversation-discrete-message", children: [
         e,
         /* @__PURE__ */ n(M, { timestamp: o })
-      ] }) : /* @__PURE__ */ u(N, { children: [
+      ] }) : /* @__PURE__ */ h(N, { children: [
         e,
         /* @__PURE__ */ n(M, { timestamp: o })
       ] })
@@ -594,10 +594,10 @@ const Oe = ({ className: t }) => {
   }
 `, tt = ({ className: t, children: e, timestamp: o }) => {
   const { userLabel: s = "" } = S();
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ h(
     nt,
     {
-      className: A(
+      className: H(
         t,
         "humany-conversation-user-message"
       ),
@@ -624,7 +624,7 @@ const Oe = ({ className: t }) => {
   label: t[e],
   actionKey: e
 })), rt = ({ header: t, actions: e, dispatch: o }) => {
-  const s = T(), { events: a } = s.get("$widget");
+  const s = I(), { events: a } = s.get("$widget");
   return /* @__PURE__ */ n(
     ot,
     {
@@ -632,9 +632,9 @@ const Oe = ({ className: t }) => {
       header: t,
       items: te(e),
       renderItem: (r) => {
-        var c;
-        const m = !!((c = r == null ? void 0 : r.data) != null && c.href);
-        return /* @__PURE__ */ n("li", { children: m ? /* @__PURE__ */ u(
+        var u;
+        const d = !!((u = r == null ? void 0 : r.data) != null && u.href);
+        return /* @__PURE__ */ n("li", { children: d ? /* @__PURE__ */ h(
           st,
           {
             href: r.data.href,
@@ -646,7 +646,7 @@ const Oe = ({ className: t }) => {
               r.label
             ]
           }
-        ) : /* @__PURE__ */ u(
+        ) : /* @__PURE__ */ h(
           at,
           {
             onClick: () => {
@@ -663,8 +663,8 @@ const Oe = ({ className: t }) => {
       }
     }
   );
-}, ot = i(E)`
-  ${j}
+}, ot = i(K)`
+  ${D}
   > ul {
     display: flex;
     flex-wrap: wrap;
@@ -677,8 +677,8 @@ const Oe = ({ className: t }) => {
     }
   }
   ${C}
-`, st = i(xe)`
-  ${K};
+`, st = i(ke)`
+  ${B};
 
   display: block;
   padding: ${(t) => {
@@ -694,7 +694,7 @@ const Oe = ({ className: t }) => {
   overflow: hidden;
   text-overflow: ellipsis;
   &:focus-visible {
-    ${f}
+    ${b}
     background-color: transparent;
   }
 
@@ -705,8 +705,8 @@ const Oe = ({ className: t }) => {
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }};
   }
-`, at = i(I)`
-  ${K};
+`, at = i(A)`
+  ${B};
 
   display: block;
   padding: ${(t) => {
@@ -722,7 +722,7 @@ const Oe = ({ className: t }) => {
   overflow: hidden;
   text-overflow: ellipsis;
   &:focus-visible {
-    ${f}
+    ${b}
     background-color: transparent;
   }
 
@@ -734,17 +734,17 @@ const Oe = ({ className: t }) => {
 }};
   }
 `, it = ({ type: t, content: e = {} }) => {
-  const o = ke(t);
-  return !o || !t ? null : /* @__PURE__ */ n(Ae, { fallback: null, children: /* @__PURE__ */ n(o, { ...e }) });
-}, lt = ({ body: t }) => /* @__PURE__ */ n(ct, { className: "humany-html", html: t }), ct = i(J)`
-  ${we}
+  const o = we(t);
+  return !o || !t ? null : /* @__PURE__ */ n(Ie, { fallback: null, children: /* @__PURE__ */ n(o, { ...e }) });
+}, lt = ({ body: t }) => /* @__PURE__ */ n(ct, { className: "humany-html", html: t }), ct = i(Q)`
+  ${Se}
   color: inherit;
   white-space: normal;
   ${C}
   a {
     color: ${(t) => t.theme.colors.link};
     &:focus-visible {
-      ${f};
+      ${b};
     }
   }
   p {
@@ -758,7 +758,7 @@ const Oe = ({ className: t }) => {
     items: te(e),
     renderItem: (s) => {
       var a;
-      return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ u(ut, { children: [
+      return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ h(ut, { children: [
         ((a = s.symbol) == null ? void 0 : a.content) && /* @__PURE__ */ n("div", { className: "item-icon", children: /* @__PURE__ */ n(
           k,
           {
@@ -769,9 +769,9 @@ const Oe = ({ className: t }) => {
             }
           }
         ) }),
-        /* @__PURE__ */ u("div", { className: "item-body", children: [
+        /* @__PURE__ */ h("div", { className: "item-body", children: [
           /* @__PURE__ */ n(
-            I,
+            A,
             {
               onClick: () => {
                 o("action", s);
@@ -786,8 +786,8 @@ const Oe = ({ className: t }) => {
       ] }) }, s.actionKey);
     }
   }
-), mt = i(E)`
-  ${j}
+), mt = i(K)`
+  ${D}
 
   > .humany-paragraph {
     ${C}
@@ -798,9 +798,9 @@ const Oe = ({ className: t }) => {
     }
   }
 
-  ${(t) => Q(t)(
+  ${(t) => Z(t)(
   "h1",
-  b`
+  x`
         white-space: normal;
       `
 )}
@@ -863,7 +863,7 @@ const Oe = ({ className: t }) => {
     margin: 0;
 
     &:focus-visible {
-      ${f}
+      ${b}
       span {
         color: ${(t) => {
   var e;
@@ -874,31 +874,31 @@ const Oe = ({ className: t }) => {
     }
   }
 `, ht = ({ header: t, actions: e, dispatch: o }) => {
-  const s = Se(e), a = de(), r = ae(), m = T(), { events: c } = m.get("$widget");
-  return Z(() => {
+  const s = Ce(e), a = me(), r = ae(), d = I(), { events: u } = d.get("$widget");
+  return j(() => {
     if (s && Array.isArray(e) && Array.isArray(s) && s.length < e.length && a.current) {
-      const d = a.current.querySelectorAll(
+      const l = a.current.querySelectorAll(
         ".humany-conversation-link-list > ul > li"
-      ), y = d[s.length];
-      if (d.length === e.length && s.length) {
-        const x = d[s.length - 1];
-        if (x) {
-          const l = x.querySelector(
+      ), m = l[s.length];
+      if (l.length === e.length && s.length) {
+        const y = l[s.length - 1];
+        if (y) {
+          const c = y.querySelector(
             ".humany-button"
           );
-          l && l.focus();
+          c && c.focus();
         }
       } else
-        y && new MutationObserver((l, h) => {
-          l.forEach((v) => {
-            if (v.addedNodes) {
+        m && new MutationObserver((c, g) => {
+          c.forEach((p) => {
+            if (p.addedNodes) {
               const $ = Array.from(
-                v.addedNodes
-              ).find((z) => z.tagName === "BUTTON");
-              $ && Le(a.current, document.activeElement) && (r && $.focus(), h.disconnect());
+                p.addedNodes
+              ).find((L) => L.tagName === "BUTTON");
+              $ && Ne(a.current, document.activeElement) && (r && $.focus(), g.disconnect());
             }
           });
-        }).observe(y, {
+        }).observe(m, {
           attributes: !1,
           characterData: !1,
           childList: !0,
@@ -914,18 +914,18 @@ const Oe = ({ className: t }) => {
       className: "humany-conversation-link-list",
       header: t,
       items: te(e),
-      renderItem: (d) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ u(
+      renderItem: (l) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ h(
         ft,
         {
-          help: d.actionKey === "help",
+          help: l.actionKey === "help",
           onClick: () => {
-            o("action", d), c.dispatch("tracking:link-list-item-clicked", d);
+            o("action", l), u.dispatch("tracking:link-list-item-clicked", l);
           },
-          "aria-label": d.label,
-          title: d.label,
+          "aria-label": l.label,
+          title: l.label,
           children: [
-            d.label,
-            d.actionKey === "help" && /* @__PURE__ */ n(
+            l.label,
+            l.actionKey === "help" && /* @__PURE__ */ n(
               k,
               {
                 size: 14,
@@ -937,16 +937,16 @@ const Oe = ({ className: t }) => {
             )
           ]
         }
-      ) }, d.actionKey)
+      ) }, l.actionKey)
     }
   );
-}, gt = i(E)`
-  ${j}
+}, gt = i(K)`
+  ${D}
   ${C}
 
-    ${(t) => Q(t)(
+    ${(t) => Z(t)(
   "h1",
-  b`
+  x`
         white-space: normal;
       `
 )}
@@ -962,7 +962,7 @@ const Oe = ({ className: t }) => {
       margin: 0;
     }
   }
-`, ft = i(I)`
+`, ft = i(A)`
   display: block;
   text-align: left;
   font-weight: 300;
@@ -976,7 +976,7 @@ const Oe = ({ className: t }) => {
 
   ${(t) => {
   var e, o;
-  return t.help && b`
+  return t.help && x`
       color: ${(e = t.theme.colors) == null ? void 0 : e.text};
       text-decoration: underline;
 
@@ -988,7 +988,7 @@ const Oe = ({ className: t }) => {
 }}
 
   &:focus-visible {
-    ${f}
+    ${b}
     span {
       color: ${(t) => {
   var e;
@@ -1000,7 +1000,7 @@ const Oe = ({ className: t }) => {
 `, yt = () => /* @__PURE__ */ n(pt, { className: "humany-conversation-separator" }), pt = i.div`
   ${(t) => t.theme.border && `border-bottom: ${t.theme.border};`}
   width: 100%;
-`, bt = ({ text: t }) => /* @__PURE__ */ n($t, { className: "humany-conversation-text", variant: "span", children: t }), $t = i(G)`
+`, bt = ({ text: t }) => /* @__PURE__ */ n($t, { className: "humany-conversation-text", variant: "span", children: t }), $t = i(J)`
   ${C}
 `, vt = ({
   header: t = "Video call",
@@ -1033,7 +1033,7 @@ const Oe = ({ className: t }) => {
       header: t,
       items: a,
       renderItem: (r) => {
-        const m = r.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
+        const d = r.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
         return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
           kt,
           {
@@ -1042,15 +1042,15 @@ const Oe = ({ className: t }) => {
             },
             "aria-label": r.label,
             title: r.label,
-            bgColor: m,
+            bgColor: d,
             children: /* @__PURE__ */ n(k, { symbol: r.symbol, size: 25 })
           }
         ) }, r.actionKey);
       }
     }
   );
-}, xt = i(E)`
-  ${(t) => j(t)}
+}, xt = i(K)`
+  ${(t) => D(t)}
   > ul {
     display: flex;
     flex-wrap: wrap;
@@ -1063,8 +1063,8 @@ const Oe = ({ className: t }) => {
     }
   }
   ${(t) => C(t)}
-`, kt = i(I)`
-  ${K};
+`, kt = i(A)`
+  ${B};
 
   background-color: ${(t) => t.bgColor};
   display: flex;
@@ -1076,7 +1076,7 @@ const Oe = ({ className: t }) => {
   border-radius: 100%;
 
   &:focus-visible {
-    ${f}
+    ${b}
     background-color: transparent;
 
     i,
@@ -1103,24 +1103,24 @@ const Oe = ({ className: t }) => {
       stroke: #fff;
     }
   }
-`, B = ([t, e]) => ({ type: t, content: e }), wt = ({ items: t, dispatch: e }) => {
-  const o = t.map(B).filter((r) => r.type.includes("ace-knowledge")).map((r) => "humany-" + r.type.toString());
-  return !!t.map(B).filter((r) => {
-    const m = r == null ? void 0 : r.content, c = m == null ? void 0 : m.actions;
-    return !!(c != null && c.filter((d) => d.actionKey === "contact").length);
-  }).length && o.push("humany-secondary-action-list"), !!t.map(B).filter((r) => {
-    var c;
-    const m = r == null ? void 0 : r.content;
-    return !!((c = m == null ? void 0 : m.tags) != null && c.includes("category"));
+`, R = ([t, e]) => ({ type: t, content: e }), wt = ({ items: t, dispatch: e }) => {
+  const o = t.map(R).filter((r) => r.type.includes("ace-knowledge")).map((r) => "humany-" + r.type.toString());
+  return !!t.map(R).filter((r) => {
+    const d = r == null ? void 0 : r.content, u = d == null ? void 0 : d.actions;
+    return !!(u != null && u.filter((l) => l.actionKey === "contact").length);
+  }).length && o.push("humany-secondary-action-list"), !!t.map(R).filter((r) => {
+    var u;
+    const d = r == null ? void 0 : r.content;
+    return !!((u = d == null ? void 0 : d.tags) != null && u.includes("category"));
   }).length && o.push("humany-category-list"), /* @__PURE__ */ n(
     St,
     {
       role: "none",
-      className: A(
+      className: H(
         "humany-message-list",
         o.join(" ")
       ),
-      items: t.map(B),
+      items: t.map(R),
       renderLi: !0,
       renderItem: (r) => {
         switch (r.type) {
@@ -1145,21 +1145,21 @@ const Oe = ({ className: t }) => {
     }
   );
 }, St = i(le)`
-  ${Ce}
+  ${Le}
 
   > li {
     margin: 0;
   }
 `, Ct = ee(
   ({ className: t, timestamp: e, sender: o, type: s, content: a }, r) => {
-    const m = me(
-      (l) => {
-        let h = "first";
-        return a.length > 1 && (h = l === 0 ? "first" : l + 1 === a.length ? "last" : "middle"), h;
+    const d = ue(
+      (c) => {
+        let g = "first";
+        return a.length > 1 && (g = c === 0 ? "first" : c + 1 === a.length ? "last" : "middle"), g;
       },
       [a]
-    ), { userLabel: c = "" } = S(), d = () => /* @__PURE__ */ n(N, { children: a.map((l) => {
-      const { key: h, body: v, title: $, form: z, actions: p } = l, O = !!v && !$ && !z && !p;
+    ), { userLabel: u = "" } = S(), l = () => /* @__PURE__ */ n(N, { children: a.map((c) => {
+      const { key: g, body: p, title: $, form: L, actions: v } = c, O = !!p && !$ && !L && !v;
       return /* @__PURE__ */ n(
         Qe,
         {
@@ -1167,120 +1167,120 @@ const Oe = ({ className: t }) => {
           discrete: O,
           ref: r,
           timestamp: e,
-          fullWidth: !!z || !!p,
-          children: O && v ? /* @__PURE__ */ n(J, { html: v }) : /* @__PURE__ */ n(U, { isSystem: !0, content: l })
+          fullWidth: !!L || !!v,
+          children: O && p ? /* @__PURE__ */ n(Q, { html: p }) : /* @__PURE__ */ n(V, { isSystem: !0, content: c })
         },
-        h
+        g
       );
-    }) }), y = () => /* @__PURE__ */ u(N, { children: [
+    }) }), m = () => /* @__PURE__ */ h(N, { children: [
       /* @__PURE__ */ n(oe, { className: "humany-sr-only", children: /* @__PURE__ */ n(M, { name: o == null ? void 0 : o.name, timestamp: e }) }),
       /* @__PURE__ */ n(
-        ge,
+        fe,
         {
           sender: o,
           timestamp: e,
           className: t,
-          children: /* @__PURE__ */ n(_, { className: "humany-message-content-bundle", children: a.map((l, h) => /* @__PURE__ */ n(
-            F,
+          children: /* @__PURE__ */ n(F, { className: "humany-message-content-bundle", children: a.map((c, g) => /* @__PURE__ */ n(
+            Y,
             {
               className: "humany-message-container",
               left: !0,
               ref: r,
               children: /* @__PURE__ */ n(
-                U,
+                V,
                 {
-                  content: l,
-                  stacked: m(h)
+                  content: c,
+                  stacked: d(g)
                 }
               )
             },
-            l.key
+            c.key
           )) })
         }
       )
-    ] }), x = () => /* @__PURE__ */ u(N, { children: [
-      /* @__PURE__ */ n(oe, { className: "humany-sr-only", children: /* @__PURE__ */ n(M, { name: c, timestamp: e }) }),
-      /* @__PURE__ */ n(tt, { timestamp: e, className: t, children: /* @__PURE__ */ n(_, { className: "humany-message-content-bundle", children: a.map((l, h) => /* @__PURE__ */ n(
-        F,
+    ] }), y = () => /* @__PURE__ */ h(N, { children: [
+      /* @__PURE__ */ n(oe, { className: "humany-sr-only", children: /* @__PURE__ */ n(M, { name: u, timestamp: e }) }),
+      /* @__PURE__ */ n(tt, { timestamp: e, className: t, children: /* @__PURE__ */ n(F, { className: "humany-message-content-bundle", children: a.map((c, g) => /* @__PURE__ */ n(
+        Y,
         {
           className: "humany-message-container",
           right: !0,
           ref: r,
           children: /* @__PURE__ */ n(
-            U,
+            V,
             {
               isUser: !0,
-              content: l,
-              stacked: m(h)
+              content: c,
+              stacked: d(g)
             }
           )
         },
-        l.key
+        c.key
       )) }) })
     ] });
     switch (s) {
-      case q.System:
-        return d();
-      case q.Agent:
+      case U.System:
+        return l();
+      case U.Agent:
+        return m();
+      case U.User:
         return y();
-      case q.User:
-        return x();
       default:
         return null;
     }
   }
-), U = ({
+), V = ({
   content: t,
   isUser: e,
   isSystem: o,
   stacked: s
 }) => {
-  const a = X(), { title: r, body: m, actions: c, form: d, items: y } = t;
-  return y ? /* @__PURE__ */ n(
-    Y,
+  const a = G(), { title: r, body: d, actions: u, form: l, items: m } = t;
+  return m ? /* @__PURE__ */ n(
+    X,
     {
       className: "humany-message-content",
       user: !!e,
       stacked: s,
-      children: /* @__PURE__ */ n(wt, { items: y, dispatch: a })
+      children: /* @__PURE__ */ n(wt, { items: m, dispatch: a })
     }
-  ) : /* @__PURE__ */ u(
-    Y,
+  ) : /* @__PURE__ */ h(
+    X,
     {
       className: "humany-message-content",
       padded: !o,
       user: !!e,
       stacked: s,
-      fullWidth: !!d || !!c,
+      fullWidth: !!l || !!u,
       children: [
-        r && /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(qe, { variant: "h2", children: r }) }),
-        m && /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(Fe, { html: m }) }),
-        d && /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(
+        r && /* @__PURE__ */ n(E, { children: /* @__PURE__ */ n(qe, { variant: "h2", children: r }) }),
+        d && /* @__PURE__ */ n(E, { children: /* @__PURE__ */ n(Fe, { html: d }) }),
+        l && /* @__PURE__ */ n(E, { children: /* @__PURE__ */ n(
           _e,
           {
-            ...d,
-            onChange: (l, h) => {
+            ...l,
+            onChange: (c, g) => {
               a("form", {
-                data: h,
-                formKey: d.schema.id,
-                actionKey: l
+                data: g,
+                formKey: l.schema.id,
+                actionKey: c
               });
             }
           }
         ) }),
-        c && /* @__PURE__ */ n(R, { children: /* @__PURE__ */ n(
+        u && /* @__PURE__ */ n(E, { children: /* @__PURE__ */ n(
           Ye,
           {
-            items: Object.keys(c).map((l) => ({ label: c[l], actionKey: l })),
-            renderItem: (l) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+            items: Object.keys(u).map((c) => ({ label: u[c], actionKey: c })),
+            renderItem: (c) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
               Xe,
               {
                 onClick: () => {
-                  a("action", l.actionKey);
+                  a("action", c.actionKey);
                 },
-                children: l.label
+                children: c.label
               }
-            ) }, l.actionKey)
+            ) }, c.actionKey)
           }
         ) })
       ]
@@ -1295,8 +1295,8 @@ const Oe = ({ className: t }) => {
   clip: rect(1px, 1px, 1px, 1px);
   left: -10000000px;
   top: auto;
-`, zt = () => {
-  const { skipToLatestMessageLabel: t = "Skip to latest message" } = S(), e = T(), o = () => {
+`, Lt = () => {
+  const { skipToLatestMessageLabel: t = "Skip to latest message" } = S(), e = I(), o = () => {
     const s = e.get("widgetDOMElement");
     if (s) {
       const a = s.querySelectorAll(
@@ -1306,7 +1306,7 @@ const Oe = ({ className: t }) => {
     }
   };
   return /* @__PURE__ */ n(
-    Lt,
+    zt,
     {
       className: "humany-skip-to-latest-message",
       onKeyDown: (s) => {
@@ -1316,7 +1316,7 @@ const Oe = ({ className: t }) => {
       children: t
     }
   );
-}, Lt = i.button`
+}, zt = i.button`
   position: absolute;
   bottom: 60px;
   text-align: center;
@@ -1334,53 +1334,61 @@ const Oe = ({ className: t }) => {
   &:focus-visible {
     left: 50%;
     transform: translateX(-50%);
-    ${f};
+    ${b};
   }
-`, fe = () => {
-  const t = me((c) => {
-    c && setTimeout(() => {
-      c.scrollIntoView({
+`, ye = () => {
+  const t = I(), e = ue((m) => {
+    m && setTimeout(() => {
+      m.scrollIntoView({
         block: "start",
         behavior: "smooth"
       });
     }, 250);
-  }, []), [e, o] = ie(!0), {
-    messages: s,
-    loading: a,
-    typingActors: r = []
-  } = S(), m = () => r && r.length ? r.map((c, d) => /* @__PURE__ */ n(
-    V,
+  }, []), [o, s] = ie(!0), {
+    messages: a,
+    loading: r,
+    typingActors: d = []
+  } = S(), u = () => d && d.length ? d.map((m, y) => /* @__PURE__ */ n(
+    _,
     {
-      id: `typing_${c.name}`,
-      children: /* @__PURE__ */ n(ge, { timestamp: Date.now(), sender: c, children: /* @__PURE__ */ n(
+      id: `typing_${m.name}`,
+      children: /* @__PURE__ */ n(fe, { timestamp: Date.now(), sender: m, children: /* @__PURE__ */ n(
         ne,
         {
           boxed: !0,
-          ref: t
+          ref: e
         }
       ) })
     },
-    `typing_${c.name}`
-  )) : null;
-  return /* @__PURE__ */ u(N, { children: [
-    /* @__PURE__ */ u(Nt, { tabIndex: 0, scrollableCss: e, ref: o, children: [
-      s && s.length ? s.map((c, d) => {
-        const { type: y, timestamp: x, sender: l, content: h } = c;
+    `typing_${m.name}`
+  )) : null, l = de.useRef((a == null ? void 0 : a.length) || 0);
+  return j(() => {
+    const m = t.get("widgetDOMElement");
+    if (m && m.id === "humany_bot") {
+      const y = m.querySelectorAll(
+        ".humany-conversation-entry"
+      );
+      y.length && y.length > l.current && (l.current = y.length, y[y.length - 1].focus());
+    }
+  }), /* @__PURE__ */ h(N, { children: [
+    /* @__PURE__ */ h(Nt, { tabIndex: 0, scrollableCss: o, ref: s, children: [
+      a && a.length ? a.map((m, y) => {
+        const { type: c, timestamp: g, sender: p, content: $ } = m;
         return /* @__PURE__ */ n(
-          V,
+          _,
           {
             className: "humany-conversation-entry",
             tabIndex: -1,
-            children: /* @__PURE__ */ n(Ct, { ...c, ref: t })
+            children: /* @__PURE__ */ n(Ct, { ...m, ref: e })
           },
-          `${y}_${l == null ? void 0 : l.name}_${x}_${h[0].key}`
+          `${c}_${p == null ? void 0 : p.name}_${g}_${$[0].key}`
         );
       }) : null,
-      m(),
-      a && /* @__PURE__ */ n(V, { children: /* @__PURE__ */ n(ne, { ref: t }) })
+      u(),
+      r && /* @__PURE__ */ n(_, { children: /* @__PURE__ */ n(ne, { ref: e }) })
     ] }),
     /* @__PURE__ */ n(Oe, {}),
-    /* @__PURE__ */ n(zt, {})
+    /* @__PURE__ */ n(Lt, {})
   ] });
 }, Nt = i.div`
   display: flex;
@@ -1393,9 +1401,9 @@ const Oe = ({ className: t }) => {
 }};
   ${(t) => !!t.scrollableCss && t.scrollableCss};
   &:focus-visible {
-    ${(t) => f(t)};
+    ${(t) => b(t)};
   }
-`, V = i.div`
+`, _ = i.div`
   margin: 0;
   margin-bottom: ${(t) => {
   var e;
@@ -1429,21 +1437,21 @@ const Oe = ({ className: t }) => {
   }
 
   &:focus-visible {
-    ${f}
+    ${b}
     border-radius: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }};
   }
-  ${(t) => Q(t)(
+  ${(t) => Z(t)(
   "h1",
-  b`
+  x`
         font-weight: normal;
       `
 )}
 `, Mt = ({ dispatch: t }) => {
-  const e = de(null);
-  return Z(() => {
+  const e = me(null);
+  return j(() => {
     e.current && e.current.parentNode && t("overlay-mounted", e.current);
   }, [e]), /* @__PURE__ */ n(
     ce,
@@ -1453,17 +1461,17 @@ const Oe = ({ className: t }) => {
       ref: e
     }
   );
-}, It = ({
+}, At = ({
   dispatch: t,
   header: e,
   buttonLabel: o
-}) => /* @__PURE__ */ u(
-  At,
+}) => /* @__PURE__ */ h(
+  It,
   {
     portalId: "humany-conversation-portal",
     className: "humany-conversation-outlet",
     children: [
-      /* @__PURE__ */ u(Ht, { className: "humany-conversation-outlet-head", children: [
+      /* @__PURE__ */ h(Ht, { className: "humany-conversation-outlet-head", children: [
         /* @__PURE__ */ n(
           Ot,
           {
@@ -1492,10 +1500,10 @@ const Oe = ({ className: t }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ n(fe, {})
+      /* @__PURE__ */ n(ye, {})
     ]
   }
-), At = i(ce)`
+), It = i(ce)`
   z-index: 11;
   top: auto;
   height: 65%;
@@ -1524,7 +1532,7 @@ const Oe = ({ className: t }) => {
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
 }};
   ${(t) => t.theme.border && `border-bottom: ${t.theme.border};`}
-`, Tt = i(G)`
+`, Tt = i(J)`
   font-size: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.medium;
@@ -1534,7 +1542,7 @@ const Oe = ({ className: t }) => {
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
   margin: 0;
-`, Ot = i(I)`
+`, Ot = i(A)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1548,7 +1556,7 @@ const Oe = ({ className: t }) => {
   ${(t) => t.theme.borderRadius && `border-radius: ${t.theme.borderRadius};`}
 
   &:focus-visible {
-    ${f};
+    ${b};
   }
 
   svg line {
@@ -1563,30 +1571,30 @@ const Oe = ({ className: t }) => {
     overlayConversationHeader: s,
     overlayConversationCloseLabel: a,
     conversationControllerId: r
-  } = S(), m = X(), d = T().get("$settings");
+  } = S(), d = G(), l = I().get("$settings");
   return /* @__PURE__ */ n(
     ze.Provider,
     {
       value: r ? { id: r } : null,
-      children: /* @__PURE__ */ u(he.Provider, { value: d == null ? void 0 : d.language, children: [
+      children: /* @__PURE__ */ h(ge.Provider, { value: l == null ? void 0 : l.language, children: [
         /* @__PURE__ */ n(
-          Rt,
+          Et,
           {
-            "aria-live": "assertive",
+            "aria-live": "polite",
             ...e,
-            className: A(
+            className: H(
               t,
               "humany-conversation-component"
             ),
-            children: /* @__PURE__ */ n(fe, {})
+            children: /* @__PURE__ */ n(ye, {})
           }
         ),
-        o && /* @__PURE__ */ u(N, { children: [
-          /* @__PURE__ */ n(Mt, { dispatch: m }),
+        o && /* @__PURE__ */ h(N, { children: [
+          /* @__PURE__ */ n(Mt, { dispatch: d }),
           o.conversation && /* @__PURE__ */ n(
-            It,
+            At,
             {
-              dispatch: m,
+              dispatch: d,
               header: s,
               buttonLabel: a
             }
@@ -1595,7 +1603,7 @@ const Oe = ({ className: t }) => {
       ] })
     }
   );
-}, Rt = i.div`
+}, Et = i.div`
   position: absolute;
   right: 0;
   left: 0;