@telia-ace/widget-conversation 1.3.0 → 1.3.1

package/{conversation-43344a01.mjs → conversation-3787f6ba.mjs}

@@ -1,75 +1,75 @@
 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 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 { Input as se, borderTabStyle as p, Button as A, SymbolBadge as w, useIsTabbing as ae, useDispatch as G, useProperties as C, useScroll as ie, useContainer as I, Typography as J, invertedHoverButton as xe, Html as Q, List as le, buttonCss as R, 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 { css as v, 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 U } from "./index.mjs";
+import { ConversationMessageListItemType as S, 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] = 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,
+  const [e, r] = q(""), [s, a] = q(0), [o, d] = q(0), m = ae(), c = G(), {
+    inputPlaceholder: f = "Type your message",
+    inputHidden: x = !1,
+    inputDisabled: l = !1,
+    sendButtonLabel: u = "Send message",
+    inputMultiline: b = !0,
     secondaryAction: $
-  } = S(), [L, v] = ie(!0), O = I();
+  } = C(), [k, y] = 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);
+    if (y.current) {
+      const { lineHeight: g, maxHeight: z } = getComputedStyle(y.current);
+      if (g && g.indexOf("px") > -1) {
+        const T = g.split("px"), $e = parseInt(T[0], 10);
         a($e);
         const ve = z.split("px");
         d(parseInt(ve[0], 10));
       }
     }
