@zeroweight/react 0.2.26 → 0.2.28

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

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