@telia-ace/widget-conversation 1.0.29-next.4 → 1.0.29-next.6

package/dist/{conversation.d7aad569.js → conversation.b485c8d7.js}

@@ -2,7 +2,7 @@ var Ee = Object.defineProperty, xe = Object.defineProperties;
 var we = Object.getOwnPropertyDescriptors;
 var A = Object.getOwnPropertySymbols;
 var ee = Object.prototype.hasOwnProperty, te = Object.prototype.propertyIsEnumerable;
-var Z = (t, e, r) => e in t ? Ee(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, h = (t, e) => {
+var Z = (t, e, r) => e in t ? Ee(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, g = (t, e) => {
   for (var r in e || (e = {}))
     ee.call(e, r) && Z(t, r, e[r]);
   if (A)
@@ -19,17 +19,17 @@ var j = (t, e) => {
       e.indexOf(o) < 0 && te.call(t, o) && (r[o] = t[o]);
   return r;
 };
-import { Input as oe, Button as L, borderTabStyle as b, SymbolBadge as w, useIsTabbing as ke, useDispatch as V, useProperties as M, useScroll as ae, Typography as q, invertedHoverButton as Ce, Html as Y, List as le, buttonCss as G, ItemList as J, itemList as Q, useComponent as Se, genericHtml as ze, headingElement as se, list as Le, WidgetOverlayOutlet as ie } from "@telia-ace/widget-ui";
+import { Input as oe, Button as L, borderTabStyle as b, SymbolBadge as w, useIsTabbing as ke, useDispatch as V, useProperties as M, useScroll as ae, Typography as q, invertedHoverButton as Ce, Html as Y, List as le, buttonCss as G, ItemList as J, itemList as Q, useComponent as Se, genericHtml as ze, headingElement as se, list as Le, WidgetOverlayOutlet as ie, ConversationContext as Me } 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 a, { css as g, keyframes as Ie } from "styled-components";
-import { FormComponent as Ae } from "@telia-ace/widget-forms";
-import { ConversationMessageListItemType as C, ConversationMessageType as F } from "./index.js";
+import n, { useState as R, useEffect as ce, forwardRef as X, Suspense as He, useMemo as Te, useCallback as me, useRef as Ie } from "react";
+import a, { css as f, keyframes as Ae } from "styled-components";
+import { FormComponent as Re } from "@telia-ace/widget-forms";
+import { ConversationMessageListItemType as C, ConversationMessageType as D } from "./index.js";
 import "@telia-ace/widget-core";
 import "@telia-ace/widget-services";
 import "@telia-ace/widget-plugins";
-const Re = ({ className: t }) => {
-  const [e, r] = R(""), [o, l] = R(!1), [s, u] = R(0), [c, f] = R(0), v = ke(), m = V(), {
+const Be = ({ className: t }) => {
+  const [e, r] = R(""), [o, l] = R(!1), [s, u] = R(0), [c, h] = R(0), v = ke(), m = V(), {
     inputPlaceholder: i = "Type your message",
     inputHidden: $ = !1,
     inputDisabled: k = !1,
@@ -44,14 +44,14 @@ const Re = ({ className: t }) => {
         const z = d.split("px"), $e = parseInt(z[0], 10);
         u($e);
         const ve = I.split("px");
-        f(parseInt(ve[0], 10));
+        h(parseInt(ve[0], 10));
       }
     }
   }, [y.current]);
   const N = (d) => {
     !d.shiftKey || !E ? (d.preventDefault(), e && e.length > 0 && (m("user-submit", { text: e }), r(""), O(""))) : e.length < 1 && d.preventDefault();
   }, ye = (d) => {
-    !p || (d.preventDefault(), m("action", h({
+    !p || (d.preventDefault(), m("action", g({
       actionKey: p.action
     }, p)));
   }, be = (d) => {
@@ -66,13 +66,13 @@ const Re = ({ className: t }) => {
   }, O = (d) => {
     be(d), r(d), d && d.length > 0 && m("user-typing", { textLength: d.length });
   };
-  return $ ? null : /* @__PURE__ */ n.createElement(Ne, {
+  return $ ? null : /* @__PURE__ */ n.createElement(Oe, {
     grow: E,
     className: H("humany-conversation-input", t),
     "data-has-focus": o,
     scrollableCss: pe,
     isTabbing: v
-  }, p && /* @__PURE__ */ n.createElement(Ke, {
+  }, p && /* @__PURE__ */ n.createElement(Ne, {
     disabled: k,
     onClick: ye,
     title: p.label,
@@ -91,7 +91,7 @@ const Re = ({ className: t }) => {
     type: "textarea",
     rows: 1,
     ref: y
-  }) : /* @__PURE__ */ n.createElement(Be, {
+  }) : /* @__PURE__ */ n.createElement(Ke, {
     value: e,
     onChange: O,
     onEnter: N,
@@ -104,7 +104,7 @@ const Re = ({ className: t }) => {
     onClick: N,
     title: S,
     "aria-label": S
-  }, /* @__PURE__ */ n.createElement(Oe, {
+  }, /* @__PURE__ */ n.createElement(je, {
     size: 22,
     symbol: { type: "Svg", content: "send" },
     hasContent: e && e.length
@@ -129,7 +129,7 @@ const Re = ({ className: t }) => {
     border: none;
     transition: height 200ms linear;
     outline: none;
-`, Be = a(oe)`
+`, Ke = a(oe)`
     flex: 1;
     border: none;
     background-color: transparent;
@@ -167,17 +167,17 @@ const Re = ({ className: t }) => {
     &:focus-visible {
         ${b};
     }
-`, Ke = a(ue)`
+`, Ne = a(ue)`
     border-right: ${(t) => t.theme.border};
     margin: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
 }} 0;
-`, Ne = a.div`
-    ${(t) => t.grow ? g`
+`, Oe = a.div`
+    ${(t) => t.grow ? f`
                   min-height: 50px;
                   max-height: 150px;
-              ` : g`
+              ` : f`
                   height: 50px;
               `}
     flex: 0 0 auto;
@@ -192,9 +192,9 @@ const Re = ({ className: t }) => {
     ${de} {
         ${(t) => !!t.scrollableCss && t.scrollableCss}
     }
-`, Oe = a((r) => {
+`, je = a((r) => {
   var o = r, { hasContent: t } = o, e = j(o, ["hasContent"]);
-  return /* @__PURE__ */ n.createElement(w, h({}, e));
+  return /* @__PURE__ */ n.createElement(w, g({}, e));
 })`
     line,
     path {
@@ -207,7 +207,7 @@ const Re = ({ className: t }) => {
   return t.hasContent ? (e = t.theme.colors) == null ? void 0 : e.primary : "#a6a6a6";
 }};
     }
-`, je = a.div`
+`, De = a.div`
     width: ${(t) => t.avatarSize || "32px"};
     height: ${(t) => t.avatarSize || "32px"};
     border-radius: 50%;
@@ -254,7 +254,7 @@ const Re = ({ className: t }) => {
 }};
         }
     }
-`, Fe = Ie`
+`, Fe = Ae`
   0% {
     opacity: 0;
   }
@@ -264,7 +264,7 @@ const Re = ({ className: t }) => {
   100% {
     opacity: 0;
   }
-`, De = a.div`
+`, We = a.div`
     display: flex;
     justify-content: center;
     > div {
@@ -288,7 +288,7 @@ const Re = ({ className: t }) => {
     grid-area: content;
     max-width: 100%;
     overflow: hidden;
-`, We = a(q)`
+`, Pe = a(q)`
     font-size: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.normal;
@@ -305,8 +305,8 @@ const Re = ({ className: t }) => {
   var e;
   return t.padded && `padding: ${(e = t.theme.sizes) == null ? void 0 : e.medium};`;
 }}
-    ${(t) => !t.user && t.stacked && Pe(t.stacked, t.theme)}
-    ${(t) => t.user && t.stacked && Ue(t.stacked, t.theme)}
+    ${(t) => !t.user && t.stacked && Ue(t.stacked, t.theme)}
+    ${(t) => t.user && t.stacked && _e(t.stacked, t.theme)}
 
     display: inline-block;
     margin-top: ${(t) => {
@@ -322,14 +322,14 @@ const Re = ({ className: t }) => {
     }
     max-width: 100%;
     ${(t) => t.fullWidth && "width: 100%;"}
-`, Pe = (t, e) => {
+`, Ue = (t, e) => {
   var o, l;
-  const r = g`
+  const r = f`
         background-color: ${(o = e.colors) == null ? void 0 : o.accent};
         color: ${(l = e.colors) == null ? void 0 : l.text};
         ${e.border && `border: ${e.border};`};
     `;
-  return e.borderRadius ? g`
+  return e.borderRadius ? f`
         ${r}
 
         border-top-right-radius: ${e.borderRadius};
@@ -343,13 +343,13 @@ const Re = ({ className: t }) => {
             border-bottom-left-radius: ${e.borderRadius};
         `}
     ` : r;
-}, Ue = (t, e) => {
+}, _e = (t, e) => {
   var o, l;
-  const r = g`
+  const r = f`
         background-color: ${(o = e.colors) == null ? void 0 : o.primary};
         color: ${(l = e.colors) == null ? void 0 : l.accent};
     `;
-  return e.borderRadius ? g`
+  return e.borderRadius ? f`
         ${r}
 
         border-top-left-radius: ${e.borderRadius};
@@ -371,7 +371,7 @@ const Re = ({ className: t }) => {
     &:last-child {
         margin-bottom: 0;
     }
-`, T = g`
+`, T = f`
     margin: ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.medium;
@@ -380,7 +380,7 @@ const Re = ({ className: t }) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.medium;
 }};
-`, _e = a(Ae)`
+`, Ve = a(Re)`
     & button.humany-form-component-button {
         ${(t) => {
   var e, r;
@@ -407,7 +407,7 @@ const Re = ({ className: t }) => {
 }};
         }
     }
-`, Ve = a(Y)`
+`, qe = a(Y)`
     white-space: pre-wrap;
     a {
         color: ${(t) => t.theme.colors.link};
@@ -418,7 +418,7 @@ const Re = ({ className: t }) => {
 }};
         }
     }
-`, qe = a(le)`
+`, Ye = a(le)`
     padding: 0;
     list-style: none;
     margin: 0 -${(t) => {
@@ -431,7 +431,7 @@ const Re = ({ className: t }) => {
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
 }};
     }
-`, Ye = a.button`
+`, Ge = a.button`
     ${G};
     display: block;
     background-color: ${(t) => {
@@ -453,8 +453,8 @@ const Re = ({ className: t }) => {
   }, /* @__PURE__ */ n.createElement(_, {
     padded: !!t,
     stacked: t ? "first" : void 0
-  }, /* @__PURE__ */ n.createElement(De, null, /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null)))))
-), Ge = a.p`
+  }, /* @__PURE__ */ n.createElement(We, null, /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null), /* @__PURE__ */ n.createElement("div", null)))))
+), Je = a.p`
     && {
         font-size: ${(t) => {
   var e;
@@ -473,13 +473,13 @@ const Re = ({ className: t }) => {
   if (!e && !r)
     return null;
   let o = "";
-  return e ? r ? o = `${e}: ${re(r)}` : o = e : r && (o = re(r)), /* @__PURE__ */ n.createElement(Ge, null, o);
+  return e ? r ? o = `${e}: ${re(r)}` : o = e : r && (o = re(r)), /* @__PURE__ */ n.createElement(Je, null, o);
 }, he = ({ className: t, children: e, sender: r, timestamp: o }) => {
   const { avatar: l, name: s } = r, { avatarSize: u } = M();
-  return /* @__PURE__ */ n.createElement(Je, {
+  return /* @__PURE__ */ n.createElement(Qe, {
     hasAvatar: !!l,
     className: H(t, "humany-conversation-agent-message")
-  }, l && /* @__PURE__ */ n.createElement(je, {
+  }, l && /* @__PURE__ */ n.createElement(De, {
     avatarSize: u
   }, typeof l == "string" ? /* @__PURE__ */ n.createElement("img", {
     src: l
@@ -489,43 +489,43 @@ const Re = ({ className: t }) => {
     name: s,
     timestamp: o
   }));
-}, Je = a.div`
+}, Qe = a.div`
     display: grid;
     margin-right: 10%;
     width: 90%;
-    ${(t) => t.hasAvatar ? g`
+    ${(t) => t.hasAvatar ? f`
                   grid-template-columns: auto 1fr;
                   grid-template-rows: 1fr auto;
                   grid-template-areas:
                       'avatar content'
                       '. info';
-              ` : g`
+              ` : f`
                   grid-template-columns: 1fr;
                   grid-template-rows: 1fr auto;
                   grid-template-areas:
                       'content'
                       'info';
               `};
-`, Qe = X(
-  ({ className: t, children: e, timestamp: r, discrete: o, fullWidth: l }, s) => /* @__PURE__ */ n.createElement(Xe, {
+`, Xe = X(
+  ({ className: t, children: e, timestamp: r, discrete: o, fullWidth: l }, s) => /* @__PURE__ */ n.createElement(Ze, {
     ref: s,
     className: H(t, "humany-conversation-system-message"),
     fullWidth: l
-  }, o ? /* @__PURE__ */ n.createElement(Ze, {
+  }, o ? /* @__PURE__ */ n.createElement(et, {
     className: "humany-conversation-discrete-message"
   }, e, /* @__PURE__ */ n.createElement(K, {
     timestamp: r
   })) : /* @__PURE__ */ n.createElement(n.Fragment, null, e, /* @__PURE__ */ n.createElement(K, {
     timestamp: r
   })))
-), Xe = a.div`
+), Ze = a.div`
     ${(t) => t.fullWidth && "width: 100%"};
     padding: 0 ${(t) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.large;
 }};
     overflow: auto;
-`, Ze = a.div`
+`, et = a.div`
     text-align: center;
     word-wrap: break-word;
     font-size: ${(t) => {
@@ -539,15 +539,15 @@ const Re = ({ className: t }) => {
     > p {
         margin: 0;
     }
-`, et = ({ className: t, children: e, timestamp: r }) => {
+`, tt = ({ className: t, children: e, timestamp: r }) => {
   const { userLabel: o = "" } = M();
-  return /* @__PURE__ */ n.createElement(tt, {
+  return /* @__PURE__ */ n.createElement(nt, {
     className: H(t, "humany-conversation-user-message")
   }, e, /* @__PURE__ */ n.createElement(K, {
     name: o,
     timestamp: r
   }));
-}, tt = a.div`
+}, nt = a.div`
     margin-left: 10%;
     width: 90%;
     display: flex;
@@ -556,12 +556,12 @@ const Re = ({ className: t }) => {
 `, ge = (t) => Array.isArray(t) ? t : Object.keys(t).map((e) => ({
   label: t[e],
   actionKey: e
-})), nt = ({ header: t, actions: e, dispatch: r }) => /* @__PURE__ */ n.createElement(rt, {
+})), rt = ({ header: t, actions: e, dispatch: r }) => /* @__PURE__ */ n.createElement(ot, {
   header: t,
   items: ge(e),
   renderItem: (o) => /* @__PURE__ */ n.createElement("li", {
     key: o.actionKey
-  }, /* @__PURE__ */ n.createElement(ot, {
+  }, /* @__PURE__ */ n.createElement(at, {
     onClick: () => {
       r("action", o);
     },
@@ -570,7 +570,7 @@ const Re = ({ className: t }) => {
   }, /* @__PURE__ */ n.createElement(w, {
     symbol: o.symbol
   }), o.label))
-}), rt = a(J)`
+}), ot = a(J)`
     ${Q}
     > ul {
         display: flex;
@@ -584,7 +584,7 @@ const Re = ({ className: t }) => {
         }
     }
     ${T}
-`, ot = a(L)`
+`, at = a(L)`
     ${G};
 
     display: block;
@@ -612,14 +612,14 @@ const Re = ({ className: t }) => {
   return (e = t.theme.sizes) == null ? void 0 : e.small;
 }};
     }
-`, at = ({ type: t, content: e = {} }) => {
+`, lt = ({ type: t, content: e = {} }) => {
   const r = Se(t);
-  return !r || !t ? null : /* @__PURE__ */ n.createElement(Me, {
+  return !r || !t ? null : /* @__PURE__ */ n.createElement(He, {
     fallback: null
-  }, /* @__PURE__ */ n.createElement(r, h({}, e)));
-}, lt = ({ body: t }) => /* @__PURE__ */ n.createElement(st, {
+  }, /* @__PURE__ */ n.createElement(r, g({}, e)));
+}, st = ({ body: t }) => /* @__PURE__ */ n.createElement(it, {
   html: t
-}), st = a(Y)`
+}), it = a(Y)`
     ${ze}
     color: inherit;
     white-space: pre-wrap;
@@ -630,12 +630,12 @@ const Re = ({ className: t }) => {
             ${b};
         }
     }
-`, it = ({ header: t, actions: e, dispatch: r }) => /* @__PURE__ */ n.createElement(ct, {
+`, ct = ({ header: t, actions: e, dispatch: r }) => /* @__PURE__ */ n.createElement(mt, {
   header: t,
   items: ge(e),
   renderItem: (o) => /* @__PURE__ */ n.createElement("li", {
     key: o.actionKey
-  }, /* @__PURE__ */ n.createElement(mt, {
+  }, /* @__PURE__ */ n.createElement(dt, {
     help: o.actionKey === "help",
     onClick: () => {
       r("action", o);
@@ -649,13 +649,13 @@ const Re = ({ className: t }) => {
       content: "caret-down"
     }
   })))
-}), ct = a(J)`
+}), mt = a(J)`
     ${Q}
     ${T}
 
     ${se(
   "h1",
-  g`
+  f`
             white-space: normal;
         `
 )}
@@ -671,7 +671,7 @@ const Re = ({ className: t }) => {
             margin: 0;
         }
     }
-`, mt = a(L)`
+`, dt = a(L)`
     display: block;
     text-align: left;
     font-weight: 300;
@@ -685,7 +685,7 @@ const Re = ({ className: t }) => {
 
     ${(t) => {
   var e, r;
-  return t.help && g`
+  return t.help && f`
             color: ${(e = t.theme.colors) == null ? void 0 : e.text};
             text-decoration: underline;
 
@@ -706,20 +706,20 @@ const Re = ({ className: t }) => {
             text-decoration: underline;
         }
     }
-`, dt = () => /* @__PURE__ */ n.createElement(ut, null), ut = a.div`
+`, ut = () => /* @__PURE__ */ n.createElement(ht, null), ht = a.div`
     ${(t) => t.theme.border && `border-bottom: ${t.theme.border};`}
     width: 100%;
-`, ht = ({ text: t }) => /* @__PURE__ */ n.createElement(gt, {
+`, gt = ({ text: t }) => /* @__PURE__ */ n.createElement(ft, {
   variant: "span"
-}, t), gt = a(q)`
+}, t), ft = a(q)`
     ${T}
-`, ft = ({
+`, pt = ({
   header: t = "Video call",
   acceptLabel: e = "Accept",
   declineLabel: r = "Decline",
   dispatch: o
 }) => {
-  const l = He(() => [
+  const l = Te(() => [
     {
       label: e,
       actionKey: "accept-video-call",
@@ -737,14 +737,14 @@ const Re = ({ className: t }) => {
       }
     }
   ], [e, r]);
-  return /* @__PURE__ */ n.createElement(pt, {
+  return /* @__PURE__ */ n.createElement(yt, {
     header: t,
     items: l,
     renderItem: (s) => {
       const u = s.actionKey === "accept-video-call" ? "#70c48e" : "#da5c85";
       return /* @__PURE__ */ n.createElement("li", {
         key: s.actionKey
-      }, /* @__PURE__ */ n.createElement(yt, {
+      }, /* @__PURE__ */ n.createElement(bt, {
         onClick: () => {
           o("action", s);
         },
@@ -757,7 +757,7 @@ const Re = ({ className: t }) => {
       })));
     }
   });
-}, pt = a(J)`
+}, yt = a(J)`
     ${Q}
     > ul {
         display: flex;
@@ -771,7 +771,7 @@ const Re = ({ className: t }) => {
         }
     }
     ${T}
-`, yt = a(L)`
+`, bt = a(L)`
     ${G};
 
     background-color: ${(t) => t.bgColor};
@@ -811,45 +811,45 @@ const Re = ({ className: t }) => {
             stroke: #fff;
         }
     }
-`, bt = ([t, e]) => ({ type: t, content: e }), $t = ({ items: t, dispatch: e }) => /* @__PURE__ */ n.createElement(vt, {
-  items: t.map(bt),
+`, $t = ([t, e]) => ({ type: t, content: e }), vt = ({ items: t, dispatch: e }) => /* @__PURE__ */ n.createElement(Et, {
+  items: t.map($t),
   renderLi: !0,
   renderItem: (r) => {
     switch (r.type) {
       case C.Text:
-        return /* @__PURE__ */ n.createElement(ht, {
+        return /* @__PURE__ */ n.createElement(gt, {
           text: r.content
         });
       case C.HTML:
-        return /* @__PURE__ */ n.createElement(lt, h({}, r.content));
+        return /* @__PURE__ */ n.createElement(st, g({}, r.content));
       case C.Separator:
-        return /* @__PURE__ */ n.createElement(dt, h({}, r.content));
+        return /* @__PURE__ */ n.createElement(ut, g({}, r.content));
       case C.LinkList:
-        return /* @__PURE__ */ n.createElement(it, x(h({}, r.content), {
+        return /* @__PURE__ */ n.createElement(ct, x(g({}, r.content), {
           dispatch: e
         }));
       case C.ButtonList:
-        return /* @__PURE__ */ n.createElement(nt, x(h({}, r.content), {
+        return /* @__PURE__ */ n.createElement(rt, x(g({}, r.content), {
           dispatch: e
         }));
       case C.VideoRequest:
-        return /* @__PURE__ */ n.createElement(ft, x(h({}, r.content), {
+        return /* @__PURE__ */ n.createElement(pt, x(g({}, r.content), {
           dispatch: e
         }));
       default:
-        return /* @__PURE__ */ n.createElement(at, {
+        return /* @__PURE__ */ n.createElement(lt, {
           type: r.type,
           content: r.content
         });
     }
   }
-}), vt = a(le)`
+}), Et = a(le)`
     ${Le}
 
     > li {
         margin: 0;
     }
-`, Et = X(
+`, xt = X(
   ({ className: t, timestamp: e, sender: r, type: o, content: l }, s) => {
     const u = me(
       (m) => {
@@ -859,7 +859,7 @@ const Re = ({ className: t }) => {
       [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;
-      return /* @__PURE__ */ n.createElement(Qe, {
+      return /* @__PURE__ */ n.createElement(Xe, {
         className: t,
         key: i,
         discrete: p,
@@ -868,11 +868,11 @@ const Re = ({ className: t }) => {
         fullWidth: !!S || !!E
       }, p && $ ? /* @__PURE__ */ n.createElement(Y, {
         html: $
-      }) : /* @__PURE__ */ n.createElement(D, {
+      }) : /* @__PURE__ */ n.createElement(F, {
         isSystem: !0,
         content: m
       }));
-    })), f = () => /* @__PURE__ */ n.createElement(he, {
+    })), h = () => /* @__PURE__ */ n.createElement(he, {
       sender: r,
       timestamp: e,
       className: t
@@ -880,62 +880,62 @@ const Re = ({ className: t }) => {
       left: !0,
       key: m.key,
       ref: s
-    }, /* @__PURE__ */ n.createElement(D, {
+    }, /* @__PURE__ */ n.createElement(F, {
       content: m,
       stacked: u(i)
-    }))))), v = () => /* @__PURE__ */ n.createElement(et, {
+    }))))), v = () => /* @__PURE__ */ n.createElement(tt, {
       timestamp: e,
       className: t
     }, /* @__PURE__ */ n.createElement(P, null, l.map((m, i) => /* @__PURE__ */ n.createElement(U, {
       right: !0,
       key: m.key,
       ref: s
-    }, /* @__PURE__ */ n.createElement(D, {
+    }, /* @__PURE__ */ n.createElement(F, {
       isUser: !0,
       content: m,
       stacked: u(i)
     })))));
     switch (o) {
-      case F.System:
+      case D.System:
         return c();
-      case F.Agent:
-        return f();
-      case F.User:
+      case D.Agent:
+        return h();
+      case D.User:
         return v();
       default:
         return null;
     }
   }
-), D = ({ content: t, isUser: e, isSystem: r, stacked: o }) => {
-  const l = V(), { title: s, body: u, actions: c, form: f, items: v } = t;
+), F = ({ content: t, isUser: e, isSystem: r, stacked: o }) => {
+  const l = V(), { title: s, body: u, actions: c, form: h, items: v } = t;
   return v ? /* @__PURE__ */ n.createElement(_, {
     user: !!e,
     stacked: o
-  }, /* @__PURE__ */ n.createElement($t, {
+  }, /* @__PURE__ */ n.createElement(vt, {
     items: v,
     dispatch: l
   })) : /* @__PURE__ */ n.createElement(_, {
     padded: !r,
     user: !!e,
     stacked: o,
-    fullWidth: !!f || !!c
-  }, s && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(We, {
+    fullWidth: !!h || !!c
+  }, s && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Pe, {
     variant: "h2"
-  }, s)), u && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Ve, {
+  }, s)), u && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(qe, {
     html: u
-  })), f && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(_e, x(h({}, f), {
+  })), h && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Ve, x(g({}, h), {
     onChange: (i, $) => {
       l("form", {
         data: $,
-        formKey: f.schema.id,
+        formKey: h.schema.id,
         actionKey: i
       });
     }
-  }))), c && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(qe, {
+  }))), c && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Ye, {
     items: Object.keys(c).map((i) => ({ label: c[i], actionKey: i })),
     renderItem: (i) => /* @__PURE__ */ n.createElement("li", {
       key: i.actionKey
-    }, /* @__PURE__ */ n.createElement(Ye, {
+    }, /* @__PURE__ */ n.createElement(Ge, {
       onClick: () => {
         l("action", i.actionKey);
       }
@@ -953,7 +953,7 @@ const Re = ({ className: t }) => {
     messages: o,
     loading: l,
     typingActors: s = []
-  } = M(), u = () => s && s.length ? s.map((c, f) => /* @__PURE__ */ n.createElement(W, {
+  } = M(), u = () => s && s.length ? s.map((c, h) => /* @__PURE__ */ n.createElement(W, {
     id: `typing_${c.name}`,
     key: `typing_${c.name}`
   }, /* @__PURE__ */ n.createElement(he, {
@@ -963,23 +963,23 @@ const Re = ({ className: t }) => {
     boxed: !0,
     ref: t
   })))) : null;
-  return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(xt, {
+  return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(wt, {
     tabIndex: 0,
     scrollableCss: e,
     ref: r
-  }, o && o.length ? o.map((c, f) => {
+  }, o && o.length ? o.map((c, h) => {
     const { type: v, timestamp: m, sender: i, content: $ } = c;
     return /* @__PURE__ */ n.createElement(W, {
       className: "humany-conversation-entry",
       tabIndex: -1,
       key: `${v}_${i == null ? void 0 : i.name}_${m}_${$[0].key}`
-    }, /* @__PURE__ */ n.createElement(Et, x(h({}, c), {
+    }, /* @__PURE__ */ n.createElement(xt, x(g({}, c), {
       ref: t
     })));
   }) : null, u(), l && /* @__PURE__ */ n.createElement(W, null, /* @__PURE__ */ n.createElement(ne, {
     ref: t
-  }))), /* @__PURE__ */ n.createElement(Re, null));
-}, xt = a.div`
+  }))), /* @__PURE__ */ n.createElement(Be, null));
+}, wt = a.div`
     display: flex;
     flex-direction: column;
     align-items: stretch;
@@ -1027,12 +1027,12 @@ const Re = ({ className: t }) => {
 
     ${se(
   "h1",
-  g`
+  f`
             font-weight: normal;
         `
 )}
-`, wt = ({ dispatch: t }) => {
-  const e = Te(null);
+`, kt = ({ dispatch: t }) => {
+  const e = Ie(null);
   return ce(() => {
     e.current && e.current.parentNode && t("overlay-mounted", e.current);
   }, [e]), /* @__PURE__ */ n.createElement(ie, {
@@ -1040,16 +1040,16 @@ const Re = ({ className: t }) => {
     className: "humany-conversation-overlay-outlet",
     ref: e
   });
-}, kt = ({
+}, Ct = ({
   dispatch: t,
   header: e,
   buttonLabel: r
-}) => /* @__PURE__ */ n.createElement(Ct, {
+}) => /* @__PURE__ */ n.createElement(St, {
   portalId: "humany-conversation-portal",
   className: "humany-conversation-outlet"
-}, /* @__PURE__ */ n.createElement(St, {
+}, /* @__PURE__ */ n.createElement(zt, {
   className: "humany-conversation-outlet-head"
-}, /* @__PURE__ */ n.createElement(Lt, {
+}, /* @__PURE__ */ n.createElement(Mt, {
   className: "humany-conversation-outlet-head-button",
   "aria-label": r,
   title: r,
@@ -1060,10 +1060,10 @@ const Re = ({ className: t }) => {
     content: "caret-down"
   },
   size: 20
-})), e && /* @__PURE__ */ n.createElement(zt, {
+})), e && /* @__PURE__ */ n.createElement(Lt, {
   className: "humany-conversation-outlet-header",
   variant: "h1"
-}, e)), /* @__PURE__ */ n.createElement(fe, null)), Ct = a(ie)`
+}, e)), /* @__PURE__ */ n.createElement(fe, null)), St = a(ie)`
     z-index: 11;
     top: auto;
     height: 65%;
@@ -1078,7 +1078,7 @@ const Re = ({ className: t }) => {
   var e;
   return (e = t.theme.sizes) == null ? void 0 : e.large;
 }};
-`, St = a.div`
+`, zt = a.div`
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -1092,7 +1092,7 @@ const Re = ({ className: t }) => {
   return (e = t.theme.sizes) == null ? void 0 : e.normal;
 }};
     ${(t) => t.theme.border && `border-bottom: ${t.theme.border};`}
-`, zt = a(q)`
+`, Lt = a(q)`
     font-size: ${(t) => {
   var e;
   return (e = t.theme.fonts) == null ? void 0 : e.medium;
@@ -1102,7 +1102,7 @@ const Re = ({ className: t }) => {
   return (e = t.theme.colors) == null ? void 0 : e.text;
 }};
     margin: 0;
-`, Lt = a(L)`
+`, Mt = a(L)`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -1127,17 +1127,24 @@ const Re = ({ className: t }) => {
     }
 `, Ft = (r) => {
   var o = r, { className: t } = o, e = j(o, ["className"]);
-  const { overlay: l, overlayConversationHeader: s, overlayConversationCloseLabel: u } = M(), c = V();
-  return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(Mt, x(h({}, e), {
+  const {
+    overlay: l,
+    overlayConversationHeader: s,
+    overlayConversationCloseLabel: u,
+    conversationControllerId: c
+  } = M(), h = V();
+  return /* @__PURE__ */ n.createElement(Me.Provider, {
+    value: c ? { id: c } : null
+  }, /* @__PURE__ */ n.createElement(Ht, x(g({}, e), {
     className: H(t, "humany-conversation-component")
-  }), /* @__PURE__ */ n.createElement(fe, null)), l && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(wt, {
-    dispatch: c
-  }), l.conversation && /* @__PURE__ */ n.createElement(kt, {
-    dispatch: c,
+  }), /* @__PURE__ */ n.createElement(fe, null)), l && /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(kt, {
+    dispatch: h
+  }), l.conversation && /* @__PURE__ */ n.createElement(Ct, {
+    dispatch: h,
     header: s,
     buttonLabel: u
   })));
-}, Mt = a.div`
+}, Ht = a.div`
     position: absolute;
     right: 0;
     left: 0;
@@ -1150,4 +1157,4 @@ const Re = ({ className: t }) => {
 export {
   Ft as default
 };
-//# sourceMappingURL=conversation.d7aad569.js.map
+//# sourceMappingURL=conversation.b485c8d7.js.map