@useago/sdk 0.3.4 → 0.4.2

package/dist/widget.js

@@ -1,42 +1,43 @@
-import { t as X } from "./AgoClient-DF7M2WAz.js";
-import { t as Z } from "./createFormCollector-ClzHfaBd.js";
-var G = '"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
-function m(l, o) {
-  Object.assign(l.style, o);
+import { t as re } from "./AgoClient-rvTz2thR.js";
+import { t as ae } from "./createFormCollector-BwvkKi48.js";
+import { t as ie } from "./createConversationSession-D9FesBQS.js";
+var Y = '"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+function x(s, n) {
+  Object.assign(s.style, n);
 }
-function c(l = {}) {
-  const o = document.createElement("div");
-  return m(o, l), o;
+function c(s = {}) {
+  const n = document.createElement("div");
+  return x(n, s), n;
 }
-var P = "ago-chat-widget-keyframes";
-function ee() {
-  if (typeof document > "u" || document.getElementById(P)) return;
-  const l = document.createElement("style");
-  l.id = P, l.textContent = "@keyframes ago-pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }", document.head.appendChild(l);
+var V = "ago-chat-widget-keyframes";
+function se() {
+  if (typeof document > "u" || document.getElementById(V)) return;
+  const s = document.createElement("style");
+  s.id = V, s.textContent = "@keyframes ago-pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } }", document.head.appendChild(s);
 }
-function te(l) {
-  const o = typeof l == "string" ? document.querySelector(l) : l;
-  if (!o) throw new Error(`mountChatWidget: target "${String(l)}" not found.`);
-  return o;
+function le(s) {
+  const n = typeof s == "string" ? document.querySelector(s) : s;
+  if (!n) throw new Error(`mountChatWidget: target "${String(s)}" not found.`);
+  return n;
 }
-function ae(l, o) {
-  const { title: w = "Chat", welcomeMessage: I = "Hello! How can I help you today?", placeholder: R = "Type a message...", allowFiles: u = !1, height: x = 500, logoUrl: f, showAgentName: b = !1, forms: _, onFollowUpClick: k, onMessageSent: D, onMessageReceived: s } = o;
-  if (!o.client && !o.config?.baseUrl) throw new Error("mountChatWidget requires either `client` or `config` (with a baseUrl).");
-  const i = o.client ?? new X(o.config), z = te(l);
-  let g = o.conversationId, n = [], y = !1, v = null;
-  const N = c({
+function ue(s, n) {
+  const { title: v = "Chat", welcomeMessage: _ = "Hello! How can I help you today?", placeholder: N = "Type a message...", allowFiles: g = !1, height: m = 500, logoUrl: f, showAgentName: b = !1, loadThreads: I = !1, forms: A, onFollowUpClick: R, onMessageSent: i, onMessageReceived: C } = n;
+  if (!n.client && !n.config?.baseUrl) throw new Error("mountChatWidget requires either `client` or `config` (with a baseUrl).");
+  const l = n.client ?? new re(n.config), L = le(s), y = n.persistConversation, D = y ? ie(y === !0 ? {} : y) : void 0;
+  let u = n.conversationId ?? D?.getLastActiveThread() ?? void 0, o = [], k = !1, z = null;
+  const T = [], W = c({
     display: "flex",
     flexDirection: "column",
-    height: typeof x == "number" ? `${x}px` : x,
+    height: typeof m == "number" ? `${m}px` : m,
     border: "1px solid #dee3e8",
     borderRadius: "16px",
     overflow: "hidden",
     backgroundColor: "#fff",
-    fontFamily: G,
+    fontFamily: Y,
     boxShadow: "rgba(15, 15, 15, 0.08) 0px 2px 16px 0px"
   });
-  N.className = "ago-chat-widget";
-  const W = c({
+  W.className = "ago-chat-widget";
+  const F = c({
     padding: "14px 16px",
     borderBottom: "1px solid #dee3e8",
     backgroundColor: "#03182f",
@@ -45,19 +46,19 @@ function ae(l, o) {
     alignItems: "center",
     gap: "10px"
   });
-  if (W.className = "ago-chat-widget__header", f) {
+  if (F.className = "ago-chat-widget__header", f) {
     const e = document.createElement("img");
-    e.src = f, e.alt = "Logo", m(e, {
+    e.src = f, e.alt = "Logo", x(e, {
       height: "24px",
       width: "auto"
-    }), W.appendChild(e);
+    }), F.appendChild(e);
   }
-  const F = document.createElement("h3");
-  F.textContent = w, m(F, {
+  const M = document.createElement("h3");
+  M.textContent = v, x(M, {
     margin: "0",
     fontSize: "15px",
     fontWeight: "600"
-  }), W.appendChild(F);
+  }), F.appendChild(M);
   const E = c({
     flex: "1",
     overflow: "auto",
@@ -65,18 +66,18 @@ function ae(l, o) {
     backgroundColor: "#fbfbfb"
   });
   E.className = "ago-chat-widget__messages";
-  const { inputRow: K, setDisabled: j, focus: q } = ne({
-    placeholder: R,
-    allowFiles: u,
+  const { inputRow: J, setDisabled: Q, focus: X } = de({
+    placeholder: N,
+    allowFiles: g,
     onSend: (e, t) => {
-      L(e, t);
+      H(e, t);
     }
   });
-  ee(), N.append(W, E, K), z.appendChild(N);
-  const U = k !== !1, A = k === !1 ? void 0 : k ?? ((e) => {
-    L(e);
+  se(), W.append(F, E, J), L.appendChild(W);
+  const O = R !== !1, $ = R === !1 ? void 0 : R ?? ((e) => {
+    H(e);
   });
-  function V(e) {
+  function Z(e) {
     const t = e.role === "user", d = c({
       display: "flex",
       flexDirection: "column",
@@ -84,17 +85,17 @@ function ae(l, o) {
       marginBottom: "16px"
     });
     if (d.className = `ago-message ago-message--${e.role}`, !t && b && e.agent) {
-      const a = c({
+      const r = c({
         fontSize: "13px",
         fontWeight: "500",
         color: "#30373e",
         marginBottom: "6px",
         padding: "0 4px"
       });
-      a.className = "ago-message__agent", a.textContent = e.agent.displayName || e.agent.name, d.appendChild(a);
+      r.className = "ago-message__agent", r.textContent = e.agent.displayName || e.agent.name, d.appendChild(r);
     }
     if (!t && e.sources && e.sources.length > 0) {
-      const a = c({
+      const r = c({
         display: "grid",
         gridTemplateColumns: "1fr 1fr",
         gap: "6px",
@@ -102,9 +103,9 @@ function ae(l, o) {
         width: "100%",
         maxWidth: "85%"
       });
-      a.className = "ago-message__sources", e.sources.forEach((p, r) => {
-        const C = p.url ? document.createElement("a") : document.createElement("div");
-        p.url && C instanceof HTMLAnchorElement && (C.href = p.url, C.target = "_blank", C.rel = "noopener noreferrer"), m(C, {
+      r.className = "ago-message__sources", e.sources.forEach((p, a) => {
+        const w = p.url ? document.createElement("a") : document.createElement("div");
+        p.url && w instanceof HTMLAnchorElement && (w.href = p.url, w.target = "_blank", w.rel = "noopener noreferrer"), x(w, {
           display: "flex",
           alignItems: "center",
           gap: "8px",
@@ -117,7 +118,7 @@ function ae(l, o) {
           fontSize: "12px",
           overflow: "hidden"
         });
-        const $ = c({
+        const q = c({
           flexShrink: "0",
           width: "18px",
           height: "18px",
@@ -131,14 +132,14 @@ function ae(l, o) {
           justifyContent: "center",
           backgroundColor: "#f0f4ff"
         });
-        $.textContent = String(r + 1);
-        const M = c({
+        q.textContent = String(a + 1);
+        const B = c({
           overflow: "hidden",
           textOverflow: "ellipsis",
           whiteSpace: "nowrap"
         });
-        M.textContent = p.title, M.title = p.title, C.append($, M), a.appendChild(C);
-      }), d.appendChild(a);
+        B.textContent = p.title, B.title = p.title, w.append(q, B), r.appendChild(w);
+      }), d.appendChild(r);
     }
     const h = c({
       maxWidth: t ? "75%" : "100%",
@@ -151,37 +152,37 @@ function ae(l, o) {
       lineHeight: "1.6",
       whiteSpace: "pre-wrap"
     });
-    if (h.className = "ago-message__content", e.content ? h.textContent = e.content : e.status === "IN_PROGRESS" && h.appendChild(Q()), d.appendChild(h), e.followUpReplies && e.followUpReplies.length > 0) {
-      const a = c({
+    if (h.className = "ago-message__content", e.content ? h.textContent = e.content : e.status === "IN_PROGRESS" && h.appendChild(oe()), d.appendChild(h), e.followUpReplies && e.followUpReplies.length > 0) {
+      const r = c({
         display: "flex",
         flexWrap: "wrap",
         gap: "8px",
         marginTop: "10px"
       });
-      a.className = "ago-message__followups";
+      r.className = "ago-message__followups";
       for (const p of e.followUpReplies) {
-        const r = document.createElement("button");
-        r.type = "button", r.className = "ago-message__followup-btn", r.textContent = p, r.disabled = !U, m(r, {
+        const a = document.createElement("button");
+        a.type = "button", a.className = "ago-message__followup-btn", a.textContent = p, a.disabled = !O, x(a, {
           padding: "6px 14px",
           fontSize: "13px",
           borderRadius: "16px",
           border: "1px solid #dee3e8",
           backgroundColor: "#fff",
           color: "#30373e",
-          cursor: U ? "pointer" : "default",
+          cursor: O ? "pointer" : "default",
           transition: "border-color 0.15s"
-        }), A && r.addEventListener("click", () => A(p)), r.addEventListener("mouseenter", () => {
-          r.style.borderColor = "#1b5fc4";
-        }), r.addEventListener("mouseleave", () => {
-          r.style.borderColor = "#dee3e8";
-        }), a.appendChild(r);
+        }), $ && a.addEventListener("click", () => $(p)), a.addEventListener("mouseenter", () => {
+          a.style.borderColor = "#1b5fc4";
+        }), a.addEventListener("mouseleave", () => {
+          a.style.borderColor = "#dee3e8";
+        }), r.appendChild(a);
       }
-      d.appendChild(a);
+      d.appendChild(r);
     }
     return d;
   }
   function S() {
-    if (E.replaceChildren(), n.length === 0) {
+    if (E.replaceChildren(), o.length === 0) {
       const e = c({
         textAlign: "center",
         color: "#6b6d6f",
@@ -189,9 +190,9 @@ function ae(l, o) {
         fontSize: "14px",
         lineHeight: "1.5"
       });
-      e.textContent = I, E.appendChild(e);
-    } else for (const e of n) E.appendChild(V(e));
-    if (v) {
+      e.textContent = _, E.appendChild(e);
+    } else for (const e of o) E.appendChild(Z(e));
+    if (z) {
       const e = c({
         padding: "10px 14px",
         backgroundColor: "#fef2f2",
@@ -201,77 +202,96 @@ function ae(l, o) {
         fontSize: "13px",
         border: "1px solid #fecaca"
       });
-      e.textContent = v, E.appendChild(e);
+      e.textContent = z, E.appendChild(e);
     }
-    E.scrollTop = E.scrollHeight, j(y);
+    E.scrollTop = E.scrollHeight, Q(k);
   }
-  function Y() {
-    for (let e = n.length - 1; e >= 0; e--) {
-      const t = n[e];
+  function ee() {
+    for (let e = o.length - 1; e >= 0; e--) {
+      const t = o[e];
       if (t.role === "assistant" && t.status === "IN_PROGRESS") return t;
     }
   }
-  const B = (e) => {
-    g || (g = e.conversationId);
-  }, H = (e) => {
-    const t = Y();
+  const P = (e) => {
+    u || (u = e.conversationId);
+  }, G = (e) => {
+    const t = ee();
     t && (t.content += e.content, S());
-  }, O = (e) => {
-    const t = n.findIndex((d) => d.id === e.id || d.role === "assistant" && d.status === "IN_PROGRESS");
-    t >= 0 ? n[t] = e : n.push(e), y = !1, S(), e.status === "DONE" && s?.({
+  }, K = (e) => {
+    const t = o.findIndex((d) => d.id === e.id || d.role === "assistant" && d.status === "IN_PROGRESS");
+    t >= 0 ? o[t] = e : o.push(e), k = !1, S(), e.status === "DONE" && C?.({
       id: e.id,
       content: e.content
     });
-  }, T = (e) => {
-    v = e.error, y = !1, n = n.filter((t) => !t.id.startsWith("temp-")), S();
+  }, j = (e) => {
+    z = e.error, k = !1, o = o.filter((t) => !t.id.startsWith("temp-")), S();
   };
-  i.on("message:start", B), i.on("message:chunk", H), i.on("message:complete", O), i.on("message:error", T);
-  const J = (_ ?? []).map((e) => Z(e).install(i));
-  async function L(e, t) {
+  l.on("message:start", P), l.on("message:chunk", G), l.on("message:complete", K), l.on("message:error", j);
+  const te = (A ?? []).map((e) => ae(e).install(l));
+  async function H(e, t) {
     const d = e.trim();
-    if (!d && !t?.length || y) return;
-    D?.(d), y = !0, v = null;
+    if (!d && !t?.length || k) return;
+    i?.(d), k = !0, z = null;
     const h = Date.now();
-    n.push({
+    o.push({
       id: `temp-user-${h}`,
-      conversationId: g || "",
+      conversationId: u || "",
       content: d,
       role: "user",
       status: "DONE",
       createdAt: /* @__PURE__ */ new Date()
-    }), n.push({
+    }), o.push({
       id: `temp-assistant-${h}`,
-      conversationId: g || "",
+      conversationId: u || "",
       content: "",
       role: "assistant",
       status: "IN_PROGRESS",
       createdAt: /* @__PURE__ */ new Date()
     }), S();
     try {
-      const a = await i.sendMessage(d, {
-        conversationId: g,
+      const r = await l.sendMessage(d, {
+        conversationId: u,
         files: t
       });
-      a.conversationId && !g && (g = a.conversationId);
-      const p = n.find((r) => r.id === `temp-user-${h}`);
-      if (p && (p.id = `user-${h}`, p.conversationId = a.conversationId), !n.some((r) => r.id === a.id)) {
-        const r = n.findIndex((C) => C.id === `temp-assistant-${h}`);
-        r >= 0 ? n[r] = a : n.push(a);
+      r.conversationId && (u || (u = r.conversationId), D?.setActiveThread(r.conversationId, r.createdAt));
+      const p = o.find((a) => a.id === `temp-user-${h}`);
+      if (p && (p.id = `user-${h}`, p.conversationId = r.conversationId), !o.some((a) => a.id === r.id)) {
+        const a = o.findIndex((w) => w.id === `temp-assistant-${h}`);
+        a >= 0 ? o[a] = r : o.push(r);
       }
-      n = n.filter((r) => !r.id.startsWith("temp-")), y = !1, S();
-    } catch (a) {
-      v = a instanceof Error ? a.message : "Failed to send message", y = !1, n = n.filter((p) => !p.id.startsWith("temp-")), S();
+      o = o.filter((a) => !a.id.startsWith("temp-")), k = !1, S(), I && U();
+    } catch (r) {
+      z = r instanceof Error ? r.message : "Failed to send message", k = !1, o = o.filter((p) => !p.id.startsWith("temp-")), S();
     }
   }
-  return S(), q(), {
-    client: i,
-    element: N,
-    sendMessage: L,
+  async function U() {
+    try {
+      const e = await l.getConversations();
+      T.splice(0, T.length, ...e);
+    } catch {
+    }
+    return T;
+  }
+  async function ne(e) {
+    try {
+      const t = (await l.getConversation(e))?.messages ?? [];
+      t.length > 0 && o.length === 0 && (o = t, S());
+    } catch {
+      o.length === 0 && (D?.clear(), u = void 0);
+    }
+  }
+  return S(), X(), u && ne(u), I && U(), {
+    client: l,
+    element: W,
+    sendMessage: H,
+    session: D,
+    threads: T,
+    refreshThreads: U,
     destroy() {
-      i.off("message:start", B), i.off("message:chunk", H), i.off("message:complete", O), i.off("message:error", T), J.forEach((e) => e()), N.remove(), o.client || i.destroy();
+      l.off("message:start", P), l.off("message:chunk", G), l.off("message:complete", K), l.off("message:error", j), te.forEach((e) => e()), W.remove(), n.client || l.destroy();
     }
   };
-  function Q() {
+  function oe() {
     const e = c({
       display: "flex",
       gap: "4px",
@@ -291,40 +311,40 @@ function ae(l, o) {
     return e;
   }
 }
-function ne(l) {
-  let o = [];
-  const w = document.createElement("form");
-  m(w, {
+function de(s) {
+  let n = [];
+  const v = document.createElement("form");
+  x(v, {
     display: "flex",
     flexDirection: "column",
     gap: "8px",
     padding: "12px",
     borderTop: "1px solid #dee3e8",
     backgroundColor: "#fff"
-  }), w.className = "ago-chat-input";
-  const I = c({
+  }), v.className = "ago-chat-input";
+  const _ = c({
     display: "flex",
     flexWrap: "wrap",
     gap: "6px"
-  }), R = c({
+  }), N = c({
     display: "flex",
     gap: "8px",
     alignItems: "flex-end"
-  }), u = document.createElement("textarea");
-  u.placeholder = l.placeholder, u.rows = 1, m(u, {
+  }), g = document.createElement("textarea");
+  g.placeholder = s.placeholder, g.rows = 1, x(g, {
     flex: "1",
     resize: "none",
     padding: "10px 12px",
     border: "1px solid #dee3e8",
     borderRadius: "12px",
     fontSize: "14px",
-    fontFamily: G,
+    fontFamily: Y,
     lineHeight: "1.4",
     maxHeight: "120px",
     outline: "none"
   });
-  const x = document.createElement("button");
-  x.type = "submit", x.textContent = "Send", m(x, {
+  const m = document.createElement("button");
+  m.type = "submit", m.textContent = "Send", x(m, {
     padding: "10px 16px",
     border: "none",
     borderRadius: "12px",
@@ -335,7 +355,7 @@ function ne(l) {
     cursor: "pointer"
   });
   let f = null, b = null;
-  l.allowFiles && (f = document.createElement("input"), f.type = "file", f.multiple = !0, m(f, { display: "none" }), b = document.createElement("button"), b.type = "button", b.textContent = "📎", m(b, {
+  s.allowFiles && (f = document.createElement("input"), f.type = "file", f.multiple = !0, x(f, { display: "none" }), b = document.createElement("button"), b.type = "button", b.textContent = "📎", x(b, {
     padding: "10px 12px",
     border: "1px solid #dee3e8",
     borderRadius: "12px",
@@ -343,11 +363,11 @@ function ne(l) {
     cursor: "pointer",
     fontSize: "14px"
   }), b.addEventListener("click", () => f?.click()), f.addEventListener("change", () => {
-    o = [...o, ...Array.from(f?.files ?? [])], _();
+    n = [...n, ...Array.from(f?.files ?? [])], I();
   }));
-  function _() {
-    I.replaceChildren(), o.forEach((s, i) => {
-      const z = c({
+  function I() {
+    _.replaceChildren(), n.forEach((i, C) => {
+      const l = c({
         display: "flex",
         alignItems: "center",
         gap: "4px",
@@ -356,43 +376,43 @@ function ne(l) {
         border: "1px solid #dee3e8",
         borderRadius: "8px",
         fontSize: "12px"
-      }), g = document.createElement("span");
-      g.textContent = s.name;
-      const n = document.createElement("button");
-      n.type = "button", n.textContent = "×", m(n, {
+      }), L = document.createElement("span");
+      L.textContent = i.name;
+      const y = document.createElement("button");
+      y.type = "button", y.textContent = "×", x(y, {
         border: "none",
         background: "transparent",
         cursor: "pointer",
         fontSize: "14px",
         lineHeight: "1"
-      }), n.addEventListener("click", () => {
-        o = o.filter((y, v) => v !== i), _();
-      }), z.append(g, n), I.appendChild(z);
+      }), y.addEventListener("click", () => {
+        n = n.filter((D, u) => u !== C), I();
+      }), l.append(L, y), _.appendChild(l);
     });
   }
-  const k = () => {
-    const s = u.value, i = o;
-    return u.value = "", o = [], _(), {
-      content: s,
-      files: i
+  const A = () => {
+    const i = g.value, C = n;
+    return g.value = "", n = [], I(), {
+      content: i,
+      files: C
     };
-  }, D = () => {
-    const { content: s, files: i } = k();
-    (s.trim() || i.length > 0) && l.onSend(s.trim(), i.length > 0 ? i : void 0);
+  }, R = () => {
+    const { content: i, files: C } = A();
+    (i.trim() || C.length > 0) && s.onSend(i.trim(), C.length > 0 ? C : void 0);
   };
-  return w.addEventListener("submit", (s) => {
-    s.preventDefault(), D();
-  }), u.addEventListener("keydown", (s) => {
-    s.key === "Enter" && !s.shiftKey && (s.preventDefault(), D());
-  }), b && R.appendChild(b), R.append(u, x), f && w.appendChild(f), w.append(I, R), {
-    inputRow: w,
-    getValueAndClear: k,
-    setDisabled: (s) => {
-      u.disabled = s, x.disabled = s, x.style.opacity = s ? "0.6" : "1", x.style.cursor = s ? "not-allowed" : "pointer";
+  return v.addEventListener("submit", (i) => {
+    i.preventDefault(), R();
+  }), g.addEventListener("keydown", (i) => {
+    i.key === "Enter" && !i.shiftKey && (i.preventDefault(), R());
+  }), b && N.appendChild(b), N.append(g, m), f && v.appendChild(f), v.append(_, N), {
+    inputRow: v,
+    getValueAndClear: A,
+    setDisabled: (i) => {
+      g.disabled = i, m.disabled = i, m.style.opacity = i ? "0.6" : "1", m.style.cursor = i ? "not-allowed" : "pointer";
     },
-    focus: () => u.focus()
+    focus: () => g.focus()
   };
 }
 export {
-  ae as mountChatWidget
+  ue as mountChatWidget
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@useago/sdk",
-  "version": "0.3.4",
+  "version": "0.4.2",
   "description": "JavaScript SDK for AGO Chat integration",
   "type": "module",
   "sideEffects": false,
@@ -9,32 +9,74 @@
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "import": { "types": "./dist/index.d.ts", "default": "./dist/index.js" },
-      "require": { "types": "./dist/index.d.cts", "default": "./dist/index.cjs" }
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./react": {
-      "import": { "types": "./dist/react.d.ts", "default": "./dist/react.js" },
-      "require": { "types": "./dist/react.d.cts", "default": "./dist/react.cjs" }
+      "import": {
+        "types": "./dist/react.d.ts",
+        "default": "./dist/react.js"
+      },
+      "require": {
+        "types": "./dist/react.d.cts",
+        "default": "./dist/react.cjs"
+      }
     },
     "./vue": {
-      "import": { "types": "./dist/vue.d.ts", "default": "./dist/vue.js" },
-      "require": { "types": "./dist/vue.d.cts", "default": "./dist/vue.cjs" }
+      "import": {
+        "types": "./dist/vue.d.ts",
+        "default": "./dist/vue.js"
+      },
+      "require": {
+        "types": "./dist/vue.d.cts",
+        "default": "./dist/vue.cjs"
+      }
     },
     "./angular": {
-      "import": { "types": "./dist/angular.d.ts", "default": "./dist/angular.js" },
-      "require": { "types": "./dist/angular.d.cts", "default": "./dist/angular.cjs" }
+      "import": {
+        "types": "./dist/angular.d.ts",
+        "default": "./dist/angular.js"
+      },
+      "require": {
+        "types": "./dist/angular.d.cts",
+        "default": "./dist/angular.cjs"
+      }
     },
     "./helpers": {
-      "import": { "types": "./dist/helpers.d.ts", "default": "./dist/helpers.js" },
-      "require": { "types": "./dist/helpers.d.cts", "default": "./dist/helpers.cjs" }
+      "import": {
+        "types": "./dist/helpers.d.ts",
+        "default": "./dist/helpers.js"
+      },
+      "require": {
+        "types": "./dist/helpers.d.cts",
+        "default": "./dist/helpers.cjs"
+      }
     },
     "./widget": {
-      "import": { "types": "./dist/widget.d.ts", "default": "./dist/widget.js" },
-      "require": { "types": "./dist/widget.d.cts", "default": "./dist/widget.cjs" }
+      "import": {
+        "types": "./dist/widget.d.ts",
+        "default": "./dist/widget.js"
+      },
+      "require": {
+        "types": "./dist/widget.d.cts",
+        "default": "./dist/widget.cjs"
+      }
     },
     "./devtools": {
-      "import": { "types": "./dist/devtools.d.ts", "default": "./dist/devtools.js" },
-      "require": { "types": "./dist/devtools.d.cts", "default": "./dist/devtools.cjs" }
+      "import": {
+        "types": "./dist/devtools.d.ts",
+        "default": "./dist/devtools.js"
+      },
+      "require": {
+        "types": "./dist/devtools.d.cts",
+        "default": "./dist/devtools.cjs"
+      }
     }
   },
   "publishConfig": {
@@ -94,6 +136,7 @@
     "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
+    "esbuild": "^0.28.0",
     "eslint": "^8.0.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "jsdom": "^28.0.0",