-  }, [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) => {
+  }, [y.current]);
+  const P = (g) => {
+    !g.shiftKey || !b ? (g.preventDefault(), e && e.length > 0 && (c("user-submit", { text: e }), r(""), W(""))) : e.length < 1 && g.preventDefault();
+  }, pe = (g) => {
     if (!$)
       return;
-    f.preventDefault(), l("action", {
+    g.preventDefault(), c("action", {
       actionKey: $.action,
       ...$
     });
     const { events: z } = O.get("$widget");
     z.dispatch("tracking:secondary-clicked", {});
-  }, be = (f) => {
-    if (p && v.current) {
-      const z = v.current.scrollHeight;
+  }, be = (g) => {
+    if (b && y.current) {
+      const z = y.current.scrollHeight;
       if (z > s) {
-        v.current.style.height = "auto";
+        y.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";
+        g.length < 1 && (T = s), y.current.style.height = `${T}px`, T >= o ? y.current.style.overflowY = "scroll" : y.current.style.overflowY = "hidden";
       }
     }
-  }, W = (f) => {
-    be(f), o(f), f && f.length > 0 && l("user-typing", { textLength: f.length });
+  }, W = (g) => {
+    be(g), r(g), g && g.length > 0 && c("user-typing", { textLength: g.length });
   };
-  return y ? null : /* @__PURE__ */ h(
+  return x ? null : /* @__PURE__ */ h(
     Ke,
     {
-      grow: p,
+      grow: b,
       className: H("humany-conversation-input", t),
-      scrollableCss: L,
-      isTabbing: u,
+      scrollableCss: k,
+      isTabbing: m,
       children: [
         $ && /* @__PURE__ */ n(
-          Be,
+          Re,
           {
             className: "humany-secondary-button",
-            disabled: c,
+            disabled: l,
             onClick: pe,
             title: $.label,
             "aria-label": $.label,
             children: /* @__PURE__ */ n(
-              k,
+              w,
               {
                 size: 24,
                 symbol: { type: "Svg", content: $.icon || "browse" }
@@ -77,28 +77,28 @@ const Oe = ({ className: t }) => {
             )
           }
         ),
-        p ? /* @__PURE__ */ n(
-          Ee,
+        b ? /* @__PURE__ */ n(
+          Be,
           {
             value: e,
             onChange: W,
             onEnter: P,
-            disabled: c,
-            "aria-label": m,
-            placeholder: m,
+            disabled: l,
+            "aria-label": f,
+            placeholder: f,
             type: "textarea",
             rows: 1,
-            ref: v
+            ref: y
           }
         ) : /* @__PURE__ */ n(
-          Re,
+          Ee,
           {
             value: e,
             onChange: W,
             onEnter: P,
-            disabled: c,
-            "aria-label": m,
-            placeholder: m
+            disabled: l,
+            "aria-label": f,
+            placeholder: f
           }
         ),
         /* @__PURE__ */ n(
@@ -107,8 +107,8 @@ const Oe = ({ className: t }) => {
             className: "humany-send-button",
             disabled: !1,
             onClick: P,
-            title: g,
-            "aria-label": g,
+            title: u,
+            "aria-label": u,
             children: /* @__PURE__ */ n(
               De,
               {
@@ -122,7 +122,7 @@ const Oe = ({ className: t }) => {
       ]
     }
   );
-}, Ee = i(se)`
+}, Be = 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 {
-    ${b};
+    ${p};
     outline-offset: 12px;
   }
-`, Re = i(se)`
+`, Ee = i(se)`
   flex: 1;
   border: none;
   background-color: transparent;
@@ -182,19 +182,19 @@ const Oe = ({ className: t }) => {
   border: none;
   color: #a6a6a6;
   &:focus-visible {
-    ${b};
+    ${p};
   }
-`, Be = i(he)`
+`, Re = i(he)`
   border-right: ${(t) => t.theme.border};
   margin: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
 }} 0;
 `, Ke = i.div`
-  ${(t) => t.grow ? x`
+  ${(t) => t.grow ? v`
           min-height: 50px;
           max-height: 150px;
-        ` : x`
+        ` : v`
           height: 50px;
         `}
   flex: 0 0 auto;
@@ -205,7 +205,7 @@ 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 && b}
+  ${(t) => t["data-has-focus"] && t.isTabbing && p}
   textarea {
     ${(t) => !!t.scrollableCss && t.scrollableCss}
   }
@@ -213,7 +213,7 @@ const Oe = ({ className: t }) => {
   ({
     hasContent: t,
     ...e
-  }) => /* @__PURE__ */ n(k, { ...e })
+  }) => /* @__PURE__ */ n(w, { ...e })
 )`
   line,
   path {
@@ -343,13 +343,13 @@ const Oe = ({ className: t }) => {
   ${(t) => t.fullWidth && "width: 100%;"}
 `, Ue = (t, e) => {
   var s, a;
-  const o = x`
+  const r = v`
     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 ? x`
-    ${o}
+  return e.borderRadius ? v`
+    ${r}
 
     border-top-right-radius: ${e.borderRadius};
     border-bottom-right-radius: ${e.borderRadius};
@@ -361,15 +361,15 @@ const Oe = ({ className: t }) => {
     ${t === "last" && `
             border-bottom-left-radius: ${e.borderRadius};
         `}
-  ` : o;
+  ` : r;
 }, Ve = (t, e) => {
   var s, a;
-  const o = x`
+  const r = v`
     background-color: ${(s = e.colors) == null ? void 0 : s.primary};
     color: ${(a = e.colors) == null ? void 0 : a.accent};
   `;
-  return e.borderRadius ? x`
-    ${o}
+  return e.borderRadius ? v`
+    ${r}
 
     border-top-left-radius: ${e.borderRadius};
     border-bottom-left-radius: ${e.borderRadius};
@@ -381,8 +381,8 @@ const Oe = ({ className: t }) => {
     ${t === "last" && `
             border-bottom-right-radius: ${e.borderRadius};
         `}
-  ` : o;
-}, E = i.div`
+  ` : r;
+}, B = i.div`
   margin-bottom: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
@@ -390,17 +390,17 @@ const Oe = ({ className: t }) => {
   &:last-child {
     margin-bottom: 0;
   }
-`, C = (t) => {
-  var e, o;
-  return x`
+`, L = (t) => {
+  var e, r;
+  return v`
   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};
 `;
 }, _e = i(Te)`
   & 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) && xe({
+  var e, r, s, a;
+  return ((e = t.theme.colors) == null ? void 0 : e.primary) && ((r = t.theme.colors) == null ? void 0 : r.accent) && xe({
     active: !1,
     primaryColor: (s = t.theme.colors) == null ? void 0 : s.primary,
     secondaryColor: (a = t.theme.colors) == null ? void 0 : a.accent,
@@ -431,7 +431,7 @@ const Oe = ({ className: t }) => {
     &: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) && p;
 }};
     }
   }
@@ -449,7 +449,7 @@ const Oe = ({ className: t }) => {
 }};
   }
 `, Xe = i.button`
-  ${(t) => B(t)};
+  ${(t) => R(t)};
   display: block;
   background-color: ${(t) => {
   var e;
@@ -458,11 +458,11 @@ const Oe = ({ className: t }) => {
   width: 100%;
   color: #fff;
   &:focus-visible {
-    ${b}
+    ${p}
     background-color: transparent;
   }
 `, ne = ee(
-  ({ boxed: t, className: e, agentData: o }, s) => /* @__PURE__ */ n(F, { ref: s, children: /* @__PURE__ */ n(Y, { left: t, center: !t, children: /* @__PURE__ */ n(
+  ({ boxed: t, className: e, agentData: r }, s) => /* @__PURE__ */ n(F, { ref: s, children: /* @__PURE__ */ n(Y, { left: t, center: !t, children: /* @__PURE__ */ n(
     X,
     {
       padded: !!t,
@@ -489,27 +489,27 @@ const Oe = ({ className: t }) => {
   var e;
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
-`, re = (t, e) => new Date(t).toLocaleTimeString(e || [], {
+`, oe = (t, e) => new Date(t).toLocaleTimeString(e || [], {
   hour: "numeric",
   minute: "2-digit"
 }), M = ({
   className: t,
   name: e,
-  timestamp: o,
+  timestamp: r,
   ariaHidden: s = !1
 }) => {
   const a = Ae(ge);
-  if (!e && !o)
+  if (!e && !r)
     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 });
+  let o = "";
+  return e ? r ? o = `${e}: ${oe(r, a)}` : o = e : r && (o = oe(r, a)), /* @__PURE__ */ n(Ge, { "aria-hidden": s, children: o });
 }, fe = ({
   className: t,
   children: e,
-  sender: o,
+  sender: r,
   timestamp: s
 }) => {
-  const { avatar: a, name: r } = o, { avatarSize: d, avatarLabel: u = "Avatar" } = S();
+  const { avatar: a, name: o } = r, { avatarSize: d, avatarLabel: m = "Avatar" } = C();
   return /* @__PURE__ */ h(
     Je,
     {
@@ -521,13 +521,13 @@ const Oe = ({ className: t }) => {
       children: [
         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, alt: u })
-        ) : /* @__PURE__ */ n(k, { symbol: a }) }),
+          /* @__PURE__ */ n("img", { src: a, alt: m })
+        ) : /* @__PURE__ */ n(w, { symbol: a }) }),
         e,
         /* @__PURE__ */ n(
           M,
           {
-            name: r,
+            name: o,
             timestamp: s,
             ariaHidden: !0
           }
@@ -539,13 +539,13 @@ const Oe = ({ className: t }) => {
   display: grid;
   margin-right: 10%;
   width: 90%;
-  ${(t) => t.hasAvatar ? x`
+  ${(t) => t.hasAvatar ? v`
           grid-template-columns: auto 1fr;
           grid-template-rows: 1fr auto;
           grid-template-areas:
             'avatar content'
             '. info';
-        ` : x`
+        ` : v`
           grid-template-columns: 1fr;
           grid-template-rows: 1fr auto;
           grid-template-areas:
@@ -553,10 +553,10 @@ const Oe = ({ className: t }) => {
             'info';
         `};
 `, Qe = ee(
-  ({ className: t, children: e, timestamp: o, discrete: s, fullWidth: a }, r) => /* @__PURE__ */ n(
+  ({ className: t, children: e, timestamp: r, discrete: s, fullWidth: a }, o) => /* @__PURE__ */ n(
     Ze,
     {
-      ref: r,
+      ref: o,
       className: H(
         t,
         "humany-conversation-system-message"
@@ -564,10 +564,10 @@ const Oe = ({ className: t }) => {
       fullWidth: a,
       children: s ? /* @__PURE__ */ h(et, { className: "humany-conversation-discrete-message", children: [
         e,
-        /* @__PURE__ */ n(M, { timestamp: o })
+        /* @__PURE__ */ n(M, { timestamp: r })
       ] }) : /* @__PURE__ */ h(N, { children: [
         e,
-        /* @__PURE__ */ n(M, { timestamp: o })
+        /* @__PURE__ */ n(M, { timestamp: r })
       ] })
     }
   )
@@ -592,8 +592,8 @@ const Oe = ({ className: t }) => {
   > p {
     margin: 0;
   }
-`, tt = ({ className: t, children: e, timestamp: o }) => {
-  const { userLabel: s = "" } = S();
+`, tt = ({ className: t, children: e, timestamp: r }) => {
+  const { userLabel: s = "" } = C();
   return /* @__PURE__ */ h(
     nt,
     {
@@ -607,7 +607,7 @@ const Oe = ({ className: t }) => {
           M,
           {
             name: s,
-            timestamp: o,
+            timestamp: r,
             ariaHidden: !0
           }
         )
@@ -623,47 +623,47 @@ const Oe = ({ className: t }) => {
 `, te = (t) => Array.isArray(t) ? t : Object.keys(t).map((e) => ({
   label: t[e],
   actionKey: e
-})), rt = ({ header: t, actions: e, dispatch: o }) => {
+})), ot = ({ header: t, actions: e, dispatch: r }) => {
   const s = I(), { events: a } = s.get("$widget");
   return /* @__PURE__ */ n(
-    ot,
+    rt,
     {
       className: "humany-conversation-button-list",
       header: t,
       items: te(e),
-      renderItem: (r) => {
-        var u;
-        const d = !!((u = r == null ? void 0 : r.data) != null && u.href);
+      renderItem: (o) => {
+        var m;
+        const d = !!((m = o == null ? void 0 : o.data) != null && m.href);
         return /* @__PURE__ */ n("li", { children: d ? /* @__PURE__ */ h(
           st,
           {
-            href: r.data.href,
-            target: r.data.target,
-            "aria-label": r.label,
-            title: r.label,
+            href: o.data.href,
+            target: o.data.target,
+            "aria-label": o.label,
+            title: o.label,
             children: [
-              /* @__PURE__ */ n(k, { symbol: r.symbol }),
-              r.label
+              /* @__PURE__ */ n(w, { symbol: o.symbol }),
+              o.label
             ]
           }
         ) : /* @__PURE__ */ h(
           at,
           {
             onClick: () => {
-              o("action", r), a.dispatch("tracking:button-list-item-clicked", r);
+              r("action", o), a.dispatch("tracking:button-list-item-clicked", o);
             },
-            "aria-label": r.label,
-            title: r.label,
+            "aria-label": o.label,
+            title: o.label,
             children: [
-              /* @__PURE__ */ n(k, { symbol: r.symbol }),
-              r.label
+              /* @__PURE__ */ n(w, { symbol: o.symbol }),
+              o.label
             ]
           }
-        ) }, r.actionKey);
+        ) }, o.actionKey);
       }
     }
   );
-}, ot = i(K)`
+}, rt = i(K)`
   ${D}
   > ul {
     display: flex;
@@ -676,9 +676,9 @@ const Oe = ({ className: t }) => {
       margin: 0;
     }
   }
-  ${C}
+  ${L}
 `, st = i(ke)`
-  ${B};
+  ${R};
 
   display: block;
   padding: ${(t) => {
@@ -694,7 +694,7 @@ const Oe = ({ className: t }) => {
   overflow: hidden;
   text-overflow: ellipsis;
   &:focus-visible {
-    ${b}
+    ${p}
     background-color: transparent;
   }
 
@@ -706,7 +706,7 @@ const Oe = ({ className: t }) => {
 }};
   }
 `, at = i(A)`
-  ${B};
+  ${R};
 
   display: block;
   padding: ${(t) => {
@@ -722,7 +722,7 @@ const Oe = ({ className: t }) => {
   overflow: hidden;
   text-overflow: ellipsis;
   &:focus-visible {
-    ${b}
+    ${p}
     background-color: transparent;
   }
 
@@ -734,23 +734,23 @@ const Oe = ({ className: t }) => {
 }};
   }
 `, it = ({ type: t, content: e = {} }) => {
-  const o = we(t);
-  return !o || !t ? null : /* @__PURE__ */ n(Ie, { fallback: null, children: /* @__PURE__ */ n(o, { ...e }) });
+  const r = we(t);
+  return !r || !t ? null : /* @__PURE__ */ n(Ie, { fallback: null, children: /* @__PURE__ */ n(r, { ...e }) });
 }, lt = ({ body: t }) => /* @__PURE__ */ n(ct, { className: "humany-html", html: t }), ct = i(Q)`
   ${Se}
   color: inherit;
   white-space: normal;
-  ${C}
+  ${L}
   a {
     color: ${(t) => t.theme.colors.link};
     &:focus-visible {
-      ${b};
+      ${p};
     }
   }
   p {
     word-break: auto-phrase;
   }
-`, dt = ({ header: t, actions: e, dispatch: o }) => /* @__PURE__ */ n(
+`, dt = ({ header: t, actions: e, dispatch: r }) => /* @__PURE__ */ n(
   mt,
   {
     className: "humany-conversation-item-list",
@@ -760,7 +760,7 @@ const Oe = ({ className: t }) => {
       var a;
       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,
+          w,
           {
             size: 22,
             symbol: {
@@ -774,7 +774,7 @@ const Oe = ({ className: t }) => {
             A,
             {
               onClick: () => {
-                o("action", s);
+                r("action", s);
               },
               "aria-label": s.label,
               title: s.label,
@@ -790,7 +790,7 @@ const Oe = ({ className: t }) => {
   ${D}
 
   > .humany-paragraph {
-    ${C}
+    ${L}
     margin-bottom: 0;
 
     h1 {
@@ -800,7 +800,7 @@ const Oe = ({ className: t }) => {
 
   ${(t) => Z(t)(
   "h1",
-  x`
+  v`
         white-space: normal;
       `
 )}
@@ -830,7 +830,7 @@ const Oe = ({ className: t }) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.medium;
 }};
-  ${C}
+  ${L}
 
   .item-icon {
   }
@@ -863,7 +863,7 @@ const Oe = ({ className: t }) => {
     margin: 0;
 
     &:focus-visible {
-      ${b}
+      ${p}
       span {
         color: ${(t) => {
   var e;
@@ -873,32 +873,32 @@ const Oe = ({ className: t }) => {
       }
     }
   }
-`, ht = ({ header: t, actions: e, dispatch: o }) => {
-  const s = Ce(e), a = me(), r = ae(), d = I(), { events: u } = d.get("$widget");
+`, ht = ({ header: t, actions: e, dispatch: r }) => {
+  const s = Ce(e), a = me(), o = ae(), d = I(), { events: m } = d.get("$widget");
   return j(() => {
     if (s && Array.isArray(e) && Array.isArray(s) && s.length < e.length && a.current) {
-      const l = a.current.querySelectorAll(
+      const c = a.current.querySelectorAll(
         ".humany-conversation-link-list > ul > li"
-      ), m = l[s.length];
-      if (l.length === e.length && s.length) {
-        const y = l[s.length - 1];
-        if (y) {
-          const c = y.querySelector(
+      ), f = c[s.length];
+      if (c.length === e.length && s.length) {
+        const x = c[s.length - 1];
+        if (x) {
+          const l = x.querySelector(
             ".humany-button"
           );
-          c && c.focus();
+          l && l.focus();
         }
       } else
-        m && new MutationObserver((c, g) => {
-          c.forEach((p) => {
-            if (p.addedNodes) {
+        f && new MutationObserver((l, u) => {
+          l.forEach((b) => {
+            if (b.addedNodes) {
               const $ = Array.from(
-                p.addedNodes
-              ).find((L) => L.tagName === "BUTTON");
-              $ && Ne(a.current, document.activeElement) && (r && $.focus(), g.disconnect());
+                b.addedNodes
+              ).find((k) => k.tagName === "BUTTON");
+              $ && Ne(a.current, document.activeElement) && (o && $.focus(), u.disconnect());
             }
           });
-        }).observe(m, {
+        }).observe(f, {
           attributes: !1,
           characterData: !1,
           childList: !0,
@@ -914,19 +914,19 @@ const Oe = ({ className: t }) => {
       className: "humany-conversation-link-list",
       header: t,
       items: te(e),
-      renderItem: (l) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ h(
+      renderItem: (c) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ h(
         ft,
         {
-          help: l.actionKey === "help",
+          help: c.actionKey === "help",
           onClick: () => {
-            o("action", l), u.dispatch("tracking:link-list-item-clicked", l);
+            r("action", c), m.dispatch("tracking:link-list-item-clicked", c);
           },
-          "aria-label": l.label,
-          title: l.label,
+          "aria-label": c.label,
+          title: c.label,
           children: [
-            l.label,
-            l.actionKey === "help" && /* @__PURE__ */ n(
-              k,
+            c.label,
+            c.actionKey === "help" && /* @__PURE__ */ n(
+              w,
               {
                 size: 14,
                 symbol: {
@@ -937,16 +937,16 @@ const Oe = ({ className: t }) => {
             )
           ]
         }
-      ) }, l.actionKey)
+      ) }, c.actionKey)
     }
   );
 }, gt = i(K)`
   ${D}
-  ${C}
+  ${L}
 
     ${(t) => Z(t)(
   "h1",
-  x`
+  v`
         white-space: normal;
       `
 )}
@@ -975,20 +975,20 @@ const Oe = ({ className: t }) => {
   overflow: hidden;
 
   ${(t) => {
-  var e, o;
-  return t.help && x`
+  var e, r;
+  return t.help && v`
       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 {
-    ${b}
+    ${p}
     span {
       color: ${(t) => {
   var e;
@@ -1001,11 +1001,11 @@ const Oe = ({ className: t }) => {
   ${(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(J)`
-  ${C}
+  ${L}
 `, vt = ({
   header: t = "Video call",
   acceptLabel: e = "Accept",
-  declineLabel: o = "Decline",
+  declineLabel: r = "Decline",
   dispatch: s
 }) => {
   const a = He(() => [
@@ -1018,34 +1018,34 @@ const Oe = ({ className: t }) => {
       }
     },
     {
-      label: o,
+      label: r,
       actionKey: "decline-video-call",
       symbol: {
         type: "Svg",
         content: "close"
       }
     }
-  ], [e, o]);
+  ], [e, r]);
   return /* @__PURE__ */ n(
     xt,
     {
       className: "humany-conversation-video-request",
       header: t,
       items: a,
-      renderItem: (r) => {
-        const d = r.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
+      renderItem: (o) => {
+        const d = o.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
         return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
           kt,
           {
             onClick: () => {
-              s("action", r);
+              s("action", o);
             },
-            "aria-label": r.label,
-            title: r.label,
+            "aria-label": o.label,
+            title: o.label,
             bgColor: d,
-            children: /* @__PURE__ */ n(k, { symbol: r.symbol, size: 25 })
+            children: /* @__PURE__ */ n(w, { symbol: o.symbol, size: 25 })
           }
-        ) }, r.actionKey);
+        ) }, o.actionKey);
       }
     }
   );
@@ -1062,9 +1062,9 @@ const Oe = ({ className: t }) => {
       margin: 0;
     }
   }
-  ${(t) => C(t)}
+  ${(t) => L(t)}
 `, kt = i(A)`
-  ${B};
+  ${R};
 
   background-color: ${(t) => t.bgColor};
   display: flex;
@@ -1076,7 +1076,7 @@ const Oe = ({ className: t }) => {
   border-radius: 100%;
 
   &:focus-visible {
-    ${b}
+    ${p}
     background-color: transparent;
 
     i,
@@ -1103,43 +1103,43 @@ const Oe = ({ className: t }) => {
       stroke: #fff;
     }
   }
-`, 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(
+`, E = ([t, e]) => ({ type: t, content: e }), wt = ({ items: t, dispatch: e }) => {
+  const r = t.map(E).filter((o) => o.type.includes("ace-knowledge")).map((o) => "humany-" + o.type.toString());
+  return !!t.map(E).filter((o) => {
+    const d = o == null ? void 0 : o.content, m = d == null ? void 0 : d.actions;
+    return !!(m != null && m.filter((c) => c.actionKey === "contact").length);
+  }).length && r.push("humany-secondary-action-list"), !!t.map(E).filter((o) => {
+    var m;
+    const d = o == null ? void 0 : o.content;
+    return !!((m = d == null ? void 0 : d.tags) != null && m.includes("category"));
+  }).length && r.push("humany-category-list"), /* @__PURE__ */ n(
     St,
     {
       role: "none",
       className: H(
         "humany-message-list",
-        o.join(" ")
+        r.join(" ")
       ),
-      items: t.map(R),
+      items: t.map(E),
       renderLi: !0,
-      renderItem: (r) => {
-        switch (r.type) {
-          case w.Text:
-            return /* @__PURE__ */ n(bt, { text: r.content });
-          case w.HTML:
-            return /* @__PURE__ */ n(lt, { ...r.content });
-          case w.Separator:
-            return /* @__PURE__ */ n(yt, { ...r.content });
-          case w.ItemList:
-            return /* @__PURE__ */ n(dt, { ...r.content, dispatch: e });
-          case w.LinkList:
-            return /* @__PURE__ */ n(ht, { ...r.content, dispatch: e });
-          case w.ButtonList:
-            return /* @__PURE__ */ n(rt, { ...r.content, dispatch: e });
-          case w.VideoRequest:
-            return /* @__PURE__ */ n(vt, { ...r.content, dispatch: e });
+      renderItem: (o) => {
+        switch (o.type) {
+          case S.Text:
+            return /* @__PURE__ */ n(bt, { text: o.content });
+          case S.HTML:
+            return /* @__PURE__ */ n(lt, { ...o.content });
+          case S.Separator:
+            return /* @__PURE__ */ n(yt, { ...o.content });
+          case S.ItemList:
+            return /* @__PURE__ */ n(dt, { ...o.content, dispatch: e });
+          case S.LinkList:
+            return /* @__PURE__ */ n(ht, { ...o.content, dispatch: e });
+          case S.ButtonList:
+            return /* @__PURE__ */ n(ot, { ...o.content, dispatch: e });
+          case S.VideoRequest:
+            return /* @__PURE__ */ n(vt, { ...o.content, dispatch: e });
           default:
-            return /* @__PURE__ */ n(it, { type: r.type, content: r.content });
+            return /* @__PURE__ */ n(it, { type: o.type, content: o.content });
         }
       }
     }
@@ -1151,80 +1151,80 @@ const Oe = ({ className: t }) => {
     margin: 0;
   }
 `, Ct = ee(
-  ({ className: t, timestamp: e, sender: o, type: s, content: a }, r) => {
+  ({ className: t, timestamp: e, sender: r, type: s, content: a }, o) => {
     const d = ue(
-      (c) => {
-        let g = "first";
-        return a.length > 1 && (g = c === 0 ? "first" : c + 1 === a.length ? "last" : "middle"), g;
+      (l) => {
+        let u = "first";
+        return a.length > 1 && (u = l === 0 ? "first" : l + 1 === a.length ? "last" : "middle"), u;
       },
       [a]
-    ), { 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;
+    ), { userLabel: m = "" } = C(), c = () => /* @__PURE__ */ n(N, { children: a.map((l) => {
+      const { key: u, body: b, title: $, form: k, actions: y } = l, O = !!b && !$ && !k && !y;
       return /* @__PURE__ */ n(
         Qe,
         {
           className: t,
           discrete: O,
-          ref: r,
+          ref: o,
           timestamp: e,
-          fullWidth: !!L || !!v,
-          children: O && p ? /* @__PURE__ */ n(Q, { html: p }) : /* @__PURE__ */ n(V, { isSystem: !0, content: c })
+          fullWidth: !!k || !!y,
+          children: O && b ? /* @__PURE__ */ n(Q, { html: b }) : /* @__PURE__ */ n(V, { isSystem: !0, content: l })
         },
-        g
+        u
       );
-    }) }), 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 }) }),
+    }) }), f = () => /* @__PURE__ */ h(N, { children: [
+      /* @__PURE__ */ n(re, { className: "humany-sr-only", children: /* @__PURE__ */ n(M, { name: r == null ? void 0 : r.name, timestamp: e }) }),
       /* @__PURE__ */ n(
         fe,
         {
-          sender: o,
+          sender: r,
           timestamp: e,
           className: t,
-          children: /* @__PURE__ */ n(F, { className: "humany-message-content-bundle", children: a.map((c, g) => /* @__PURE__ */ n(
+          children: /* @__PURE__ */ n(F, { className: "humany-message-content-bundle", children: a.map((l, u) => /* @__PURE__ */ n(
             Y,
             {
               className: "humany-message-container",
               left: !0,
-              ref: r,
+              ref: o,
               children: /* @__PURE__ */ n(
                 V,
                 {
-                  content: c,
-                  stacked: d(g)
+                  content: l,
+                  stacked: d(u)
                 }
               )
             },
-            c.key
+            l.key
           )) })
         }
       )
-    ] }), 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(
+    ] }), x = () => /* @__PURE__ */ h(N, { children: [
+      /* @__PURE__ */ n(re, { className: "humany-sr-only", children: /* @__PURE__ */ n(M, { name: m, timestamp: e }) }),
+      /* @__PURE__ */ n(tt, { timestamp: e, className: t, children: /* @__PURE__ */ n(F, { className: "humany-message-content-bundle", children: a.map((l, u) => /* @__PURE__ */ n(
         Y,
         {
           className: "humany-message-container",
           right: !0,
-          ref: r,
+          ref: o,
           children: /* @__PURE__ */ n(
             V,
             {
               isUser: !0,
-              content: c,
-              stacked: d(g)
+              content: l,
+              stacked: d(u)
             }
           )
         },
-        c.key
+        l.key
       )) }) })
     ] });
     switch (s) {
       case U.System:
-        return l();
+        return c();
       case U.Agent:
-        return m();
+        return f();
       case U.User:
-        return y();
+        return x();
       default:
         return null;
     }
@@ -1232,61 +1232,61 @@ const Oe = ({ className: t }) => {
 ), V = ({
   content: t,
   isUser: e,
-  isSystem: o,
+  isSystem: r,
   stacked: s
 }) => {
-  const a = G(), { title: r, body: d, actions: u, form: l, items: m } = t;
-  return m ? /* @__PURE__ */ n(
+  const a = G(), { title: o, body: d, actions: m, form: c, items: f } = t;
+  return f ? /* @__PURE__ */ n(
     X,
     {
       className: "humany-message-content",
       user: !!e,
       stacked: s,
-      children: /* @__PURE__ */ n(wt, { items: m, dispatch: a })
+      children: /* @__PURE__ */ n(wt, { items: f, dispatch: a })
     }
   ) : /* @__PURE__ */ h(
     X,
     {
       className: "humany-message-content",
-      padded: !o,
+      padded: !r,
       user: !!e,
       stacked: s,
-      fullWidth: !!l || !!u,
+      fullWidth: !!c || !!m,
       children: [
-        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(
+        o && /* @__PURE__ */ n(B, { children: /* @__PURE__ */ n(qe, { variant: "h2", children: o }) }),
+        d && /* @__PURE__ */ n(B, { children: /* @__PURE__ */ n(Fe, { html: d }) }),
+        c && /* @__PURE__ */ n(B, { children: /* @__PURE__ */ n(
           _e,
           {
-            ...l,
-            onChange: (c, g) => {
+            ...c,
+            onChange: (l, u) => {
               a("form", {
-                data: g,
-                formKey: l.schema.id,
-                actionKey: c
+                data: u,
+                formKey: c.schema.id,
+                actionKey: l
               });
             }
           }
         ) }),
-        u && /* @__PURE__ */ n(E, { children: /* @__PURE__ */ n(
+        m && /* @__PURE__ */ n(B, { children: /* @__PURE__ */ n(
           Ye,
           {
-            items: Object.keys(u).map((c) => ({ label: u[c], actionKey: c })),
-            renderItem: (c) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
+            items: Object.keys(m).map((l) => ({ label: m[l], actionKey: l })),
+            renderItem: (l) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
               Xe,
               {
                 onClick: () => {
-                  a("action", c.actionKey);
+                  a("action", l.actionKey);
                 },
-                children: c.label
+                children: l.label
               }
-            ) }, c.actionKey)
+            ) }, l.actionKey)
           }
         ) })
       ]
     }
   );
-}, oe = i.div`
+}, re = i.div`
   position: absolute !important;
   height: 1px;
   width: 1px;
@@ -1296,7 +1296,7 @@ const Oe = ({ className: t }) => {
   left: -10000000px;
   top: auto;
 `, Lt = () => {
-  const { skipToLatestMessageLabel: t = "Skip to latest message" } = S(), e = I(), o = () => {
+  const { skipToLatestMessageLabel: t = "Skip to latest message" } = C(), e = I(), r = () => {
     const s = e.get("widgetDOMElement");
     if (s) {
       const a = s.querySelectorAll(
@@ -1310,9 +1310,9 @@ const Oe = ({ className: t }) => {
     {
       className: "humany-skip-to-latest-message",
       onKeyDown: (s) => {
-        (s.key === "Enter" || s.keyCode === 13) && o();
+        (s.key === "Enter" || s.keyCode === 13) && r();
       },
-      onClick: o,
+      onClick: r,
       children: t
     }
   );
@@ -1334,25 +1334,26 @@ const Oe = ({ className: t }) => {
   &:focus-visible {
     left: 50%;
     transform: translateX(-50%);
-    ${b};
+    ${p};
   }
 `, ye = () => {
-  const t = I(), e = ue((m) => {
-    m && setTimeout(() => {
-      m.scrollIntoView({
+  const t = I(), e = ue((l) => {
+    l && setTimeout(() => {
+      l.scrollIntoView({
         block: "start",
         behavior: "smooth"
       });
     }, 250);
-  }, []), [o, s] = ie(!0), {
+  }, []), [r, s] = ie(!0), {
     messages: a,
-    loading: r,
-    typingActors: d = []
-  } = S(), u = () => d && d.length ? d.map((m, y) => /* @__PURE__ */ n(
+    loading: o,
+    typingActors: d = [],
+    providers: m = []
+  } = C(), c = () => d && d.length ? d.map((l, u) => /* @__PURE__ */ n(
     _,
     {
-      id: `typing_${m.name}`,
-      children: /* @__PURE__ */ n(fe, { timestamp: Date.now(), sender: m, children: /* @__PURE__ */ n(
+      id: `typing_${l.name}`,
+      children: /* @__PURE__ */ n(fe, { timestamp: Date.now(), sender: l, children: /* @__PURE__ */ n(
         ne,
         {
           boxed: !0,
@@ -1360,32 +1361,32 @@ const Oe = ({ className: t }) => {
         }
       ) })
     },
-    `typing_${m.name}`
-  )) : null, l = de.useRef((a == null ? void 0 : a.length) || 0);
+    `typing_${l.name}`
+  )) : null, f = de.useRef((a == null ? void 0 : a.length) || 0), x = m.includes("ace-knowledge-bot");
   return j(() => {
-    const m = t.get("widgetDOMElement");
-    if (m && m.id === "humany_bot") {
-      const y = m.querySelectorAll(
+    const l = t.get("widgetDOMElement");
+    if (l && x) {
+      const u = l.querySelectorAll(
         ".humany-conversation-entry"
       );
-      y.length && y.length > l.current && (l.current = y.length, y[y.length - 1].focus());
+      u.length && u.length > f.current && (f.current = u.length, u[u.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;
+    /* @__PURE__ */ h(Nt, { tabIndex: 0, scrollableCss: r, ref: s, children: [
+      a && a.length ? a.map((l, u) => {
+        const { type: b, timestamp: $, sender: k, content: y } = l;
         return /* @__PURE__ */ n(
           _,
           {
             className: "humany-conversation-entry",
             tabIndex: -1,
-            children: /* @__PURE__ */ n(Ct, { ...m, ref: e })
+            children: /* @__PURE__ */ n(Ct, { ...l, ref: e })
           },
-          `${c}_${p == null ? void 0 : p.name}_${g}_${$[0].key}`
+          `${b}_${k == null ? void 0 : k.name}_${$}_${y[0].key}`
         );
       }) : null,
-      u(),
-      r && /* @__PURE__ */ n(_, { children: /* @__PURE__ */ n(ne, { ref: e }) })
+      c(),
+      o && /* @__PURE__ */ n(_, { children: /* @__PURE__ */ n(ne, { ref: e }) })
     ] }),
     /* @__PURE__ */ n(Oe, {}),
     /* @__PURE__ */ n(Lt, {})
@@ -1401,7 +1402,7 @@ const Oe = ({ className: t }) => {
 }};
   ${(t) => !!t.scrollableCss && t.scrollableCss};
   &:focus-visible {
-    ${(t) => b(t)};
+    ${(t) => p(t)};
   }
 `, _ = i.div`
   margin: 0;
@@ -1437,7 +1438,7 @@ const Oe = ({ className: t }) => {
   }
 
   &:focus-visible {
-    ${b}
+    ${p}
     border-radius: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.small;
@@ -1445,7 +1446,7 @@ const Oe = ({ className: t }) => {
   }
   ${(t) => Z(t)(
   "h1",
-  x`
+  v`
         font-weight: normal;
       `
 )}
@@ -1464,7 +1465,7 @@ const Oe = ({ className: t }) => {
 }, At = ({
   dispatch: t,
   header: e,
-  buttonLabel: o
+  buttonLabel: r
 }) => /* @__PURE__ */ h(
   It,
   {
@@ -1476,11 +1477,11 @@ const Oe = ({ className: t }) => {
           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(
-              k,
+              w,
               {
                 symbol: {
                   type: "Svg",
@@ -1556,7 +1557,7 @@ const Oe = ({ className: t }) => {
   ${(t) => t.theme.borderRadius && `border-radius: ${t.theme.borderRadius};`}
 
   &:focus-visible {
-    ${b};
+    ${p};
   }
 
   svg line {
@@ -1567,18 +1568,18 @@ const Oe = ({ className: t }) => {
   }
 `, Ft = ({ className: t, ...e }) => {
   const {
-    overlay: o,
+    overlay: r,
     overlayConversationHeader: s,
     overlayConversationCloseLabel: a,
-    conversationControllerId: r
-  } = S(), d = G(), l = I().get("$settings");
+    conversationControllerId: o
+  } = C(), d = G(), c = I().get("$settings");
   return /* @__PURE__ */ n(
     ze.Provider,
     {
-      value: r ? { id: r } : null,
-      children: /* @__PURE__ */ h(ge.Provider, { value: l == null ? void 0 : l.language, children: [
+      value: o ? { id: o } : null,
+      children: /* @__PURE__ */ h(ge.Provider, { value: c == null ? void 0 : c.language, children: [
         /* @__PURE__ */ n(
-          Et,
+          Bt,
           {
             "aria-live": "polite",
             ...e,
@@ -1589,9 +1590,9 @@ const Oe = ({ className: t }) => {
             children: /* @__PURE__ */ n(ye, {})
           }
         ),
-        o && /* @__PURE__ */ h(N, { children: [
+        r && /* @__PURE__ */ h(N, { children: [
           /* @__PURE__ */ n(Mt, { dispatch: d }),
-          o.conversation && /* @__PURE__ */ n(
+          r.conversation && /* @__PURE__ */ n(
             At,
             {
               dispatch: d,
@@ -1603,7 +1604,7 @@ const Oe = ({ className: t }) => {
       ] })
     }
   );
-}, Et = i.div`
+}, Bt = i.div`
   position: absolute;
   right: 0;
   left: 0;