@zeroweight/react 0.2.35 → 0.2.36

package/dist/zeroweight-renderer-react.es.js

@@ -1,147 +1,147 @@
-import { useMemo as be, useRef as x, useState as k, useCallback as S, useEffect as h } from "react";
+import { useMemo as be, useRef as x, useState as k, useCallback as S, useEffect as m } from "react";
 import { ZeroWeightRenderer as Se, ActionQueue as ke, VoiceActivityDetector as xe } from "@zeroweight/renderer";
-import { jsxs as w, jsx as i, Fragment as j } from "react/jsx-runtime";
-import { useVoiceAssistant as we, useLocalParticipant as Ae, useIsSpeaking as Te, useDataChannel as Ie, RoomAudioRenderer as Me, LiveKitRoom as Ce } from "@livekit/components-react";
+import { jsxs as A, jsx as r, Fragment as j } from "react/jsx-runtime";
+import { useVoiceAssistant as Ae, useLocalParticipant as we, useIsSpeaking as Te, useDataChannel as Ie, RoomAudioRenderer as Me, LiveKitRoom as Ce } from "@livekit/components-react";
 import "@livekit/components-styles";
 import { Loader2 as J, MicOff as Re, Mic as Ee, Power as Le, Activity as De } from "lucide-react";
 const ze = 3e4, Ue = 120, Pe = "wss://prod-project-pazuyq69.livekit.cloud", ne = "https://api.zeroweight.ai/api/v1", $e = () => {
-  const l = ["Happy", "Swift", "Bright", "Cool", "Smart"], a = ["User", "Guest", "Visitor", "Agent", "Caller"], e = Math.floor(Math.random() * 1e3);
-  return `${l[Math.floor(Math.random() * l.length)]}${a[Math.floor(Math.random() * a.length)]}${e}`;
+  const d = ["Happy", "Swift", "Bright", "Cool", "Smart"], o = ["User", "Guest", "Visitor", "Agent", "Caller"], e = Math.floor(Math.random() * 1e3);
+  return `${d[Math.floor(Math.random() * d.length)]}${o[Math.floor(Math.random() * o.length)]}${e}`;
 };
