@telia-ace/widget-conversation 1.0.38-next.0 → 1.0.38-next.2

package/dist/{conversation.f80bcb4a.js → conversation.be64b43a.js}

@@ -1,130 +1,130 @@
 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, r) => t in e ? ve(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, g = (e, t) => {
+var ne = Object.prototype.hasOwnProperty, re = Object.prototype.propertyIsEnumerable;
+var te = (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]);
+    ne.call(t, r) && te(e, r, t[r]);
   if (A)
     for (var r of A(t))
-      te.call(t, r) && Z(e, r, t[r]);
+      re.call(t, r) && te(e, r, t[r]);
   return e;
-}, x = (e, t) => Ee(e, xe(t));
-var j = (e, t) => {
+}, E = (e, t) => Ee(e, xe(t));
+var F = (e, t) => {
   var r = {};
   for (var o in e)
-    ee.call(e, o) && t.indexOf(o) < 0 && (r[o] = e[o]);
+    ne.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) && (r[o] = e[o]);
+      t.indexOf(o) < 0 && re.call(e, o) && (r[o] = e[o]);
   return r;
 };
 import a from "@emotion/styled";
-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 { useIsTabbing as we, useDispatch as Y, useProperties as I, useScroll as le, SymbolBadge as x, Input as se, Button as z, borderTabStyle as f, Typography as G, invertedHoverButton as ke, Html as J, List as ie, buttonCss as Q, ItemList as K, itemList as O, useComponent as Ce, genericHtml as Se, headingElement as X, list as ze, WidgetOverlayOutlet as ce, ConversationContext as Le } from "@telia-ace/widget-ui";
 import { appendClassNames as H } from "@telia-ace/widget-utilities";
-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 n, { useState as R, useEffect as me, forwardRef as Z, Suspense as Me, useMemo as Ie, useCallback as de, useRef as He } from "react";
+import { css as p, keyframes as Te } from "@emotion/react";
 import { FormComponent as Ae } from "@telia-ace/widget-forms";
