@telia-ace/widget-conversation 1.1.2-rc.0 → 1.1.2-rc.2

package/{conversation-b5103766.mjs → conversation-2acab7f7.mjs}

@@ -220,52 +220,52 @@ const Le = ({ className: e }) => {
 }};
   }
 `, Ae = s.div`
-    width: ${(e) => e.avatarSize || "32px"};
-    height: ${(e) => e.avatarSize || "32px"};
-    border-radius: 50%;
-    background-color: ${(e) => {
+  width: ${(e) => e.avatarSize || "32px"};
+  height: ${(e) => e.avatarSize || "32px"};
+  border-radius: 50%;
+  background-color: ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.accent;
 }};
-    border: ${(e) => e.theme.border};
-    grid-area: avatar;
-    align-self: flex-end;
-    justify-self: center;
-    overflow: hidden;
-    margin-right: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: ${(e) => {
+  border: ${(e) => e.theme.border};
+  grid-area: avatar;
+  align-self: flex-end;
+  justify-self: center;
+  overflow: hidden;
+  margin-right: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
 
-    > img {
-        height: 100%;
-        width: 100%;
-        object-fit: cover;
-    }
+  > img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
 
-    > svg {
-        width: 90%;
-        height: 90%;
-        padding: 10%;
-        color: ${(e) => {
+  > svg {
+    width: 90%;
+    height: 90%;
+    padding: 10%;
+    color: ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
 
-        line,
-        path,
-        circle,
-        fill {
-            stroke: ${(e) => {
+    line,
+    path,
+    circle,
+    fill {
+      stroke: ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
-        }
     }
+  }
 `, Be = we`
   0% {
     opacity: 0;
@@ -277,121 +277,121 @@ const Le = ({ className: e }) => {
     opacity: 0;
   }
 `, Re = s.div`
-    display: flex;
-    justify-content: center;
-    > div {
-        height: 10px;
-        width: 10px;
-        border-radius: 50%;
-        margin: 5px;
-        background-color: ${(e) => {
+  display: flex;
+  justify-content: center;
+  > div {
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+    margin: 5px;
+    background-color: ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
-        animation: ${Be} 1s infinite;
-    }
-    > div:nth-of-type(2) {
-        animation-delay: 100ms;
-    }
-    > div:nth-of-type(3) {
-        animation-delay: 200ms;
-    }
+    animation: ${Be} 1s infinite;
+  }
+  > div:nth-of-type(2) {
+    animation-delay: 100ms;
+  }
+  > div:nth-of-type(3) {
+    animation-delay: 200ms;
+  }
 `, U = s.div`
-    grid-area: content;
-    max-width: 100%;
-    overflow: hidden;
+  grid-area: content;
+  max-width: 100%;
+  overflow: hidden;
 `, Ke = s(Y)`
-    font-size: ${(e) => {
+  font-size: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.normal;
 }};
-    font-weight: normal;
-    margin: 0;
+  font-weight: normal;
+  margin: 0;
 `, _ = s.div`
-    display: flex;
-    ${(e) => e.left && "justify-content: start;"};
-    ${(e) => e.center && "justify-content: center;"};
-    ${(e) => e.right && "justify-content: end;"};
+  display: flex;
+  ${(e) => e.left && "justify-content: start;"};
+  ${(e) => e.center && "justify-content: center;"};
+  ${(e) => e.right && "justify-content: end;"};
 `, V = s.div`
-    ${(e) => {
+  ${(e) => {
   var t;
   return e.padded && `padding: ${(t = e.theme.sizes) == null ? void 0 : t.medium};`;
 }}
-    ${(e) => !e.user && e.stacked && je(e.stacked, e.theme)}
+  ${(e) => !e.user && e.stacked && je(e.stacked, e.theme)}
     ${(e) => e.user && e.stacked && Oe(e.stacked, e.theme)}
 
     display: inline-block;
-    margin-top: ${(e) => {
+  margin-top: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
-    && > * {
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        word-break: break-all;
-        word-break: break-word;
-        hyphens: auto;
-    }
-    max-width: 100%;
-    ${(e) => e.fullWidth && "width: 100%;"}
+  && > * {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-all;
+    word-break: break-word;
+    hyphens: auto;
+  }
+  max-width: 100%;
+  ${(e) => e.fullWidth && "width: 100%;"}
 `, je = (e, t) => {
   var r, a;
   const o = g`
-        background-color: ${(r = t.colors) == null ? void 0 : r.accent};
-        color: ${(a = t.colors) == null ? void 0 : a.text};
-        ${t.border && `border: ${t.border};`};
-    `;
+    background-color: ${(r = t.colors) == null ? void 0 : r.accent};
+    color: ${(a = t.colors) == null ? void 0 : a.text};
+    ${t.border && `border: ${t.border};`};
+  `;
   return t.borderRadius ? g`
-        ${o}
+    ${o}
 
-        border-top-right-radius: ${t.borderRadius};
-        border-bottom-right-radius: ${t.borderRadius};
+    border-top-right-radius: ${t.borderRadius};
+    border-bottom-right-radius: ${t.borderRadius};
 
-        ${e === "first" && `
+    ${e === "first" && `
             border-top-left-radius: ${t.borderRadius};
         `}
 
-        ${e === "last" && `
+    ${e === "last" && `
             border-bottom-left-radius: ${t.borderRadius};
         `}
-    ` : o;
+  ` : o;
 }, Oe = (e, t) => {
   var r, a;
   const o = g`
-        background-color: ${(r = t.colors) == null ? void 0 : r.primary};
-        color: ${(a = t.colors) == null ? void 0 : a.accent};
-    `;
+    background-color: ${(r = t.colors) == null ? void 0 : r.primary};
+    color: ${(a = t.colors) == null ? void 0 : a.accent};
+  `;
   return t.borderRadius ? g`
-        ${o}
+    ${o}
 
-        border-top-left-radius: ${t.borderRadius};
-        border-bottom-left-radius: ${t.borderRadius};
+    border-top-left-radius: ${t.borderRadius};
+    border-bottom-left-radius: ${t.borderRadius};
 
-        ${e === "first" && `
+    ${e === "first" && `
             border-top-right-radius: ${t.borderRadius};
         `}
 
-        ${e === "last" && `
+    ${e === "last" && `
             border-bottom-right-radius: ${t.borderRadius};
         `}
-    ` : o;
+  ` : o;
 }, A = s.div`
-    margin-bottom: ${(e) => {
+  margin-bottom: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
-    &:last-child {
-        margin-bottom: 0;
-    }
+  &:last-child {
+    margin-bottom: 0;
+  }
 `, C = (e) => {
   var t, o;
   return g`
-    margin: ${(t = e.theme.sizes) == null ? void 0 : t.medium} 0;
-    padding: 0 ${(o = e.theme.sizes) == null ? void 0 : o.medium};
+  margin: ${(t = e.theme.sizes) == null ? void 0 : t.medium} 0;
+  padding: 0 ${(o = e.theme.sizes) == null ? void 0 : o.medium};
 `;
 }, De = s(ze)`
-    & button.humany-form-component-button {
-        ${(e) => {
+  & button.humany-form-component-button {
+    ${(e) => {
   var t, o, r, a;
   return ((t = e.theme.colors) == null ? void 0 : t.primary) && ((o = e.theme.colors) == null ? void 0 : o.accent) && pe({
     active: !1,
@@ -400,82 +400,92 @@ const Le = ({ className: e }) => {
     theme: e.theme
   });
 }};
-        display: block;
-        width: 100%;
-        margin-bottom: ${(e) => {
+    display: block;
+    width: 100%;
+    margin-bottom: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
-    }
-    & button.humany-form-component-submit {
-        width: 100%;
-        margin: 0;
-        :not(:last-child) {
-            margin-bottom: ${(e) => {
+  }
+  & button.humany-form-component-submit {
+    width: 100%;
+    margin: 0;
+    :not(:last-child) {
+      margin-bottom: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
-        }
     }
+  }
 `, We = s(G)`
-    white-space: pre-wrap;
-    a {
-        color: ${(e) => e.theme.colors.link};
-        &:focus {
-            ${(e) => {
+  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) && f;
 }};
-        }
     }
+  }
 `, Ee = s(re)`
-    padding: 0;
-    list-style: none;
-    margin: 0 -${(e) => {
+  padding: 0;
+  list-style: none;
+  margin: 0 -${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
-    > li {
-        margin: ${(e) => {
+  > li {
+    margin: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
-    }
+  }
 `, Fe = s.button`
-    ${(e) => K(e)};
-    display: block;
-    background-color: ${(e) => {
+  ${(e) => K(e)};
+  display: block;
+  background-color: ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.primary;
 }};
-    width: 100%;
-    color: #fff;
-    &:focus-visible {
-        ${f}
-        background-color: transparent;
-    }
+  width: 100%;
+  color: #fff;
+  &:focus-visible {
+    ${f}
+    background-color: transparent;
+  }
 `, Z = Q(
-  ({ boxed: e, className: t, agentData: o }, r) => /* @__PURE__ */ n(U, { ref: r, children: /* @__PURE__ */ n(_, { left: e, center: !e, children: /* @__PURE__ */ n(V, { padded: !!e, stacked: e ? "first" : void 0, children: /* @__PURE__ */ m(Re, { children: [
-    /* @__PURE__ */ n("div", {}),
-    /* @__PURE__ */ n("div", {}),
-    /* @__PURE__ */ n("div", {})
-  ] }) }) }) })
+  ({ boxed: e, className: t, agentData: o }, r) => /* @__PURE__ */ n(U, { ref: r, children: /* @__PURE__ */ n(_, { left: e, center: !e, children: /* @__PURE__ */ n(
+    V,
+    {
+      padded: !!e,
+      stacked: e ? "first" : void 0,
+      children: /* @__PURE__ */ m(Re, { children: [
+        /* @__PURE__ */ n("div", {}),
+        /* @__PURE__ */ n("div", {}),
+        /* @__PURE__ */ n("div", {})
+      ] })
+    }
+  ) }) })
 ), Pe = s.p`
-    && {
-        font-size: ${(e) => {
+  && {
+    font-size: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.small;
 }};
-        font-weight: 300;
-    }
-    margin: 0;
-    line-height: 1.5em;
-    grid-area: info;
-    color: ${(e) => {
+    font-weight: 300;
+  }
+  margin: 0;
+  line-height: 1.5em;
+  grid-area: info;
+  color: ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
-`, ee = (e) => new Date(e).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), B = ({ className: e, name: t, timestamp: o }) => {
+`, ee = (e) => new Date(e).toLocaleTimeString([], {
+  hour: "2-digit",
+  minute: "2-digit"
+}), B = ({ className: e, name: t, timestamp: o }) => {
   if (!t && !o)
     return null;
   let r = "";
@@ -527,7 +537,10 @@ const Le = ({ className: e }) => {
     Ve,
     {
       ref: i,
-      className: M(e, "humany-conversation-system-message"),
+      className: M(
+        e,
+        "humany-conversation-system-message"
+      ),
       fullWidth: a,
       children: r ? /* @__PURE__ */ m(qe, { className: "humany-conversation-discrete-message", children: [
         t,
@@ -539,32 +552,35 @@ const Le = ({ className: e }) => {
     }
   )
 ), Ve = s.div`
-    ${(e) => e.fullWidth && "width: 100%"};
-    padding: 0 ${(e) => {
+  ${(e) => e.fullWidth && "width: 100%"};
+  padding: 0 ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.large;
 }};
-    overflow: auto;
+  overflow: auto;
 `, qe = s.div`
-    text-align: center;
-    word-wrap: break-word;
-    font-size: ${(e) => {
+  text-align: center;
+  word-wrap: break-word;
+  font-size: ${(e) => {
   var t;
   return (t = e.theme.fonts) == null ? void 0 : t.normal;
 }};
-    color: ${(e) => {
+  color: ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.text;
 }};
-    > p {
-        margin: 0;
-    }
+  > p {
+    margin: 0;
+  }
 `, Ye = ({ className: e, children: t, timestamp: o }) => {
   const { userLabel: r = "" } = I();
   return /* @__PURE__ */ m(
     Ge,
     {
-      className: M(e, "humany-conversation-user-message"),
+      className: M(
+        e,
+        "humany-conversation-user-message"
+      ),
       children: [
         t,
         /* @__PURE__ */ n(B, { name: r, timestamp: o })
@@ -572,11 +588,11 @@ const Le = ({ className: e }) => {
     }
   );
 }, Ge = s.div`
-    margin-left: 10%;
-    width: 90%;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
+  margin-left: 10%;
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
 `, X = (e) => Array.isArray(e) ? e : Object.keys(e).map((t) => ({
   label: e[t],
   actionKey: t
@@ -694,16 +710,16 @@ const Le = ({ className: e }) => {
   const o = be(e);
   return !o || !e ? null : /* @__PURE__ */ n(ke, { fallback: null, children: /* @__PURE__ */ n(o, { ...t }) });
 }, tt = ({ body: e }) => /* @__PURE__ */ n(nt, { html: e }), nt = s(G)`
-    ${$e}
-    color: inherit;
-    white-space: pre-wrap;
-    ${C}
-    a {
-        color: ${(e) => e.theme.colors.link};
-        &:focus-visible {
-            ${f};
-        }
+  ${$e}
+  color: inherit;
+  white-space: pre-wrap;
+  ${C}
+  a {
+    color: ${(e) => e.theme.colors.link};
+    &:focus-visible {
+      ${f};
     }
+  }
 `, rt = ({ header: e, actions: t, dispatch: o }) => /* @__PURE__ */ n(
   ot,
   {
@@ -741,92 +757,92 @@ const Le = ({ className: e }) => {
     }
   }
 ), ot = s(j)`
-    ${O}
+  ${O}
 
-    > .humany-paragraph {
-        ${C}
-        margin-bottom: 0;
+  > .humany-paragraph {
+    ${C}
+    margin-bottom: 0;
 
-        h1 {
-            margin: 0;
-        }
+    h1 {
+      margin: 0;
     }
+  }
 
-    ${(e) => J(e)(
+  ${(e) => J(e)(
   "h1",
   g`
-                white-space: normal;
-            `
+        white-space: normal;
+      `
 )}
 
-    > ul {
-        display: flex;
-        flex-direction: column;
-        gap: ${(e) => {
+  > ul {
+    display: flex;
+    flex-direction: column;
+    gap: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
-        > li {
-            margin: 0;
-        }
+    > li {
+      margin: 0;
     }
+  }
 
-    li {
-        border-bottom: ${(e) => e.theme.border};
+  li {
+    border-bottom: ${(e) => e.theme.border};
 
-        &:last-of-type {
-            border-bottom: none;
-        }
+    &:last-of-type {
+      border-bottom: none;
     }
+  }
 `, st = s.div`
-    display: flex;
-    gap: ${(e) => {
+  display: flex;
+  gap: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.medium;
 }};
-    ${C}
+  ${C}
 
-    .item-icon {
-    }
+  .item-icon {
+  }
 
-    .item-body {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        gap: ${(e) => {
+  .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;
-        }
+    p {
+      margin: 0;
+      white-space: normal;
     }
+  }
 
-    button {
-        background: transparent;
-        border: none;
-        font-family: inherit;
-        font-size: ${(e) => {
+  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;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
 
-        &:focus-visible {
-            ${f}
-            span {
-                color: ${(e) => {
+    &:focus-visible {
+      ${f}
+      span {
+        color: ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.primary;
 }};
-                text-decoration: underline;
-            }
-        }
+        text-decoration: underline;
+      }
     }
+  }
 `, at = ({ header: e, actions: t, dispatch: o }) => /* @__PURE__ */ n(
   it,
   {
@@ -859,67 +875,67 @@ const Le = ({ className: e }) => {
     ) }, r.actionKey)
   }
 ), it = s(j)`
-    ${O}
-    ${C}
+  ${O}
+  ${C}
 
     ${(e) => J(e)(
   "h1",
   g`
-                white-space: normal;
-            `
+        white-space: normal;
+      `
 )}
 
     > ul {
-        display: flex;
-        flex-direction: column;
-        gap: ${(e) => {
+    display: flex;
+    flex-direction: column;
+    gap: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
-        > li {
-            margin: 0;
-        }
+    > li {
+      margin: 0;
     }
+  }
 `, lt = s(z)`
-    display: block;
-    text-align: left;
-    font-weight: 300;
-    color: ${(e) => {
+  display: block;
+  text-align: left;
+  font-weight: 300;
+  color: ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.primary;
 }};
-    max-width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
 
-    ${(e) => {
+  ${(e) => {
   var t, o;
   return e.help && g`
-            color: ${(t = e.theme.colors) == null ? void 0 : t.text};
-            text-decoration: underline;
+      color: ${(t = e.theme.colors) == null ? void 0 : t.text};
+      text-decoration: underline;
 
-            i,
-            svg {
-                margin-left: ${(o = e.theme.sizes) == null ? void 0 : o.small};
-            }
-        `;
+      i,
+      svg {
+        margin-left: ${(o = e.theme.sizes) == null ? void 0 : o.small};
+      }
+    `;
 }}
 
-    &:focus-visible {
-        ${f}
-        span {
-            color: ${(e) => {
+  &:focus-visible {
+    ${f}
+    span {
+      color: ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.primary;
 }};
-            text-decoration: underline;
-        }
+      text-decoration: underline;
     }
+  }
 `, ct = () => /* @__PURE__ */ n(dt, { className: "humany-conversation-separator" }), dt = s.div`
-    ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
-    width: 100%;
+  ${(e) => e.theme.border && `border-bottom: ${e.theme.border};`}
+  width: 100%;
 `, mt = ({ text: e }) => /* @__PURE__ */ n(ht, { className: "humany-conversation-text", variant: "span", children: e }), ht = s(Y)`
-    ${C}
+  ${C}
 `, ut = ({
   header: e = "Video call",
   acceptLabel: t = "Accept",
@@ -968,59 +984,59 @@ const Le = ({ className: e }) => {
     }
   );
 }, gt = s(j)`
-    ${(e) => O(e)}
-    > ul {
-        display: flex;
-        flex-wrap: wrap;
-        gap: ${(e) => {
+  ${(e) => O(e)}
+  > ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.normal;
 }};
-        > li {
-            margin: 0;
-        }
+    > li {
+      margin: 0;
     }
-    ${(e) => C(e)}
+  }
+  ${(e) => C(e)}
 `, ft = s(z)`
-    ${K};
+  ${K};
 
-    background-color: ${(e) => e.bgColor};
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: #ffffff;
-    width: 46px;
-    height: 46px;
-    border-radius: 100%;
+  background-color: ${(e) => e.bgColor};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #ffffff;
+  width: 46px;
+  height: 46px;
+  border-radius: 100%;
 
-    &:focus-visible {
-        ${f}
-        background-color: transparent;
+  &:focus-visible {
+    ${f}
+    background-color: transparent;
 
-        i,
-        svg {
-            color: ${(e) => {
+    i,
+    svg {
+      color: ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.primary;
 }};
 
-            path {
-                stroke: ${(e) => {
+      path {
+        stroke: ${(e) => {
   var t;
   return (t = e.theme.colors) == null ? void 0 : t.primary;
 }};
-            }
-        }
+      }
     }
+  }
 
-    i,
-    svg {
-        color: #fff;
+  i,
+  svg {
+    color: #fff;
 
-        path {
-            stroke: #fff;
-        }
+    path {
+      stroke: #fff;
     }
+  }
 `, pt = ([e, t]) => ({ type: e, content: t }), yt = ({ items: e, dispatch: t }) => /* @__PURE__ */ n(
   bt,
   {
@@ -1049,11 +1065,11 @@ const Le = ({ className: e }) => {
     }
   }
 ), bt = s(re)`
-    ${ve}
+  ${ve}
 
-    > li {
-        margin: 0;
-    }
+  > li {
+    margin: 0;
+  }
 `, $t = Q(
   ({ className: e, timestamp: t, sender: o, type: r, content: a }, i) => {
     const u = ae(
@@ -1076,22 +1092,30 @@ const Le = ({ className: e }) => {
         },
         l
       );
-    }) }), p = () => /* @__PURE__ */ n(le, { sender: o, timestamp: t, className: e, children: /* @__PURE__ */ n(U, { className: "humany-message-content-bundle", children: a.map((d, l) => /* @__PURE__ */ n(
-      _,
+    }) }), p = () => /* @__PURE__ */ n(
+      le,
       {
-        className: "humany-message-container",
-        left: !0,
-        ref: i,
-        children: /* @__PURE__ */ n(
-          F,
+        sender: o,
+        timestamp: t,
+        className: e,
+        children: /* @__PURE__ */ n(U, { className: "humany-message-content-bundle", children: a.map((d, l) => /* @__PURE__ */ n(
+          _,
           {
-            content: d,
-            stacked: u(l)
-          }
-        )
-      },
-      d.key
-    )) }) }), x = () => /* @__PURE__ */ n(Ye, { timestamp: t, className: e, children: /* @__PURE__ */ n(U, { className: "humany-message-content-bundle", children: a.map((d, l) => /* @__PURE__ */ n(
+            className: "humany-message-container",
+            left: !0,
+            ref: i,
+            children: /* @__PURE__ */ n(
+              F,
+              {
+                content: d,
+                stacked: u(l)
+              }
+            )
+          },
+          d.key
+        )) })
+      }
+    ), x = () => /* @__PURE__ */ n(Ye, { timestamp: t, className: e, children: /* @__PURE__ */ n(U, { className: "humany-message-content-bundle", children: a.map((d, l) => /* @__PURE__ */ n(
       _,
       {
         className: "humany-message-container",
@@ -1119,9 +1143,22 @@ const Le = ({ className: e }) => {
         return null;
     }
   }
-), F = ({ content: e, isUser: t, isSystem: o, stacked: r }) => {
+), F = ({
+  content: e,
+  isUser: t,
+  isSystem: o,
+  stacked: r
+}) => {
   const a = q(), { title: i, body: u, actions: c, form: p, items: x } = e;
-  return x ? /* @__PURE__ */ n(V, { className: "humany-message-content", user: !!t, stacked: r, children: /* @__PURE__ */ n(yt, { items: x, dispatch: a }) }) : /* @__PURE__ */ m(
+  return x ? /* @__PURE__ */ n(
+    V,
+    {
+      className: "humany-message-content",
+      user: !!t,
+      stacked: r,
+      children: /* @__PURE__ */ n(yt, { items: x, dispatch: a })
+    }
+  ) : /* @__PURE__ */ m(
     V,
     {
       className: "humany-message-content",
@@ -1175,7 +1212,20 @@ const Le = ({ className: e }) => {
     messages: r,
     loading: a,
     typingActors: i = []
-  } = I(), u = () => i && i.length ? i.map((c, p) => /* @__PURE__ */ n(P, { id: `typing_${c.name}`, children: /* @__PURE__ */ n(le, { timestamp: Date.now(), sender: c, children: /* @__PURE__ */ n(Z, { boxed: !0, ref: e }) }) }, `typing_${c.name}`)) : null;
+  } = I(), u = () => i && i.length ? i.map((c, p) => /* @__PURE__ */ n(
+    P,
+    {
+      id: `typing_${c.name}`,
+      children: /* @__PURE__ */ n(le, { timestamp: Date.now(), sender: c, children: /* @__PURE__ */ n(
+        Z,
+        {
+          boxed: !0,
+          ref: e
+        }
+      ) })
+    },
+    `typing_${c.name}`
+  )) : null;
   return /* @__PURE__ */ m(R, { children: [
     /* @__PURE__ */ m(vt, { tabIndex: 0, scrollableCss: t, ref: o, children: [
       r && r.length ? r.map((c, p) => {
@@ -1196,55 +1246,55 @@ const Le = ({ className: e }) => {
     /* @__PURE__ */ n(Le, {})
   ] });
 }, vt = s.div`
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    flex: 0 1 100%;
-    padding: 0 ${(e) => {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex: 0 1 100%;
+  padding: 0 ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.medium;
 }};
-    ${(e) => !!e.scrollableCss && e.scrollableCss};
-    &:focus-visible {
-        ${(e) => f(e)};
-    }
+  ${(e) => !!e.scrollableCss && e.scrollableCss};
+  &:focus-visible {
+    ${(e) => f(e)};
+  }
 `, P = s.div`
-    margin: 0;
-    margin-bottom: ${(e) => {
+  margin: 0;
+  margin-bottom: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.medium;
 }};
 
-    &:first-of-type {
-        margin-top: ${(e) => {
+  &:first-of-type {
+    margin-top: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.medium;
 }};
-    }
+  }
 
-    &:last-of-type {
-        padding-bottom: ${(e) => {
+  &:last-of-type {
+    padding-bottom: ${(e) => {
   var t;
   return (t = e.theme.sizes) == null ? void 0 : t.medium;
 }};
-    }
+  }
 
-    & span,
-    p,
-    a,
-    div {
-        font-weight: 300;
-    }
+  & span,
+  p,
+  a,
+  div {
+    font-weight: 300;
+  }
 
-    & b,
-    h1 {
-        font-weight: normal;
-    }
-    ${(e) => J(e)(
+  & b,
+  h1 {
+    font-weight: normal;
+  }
+  ${(e) => J(e)(
   "h1",
   g`
-                font-weight: normal;
-            `
+        font-weight: normal;
+      `
 )}
 `, xt = ({ dispatch: e }) => {
   const t = Se(null);
@@ -1397,14 +1447,14 @@ const Le = ({ className: e }) => {
     }
   );
 }, Lt = s.div`
-    position: absolute;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    top: 0;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
+  position: absolute;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  top: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 `;
 export {
   Dt as default