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

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

@@ -1,16 +1,16 @@
-import { jsx as n, jsxs as u, Fragment as B } from "react/jsx-runtime";
+import { jsx as n, jsxs as m, Fragment as R } from "react/jsx-runtime";
 import s from "@emotion/styled";
-import { Input as te, Button as z, borderTabStyle as f, SymbolBadge as x, useIsTabbing as fe, useDispatch as V, useProperties as I, useScroll as ne, Typography as q, invertedHoverButton as pe, Html as Y, List as re, buttonCss as G, ItemList as K, itemList as j, useComponent as ye, genericHtml as be, headingElement as J, list as $e, WidgetOverlayOutlet as oe, ConversationContext as ve } from "@telia-ace/widget-ui";
+import { Input as te, Button as z, borderTabStyle as f, SymbolBadge as v, useIsTabbing as fe, useDispatch as q, useProperties as I, useScroll as ne, Typography as Y, invertedHoverButton as pe, Html as G, List as re, buttonCss as K, ItemList as j, itemList as O, Link as ye, useComponent as be, genericHtml as $e, headingElement as J, list as ve, WidgetOverlayOutlet as oe, ConversationContext as xe } from "@telia-ace/widget-ui";
 import { appendClassNames as M } from "@telia-ace/widget-utilities";
-import { css as g, keyframes as xe } from "@emotion/react";
-import { useState as T, useEffect as se, forwardRef as Q, Suspense as we, useMemo as ke, useCallback as ae, useRef as Ce } from "react";
-import { FormComponent as Se } from "@telia-ace/widget-forms";
-import { ConversationMessageListItemType as k, ConversationMessageType as W } from "./index.mjs";
+import { css as g, keyframes as we } from "@emotion/react";
+import { useState as T, useEffect as se, forwardRef as Q, Suspense as ke, useMemo as Ce, useCallback as ae, useRef as Se } from "react";
+import { FormComponent as ze } from "@telia-ace/widget-forms";
+import { ConversationMessageListItemType as k, ConversationMessageType as E } from "./index.mjs";
 import "@telia-ace/widget-core";
 import "@telia-ace/widget-services";
 import "@telia-ace/widget-plugins";
