@zeroweight/react 0.2.25 → 0.2.27

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

@@ -1,42 +1,42 @@
-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 y, useCallback as w, useEffect as b } 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 S, jsx as r, Fragment as U } 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 = () => {
+import { Loader2 as W, 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", X = "https://api.zeroweight.ai", Pe = () => {
   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) {
+function Ue(u) {
   const {
     avatarId: o,
     apiKey: t = null,
     api: f,
-    livekitUrl: h = De,
-    sessionDuration: l = ze,
-    inactivityTimeout: b = Le
+    livekitUrl: h = ze,
+    sessionDuration: d = De,
+    inactivityTimeout: x = Le
   } = u, M = h, p = ve(() => {
     if (f) return f;
     const e = t ? { "X-ZW-Api-Key": t } : void 0;
     return {
-      getBundle: async (c) => {
-        const A = await fetch(
+      getBundle: async (l) => {
+        const k = await fetch(
           `${X}/avatars/bundle/${encodeURIComponent(
-            c
+            l
           )}`,
           { 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) => {
+      getLiveKitToken: async (l, k) => {
         const g = new URLSearchParams({
-          avatar_id: c,
-          name: A
+          avatar_id: l,
+          name: k
         }), E = await fetch(
           `${X}/livekit/token?${g.toString()}`,
           { headers: e }
@@ -48,128 +48,128 @@ function $e(u) {
         return E.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]), m = A(null), v = A(null), i = A(null), c = A(null), [R, a] = y("idle"), [n, s] = y(null), [L, D] = y(
     /* @__PURE__ */ new Set(["listening"])
-  ), [$, B] = v({
+  ), [z, $] = y({
     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(() => {
+  }), [te, B] = y(!1), [ne, H] = y(null), [j, F] = y(!1), [_, Q] = y(!1), [re, K] = y(d), I = A(null), N = A(() => {
+  }), [ie, oe] = y(!1), [ae, q] = y(0.8), C = A(null), O = R === "ready", J = w(() => {
     const e = m.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 l = e.querySelector("canvas");
+    return l || (l = document.createElement("canvas"), l.style.width = "100%", l.style.height = "100%", l.style.display = "block", e.appendChild(l)), v.current = l, l;
   }, []);
-  w(() => {
+  b(() => {
     let e = !1;
     return (async () => {
-      const A = Z();
-      if (!A) return;
+      const k = J();
+      if (!k) return;
       const g = new ye();
       i.current = g;
-      const E = new be((T, z) => {
-        g.play(T, z);
+      const E = new be((T, P) => {
+        g.play(T, P);
       });
-      s.current = E, g.on("stateChanged", (T) => {
+      c.current = E, g.on("stateChanged", (T) => {
         e || a(T);
-      }), g.on("dimensions", (T, z) => {
-        e || d({ width: T, height: z });
+      }), g.on("dimensions", (T, P) => {
+        e || s({ width: T, height: P });
       }), g.on("actionLoaded", (T) => {
-        e || U((z) => {
-          const J = new Set(z);
-          return J.add(T), J;
+        e || D((P) => {
+          const G = new Set(P);
+          return G.add(T), G;
         });
       }), g.on("allActionsLoaded", () => {
-        e || O(!1);
+        e || B(!1);
       }), g.on("ready", () => {
-        e || (B(g.getActionMetadata()), E.setActionMetadata(g.getActionMetadata()));
+        e || ($(g.getActionMetadata()), E.setActionMetadata(g.getActionMetadata()));
       });
       try {
-        O(!0);
+        B(!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());
+        if (e || (await g.init(k, { payload: T.payload }), e)) return;
+        $(g.getActionMetadata()), E.setActionMetadata(g.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);
+  }, [o, J, p]);
+  const Z = A(!1);
+  b(() => {
+    O && i.current && L.has("wave_hand") && !Z.current && (i.current.play("wave_hand", "listening"), Z.current = !0);
+  }, [O, L]);
+  const se = w(async () => {
+    if (!(j || _)) {
+      F(!0);
       try {
         await navigator.mediaDevices.getUserMedia({ audio: !0 });
-        const e = Ue(), c = await p.getLiveKitToken(o, e);
-        H(c.token);
+        const e = Pe(), l = await p.getLiveKitToken(o, e);
+        H(l.token);
       } catch (e) {
-        console.error("[useAvatarSession] Failed to connect:", e), j(!1);
+        console.error("[useAvatarSession] Failed to connect:", e), F(!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;
+  }, [j, _, o, p]), V = w(() => {
+    I.current && (clearInterval(I.current), I.current = null), K(d), C.current && (clearTimeout(C.current), C.current = null), H(null), Q(!1), F(!1), c.current?.forceListening();
+  }, [d]);
+  b(() => {
+    N.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);
+  const ce = w(() => {
+    Q(!0), F(!1);
+  }, []), le = w(() => {
+    I.current && clearInterval(I.current), K(d), I.current = setInterval(() => {
+      K((e) => e <= 1 ? (clearInterval(I.current), I.current = null, setTimeout(() => N.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 l = Math.floor(e / 60).toString().padStart(2, "0"), k = (e % 60).toString().padStart(2, "0");
+    return `${l}:${k}`;
   }, []);
-  w(() => () => {
-    R.current && clearInterval(R.current);
+  b(() => () => {
+    I.current && clearInterval(I.current);
   }, []);
-  const ue = S(
+  const ue = w(
     (e) => {
       if (!e) {
         C.current && (clearTimeout(C.current), C.current = null);
         return;
       }
       C.current || (C.current = setTimeout(() => {
-        C.current = null, K.current();
-      }, b));
+        C.current = null, N.current();
+      }, 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) => {
-    s.current ? s.current.dispatch(e) : i.current?.play(e, "listening");
+  }, []), me = w((e) => {
+    i.current?.play(e, "listening");
   }, []);
   return {
     containerRef: m,
     renderer: i.current,
-    actionQueue: s.current,
-    rendererState: I,
-    avatarDimensions: r,
+    actionQueue: c.current,
+    rendererState: R,
+    avatarDimensions: n,
     loadedActions: L,
-    actionMetadata: $,
+    actionMetadata: z,
     isLoadingActions: te,
-    isEngineReady: N,
+    isEngineReady: O,
     token: ne,
-    isConnecting: P,
-    isConnected: F,
+    isConnecting: j,
+    isConnected: _,
     livekitUrl: M,
     timeRemaining: re,
     formatTime: de,
     micMuted: ie,
-    volume: oe,
+    volume: ae,
     connect: se,
     disconnect: V,
     toggleMic: pe,
@@ -182,11 +182,11 @@ function $e(u) {
     setInactivityActive: ue
   };
 }
-const je = ({
+const $e = ({
   session: u,
   style: o,
   loadingContent: t
-}) => /* @__PURE__ */ y(
+}) => /* @__PURE__ */ S(
   "div",
   {
     style: {
@@ -203,7 +203,7 @@ const je = ({
       ...o
     },
     children: [
-      /* @__PURE__ */ n("style", { children: `
+      /* @__PURE__ */ r("style", { children: `
         @keyframes zwr-spin {
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
@@ -213,7 +213,7 @@ const je = ({
           50% { opacity: 0.5; }
         }
       ` }),
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ r(
         "div",
         {
           ref: u.containerRef,
@@ -223,7 +223,7 @@ const je = ({
             height: "100%",
             transition: "all 0.5s ease-in-out"
           },
-          children: !u.isEngineReady && /* @__PURE__ */ n(
+          children: !u.isEngineReady && /* @__PURE__ */ r(
             "div",
             {
               style: {
@@ -236,7 +236,7 @@ const je = ({
                 backdropFilter: "blur(4px)",
                 zIndex: 10
               },
-              children: t || /* @__PURE__ */ y(
+              children: t || /* @__PURE__ */ S(
                 "div",
                 {
                   style: {
@@ -246,7 +246,7 @@ const je = ({
                     gap: 16
                   },
                   children: [
-                    /* @__PURE__ */ n(
+                    /* @__PURE__ */ r(
                       W,
                       {
                         style: {
@@ -257,7 +257,7 @@ const je = ({
                         }
                       }
                     ),
-                    /* @__PURE__ */ n(
+                    /* @__PURE__ */ r(
                       "div",
                       {
                         style: {
@@ -305,7 +305,7 @@ const je = ({
   transition: "all 0.3s",
   border: "none",
   cursor: "pointer"
-}, Pe = ({
+}, Fe = ({
   session: u,
   style: o
 }) => {
@@ -313,33 +313,33 @@ const je = ({
     micMuted: t,
     toggleMic: f,
     isConnected: h,
-    isConnecting: l,
-    isEngineReady: b,
+    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 ? {
+  } = u, [v, i] = y(!1), [c, R] = y(!1), a = x && M.has("listening") && M.has("speaking"), n = t ? {
     ...Y,
     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)" } : {}
+    ...v ? { background: "rgba(239,68,68,0.2)" } : {}
   } : {
     ...Y,
-    background: k ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.4)",
+    background: v ? "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 = h ? {
     ...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 || !a) && (s.opacity = 0.5, s.cursor = "not-allowed"), /* @__PURE__ */ S(
     "div",
     {
       style: {
@@ -353,13 +353,13 @@ const je = ({
         ...o
       },
       children: [
-        /* @__PURE__ */ n("style", { children: `
+        /* @__PURE__ */ r("style", { children: `
         @keyframes zwr-spin {
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
         }
       ` }),
-        /* @__PURE__ */ y(
+        /* @__PURE__ */ S(
           "div",
           {
             style: {
@@ -372,39 +372,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" })
+                  onMouseEnter: () => R(!0),
+                  onMouseLeave: () => R(!1),
+                  disabled: !h && (d || !a),
+                  style: s,
+                  children: d ? /* @__PURE__ */ S(U, { children: [
+                    /* @__PURE__ */ r(W, { size: 20, style: { animation: "zwr-spin 1s linear infinite" } }),
+                    /* @__PURE__ */ r("span", { children: "Connecting..." })
+                  ] }) : !h && !a ? /* @__PURE__ */ S(U, { children: [
+                    /* @__PURE__ */ r(W, { size: 20, style: { animation: "zwr-spin 1s linear infinite" } }),
+                    /* @__PURE__ */ r("span", { children: "Loading Avatar..." })
+                  ] }) : h ? /* @__PURE__ */ S(U, { children: [
+                    /* @__PURE__ */ r(Me, { size: 20 }),
+                    /* @__PURE__ */ r("span", { children: "End Session" })
+                  ] }) : /* @__PURE__ */ S(U, { children: [
+                    /* @__PURE__ */ r(Ee, { size: 20 }),
+                    /* @__PURE__ */ r("span", { children: "Start Session" })
                   ] })
                 }
               )
@@ -414,10 +414,10 @@ const je = ({
       ]
     }
   );
-}, Fe = ({
+}, je = ({
   session: u
 }) => {
-  const { isConnected: o, timeRemaining: t, formatTime: f } = u, h = o && t <= 30, l = o && t > 30 && t <= 60, b = {
+  const { isConnected: o, timeRemaining: t, formatTime: f } = u, h = o && t <= 30, d = o && t > 30 && t <= 60, x = {
     display: "flex",
     alignItems: "center",
     gap: 8,
@@ -432,7 +432,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"
-    } : 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,15 +442,15 @@ const je = ({
       boxShadow: "0 4px 12px rgba(0,0,0,0.3)"
     }
   };
-  return /* @__PURE__ */ y(D, { children: [
-    /* @__PURE__ */ n("style", { children: `
+  return /* @__PURE__ */ S(U, { 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__ */ S("div", { style: x, children: [
+      /* @__PURE__ */ r(
         "div",
         {
           style: {
@@ -466,7 +466,7 @@ const je = ({
           }
         }
       ),
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ r(
         "span",
         {
           style: {
@@ -484,95 +484,112 @@ const je = ({
 }, _e = ({
   session: u
 }) => {
-  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: o, actionQueue: t, micMuted: f, volume: h, setInactivityActive: d, loadedActions: x } = u, M = A(!1), { state: p, audioTrack: m } = xe(), v = we(), i = Ae(v.localParticipant), c = A(null), R = A(x);
+  b(() => {
+    R.current = x;
+  }, [x]), b(() => {
+    const n = v.localParticipant;
+    if (!o || !n) return;
+    const s = new TextEncoder();
+    return o.onOneshotComplete((D) => {
+      const z = s.encode(
+        JSON.stringify({
+          type: "ACTION_FINISHED",
+          action: D
+        })
+      );
+      n.publishData(z, {
+        reliable: !0
+      }).catch(($) => {
+        console.error("[LiveKitAvatarProvider] Failed to publish action completion:", $);
+      });
+    });
+  }, [o, v.localParticipant]), b(() => {
     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)
+  }, [t]), b(() => {
+    const n = c.current;
+    if (n)
       if (m?.publication?.track) {
-        const d = m.publication.track.mediaStreamTrack;
-        d && r.start(d);
+        const s = m.publication.track.mediaStreamTrack;
+        s && n.start(s);
       } else
-        r.stop();
+        n.stop();
   }, [m?.publication?.track]);
-  const a = x(null);
-  return w(() => {
+  const a = A(null);
+  return b(() => {
     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 = p;
+    n === "speaking" ? (a.current && (clearTimeout(a.current), a.current = null), t.setTurnActive(!0), t.setSpeechState("speaking")) : n === "listening" || n === "idle" ? (a.current && (clearTimeout(a.current), a.current = null), c.current?.endTurn(), t.setTurnActive(!1)) : n === "thinking" && (a.current || (a.current = setTimeout(() => {
+      a.current = null, c.current?.endTurn(), t.setTurnActive(!1);
     }, 500)));
-  }, [p, t]), w(() => () => {
+  }, [p, t]), b(() => () => {
     a.current && clearTimeout(a.current);
-  }, []), Ae((r) => {
+  }, []), 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 L = new TextDecoder().decode(n.payload), D = JSON.parse(L);
+      if (D.type === "AVATAR_UPDATE") {
+        const z = D.action;
+        if (!R.current.has(z))
           return;
-        t?.dispatch($);
+        t?.dispatch(z);
       }
-    } 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(() => {
+  }), b(() => {
+    d(!(p === "speaking") && !i);
+  }, [i, d, p]), b(() => {
     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 = !!m;
+    (!n || p === "disconnected") && (c.current?.endTurn(), t.forceListening()), M.current = n;
+  }, [m, p, t]), b(() => {
+    const n = v.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 }) });
+  }, [f, v.localParticipant]), /* @__PURE__ */ r("div", { style: { position: "absolute", bottom: 80, left: 8, right: 8, display: "flex", flexDirection: "column", gap: 8 }, children: /* @__PURE__ */ r(Te, { volume: h }) });
 }, He = ({
   avatarId: u,
   apiKey: o,
   api: t,
   livekitUrl: f,
   sessionDuration: h,
-  inactivityTimeout: l,
-  style: b,
+  inactivityTimeout: d,
+  style: x,
   className: M,
   loadingContent: p,
   customControls: m,
-  customStatusBadge: k
+  customStatusBadge: v
 }) => {
-  const i = $e({
+  const i = Ue({
     avatarId: u,
     apiKey: o,
     api: t,
     livekitUrl: f,
     sessionDuration: h,
-    inactivityTimeout: l
+    inactivityTimeout: d
   }), {
-    token: s,
-    isConnected: I,
+    token: c,
+    isConnected: R,
     avatarDimensions: a,
-    disconnect: r,
-    startSessionTimer: d
+    disconnect: n,
+    startSessionTimer: s
   } = i;
-  return /* @__PURE__ */ y(
+  return /* @__PURE__ */ S(
     "section",
     {
       className: M,
@@ -590,11 +607,11 @@ const je = ({
         width: "auto",
         maxWidth: "100%",
         aspectRatio: a ? `${a.width} / ${a.height}` : "3 / 4",
-        ...b
+        ...x
       },
       children: [
-        /* @__PURE__ */ n(je, { session: i, loadingContent: p }),
-        /* @__PURE__ */ y(
+        /* @__PURE__ */ r($e, { session: i, loadingContent: p }),
+        /* @__PURE__ */ S(
           "div",
           {
             style: {
@@ -608,7 +625,7 @@ const je = ({
               padding: 16
             },
             children: [
-              /* @__PURE__ */ y(
+              /* @__PURE__ */ S(
                 "div",
                 {
                   style: {
@@ -618,28 +635,28 @@ const je = ({
                     justifyContent: "space-between"
                   },
                   children: [
-                    k ? k(i) : /* @__PURE__ */ n(Fe, { session: i }),
-                    /* @__PURE__ */ n("div", {})
+                    v ? v(i) : /* @__PURE__ */ r(je, { session: i }),
+                    /* @__PURE__ */ r("div", {})
                   ]
                 }
               ),
-              m ? m(i) : /* @__PURE__ */ n(Pe, { session: i })
+              m ? m(i) : /* @__PURE__ */ r(Fe, { 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(_e, { session: i })
           }
         ) })
       ]
@@ -647,11 +664,11 @@ const je = ({
   );
 };
 export {
-  je as AvatarCanvas,
-  Pe as AvatarControls,
-  Fe as AvatarStatusBadge,
+  $e as AvatarCanvas,
+  Fe as AvatarControls,
+  je as AvatarStatusBadge,
   _e as LiveKitAvatarProvider,
   He as LiveKitAvatarSession,
-  $e as useAvatarSession
+  Ue as useAvatarSession
 };
 //# sourceMappingURL=zeroweight-renderer-react.es.js.map