@zeroweight/react 0.2.31 → 0.2.33

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

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