@zeroweight/react 0.2.27 → 0.2.29

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

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