@telia-ace/widget-conversation 1.0.32 → 1.0.33-next.0

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

@@ -67,49 +67,75 @@ const Re = ({ className: e }) => {
   }, O = (d) => {
     ye(d), r(d), d && d.length > 0 && m("user-typing", { textLength: d.length });
   };
-  return $ ? null : /* @__PURE__ */ n.createElement(Oe, {
-    grow: E,
-    className: H("humany-conversation-input", e),
-    "data-has-focus": o,
-    scrollableCss: fe,
-    isTabbing: v
-  }, p && /* @__PURE__ */ n.createElement(Ne, {
-    disabled: k,
-    onClick: pe,
-    title: p.label,
-    "aria-label": p.label
-  }, /* @__PURE__ */ n.createElement(w, {
-    size: 24,
-    symbol: { type: "Svg", content: p.icon || "browse" }
-  })), E ? /* @__PURE__ */ n.createElement(Be, {
-    value: t,
-    onChange: O,
-    onEnter: N,
-    disabled: k,
-    "aria-label": i,
-    placeholder: i,
-    onFocusChange: l,
-    type: "textarea",
-    rows: 1,
-    ref: y
-  }) : /* @__PURE__ */ n.createElement(Ke, {
-    value: t,
-    onChange: O,
-    onEnter: N,
-    disabled: k,
-    "aria-label": i,
-    placeholder: i,
-    onFocusChange: l
-  }), /* @__PURE__ */ n.createElement(de, {
-    disabled: k,
-    onClick: N,
-    title: S,
-    "aria-label": S
-  }, /* @__PURE__ */ n.createElement(je, {
-    size: 22,
-    symbol: { type: "Svg", content: "send" },
-    hasContent: !!t && !!t.length
-  })));
+  return $ ? null : /* @__PURE__ */ n.createElement(
+    Oe,
+    {
+      grow: E,
+      className: H("humany-conversation-input", e),
+      "data-has-focus": o,
+      scrollableCss: fe,
+      isTabbing: v
+    },
+    p && /* @__PURE__ */ n.createElement(
+      Ne,
+      {
+        disabled: k,
+        onClick: pe,
+        title: p.label,
+        "aria-label": p.label
+      },
+      /* @__PURE__ */ n.createElement(
+        w,
+        {
+          size: 24,
+          symbol: { type: "Svg", content: p.icon || "browse" }
+        }
+      )
+    ),
+    E ? /* @__PURE__ */ n.createElement(
+      Be,
+      {
+        value: t,
+        onChange: O,
+        onEnter: N,
+        disabled: k,
+        "aria-label": i,
+        placeholder: i,
+        onFocusChange: l,
+        type: "textarea",
+        rows: 1,
+        ref: y
+      }
+    ) : /* @__PURE__ */ n.createElement(
+      Ke,
+      {
+        value: t,
+        onChange: O,
+        onEnter: N,
+        disabled: k,
+        "aria-label": i,
+        placeholder: i,
+        onFocusChange: l
+      }
+    ),
+    /* @__PURE__ */ n.createElement(
+      de,
+      {
+        disabled: k,
+        onClick: N,
+        title: S,
+        "aria-label": S
+      },
+      /* @__PURE__ */ n.createElement(
+        je,
+        {
+          size: 22,
+          symbol: { type: "Svg", content: "send" },
+          hasContent: !!t && !!t.length
+        }
+      )
+    )
+  );
 }, Be = a(ae)`
     resize: none;
     flex: 1;
@@ -450,15 +476,7 @@ const Re = ({ className: e }) => {
         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)))))
+  ({ 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`
     && {
         font-size: ${(e) => {
@@ -481,19 +499,16 @@ const Re = ({ className: e }) => {
   return t ? r ? o = `${t}: ${re(r)}` : o = t : r && (o = re(r)), /* @__PURE__ */ n.createElement(Xe, null, o);
 }, K = Ze, et = ({ className: e, children: t, sender: r, timestamp: o }) => {
   const { avatar: l, name: s } = r, { avatarSize: u } = L();
-  return /* @__PURE__ */ n.createElement(tt, {
-    hasAvatar: !!l,
-    className: H(e, "humany-conversation-agent-message")
-  }, l && /* @__PURE__ */ n.createElement(Fe, {
-    avatarSize: u
-  }, typeof l == "string" ? /* @__PURE__ */ n.createElement("img", {
-    src: l
-  }) : /* @__PURE__ */ n.createElement(w, {
-    symbol: l
-  })), t, /* @__PURE__ */ n.createElement(K, {
-    name: s,
-    timestamp: o
-  }));
+  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 })),
+    t,
+    /* @__PURE__ */ n.createElement(K, { name: s, timestamp: o })
+  );
 }, tt = a.div`
     display: grid;
     margin-right: 10%;
@@ -512,17 +527,15 @@ const Re = ({ className: e }) => {
                       'info';
               `};
 `, ue = et, nt = X(
-  ({ className: e, children: t, timestamp: r, discrete: o, fullWidth: l }, s) => /* @__PURE__ */ n.createElement(rt, {
-    ref: s,
-    className: H(e, "humany-conversation-system-message"),
-    fullWidth: l
-  }, o ? /* @__PURE__ */ 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
-  })))
+  ({ className: e, children: t, timestamp: r, discrete: o, fullWidth: l }, s) => /* @__PURE__ */ n.createElement(
+    rt,
+    {
+      ref: s,
+      className: H(e, "humany-conversation-system-message"),
+      fullWidth: l
+    },
+    o ? /* @__PURE__ */ 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 }))
+  )
 ), rt = a.div`
     ${(e) => e.fullWidth && "width: 100%"};
     padding: 0 ${(e) => {
@@ -546,12 +559,14 @@ const Re = ({ className: e }) => {
     }
 `, at = nt, lt = ({ className: e, children: t, timestamp: r }) => {
   const { userLabel: o = "" } = L();
-  return /* @__PURE__ */ n.createElement(st, {
-    className: H(e, "humany-conversation-user-message")
-  }, t, /* @__PURE__ */ n.createElement(K, {
-    name: o,
-    timestamp: r
-  }));
+  return /* @__PURE__ */ n.createElement(
+    st,
+    {
+      className: H(e, "humany-conversation-user-message")
+    },
+    t,
+    /* @__PURE__ */ n.createElement(K, { name: o, timestamp: r })
+  );
 }, st = a.div`
     margin-left: 10%;
     width: 90%;
@@ -561,21 +576,25 @@ const Re = ({ className: e }) => {
 `, it = lt, he = (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),
-  renderItem: (o) => /* @__PURE__ */ n.createElement("li", {
-    key: o.actionKey
-  }, /* @__PURE__ */ n.createElement(dt, {
-    onClick: () => {
-      r("action", o);
-    },
-    "aria-label": o.label,
-    title: o.label
-  }, /* @__PURE__ */ n.createElement(w, {
-    symbol: o.symbol
-  }), o.label))
-}), mt = a(J)`
+})), ct = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(
+  mt,
+  {
+    header: e,
+    items: he(t),
+    renderItem: (o) => /* @__PURE__ */ n.createElement("li", { key: o.actionKey }, /* @__PURE__ */ n.createElement(
+      dt,
+      {
+        onClick: () => {
+          r("action", o);
+        },
+        "aria-label": o.label,
+        title: o.label
+      },
+      /* @__PURE__ */ n.createElement(w, { symbol: o.symbol }),
+      o.label
+    ))
+  }
+), mt = a(J)`
     ${Q}
     > ul {
         display: flex;
@@ -619,12 +638,8 @@ 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)`
+  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)`
     ${Se}
     color: inherit;
     white-space: pre-wrap;
@@ -635,26 +650,35 @@ const Re = ({ className: e }) => {
             ${b};
         }
     }
-`, ft = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(pt, {
-  header: e,
-  items: he(t),
-  renderItem: (o) => /* @__PURE__ */ n.createElement("li", {
-    key: o.actionKey
-  }, /* @__PURE__ */ n.createElement(yt, {
-    help: o.actionKey === "help",
-    onClick: () => {
-      r("action", o);
-    },
-    "aria-label": o.label,
-    title: o.label
-  }, o.label, o.actionKey === "help" && /* @__PURE__ */ n.createElement(w, {
-    size: 14,
-    symbol: {
-      type: "Svg",
-      content: "caret-down"
-    }
-  })))
-}), pt = a(J)`
+`, ft = ({ header: e, actions: t, dispatch: r }) => /* @__PURE__ */ n.createElement(
+  pt,
+  {
+    header: e,
+    items: he(t),
+    renderItem: (o) => /* @__PURE__ */ n.createElement("li", { key: o.actionKey }, /* @__PURE__ */ n.createElement(
+      yt,
+      {
+        help: o.actionKey === "help",
+        onClick: () => {
+          r("action", o);
+        },
+        "aria-label": o.label,
+        title: o.label
+      },
+      o.label,
+      o.actionKey === "help" && /* @__PURE__ */ n.createElement(
+        w,
+        {
+          size: 14,
+          symbol: {
+            type: "Svg",
+            content: "caret-down"
+          }
+        }
+      )
+    ))
+  }
+), pt = a(J)`
     ${Q}
     ${T}
 
@@ -714,9 +738,7 @@ const Re = ({ className: e }) => {
 `, bt = () => /* @__PURE__ */ n.createElement($t, null), $t = 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)`
+`, vt = ({ text: e }) => /* @__PURE__ */ n.createElement(Et, { variant: "span" }, e), Et = a(q)`
     ${T}
 `, xt = ({
   header: e = "Video call",
@@ -742,26 +764,28 @@ const Re = ({ className: e }) => {
       }
     }
   ], [t, r]);