-function Fe(l) {
+function Fe(d) {
   const {
-    avatarId: a,
+    avatarId: o,
     apiKey: e = null,
-    api: d,
+    api: f,
     turnOffMicWhenAISpeaking: v = !0,
-    livekitUrl: A = Pe,
-    sessionDuration: f = Ue,
-    inactivityTimeout: M = ze
-  } = l, D = A, y = be(() => {
-    if (d) return d;
+    livekitUrl: w = Pe,
+    sessionDuration: p = Ue,
+    inactivityTimeout: T = ze
+  } = d, L = w, y = be(() => {
+    if (f) return f;
     const t = e ? { "X-ZW-Api-Key": e } : void 0;
     return {
-      getBundle: async (g) => {
-        const T = await fetch(
+      getBundle: async (h) => {
+        const I = await fetch(
           `${ne}/avatars/bundle/${encodeURIComponent(
-            g
+            h
           )}`,
           { headers: t }
         );
-        if (!T.ok)
+        if (!I.ok)
           throw new Error(
-            `Failed to fetch avatar bundle (${T.status} ${T.statusText})`
+            `Failed to fetch avatar bundle (${I.status} ${I.statusText})`
           );
-        return T.json();
+        return I.json();
       },
-      getLiveKitToken: async (g) => {
-        const T = new URLSearchParams({
-          avatar_id: g,
+      getLiveKitToken: async (h) => {
+        const I = new URLSearchParams({
+          avatar_id: h,
           name: $e()
-        }), c = await fetch(
-          `${ne}/livekit/getToken?${T.toString()}`,
+        }), u = await fetch(
+          `${ne}/livekit/getToken?${I.toString()}`,
           { headers: t }
         );
-        if (!c.ok)
+        if (!u.ok)
           throw new Error(
-            `Failed to fetch LiveKit token (${c.status} ${c.statusText})`
+            `Failed to fetch LiveKit token (${u.status} ${u.statusText})`
           );
-        return c.json();
+        return u.json();
       }
     };
-  }, [d, e]), m = x(null), E = x(null), r = x(null), u = x(null), [b, C] = k("idle"), [p, U] = k(null), [s, $] = k(
+  }, [f, e]), b = x(null), R = x(null), a = x(null), i = x(null), [g, D] = k("idle"), [l, U] = k(null), [s, $] = k(
     /* @__PURE__ */ new Set(["listening"])
-  ), [n, o] = k({
+  ), [n, c] = k({
     listening: { kind: "looped" },
     speaking: { kind: "looped" }
-  }), [_, z] = k(!1), [P, O] = k(null), [N, K] = k(!1), [W, Z] = k(!1), [ae, V] = k(f), R = x(null), B = x(() => {
-  }), [oe, G] = k(!1), [se, X] = k(0.8), L = x(null), H = b === "ready", Y = S(() => {
-    const t = m.current;
+  }), [_, z] = k(!1), [P, O] = k(null), [N, K] = k(!1), [W, Z] = k(!1), [ae, V] = k(p), C = x(null), B = x(() => {
+  }), [oe, G] = k(!1), [se, X] = k(0.8), E = x(null), H = g === "ready", Y = S(() => {
+    const t = b.current;
     if (!t) return null;
-    let g = t.querySelector("canvas");
-    return g || (g = document.createElement("canvas"), g.style.width = "100%", g.style.height = "100%", g.style.display = "block", t.appendChild(g)), E.current = g, g;
+    let h = t.querySelector("canvas");
+    return h || (h = document.createElement("canvas"), h.style.width = "100%", h.style.height = "100%", h.style.display = "block", t.appendChild(h)), R.current = h, h;
   }, []);
-  h(() => {
+  m(() => {
     let t = !1;
     return (async () => {
-      const T = Y();
-      if (!T) return;
-      const c = new Se();
-      r.current = c;
-      const q = new ke((I, F) => {
-        c.play(I, F);
+      const I = Y();
+      if (!I) return;
+      const u = new Se();
+      a.current = u;
+      const q = new ke((M, F) => {
+        u.play(M, F);
       });
-      u.current = q, c.on("stateChanged", (I) => {
-        t || C(I);
-      }), c.on("dimensions", (I, F) => {
-        t || U({ width: I, height: F });
-      }), c.on("actionLoaded", (I) => {
+      i.current = q, u.on("stateChanged", (M) => {
+        t || D(M);
+      }), u.on("dimensions", (M, F) => {
+        t || U({ width: M, height: F });
+      }), u.on("actionLoaded", (M) => {
         t || $((F) => {
           const te = new Set(F);
-          return te.add(I), te;
+          return te.add(M), te;
         });
-      }), c.on("allActionsLoaded", () => {
+      }), u.on("allActionsLoaded", () => {
         t || z(!1);
-      }), c.on("ready", () => {
-        t || (o(c.getActionMetadata()), q.setActionMetadata(c.getActionMetadata()));
+      }), u.on("ready", () => {
+        t || (c(u.getActionMetadata()), q.setActionMetadata(u.getActionMetadata()));
       });
       try {
         z(!0);
-        const I = await y.getBundle(a);
-        if (t || (await c.init(T, { payload: I.payload }), t)) return;
-        o(c.getActionMetadata()), q.setActionMetadata(c.getActionMetadata());
-      } catch (I) {
-        console.error("[useAvatarSession] Init failed:", I);
+        const M = await y.getBundle(o);
+        if (t || (await u.init(I, { payload: M.payload }), t)) return;
+        c(u.getActionMetadata()), q.setActionMetadata(u.getActionMetadata());
+      } catch (M) {
+        console.error("[useAvatarSession] Init failed:", M);
       }
     })(), () => {
-      t = !0, r.current?.destroy(), r.current = null, u.current = null;
+      t = !0, a.current?.destroy(), a.current = null, i.current = null;
     };
-  }, [a, Y, y]);
+  }, [o, Y, y]);
   const ee = x(!1);
-  h(() => {
-    H && r.current && s.has("wave_hand") && !ee.current && (r.current.play("wave_hand", "listening"), ee.current = !0);
+  m(() => {
+    H && a.current && s.has("wave_hand") && !ee.current && (a.current.play("wave_hand", "listening"), ee.current = !0);
   }, [H, s]);
   const ce = S(async () => {
     if (!(N || W)) {
       K(!0);
       try {
         await navigator.mediaDevices.getUserMedia({ audio: !0 });
-        const t = await y.getLiveKitToken(a);
+        const t = await y.getLiveKitToken(o);
         O(t.token);
       } catch (t) {
         console.error("[useAvatarSession] Failed to connect:", t), K(!1);
       }
     }
-  }, [N, W, a, y]), Q = S(() => {
-    R.current && (clearInterval(R.current), R.current = null), V(f), L.current && (clearTimeout(L.current), L.current = null), O(null), Z(!1), K(!1), u.current?.forceListening();
-  }, [f]);
-  h(() => {
+  }, [N, W, o, y]), Q = S(() => {
+    C.current && (clearInterval(C.current), C.current = null), V(p), E.current && (clearTimeout(E.current), E.current = null), O(null), Z(!1), K(!1), i.current?.forceListening();
+  }, [p]);
+  m(() => {
     B.current = Q;
   }, [Q]);
   const le = S(() => {
     Z(!0), K(!1);
   }, []), ue = S(() => {
-    R.current && clearInterval(R.current), V(f), R.current = setInterval(() => {
-      V((t) => t <= 1 ? (clearInterval(R.current), R.current = null, setTimeout(() => B.current(), 0), 0) : t - 1);
+    C.current && clearInterval(C.current), V(p), C.current = setInterval(() => {
+      V((t) => t <= 1 ? (clearInterval(C.current), C.current = null, setTimeout(() => B.current(), 0), 0) : t - 1);
     }, 1e3);
-  }, [f]), de = S((t) => {
-    const g = Math.floor(t / 60).toString().padStart(2, "0"), T = (t % 60).toString().padStart(2, "0");
-    return `${g}:${T}`;
+  }, [p]), de = S((t) => {
+    const h = Math.floor(t / 60).toString().padStart(2, "0"), I = (t % 60).toString().padStart(2, "0");
+    return `${h}:${I}`;
   }, []);
-  h(() => () => {
-    R.current && clearInterval(R.current);
+  m(() => () => {
+    C.current && clearInterval(C.current);
   }, []);
   const fe = S(
     (t) => {
       if (!t) {
-        L.current && (clearTimeout(L.current), L.current = null);
+        E.current && (clearTimeout(E.current), E.current = null);
         return;
       }
-      L.current || (L.current = setTimeout(() => {
-        L.current = null, B.current();
-      }, M));
+      E.current || (E.current = setTimeout(() => {
+        E.current = null, B.current();
+      }, T));
     },
-    [M]
+    [T]
   ), pe = S(() => {
     G((t) => !t);
   }, []), ge = S((t) => {
@@ -151,16 +151,16 @@ function Fe(l) {
   }, []), me = S(() => {
     X((t) => t > 0 ? 0 : 1);
   }, []), ve = S(() => {
-    r.current?.interrupt();
+    a.current?.interrupt();
   }, []), ye = S((t) => {
-    r.current?.play(t, "listening");
+    a.current?.play(t, "listening");
   }, []);
   return {
-    containerRef: m,
-    renderer: r.current,
-    actionQueue: u.current,
-    rendererState: b,
-    avatarDimensions: p,
+    containerRef: b,
+    renderer: a.current,
+    actionQueue: i.current,
+    rendererState: g,
+    avatarDimensions: l,
     loadedActions: s,
     actionMetadata: n,
     isLoadingActions: _,
@@ -168,7 +168,7 @@ function Fe(l) {
     token: P,
     isConnecting: N,
     isConnected: W,
-    livekitUrl: D,
+    livekitUrl: L,
     timeRemaining: ae,
     formatTime: de,
     micMuted: oe,
@@ -188,10 +188,10 @@ function Fe(l) {
   };
 }
 const je = ({
-  session: l,
-  style: a,
+  session: d,
+  style: o,
   loadingContent: e
-}) => /* @__PURE__ */ w(
+}) => /* @__PURE__ */ A(
   "div",
   {
     style: {
@@ -205,10 +205,10 @@ const je = ({
       justifyContent: "center",
       alignItems: "center",
       overflow: "hidden",
-      ...a
+      ...o
     },
     children: [
-      /* @__PURE__ */ i("style", { children: `
+      /* @__PURE__ */ r("style", { children: `
         @keyframes zwr-spin {
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
@@ -218,17 +218,17 @@ const je = ({
           50% { opacity: 0.5; }
         }
       ` }),
-      /* @__PURE__ */ i(
+      /* @__PURE__ */ r(
         "div",
         {
-          ref: l.containerRef,
+          ref: d.containerRef,
           style: {
             position: "relative",
             width: "100%",
             height: "100%",
             transition: "all 0.5s ease-in-out"
           },
-          children: !l.isEngineReady && /* @__PURE__ */ i(
+          children: !d.isEngineReady && /* @__PURE__ */ r(
             "div",
             {
               style: {
@@ -241,7 +241,7 @@ const je = ({
                 backdropFilter: "blur(4px)",
                 zIndex: 10
               },
-              children: e || /* @__PURE__ */ w(
+              children: e || /* @__PURE__ */ A(
                 "div",
                 {
                   style: {
@@ -251,7 +251,7 @@ const je = ({
                     gap: 16
                   },
                   children: [
-                    /* @__PURE__ */ i(
+                    /* @__PURE__ */ r(
                       J,
                       {
                         style: {
@@ -262,7 +262,7 @@ const je = ({
                         }
                       }
                     ),
-                    /* @__PURE__ */ i(
+                    /* @__PURE__ */ r(
                       "div",
                       {
                         style: {
@@ -311,40 +311,40 @@ const je = ({
   border: "none",
   cursor: "pointer"
 }, _e = ({
-  session: l,
-  style: a
+  session: d,
+  style: o
 }) => {
   const {
     micMuted: e,
-    toggleMic: d,
+    toggleMic: f,
     isConnected: v,
-    isConnecting: A,
-    isEngineReady: f,
-    loadedActions: M,
-    connect: D,
+    isConnecting: w,
+    isEngineReady: p,
+    loadedActions: T,
+    connect: L,
     disconnect: y
-  } = l, [m, E] = k(!1), [r, u] = k(!1), b = f && M.has("listening") && M.has("speaking"), C = e ? {
+  } = d, [b, R] = k(!1), [a, i] = k(!1), g = p && T.has("listening") && T.has("speaking"), D = e ? {
     ...re,
     background: "rgba(239,68,68,0.1)",
     color: "#f87171",
     boxShadow: "inset 0 0 0 1px rgba(239,68,68,0.3)",
-    ...m ? { background: "rgba(239,68,68,0.2)" } : {}
+    ...b ? { background: "rgba(239,68,68,0.2)" } : {}
   } : {
     ...re,
-    background: m ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.4)",
+    background: b ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.4)",
     color: "#fff",
     boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.1)"
-  }, p = v ? {
+  }, l = v ? {
     ...ie,
-    background: r ? "rgba(239,68,68,0.22)" : "rgba(239,68,68,0.14)",
+    background: a ? "rgba(239,68,68,0.22)" : "rgba(239,68,68,0.14)",
     boxShadow: "inset 0 0 0 1px rgba(239,68,68,0.5), 0 0 20px rgba(239,68,68,0.2)"
   } : {
     ...ie,
     background: "linear-gradient(to right, #7c3aed, #db2777, #f97316)",
     boxShadow: "0 0 30px rgba(236,72,153,0.3)",
-    opacity: r ? 0.9 : 1
+    opacity: a ? 0.9 : 1
   };
-  return (A || !b) && (p.opacity = 0.5, p.cursor = "not-allowed"), /* @__PURE__ */ w(
+  return (w || !g) && (l.opacity = 0.5, l.cursor = "not-allowed"), /* @__PURE__ */ A(
     "div",
     {
       style: {
@@ -355,16 +355,16 @@ const je = ({
         alignItems: "center",
         gap: 16,
         paddingBottom: 16,
-        ...a
+        ...o
       },
       children: [
-        /* @__PURE__ */ i("style", { children: `
+        /* @__PURE__ */ r("style", { children: `
         @keyframes zwr-spin {
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
         }
       ` }),
-        /* @__PURE__ */ w(
+        /* @__PURE__ */ A(
           "div",
           {
             style: {
@@ -377,39 +377,39 @@ const je = ({
               pointerEvents: "auto"
             },
             children: [
-              /* @__PURE__ */ i(
+              /* @__PURE__ */ r(
                 "button",
                 {
                   type: "button",
-                  onClick: d,
-                  onMouseEnter: () => E(!0),
-                  onMouseLeave: () => E(!1),
-                  style: C,
+                  onClick: f,
+                  onMouseEnter: () => R(!0),
+                  onMouseLeave: () => R(!1),
+                  style: D,
                   title: e ? "Unmute mic" : "Mute mic",
-                  children: e ? /* @__PURE__ */ i(Re, { size: 24 }) : /* @__PURE__ */ i(Ee, { size: 24 })
+                  children: e ? /* @__PURE__ */ r(Re, { size: 24 }) : /* @__PURE__ */ r(Ee, { size: 24 })
                 }
               ),
-              /* @__PURE__ */ i(
+              /* @__PURE__ */ r(
                 "button",
                 {
                   type: "button",
-                  onClick: v ? y : D,
-                  onMouseEnter: () => u(!0),
-                  onMouseLeave: () => u(!1),
-                  disabled: !v && (A || !b),
-                  style: p,
-                  children: A ? /* @__PURE__ */ w(j, { children: [
-                    /* @__PURE__ */ i(J, { size: 20, style: { animation: "zwr-spin 1s linear infinite" } }),
-                    /* @__PURE__ */ i("span", { children: "Connecting..." })
-                  ] }) : !v && !b ? /* @__PURE__ */ w(j, { children: [
-                    /* @__PURE__ */ i(J, { size: 20, style: { animation: "zwr-spin 1s linear infinite" } }),
-                    /* @__PURE__ */ i("span", { children: "Loading Avatar..." })
-                  ] }) : v ? /* @__PURE__ */ w(j, { children: [
-                    /* @__PURE__ */ i(Le, { size: 20 }),
-                    /* @__PURE__ */ i("span", { children: "End Session" })
-                  ] }) : /* @__PURE__ */ w(j, { children: [
-                    /* @__PURE__ */ i(De, { size: 20 }),
-                    /* @__PURE__ */ i("span", { children: "Start Session" })
+                  onClick: v ? y : L,
+                  onMouseEnter: () => i(!0),
+                  onMouseLeave: () => i(!1),
+                  disabled: !v && (w || !g),
+                  style: l,
+                  children: w ? /* @__PURE__ */ A(j, { children: [
+                    /* @__PURE__ */ r(J, { size: 20, style: { animation: "zwr-spin 1s linear infinite" } }),
+                    /* @__PURE__ */ r("span", { children: "Connecting..." })
+                  ] }) : !v && !g ? /* @__PURE__ */ A(j, { children: [
+                    /* @__PURE__ */ r(J, { size: 20, style: { animation: "zwr-spin 1s linear infinite" } }),
+                    /* @__PURE__ */ r("span", { children: "Loading Avatar..." })
+                  ] }) : v ? /* @__PURE__ */ A(j, { children: [
+                    /* @__PURE__ */ r(Le, { size: 20 }),
+                    /* @__PURE__ */ r("span", { children: "End Session" })
+                  ] }) : /* @__PURE__ */ A(j, { children: [
+                    /* @__PURE__ */ r(De, { size: 20 }),
+                    /* @__PURE__ */ r("span", { children: "Start Session" })
                   ] })
                 }
               )
@@ -420,9 +420,9 @@ const je = ({
     }
   );
 }, Oe = ({
-  session: l
+  session: d
 }) => {
-  const { isConnected: a, timeRemaining: e, formatTime: d } = l, v = a && e <= 30, A = a && e > 30 && e <= 60, f = {
+  const { isConnected: o, timeRemaining: e, formatTime: f } = d, v = o && e <= 30, w = o && e > 30 && e <= 60, p = {
     display: "flex",
     alignItems: "center",
     gap: 8,
@@ -437,7 +437,7 @@ const je = ({
       borderColor: "rgba(239,68,68,0.4)",
       boxShadow: "0 0 15px rgba(239,68,68,0.3)",
       animation: "zwr-pulse 2s ease-in-out infinite"
-    } : A ? {
+    } : w ? {
       background: "rgba(249,115,22,0.2)",
       borderColor: "rgba(249,115,22,0.3)",
       boxShadow: "0 4px 12px rgba(0,0,0,0.3)"
@@ -447,22 +447,22 @@ const je = ({
       boxShadow: "0 4px 12px rgba(0,0,0,0.3)"
     }
   };
-  return /* @__PURE__ */ w(j, { children: [
-    /* @__PURE__ */ i("style", { children: `
+  return /* @__PURE__ */ A(j, { children: [
+    /* @__PURE__ */ r("style", { children: `
         @keyframes zwr-pulse {
           0%, 100% { opacity: 1; }
           50% { opacity: 0.5; }
         }
       ` }),
-    /* @__PURE__ */ w("div", { style: f, children: [
-      /* @__PURE__ */ i(
+    /* @__PURE__ */ A("div", { style: p, children: [
+      /* @__PURE__ */ r(
         "div",
         {
           style: {
             height: 8,
             width: 8,
             borderRadius: "50%",
-            ...a ? {
+            ...o ? {
               background: "#22c55e",
               boxShadow: "0 0 10px rgba(34,197,94,0.5)"
             } : {
@@ -471,7 +471,7 @@ const je = ({
           }
         }
       ),
-      /* @__PURE__ */ i(
+      /* @__PURE__ */ r(
         "span",
         {
           style: {
@@ -481,32 +481,32 @@ const je = ({
             color: "rgba(255,255,255,0.7)",
             textTransform: "uppercase"
           },
-          children: a ? `Online ${d(e)}` : "Offline"
+          children: o ? `Online ${f(e)}` : "Offline"
         }
       )
     ] })
   ] });
 }, Ke = ({
-  session: l
+  session: d
 }) => {
   const {
-    renderer: a,
+    renderer: o,
     actionQueue: e,
-    micMuted: d,
+    micMuted: f,
     volume: v,
-    setInactivityActive: A,
-    loadedActions: f,
-    token: M,
-    isConnected: D
-  } = l, { turnOffMicWhenAISpeaking: y, setMicMuted: m } = l, E = x(!1), { state: r, audioTrack: u } = we(), b = Ae(), C = Te(b.localParticipant), p = x(null), U = x(f);
-  h(() => {
-    U.current = f;
-  }, [f]), h(() => {
-    const n = b.localParticipant;
-    if (!a || !n) return;
-    const o = new TextEncoder();
-    return a.onOneshotComplete((z) => {
-      const P = o.encode(
+    setInactivityActive: w,
+    loadedActions: p,
+    token: T,
+    isConnected: L
+  } = d, { turnOffMicWhenAISpeaking: y, setMicMuted: b } = d, R = x(!1), { state: a, audioTrack: i } = Ae(), g = we(), D = Te(g.localParticipant), l = x(null), U = x(p);
+  m(() => {
+    U.current = p;
+  }, [p]), m(() => {
+    const n = g.localParticipant;
+    if (!o || !n) return;
+    const c = new TextEncoder();
+    return o.onOneshotComplete((z) => {
+      const P = c.encode(
         JSON.stringify({
           type: "ACTION_FINISHED",
           action: z
@@ -518,7 +518,7 @@ const je = ({
         console.error("[LiveKitAvatarProvider] Failed to publish action completion:", O);
       });
     });
-  }, [a, b.localParticipant]), h(() => {
+  }, [o, g.localParticipant]), m(() => {
     if (!e) return;
     const n = new xe({
       threshold: 8e-3,
@@ -527,50 +527,50 @@ const je = ({
       speechPauseFrames: 30,
       turnEndFrames: 50
     });
-    return p.current = n, n.on("speechStart", () => {
+    return l.current = n, n.on("speechStart", () => {
       e.setTurnActive(!0), e.setSpeechState("speaking");
     }), n.on("turnEnd", () => {
       e.setTurnActive(!1);
     }), () => {
-      n.stop(), p.current = null;
+      n.stop(), l.current = null;
     };
-  }, [e]), h(() => {
-    const n = p.current;
+  }, [e]), m(() => {
+    const n = l.current;
     if (n)
-      if (u?.publication?.track) {
-        const o = u.publication.track.mediaStreamTrack;
-        o && n.start(o);
+      if (i?.publication?.track) {
+        const c = i.publication.track.mediaStreamTrack;
+        c && n.start(c);
       } else
         n.stop();
-  }, [u?.publication?.track]);
+  }, [i?.publication?.track]);
   const s = x(null), $ = x(!1);
-  return h(() => {
+  return m(() => {
     if (!e) return;
-    const n = r;
-    if (!M || !D || n === "disconnected") {
-      s.current && (clearTimeout(s.current), s.current = null), p.current?.endTurn(), e.forceListening();
+    const n = a;
+    if (!T || !L || n === "disconnected") {
+      s.current && (clearTimeout(s.current), s.current = null), l.current?.endTurn(), e.forceListening();
       return;
     }
-    n === "speaking" ? (s.current && (clearTimeout(s.current), s.current = null), e.setTurnActive(!0), e.setSpeechState("speaking")) : n === "listening" || n === "idle" ? (s.current && (clearTimeout(s.current), s.current = null), p.current?.endTurn(), e.setTurnActive(!1)) : n === "thinking" && (s.current || (s.current = setTimeout(() => {
-      s.current = null, p.current?.endTurn(), e.setTurnActive(!1);
+    n === "speaking" ? (s.current && (clearTimeout(s.current), s.current = null), e.setTurnActive(!0), e.setSpeechState("speaking")) : n === "listening" || n === "idle" ? (s.current && (clearTimeout(s.current), s.current = null), l.current?.endTurn(), e.setTurnActive(!1)) : n === "thinking" && (s.current || (s.current = setTimeout(() => {
+      s.current = null, l.current?.endTurn(), e.setTurnActive(!1);
     }, 500)));
-  }, [e, D, r, M]), h(() => {
-    const n = r === "speaking";
+  }, [e, L, a, T]), m(() => {
+    const n = a === "speaking";
     if (!y) {
       $.current = n;
       return;
     }
-    const o = $.current;
-    !o && n ? d || m(!0) : o && !n && d && m(!1), $.current = n;
-  }, [d, m, r, y]), h(() => {
+    const c = $.current;
+    !c && n ? f || b(!0) : c && !n && f && b(!1), $.current = n;
+  }, [f, b, a, y]), m(() => {
     if (!y || !e) return;
-    const n = (o) => {
-      o || m(!1);
+    const n = (c) => {
+      c || b(!1);
     };
     return e.on("turnChanged", n), () => {
       e.off("turnChanged", n);
     };
-  }, [e, m, y]), h(() => () => {
+  }, [e, b, y]), m(() => () => {
     s.current && clearTimeout(s.current);
   }, []), Ie((n) => {
     try {
@@ -581,54 +581,55 @@ const je = ({
           return;
         e?.dispatch(P);
       }
-    } catch (o) {
-      console.error("[LiveKitAvatarProvider] Failed to parse data message:", o);
+    } catch (c) {
+      console.error("[LiveKitAvatarProvider] Failed to parse data message:", c);
     }
-  }), h(() => {
-    A(!(r === "speaking") && !C);
-  }, [C, A, r]), h(() => {
+  }), m(() => {
+    w(!(a === "speaking") && !D);
+  }, [D, w, a]), m(() => {
     if (!e) return;
-    const n = !!u;
-    (!n || r === "disconnected") && (p.current?.endTurn(), e.forceListening()), E.current = n;
-  }, [u, r, e]), h(() => {
-    const n = b.localParticipant;
-    n && n.setMicrophoneEnabled(!d).catch((o) => {
-      console.error("[LiveKitAvatarProvider] Failed to set mic state:", o);
+    const n = !!i;
+    (!n || a === "disconnected") && (l.current?.endTurn(), e.forceListening()), R.current = n;
+  }, [i, a, e]), m(() => {
+    const n = g.localParticipant;
+    n && n.setMicrophoneEnabled(!f).catch((c) => {
+      console.error("[LiveKitAvatarProvider] Failed to set mic state:", c);
     });
-  }, [d, b.localParticipant]), /* @__PURE__ */ i("div", { style: { position: "absolute", bottom: 80, left: 8, right: 8, display: "flex", flexDirection: "column", gap: 8 }, children: /* @__PURE__ */ i(Me, { volume: v }) });
+  }, [f, g.localParticipant]), /* @__PURE__ */ r("div", { style: { position: "absolute", bottom: 80, left: 8, right: 8, display: "flex", flexDirection: "column", gap: 8 }, children: /* @__PURE__ */ r(Me, { volume: v }) });
 }, qe = ({
-  avatarId: l,
-  apiKey: a,
+  avatarId: d,
+  apiKey: o,
   api: e,
-  turnOffMicWhenAISpeaking: d,
+  turnOffMicWhenAISpeaking: f,
   livekitUrl: v,
-  sessionDuration: A,
-  inactivityTimeout: f,
-  style: M,
-  className: D,
-  loadingContent: y,
-  customControls: m,
-  customStatusBadge: E
+  sessionDuration: w,
+  inactivityTimeout: p,
+  showBorder: T = !0,
+  style: L,
+  className: y,
+  loadingContent: b,
+  customControls: R,
+  customStatusBadge: a
 }) => {
-  const r = Fe({
-    avatarId: l,
-    apiKey: a,
+  const i = Fe({
+    avatarId: d,
+    apiKey: o,
     api: e,
-    turnOffMicWhenAISpeaking: d,
+    turnOffMicWhenAISpeaking: f,
     livekitUrl: v,
-    sessionDuration: A,
-    inactivityTimeout: f
+    sessionDuration: w,
+    inactivityTimeout: p
   }), {
-    token: u,
-    isConnected: b,
-    avatarDimensions: C,
-    disconnect: p,
-    startSessionTimer: U
-  } = r;
-  return /* @__PURE__ */ w(
+    token: g,
+    isConnected: D,
+    avatarDimensions: l,
+    disconnect: U,
+    startSessionTimer: s
+  } = i;
+  return /* @__PURE__ */ A(
     "section",
     {
-      className: D,
+      className: y,
       style: {
         position: "relative",
         display: "flex",
@@ -637,17 +638,17 @@ const je = ({
         justifyContent: "center",
         overflow: "hidden",
         borderRadius: 16,
-        border: "1px solid rgba(255,255,255,0.1)",
-        boxShadow: "0 25px 50px -12px rgba(0,0,0,0.5)",
+        border: T ? "1px solid rgba(255,255,255,0.1)" : "none",
+        boxShadow: T ? "0 25px 50px -12px rgba(0,0,0,0.5)" : "none",
         height: "80vh",
         width: "auto",
         maxWidth: "100%",
-        aspectRatio: C ? `${C.width} / ${C.height}` : "3 / 4",
-        ...M
+        aspectRatio: l ? `${l.width} / ${l.height}` : "3 / 4",
+        ...L
       },
       children: [
-        /* @__PURE__ */ i(je, { session: r, loadingContent: y }),
-        /* @__PURE__ */ w(
+        /* @__PURE__ */ r(je, { session: i, loadingContent: b }),
+        /* @__PURE__ */ A(
           "div",
           {
             style: {
@@ -661,7 +662,7 @@ const je = ({
               padding: 16
             },
             children: [
-              /* @__PURE__ */ w(
+              /* @__PURE__ */ A(
                 "div",
                 {
                   style: {
@@ -671,28 +672,28 @@ const je = ({
                     justifyContent: "space-between"
                   },
                   children: [
-                    E ? E(r) : /* @__PURE__ */ i(Oe, { session: r }),
-                    /* @__PURE__ */ i("div", {})
+                    a ? a(i) : /* @__PURE__ */ r(Oe, { session: i }),
+                    /* @__PURE__ */ r("div", {})
                   ]
                 }
               ),
-              m ? m(r) : /* @__PURE__ */ i(_e, { session: r })
+              R ? R(i) : /* @__PURE__ */ r(_e, { session: i })
             ]
           }
         ),
-        /* @__PURE__ */ i("div", { style: { display: "none" }, children: u && r.livekitUrl && /* @__PURE__ */ i(
+        /* @__PURE__ */ r("div", { style: { display: "none" }, children: g && i.livekitUrl && /* @__PURE__ */ r(
           Ce,
           {
-            serverUrl: r.livekitUrl,
-            token: u,
+            serverUrl: i.livekitUrl,
+            token: g,
             connect: !0,
             video: !1,
             audio: !0,
             onConnected: () => {
-              r.markConnected(), U();
+              i.markConnected(), s();
             },
-            onDisconnected: p,
-            children: /* @__PURE__ */ i(Ke, { session: r })
+            onDisconnected: U,
+            children: /* @__PURE__ */ r(Ke, { session: i })
           }
         ) })
       ]