npm - @telia-ace/widget-conversation - Versions diffs - 1.0.39 → 1.0.40-next.0 - Mend

@telia-ace/widget-conversation 1.0.39 → 1.0.40-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/{conversation-23bae0c6.js → conversation-9e73f101.js} +202 -178
package/dist/conversation-9e73f101.js.map +1 -0
package/dist/index.js +1 -1
package/package.json +9 -9
package/dist/conversation-23bae0c6.js.map +0 -1

package/dist/{conversation-23bae0c6.js → conversation-9e73f101.js} RENAMED Viewed

@@ -1,12 +1,12 @@
 var ve = Object.defineProperty, Ee = Object.defineProperties;
 var xe = Object.getOwnPropertyDescriptors;
-var A = Object.getOwnPropertySymbols;
+var T = Object.getOwnPropertySymbols;
 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 = {}))
     ne.call(t, r) && te(e, r, t[r]);
-  if (A)
-    for (var r of A(t))
+  if (T)
+    for (var r of T(t))
       re.call(t, r) && te(e, r, t[r]);
   return e;
 }, E = (e, t) => Ee(e, xe(t));
@@ -14,86 +14,86 @@ var F = (e, t) => {
   var r = {};
   for (var o in e)
     ne.call(e, o) && t.indexOf(o) < 0 && (r[o] = e[o]);
-  if (e != null && A)
-    for (var o of A(e))
+  if (e != null && T)
+    for (var o of T(e))
       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 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 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 k, ConversationMessageType as W } from "./index.js";