-  return /* @__PURE__ */ n.createElement(wt, {
-    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, {
-        onClick: () => {
-          o("action", s);
-        },
-        "aria-label": s.label,
-        title: s.label,
-        bgColor: u
-      }, /* @__PURE__ */ n.createElement(w, {
-        symbol: s.symbol,
-        size: 25
-      })));
+  return /* @__PURE__ */ n.createElement(
+    wt,
+    {
+      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,
+          {
+            onClick: () => {
+              o("action", s);
+            },
+            "aria-label": s.label,
+            title: s.label,
+            bgColor: u
+          },
+          /* @__PURE__ */ n.createElement(w, { symbol: s.symbol, size: 25 })
+        ));
+      }
     }
-  });
+  );
 }, wt = a(J)`
     ${(e) => Q(e)}
     > ul {
@@ -816,39 +840,31 @@ const Re = ({ className: e }) => {
             stroke: #fff;
         }
     }
-`, Ct = ([e, t]) => ({ type: e, content: t }), St = ({ items: e, dispatch: t }) => /* @__PURE__ */ n.createElement(zt, {
-  items: e.map(Ct),
-  renderLi: !0,
-  renderItem: (r) => {
-    switch (r.type) {
-      case C.Text:
-        return /* @__PURE__ */ n.createElement(vt, {
-          text: r.content
-        });
-      case C.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
-        }));
-      default:
-        return /* @__PURE__ */ n.createElement(ut, {
-          type: r.type,
-          content: r.content
-        });
+`, Ct = ([e, t]) => ({ type: e, content: t }), St = ({ items: e, dispatch: t }) => /* @__PURE__ */ n.createElement(
+  zt,
+  {
+    items: e.map(Ct),
+    renderLi: !0,
+    renderItem: (r) => {
+      switch (r.type) {
+        case C.Text:
+          return /* @__PURE__ */ n.createElement(vt, { text: r.content });
+        case C.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 }));
+        default:
+          return /* @__PURE__ */ n.createElement(ut, { type: r.type, content: r.content });
+      }
     }
   }
-}), zt = a(le)`
+), zt = a(le)`
     ${ze}
 
     > li {
@@ -864,42 +880,32 @@ const Re = ({ className: e }) => {
       [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(at, {
-        className: e,
-        key: i,
-        discrete: p,
-        ref: s,
-        timestamp: t,
-        fullWidth: !!S || !!E
-      }, p && $ ? /* @__PURE__ */ n.createElement(Y, {
-        html: $
-      }) : /* @__PURE__ */ n.createElement(F, {
-        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, {
-      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, {
-      isUser: !0,
-      content: m,
-      stacked: u(i)
-    })))));
+      return /* @__PURE__ */ n.createElement(
+        at,
+        {
+          className: e,
+          key: i,
+          discrete: p,
+          ref: s,
+          timestamp: t,
+          fullWidth: !!S || !!E
+        },
+        p && $ ? /* @__PURE__ */ n.createElement(Y, { html: $ }) : /* @__PURE__ */ n.createElement(F, { 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,
+      {
+        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,
+      {
+        isUser: !0,
+        content: m,
+        stacked: u(i)
+      }
+    )))));
     switch (o) {
       case D.System:
         return c();
@@ -913,39 +919,44 @@ const Re = ({ className: e }) => {
   }
 ), 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(_, {
-    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(qe, x(g({}, h), {
-    onChange: (i, $) => {
-      l("form", {
-        data: $,
-        formKey: h.schema.id,
-        actionKey: i
-      });
-    }
-  }))), c && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(Ge, {
-    items: Object.keys(c).map((i) => ({ label: c[i], actionKey: i })),
-    renderItem: (i) => /* @__PURE__ */ n.createElement("li", {
-      key: i.actionKey
-    }, /* @__PURE__ */ n.createElement(Je, {
-      onClick: () => {
-        l("action", i.actionKey);
+  return v ? /* @__PURE__ */ n.createElement(_, { user: !!t, stacked: o }, /* @__PURE__ */ n.createElement(St, { items: v, dispatch: l })) : /* @__PURE__ */ n.createElement(
+    _,
+    {
+      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(
+      qe,
+      x(g({}, h), {
+        onChange: (i, $) => {
+          l("form", {
+            data: $,
+            formKey: h.schema.id,
+            actionKey: i
+          });
+        }
+      })
+    )),
+    c && /* @__PURE__ */ n.createElement(B, null, /* @__PURE__ */ n.createElement(
+      Ge,
+      {
+        items: Object.keys(c).map((i) => ({ label: c[i], actionKey: i })),
+        renderItem: (i) => /* @__PURE__ */ n.createElement("li", { key: i.actionKey }, /* @__PURE__ */ n.createElement(
+          Je,
+          {
+            onClick: () => {
+              l("action", i.actionKey);
+            }
+          },
+          i.label
+        ))
       }
-    }, i.label))
-  })));
+    ))
+  );
 }, ge = () => {
   const e = me((c) => {
     c && setTimeout(() => {
@@ -958,32 +969,19 @@ const Re = ({ className: e }) => {
     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) => {
+  } = 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) => {
     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(Lt, x(g({}, c), {
-      ref: e
-    })));
-  }) : null, u(), l && /* @__PURE__ */ n.createElement(W, null, /* @__PURE__ */ n.createElement(ne, {
-    ref: e
-  }))), /* @__PURE__ */ n.createElement(De, null));
+    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(Lt, x(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`
     display: flex;
     flex-direction: column;
