@zeroweight/react 0.2.0 → 0.2.2

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

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