+import { useIsTabbing as ke, useDispatch as Y, useProperties as N, useScroll as se, SymbolBadge as x, Input as le, Button as z, borderTabStyle as p, Typography as G, invertedHoverButton as we, 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 I } from "@telia-ace/widget-utilities";
+import n, { useState as A, useEffect as me, forwardRef as Z, Suspense as Me, useMemo as Ne, useCallback as de, useRef as Ie } from "react";
+import { css as y, keyframes as He } from "@emotion/react";
+import { FormComponent as Te } from "@telia-ace/widget-forms";
+import { ConversationMessageListItemType as w, 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 = Y(), {
+const Ae = ({ className: e }) => {
+  const [t, r] = A(""), [o, s] = A(!1), [l, u] = A(0), [c, h] = A(0), v = ke(), m = Y(), {
     inputPlaceholder: i = "Type your message",
     inputHidden: $ = !1,
     inputDisabled: S = !1,
     sendButtonLabel: L = "Send message",
-    inputMultiline: w = !0,
-    secondaryAction: y
-  } = I(), [pe, b] = le(!0);
+    inputMultiline: k = !0,
+    secondaryAction: f
+  } = N(), [ye, b] = se(!0);
   me(() => {
     if (b.current) {
-      const { lineHeight: d, maxHeight: T } = getComputedStyle(b.current);
+      const { lineHeight: d, maxHeight: H } = getComputedStyle(b.current);
       if (d && d.indexOf("px") > -1) {
         const M = d.split("px"), be = parseInt(M[0], 10);
         u(be);
-        const $e = T.split("px");
+        const $e = H.split("px");
         h(parseInt($e[0], 10));
       }
     }
   }, [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();
+    !d.shiftKey || !k ? (d.preventDefault(), t && t.length > 0 && (m("user-submit", { text: t }), r(""), D(""))) : t.length < 1 && d.preventDefault();
+  }, pe = (d) => {
+    f && (d.preventDefault(), m("action", g({
+      actionKey: f.action
+    }, f)));
   }, fe = (d) => {
-    y && (d.preventDefault(), m("action", g({
-      actionKey: y.action
-    }, y)));
-  }, ye = (d) => {
-    if (w && b.current) {
-      const T = b.current.scrollHeight;
-      if (T > s) {
+    if (k && b.current) {
+      const H = b.current.scrollHeight;
+      if (H > l) {
         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";
+        let M = H;
+        d.length < 1 && (M = l), b.current.style.height = `${M}px`, M >= c ? b.current.style.overflowY = "scroll" : b.current.style.overflowY = "hidden";
       }
     }
   }, D = (d) => {
-    ye(d), r(d), d && d.length > 0 && m("user-typing", { textLength: d.length });
+    fe(d), r(d), d && d.length > 0 && m("user-typing", { textLength: d.length });
   };
   return $ ? null : /* @__PURE__ */ n.createElement(
     Oe,
     {
-      grow: w,
-      className: H("humany-conversation-input", e),
+      grow: k,
+      className: I("humany-conversation-input", e),
       "data-has-focus": o,
-      scrollableCss: pe,
+      scrollableCss: ye,
       isTabbing: v
     },
-    y && /* @__PURE__ */ n.createElement(
+    f && /* @__PURE__ */ n.createElement(
       Ke,
       {
         disabled: S,
-        onClick: fe,
-        title: y.label,
-        "aria-label": y.label
+        onClick: pe,
+        title: f.label,
+        "aria-label": f.label
       },
       /* @__PURE__ */ n.createElement(
         x,
         {
           size: 24,
-          symbol: { type: "Svg", content: y.icon || "browse" }
+          symbol: { type: "Svg", content: f.icon || "browse" }
         }
       )
     ),
-    w ? /* @__PURE__ */ n.createElement(
-      Be,
+    k ? /* @__PURE__ */ n.createElement(
+      Re,
       {
         value: t,
         onChange: D,
@@ -101,13 +101,13 @@ const Re = ({ className: e }) => {
         disabled: S,
         "aria-label": i,
         placeholder: i,
-        onFocusChange: l,
+        onFocusChange: s,
         type: "textarea",
         rows: 1,
         ref: b
       }
     ) : /* @__PURE__ */ n.createElement(
-      Ne,
+      Be,
       {
         value: t,
         onChange: D,
@@ -115,7 +115,7 @@ const Re = ({ className: e }) => {
         disabled: S,
         "aria-label": i,
         placeholder: i,
-        onFocusChange: l
+        onFocusChange: s
       }
     ),
     /* @__PURE__ */ n.createElement(
@@ -136,7 +136,7 @@ const Re = ({ className: e }) => {
       )
     )
   );
-}, Be = a(se)`
+}, Re = a(le)`
     resize: none;
     flex: 1;
     flex-shrink: 1;
@@ -156,7 +156,7 @@ const Re = ({ className: e }) => {
     border: none;
     transition: height 200ms linear;
     outline: none;
-`, Ne = a(se)`
+`, Be = a(le)`
     flex: 1;
     border: none;
     background-color: transparent;
@@ -192,7 +192,7 @@ const Re = ({ className: e }) => {
     border: none;
     color: #a6a6a6;
     &:focus-visible {
-        ${f};
+        ${p};
     }
 `, Ke = a(ue)`
     border-right: ${(e) => e.theme.border};
@@ -201,10 +201,10 @@ const Re = ({ className: e }) => {
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }} 0;
 `, Oe = a.div`
-    ${(e) => e.grow ? p`
+    ${(e) => e.grow ? y`
                   min-height: 50px;
                   max-height: 150px;
-              ` : p`
+              ` : y`
                   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 && f}
+    ${(e) => e["data-has-focus"] && e.isTabbing && p}
     textarea {
         ${(e) => !!e.scrollableCss && e.scrollableCss}
     }
@@ -240,7 +240,7 @@ const Re = ({ className: e }) => {
   return e.hasContent ? (t = e.theme.colors) == null ? void 0 : t.primary : "#a6a6a6";
 }};
     }
-`, De = Re, Fe = a.div`
+`, De = Ae, Fe = a.div`
     width: ${(e) => e.avatarSize || "32px"};
     height: ${(e) => e.avatarSize || "32px"};
     border-radius: 50%;
@@ -287,7 +287,7 @@ const Re = ({ className: e }) => {
 }};
         }
     }
-`, We = Te`
+`, We = He`
   0% {
     opacity: 0;
   }
@@ -356,13 +356,13 @@ const Re = ({ className: e }) => {
     max-width: 100%;
     ${(e) => e.fullWidth && "width: 100%;"}
 `, _e = (e, t) => {
-  var o, l;
-  const r = p`
+  var o, s;
+  const r = y`
         background-color: ${(o = t.colors) == null ? void 0 : o.accent};
-        color: ${(l = t.colors) == null ? void 0 : l.text};
+        color: ${(s = t.colors) == null ? void 0 : s.text};
         ${t.border && `border: ${t.border};`};
     `;
-  return t.borderRadius ? p`
+  return t.borderRadius ? y`
         ${r}
         border-top-right-radius: ${t.borderRadius};
@@ -377,12 +377,12 @@ const Re = ({ className: e }) => {
         `}
     ` : r;
 }, Ve = (e, t) => {
-  var o, l;
-  const r = p`
+  var o, s;
+  const r = y`
         background-color: ${(o = t.colors) == null ? void 0 : o.primary};
-        color: ${(l = t.colors) == null ? void 0 : l.accent};
+        color: ${(s = t.colors) == null ? void 0 : s.accent};
     `;
-  return t.borderRadius ? p`
+  return t.borderRadius ? y`
         ${r}
         border-top-left-radius: ${t.borderRadius};
@@ -396,7 +396,7 @@ const Re = ({ className: e }) => {
             border-bottom-right-radius: ${t.borderRadius};
         `}
     ` : r;
-}, B = a.div`
+}, R = a.div`
     margin-bottom: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
@@ -406,18 +406,18 @@ const Re = ({ className: e }) => {
     }
 `, C = (e) => {
   var t, r;
-  return p`
+  return y`
     margin: ${(t = e.theme.sizes) == null ? void 0 : t.medium} 0;
     padding: 0 ${(r = e.theme.sizes) == null ? void 0 : r.medium};
 `;
-}, qe = a(Ae)`
+}, qe = a(Te)`
     & button.humany-form-component-button {
         ${(e) => {
-  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({
+  var t, r, o, s;
+  return ((t = e.theme.colors) == null ? void 0 : t.primary) && ((r = e.theme.colors) == null ? void 0 : r.accent) && we({
     active: !1,
     primaryColor: (o = e.theme.colors) == null ? void 0 : o.primary,
-    secondaryColor: (l = e.theme.colors) == null ? void 0 : l.accent,
+    secondaryColor: (s = e.theme.colors) == null ? void 0 : s.accent,
     theme: e.theme
   });
 }};
@@ -445,7 +445,7 @@ const Re = ({ className: e }) => {
         &:focus {
             ${(e) => {
   var t;
-  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && f;
+  return ((t = e.theme.accessibility) == null ? void 0 : t.isTabbing) && p;
 }};
         }
     }
@@ -472,7 +472,7 @@ const Re = ({ className: e }) => {
     width: 100%;
     color: #fff;
     &:focus-visible {
-        ${f}
+        ${p}
         background-color: transparent;
     }
 `, Qe = Z(
@@ -497,29 +497,29 @@ const Re = ({ className: e }) => {
     return null;
   let o = "";
   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();
+}, B = Ze, et = ({ className: e, children: t, sender: r, timestamp: o }) => {
+  const { avatar: s, name: l } = r, { avatarSize: u } = N();
   return /* @__PURE__ */ n.createElement(
     tt,
     {
-      hasAvatar: !!l,
-      className: H(e, "humany-conversation-agent-message")
+      hasAvatar: !!s,
+      className: I(e, "humany-conversation-agent-message")
     },
-    l && /* @__PURE__ */ n.createElement(Fe, { avatarSize: u }, typeof l == "string" ? /* @__PURE__ */ n.createElement("img", { src: l }) : /* @__PURE__ */ n.createElement(x, { symbol: l })),
+    s && /* @__PURE__ */ n.createElement(Fe, { avatarSize: u }, typeof s == "string" ? /* @__PURE__ */ n.createElement("img", { src: s }) : /* @__PURE__ */ n.createElement(x, { symbol: s })),
     t,
-    /* @__PURE__ */ n.createElement(N, { name: s, timestamp: o })
+    /* @__PURE__ */ n.createElement(B, { name: l, timestamp: o })
   );
 }, tt = a.div`
     display: grid;
     margin-right: 10%;
     width: 90%;
-    ${(e) => e.hasAvatar ? p`
+    ${(e) => e.hasAvatar ? y`
                   grid-template-columns: auto 1fr;
                   grid-template-rows: 1fr auto;
                   grid-template-areas:
                       'avatar content'
                       '. info';
-              ` : p`
+              ` : y`
                   grid-template-columns: 1fr;
                   grid-template-rows: 1fr auto;
                   grid-template-areas:
@@ -527,14 +527,14 @@ const Re = ({ className: e }) => {
                       'info';
               `};
 `, he = et, nt = Z(
-  ({ className: e, children: t, timestamp: r, discrete: o, fullWidth: l }, s) => /* @__PURE__ */ n.createElement(
+  ({ className: e, children: t, timestamp: r, discrete: o, fullWidth: s }, l) => /* @__PURE__ */ n.createElement(
     rt,
     {
-      ref: s,
-      className: H(e, "humany-conversation-system-message"),
-      fullWidth: l
+      ref: l,
+      className: I(e, "humany-conversation-system-message"),
+      fullWidth: s
     },
-    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 }))
+    o ? /* @__PURE__ */ n.createElement(ot, { className: "humany-conversation-discrete-message" }, t, /* @__PURE__ */ n.createElement(B, { timestamp: r })) : /* @__PURE__ */ n.createElement(n.Fragment, null, t, /* @__PURE__ */ n.createElement(B, { timestamp: r }))
   )
 ), rt = a.div`
     ${(e) => e.fullWidth && "width: 100%"};
@@ -557,28 +557,29 @@ const Re = ({ className: e }) => {
     > p {
         margin: 0;
     }
-`, at = nt, lt = ({ className: e, children: t, timestamp: r }) => {
-  const { userLabel: o = "" } = I();
+`, at = nt, st = ({ className: e, children: t, timestamp: r }) => {
+  const { userLabel: o = "" } = N();
   return /* @__PURE__ */ n.createElement(
-    st,
+    lt,
     {
-      className: H(e, "humany-conversation-user-message")
+      className: I(e, "humany-conversation-user-message")
     },
     t,
-    /* @__PURE__ */ n.createElement(N, { name: o, timestamp: r })
+    /* @__PURE__ */ n.createElement(B, { name: o, timestamp: r })
   );
-}, st = a.div`
+}, lt = a.div`
     margin-left: 10%;
     width: 90%;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-`, it = lt, ee = (e) => Array.isArray(e) ? e : Object.keys(e).map((t) => ({
+`, it = st, 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,
   {
+    className: "humany-conversation-button-list",
     header: e,
     items: ee(t),
     renderItem: (o) => /* @__PURE__ */ n.createElement("li", { key: o.actionKey }, /* @__PURE__ */ n.createElement(
@@ -625,7 +626,7 @@ const Re = ({ className: e }) => {
     overflow: hidden;
     text-overflow: ellipsis;
     &:focus-visible {
-        ${f}
+        ${p}
         background-color: transparent;
     }
@@ -647,17 +648,18 @@ const Re = ({ className: e }) => {
     a {
         color: ${(e) => e.theme.colors.link};
         &:focus-visible {
-            ${f};
+            ${p};
         }
     }
-`, pt = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(
-  ft,
+`, yt = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(
+  pt,
   {
+    className: "humany-conversation-item-list",
     header: e,
     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(
+      var s;
+      return /* @__PURE__ */ n.createElement("li", { key: o.actionKey }, /* @__PURE__ */ n.createElement(ft, null, ((s = o.symbol) == null ? void 0 : s.content) && /* @__PURE__ */ n.createElement("div", { className: "item-icon" }, /* @__PURE__ */ n.createElement(
         x,
         {
           size: 22,
@@ -679,7 +681,7 @@ const Re = ({ className: e }) => {
       ), o.description && /* @__PURE__ */ n.createElement("p", null, o.description))));
     }
   }
-), ft = a(K)`
+), pt = a(K)`
     ${O}
     > .humany-paragraph {
@@ -693,7 +695,7 @@ const Re = ({ className: e }) => {
     ${(e) => X(e)(
   "h1",
-  p`
+  y`
                 white-space: normal;
             `
 )}
@@ -717,7 +719,7 @@ const Re = ({ className: e }) => {
             border-bottom: none;
         }
     }
-`, yt = a.div`
+`, ft = a.div`
     display: flex;
     gap: ${(e) => {
   var t;
@@ -756,7 +758,7 @@ const Re = ({ className: e }) => {
         margin: 0;
         &:focus-visible {
-            ${f}
+            ${p}
             span {
                 color: ${(e) => {
   var t;
@@ -769,6 +771,7 @@ const Re = ({ className: e }) => {
 `, bt = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(
   $t,
   {
+    className: "humany-conversation-link-list",
     header: e,
     items: ee(t),
     renderItem: (o) => /* @__PURE__ */ n.createElement("li", { key: o.actionKey }, /* @__PURE__ */ n.createElement(
@@ -800,7 +803,7 @@ const Re = ({ className: e }) => {
     ${(e) => X(e)(
   "h1",
-  p`
+  y`
                 white-space: normal;
             `
 )}
@@ -830,7 +833,7 @@ const Re = ({ className: e }) => {
     ${(e) => {
   var t, r;
-  return e.help && p`
+  return e.help && y`
             color: ${(t = e.theme.colors) == null ? void 0 : t.text};
             text-decoration: underline;
@@ -842,7 +845,7 @@ const Re = ({ className: e }) => {
 }}
     &:focus-visible {
-        ${f}
+        ${p}
         span {
             color: ${(e) => {
   var t;
@@ -851,10 +854,10 @@ const Re = ({ className: e }) => {
             text-decoration: underline;
         }
     }
-`, Et = () => /* @__PURE__ */ n.createElement(xt, null), xt = a.div`
+`, Et = () => /* @__PURE__ */ n.createElement(xt, { className: "humany-conversation-separator" }), xt = a.div`
     ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
     width: 100%;
-`, wt = ({ text: e }) => /* @__PURE__ */ n.createElement(kt, { variant: "span" }, e), kt = a(G)`
+`, kt = ({ text: e }) => /* @__PURE__ */ n.createElement(wt, { className: "humany-conversation-text", variant: "span" }, e), wt = a(G)`
     ${C}
 `, Ct = ({
   header: e = "Video call",
@@ -862,7 +865,7 @@ const Re = ({ className: e }) => {
   declineLabel: r = "Decline",
   dispatch: o
 }) => {
-  const l = Ie(() => [
+  const s = Ne(() => [
     {
       label: t,
       actionKey: "accept-video-call",
@@ -883,21 +886,22 @@ const Re = ({ className: e }) => {
   return /* @__PURE__ */ n.createElement(
     St,
     {
+      className: "humany-conversation-video-request",
       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(
+      items: s,
+      renderItem: (l) => {
+        const u = l.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
+        return /* @__PURE__ */ n.createElement("li", { key: l.actionKey }, /* @__PURE__ */ n.createElement(
           zt,
           {
             onClick: () => {
-              o("action", s);
+              o("action", l);
             },
-            "aria-label": s.label,
-            title: s.label,
+            "aria-label": l.label,
+            title: l.label,
             bgColor: u
           },
-          /* @__PURE__ */ n.createElement(x, { symbol: s.symbol, size: 25 })
+          /* @__PURE__ */ n.createElement(x, { symbol: l.symbol, size: 25 })
         ));
       }
     }
@@ -929,7 +933,7 @@ const Re = ({ className: e }) => {
     border-radius: 100%;
     &:focus-visible {
-        ${f}
+        ${p}
         background-color: transparent;
         i,
@@ -957,73 +961,92 @@ const Re = ({ className: e }) => {
         }
     }
 `, Lt = ([e, t]) => ({ type: e, content: t }), Mt = ({ items: e, dispatch: t }) => /* @__PURE__ */ n.createElement(
-  It,
+  Nt,
   {
+    className: "humany-message-list",
     items: e.map(Lt),
     renderLi: !0,
     renderItem: (r) => {
       switch (r.type) {
-        case k.Text:
-          return /* @__PURE__ */ n.createElement(wt, { text: r.content });
-        case k.HTML:
+        case w.Text:
+          return /* @__PURE__ */ n.createElement(kt, { text: r.content });
+        case w.HTML:
           return /* @__PURE__ */ n.createElement(ht, g({}, r.content));
-        case k.Separator:
+        case w.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:
+        case w.ItemList:
+          return /* @__PURE__ */ n.createElement(yt, E(g({}, r.content), { dispatch: t }));
+        case w.LinkList:
           return /* @__PURE__ */ n.createElement(bt, E(g({}, r.content), { dispatch: t }));
-        case k.ButtonList:
+        case w.ButtonList:
           return /* @__PURE__ */ n.createElement(ct, E(g({}, r.content), { dispatch: t }));
-        case k.VideoRequest:
+        case w.VideoRequest:
           return /* @__PURE__ */ n.createElement(Ct, E(g({}, r.content), { dispatch: t }));
         default:
           return /* @__PURE__ */ n.createElement(ut, { type: r.type, content: r.content });
       }
     }
   }
-), It = a(ie)`
+), Nt = a(ie)`
     ${ze}
     > li {
         margin: 0;
     }
-`, Ht = Z(
-  ({ className: e, timestamp: t, sender: r, type: o, content: l }, s) => {
+`, It = Z(
+  ({ className: e, timestamp: t, sender: r, type: o, content: s }, l) => {
     const u = de(
       (m) => {
         let i = "first";
-        return l.length > 1 && (i = m === 0 ? "first" : m + 1 === l.length ? "last" : "middle"), i;
+        return s.length > 1 && (i = m === 0 ? "first" : m + 1 === s.length ? "last" : "middle"), i;
       },
-      [l]
-    ), c = () => /* @__PURE__ */ n.createElement(n.Fragment, null, l.map((m) => {
-      const { key: i, body: $, title: S, form: L, actions: w } = m, y = !!$ && !S && !L && !w;
+      [s]
+    ), c = () => /* @__PURE__ */ n.createElement(n.Fragment, null, s.map((m) => {
+      const { key: i, body: $, title: S, form: L, actions: k } = m, f = !!$ && !S && !L && !k;
       return /* @__PURE__ */ n.createElement(
         at,
         {
           className: e,
           key: i,
-          discrete: y,
-          ref: s,
+          discrete: f,
+          ref: l,
           timestamp: t,
-          fullWidth: !!L || !!w
+          fullWidth: !!L || !!k
         },
-        y && $ ? /* @__PURE__ */ n.createElement(J, { html: $ }) : /* @__PURE__ */ n.createElement(P, { isSystem: !0, content: m })
+        f && $ ? /* @__PURE__ */ n.createElement(J, { html: $ }) : /* @__PURE__ */ n.createElement(P, { isSystem: !0, content: m })
       );
-    })), 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,
+    })), h = () => /* @__PURE__ */ n.createElement(he, { sender: r, timestamp: t, className: e }, /* @__PURE__ */ n.createElement(_, { className: "humany-message-content-bundle" }, s.map((m, i) => /* @__PURE__ */ n.createElement(
+      V,
       {
-        content: m,
-        stacked: u(i)
-      }
-    ))))), 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,
+        className: "humany-message-container",
+        left: !0,
+        key: m.key,
+        ref: l
+      },
+      /* @__PURE__ */ n.createElement(
+        P,
+        {
+          content: m,
+          stacked: u(i)
+        }
+      )
+    )))), v = () => /* @__PURE__ */ n.createElement(it, { timestamp: t, className: e }, /* @__PURE__ */ n.createElement(_, { className: "humany-message-content-bundle" }, s.map((m, i) => /* @__PURE__ */ n.createElement(
+      V,
       {
-        isUser: !0,
-        content: m,
-        stacked: u(i)
-      }
-    )))));
+        className: "humany-message-container",
+        right: !0,
+        key: m.key,
+        ref: l
+      },
+      /* @__PURE__ */ n.createElement(
+        P,
+        {
+          isUser: !0,
+          content: m,
+          stacked: u(i)
+        }
+      )
+    ))));
     switch (o) {
       case W.System:
         return c();
@@ -1036,22 +1059,23 @@ const Re = ({ className: e }) => {
     }
   }
 ), 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(
+  const s = Y(), { title: l, body: u, actions: c, form: h, items: v } = e;
+  return v ? /* @__PURE__ */ n.createElement(q, { className: "humany-message-content", user: !!t, stacked: o }, /* @__PURE__ */ n.createElement(Mt, { items: v, dispatch: s })) : /* @__PURE__ */ n.createElement(
     q,
     {
+      className: "humany-message-content",
       padded: !r,
       user: !!t,
       stacked: o,
       fullWidth: !!h || !!c
     },
-    s && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Ue, { variant: "h2" }, s)),
-    u && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Ye, { html: u })),
-    h && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(
+    l && /* @__PURE__ */ n.createElement(R, null, /* @__PURE__ */ n.createElement(Ue, { variant: "h2" }, l)),
+    u && /* @__PURE__ */ n.createElement(R, null, /* @__PURE__ */ n.createElement(Ye, { html: u })),
+    h && /* @__PURE__ */ n.createElement(R, null, /* @__PURE__ */ n.createElement(
       qe,
       E(g({}, h), {
         onChange: (i, $) => {
-          l("form", {
+          s("form", {
             data: $,
             formKey: h.schema.id,
             actionKey: i
@@ -1059,7 +1083,7 @@ const Re = ({ className: e }) => {
         }
       })
     )),
-    c && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(
+    c && /* @__PURE__ */ n.createElement(R, null, /* @__PURE__ */ n.createElement(
       Ge,
       {
         items: Object.keys(c).map((i) => ({ label: c[i], actionKey: i })),
@@ -1067,7 +1091,7 @@ const Re = ({ className: e }) => {
           Je,
           {
             onClick: () => {
-              l("action", i.actionKey);
+              s("action", i.actionKey);
             }
           },
           i.label
@@ -1083,12 +1107,12 @@ const Re = ({ className: e }) => {
         behavior: "smooth"
       });
     }, 250);
-  }, []), [t, r] = le(!0), {
+  }, []), [t, r] = se(!0), {
     messages: o,
-    loading: l,
-    typingActors: s = []
-  } = 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) => {
+    loading: s,
+    typingActors: l = []
+  } = N(), u = () => l && l.length ? l.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(Ht, { 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(
       U,
@@ -1097,10 +1121,10 @@ const Re = ({ className: e }) => {
         tabIndex: -1,
         key: `${v}_${i == null ? void 0 : i.name}_${m}_${$[0].key}`
       },
-      /* @__PURE__ */ n.createElement(Ht, E(g({}, c), { ref: e }))
+      /* @__PURE__ */ n.createElement(It, E(g({}, c), { ref: e }))
     );
-  }) : null, u(), l && /* @__PURE__ */ n.createElement(U, null, /* @__PURE__ */ n.createElement(oe, { ref: e }))), /* @__PURE__ */ n.createElement(De, null));
-}, Tt = a.div`
+  }) : null, u(), s && /* @__PURE__ */ n.createElement(U, null, /* @__PURE__ */ n.createElement(oe, { ref: e }))), /* @__PURE__ */ n.createElement(De, null));
+}, Ht = a.div`
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -1111,7 +1135,7 @@ const Re = ({ className: e }) => {
 }};
     ${(e) => !!e.scrollableCss && e.scrollableCss};
     &:focus-visible {
-        ${(e) => f(e)};
+        ${(e) => p(e)};
     }
 `, U = a.div`
     margin: 0;
@@ -1147,12 +1171,12 @@ const Re = ({ className: e }) => {
     }
     ${(e) => X(e)(
   "h1",
-  p`
+  y`
                 font-weight: normal;
             `
 )}
-`, At = ({ dispatch: e }) => {
-  const t = He(null);
+`, Tt = ({ dispatch: e }) => {
+  const t = Ie(null);
   return me(() => {
     t.current && t.current.parentNode && e("overlay-mounted", t.current);
   }, [t]), /* @__PURE__ */ n.createElement(
@@ -1163,17 +1187,17 @@ const Re = ({ className: e }) => {
       ref: t
     }
   );
-}, Rt = ({
+}, At = ({
   dispatch: e,
   header: t,
   buttonLabel: r
 }) => /* @__PURE__ */ n.createElement(
-  Bt,
+  Rt,
   {
     portalId: "humany-conversation-portal",
     className: "humany-conversation-outlet"
   },
-  /* @__PURE__ */ n.createElement(Nt, { className: "humany-conversation-outlet-head" }, /* @__PURE__ */ n.createElement(
+  /* @__PURE__ */ n.createElement(Bt, { className: "humany-conversation-outlet-head" }, /* @__PURE__ */ n.createElement(
     Ot,
     {
       className: "humany-conversation-outlet-head-button",
@@ -1200,7 +1224,7 @@ const Re = ({ className: e }) => {
     t
   )),
   /* @__PURE__ */ n.createElement(ge, null)
-), Bt = a(ce)`
+), Rt = a(ce)`
     z-index: 11;
     top: auto;
     height: 65%;
@@ -1215,7 +1239,7 @@ const Re = ({ className: e }) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.large;
 }};
-`, Nt = a.div`
+`, Bt = a.div`
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -1253,7 +1277,7 @@ const Re = ({ className: e }) => {
     ${(e) => e.theme.borderRadius && `border-radius: ${e.theme.borderRadius};`}
     &:focus-visible {
-        ${f};
+        ${p};
     }
     svg line {
@@ -1265,11 +1289,11 @@ const Re = ({ className: e }) => {
 `, Qt = (r) => {
   var o = r, { className: e } = o, t = F(o, ["className"]);
   const {
-    overlay: l,
-    overlayConversationHeader: s,
+    overlay: s,
+    overlayConversationHeader: l,
     overlayConversationCloseLabel: u,
     conversationControllerId: c
-  } = I(), h = Y();
+  } = N(), h = Y();
   return /* @__PURE__ */ n.createElement(
     Le.Provider,
     {
@@ -1278,15 +1302,15 @@ const Re = ({ className: e }) => {
     /* @__PURE__ */ n.createElement(
       jt,
       E(g({}, t), {
-        className: H(e, "humany-conversation-component")
+        className: I(e, "humany-conversation-component")
       }),
       /* @__PURE__ */ n.createElement(ge, null)
     ),
-    l && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(At, { dispatch: h }), l.conversation && /* @__PURE__ */ n.createElement(
-      Rt,
+    s && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(Tt, { dispatch: h }), s.conversation && /* @__PURE__ */ n.createElement(
+      At,
       {
         dispatch: h,
-        header: s,
+        header: l,
         buttonLabel: u
       }
     ))
@@ -1304,4 +1328,4 @@ const Re = ({ className: e }) => {
 export {
   Qt as default
 };
-//# sourceMappingURL=conversation-23bae0c6.js.map
+//# sourceMappingURL=conversation-9e73f101.js.map