@@ -1039,35 +1037,52 @@ const Re = ({ className: e }) => {
   const t = Te(null);
   return ce(() => {
     t.current && t.current.parentNode && e("overlay-mounted", t.current);
-  }, [t]), /* @__PURE__ */ n.createElement(ie, {
-    portalId: "humany-conversation-overlay-portal",
-    className: "humany-conversation-overlay-outlet",
-    ref: t
-  });
+  }, [t]), /* @__PURE__ */ n.createElement(
+    ie,
+    {
+      portalId: "humany-conversation-overlay-portal",
+      className: "humany-conversation-overlay-outlet",
+      ref: t
+    }
+  );
 }, Tt = ({
   dispatch: e,
   header: t,
   buttonLabel: r
-}) => /* @__PURE__ */ n.createElement(It, {
-  portalId: "humany-conversation-portal",
-  className: "humany-conversation-outlet"
-}, /* @__PURE__ */ n.createElement(At, {
-  className: "humany-conversation-outlet-head"
-}, /* @__PURE__ */ n.createElement(Bt, {
-  className: "humany-conversation-outlet-head-button",
-  "aria-label": r,
-  title: r,
-  onClick: () => e("hide-overlay-conversation")
-}, /* @__PURE__ */ n.createElement(w, {
-  symbol: {
-    type: "Svg",
-    content: "caret-down"
+}) => /* @__PURE__ */ n.createElement(
+  It,
+  {
+    portalId: "humany-conversation-portal",
+    className: "humany-conversation-outlet"
   },
-  size: 20
-})), t && /* @__PURE__ */ n.createElement(Rt, {
-  className: "humany-conversation-outlet-header",
-  variant: "h1"
-}, t)), /* @__PURE__ */ n.createElement(ge, null)), It = a(ie)`
+  /* @__PURE__ */ n.createElement(At, { className: "humany-conversation-outlet-head" }, /* @__PURE__ */ n.createElement(
+    Bt,
+    {
+      className: "humany-conversation-outlet-head-button",
+      "aria-label": r,
+      title: r,
+      onClick: () => e("hide-overlay-conversation")
+    },
+    /* @__PURE__ */ n.createElement(
+      w,
+      {
+        symbol: {
+          type: "Svg",
+          content: "caret-down"
+        },
+        size: 20
+      }
+    )
+  ), t && /* @__PURE__ */ n.createElement(
+    Rt,
+    {
+      className: "humany-conversation-outlet-header",
+      variant: "h1"
+    },
+    t
+  )),
+  /* @__PURE__ */ n.createElement(ge, null)
+), It = a(ie)`
     z-index: 11;
     top: auto;
     height: 65%;
@@ -1137,17 +1152,27 @@ const Re = ({ className: e }) => {
     overlayConversationCloseLabel: u,
     conversationControllerId: c
   } = L(), h = V();
-  return /* @__PURE__ */ n.createElement(Le.Provider, {
-    value: c ? { id: c } : null
-  }, /* @__PURE__ */ n.createElement(Kt, x(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, {
-    dispatch: h,
-    header: s,
-    buttonLabel: u
-  })));
+  return /* @__PURE__ */ n.createElement(
+    Le.Provider,
+    {
+      value: c ? { id: c } : null
+    },
+    /* @__PURE__ */ n.createElement(
+      Kt,
+      x(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,
+      {
+        dispatch: h,
+        header: s,
+        buttonLabel: u
+      }
+    ))
+  );
 }, Kt = a.div`
     position: absolute;
     right: 0;
@@ -1161,4 +1186,4 @@ const Re = ({ className: e }) => {
 export {
   Yt as default
 };
-//# sourceMappingURL=conversation.4bd3eedd.js.map
+//# sourceMappingURL=conversation.bc31361a.js.map