-const ze = ({ className: e }) => {
-  const [t, r] = T(""), [o, a] = T(!1), [i, h] = T(0), [c, p] = T(0), v = fe(), d = V(), {
+const Le = ({ className: e }) => {
+  const [t, o] = T(""), [r, a] = T(!1), [i, u] = T(0), [c, p] = T(0), x = fe(), d = q(), {
     inputPlaceholder: l = "Type your message",
     inputHidden: $ = !1,
     inputDisabled: S = !1,
@@ -20,52 +20,52 @@ const ze = ({ className: e }) => {
   } = I(), [de, b] = ne(!0);
   se(() => {
     if (b.current) {
-      const { lineHeight: m, maxHeight: H } = getComputedStyle(b.current);
-      if (m && m.indexOf("px") > -1) {
-        const N = m.split("px"), he = parseInt(N[0], 10);
-        h(he);
+      const { lineHeight: h, maxHeight: H } = getComputedStyle(b.current);
+      if (h && h.indexOf("px") > -1) {
+        const N = h.split("px"), ue = parseInt(N[0], 10);
+        u(ue);
         const ge = H.split("px");
         p(parseInt(ge[0], 10));
       }
     }
   }, [b.current]);
-  const O = (m) => {
-    !m.shiftKey || !w ? (m.preventDefault(), t && t.length > 0 && (d("user-submit", { text: t }), r(""), D(""))) : t.length < 1 && m.preventDefault();
-  }, me = (m) => {
-    y && (m.preventDefault(), d("action", {
+  const D = (h) => {
+    !h.shiftKey || !w ? (h.preventDefault(), t && t.length > 0 && (d("user-submit", { text: t }), o(""), W(""))) : t.length < 1 && h.preventDefault();
+  }, me = (h) => {
+    y && (h.preventDefault(), d("action", {
       actionKey: y.action,
       ...y
     }));
-  }, ue = (m) => {
+  }, he = (h) => {
     if (w && b.current) {
       const H = b.current.scrollHeight;
       if (H > i) {
         b.current.style.height = "auto";
         let N = H;
-        m.length < 1 && (N = i), b.current.style.height = `${N}px`, N >= c ? b.current.style.overflowY = "scroll" : b.current.style.overflowY = "hidden";
+        h.length < 1 && (N = i), b.current.style.height = `${N}px`, N >= c ? b.current.style.overflowY = "scroll" : b.current.style.overflowY = "hidden";
       }
     }
-  }, D = (m) => {
-    ue(m), r(m), m && m.length > 0 && d("user-typing", { textLength: m.length });
+  }, W = (h) => {
+    he(h), o(h), h && h.length > 0 && d("user-typing", { textLength: h.length });
   };
-  return $ ? null : /* @__PURE__ */ u(
-    Me,
+  return $ ? null : /* @__PURE__ */ m(
+    He,
     {
       grow: w,
       className: M("humany-conversation-input", e),
-      "data-has-focus": o,
+      "data-has-focus": r,
       scrollableCss: de,
-      isTabbing: v,
+      isTabbing: x,
       children: [
         y && /* @__PURE__ */ n(
-          Ie,
+          Me,
           {
             disabled: S,
             onClick: me,
             title: y.label,
             "aria-label": y.label,
             children: /* @__PURE__ */ n(
-              x,
+              v,
               {
                 size: 24,
                 symbol: { type: "Svg", content: y.icon || "browse" }
@@ -74,11 +74,11 @@ const ze = ({ className: e }) => {
           }
         ),
         w ? /* @__PURE__ */ n(
-          Le,
+          Ne,
           {
             value: t,
-            onChange: D,
-            onEnter: O,
+            onChange: W,
+            onEnter: D,
             disabled: S,
             "aria-label": l,
             placeholder: l,
@@ -88,11 +88,11 @@ const ze = ({ className: e }) => {
             ref: b
           }
         ) : /* @__PURE__ */ n(
-          Ne,
+          Ie,
           {
             value: t,
-            onChange: D,
-            onEnter: O,
+            onChange: W,
+            onEnter: D,
             disabled: S,
             "aria-label": l,
             placeholder: l,
@@ -103,11 +103,11 @@ const ze = ({ className: e }) => {
           ie,
           {
             disabled: S,
-            onClick: O,
+            onClick: D,
             title: L,
             "aria-label": L,
             children: /* @__PURE__ */ n(
-              He,
+              Te,
               {
                 size: 22,
                 symbol: { type: "Svg", content: "send" },
@@ -119,7 +119,7 @@ const ze = ({ className: e }) => {
       ]
     }
   );
-}, Le = s(te)`
+}, Ne = s(te)`
   resize: none;
   flex: 1;
   flex-shrink: 1;
@@ -139,7 +139,7 @@ const ze = ({ className: e }) => {
   border: none;
   transition: height 200ms linear;
   outline: none;
-`, Ne = s(te)`
+`, Ie = s(te)`
   flex: 1;
   border: none;
   background-color: transparent;
@@ -177,13 +177,13 @@ const ze = ({ className: e }) => {
   &:focus-visible {
     ${f};
   }
-`, Ie = s(ie)`
+`, Me = s(ie)`
   border-right: ${(e) => e.theme.border};
   margin: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }} 0;
-`, Me = s.div`
+`, He = s.div`
   ${(e) => e.grow ? g`
           min-height: 50px;
           max-height: 150px;
@@ -202,11 +202,11 @@ const ze = ({ className: e }) => {
   textarea {
     ${(e) => !!e.scrollableCss && e.scrollableCss}
   }
-`, He = s(
+`, Te = s(
   ({
     hasContent: e,
     ...t
-  }) => /* @__PURE__ */ n(x, { ...t })
+  }) => /* @__PURE__ */ n(v, { ...t })
 )`
   line,
   path {
@@ -219,7 +219,7 @@ const ze = ({ className: e }) => {
   return e.hasContent ? (t = e.theme.colors) == null ? void 0 : t.primary : "#a6a6a6";
 }};
   }
-`, Te = s.div`
+`, Ae = s.div`
     width: ${(e) => e.avatarSize || "32px"};
     height: ${(e) => e.avatarSize || "32px"};
     border-radius: 50%;
@@ -266,7 +266,7 @@ const ze = ({ className: e }) => {
 }};
         }
     }
-`, Ae = xe`
+`, Be = we`
   0% {
     opacity: 0;
   }
@@ -288,7 +288,7 @@ const ze = ({ className: e }) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
-        animation: ${Ae} 1s infinite;
+        animation: ${Be} 1s infinite;
     }
     > div:nth-of-type(2) {
         animation-delay: 100ms;
@@ -296,29 +296,29 @@ const ze = ({ className: e }) => {
     > div:nth-of-type(3) {
         animation-delay: 200ms;
     }
-`, P = s.div`
+`, U = s.div`
     grid-area: content;
     max-width: 100%;
     overflow: hidden;
-`, Be = s(q)`
+`, Ke = s(Y)`
     font-size: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.normal;
 }};
     font-weight: normal;
     margin: 0;
-`, U = s.div`
+`, _ = s.div`
     display: flex;
     ${(e) => e.left && "justify-content: start;"};
     ${(e) => e.center && "justify-content: center;"};
     ${(e) => e.right && "justify-content: end;"};
-`, _ = s.div`
+`, V = s.div`
     ${(e) => {
   var t;
   return e.padded && `padding: ${(t = e.theme.sizes) == null ? void 0 : t.medium};`;
 }}
-    ${(e) => !e.user && e.stacked && Ke(e.stacked, e.theme)}
-    ${(e) => e.user && e.stacked && je(e.stacked, e.theme)}
+    ${(e) => !e.user && e.stacked && je(e.stacked, e.theme)}
+    ${(e) => e.user && e.stacked && Oe(e.stacked, e.theme)}
 
     display: inline-block;
     margin-top: ${(e) => {
@@ -334,15 +334,15 @@ const ze = ({ className: e }) => {
     }
     max-width: 100%;
     ${(e) => e.fullWidth && "width: 100%;"}
-`, Ke = (e, t) => {
-  var o, a;
-  const r = g`
-        background-color: ${(o = t.colors) == null ? void 0 : o.accent};
+`, je = (e, t) => {
+  var r, a;
+  const o = g`
+        background-color: ${(r = t.colors) == null ? void 0 : r.accent};
         color: ${(a = t.colors) == null ? void 0 : a.text};
         ${t.border && `border: ${t.border};`};
     `;
   return t.borderRadius ? g`
-        ${r}
+        ${o}
 
         border-top-right-radius: ${t.borderRadius};
         border-bottom-right-radius: ${t.borderRadius};
@@ -354,15 +354,15 @@ const ze = ({ className: e }) => {
         ${e === "last" && `
             border-bottom-left-radius: ${t.borderRadius};
         `}
-    ` : r;
-}, je = (e, t) => {
-  var o, a;
-  const r = g`
-        background-color: ${(o = t.colors) == null ? void 0 : o.primary};
+    ` : o;
+}, Oe = (e, t) => {
+  var r, a;
+  const o = g`
+        background-color: ${(r = t.colors) == null ? void 0 : r.primary};
         color: ${(a = t.colors) == null ? void 0 : a.accent};
     `;
   return t.borderRadius ? g`
-        ${r}
+        ${o}
 
         border-top-left-radius: ${t.borderRadius};
         border-bottom-left-radius: ${t.borderRadius};
@@ -374,7 +374,7 @@ const ze = ({ className: e }) => {
         ${e === "last" && `
             border-bottom-right-radius: ${t.borderRadius};
         `}
-    ` : r;
+    ` : o;
 }, A = s.div`
     margin-bottom: ${(e) => {
   var t;
@@ -384,18 +384,18 @@ const ze = ({ className: e }) => {
         margin-bottom: 0;
     }
 `, C = (e) => {
-  var t, r;
+  var t, o;
   return g`
     margin: ${(t = e.theme.sizes) == null ? void 0 : t.medium} 0;
-    padding: 0 ${(r = e.theme.sizes) == null ? void 0 : r.medium};
+    padding: 0 ${(o = e.theme.sizes) == null ? void 0 : o.medium};
 `;
-}, Oe = s(Se)`
+}, De = s(ze)`
     & button.humany-form-component-button {
         ${(e) => {
-  var t, r, o, a;
-  return ((t = e.theme.colors) == null ? void 0 : t.primary) && ((r = e.theme.colors) == null ? void 0 : r.accent) && pe({
+  var t, o, r, a;
+  return ((t = e.theme.colors) == null ? void 0 : t.primary) && ((o = e.theme.colors) == null ? void 0 : o.accent) && pe({
     active: !1,
-    primaryColor: (o = e.theme.colors) == null ? void 0 : o.primary,
+    primaryColor: (r = e.theme.colors) == null ? void 0 : r.primary,
     secondaryColor: (a = e.theme.colors) == null ? void 0 : a.accent,
     theme: e.theme
   });
@@ -417,7 +417,7 @@ const ze = ({ className: e }) => {
 }};
         }
     }
-`, De = s(Y)`
+`, We = s(G)`
     white-space: pre-wrap;
     a {
         color: ${(e) => e.theme.colors.link};
@@ -428,7 +428,7 @@ const ze = ({ className: e }) => {
 }};
         }
     }
-`, We = s(re)`
+`, Ee = s(re)`
     padding: 0;
     list-style: none;
     margin: 0 -${(e) => {
@@ -441,8 +441,8 @@ const ze = ({ className: e }) => {
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
     }
-`, Ee = s.button`
-    ${(e) => G(e)};
+`, Fe = s.button`
+    ${(e) => K(e)};
     display: block;
     background-color: ${(e) => {
   var t;
@@ -455,12 +455,12 @@ const ze = ({ className: e }) => {
         background-color: transparent;
     }
 `, Z = Q(
-  ({ boxed: e, className: t, agentData: r }, o) => /* @__PURE__ */ n(P, { ref: o, children: /* @__PURE__ */ n(U, { left: e, center: !e, children: /* @__PURE__ */ n(_, { padded: !!e, stacked: e ? "first" : void 0, children: /* @__PURE__ */ u(Re, { children: [
+  ({ boxed: e, className: t, agentData: o }, r) => /* @__PURE__ */ n(U, { ref: r, children: /* @__PURE__ */ n(_, { left: e, center: !e, children: /* @__PURE__ */ n(V, { padded: !!e, stacked: e ? "first" : void 0, children: /* @__PURE__ */ m(Re, { children: [
     /* @__PURE__ */ n("div", {}),
     /* @__PURE__ */ n("div", {}),
     /* @__PURE__ */ n("div", {})
   ] }) }) }) })
-), Fe = s.p`
+), Pe = s.p`
     && {
         font-size: ${(e) => {
   var t;
@@ -475,20 +475,20 @@ const ze = ({ className: e }) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
-`, ee = (e) => new Date(e).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), R = ({ className: e, name: t, timestamp: r }) => {
-  if (!t && !r)
+`, ee = (e) => new Date(e).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), B = ({ className: e, name: t, timestamp: o }) => {
+  if (!t && !o)
     return null;
-  let o = "";
-  return t ? r ? o = `${t}: ${ee(r)}` : o = t : r && (o = ee(r)), /* @__PURE__ */ n(Fe, { children: o });
+  let r = "";
+  return t ? o ? r = `${t}: ${ee(o)}` : r = t : o && (r = ee(o)), /* @__PURE__ */ n(Pe, { children: r });
 }, le = ({
   className: e,
   children: t,
-  sender: r,
-  timestamp: o
+  sender: o,
+  timestamp: r
 }) => {
-  const { avatar: a, name: i } = r, { avatarSize: h } = I();
-  return /* @__PURE__ */ u(
-    Pe,
+  const { avatar: a, name: i } = o, { avatarSize: u } = I();
+  return /* @__PURE__ */ m(
+    Ue,
     {
       hasAvatar: !!a,
       className: M(
@@ -496,16 +496,16 @@ const ze = ({ className: e }) => {
         "humany-conversation-agent-message"
       ),
       children: [
-        a && /* @__PURE__ */ n(Te, { avatarSize: h, children: typeof a == "string" ? (
+        a && /* @__PURE__ */ n(Ae, { avatarSize: u, children: typeof a == "string" ? (
           // eslint-disable-next-line jsx-a11y/alt-text
           /* @__PURE__ */ n("img", { src: a })
-        ) : /* @__PURE__ */ n(x, { symbol: a }) }),
+        ) : /* @__PURE__ */ n(v, { symbol: a }) }),
         t,
-        /* @__PURE__ */ n(R, { name: i, timestamp: o })
+        /* @__PURE__ */ n(B, { name: i, timestamp: r })
       ]
     }
   );
-}, Pe = s.div`
+}, Ue = s.div`
   display: grid;
   margin-right: 10%;
   width: 90%;
@@ -522,30 +522,30 @@ const ze = ({ className: e }) => {
             'content'
             'info';
         `};
-`, Ue = Q(
-  ({ className: e, children: t, timestamp: r, discrete: o, fullWidth: a }, i) => /* @__PURE__ */ n(
-    _e,
+`, _e = Q(
+  ({ className: e, children: t, timestamp: o, discrete: r, fullWidth: a }, i) => /* @__PURE__ */ n(
+    Ve,
     {
       ref: i,
       className: M(e, "humany-conversation-system-message"),
       fullWidth: a,
-      children: o ? /* @__PURE__ */ u(Ve, { className: "humany-conversation-discrete-message", children: [
+      children: r ? /* @__PURE__ */ m(qe, { className: "humany-conversation-discrete-message", children: [
         t,
-        /* @__PURE__ */ n(R, { timestamp: r })
-      ] }) : /* @__PURE__ */ u(B, { children: [
+        /* @__PURE__ */ n(B, { timestamp: o })
+      ] }) : /* @__PURE__ */ m(R, { children: [
         t,
-        /* @__PURE__ */ n(R, { timestamp: r })
+        /* @__PURE__ */ n(B, { timestamp: o })
       ] })
     }
   )
-), _e = s.div`
+), Ve = s.div`
     ${(e) => e.fullWidth && "width: 100%"};
     padding: 0 ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.large;
 }};
     overflow: auto;
-`, Ve = s.div`
+`, qe = s.div`
     text-align: center;
     word-wrap: break-word;
     font-size: ${(e) => {
@@ -559,19 +559,19 @@ const ze = ({ className: e }) => {
     > p {
         margin: 0;
     }
-`, qe = ({ className: e, children: t, timestamp: r }) => {
-  const { userLabel: o = "" } = I();
-  return /* @__PURE__ */ u(
-    Ye,
+`, Ye = ({ className: e, children: t, timestamp: o }) => {
+  const { userLabel: r = "" } = I();
+  return /* @__PURE__ */ m(
+    Ge,
     {
       className: M(e, "humany-conversation-user-message"),
       children: [
         t,
-        /* @__PURE__ */ n(R, { name: o, timestamp: r })
+        /* @__PURE__ */ n(B, { name: r, timestamp: o })
       ]
     }
   );
-}, Ye = s.div`
+}, Ge = s.div`
     margin-left: 10%;
     width: 90%;
     display: flex;
@@ -580,74 +580,121 @@ const ze = ({ className: e }) => {
 `, X = (e) => Array.isArray(e) ? e : Object.keys(e).map((t) => ({
   label: e[t],
   actionKey: t
-})), Ge = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n(
-  Je,
+})), Je = ({ header: e, actions: t, dispatch: o }) => /* @__PURE__ */ n(
+  Qe,
   {
     className: "humany-conversation-button-list",
     header: e,
     items: X(t),
-    renderItem: (o) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ u(
-      Qe,
-      {
-        onClick: () => {
-          r("action", o);
-        },
-        "aria-label": o.label,
-        title: o.label,
-        children: [
-          /* @__PURE__ */ n(x, { symbol: o.symbol }),
-          o.label
-        ]
-      }
-    ) }, o.actionKey)
+    renderItem: (r) => {
+      var i;
+      const a = !!((i = r == null ? void 0 : r.data) != null && i.href);
+      return /* @__PURE__ */ n("li", { children: a ? /* @__PURE__ */ m(
+        Xe,
+        {
+          onClick: () => {
+            o("action", r);
+          },
+          href: r.data.href,
+          target: r.data.target,
+          "aria-label": r.label,
+          title: r.label,
+          children: [
+            /* @__PURE__ */ n(v, { symbol: r.symbol }),
+            r.label
+          ]
+        }
+      ) : /* @__PURE__ */ m(
+        Ze,
+        {
+          onClick: () => {
+            o("action", r);
+          },
+          "aria-label": r.label,
+          title: r.label,
+          children: [
+            /* @__PURE__ */ n(v, { symbol: r.symbol }),
+            r.label
+          ]
+        }
+      ) }, r.actionKey);
+    }
   }
-), Je = s(K)`
-    ${j}
-    > ul {
-        display: flex;
-        flex-wrap: wrap;
-        gap: ${(e) => {
+), Qe = s(j)`
+  ${O}
+  > ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
-        > li {
-            margin: 0;
-        }
+    > li {
+      margin: 0;
     }
-    ${C}
-`, Qe = s(z)`
-    ${G};
+  }
+  ${C}
+`, Xe = s(ye)`
+  ${K};
 
-    display: block;
-    padding: ${(e) => {
+  display: block;
+  padding: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
-    background-color: ${(e) => {
+  background-color: ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.primary;
 }};
-    width: 100%;
-    color: #ffffff;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    &:focus-visible {
-        ${f}
-        background-color: transparent;
-    }
+  width: 100%;
+  color: #ffffff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  &:focus-visible {
+    ${f}
+    background-color: transparent;
+  }
 
-    i,
-    svg {
-        margin-right: ${(e) => {
+  i,
+  svg {
+    margin-right: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.small;
 }};
-    }
-`, Xe = ({ type: e, content: t = {} }) => {
-  const r = ye(e);
-  return !r || !e ? null : /* @__PURE__ */ n(we, { fallback: null, children: /* @__PURE__ */ n(r, { ...t }) });
-}, Ze = ({ body: e }) => /* @__PURE__ */ n(et, { html: e }), et = s(Y)`
-    ${be}
+  }
+`, Ze = s(z)`
+  ${K};
+
+  display: block;
+  padding: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+  background-color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+  width: 100%;
+  color: #ffffff;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  &:focus-visible {
+    ${f}
+    background-color: transparent;
+  }
+
+  i,
+  svg {
+    margin-right: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.small;
+}};
+  }
+`, et = ({ type: e, content: t = {} }) => {
+  const o = be(e);
+  return !o || !e ? null : /* @__PURE__ */ n(ke, { fallback: null, children: /* @__PURE__ */ n(o, { ...t }) });
+}, tt = ({ body: e }) => /* @__PURE__ */ n(nt, { html: e }), nt = s(G)`
+    ${$e}
     color: inherit;
     white-space: pre-wrap;
     ${C}
@@ -657,44 +704,44 @@ const ze = ({ className: e }) => {
             ${f};
         }
     }
-`, tt = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n(
-  nt,
+`, rt = ({ header: e, actions: t, dispatch: o }) => /* @__PURE__ */ n(
+  ot,
   {
     className: "humany-conversation-item-list",
     header: e,
     items: X(t),
-    renderItem: (o) => {
+    renderItem: (r) => {
       var a;
-      return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ u(rt, { children: [
-        ((a = o.symbol) == null ? void 0 : a.content) && /* @__PURE__ */ n("div", { className: "item-icon", children: /* @__PURE__ */ n(
-          x,
+      return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ m(st, { children: [
+        ((a = r.symbol) == null ? void 0 : a.content) && /* @__PURE__ */ n("div", { className: "item-icon", children: /* @__PURE__ */ n(
+          v,
           {
             size: 22,
             symbol: {
-              type: o.symbol.type,
-              content: o.symbol.content
+              type: r.symbol.type,
+              content: r.symbol.content
             }
           }
         ) }),
-        /* @__PURE__ */ u("div", { className: "item-body", children: [
+        /* @__PURE__ */ m("div", { className: "item-body", children: [
           /* @__PURE__ */ n(
             z,
             {
               onClick: () => {
-                r("action", o);
+                o("action", r);
               },
-              "aria-label": o.label,
-              title: o.label,
-              children: o.label
+              "aria-label": r.label,
+              title: r.label,
+              children: r.label
             }
           ),
-          o.description && /* @__PURE__ */ n("p", { children: o.description })
+          r.description && /* @__PURE__ */ n("p", { children: r.description })
         ] })
-      ] }) }, o.actionKey);
+      ] }) }, r.actionKey);
     }
   }
-), nt = s(K)`
-    ${j}
+), ot = s(j)`
+    ${O}
 
     > .humany-paragraph {
         ${C}
@@ -731,7 +778,7 @@ const ze = ({ className: e }) => {
             border-bottom: none;
         }
     }
-`, rt = s.div`
+`, st = s.div`
     display: flex;
     gap: ${(e) => {
   var t;
@@ -780,25 +827,25 @@ const ze = ({ className: e }) => {
             }
         }
     }
-`, ot = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n(
-  st,
+`, at = ({ header: e, actions: t, dispatch: o }) => /* @__PURE__ */ n(
+  it,
   {
     className: "humany-conversation-link-list",
     header: e,
     items: X(t),
-    renderItem: (o) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ u(
-      at,
+    renderItem: (r) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ m(
+      lt,
       {
-        help: o.actionKey === "help",
+        help: r.actionKey === "help",
         onClick: () => {
-          r("action", o);
+          o("action", r);
         },
-        "aria-label": o.label,
-        title: o.label,
+        "aria-label": r.label,
+        title: r.label,
         children: [
-          o.label,
-          o.actionKey === "help" && /* @__PURE__ */ n(
-            x,
+          r.label,
+          r.actionKey === "help" && /* @__PURE__ */ n(
+            v,
             {
               size: 14,
               symbol: {
@@ -809,10 +856,10 @@ const ze = ({ className: e }) => {
           )
         ]
       }
-    ) }, o.actionKey)
+    ) }, r.actionKey)
   }
-), st = s(K)`
-    ${j}
+), it = s(j)`
+    ${O}
     ${C}
 
     ${(e) => J(e)(
@@ -833,7 +880,7 @@ const ze = ({ className: e }) => {
             margin: 0;
         }
     }
-`, at = s(z)`
+`, lt = s(z)`
     display: block;
     text-align: left;
     font-weight: 300;
@@ -846,14 +893,14 @@ const ze = ({ className: e }) => {
     overflow: hidden;
 
     ${(e) => {
-  var t, r;
+  var t, o;
   return e.help && g`
             color: ${(t = e.theme.colors) == null ? void 0 : t.text};
             text-decoration: underline;
 
             i,
             svg {
-                margin-left: ${(r = e.theme.sizes) == null ? void 0 : r.small};
+                margin-left: ${(o = e.theme.sizes) == null ? void 0 : o.small};
             }
         `;
 }}
@@ -868,18 +915,18 @@ const ze = ({ className: e }) => {
             text-decoration: underline;
         }
     }
-`, it = () => /* @__PURE__ */ n(lt, { className: "humany-conversation-separator" }), lt = s.div`
+`, ct = () => /* @__PURE__ */ n(dt, { className: "humany-conversation-separator" }), dt = s.div`
     ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
     width: 100%;
-`, ct = ({ text: e }) => /* @__PURE__ */ n(dt, { className: "humany-conversation-text", variant: "span", children: e }), dt = s(q)`
+`, mt = ({ text: e }) => /* @__PURE__ */ n(ht, { className: "humany-conversation-text", variant: "span", children: e }), ht = s(Y)`
     ${C}
-`, mt = ({
+`, ut = ({
   header: e = "Video call",
   acceptLabel: t = "Accept",
-  declineLabel: r = "Decline",
-  dispatch: o
+  declineLabel: o = "Decline",
+  dispatch: r
 }) => {
-  const a = ke(() => [
+  const a = Ce(() => [
     {
       label: t,
       actionKey: "accept-video-call",
@@ -889,39 +936,39 @@ const ze = ({ className: e }) => {
       }
     },
     {
-      label: r,
+      label: o,
       actionKey: "decline-video-call",
       symbol: {
         type: "Svg",
         content: "close"
       }
     }
-  ], [t, r]);
+  ], [t, o]);
   return /* @__PURE__ */ n(
-    ut,
+    gt,
     {
       className: "humany-conversation-video-request",
       header: e,
       items: a,
       renderItem: (i) => {
-        const h = i.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
+        const u = i.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
         return /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
-          ht,
+          ft,
           {
             onClick: () => {
-              o("action", i);
+              r("action", i);
             },
             "aria-label": i.label,
             title: i.label,
-            bgColor: h,
-            children: /* @__PURE__ */ n(x, { symbol: i.symbol, size: 25 })
+            bgColor: u,
+            children: /* @__PURE__ */ n(v, { symbol: i.symbol, size: 25 })
           }
         ) }, i.actionKey);
       }
     }
   );
-}, ut = s(K)`
-    ${(e) => j(e)}
+}, gt = s(j)`
+    ${(e) => O(e)}
     > ul {
         display: flex;
         flex-wrap: wrap;
@@ -934,8 +981,8 @@ const ze = ({ className: e }) => {
         }
     }
     ${(e) => C(e)}
-`, ht = s(z)`
-    ${G};
+`, ft = s(z)`
+    ${K};
 
     background-color: ${(e) => e.bgColor};
     display: flex;
@@ -974,119 +1021,119 @@ const ze = ({ className: e }) => {
             stroke: #fff;
         }
     }
-`, gt = ([e, t]) => ({ type: e, content: t }), ft = ({ items: e, dispatch: t }) => /* @__PURE__ */ n(
-  pt,
+`, pt = ([e, t]) => ({ type: e, content: t }), yt = ({ items: e, dispatch: t }) => /* @__PURE__ */ n(
+  bt,
   {
     className: "humany-message-list",
-    items: e.map(gt),
+    items: e.map(pt),
     renderLi: !0,
-    renderItem: (r) => {
-      switch (r.type) {
+    renderItem: (o) => {
+      switch (o.type) {
         case k.Text:
-          return /* @__PURE__ */ n(ct, { text: r.content });
+          return /* @__PURE__ */ n(mt, { text: o.content });
         case k.HTML:
-          return /* @__PURE__ */ n(Ze, { ...r.content });
+          return /* @__PURE__ */ n(tt, { ...o.content });
         case k.Separator:
-          return /* @__PURE__ */ n(it, { ...r.content });
+          return /* @__PURE__ */ n(ct, { ...o.content });
         case k.ItemList:
-          return /* @__PURE__ */ n(tt, { ...r.content, dispatch: t });
+          return /* @__PURE__ */ n(rt, { ...o.content, dispatch: t });
         case k.LinkList:
-          return /* @__PURE__ */ n(ot, { ...r.content, dispatch: t });
+          return /* @__PURE__ */ n(at, { ...o.content, dispatch: t });
         case k.ButtonList:
-          return /* @__PURE__ */ n(Ge, { ...r.content, dispatch: t });
+          return /* @__PURE__ */ n(Je, { ...o.content, dispatch: t });
         case k.VideoRequest:
-          return /* @__PURE__ */ n(mt, { ...r.content, dispatch: t });
+          return /* @__PURE__ */ n(ut, { ...o.content, dispatch: t });
         default:
-          return /* @__PURE__ */ n(Xe, { type: r.type, content: r.content });
+          return /* @__PURE__ */ n(et, { type: o.type, content: o.content });
       }
     }
   }
-), pt = s(re)`
-    ${$e}
+), bt = s(re)`
+    ${ve}
 
     > li {
         margin: 0;
     }
-`, yt = Q(
-  ({ className: e, timestamp: t, sender: r, type: o, content: a }, i) => {
-    const h = ae(
+`, $t = Q(
+  ({ className: e, timestamp: t, sender: o, type: r, content: a }, i) => {
+    const u = ae(
       (d) => {
         let l = "first";
         return a.length > 1 && (l = d === 0 ? "first" : d + 1 === a.length ? "last" : "middle"), l;
       },
       [a]
-    ), c = () => /* @__PURE__ */ n(B, { children: a.map((d) => {
+    ), c = () => /* @__PURE__ */ n(R, { children: a.map((d) => {
       const { key: l, body: $, title: S, form: L, actions: w } = d, y = !!$ && !S && !L && !w;
       return /* @__PURE__ */ n(
-        Ue,
+        _e,
         {
           className: e,
           discrete: y,
           ref: i,
           timestamp: t,
           fullWidth: !!L || !!w,
-          children: y && $ ? /* @__PURE__ */ n(Y, { html: $ }) : /* @__PURE__ */ n(E, { isSystem: !0, content: d })
+          children: y && $ ? /* @__PURE__ */ n(G, { html: $ }) : /* @__PURE__ */ n(F, { isSystem: !0, content: d })
         },
         l
       );
-    }) }), p = () => /* @__PURE__ */ n(le, { sender: r, timestamp: t, className: e, children: /* @__PURE__ */ n(P, { className: "humany-message-content-bundle", children: a.map((d, l) => /* @__PURE__ */ n(
-      U,
+    }) }), p = () => /* @__PURE__ */ n(le, { sender: o, timestamp: t, className: e, children: /* @__PURE__ */ n(U, { className: "humany-message-content-bundle", children: a.map((d, l) => /* @__PURE__ */ n(
+      _,
       {
         className: "humany-message-container",
         left: !0,
         ref: i,
         children: /* @__PURE__ */ n(
-          E,
+          F,
           {
             content: d,
-            stacked: h(l)
+            stacked: u(l)
           }
         )
       },
       d.key
-    )) }) }), v = () => /* @__PURE__ */ n(qe, { timestamp: t, className: e, children: /* @__PURE__ */ n(P, { className: "humany-message-content-bundle", children: a.map((d, l) => /* @__PURE__ */ n(
-      U,
+    )) }) }), x = () => /* @__PURE__ */ n(Ye, { timestamp: t, className: e, children: /* @__PURE__ */ n(U, { className: "humany-message-content-bundle", children: a.map((d, l) => /* @__PURE__ */ n(
+      _,
       {
         className: "humany-message-container",
         right: !0,
         ref: i,
         children: /* @__PURE__ */ n(
-          E,
+          F,
           {
             isUser: !0,
             content: d,
-            stacked: h(l)
+            stacked: u(l)
           }
         )
       },
       d.key
     )) }) });
-    switch (o) {
-      case W.System:
+    switch (r) {
+      case E.System:
         return c();
-      case W.Agent:
+      case E.Agent:
         return p();
-      case W.User:
-        return v();
+      case E.User:
+        return x();
       default:
         return null;
     }
   }
-), E = ({ content: e, isUser: t, isSystem: r, stacked: o }) => {
-  const a = V(), { title: i, body: h, actions: c, form: p, items: v } = e;
-  return v ? /* @__PURE__ */ n(_, { className: "humany-message-content", user: !!t, stacked: o, children: /* @__PURE__ */ n(ft, { items: v, dispatch: a }) }) : /* @__PURE__ */ u(
-    _,
+), F = ({ content: e, isUser: t, isSystem: o, stacked: r }) => {
+  const a = q(), { title: i, body: u, actions: c, form: p, items: x } = e;
+  return x ? /* @__PURE__ */ n(V, { className: "humany-message-content", user: !!t, stacked: r, children: /* @__PURE__ */ n(yt, { items: x, dispatch: a }) }) : /* @__PURE__ */ m(
+    V,
     {
       className: "humany-message-content",
-      padded: !r,
+      padded: !o,
       user: !!t,
-      stacked: o,
+      stacked: r,
       fullWidth: !!p || !!c,
       children: [
-        i && /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(Be, { variant: "h2", children: i }) }),
-        h && /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(De, { html: h }) }),
+        i && /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(Ke, { variant: "h2", children: i }) }),
+        u && /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(We, { html: u }) }),
         p && /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(
-          Oe,
+          De,
           {
             ...p,
             onChange: (l, $) => {
@@ -1099,11 +1146,11 @@ const ze = ({ className: e }) => {
           }
         ) }),
         c && /* @__PURE__ */ n(A, { children: /* @__PURE__ */ n(
-          We,
+          Ee,
           {
             items: Object.keys(c).map((l) => ({ label: c[l], actionKey: l })),
             renderItem: (l) => /* @__PURE__ */ n("li", { children: /* @__PURE__ */ n(
-              Ee,
+              Fe,
               {
                 onClick: () => {
                   a("action", l.actionKey);
@@ -1124,31 +1171,31 @@ const ze = ({ className: e }) => {
         behavior: "smooth"
       });
     }, 250);
-  }, []), [t, r] = ne(!0), {
-    messages: o,
+  }, []), [t, o] = ne(!0), {
+    messages: r,
     loading: a,
     typingActors: i = []
-  } = I(), h = () => i && i.length ? i.map((c, p) => /* @__PURE__ */ n(F, { id: `typing_${c.name}`, children: /* @__PURE__ */ n(le, { timestamp: Date.now(), sender: c, children: /* @__PURE__ */ n(Z, { boxed: !0, ref: e }) }) }, `typing_${c.name}`)) : null;
-  return /* @__PURE__ */ u(B, { children: [
-    /* @__PURE__ */ u(bt, { tabIndex: 0, scrollableCss: t, ref: r, children: [
-      o && o.length ? o.map((c, p) => {
-        const { type: v, timestamp: d, sender: l, content: $ } = c;
+  } = I(), u = () => i && i.length ? i.map((c, p) => /* @__PURE__ */ n(P, { id: `typing_${c.name}`, children: /* @__PURE__ */ n(le, { timestamp: Date.now(), sender: c, children: /* @__PURE__ */ n(Z, { boxed: !0, ref: e }) }) }, `typing_${c.name}`)) : null;
+  return /* @__PURE__ */ m(R, { children: [
+    /* @__PURE__ */ m(vt, { tabIndex: 0, scrollableCss: t, ref: o, children: [
+      r && r.length ? r.map((c, p) => {
+        const { type: x, timestamp: d, sender: l, content: $ } = c;
         return /* @__PURE__ */ n(
-          F,
+          P,
           {
             className: "humany-conversation-entry",
             tabIndex: -1,
-            children: /* @__PURE__ */ n(yt, { ...c, ref: e })
+            children: /* @__PURE__ */ n($t, { ...c, ref: e })
           },
-          `${v}_${l == null ? void 0 : l.name}_${d}_${$[0].key}`
+          `${x}_${l == null ? void 0 : l.name}_${d}_${$[0].key}`
         );
       }) : null,
-      h(),
-      a && /* @__PURE__ */ n(F, { children: /* @__PURE__ */ n(Z, { ref: e }) })
+      u(),
+      a && /* @__PURE__ */ n(P, { children: /* @__PURE__ */ n(Z, { ref: e }) })
     ] }),
-    /* @__PURE__ */ n(ze, {})
+    /* @__PURE__ */ n(Le, {})
   ] });
-}, bt = s.div`
+}, vt = s.div`
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -1161,7 +1208,7 @@ const ze = ({ className: e }) => {
     &:focus-visible {
         ${(e) => f(e)};
     }
-`, F = s.div`
+`, P = s.div`
     margin: 0;
     margin-bottom: ${(e) => {
   var t;
@@ -1199,8 +1246,8 @@ const ze = ({ className: e }) => {
                 font-weight: normal;
             `
 )}
-`, $t = ({ dispatch: e }) => {
-  const t = Ce(null);
+`, xt = ({ dispatch: e }) => {
+  const t = Se(null);
   return se(() => {
     t.current && t.current.parentNode && e("overlay-mounted", t.current);
   }, [t]), /* @__PURE__ */ n(
@@ -1211,26 +1258,26 @@ const ze = ({ className: e }) => {
       ref: t
     }
   );
-}, vt = ({
+}, wt = ({
   dispatch: e,
   header: t,
-  buttonLabel: r
-}) => /* @__PURE__ */ u(
-  xt,
+  buttonLabel: o
+}) => /* @__PURE__ */ m(
+  kt,
   {
     portalId: "humany-conversation-portal",
     className: "humany-conversation-outlet",
     children: [
-      /* @__PURE__ */ u(wt, { className: "humany-conversation-outlet-head", children: [
+      /* @__PURE__ */ m(Ct, { className: "humany-conversation-outlet-head", children: [
         /* @__PURE__ */ n(
-          Ct,
+          zt,
           {
             className: "humany-conversation-outlet-head-button",
-            "aria-label": r,
-            title: r,
+            "aria-label": o,
+            title: o,
             onClick: () => e("hide-overlay-conversation"),
             children: /* @__PURE__ */ n(
-              x,
+              v,
               {
                 symbol: {
                   type: "Svg",
@@ -1242,7 +1289,7 @@ const ze = ({ className: e }) => {
           }
         ),
         t && /* @__PURE__ */ n(
-          kt,
+          St,
           {
             className: "humany-conversation-outlet-header",
             variant: "h1",
@@ -1253,7 +1300,7 @@ const ze = ({ className: e }) => {
       /* @__PURE__ */ n(ce, {})
     ]
   }
-), xt = s(oe)`
+), kt = s(oe)`
   z-index: 11;
   top: auto;
   height: 65%;
@@ -1268,7 +1315,7 @@ const ze = ({ className: e }) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.large;
 }};
-`, wt = s.div`
+`, Ct = s.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -1282,7 +1329,7 @@ const ze = ({ className: e }) => {
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
   ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
-`, kt = s(q)`
+`, St = s(Y)`
   font-size: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.medium;
@@ -1292,7 +1339,7 @@ const ze = ({ className: e }) => {
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
   margin: 0;
-`, Ct = s(z)`
+`, zt = s(z)`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1315,33 +1362,33 @@ const ze = ({ className: e }) => {
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
   }
-`, jt = ({ className: e, ...t }) => {
+`, Dt = ({ className: e, ...t }) => {
   const {
-    overlay: r,
-    overlayConversationHeader: o,
+    overlay: o,
+    overlayConversationHeader: r,
     overlayConversationCloseLabel: a,
     conversationControllerId: i
-  } = I(), h = V();
-  return /* @__PURE__ */ u(
-    ve.Provider,
+  } = I(), u = q();
+  return /* @__PURE__ */ m(
+    xe.Provider,
     {
       value: i ? { id: i } : null,
       children: [
         /* @__PURE__ */ n(
-          St,
+          Lt,
           {
             ...t,
             className: M(e, "humany-conversation-component"),
             children: /* @__PURE__ */ n(ce, {})
           }
         ),
-        r && /* @__PURE__ */ u(B, { children: [
-          /* @__PURE__ */ n($t, { dispatch: h }),
-          r.conversation && /* @__PURE__ */ n(
-            vt,
+        o && /* @__PURE__ */ m(R, { children: [
+          /* @__PURE__ */ n(xt, { dispatch: u }),
+          o.conversation && /* @__PURE__ */ n(
+            wt,
             {
-              dispatch: h,
-              header: o,
+              dispatch: u,
+              header: r,
               buttonLabel: a
             }
           )
@@ -1349,7 +1396,7 @@ const ze = ({ className: e }) => {
       ]
     }
   );
-}, St = s.div`
+}, Lt = s.div`
     position: absolute;
     right: 0;
     left: 0;
@@ -1360,5 +1407,5 @@ const ze = ({ className: e }) => {
     flex-direction: column;
 `;
 export {
-  jt as default
+  Dt as default
 };