@zeroweight/react 0.2.0

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

@@ -0,0 +1,607 @@
+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 "@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}`;
+};
+function ze(s) {
+  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(
+    /* @__PURE__ */ new Set(["listening"])
+  ), [j, I] = f({
+    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;
+    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;
+  }, []);
+  b(() => {
+    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);
+      });
+      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) => {
+          const G = new Set(D);
+          return G.add(w), G;
+        });
+      }), h.on("allActionsLoaded", () => {
+        t || _(!1);
+      }), h.on("ready", () => {
+        t || (I(h.getActionMetadata()), $.setActionMetadata(h.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);
+      }
+    })(), () => {
+      t = !0, i.current?.destroy(), i.current = null, l.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);
+      try {
+        await navigator.mediaDevices.getUserMedia({ audio: !0 });
+        const t = De(), p = await e.getLiveKitToken(o, t);
+        B(p.token);
+      } catch (t) {
+        console.error("[useAvatarSession] Failed to connect:", t), E(!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();
+  }, [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);
+    }, 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}`;
+  }, []);
+  b(() => () => {
+    R.current && clearInterval(R.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");
+  }, []);
+  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
+  };
+}
+const Ee = ({
+  session: s,
+  style: o,
+  loadingContent: e
+}) => /* @__PURE__ */ x(
+  "div",
+  {
+    style: {
+      position: "absolute",
+      inset: 0,
+      width: "100%",
+      height: "100%",
+      zIndex: 0,
+      pointerEvents: "auto",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      overflow: "hidden",
+      ...o
+    },
+    children: [
+      /* @__PURE__ */ n("style", { children: `
+        @keyframes zwr-spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+        @keyframes zwr-pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
+        }
+      ` }),
+      /* @__PURE__ */ n(
+        "div",
+        {
+          ref: s.containerRef,
+          style: {
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            transition: "all 0.5s ease-in-out"
+          },
+          children: !s.isEngineReady && /* @__PURE__ */ n(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                background: "rgba(0,0,0,0.4)",
+                backdropFilter: "blur(4px)",
+                zIndex: 10
+              },
+              children: e || /* @__PURE__ */ x(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    gap: 16
+                  },
+                  children: [
+                    /* @__PURE__ */ n(
+                      Z,
+                      {
+                        style: {
+                          width: 40,
+                          height: 40,
+                          color: "rgba(255,255,255,0.5)",
+                          animation: "zwr-spin 1s linear infinite"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ n(
+                      "div",
+                      {
+                        style: {
+                          fontSize: 14,
+                          color: "rgba(255,255,255,0.5)",
+                          fontWeight: 500,
+                          letterSpacing: "0.1em",
+                          textTransform: "uppercase",
+                          animation: "zwr-pulse 2s ease-in-out infinite"
+                        },
+                        children: "Initializing Neural Engine..."
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        }
+      )
+    ]
+  }
+), J = {
+  flexShrink: 0,
+  borderRadius: 9999,
+  padding: 16,
+  transition: "all 0.3s",
+  border: "none",
+  cursor: "pointer",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center"
+}, Y = {
+  position: "relative",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 12,
+  borderRadius: 9999,
+  padding: "16px 24px",
+  fontSize: 16,
+  fontWeight: 600,
+  color: "#fff",
+  whiteSpace: "nowrap",
+  transition: "all 0.3s",
+  border: "none",
+  cursor: "pointer"
+}, Le = ({
+  session: s,
+  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,
+    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)" } : {}
+  } : {
+    ...J,
+    background: a ? "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 ? {
+    ...Y,
+    background: l ? "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
+  };
+  return d && (T.opacity = 0.5, T.cursor = "not-allowed"), /* @__PURE__ */ x(
+    "div",
+    {
+      style: {
+        width: "100%",
+        marginTop: "auto",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 16,
+        paddingBottom: 16,
+        ...o
+      },
+      children: [
+        /* @__PURE__ */ n("style", { children: `
+        @keyframes zwr-spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      ` }),
+        /* @__PURE__ */ x(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexWrap: "wrap",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 16,
+              width: "100%",
+              pointerEvents: "auto"
+            },
+            children: [
+              /* @__PURE__ */ n(
+                "button",
+                {
+                  type: "button",
+                  onClick: k,
+                  onMouseEnter: () => i(!0),
+                  onMouseLeave: () => i(!1),
+                  style: m,
+                  title: e ? "Unmute mic" : "Mute mic",
+                  children: e ? /* @__PURE__ */ n(ke, { size: 24 }) : /* @__PURE__ */ n(Te, { 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" } }),
+                    /* @__PURE__ */ n("span", { children: "Connecting..." })
+                  ] }) : c ? /* @__PURE__ */ x(P, { children: [
+                    /* @__PURE__ */ n(Ae, { size: 20 }),
+                    /* @__PURE__ */ n("span", { children: "End Session" })
+                  ] }) : /* @__PURE__ */ x(P, { children: [
+                    /* @__PURE__ */ n(Re, { size: 20 }),
+                    /* @__PURE__ */ n("span", { children: "Start Session" })
+                  ] })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, Pe = ({
+  session: s
+}) => {
+  const { isConnected: o, timeRemaining: e, formatTime: k } = s, c = o && e <= 30, d = o && e > 30 && e <= 60, g = {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    backdropFilter: "blur(12px)",
+    padding: "6px 12px",
+    borderRadius: 9999,
+    border: "1px solid",
+    pointerEvents: "auto",
+    transition: "all 0.3s",
+    ...c ? {
+      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 ? {
+      background: "rgba(249,115,22,0.2)",
+      borderColor: "rgba(249,115,22,0.3)",
+      boxShadow: "0 4px 12px rgba(0,0,0,0.3)"
+    } : {
+      background: "rgba(0,0,0,0.4)",
+      borderColor: "rgba(255,255,255,0.1)",
+      boxShadow: "0 4px 12px rgba(0,0,0,0.3)"
+    }
+  };
+  return /* @__PURE__ */ x(P, { children: [
+    /* @__PURE__ */ n("style", { children: `
+        @keyframes zwr-pulse {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.5; }
+        }
+      ` }),
+    /* @__PURE__ */ x("div", { style: g, children: [
+      /* @__PURE__ */ n(
+        "div",
+        {
+          style: {
+            height: 8,
+            width: 8,
+            borderRadius: "50%",
+            ...o ? {
+              background: "#22c55e",
+              boxShadow: "0 0 10px rgba(34,197,94,0.5)"
+            } : {
+              background: "rgba(239,68,68,0.5)"
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ n(
+        "span",
+        {
+          style: {
+            fontSize: 10,
+            fontWeight: 700,
+            letterSpacing: "0.05em",
+            color: "rgba(255,255,255,0.7)",
+            textTransform: "uppercase"
+          },
+          children: o ? `Online ${k(e)}` : "Offline"
+        }
+      )
+    ] })
+  ] });
+}, je = ({
+  session: s
+}) => {
+  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(() => {
+    if (!e) return;
+    const r = new he({
+      threshold: 8e-3,
+      analyseIntervalMs: 30,
+      speechStartFrames: 1,
+      speechPauseFrames: 30,
+      turnEndFrames: 50
+    });
+    return m.current = r, r.on("speechStart", () => {
+      e.setTurnActive(!0), e.setSpeechState("speaking");
+    }), r.on("turnEnd", () => {
+      e.setTurnActive(!1);
+    }), () => {
+      r.stop(), m.current = null;
+    };
+  }, [e]), b(() => {
+    const r = m.current;
+    if (r)
+      if (i?.publication?.track) {
+        const A = i.publication.track.mediaStreamTrack;
+        A && r.start(A);
+      } else
+        r.stop();
+  }, [i?.publication?.track]);
+  const u = y(null);
+  return b(() => {
+    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);
+    }, 500)));
+  }, [a, e]), b(() => () => {
+    u.current && clearTimeout(u.current);
+  }, []), xe((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))
+          return;
+        e?.dispatch(z);
+      }
+    } catch (A) {
+      console.error("[LiveKitAvatarProvider] Failed to parse data message:", A);
+    }
+  }), b(() => {
+    d();
+  }, [S, a, d]), b(() => {
+    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);
+    });
+  }, [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,
+  className: c,
+  loadingContent: d,
+  customControls: g,
+  customStatusBadge: C
+}) => {
+  const a = ze({ avatarId: s, api: o, livekitUrl: e }), {
+    token: i,
+    isConnected: l,
+    avatarDimensions: S,
+    disconnect: m,
+    startSessionTimer: T
+  } = a;
+  return /* @__PURE__ */ x(
+    "section",
+    {
+      className: c,
+      style: {
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden",
+        borderRadius: 16,
+        border: "1px solid rgba(255,255,255,0.1)",
+        boxShadow: "0 25px 50px -12px rgba(0,0,0,0.5)",
+        height: "80vh",
+        width: "auto",
+        maxWidth: "100%",
+        aspectRatio: S ? `${S.width} / ${S.height}` : "3 / 4",
+        ...k
+      },
+      children: [
+        /* @__PURE__ */ n(Ee, { session: a, loadingContent: d }),
+        /* @__PURE__ */ x(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              zIndex: 20,
+              pointerEvents: "none",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-between",
+              padding: 16
+            },
+            children: [
+              /* @__PURE__ */ x(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    width: "100%",
+                    alignItems: "flex-start",
+                    justifyContent: "space-between"
+                  },
+                  children: [
+                    C ? C(a) : /* @__PURE__ */ n(Pe, { session: a }),
+                    /* @__PURE__ */ n("div", {})
+                  ]
+                }
+              ),
+              g ? g(a) : /* @__PURE__ */ n(Le, { session: a })
+            ]
+          }
+        ),
+        /* @__PURE__ */ n("div", { style: { display: "none" }, children: i && e && /* @__PURE__ */ n(
+          we,
+          {
+            serverUrl: e,
+            token: i,
+            connect: !0,
+            video: !1,
+            audio: !0,
+            onConnected: () => {
+              a.markConnected(), T();
+            },
+            onDisconnected: m,
+            children: /* @__PURE__ */ n(je, { session: a })
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  Ee as AvatarCanvas,
+  Le as AvatarControls,
+  Pe as AvatarStatusBadge,
+  je as LiveKitAvatarProvider,
+  _e as LiveKitAvatarSession,
+  ze as useAvatarSession
+};
+//# sourceMappingURL=zeroweight-renderer-react.es.js.map