-import { ConversationMessageListItemType as C, ConversationMessageType as D } from "./index.js";
+import { ConversationMessageListItemType as k, ConversationMessageType as W } from "./index.js";
 import "@telia-ace/widget-core";
 import "@telia-ace/widget-services";
 import "@telia-ace/widget-plugins";
 const Re = ({ className: e }) => {
-  const [t, r] = 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 = Y(), {
     inputPlaceholder: i = "Type your message",
     inputHidden: $ = !1,
-    inputDisabled: k = !1,
-    sendButtonLabel: S = "Send message",
-    inputMultiline: E = !0,
-    secondaryAction: p
-  } = L(), [fe, y] = oe(!0);
-  ce(() => {
-    if (y.current) {
-      const { lineHeight: d, maxHeight: I } = getComputedStyle(y.current);
+    inputDisabled: S = !1,
+    sendButtonLabel: L = "Send message",
+    inputMultiline: w = !0,
+    secondaryAction: y
+  } = I(), [pe, b] = le(!0);
+  me(() => {
+    if (b.current) {
+      const { lineHeight: d, maxHeight: T } = getComputedStyle(b.current);
       if (d && d.indexOf("px") > -1) {
-        const z = d.split("px"), be = parseInt(z[0], 10);
+        const M = d.split("px"), be = parseInt(M[0], 10);
         u(be);
-        const $e = I.split("px");
+        const $e = T.split("px");
         h(parseInt($e[0], 10));
       }
     }
-  }, [y.current]);
-  const N = (d) => {
-    !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
-    }, p)));
+  }, [b.current]);
+  const j = (d) => {
+    !d.shiftKey || !w ? (d.preventDefault(), t && t.length > 0 && (m("user-submit", { text: t }), r(""), D(""))) : t.length < 1 && d.preventDefault();
+  }, fe = (d) => {
+    !y || (d.preventDefault(), m("action", g({
+      actionKey: y.action
+    }, y)));
   }, ye = (d) => {
-    if (E && y.current) {
-      const I = y.current.scrollHeight;
-      if (I > s) {
-        y.current.style.height = "auto";
-        let z = I;
-        d.length < 1 && (z = s), y.current.style.height = `${z}px`, z >= c ? y.current.style.overflowY = "scroll" : y.current.style.overflowY = "hidden";
+    if (w && b.current) {
+      const T = b.current.scrollHeight;
+      if (T > s) {
+        b.current.style.height = "auto";
+        let M = T;
+        d.length < 1 && (M = s), b.current.style.height = `${M}px`, M >= c ? b.current.style.overflowY = "scroll" : b.current.style.overflowY = "hidden";
       }
     }
-  }, O = (d) => {
+  }, D = (d) => {
     ye(d), r(d), d && d.length > 0 && m("user-typing", { textLength: d.length });
   };
   return $ ? null : /* @__PURE__ */ n.createElement(
     Oe,
     {
-      grow: E,
+      grow: w,
       className: H("humany-conversation-input", e),
       "data-has-focus": o,
-      scrollableCss: fe,
+      scrollableCss: pe,
       isTabbing: v
     },
-    p && /* @__PURE__ */ n.createElement(
-      Ne,
+    y && /* @__PURE__ */ n.createElement(
+      Ke,
       {
-        disabled: k,
-        onClick: pe,
-        title: p.label,
-        "aria-label": p.label
+        disabled: S,
+        onClick: fe,
+        title: y.label,
+        "aria-label": y.label
       },
       /* @__PURE__ */ n.createElement(
-        w,
+        x,
         {
           size: 24,
-          symbol: { type: "Svg", content: p.icon || "browse" }
+          symbol: { type: "Svg", content: y.icon || "browse" }
         }
       )
     ),
-    E ? /* @__PURE__ */ n.createElement(
+    w ? /* @__PURE__ */ n.createElement(
       Be,
       {
         value: t,
-        onChange: O,
-        onEnter: N,
-        disabled: k,
+        onChange: D,
+        onEnter: j,
+        disabled: S,
         "aria-label": i,
         placeholder: i,
         onFocusChange: l,
         type: "textarea",
         rows: 1,
-        ref: y
+        ref: b
       }
     ) : /* @__PURE__ */ n.createElement(
-      Ke,
+      Ne,
       {
         value: t,
-        onChange: O,
-        onEnter: N,
-        disabled: k,
+        onChange: D,
+        onEnter: j,
+        disabled: S,
         "aria-label": i,
         placeholder: i,
         onFocusChange: l
       }
     ),
     /* @__PURE__ */ n.createElement(
-      de,
+      ue,
       {
-        disabled: k,
-        onClick: N,
-        title: S,
-        "aria-label": S
+        disabled: S,
+        onClick: j,
+        title: L,
+        "aria-label": L
       },
       /* @__PURE__ */ n.createElement(
         je,
@@ -136,7 +136,7 @@ const Re = ({ className: e }) => {
       )
     )
   );
-}, Be = a(ae)`
+}, Be = a(se)`
     resize: none;
     flex: 1;
     flex-shrink: 1;
@@ -156,7 +156,7 @@ const Re = ({ className: e }) => {
     border: none;
     transition: height 200ms linear;
     outline: none;
-`, Ke = a(ae)`
+`, Ne = a(se)`
     flex: 1;
     border: none;
     background-color: transparent;
@@ -182,7 +182,7 @@ const Re = ({ className: e }) => {
 }};
         font-style: italic;
     }
-`, de = a(M)`
+`, ue = a(z)`
     flex: 0 0 50px;
     align-self: stretch;
     background-color: transparent;
@@ -192,19 +192,19 @@ const Re = ({ className: e }) => {
     border: none;
     color: #a6a6a6;
     &:focus-visible {
-        ${b};
+        ${f};
     }
-`, Ne = a(de)`
+`, Ke = a(ue)`
     border-right: ${(e) => e.theme.border};
     margin: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }} 0;
 `, Oe = a.div`
-    ${(e) => e.grow ? f`
+    ${(e) => e.grow ? p`
                   min-height: 50px;
                   max-height: 150px;
-              ` : f`
+              ` : p`
                   height: 50px;
               `}
     flex: 0 0 auto;
@@ -215,7 +215,7 @@ const Re = ({ className: e }) => {
   return (t = e.theme.colors) == null ? void 0 : t.accent;
 }};
     border-top: ${(e) => e.theme.inputBorder};
-    ${(e) => e["data-has-focus"] && e.isTabbing && b}
+    ${(e) => e["data-has-focus"] && e.isTabbing && f}
     textarea {
         ${(e) => !!e.scrollableCss && e.scrollableCss}
     }
@@ -223,10 +223,10 @@ const Re = ({ className: e }) => {
   (r) => {
     var o = r, {
       hasContent: e
-    } = o, t = j(o, [
+    } = o, t = F(o, [
       "hasContent"
     ]);
-    return /* @__PURE__ */ n.createElement(w, g({}, t));
+    return /* @__PURE__ */ n.createElement(x, g({}, t));
   }
 )`
     line,
@@ -287,7 +287,7 @@ const Re = ({ className: e }) => {
 }};
         }
     }
-`, We = Ie`
+`, We = Te`
   0% {
     opacity: 0;
   }
@@ -311,29 +311,29 @@ const Re = ({ className: e }) => {
 }};
         animation: ${We} 1s infinite;
     }
-    > div:nth-child(2) {
+    > div:nth-of-type(2) {
         animation-delay: 100ms;
     }
-    > div:nth-child(3) {
+    > div:nth-of-type(3) {
         animation-delay: 200ms;
     }
-`, P = a.div`
+`, _ = a.div`
     grid-area: content;
     max-width: 100%;
     overflow: hidden;
-`, Ue = a(q)`
+`, Ue = a(G)`
     font-size: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.normal;
 }};
     font-weight: normal;
     margin: 0;
-`, U = a.div`
+`, V = a.div`
     display: flex;
     ${(e) => e.left && "justify-content: start;"};
     ${(e) => e.center && "justify-content: center;"};
     ${(e) => e.right && "justify-content: end;"};
