@telia-ace/widget-conversation 1.0.29-next.13 → 1.0.29-next.15

package/dist/{conversation.fe5da693.js → conversation.4bd3eedd.js}

@@ -2,27 +2,27 @@ var ve = Object.defineProperty, Ee = Object.defineProperties;
 var xe = Object.getOwnPropertyDescriptors;
 var A = Object.getOwnPropertySymbols;
 var ee = Object.prototype.hasOwnProperty, te = Object.prototype.propertyIsEnumerable;
-var Z = (e, t, n) => t in e ? ve(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, g = (e, t) => {
-  for (var n in t || (t = {}))
-    ee.call(t, n) && Z(e, n, t[n]);
+var Z = (e, t, r) => t in e ? ve(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, g = (e, t) => {
+  for (var r in t || (t = {}))
+    ee.call(t, r) && Z(e, r, t[r]);
   if (A)
-    for (var n of A(t))
-      te.call(t, n) && Z(e, n, t[n]);
+    for (var r of A(t))
+      te.call(t, r) && Z(e, r, t[r]);
   return e;
 }, x = (e, t) => Ee(e, xe(t));
 var j = (e, t) => {
-  var n = {};
+  var r = {};
   for (var o in e)
-    ee.call(e, o) && t.indexOf(o) < 0 && (n[o] = e[o]);
+    ee.call(e, o) && t.indexOf(o) < 0 && (r[o] = e[o]);
   if (e != null && A)
     for (var o of A(e))
-      t.indexOf(o) < 0 && te.call(e, o) && (n[o] = e[o]);
-  return n;
+      t.indexOf(o) < 0 && te.call(e, o) && (r[o] = e[o]);
+  return r;
 };
 import a from "@emotion/styled";
-import { Input as oe, Button as L, borderTabStyle as b, SymbolBadge as w, useIsTabbing as we, useDispatch as V, useProperties as M, useScroll as ae, Typography as q, invertedHoverButton as ke, Html as Y, List as le, buttonCss as G, ItemList as J, itemList as Q, useComponent as Ce, genericHtml as Se, headingElement as se, list as ze, WidgetOverlayOutlet as ie, ConversationContext as Le } from "@telia-ace/widget-ui";
+import { useIsTabbing as we, useDispatch as V, useProperties as L, useScroll as oe, SymbolBadge as w, Input as ae, Button as M, borderTabStyle as b, Typography as q, invertedHoverButton as ke, Html as Y, List as le, buttonCss as G, ItemList as J, itemList as Q, useComponent as Ce, genericHtml as Se, headingElement as se, list as ze, WidgetOverlayOutlet as ie, ConversationContext as Le } from "@telia-ace/widget-ui";
 import { appendClassNames as H } from "@telia-ace/widget-utilities";
-import r, { useState as R, useEffect as ce, forwardRef as X, Suspense as Me, useMemo as He, useCallback as me, useRef as Te } from "react";
+import n, { useState as R, useEffect as ce, forwardRef as X, Suspense as Me, useMemo as He, useCallback as me, useRef as Te } from "react";
 import { css as f, keyframes as Ie } from "@emotion/react";
 import { FormComponent as Ae } from "@telia-ace/widget-forms";
 import { ConversationMessageListItemType as C, ConversationMessageType as D } from "./index.js";
@@ -30,14 +30,14 @@ import "@telia-ace/widget-core";
 import "@telia-ace/widget-services";
 import "@telia-ace/widget-plugins";
 const Re = ({ className: e }) => {
-  const [t, n] = R(""), [o, l] = R(!1), [s, u] = R(0), [c, h] = R(0), v = we(), m = V(), {
+  const [t, r] = R(""), [o, l] = R(!1), [s, u] = R(0), [c, h] = R(0), v = we(), m = V(), {
     inputPlaceholder: i = "Type your message",
     inputHidden: $ = !1,
     inputDisabled: k = !1,
     sendButtonLabel: S = "Send message",
     inputMultiline: E = !0,
     secondaryAction: p
-  } = M(), [fe, y] = ae(!0);
+  } = L(), [fe, y] = oe(!0);
   ce(() => {
     if (y.current) {
       const { lineHeight: d, maxHeight: I } = getComputedStyle(y.current);
@@ -50,7 +50,7 @@ const Re = ({ className: e }) => {
     }
   }, [y.current]);
   const N = (d) => {
-    !d.shiftKey || !E ? (d.preventDefault(), t && t.length > 0 && (m("user-submit", { text: t }), n(""), O(""))) : t.length < 1 && d.preventDefault();
+    !d.shiftKey || !E ? (d.preventDefault(), t && t.length > 0 && (m("user-submit", { text: t }), r(""), O(""))) : t.length < 1 && d.preventDefault();
   }, pe = (d) => {
     !p || (d.preventDefault(), m("action", g({
       actionKey: p.action
@@ -65,23 +65,23 @@ const Re = ({ className: e }) => {
       }
     }
   }, O = (d) => {
-    ye(d), n(d), d && d.length > 0 && m("user-typing", { textLength: d.length });
+    ye(d), r(d), d && d.length > 0 && m("user-typing", { textLength: d.length });
   };
-  return $ ? null : /* @__PURE__ */ r.createElement(Oe, {
+  return $ ? null : /* @__PURE__ */ n.createElement(Oe, {
     grow: E,
     className: H("humany-conversation-input", e),
     "data-has-focus": o,
     scrollableCss: fe,
     isTabbing: v
-  }, p && /* @__PURE__ */ r.createElement(Ne, {
+  }, p && /* @__PURE__ */ n.createElement(Ne, {
     disabled: k,
     onClick: pe,
     title: p.label,
     "aria-label": p.label
-  }, /* @__PURE__ */ r.createElement(w, {
+  }, /* @__PURE__ */ n.createElement(w, {
     size: 24,
     symbol: { type: "Svg", content: p.icon || "browse" }
-  })), E ? /* @__PURE__ */ r.createElement(Be, {
+  })), E ? /* @__PURE__ */ n.createElement(Be, {
     value: t,
     onChange: O,
     onEnter: N,
@@ -92,7 +92,7 @@ const Re = ({ className: e }) => {
     type: "textarea",
     rows: 1,
     ref: y
-  }) : /* @__PURE__ */ r.createElement(Ke, {
+  }) : /* @__PURE__ */ n.createElement(Ke, {
     value: t,
     onChange: O,
     onEnter: N,
@@ -100,17 +100,17 @@ const Re = ({ className: e }) => {
     "aria-label": i,
     placeholder: i,
     onFocusChange: l
-  }), /* @__PURE__ */ r.createElement(de, {
+  }), /* @__PURE__ */ n.createElement(de, {
     disabled: k,
     onClick: N,
     title: S,
     "aria-label": S
-  }, /* @__PURE__ */ r.createElement(je, {
+  }, /* @__PURE__ */ n.createElement(je, {
     size: 22,
     symbol: { type: "Svg", content: "send" },
     hasContent: !!t && !!t.length
   })));
-}, Be = a(oe)`
+}, Be = a(ae)`
     resize: none;
     flex: 1;
     flex-shrink: 1;
@@ -130,7 +130,7 @@ const Re = ({ className: e }) => {
     border: none;
     transition: height 200ms linear;
     outline: none;
-`, Ke = a(oe)`
+`, Ke = a(ae)`
     flex: 1;
     border: none;
     background-color: transparent;
@@ -156,7 +156,7 @@ const Re = ({ className: e }) => {
 }};
         font-style: italic;
     }
-`, de = a(L)`
+`, de = a(M)`
     flex: 0 0 50px;
     align-self: stretch;
     background-color: transparent;
@@ -194,13 +194,13 @@ const Re = ({ className: e }) => {
         ${(e) => !!e.scrollableCss && e.scrollableCss}
     }
 `, je = a(
-  (n) => {
-    var o = n, {
+  (r) => {
+    var o = r, {
       hasContent: e
     } = o, t = j(o, [
       "hasContent"
     ]);
-    return /* @__PURE__ */ r.createElement(w, g({}, t));
+    return /* @__PURE__ */ n.createElement(w, g({}, t));
   }
 )`
     line,
@@ -214,7 +214,7 @@ const Re = ({ className: e }) => {
   return e.hasContent ? (t = e.theme.colors) == null ? void 0 : t.primary : "#a6a6a6";
 }};
     }
-`, De = a.div`
+`, De = Re, Fe = a.div`
     width: ${(e) => e.avatarSize || "32px"};
     height: ${(e) => e.avatarSize || "32px"};
     border-radius: 50%;
@@ -261,7 +261,7 @@ const Re = ({ className: e }) => {
 }};
         }
     }
-`, Fe = Ie`
+`, We = Ie`
   0% {
     opacity: 0;
   }
@@ -271,7 +271,7 @@ const Re = ({ className: e }) => {
   100% {
     opacity: 0;
   }
-`, We = a.div`
+`, Pe = a.div`
     display: flex;
     justify-content: center;
     > div {
@@ -283,7 +283,7 @@ const Re = ({ className: e }) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
-        animation: ${Fe} 1s infinite;
+        animation: ${We} 1s infinite;
     }
     > div:nth-child(2) {
         animation-delay: 100ms;
@@ -295,7 +295,7 @@ const Re = ({ className: e }) => {
     grid-area: content;
     max-width: 100%;
     overflow: hidden;
-`, Pe = a(q)`
+`, Ue = a(q)`
     font-size: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.normal;
@@ -312,8 +312,8 @@ const Re = ({ className: e }) => {
   var t;
   return e.padded && `padding: ${(t = e.theme.sizes) == null ? void 0 : t.medium};`;
 }}
-    ${(e) => !e.user && e.stacked && Ue(e.stacked, e.theme)}
-    ${(e) => e.user && e.stacked && _e(e.stacked, e.theme)}
+    ${(e) => !e.user && e.stacked && _e(e.stacked, e.theme)}
+    ${(e) => e.user && e.stacked && Ve(e.stacked, e.theme)}
 
     display: inline-block;
     margin-top: ${(e) => {
@@ -329,15 +329,15 @@ const Re = ({ className: e }) => {
     }
     max-width: 100%;
     ${(e) => e.fullWidth && "width: 100%;"}
-`, Ue = (e, t) => {
+`, _e = (e, t) => {
   var o, l;
-  const n = f`
+  const r = f`
         background-color: ${(o = t.colors) == null ? void 0 : o.accent};
         color: ${(l = t.colors) == null ? void 0 : l.text};
         ${t.border && `border: ${t.border};`};
     `;
   return t.borderRadius ? f`
-        ${n}
+        ${r}
 
         border-top-right-radius: ${t.borderRadius};
         border-bottom-right-radius: ${t.borderRadius};
@@ -349,15 +349,15 @@ const Re = ({ className: e }) => {
         ${e === "last" && `
             border-bottom-left-radius: ${t.borderRadius};
         `}
-    ` : n;
-}, _e = (e, t) => {
+    ` : r;
+}, Ve = (e, t) => {
   var o, l;
-  const n = f`
+  const r = f`
         background-color: ${(o = t.colors) == null ? void 0 : o.primary};
         color: ${(l = t.colors) == null ? void 0 : l.accent};
     `;
   return t.borderRadius ? f`
-        ${n}
+        ${r}
 
         border-top-left-radius: ${t.borderRadius};
         border-bottom-left-radius: ${t.borderRadius};
@@ -369,7 +369,7 @@ const Re = ({ className: e }) => {
         ${e === "last" && `
             border-bottom-right-radius: ${t.borderRadius};
         `}
-    ` : n;
+    ` : r;
 }, B = a.div`
     margin-bottom: ${(e) => {
   var t;
@@ -379,16 +379,16 @@ const Re = ({ className: e }) => {
         margin-bottom: 0;
     }
 `, T = (e) => {
-  var t, n;
+  var t, r;
   return f`
     margin: ${(t = e.theme.sizes) == null ? void 0 : t.medium} 0;
-    padding: 0 ${(n = e.theme.sizes) == null ? void 0 : n.medium};
+    padding: 0 ${(r = e.theme.sizes) == null ? void 0 : r.medium};
 `;
-}, Ve = a(Ae)`
+}, qe = a(Ae)`
     & button.humany-form-component-button {
         ${(e) => {
-  var t, n, o, l;
-  return ((t = e.theme.colors) == null ? void 0 : t.primary) && ((n = e.theme.colors) == null ? void 0 : n.accent) && ke({
+  var t, r, o, l;
+  return ((t = e.theme.colors) == null ? void 0 : t.primary) && ((r = e.theme.colors) == null ? void 0 : r.accent) && ke({
     active: !1,
     primaryColor: (o = e.theme.colors) == null ? void 0 : o.primary,
     secondaryColor: (l = e.theme.colors) == null ? void 0 : l.accent,
@@ -412,7 +412,7 @@ const Re = ({ className: e }) => {
 }};
         }
     }
-`, qe = a(Y)`
+`, Ye = a(Y)`
     white-space: pre-wrap;
     a {
         color: ${(e) => e.theme.colors.link};
@@ -423,7 +423,7 @@ const Re = ({ className: e }) => {
 }};
         }
     }
-`, Ye = a(le)`
+`, Ge = a(le)`
     padding: 0;
     list-style: none;
     margin: 0 -${(e) => {
@@ -436,7 +436,7 @@ const Re = ({ className: e }) => {
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
     }
-`, Ge = a.button`
+`, Je = a.button`
     ${(e) => G(e)};
     display: block;
     background-color: ${(e) => {
@@ -449,17 +449,17 @@ const Re = ({ className: e }) => {
         ${b}
         background-color: transparent;
     }
-`, re = X(
-  ({ boxed: e, className: t, agentData: n }, o) => /* @__PURE__ */ r.createElement(P, {
+`, Qe = X(
+  ({ boxed: e, className: t, agentData: r }, o) => /* @__PURE__ */ n.createElement(P, {
     ref: o
-  }, /* @__PURE__ */ r.createElement(U, {
+  }, /* @__PURE__ */ n.createElement(U, {
     left: e,
     center: !e
-  }, /* @__PURE__ */ r.createElement(_, {
+  }, /* @__PURE__ */ n.createElement(_, {
     padded: !!e,
     stacked: e ? "first" : void 0
-  }, /* @__PURE__ */ r.createElement(We, null, /* @__PURE__ */ r.createElement("div", null), /* @__PURE__ */ r.createElement("div", null), /* @__PURE__ */ r.createElement("div", null)))))
-), Je = a.p`
+  }, /* @__PURE__ */ n.createElement(Pe, null, /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null)))))
+), ne = Qe, Xe = a.p`
     && {
         font-size: ${(e) => {
   var t;
@@ -474,27 +474,27 @@ const Re = ({ className: e }) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
-`, ne = (e) => new Date(e).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), K = ({ className: e, name: t, timestamp: n }) => {
-  if (!t && !n)
+`, re = (e) => new Date(e).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), Ze = ({ className: e, name: t, timestamp: r }) => {
+  if (!t && !r)
     return null;
   let o = "";
-  return t ? n ? o = `${t}: ${ne(n)}` : o = t : n && (o = ne(n)), /* @__PURE__ */ r.createElement(Je, null, o);
-}, ue = ({ className: e, children: t, sender: n, timestamp: o }) => {
-  const { avatar: l, name: s } = n, { avatarSize: u } = M();
-  return /* @__PURE__ */ r.createElement(Qe, {
+  return t ? r ? o = `${t}: ${re(r)}` : o = t : r && (o = re(r)), /* @__PURE__ */ n.createElement(Xe, null, o);
+}, K = Ze, et = ({ className: e, children: t, sender: r, timestamp: o }) => {
+  const { avatar: l, name: s } = r, { avatarSize: u } = L();
+  return /* @__PURE__ */ n.createElement(tt, {
     hasAvatar: !!l,
     className: H(e, "humany-conversation-agent-message")
-  }, l && /* @__PURE__ */ r.createElement(De, {
+  }, l && /* @__PURE__ */ n.createElement(Fe, {
     avatarSize: u
-  }, typeof l == "string" ? /* @__PURE__ */ r.createElement("img", {
+  }, typeof l == "string" ? /* @__PURE__ */ n.createElement("img", {
     src: l
-  }) : /* @__PURE__ */ r.createElement(w, {
+  }) : /* @__PURE__ */ n.createElement(w, {
     symbol: l
-  })), t, /* @__PURE__ */ r.createElement(K, {
+  })), t, /* @__PURE__ */ n.createElement(K, {
     name: s,
     timestamp: o
   }));
-}, Qe = a.div`
+}, tt = a.div`
     display: grid;
     margin-right: 10%;
     width: 90%;
@@ -511,26 +511,26 @@ const Re = ({ className: e }) => {
                       'content'
                       'info';
               `};
-`, Xe = X(
-  ({ className: e, children: t, timestamp: n, discrete: o, fullWidth: l }, s) => /* @__PURE__ */ r.createElement(Ze, {
+`, ue = et, nt = X(
+  ({ className: e, children: t, timestamp: r, discrete: o, fullWidth: l }, s) => /* @__PURE__ */ n.createElement(rt, {
     ref: s,
     className: H(e, "humany-conversation-system-message"),
     fullWidth: l
-  }, o ? /* @__PURE__ */ r.createElement(et, {
+  }, o ? /* @__PURE__ */ n.createElement(ot, {
     className: "humany-conversation-discrete-message"
-  }, t, /* @__PURE__ */ r.createElement(K, {
-    timestamp: n
-  })) : /* @__PURE__ */ r.createElement(r.Fragment, null, t, /* @__PURE__ */ r.createElement(K, {
-    timestamp: n
+  }, t, /* @__PURE__ */ n.createElement(K, {
+    timestamp: r
+  })) : /* @__PURE__ */ n.createElement(n.Fragment, null, t, /* @__PURE__ */ n.createElement(K, {
+    timestamp: r
   })))
-), Ze = a.div`
+), rt = a.div`
     ${(e) => e.fullWidth && "width: 100%"};
     padding: 0 ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.large;
 }};
     overflow: auto;
-`, et = a.div`
+`, ot = a.div`
     text-align: center;
     word-wrap: break-word;
     font-size: ${(e) => {
@@ -544,38 +544,38 @@ const Re = ({ className: e }) => {
     > p {
         margin: 0;
     }
-`, tt = ({ className: e, children: t, timestamp: n }) => {
-  const { userLabel: o = "" } = M();
-  return /* @__PURE__ */ r.createElement(rt, {
+`, at = nt, lt = ({ className: e, children: t, timestamp: r }) => {
+  const { userLabel: o = "" } = L();
+  return /* @__PURE__ */ n.createElement(st, {
     className: H(e, "humany-conversation-user-message")
-  }, t, /* @__PURE__ */ r.createElement(K, {
+  }, t, /* @__PURE__ */ n.createElement(K, {
     name: o,
-    timestamp: n
+    timestamp: r
   }));
-}, rt = a.div`
+}, st = a.div`
     margin-left: 10%;
     width: 90%;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-`, he = (e) => Array.isArray(e) ? e : Object.keys(e).map((t) => ({
+`, it = lt, he = (e) => Array.isArray(e) ? e : Object.keys(e).map((t) => ({
   label: e[t],
   actionKey: t
-})), nt = ({ header: e, actions: t, dispatch: n }) => /* @__PURE__ */ r.createElement(ot, {
+})), ct = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(mt, {
   header: e,
   items: he(t),
-  renderItem: (o) => /* @__PURE__ */ r.createElement("li", {
+  renderItem: (o) => /* @__PURE__ */ n.createElement("li", {
     key: o.actionKey
-  }, /* @__PURE__ */ r.createElement(at, {
+  }, /* @__PURE__ */ n.createElement(dt, {
     onClick: () => {
-      n("action", o);
+      r("action", o);
     },
     "aria-label": o.label,
     title: o.label
-  }, /* @__PURE__ */ r.createElement(w, {
+  }, /* @__PURE__ */ n.createElement(w, {
     symbol: o.symbol
   }), o.label))
-}), ot = a(J)`
+}), mt = a(J)`
     ${Q}
     > ul {
         display: flex;
@@ -589,7 +589,7 @@ const Re = ({ className: e }) => {
         }
     }
     ${T}
-`, at = a(L)`
+`, dt = a(M)`
     ${G};
 
     display: block;
@@ -617,14 +617,14 @@ const Re = ({ className: e }) => {
   return (t = e.theme.sizes) == null ? void 0 : t.small;
 }};
     }
-`, lt = ({ type: e, content: t = {} }) => {
-  const n = Ce(e);
-  return !n || !e ? null : /* @__PURE__ */ r.createElement(Me, {
+`, ut = ({ type: e, content: t = {} }) => {
+  const r = Ce(e);
+  return !r || !e ? null : /* @__PURE__ */ n.createElement(Me, {
     fallback: null
-  }, /* @__PURE__ */ r.createElement(n, g({}, t)));
-}, st = ({ body: e }) => /* @__PURE__ */ r.createElement(it, {
+  }, /* @__PURE__ */ n.createElement(r, g({}, t)));
+}, ht = ({ body: e }) => /* @__PURE__ */ n.createElement(gt, {
   html: e
-}), it = a(Y)`
+}), gt = a(Y)`
     ${Se}
     color: inherit;
     white-space: pre-wrap;
@@ -635,26 +635,26 @@ const Re = ({ className: e }) => {
             ${b};
         }
     }
-`, ct = ({ header: e, actions: t, dispatch: n }) => /* @__PURE__ */ r.createElement(mt, {
+`, ft = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(pt, {
   header: e,
   items: he(t),
-  renderItem: (o) => /* @__PURE__ */ r.createElement("li", {
+  renderItem: (o) => /* @__PURE__ */ n.createElement("li", {
     key: o.actionKey
-  }, /* @__PURE__ */ r.createElement(dt, {
+  }, /* @__PURE__ */ n.createElement(yt, {
     help: o.actionKey === "help",
     onClick: () => {
-      n("action", o);
+      r("action", o);
     },
     "aria-label": o.label,
     title: o.label
-  }, o.label, o.actionKey === "help" && /* @__PURE__ */ r.createElement(w, {
+  }, o.label, o.actionKey === "help" && /* @__PURE__ */ n.createElement(w, {
     size: 14,
     symbol: {
       type: "Svg",
       content: "caret-down"
     }
   })))
-}), mt = a(J)`
+}), pt = a(J)`
     ${Q}
     ${T}
 
@@ -676,7 +676,7 @@ const Re = ({ className: e }) => {
             margin: 0;
         }
     }
-`, dt = a(L)`
+`, yt = a(M)`
     display: block;
     text-align: left;
     font-weight: 300;
@@ -689,14 +689,14 @@ const Re = ({ className: e }) => {
     overflow: hidden;
 
     ${(e) => {
-  var t, n;
+  var t, r;
   return e.help && f`
             color: ${(t = e.theme.colors) == null ? void 0 : t.text};
             text-decoration: underline;
 
             i,
             svg {
-                margin-left: ${(n = e.theme.sizes) == null ? void 0 : n.small};
+                margin-left: ${(r = e.theme.sizes) == null ? void 0 : r.small};
             }
         `;
 }}
@@ -711,17 +711,17 @@ const Re = ({ className: e }) => {
             text-decoration: underline;
         }
     }
-`, ut = () => /* @__PURE__ */ r.createElement(ht, null), ht = a.div`
+`, bt = () => /* @__PURE__ */ n.createElement($t, null), $t = a.div`
     ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
     width: 100%;
-`, gt = ({ text: e }) => /* @__PURE__ */ r.createElement(ft, {
+`, vt = ({ text: e }) => /* @__PURE__ */ n.createElement(Et, {
   variant: "span"
-}, e), ft = a(q)`
+}, e), Et = a(q)`
     ${T}
-`, pt = ({
+`, xt = ({
   header: e = "Video call",
   acceptLabel: t = "Accept",
-  declineLabel: n = "Decline",
+  declineLabel: r = "Decline",
   dispatch: o
 }) => {
   const l = He(() => [
@@ -734,35 +734,35 @@ const Re = ({ className: e }) => {
       }
     },
     {
-      label: n,
+      label: r,
       actionKey: "decline-video-call",
       symbol: {
         type: "Svg",
         content: "close"
       }
     }
-  ], [t, n]);
-  return /* @__PURE__ */ r.createElement(yt, {
+  ], [t, r]);
+  return /* @__PURE__ */ n.createElement(wt, {
     header: e,
     items: l,
     renderItem: (s) => {
       const u = s.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
-      return /* @__PURE__ */ r.createElement("li", {
+      return /* @__PURE__ */ n.createElement("li", {
         key: s.actionKey
-      }, /* @__PURE__ */ r.createElement(bt, {
+      }, /* @__PURE__ */ n.createElement(kt, {
         onClick: () => {
           o("action", s);
         },
         "aria-label": s.label,
         title: s.label,
         bgColor: u
-      }, /* @__PURE__ */ r.createElement(w, {
+      }, /* @__PURE__ */ n.createElement(w, {
         symbol: s.symbol,
         size: 25
       })));
     }
   });
-}, yt = a(J)`
+}, wt = a(J)`
     ${(e) => Q(e)}
     > ul {
         display: flex;
@@ -776,7 +776,7 @@ const Re = ({ className: e }) => {
         }
     }
     ${(e) => T(e)}
-`, bt = a(L)`
+`, kt = a(M)`
     ${G};
 
     background-color: ${(e) => e.bgColor};
@@ -816,86 +816,86 @@ const Re = ({ className: e }) => {
             stroke: #fff;
         }
     }
-`, $t = ([e, t]) => ({ type: e, content: t }), vt = ({ items: e, dispatch: t }) => /* @__PURE__ */ r.createElement(Et, {
-  items: e.map($t),
+`, Ct = ([e, t]) => ({ type: e, content: t }), St = ({ items: e, dispatch: t }) => /* @__PURE__ */ n.createElement(zt, {
+  items: e.map(Ct),
   renderLi: !0,
-  renderItem: (n) => {
-    switch (n.type) {
+  renderItem: (r) => {
+    switch (r.type) {
       case C.Text:
-        return /* @__PURE__ */ r.createElement(gt, {
-          text: n.content
+        return /* @__PURE__ */ n.createElement(vt, {
+          text: r.content
         });
       case C.HTML:
-        return /* @__PURE__ */ r.createElement(st, g({}, n.content));
+        return /* @__PURE__ */ n.createElement(ht, g({}, r.content));
       case C.Separator:
-        return /* @__PURE__ */ r.createElement(ut, g({}, n.content));
+        return /* @__PURE__ */ n.createElement(bt, g({}, r.content));
       case C.LinkList:
-        return /* @__PURE__ */ r.createElement(ct, x(g({}, n.content), {
+        return /* @__PURE__ */ n.createElement(ft, x(g({}, r.content), {
           dispatch: t
         }));
       case C.ButtonList:
-        return /* @__PURE__ */ r.createElement(nt, x(g({}, n.content), {
+        return /* @__PURE__ */ n.createElement(ct, x(g({}, r.content), {
           dispatch: t
         }));
       case C.VideoRequest:
-        return /* @__PURE__ */ r.createElement(pt, x(g({}, n.content), {
+        return /* @__PURE__ */ n.createElement(xt, x(g({}, r.content), {
           dispatch: t
         }));
       default:
-        return /* @__PURE__ */ r.createElement(lt, {
-          type: n.type,
-          content: n.content
+        return /* @__PURE__ */ n.createElement(ut, {
+          type: r.type,
+          content: r.content
         });
     }
   }
-}), Et = a(le)`
+}), zt = a(le)`
     ${ze}
 
     > li {
         margin: 0;
     }
-`, xt = X(
-  ({ className: e, timestamp: t, sender: n, type: o, content: l }, s) => {
+`, Lt = X(
+  ({ className: e, timestamp: t, sender: r, type: o, content: l }, s) => {
     const u = me(
       (m) => {
         let i = "first";
         return l.length > 1 && (i = m === 0 ? "first" : m + 1 === l.length ? "last" : "middle"), i;
       },
       [l]
-    ), c = () => /* @__PURE__ */ r.createElement(r.Fragment, null, l.map((m) => {
+    ), c = () => /* @__PURE__ */ n.createElement(n.Fragment, null, l.map((m) => {
       const { key: i, body: $, title: k, form: S, actions: E } = m, p = !!$ && !k && !S && !E;
-      return /* @__PURE__ */ r.createElement(Xe, {
+      return /* @__PURE__ */ n.createElement(at, {
         className: e,
         key: i,
         discrete: p,
         ref: s,
         timestamp: t,
         fullWidth: !!S || !!E
-      }, p && $ ? /* @__PURE__ */ r.createElement(Y, {
+      }, p && $ ? /* @__PURE__ */ n.createElement(Y, {
         html: $
-      }) : /* @__PURE__ */ r.createElement(F, {
+      }) : /* @__PURE__ */ n.createElement(F, {
         isSystem: !0,
         content: m
       }));
-    })), h = () => /* @__PURE__ */ r.createElement(ue, {
-      sender: n,
+    })), h = () => /* @__PURE__ */ n.createElement(ue, {
+      sender: r,
       timestamp: t,
       className: e
-    }, /* @__PURE__ */ r.createElement(P, null, l.map((m, i) => /* @__PURE__ */ r.createElement(U, {
+    }, /* @__PURE__ */ n.createElement(P, null, l.map((m, i) => /* @__PURE__ */ n.createElement(U, {
       left: !0,
       key: m.key,
       ref: s
-    }, /* @__PURE__ */ r.createElement(F, {
+    }, /* @__PURE__ */ n.createElement(F, {
       content: m,
       stacked: u(i)
-    }))))), v = () => /* @__PURE__ */ r.createElement(tt, {
+    }))))), v = () => /* @__PURE__ */ n.createElement(it, {
       timestamp: t,
       className: e
-    }, /* @__PURE__ */ r.createElement(P, null, l.map((m, i) => /* @__PURE__ */ r.createElement(U, {
+    }, /* @__PURE__ */ n.createElement(P, null, l.map((m, i) => /* @__PURE__ */ n.createElement(U, {
       right: !0,
       key: m.key,
       ref: s
-    }, /* @__PURE__ */ r.createElement(F, {
+    }, /* @__PURE__ */ n.createElement(F, {
       isUser: !0,
       content: m,
       stacked: u(i)
@@ -911,24 +911,24 @@ const Re = ({ className: e }) => {
         return null;
     }
   }
-), F = ({ content: e, isUser: t, isSystem: n, stacked: o }) => {
+), F = ({ content: e, isUser: t, isSystem: r, stacked: o }) => {
   const l = V(), { title: s, body: u, actions: c, form: h, items: v } = e;
-  return v ? /* @__PURE__ */ r.createElement(_, {
+  return v ? /* @__PURE__ */ n.createElement(_, {
     user: !!t,
     stacked: o
-  }, /* @__PURE__ */ r.createElement(vt, {
+  }, /* @__PURE__ */ n.createElement(St, {
     items: v,
     dispatch: l
-  })) : /* @__PURE__ */ r.createElement(_, {
-    padded: !n,
+  })) : /* @__PURE__ */ n.createElement(_, {
+    padded: !r,
     user: !!t,
     stacked: o,
     fullWidth: !!h || !!c
-  }, s && /* @__PURE__ */ r.createElement(B, null, /* @__PURE__ */ r.createElement(Pe, {
+  }, s && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Ue, {
     variant: "h2"
-  }, s)), u && /* @__PURE__ */ r.createElement(B, null, /* @__PURE__ */ r.createElement(qe, {
+  }, s)), u && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Ye, {
     html: u
-  })), h && /* @__PURE__ */ r.createElement(B, null, /* @__PURE__ */ r.createElement(Ve, x(g({}, h), {
+  })), h && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(qe, x(g({}, h), {
     onChange: (i, $) => {
       l("form", {
         data: $,
@@ -936,11 +936,11 @@ const Re = ({ className: e }) => {
         actionKey: i
       });
     }
-  }))), c && /* @__PURE__ */ r.createElement(B, null, /* @__PURE__ */ r.createElement(Ye, {
+  }))), c && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Ge, {
     items: Object.keys(c).map((i) => ({ label: c[i], actionKey: i })),
-    renderItem: (i) => /* @__PURE__ */ r.createElement("li", {
+    renderItem: (i) => /* @__PURE__ */ n.createElement("li", {
       key: i.actionKey
-    }, /* @__PURE__ */ r.createElement(Ge, {
+    }, /* @__PURE__ */ n.createElement(Je, {
       onClick: () => {
         l("action", i.actionKey);
       }
@@ -954,37 +954,37 @@ const Re = ({ className: e }) => {
         behavior: "smooth"
       });
     }, 250);
-  }, []), [t, n] = ae(!0), {
+  }, []), [t, r] = oe(!0), {
     messages: o,
     loading: l,
     typingActors: s = []
-  } = M(), u = () => s && s.length ? s.map((c, h) => /* @__PURE__ */ r.createElement(W, {
+  } = L(), u = () => s && s.length ? s.map((c, h) => /* @__PURE__ */ n.createElement(W, {
     id: `typing_${c.name}`,
     key: `typing_${c.name}`
-  }, /* @__PURE__ */ r.createElement(ue, {
+  }, /* @__PURE__ */ n.createElement(ue, {
     timestamp: Date.now(),
     sender: c
-  }, /* @__PURE__ */ r.createElement(re, {
+  }, /* @__PURE__ */ n.createElement(ne, {
     boxed: !0,
     ref: e
   })))) : null;
-  return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(wt, {
+  return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(Mt, {
     tabIndex: 0,
     scrollableCss: t,
-    ref: n
+    ref: r
   }, o && o.length ? o.map((c, h) => {
     const { type: v, timestamp: m, sender: i, content: $ } = c;
-    return /* @__PURE__ */ r.createElement(W, {
+    return /* @__PURE__ */ n.createElement(W, {
       className: "humany-conversation-entry",
       tabIndex: -1,
       key: `${v}_${i == null ? void 0 : i.name}_${m}_${$[0].key}`
-    }, /* @__PURE__ */ r.createElement(xt, x(g({}, c), {
+    }, /* @__PURE__ */ n.createElement(Lt, x(g({}, c), {
       ref: e
     })));
-  }) : null, u(), l && /* @__PURE__ */ r.createElement(W, null, /* @__PURE__ */ r.createElement(re, {
+  }) : null, u(), l && /* @__PURE__ */ n.createElement(W, null, /* @__PURE__ */ n.createElement(ne, {
     ref: e
-  }))), /* @__PURE__ */ r.createElement(Re, null));
-}, wt = a.div`
+  }))), /* @__PURE__ */ n.createElement(De, null));
+}, Mt = a.div`
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -1035,39 +1035,39 @@ const Re = ({ className: e }) => {
                 font-weight: normal;
             `
 )}
-`, kt = ({ dispatch: e }) => {
+`, Ht = ({ dispatch: e }) => {
   const t = Te(null);
   return ce(() => {
     t.current && t.current.parentNode && e("overlay-mounted", t.current);
-  }, [t]), /* @__PURE__ */ r.createElement(ie, {
+  }, [t]), /* @__PURE__ */ n.createElement(ie, {
     portalId: "humany-conversation-overlay-portal",
     className: "humany-conversation-overlay-outlet",
     ref: t
   });
-}, Ct = ({
+}, Tt = ({
   dispatch: e,
   header: t,
-  buttonLabel: n
-}) => /* @__PURE__ */ r.createElement(St, {
+  buttonLabel: r
+}) => /* @__PURE__ */ n.createElement(It, {
   portalId: "humany-conversation-portal",
   className: "humany-conversation-outlet"
-}, /* @__PURE__ */ r.createElement(zt, {
+}, /* @__PURE__ */ n.createElement(At, {
   className: "humany-conversation-outlet-head"
-}, /* @__PURE__ */ r.createElement(Mt, {
+}, /* @__PURE__ */ n.createElement(Bt, {
   className: "humany-conversation-outlet-head-button",
-  "aria-label": n,
-  title: n,
+  "aria-label": r,
+  title: r,
   onClick: () => e("hide-overlay-conversation")
-}, /* @__PURE__ */ r.createElement(w, {
+}, /* @__PURE__ */ n.createElement(w, {
   symbol: {
     type: "Svg",
     content: "caret-down"
   },
   size: 20
-})), t && /* @__PURE__ */ r.createElement(Lt, {
+})), t && /* @__PURE__ */ n.createElement(Rt, {
   className: "humany-conversation-outlet-header",
   variant: "h1"
-}, t)), /* @__PURE__ */ r.createElement(ge, null)), St = a(ie)`
+}, t)), /* @__PURE__ */ n.createElement(ge, null)), It = a(ie)`
     z-index: 11;
     top: auto;
     height: 65%;
@@ -1082,7 +1082,7 @@ const Re = ({ className: e }) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.large;
 }};
-`, zt = a.div`
+`, At = a.div`
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -1096,7 +1096,7 @@ const Re = ({ className: e }) => {
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
     ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
-`, Lt = a(q)`
+`, Rt = a(q)`
     font-size: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.medium;
@@ -1106,7 +1106,7 @@ const Re = ({ className: e }) => {
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
     margin: 0;
-`, Mt = a(L)`
+`, Bt = a(M)`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1129,26 +1129,26 @@ const Re = ({ className: e }) => {
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
     }
-`, Wt = (n) => {
-  var o = n, { className: e } = o, t = j(o, ["className"]);
+`, Yt = (r) => {
+  var o = r, { className: e } = o, t = j(o, ["className"]);
   const {
     overlay: l,
     overlayConversationHeader: s,
     overlayConversationCloseLabel: u,
     conversationControllerId: c
-  } = M(), h = V();
-  return /* @__PURE__ */ r.createElement(Le.Provider, {
+  } = L(), h = V();
+  return /* @__PURE__ */ n.createElement(Le.Provider, {
     value: c ? { id: c } : null
-  }, /* @__PURE__ */ r.createElement(Ht, x(g({}, t), {
+  }, /* @__PURE__ */ n.createElement(Kt, x(g({}, t), {
     className: H(e, "humany-conversation-component")
-  }), /* @__PURE__ */ r.createElement(ge, null)), l && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(kt, {
+  }), /* @__PURE__ */ n.createElement(ge, null)), l && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(Ht, {
     dispatch: h
-  }), l.conversation && /* @__PURE__ */ r.createElement(Ct, {
+  }), l.conversation && /* @__PURE__ */ n.createElement(Tt, {
     dispatch: h,
     header: s,
     buttonLabel: u
   })));
-}, Ht = a.div`
+}, Kt = a.div`
     position: absolute;
     right: 0;
     left: 0;
@@ -1159,6 +1159,6 @@ const Re = ({ className: e }) => {
     flex-direction: column;
 `;
 export {
-  Wt as default
+  Yt as default
 };
-//# sourceMappingURL=conversation.fe5da693.js.map
+//# sourceMappingURL=conversation.4bd3eedd.js.map