-`, _ = a.div`
+`, q = a.div`
     ${(e) => {
   var t;
   return e.padded && `padding: ${(t = e.theme.sizes) == null ? void 0 : t.medium};`;
@@ -357,12 +357,12 @@ const Re = ({ className: e }) => {
     ${(e) => e.fullWidth && "width: 100%;"}
 `, _e = (e, t) => {
   var o, l;
-  const r = f`
+  const r = p`
         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`
+  return t.borderRadius ? p`
         ${r}
 
         border-top-right-radius: ${t.borderRadius};
@@ -378,11 +378,11 @@ const Re = ({ className: e }) => {
     ` : r;
 }, Ve = (e, t) => {
   var o, l;
-  const r = f`
+  const r = p`
         background-color: ${(o = t.colors) == null ? void 0 : o.primary};
         color: ${(l = t.colors) == null ? void 0 : l.accent};
     `;
-  return t.borderRadius ? f`
+  return t.borderRadius ? p`
         ${r}
 
         border-top-left-radius: ${t.borderRadius};
@@ -404,9 +404,9 @@ const Re = ({ className: e }) => {
     &:last-child {
         margin-bottom: 0;
     }
-`, T = (e) => {
+`, C = (e) => {
   var t, r;
-  return f`
+  return p`
     margin: ${(t = e.theme.sizes) == null ? void 0 : t.medium} 0;
     padding: 0 ${(r = e.theme.sizes) == null ? void 0 : r.medium};
 `;
@@ -438,18 +438,18 @@ const Re = ({ className: e }) => {
 }};
         }
     }
-`, Ye = a(Y)`
+`, Ye = a(J)`
     white-space: pre-wrap;
     a {
         color: ${(e) => e.theme.colors.link};
         &:focus {
             ${(e) => {
   var t;
-  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && b;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && f;
 }};
         }
     }
-`, Ge = a(le)`
+`, Ge = a(ie)`
     padding: 0;
     list-style: none;
     margin: 0 -${(e) => {
@@ -463,7 +463,7 @@ const Re = ({ className: e }) => {
 }};
     }
 `, Je = a.button`
-    ${(e) => G(e)};
+    ${(e) => Q(e)};
     display: block;
     background-color: ${(e) => {
   var t;
@@ -472,12 +472,12 @@ const Re = ({ className: e }) => {
     width: 100%;
     color: #fff;
     &:focus-visible {
-        ${b}
+        ${f}
         background-color: transparent;
     }
-`, Qe = X(
-  ({ boxed: e, className: t, agentData: r }, o) => /* @__PURE__ */ n.createElement(P, { ref: o }, /* @__PURE__ */ n.createElement(U, { left: e, center: !e }, /* @__PURE__ */ n.createElement(_, { padded: !!e, stacked: e ? "first" : void 0 }, /* @__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`
+`, Qe = Z(
+  ({ boxed: e, className: t, agentData: r }, o) => /* @__PURE__ */ n.createElement(_, { ref: o }, /* @__PURE__ */ n.createElement(V, { left: e, center: !e }, /* @__PURE__ */ n.createElement(q, { padded: !!e, stacked: e ? "first" : void 0 }, /* @__PURE__ */ n.createElement(Pe, null, /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null)))))
+), oe = Qe, Xe = a.p`
     && {
         font-size: ${(e) => {
   var t;
@@ -492,41 +492,41 @@ const Re = ({ className: e }) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
-`, re = (e) => new Date(e).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), Ze = ({ className: e, name: t, timestamp: r }) => {
+`, ae = (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 ? 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 t ? r ? o = `${t}: ${ae(r)}` : o = t : r && (o = ae(r)), /* @__PURE__ */ n.createElement(Xe, null, o);
+}, N = Ze, et = ({ className: e, children: t, sender: r, timestamp: o }) => {
+  const { avatar: l, name: s } = r, { avatarSize: u } = I();
   return /* @__PURE__ */ n.createElement(
     tt,
     {
       hasAvatar: !!l,
       className: H(e, "humany-conversation-agent-message")
     },
-    l && /* @__PURE__ */ n.createElement(Fe, { avatarSize: u }, typeof l == "string" ? /* @__PURE__ */ n.createElement("img", { src: l }) : /* @__PURE__ */ n.createElement(w, { symbol: l })),
+    l && /* @__PURE__ */ n.createElement(Fe, { avatarSize: u }, typeof l == "string" ? /* @__PURE__ */ n.createElement("img", { src: l }) : /* @__PURE__ */ n.createElement(x, { symbol: l })),
     t,
-    /* @__PURE__ */ n.createElement(K, { name: s, timestamp: o })
+    /* @__PURE__ */ n.createElement(N, { name: s, timestamp: o })
   );
 }, tt = a.div`
     display: grid;
     margin-right: 10%;
     width: 90%;
-    ${(e) => e.hasAvatar ? f`
+    ${(e) => e.hasAvatar ? p`
                   grid-template-columns: auto 1fr;
                   grid-template-rows: 1fr auto;
                   grid-template-areas:
                       'avatar content'
                       '. info';
-              ` : f`
+              ` : p`
                   grid-template-columns: 1fr;
                   grid-template-rows: 1fr auto;
                   grid-template-areas:
                       'content'
                       'info';
               `};
-`, ue = et, nt = X(
+`, he = et, nt = Z(
   ({ className: e, children: t, timestamp: r, discrete: o, fullWidth: l }, s) => /* @__PURE__ */ n.createElement(
     rt,
     {
@@ -534,7 +534,7 @@ const Re = ({ className: e }) => {
       className: H(e, "humany-conversation-system-message"),
       fullWidth: l
     },
-    o ? /* @__PURE__ */ n.createElement(ot, { className: "humany-conversation-discrete-message" }, t, /* @__PURE__ */ n.createElement(K, { timestamp: r })) : /* @__PURE__ */ n.createElement(n.Fragment, null, t, /* @__PURE__ */ n.createElement(K, { timestamp: r }))
+    o ? /* @__PURE__ */ n.createElement(ot, { className: "humany-conversation-discrete-message" }, t, /* @__PURE__ */ n.createElement(N, { timestamp: r })) : /* @__PURE__ */ n.createElement(n.Fragment, null, t, /* @__PURE__ */ n.createElement(N, { timestamp: r }))
   )
 ), rt = a.div`
     ${(e) => e.fullWidth && "width: 100%"};
@@ -558,14 +558,14 @@ const Re = ({ className: e }) => {
         margin: 0;
     }
 `, at = nt, lt = ({ className: e, children: t, timestamp: r }) => {
-  const { userLabel: o = "" } = L();
+  const { userLabel: o = "" } = I();
   return /* @__PURE__ */ n.createElement(
     st,
     {
       className: H(e, "humany-conversation-user-message")
     },
     t,
-    /* @__PURE__ */ n.createElement(K, { name: o, timestamp: r })
+    /* @__PURE__ */ n.createElement(N, { name: o, timestamp: r })
   );
 }, st = a.div`
     margin-left: 10%;
@@ -573,14 +573,14 @@ const Re = ({ className: e }) => {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-`, it = lt, he = (e) => Array.isArray(e) ? e : Object.keys(e).map((t) => ({
+`, it = lt, ee = (e) => Array.isArray(e) ? e : Object.keys(e).map((t) => ({
   label: e[t],
   actionKey: t
 })), ct = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(
   mt,
   {
     header: e,
-    items: he(t),
+    items: ee(t),
     renderItem: (o) => /* @__PURE__ */ n.createElement("li", { key: o.actionKey }, /* @__PURE__ */ n.createElement(
       dt,
       {
@@ -590,12 +590,12 @@ const Re = ({ className: e }) => {
         "aria-label": o.label,
         title: o.label
       },
-      /* @__PURE__ */ n.createElement(w, { symbol: o.symbol }),
+      /* @__PURE__ */ n.createElement(x, { symbol: o.symbol }),
       o.label
     ))
   }
-), mt = a(J)`
-    ${Q}
+), mt = a(K)`
+    ${O}
     > ul {
         display: flex;
         flex-wrap: wrap;
@@ -607,9 +607,9 @@ const Re = ({ className: e }) => {
             margin: 0;
         }
     }
-    ${T}
-`, dt = a(M)`
-    ${G};
+    ${C}
+`, dt = a(z)`
+    ${Q};
 
     display: block;
     padding: ${(e) => {
@@ -625,7 +625,7 @@ const Re = ({ className: e }) => {
     overflow: hidden;
     text-overflow: ellipsis;
     &:focus-visible {
-        ${b}
+        ${f}
         background-color: transparent;
     }
 
@@ -639,24 +639,140 @@ const Re = ({ className: e }) => {
 `, ut = ({ type: e, content: t = {} }) => {
   const r = Ce(e);
   return !r || !e ? null : /* @__PURE__ */ n.createElement(Me, { fallback: null }, /* @__PURE__ */ n.createElement(r, g({}, t)));
-}, ht = ({ body: e }) => /* @__PURE__ */ n.createElement(gt, { html: e }), gt = a(Y)`
+}, ht = ({ body: e }) => /* @__PURE__ */ n.createElement(gt, { html: e }), gt = a(J)`
     ${Se}
     color: inherit;
     white-space: pre-wrap;
-    ${T}
+    ${C}
     a {
         color: ${(e) => e.theme.colors.link};
         &:focus-visible {
-            ${b};
+            ${f};
         }
     }
-`, ft = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(
-  pt,
+`, pt = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(
+  ft,
   {
     header: e,
-    items: he(t),
+    items: ee(t),
+    renderItem: (o) => {
+      var l;
+      return /* @__PURE__ */ n.createElement("li", { key: o.actionKey }, /* @__PURE__ */ n.createElement(yt, null, ((l = o.symbol) == null ? void 0 : l.content) && /* @__PURE__ */ n.createElement("div", { className: "item-icon" }, /* @__PURE__ */ n.createElement(
+        x,
+        {
+          size: 22,
+          symbol: {
+            type: o.symbol.type,
+            content: o.symbol.content
+          }
+        }
+      )), /* @__PURE__ */ n.createElement("div", { className: "item-body" }, /* @__PURE__ */ n.createElement(
+        z,
+        {
+          onClick: () => {
+            r("action", o);
+          },
+          "aria-label": o.label,
+          title: o.label
+        },
+        o.label
+      ), o.description && /* @__PURE__ */ n.createElement("p", null, o.description))));
+    }
+  }
+), ft = a(K)`
+    ${O}
+
+    > .humany-paragraph {
+        ${C}
+        margin-bottom: 0;
+
+        h1 {
+            margin: 0;
+        }
+    }
+
+    ${(e) => X(e)(
+  "h1",
+  p`
+                white-space: normal;
+            `
+)}
+
+    > ul {
+        display: flex;
+        flex-direction: column;
+        gap: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+        > li {
+            margin: 0;
+        }
+    }
+
+    li {
+        border-bottom: ${(e) => e.theme.border};
+
+        &:last-of-type {
+            border-bottom: none;
+        }
+    }
+`, yt = a.div`
+    display: flex;
+    gap: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.medium;
+}};
+    ${C}
+
+    .item-icon {
+    }
+
+    .item-body {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: ${(e) => {
+  var t;
+  return (t = e.theme.sizes) == null ? void 0 : t.normal;
+}};
+
+        p {
+            margin: 0;
+            white-space: normal;
+        }
+    }
+
+    button {
+        background: transparent;
+        border: none;
+        font-family: inherit;
+        font-size: ${(e) => {
+  var t;
+  return (t = e.theme.fonts) == null ? void 0 : t.normal;
+}};
+        cursor: pointer;
+        padding: 0;
+        margin: 0;
+
+        &:focus-visible {
+            ${f}
+            span {
+                color: ${(e) => {
+  var t;
+  return (t = e.theme.colors) == null ? void 0 : t.primary;
+}};
+                text-decoration: underline;
+            }
+        }
+    }
+`, bt = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(
+  $t,
+  {
+    header: e,
+    items: ee(t),
     renderItem: (o) => /* @__PURE__ */ n.createElement("li", { key: o.actionKey }, /* @__PURE__ */ n.createElement(
-      yt,
+      vt,
       {
         help: o.actionKey === "help",
         onClick: () => {
@@ -667,7 +783,7 @@ const Re = ({ className: e }) => {
       },
       o.label,
       o.actionKey === "help" && /* @__PURE__ */ n.createElement(
-        w,
+        x,
         {
           size: 14,
           symbol: {
@@ -678,13 +794,13 @@ const Re = ({ className: e }) => {
       )
     ))
   }
-), pt = a(J)`
-    ${Q}
-    ${T}
+), $t = a(K)`
+    ${O}
+    ${C}
 
-    ${(e) => se(e)(
+    ${(e) => X(e)(
   "h1",
-  f`
+  p`
                 white-space: normal;
             `
 )}
@@ -700,7 +816,7 @@ const Re = ({ className: e }) => {
             margin: 0;
         }
     }
-`, yt = a(M)`
+`, vt = a(z)`
     display: block;
     text-align: left;
     font-weight: 300;
@@ -714,7 +830,7 @@ const Re = ({ className: e }) => {
 
     ${(e) => {
   var t, r;
-  return e.help && f`
+  return e.help && p`
             color: ${(t = e.theme.colors) == null ? void 0 : t.text};
             text-decoration: underline;
 
@@ -726,7 +842,7 @@ const Re = ({ className: e }) => {
 }}
 
     &:focus-visible {
-        ${b}
+        ${f}
         span {
             color: ${(e) => {
   var t;
@@ -735,18 +851,18 @@ const Re = ({ className: e }) => {
             text-decoration: underline;
         }
     }
-`, bt = () => /* @__PURE__ */ n.createElement($t, null), $t = a.div`
+`, Et = () => /* @__PURE__ */ n.createElement(xt, null), xt = a.div`
     ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
     width: 100%;
-`, vt = ({ text: e }) => /* @__PURE__ */ n.createElement(Et, { variant: "span" }, e), Et = a(q)`
-    ${T}
-`, xt = ({
+`, wt = ({ text: e }) => /* @__PURE__ */ n.createElement(kt, { variant: "span" }, e), kt = a(G)`
+    ${C}
+`, Ct = ({
   header: e = "Video call",
   acceptLabel: t = "Accept",
   declineLabel: r = "Decline",
   dispatch: o
 }) => {
-  const l = He(() => [
+  const l = Ie(() => [
     {
       label: t,
       actionKey: "accept-video-call",
@@ -765,14 +881,14 @@ const Re = ({ className: e }) => {
     }
   ], [t, r]);
   return /* @__PURE__ */ n.createElement(
-    wt,
+    St,
     {
       header: e,
       items: l,
       renderItem: (s) => {
         const u = s.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
         return /* @__PURE__ */ n.createElement("li", { key: s.actionKey }, /* @__PURE__ */ n.createElement(
-          kt,
+          zt,
           {
             onClick: () => {
               o("action", s);
@@ -781,13 +897,13 @@ const Re = ({ className: e }) => {
             title: s.label,
             bgColor: u
           },
-          /* @__PURE__ */ n.createElement(w, { symbol: s.symbol, size: 25 })
+          /* @__PURE__ */ n.createElement(x, { symbol: s.symbol, size: 25 })
         ));
       }
     }
   );
-}, wt = a(J)`
-    ${(e) => Q(e)}
+}, St = a(K)`
+    ${(e) => O(e)}
     > ul {
         display: flex;
         flex-wrap: wrap;
@@ -799,9 +915,9 @@ const Re = ({ className: e }) => {
             margin: 0;
         }
     }
-    ${(e) => T(e)}
-`, kt = a(M)`
-    ${G};
+    ${(e) => C(e)}
+`, zt = a(z)`
+    ${Q};
 
     background-color: ${(e) => e.bgColor};
     display: flex;
@@ -813,7 +929,7 @@ const Re = ({ className: e }) => {
     border-radius: 100%;
 
     &:focus-visible {
-        ${b}
+        ${f}
         background-color: transparent;
 
         i,
@@ -840,66 +956,68 @@ const Re = ({ className: e }) => {
             stroke: #fff;
         }
     }
-`, Ct = ([e, t]) => ({ type: e, content: t }), St = ({ items: e, dispatch: t }) => /* @__PURE__ */ n.createElement(
-  zt,
+`, Lt = ([e, t]) => ({ type: e, content: t }), Mt = ({ items: e, dispatch: t }) => /* @__PURE__ */ n.createElement(
+  It,
   {
-    items: e.map(Ct),
+    items: e.map(Lt),
     renderLi: !0,
     renderItem: (r) => {
       switch (r.type) {
-        case C.Text:
-          return /* @__PURE__ */ n.createElement(vt, { text: r.content });
-        case C.HTML:
+        case k.Text:
+          return /* @__PURE__ */ n.createElement(wt, { text: r.content });
+        case k.HTML:
           return /* @__PURE__ */ n.createElement(ht, g({}, r.content));
-        case C.Separator:
-          return /* @__PURE__ */ n.createElement(bt, g({}, r.content));
-        case C.LinkList:
-          return /* @__PURE__ */ n.createElement(ft, x(g({}, r.content), { dispatch: t }));
-        case C.ButtonList:
-          return /* @__PURE__ */ n.createElement(ct, x(g({}, r.content), { dispatch: t }));
-        case C.VideoRequest:
-          return /* @__PURE__ */ n.createElement(xt, x(g({}, r.content), { dispatch: t }));
+        case k.Separator:
+          return /* @__PURE__ */ n.createElement(Et, g({}, r.content));
+        case k.ItemList:
+          return /* @__PURE__ */ n.createElement(pt, E(g({}, r.content), { dispatch: t }));
+        case k.LinkList:
+          return /* @__PURE__ */ n.createElement(bt, E(g({}, r.content), { dispatch: t }));
+        case k.ButtonList:
+          return /* @__PURE__ */ n.createElement(ct, E(g({}, r.content), { dispatch: t }));
+        case k.VideoRequest:
+          return /* @__PURE__ */ n.createElement(Ct, E(g({}, r.content), { dispatch: t }));
         default:
           return /* @__PURE__ */ n.createElement(ut, { type: r.type, content: r.content });
       }
     }
   }
-), zt = a(le)`
+), It = a(ie)`
     ${ze}
 
     > li {
         margin: 0;
     }
-`, Lt = X(
+`, Ht = Z(
   ({ className: e, timestamp: t, sender: r, type: o, content: l }, s) => {
-    const u = me(
+    const u = de(
       (m) => {
         let i = "first";
         return l.length > 1 && (i = m === 0 ? "first" : m + 1 === l.length ? "last" : "middle"), i;
       },
       [l]
     ), 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;
+      const { key: i, body: $, title: S, form: L, actions: w } = m, y = !!$ && !S && !L && !w;
       return /* @__PURE__ */ n.createElement(
         at,
         {
           className: e,
           key: i,
-          discrete: p,
+          discrete: y,
           ref: s,
           timestamp: t,
-          fullWidth: !!S || !!E
+          fullWidth: !!L || !!w
         },
-        p && $ ? /* @__PURE__ */ n.createElement(Y, { html: $ }) : /* @__PURE__ */ n.createElement(F, { isSystem: !0, content: m })
+        y && $ ? /* @__PURE__ */ n.createElement(J, { html: $ }) : /* @__PURE__ */ n.createElement(P, { isSystem: !0, content: m })
       );
-    })), h = () => /* @__PURE__ */ n.createElement(ue, { sender: r, timestamp: t, className: e }, /* @__PURE__ */ n.createElement(P, null, l.map((m, i) => /* @__PURE__ */ n.createElement(U, { left: !0, key: m.key, ref: s }, /* @__PURE__ */ n.createElement(
-      F,
+    })), h = () => /* @__PURE__ */ n.createElement(he, { sender: r, timestamp: t, className: e }, /* @__PURE__ */ n.createElement(_, null, l.map((m, i) => /* @__PURE__ */ n.createElement(V, { left: !0, key: m.key, ref: s }, /* @__PURE__ */ n.createElement(
+      P,
       {
         content: m,
         stacked: u(i)
       }
-    ))))), v = () => /* @__PURE__ */ n.createElement(it, { timestamp: t, className: e }, /* @__PURE__ */ n.createElement(P, null, l.map((m, i) => /* @__PURE__ */ n.createElement(U, { right: !0, key: m.key, ref: s }, /* @__PURE__ */ n.createElement(
-      F,
+    ))))), v = () => /* @__PURE__ */ n.createElement(it, { timestamp: t, className: e }, /* @__PURE__ */ n.createElement(_, null, l.map((m, i) => /* @__PURE__ */ n.createElement(V, { right: !0, key: m.key, ref: s }, /* @__PURE__ */ n.createElement(
+      P,
       {
         isUser: !0,
         content: m,
@@ -907,20 +1025,20 @@ const Re = ({ className: e }) => {
       }
     )))));
     switch (o) {
-      case D.System:
+      case W.System:
         return c();
-      case D.Agent:
+      case W.Agent:
         return h();
-      case D.User:
+      case W.User:
         return v();
       default:
         return null;
     }
   }
-), 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__ */ n.createElement(_, { user: !!t, stacked: o }, /* @__PURE__ */ n.createElement(St, { items: v, dispatch: l })) : /* @__PURE__ */ n.createElement(
-    _,
+), P = ({ content: e, isUser: t, isSystem: r, stacked: o }) => {
+  const l = Y(), { title: s, body: u, actions: c, form: h, items: v } = e;
+  return v ? /* @__PURE__ */ n.createElement(q, { user: !!t, stacked: o }, /* @__PURE__ */ n.createElement(Mt, { items: v, dispatch: l })) : /* @__PURE__ */ n.createElement(
+    q,
     {
       padded: !r,
       user: !!t,
@@ -931,7 +1049,7 @@ const Re = ({ className: e }) => {
     u && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Ye, { html: u })),
     h && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(
       qe,
-      x(g({}, h), {
+      E(g({}, h), {
         onChange: (i, $) => {
           l("form", {
             data: $,
@@ -958,31 +1076,31 @@ const Re = ({ className: e }) => {
     ))
   );
 }, ge = () => {
-  const e = me((c) => {
+  const e = de((c) => {
     c && setTimeout(() => {
       c.scrollIntoView({
         block: "start",
         behavior: "smooth"
       });
     }, 250);
-  }, []), [t, r] = oe(!0), {
+  }, []), [t, r] = le(!0), {
     messages: o,
     loading: l,
     typingActors: s = []
-  } = L(), u = () => s && s.length ? s.map((c, h) => /* @__PURE__ */ n.createElement(W, { id: `typing_${c.name}`, key: `typing_${c.name}` }, /* @__PURE__ */ n.createElement(ue, { timestamp: Date.now(), sender: c }, /* @__PURE__ */ n.createElement(ne, { boxed: !0, ref: e })))) : null;
-  return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(Mt, { tabIndex: 0, scrollableCss: t, ref: r }, o && o.length ? o.map((c, h) => {
+  } = I(), u = () => s && s.length ? s.map((c, h) => /* @__PURE__ */ n.createElement(U, { id: `typing_${c.name}`, key: `typing_${c.name}` }, /* @__PURE__ */ n.createElement(he, { timestamp: Date.now(), sender: c }, /* @__PURE__ */ n.createElement(oe, { boxed: !0, ref: e })))) : null;
+  return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(Tt, { tabIndex: 0, scrollableCss: t, ref: r }, o && o.length ? o.map((c, h) => {
     const { type: v, timestamp: m, sender: i, content: $ } = c;
     return /* @__PURE__ */ n.createElement(
-      W,
+      U,
       {
         className: "humany-conversation-entry",
         tabIndex: -1,
         key: `${v}_${i == null ? void 0 : i.name}_${m}_${$[0].key}`
       },
-      /* @__PURE__ */ n.createElement(Lt, x(g({}, c), { ref: e }))
+      /* @__PURE__ */ n.createElement(Ht, E(g({}, c), { ref: e }))
     );
-  }) : null, u(), l && /* @__PURE__ */ n.createElement(W, null, /* @__PURE__ */ n.createElement(ne, { ref: e }))), /* @__PURE__ */ n.createElement(De, null));
-}, Mt = a.div`
+  }) : null, u(), l && /* @__PURE__ */ n.createElement(U, null, /* @__PURE__ */ n.createElement(oe, { ref: e }))), /* @__PURE__ */ n.createElement(De, null));
+}, Tt = a.div`
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -993,9 +1111,9 @@ const Re = ({ className: e }) => {
 }};
     ${(e) => !!e.scrollableCss && e.scrollableCss};
     &:focus-visible {
-        ${(e) => b(e)};
+        ${(e) => f(e)};
     }
-`, W = a.div`
+`, U = a.div`
     margin: 0;
     margin-bottom: ${(e) => {
   var t;
@@ -1027,36 +1145,36 @@ const Re = ({ className: e }) => {
     h1 {
         font-weight: normal;
     }
-    ${(e) => se(e)(
+    ${(e) => X(e)(
   "h1",
-  f`
+  p`
                 font-weight: normal;
             `
 )}
-`, Ht = ({ dispatch: e }) => {
-  const t = Te(null);
-  return ce(() => {
+`, At = ({ dispatch: e }) => {
+  const t = He(null);
+  return me(() => {
     t.current && t.current.parentNode && e("overlay-mounted", t.current);
   }, [t]), /* @__PURE__ */ n.createElement(
-    ie,
+    ce,
     {
       portalId: "humany-conversation-overlay-portal",
       className: "humany-conversation-overlay-outlet",
       ref: t
     }
   );
-}, Tt = ({
+}, Rt = ({
   dispatch: e,
   header: t,
   buttonLabel: r
 }) => /* @__PURE__ */ n.createElement(
-  It,
+  Bt,
   {
     portalId: "humany-conversation-portal",
     className: "humany-conversation-outlet"
   },
-  /* @__PURE__ */ n.createElement(At, { className: "humany-conversation-outlet-head" }, /* @__PURE__ */ n.createElement(
-    Bt,
+  /* @__PURE__ */ n.createElement(Nt, { className: "humany-conversation-outlet-head" }, /* @__PURE__ */ n.createElement(
+    Ot,
     {
       className: "humany-conversation-outlet-head-button",
       "aria-label": r,
@@ -1064,7 +1182,7 @@ const Re = ({ className: e }) => {
       onClick: () => e("hide-overlay-conversation")
     },
     /* @__PURE__ */ n.createElement(
-      w,
+      x,
       {
         symbol: {
           type: "Svg",
@@ -1074,7 +1192,7 @@ const Re = ({ className: e }) => {
       }
     )
   ), t && /* @__PURE__ */ n.createElement(
-    Rt,
+    Kt,
     {
       className: "humany-conversation-outlet-header",
       variant: "h1"
@@ -1082,7 +1200,7 @@ const Re = ({ className: e }) => {
     t
   )),
   /* @__PURE__ */ n.createElement(ge, null)
-), It = a(ie)`
+), Bt = a(ce)`
     z-index: 11;
     top: auto;
     height: 65%;
@@ -1097,7 +1215,7 @@ const Re = ({ className: e }) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.large;
 }};
-`, At = a.div`
+`, Nt = a.div`
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -1111,7 +1229,7 @@ const Re = ({ className: e }) => {
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
     ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
-`, Rt = a(q)`
+`, Kt = a(G)`
     font-size: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.medium;
@@ -1121,7 +1239,7 @@ const Re = ({ className: e }) => {
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
     margin: 0;
-`, Bt = a(M)`
+`, Ot = a(z)`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1135,7 +1253,7 @@ const Re = ({ className: e }) => {
     ${(e) => e.theme.borderRadius && `border-radius: ${e.theme.borderRadius};`}
 
     &:focus-visible {
-        ${b};
+        ${f};
     }
 
     svg line {
@@ -1144,28 +1262,28 @@ const Re = ({ className: e }) => {
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
     }
-`, Yt = (r) => {
-  var o = r, { className: e } = o, t = j(o, ["className"]);
+`, Qt = (r) => {
+  var o = r, { className: e } = o, t = F(o, ["className"]);
   const {
     overlay: l,
     overlayConversationHeader: s,
     overlayConversationCloseLabel: u,
     conversationControllerId: c
-  } = L(), h = V();
+  } = I(), h = Y();
   return /* @__PURE__ */ n.createElement(
     Le.Provider,
     {
       value: c ? { id: c } : null
     },
     /* @__PURE__ */ n.createElement(
-      Kt,
-      x(g({}, t), {
+      jt,
+      E(g({}, t), {
         className: H(e, "humany-conversation-component")
       }),
       /* @__PURE__ */ n.createElement(ge, null)
     ),
-    l && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(Ht, { dispatch: h }), l.conversation && /* @__PURE__ */ n.createElement(
-      Tt,
+    l && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(At, { dispatch: h }), l.conversation && /* @__PURE__ */ n.createElement(
+      Rt,
       {
         dispatch: h,
         header: s,
@@ -1173,7 +1291,7 @@ const Re = ({ className: e }) => {
       }
     ))
   );
-}, Kt = a.div`
+}, jt = a.div`
     position: absolute;
     right: 0;
     left: 0;
@@ -1184,6 +1302,6 @@ const Re = ({ className: e }) => {
     flex-direction: column;
 `;
 export {
-  Yt as default
+  Qt as default
 };
-//# sourceMappingURL=conversation.f80bcb4a.js.map
+//# sourceMappingURL=conversation.be64b43a.js.map