@open-avatar/livekit-react 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface LiveKitAvatarProps {
+    modelUrl: string;
+    bodyStyle?: 'M' | 'F';
+    cameraView?: 'upper' | 'full' | 'head';
+    avatarMood?: string;
+    enableGestures?: boolean;
+    className?: string;
+}
+declare function LiveKitAvatar({ modelUrl, bodyStyle, cameraView, avatarMood, enableGestures, className }: LiveKitAvatarProps): react_jsx_runtime.JSX.Element;
+
+export { LiveKitAvatar, type LiveKitAvatarProps };

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface LiveKitAvatarProps {
+    modelUrl: string;
+    bodyStyle?: 'M' | 'F';
+    cameraView?: 'upper' | 'full' | 'head';
+    avatarMood?: string;
+    enableGestures?: boolean;
+    className?: string;
+}
+declare function LiveKitAvatar({ modelUrl, bodyStyle, cameraView, avatarMood, enableGestures, className }: LiveKitAvatarProps): react_jsx_runtime.JSX.Element;
+
+export { LiveKitAvatar, type LiveKitAvatarProps };

package/dist/index.js

@@ -0,0 +1,263 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  LiveKitAvatar: () => LiveKitAvatar
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/LiveKitAvatar.tsx
+var import_react = require("react");
+var import_components_react = require("@livekit/components-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CDN_WORKLET_URL = "https://unpkg.com/@met4citizen/headaudio/dist/headworklet.min.mjs";
+var CDN_MODEL_URL = "https://unpkg.com/@met4citizen/headaudio/dist/model-en-mixed.bin";
+var VAD_GATE_ACTIVE_DB = -40;
+var VAD_GATE_INACTIVE_DB = -60;
+function LiveKitAvatar({
+  modelUrl,
+  bodyStyle = "F",
+  cameraView = "upper",
+  avatarMood = "neutral",
+  enableGestures = true,
+  className
+}) {
+  const containerRef = (0, import_react.useRef)(null);
+  const headRef = (0, import_react.useRef)(null);
+  const audioCtxRef = (0, import_react.useRef)(null);
+  const headAudioRef = (0, import_react.useRef)(null);
+  const sourceNodeRef = (0, import_react.useRef)(null);
+  const isInitializedRef = (0, import_react.useRef)(false);
+  const [loadingState, setLoadingState] = (0, import_react.useState)("idle");
+  const { audioTrack, state: agentState } = (0, import_components_react.useVoiceAssistant)();
+  const cleanup = (0, import_react.useCallback)(() => {
+    var _a, _b, _c;
+    (_a = sourceNodeRef.current) == null ? void 0 : _a.disconnect();
+    sourceNodeRef.current = null;
+    (_b = headAudioRef.current) == null ? void 0 : _b.stop();
+    (_c = headAudioRef.current) == null ? void 0 : _c.disconnect();
+    headAudioRef.current = null;
+    if (audioCtxRef.current && audioCtxRef.current.state !== "closed") {
+      void audioCtxRef.current.close();
+    }
+    audioCtxRef.current = null;
+    if (headRef.current) {
+      headRef.current.stop();
+    }
+    headRef.current = null;
+    if (containerRef.current) {
+      containerRef.current.innerHTML = "";
+    }
+    isInitializedRef.current = false;
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!containerRef.current) return;
+    let isCancelled = false;
+    const initializeHead = async () => {
+      setLoadingState("loading-head");
+      try {
+        const { TalkingHead } = await import("@met4citizen/talkinghead");
+        if (isCancelled || !containerRef.current) return;
+        const head = new TalkingHead(containerRef.current, {
+          cameraView,
+          avatarMood,
+          // Disable built-in text-driven lipsync, we use HeadAudio instead
+          lipsyncModules: []
+        });
+        await head.showAvatar(
+          {
+            url: modelUrl,
+            body: bodyStyle,
+            avatarMood,
+            lipsyncLang: "en"
+          },
+          (ev) => {
+            if (ev.lengthComputable) {
+              const pct = Math.round(ev.loaded / ev.total * 100);
+              if (pct === 100) setLoadingState("loading-audio");
+            }
+          }
+        );
+        if (isCancelled) return;
+        headRef.current = head;
+        isInitializedRef.current = true;
+        setLoadingState("ready");
+      } catch (err) {
+        if (isCancelled) return;
+        console.error("[LiveKitAvatar] Failed to initialize 3D head:", err);
+        setLoadingState("error");
+      }
+    };
+    void initializeHead();
+    return () => {
+      isCancelled = true;
+      cleanup();
+    };
+  }, [modelUrl, bodyStyle, cameraView, avatarMood, cleanup]);
+  (0, import_react.useEffect)(() => {
+    var _a;
+    if (!headRef.current || !isInitializedRef.current) return;
+    if (!((_a = audioTrack == null ? void 0 : audioTrack.publication) == null ? void 0 : _a.track)) return;
+    const mediaStreamTrack = audioTrack.publication.track.mediaStreamTrack;
+    if (!mediaStreamTrack) return;
+    let isCancelled = false;
+    const connectAudioBridge = async () => {
+      try {
+        const audioCtx = new AudioContext();
+        audioCtxRef.current = audioCtx;
+        await loadWorkletFromCDN(audioCtx, CDN_WORKLET_URL);
+        if (isCancelled) {
+          await audioCtx.close();
+          return;
+        }
+        const { HeadAudio } = await import("@met4citizen/headaudio/modules/headaudio.mjs");
+        if (isCancelled) {
+          await audioCtx.close();
+          return;
+        }
+        const headaudio = new HeadAudio(audioCtx, {
+          parameterData: {
+            vadGateActiveDb: VAD_GATE_ACTIVE_DB,
+            vadGateInactiveDb: VAD_GATE_INACTIVE_DB
+          }
+        });
+        headAudioRef.current = headaudio;
+        await headaudio.loadModel(CDN_MODEL_URL);
+        if (isCancelled) return;
+        const head = headRef.current;
+        if (!head) return;
+        headaudio.onvalue = (key, value) => {
+          var _a2;
+          if ((_a2 = head.mtAvatar) == null ? void 0 : _a2[key]) {
+            Object.assign(head.mtAvatar[key], {
+              newvalue: value,
+              needsUpdate: true
+            });
+          }
+        };
+        head.opt.update = headaudio.update.bind(headaudio);
+        if (enableGestures) {
+          let lastEnded = 0;
+          headaudio.onended = () => {
+            lastEnded = Date.now();
+          };
+          headaudio.onstarted = () => {
+            const duration = Date.now() - lastEnded;
+            if (duration > 150) {
+              head.lookAtCamera(500);
+              head.speakWithHands();
+            }
+          };
+        }
+        const stream = new MediaStream([mediaStreamTrack]);
+        const sourceNode = audioCtx.createMediaStreamSource(stream);
+        sourceNode.connect(headaudio);
+        sourceNodeRef.current = sourceNode;
+      } catch (err) {
+        console.error("[LiveKitAvatar] Failed to connect audio bridge:", err);
+      }
+    };
+    void connectAudioBridge();
+    return () => {
+      var _a2, _b, _c;
+      isCancelled = true;
+      (_a2 = sourceNodeRef.current) == null ? void 0 : _a2.disconnect();
+      sourceNodeRef.current = null;
+      (_b = headAudioRef.current) == null ? void 0 : _b.stop();
+      (_c = headAudioRef.current) == null ? void 0 : _c.disconnect();
+      headAudioRef.current = null;
+      if (audioCtxRef.current && audioCtxRef.current.state !== "closed") {
+        void audioCtxRef.current.close();
+      }
+      audioCtxRef.current = null;
+      if (headRef.current) {
+        headRef.current.opt.update = void 0;
+      }
+    };
+  }, [audioTrack, enableGestures]);
+  (0, import_react.useEffect)(() => {
+    const handleVisibility = () => {
+      if (!headRef.current) return;
+      if (document.visibilityState === "visible") {
+        headRef.current.start();
+      } else {
+        headRef.current.stop();
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibility);
+    return () => document.removeEventListener("visibilitychange", handleVisibility);
+  }, []);
+  const isLoading = loadingState === "idle" || loadingState === "loading-head" || loadingState === "loading-audio";
+  const isError = loadingState === "error";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `relative w-full h-full ${className != null ? className : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: containerRef,
+        className: "w-full h-full",
+        style: { minHeight: "300px" }
+      }
+    ),
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-black/20", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-white" }) }),
+    isError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-black/40 text-white text-sm", children: "Failed to load avatar" }),
+    loadingState === "ready" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarStateOverlay, { agentState })
+  ] });
+}
+function AvatarStateOverlay({ agentState }) {
+  const stateConfig = {
+    listening: { label: "Listening" },
+    speaking: { label: "Speaking" },
+    thinking: { label: "Processing" },
+    connecting: { label: "Connecting" },
+    initializing: { label: "Initializing" },
+    idle: { label: "Ready" },
+    disconnected: { label: "Disconnected" },
+    failed: { label: "Failed" },
+    "pre-connect-buffering": { label: "Buffering" }
+  };
+  const config = stateConfig[agentState];
+  if (!config) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute bottom-3 left-3 text-xs text-white bg-black/40 px-2 py-1 rounded", children: config.label });
+}
+async function loadWorkletFromCDN(ctx, url) {
+  const res = await fetch(url);
+  const text = await res.text();
+  const blob = new Blob([text], { type: "application/javascript" });
+  const blobUrl = URL.createObjectURL(blob);
+  await ctx.audioWorklet.addModule(blobUrl);
+  URL.revokeObjectURL(blobUrl);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LiveKitAvatar
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/LiveKitAvatar.tsx"],"sourcesContent":["export { LiveKitAvatar } from './LiveKitAvatar';\nexport type { LiveKitAvatarProps } from './LiveKitAvatar';","import { useEffect, useRef, useState, useCallback } from 'react';\nimport { useVoiceAssistant } from '@livekit/components-react';\nimport type { AgentState } from '@livekit/components-react';\nimport type { TalkingHead } from '@met4citizen/talkinghead';\nimport type { HeadAudio } from '@met4citizen/headaudio/modules/headaudio.mjs';\n\nconst CDN_WORKLET_URL =\n  'https://unpkg.com/@met4citizen/headaudio/dist/headworklet.min.mjs';\nconst CDN_MODEL_URL =\n  'https://unpkg.com/@met4citizen/headaudio/dist/model-en-mixed.bin';\n\nconst VAD_GATE_ACTIVE_DB = -40;\nconst VAD_GATE_INACTIVE_DB = -60;\n\nexport interface LiveKitAvatarProps {\n  modelUrl: string;\n  bodyStyle?: 'M' | 'F';\n  cameraView?: 'upper' | 'full' | 'head';\n  avatarMood?: string;\n  enableGestures?: boolean;\n  className?: string;\n}\n\ntype AvatarLoadingState = 'idle' | 'loading-head' | 'loading-audio' | 'ready' | 'error';\n\nexport function LiveKitAvatar({\n  modelUrl,\n  bodyStyle = 'F',\n  cameraView = 'upper',\n  avatarMood = 'neutral',\n  enableGestures = true,\n  className\n}: LiveKitAvatarProps) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const headRef = useRef<TalkingHead | null>(null);\n  const audioCtxRef = useRef<AudioContext | null>(null);\n  const headAudioRef = useRef<HeadAudio | null>(null);\n  const sourceNodeRef = useRef<MediaStreamAudioSourceNode | null>(null);\n  const isInitializedRef = useRef<boolean>(false);\n\n  const [loadingState, setLoadingState] = useState<AvatarLoadingState>('idle');\n\n  const { audioTrack, state: agentState } = useVoiceAssistant();\n\n  const cleanup = useCallback(() => {\n    sourceNodeRef.current?.disconnect();\n    sourceNodeRef.current = null;\n    headAudioRef.current?.stop();\n    headAudioRef.current?.disconnect();\n    headAudioRef.current = null;\n\n    if (audioCtxRef.current && audioCtxRef.current.state !== 'closed') {\n      void audioCtxRef.current.close();\n    }\n    audioCtxRef.current = null;\n\n    if (headRef.current) {\n      headRef.current.stop();\n    }\n    headRef.current = null;\n\n    if (containerRef.current) {\n      containerRef.current.innerHTML = '';\n    }\n\n    isInitializedRef.current = false;\n  }, []);\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    let isCancelled = false;\n\n    const initializeHead = async () => {\n      setLoadingState('loading-head');\n\n      try {\n        const { TalkingHead } = await import('@met4citizen/talkinghead');\n\n        if (isCancelled || !containerRef.current) return;\n\n        const head = new TalkingHead(containerRef.current, {\n          cameraView,\n          avatarMood,\n          // Disable built-in text-driven lipsync, we use HeadAudio instead\n          lipsyncModules: []\n        });\n\n        await head.showAvatar(\n          {\n            url: modelUrl,\n            body: bodyStyle,\n            avatarMood,\n            lipsyncLang: 'en'\n          },\n          (ev: ProgressEvent) => {\n            if (ev.lengthComputable) {\n              const pct = Math.round((ev.loaded / ev.total) * 100);\n              if (pct === 100) setLoadingState('loading-audio');\n            }\n          }\n        );\n\n        if (isCancelled) return;\n\n        headRef.current = head;\n        isInitializedRef.current = true;\n        setLoadingState('ready');\n      } catch (err) {\n        if (isCancelled) return;\n        // eslint-disable-next-line no-console\n        console.error('[LiveKitAvatar] Failed to initialize 3D head:', err);\n        setLoadingState('error');\n      }\n    };\n\n    void initializeHead();\n\n    return () => {\n      isCancelled = true;\n      cleanup();\n    };\n  }, [modelUrl, bodyStyle, cameraView, avatarMood, cleanup]);\n\n  useEffect(() => {\n    if (!headRef.current || !isInitializedRef.current) return;\n    if (!audioTrack?.publication?.track) return;\n\n    const mediaStreamTrack = audioTrack.publication.track.mediaStreamTrack;\n    if (!mediaStreamTrack) return;\n\n    let isCancelled = false;\n\n    const connectAudioBridge = async () => {\n      try {\n        const audioCtx = new AudioContext();\n        audioCtxRef.current = audioCtx;\n\n        await loadWorkletFromCDN(audioCtx, CDN_WORKLET_URL);\n\n        if (isCancelled) {\n          await audioCtx.close();\n          return;\n        }\n\n        const { HeadAudio } = await import(\n          '@met4citizen/headaudio/modules/headaudio.mjs'\n        );\n\n        if (isCancelled) {\n          await audioCtx.close();\n          return;\n        }\n\n        const headaudio = new HeadAudio(audioCtx, {\n          parameterData: {\n            vadGateActiveDb: VAD_GATE_ACTIVE_DB,\n            vadGateInactiveDb: VAD_GATE_INACTIVE_DB\n          }\n        });\n        headAudioRef.current = headaudio;\n\n        await headaudio.loadModel(CDN_MODEL_URL);\n\n        if (isCancelled) return;\n\n        const head = headRef.current;\n        if (!head) return;\n\n        headaudio.onvalue = (key: string, value: number) => {\n          if (head.mtAvatar?.[key]) {\n            Object.assign(head.mtAvatar[key], {\n              newvalue: value,\n              needsUpdate: true\n            });\n          }\n        };\n\n        head.opt.update = headaudio.update.bind(headaudio);\n\n        if (enableGestures) {\n          let lastEnded = 0;\n          headaudio.onended = () => {\n            lastEnded = Date.now();\n          };\n          headaudio.onstarted = () => {\n            const duration = Date.now() - lastEnded;\n            if (duration > 150) {\n              head.lookAtCamera(500);\n              head.speakWithHands();\n            }\n          };\n        }\n\n        const stream = new MediaStream([mediaStreamTrack]);\n        const sourceNode = audioCtx.createMediaStreamSource(stream);\n        sourceNode.connect(headaudio);\n        sourceNodeRef.current = sourceNode;\n      } catch (err) {\n        // eslint-disable-next-line no-console\n        console.error('[LiveKitAvatar] Failed to connect audio bridge:', err);\n      }\n    };\n\n    void connectAudioBridge();\n\n    return () => {\n      isCancelled = true;\n      sourceNodeRef.current?.disconnect();\n      sourceNodeRef.current = null;\n      headAudioRef.current?.stop();\n      headAudioRef.current?.disconnect();\n      headAudioRef.current = null;\n      if (audioCtxRef.current && audioCtxRef.current.state !== 'closed') {\n        void audioCtxRef.current.close();\n      }\n      audioCtxRef.current = null;\n      if (headRef.current) {\n        headRef.current.opt.update = undefined;\n      }\n    };\n  }, [audioTrack, enableGestures]);\n\n  useEffect(() => {\n    const handleVisibility = () => {\n      if (!headRef.current) return;\n      if (document.visibilityState === 'visible') {\n        headRef.current.start();\n      } else {\n        headRef.current.stop();\n      }\n    };\n\n    document.addEventListener('visibilitychange', handleVisibility);\n    return () => document.removeEventListener('visibilitychange', handleVisibility);\n  }, []);\n\n  const isLoading =\n    loadingState === 'idle' ||\n    loadingState === 'loading-head' ||\n    loadingState === 'loading-audio';\n  const isError = loadingState === 'error';\n\n  return (\n    <div className={`relative w-full h-full ${className ?? ''}`}>\n      <div\n        ref={containerRef}\n        className=\"w-full h-full\"\n        style={{ minHeight: '300px' }}\n      />\n\n      {isLoading && (\n        <div className=\"absolute inset-0 flex flex-col items-center justify-center bg-black/20\">\n          <div className=\"animate-spin rounded-full h-8 w-8 border-b-2 border-white\" />\n        </div>\n      )}\n\n      {isError && (\n        <div className=\"absolute inset-0 flex flex-col items-center justify-center bg-black/40 text-white text-sm\">\n          Failed to load avatar\n        </div>\n      )}\n\n      {loadingState === 'ready' && <AvatarStateOverlay agentState={agentState} />}\n    </div>\n  );\n}\n\nfunction AvatarStateOverlay({ agentState }: { agentState: AgentState }) {\n  const stateConfig: Record<string, { label: string }> = {\n    listening: { label: 'Listening' },\n    speaking: { label: 'Speaking' },\n    thinking: { label: 'Processing' },\n    connecting: { label: 'Connecting' },\n    initializing: { label: 'Initializing' },\n    idle: { label: 'Ready' },\n    disconnected: { label: 'Disconnected' },\n    failed: { label: 'Failed' },\n    'pre-connect-buffering': { label: 'Buffering' }\n  };\n\n  const config = stateConfig[agentState];\n  if (!config) return null;\n\n  return (\n    <div className=\"absolute bottom-3 left-3 text-xs text-white bg-black/40 px-2 py-1 rounded\">\n      {config.label}\n    </div>\n  );\n}\n\nasync function loadWorkletFromCDN(\n  ctx: AudioContext,\n  url: string\n): Promise<void> {\n  const res = await fetch(url);\n  const text = await res.text();\n  const blob = new Blob([text], { type: 'application/javascript' });\n  const blobUrl = URL.createObjectURL(blob);\n  await ctx.audioWorklet.addModule(blobUrl);\n  URL.revokeObjectURL(blobUrl);\n}"],"mappings":"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","names":["_a"]}

package/dist/index.mjs

@@ -0,0 +1,227 @@
+"use client";
+
+// src/LiveKitAvatar.tsx
+import { useEffect, useRef, useState, useCallback } from "react";
+import { useVoiceAssistant } from "@livekit/components-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CDN_WORKLET_URL = "https://unpkg.com/@met4citizen/headaudio/dist/headworklet.min.mjs";
+var CDN_MODEL_URL = "https://unpkg.com/@met4citizen/headaudio/dist/model-en-mixed.bin";
+var VAD_GATE_ACTIVE_DB = -40;
+var VAD_GATE_INACTIVE_DB = -60;
+function LiveKitAvatar({
+  modelUrl,
+  bodyStyle = "F",
+  cameraView = "upper",
+  avatarMood = "neutral",
+  enableGestures = true,
+  className
+}) {
+  const containerRef = useRef(null);
+  const headRef = useRef(null);
+  const audioCtxRef = useRef(null);
+  const headAudioRef = useRef(null);
+  const sourceNodeRef = useRef(null);
+  const isInitializedRef = useRef(false);
+  const [loadingState, setLoadingState] = useState("idle");
+  const { audioTrack, state: agentState } = useVoiceAssistant();
+  const cleanup = useCallback(() => {
+    var _a, _b, _c;
+    (_a = sourceNodeRef.current) == null ? void 0 : _a.disconnect();
+    sourceNodeRef.current = null;
+    (_b = headAudioRef.current) == null ? void 0 : _b.stop();
+    (_c = headAudioRef.current) == null ? void 0 : _c.disconnect();
+    headAudioRef.current = null;
+    if (audioCtxRef.current && audioCtxRef.current.state !== "closed") {
+      void audioCtxRef.current.close();
+    }
+    audioCtxRef.current = null;
+    if (headRef.current) {
+      headRef.current.stop();
+    }
+    headRef.current = null;
+    if (containerRef.current) {
+      containerRef.current.innerHTML = "";
+    }
+    isInitializedRef.current = false;
+  }, []);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    let isCancelled = false;
+    const initializeHead = async () => {
+      setLoadingState("loading-head");
+      try {
+        const { TalkingHead } = await import("@met4citizen/talkinghead");
+        if (isCancelled || !containerRef.current) return;
+        const head = new TalkingHead(containerRef.current, {
+          cameraView,
+          avatarMood,
+          // Disable built-in text-driven lipsync, we use HeadAudio instead
+          lipsyncModules: []
+        });
+        await head.showAvatar(
+          {
+            url: modelUrl,
+            body: bodyStyle,
+            avatarMood,
+            lipsyncLang: "en"
+          },
+          (ev) => {
+            if (ev.lengthComputable) {
+              const pct = Math.round(ev.loaded / ev.total * 100);
+              if (pct === 100) setLoadingState("loading-audio");
+            }
+          }
+        );
+        if (isCancelled) return;
+        headRef.current = head;
+        isInitializedRef.current = true;
+        setLoadingState("ready");
+      } catch (err) {
+        if (isCancelled) return;
+        console.error("[LiveKitAvatar] Failed to initialize 3D head:", err);
+        setLoadingState("error");
+      }
+    };
+    void initializeHead();
+    return () => {
+      isCancelled = true;
+      cleanup();
+    };
+  }, [modelUrl, bodyStyle, cameraView, avatarMood, cleanup]);
+  useEffect(() => {
+    var _a;
+    if (!headRef.current || !isInitializedRef.current) return;
+    if (!((_a = audioTrack == null ? void 0 : audioTrack.publication) == null ? void 0 : _a.track)) return;
+    const mediaStreamTrack = audioTrack.publication.track.mediaStreamTrack;
+    if (!mediaStreamTrack) return;
+    let isCancelled = false;
+    const connectAudioBridge = async () => {
+      try {
+        const audioCtx = new AudioContext();
+        audioCtxRef.current = audioCtx;
+        await loadWorkletFromCDN(audioCtx, CDN_WORKLET_URL);
+        if (isCancelled) {
+          await audioCtx.close();
+          return;
+        }
+        const { HeadAudio } = await import("@met4citizen/headaudio/modules/headaudio.mjs");
+        if (isCancelled) {
+          await audioCtx.close();
+          return;
+        }
+        const headaudio = new HeadAudio(audioCtx, {
+          parameterData: {
+            vadGateActiveDb: VAD_GATE_ACTIVE_DB,
+            vadGateInactiveDb: VAD_GATE_INACTIVE_DB
+          }
+        });
+        headAudioRef.current = headaudio;
+        await headaudio.loadModel(CDN_MODEL_URL);
+        if (isCancelled) return;
+        const head = headRef.current;
+        if (!head) return;
+        headaudio.onvalue = (key, value) => {
+          var _a2;
+          if ((_a2 = head.mtAvatar) == null ? void 0 : _a2[key]) {
+            Object.assign(head.mtAvatar[key], {
+              newvalue: value,
+              needsUpdate: true
+            });
+          }
+        };
+        head.opt.update = headaudio.update.bind(headaudio);
+        if (enableGestures) {
+          let lastEnded = 0;
+          headaudio.onended = () => {
+            lastEnded = Date.now();
+          };
+          headaudio.onstarted = () => {
+            const duration = Date.now() - lastEnded;
+            if (duration > 150) {
+              head.lookAtCamera(500);
+              head.speakWithHands();
+            }
+          };
+        }
+        const stream = new MediaStream([mediaStreamTrack]);
+        const sourceNode = audioCtx.createMediaStreamSource(stream);
+        sourceNode.connect(headaudio);
+        sourceNodeRef.current = sourceNode;
+      } catch (err) {
+        console.error("[LiveKitAvatar] Failed to connect audio bridge:", err);
+      }
+    };
+    void connectAudioBridge();
+    return () => {
+      var _a2, _b, _c;
+      isCancelled = true;
+      (_a2 = sourceNodeRef.current) == null ? void 0 : _a2.disconnect();
+      sourceNodeRef.current = null;
+      (_b = headAudioRef.current) == null ? void 0 : _b.stop();
+      (_c = headAudioRef.current) == null ? void 0 : _c.disconnect();
+      headAudioRef.current = null;
+      if (audioCtxRef.current && audioCtxRef.current.state !== "closed") {
+        void audioCtxRef.current.close();
+      }
+      audioCtxRef.current = null;
+      if (headRef.current) {
+        headRef.current.opt.update = void 0;
+      }
+    };
+  }, [audioTrack, enableGestures]);
+  useEffect(() => {
+    const handleVisibility = () => {
+      if (!headRef.current) return;
+      if (document.visibilityState === "visible") {
+        headRef.current.start();
+      } else {
+        headRef.current.stop();
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibility);
+    return () => document.removeEventListener("visibilitychange", handleVisibility);
+  }, []);
+  const isLoading = loadingState === "idle" || loadingState === "loading-head" || loadingState === "loading-audio";
+  const isError = loadingState === "error";
+  return /* @__PURE__ */ jsxs("div", { className: `relative w-full h-full ${className != null ? className : ""}`, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        className: "w-full h-full",
+        style: { minHeight: "300px" }
+      }
+    ),
+    isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-black/20", children: /* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-8 w-8 border-b-2 border-white" }) }),
+    isError && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-black/40 text-white text-sm", children: "Failed to load avatar" }),
+    loadingState === "ready" && /* @__PURE__ */ jsx(AvatarStateOverlay, { agentState })
+  ] });
+}
+function AvatarStateOverlay({ agentState }) {
+  const stateConfig = {
+    listening: { label: "Listening" },
+    speaking: { label: "Speaking" },
+    thinking: { label: "Processing" },
+    connecting: { label: "Connecting" },
+    initializing: { label: "Initializing" },
+    idle: { label: "Ready" },
+    disconnected: { label: "Disconnected" },
+    failed: { label: "Failed" },
+    "pre-connect-buffering": { label: "Buffering" }
+  };
+  const config = stateConfig[agentState];
+  if (!config) return null;
+  return /* @__PURE__ */ jsx("div", { className: "absolute bottom-3 left-3 text-xs text-white bg-black/40 px-2 py-1 rounded", children: config.label });
+}
+async function loadWorkletFromCDN(ctx, url) {
+  const res = await fetch(url);
+  const text = await res.text();
+  const blob = new Blob([text], { type: "application/javascript" });
+  const blobUrl = URL.createObjectURL(blob);
+  await ctx.audioWorklet.addModule(blobUrl);
+  URL.revokeObjectURL(blobUrl);
+}
+export {
+  LiveKitAvatar
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/LiveKitAvatar.tsx"],"sourcesContent":["import { useEffect, useRef, useState, useCallback } from 'react';\nimport { useVoiceAssistant } from '@livekit/components-react';\nimport type { AgentState } from '@livekit/components-react';\nimport type { TalkingHead } from '@met4citizen/talkinghead';\nimport type { HeadAudio } from '@met4citizen/headaudio/modules/headaudio.mjs';\n\nconst CDN_WORKLET_URL =\n  'https://unpkg.com/@met4citizen/headaudio/dist/headworklet.min.mjs';\nconst CDN_MODEL_URL =\n  'https://unpkg.com/@met4citizen/headaudio/dist/model-en-mixed.bin';\n\nconst VAD_GATE_ACTIVE_DB = -40;\nconst VAD_GATE_INACTIVE_DB = -60;\n\nexport interface LiveKitAvatarProps {\n  modelUrl: string;\n  bodyStyle?: 'M' | 'F';\n  cameraView?: 'upper' | 'full' | 'head';\n  avatarMood?: string;\n  enableGestures?: boolean;\n  className?: string;\n}\n\ntype AvatarLoadingState = 'idle' | 'loading-head' | 'loading-audio' | 'ready' | 'error';\n\nexport function LiveKitAvatar({\n  modelUrl,\n  bodyStyle = 'F',\n  cameraView = 'upper',\n  avatarMood = 'neutral',\n  enableGestures = true,\n  className\n}: LiveKitAvatarProps) {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const headRef = useRef<TalkingHead | null>(null);\n  const audioCtxRef = useRef<AudioContext | null>(null);\n  const headAudioRef = useRef<HeadAudio | null>(null);\n  const sourceNodeRef = useRef<MediaStreamAudioSourceNode | null>(null);\n  const isInitializedRef = useRef<boolean>(false);\n\n  const [loadingState, setLoadingState] = useState<AvatarLoadingState>('idle');\n\n  const { audioTrack, state: agentState } = useVoiceAssistant();\n\n  const cleanup = useCallback(() => {\n    sourceNodeRef.current?.disconnect();\n    sourceNodeRef.current = null;\n    headAudioRef.current?.stop();\n    headAudioRef.current?.disconnect();\n    headAudioRef.current = null;\n\n    if (audioCtxRef.current && audioCtxRef.current.state !== 'closed') {\n      void audioCtxRef.current.close();\n    }\n    audioCtxRef.current = null;\n\n    if (headRef.current) {\n      headRef.current.stop();\n    }\n    headRef.current = null;\n\n    if (containerRef.current) {\n      containerRef.current.innerHTML = '';\n    }\n\n    isInitializedRef.current = false;\n  }, []);\n\n  useEffect(() => {\n    if (!containerRef.current) return;\n\n    let isCancelled = false;\n\n    const initializeHead = async () => {\n      setLoadingState('loading-head');\n\n      try {\n        const { TalkingHead } = await import('@met4citizen/talkinghead');\n\n        if (isCancelled || !containerRef.current) return;\n\n        const head = new TalkingHead(containerRef.current, {\n          cameraView,\n          avatarMood,\n          // Disable built-in text-driven lipsync, we use HeadAudio instead\n          lipsyncModules: []\n        });\n\n        await head.showAvatar(\n          {\n            url: modelUrl,\n            body: bodyStyle,\n            avatarMood,\n            lipsyncLang: 'en'\n          },\n          (ev: ProgressEvent) => {\n            if (ev.lengthComputable) {\n              const pct = Math.round((ev.loaded / ev.total) * 100);\n              if (pct === 100) setLoadingState('loading-audio');\n            }\n          }\n        );\n\n        if (isCancelled) return;\n\n        headRef.current = head;\n        isInitializedRef.current = true;\n        setLoadingState('ready');\n      } catch (err) {\n        if (isCancelled) return;\n        // eslint-disable-next-line no-console\n        console.error('[LiveKitAvatar] Failed to initialize 3D head:', err);\n        setLoadingState('error');\n      }\n    };\n\n    void initializeHead();\n\n    return () => {\n      isCancelled = true;\n      cleanup();\n    };\n  }, [modelUrl, bodyStyle, cameraView, avatarMood, cleanup]);\n\n  useEffect(() => {\n    if (!headRef.current || !isInitializedRef.current) return;\n    if (!audioTrack?.publication?.track) return;\n\n    const mediaStreamTrack = audioTrack.publication.track.mediaStreamTrack;\n    if (!mediaStreamTrack) return;\n\n    let isCancelled = false;\n\n    const connectAudioBridge = async () => {\n      try {\n        const audioCtx = new AudioContext();\n        audioCtxRef.current = audioCtx;\n\n        await loadWorkletFromCDN(audioCtx, CDN_WORKLET_URL);\n\n        if (isCancelled) {\n          await audioCtx.close();\n          return;\n        }\n\n        const { HeadAudio } = await import(\n          '@met4citizen/headaudio/modules/headaudio.mjs'\n        );\n\n        if (isCancelled) {\n          await audioCtx.close();\n          return;\n        }\n\n        const headaudio = new HeadAudio(audioCtx, {\n          parameterData: {\n            vadGateActiveDb: VAD_GATE_ACTIVE_DB,\n            vadGateInactiveDb: VAD_GATE_INACTIVE_DB\n          }\n        });\n        headAudioRef.current = headaudio;\n\n        await headaudio.loadModel(CDN_MODEL_URL);\n\n        if (isCancelled) return;\n\n        const head = headRef.current;\n        if (!head) return;\n\n        headaudio.onvalue = (key: string, value: number) => {\n          if (head.mtAvatar?.[key]) {\n            Object.assign(head.mtAvatar[key], {\n              newvalue: value,\n              needsUpdate: true\n            });\n          }\n        };\n\n        head.opt.update = headaudio.update.bind(headaudio);\n\n        if (enableGestures) {\n          let lastEnded = 0;\n          headaudio.onended = () => {\n            lastEnded = Date.now();\n          };\n          headaudio.onstarted = () => {\n            const duration = Date.now() - lastEnded;\n            if (duration > 150) {\n              head.lookAtCamera(500);\n              head.speakWithHands();\n            }\n          };\n        }\n\n        const stream = new MediaStream([mediaStreamTrack]);\n        const sourceNode = audioCtx.createMediaStreamSource(stream);\n        sourceNode.connect(headaudio);\n        sourceNodeRef.current = sourceNode;\n      } catch (err) {\n        // eslint-disable-next-line no-console\n        console.error('[LiveKitAvatar] Failed to connect audio bridge:', err);\n      }\n    };\n\n    void connectAudioBridge();\n\n    return () => {\n      isCancelled = true;\n      sourceNodeRef.current?.disconnect();\n      sourceNodeRef.current = null;\n      headAudioRef.current?.stop();\n      headAudioRef.current?.disconnect();\n      headAudioRef.current = null;\n      if (audioCtxRef.current && audioCtxRef.current.state !== 'closed') {\n        void audioCtxRef.current.close();\n      }\n      audioCtxRef.current = null;\n      if (headRef.current) {\n        headRef.current.opt.update = undefined;\n      }\n    };\n  }, [audioTrack, enableGestures]);\n\n  useEffect(() => {\n    const handleVisibility = () => {\n      if (!headRef.current) return;\n      if (document.visibilityState === 'visible') {\n        headRef.current.start();\n      } else {\n        headRef.current.stop();\n      }\n    };\n\n    document.addEventListener('visibilitychange', handleVisibility);\n    return () => document.removeEventListener('visibilitychange', handleVisibility);\n  }, []);\n\n  const isLoading =\n    loadingState === 'idle' ||\n    loadingState === 'loading-head' ||\n    loadingState === 'loading-audio';\n  const isError = loadingState === 'error';\n\n  return (\n    <div className={`relative w-full h-full ${className ?? ''}`}>\n      <div\n        ref={containerRef}\n        className=\"w-full h-full\"\n        style={{ minHeight: '300px' }}\n      />\n\n      {isLoading && (\n        <div className=\"absolute inset-0 flex flex-col items-center justify-center bg-black/20\">\n          <div className=\"animate-spin rounded-full h-8 w-8 border-b-2 border-white\" />\n        </div>\n      )}\n\n      {isError && (\n        <div className=\"absolute inset-0 flex flex-col items-center justify-center bg-black/40 text-white text-sm\">\n          Failed to load avatar\n        </div>\n      )}\n\n      {loadingState === 'ready' && <AvatarStateOverlay agentState={agentState} />}\n    </div>\n  );\n}\n\nfunction AvatarStateOverlay({ agentState }: { agentState: AgentState }) {\n  const stateConfig: Record<string, { label: string }> = {\n    listening: { label: 'Listening' },\n    speaking: { label: 'Speaking' },\n    thinking: { label: 'Processing' },\n    connecting: { label: 'Connecting' },\n    initializing: { label: 'Initializing' },\n    idle: { label: 'Ready' },\n    disconnected: { label: 'Disconnected' },\n    failed: { label: 'Failed' },\n    'pre-connect-buffering': { label: 'Buffering' }\n  };\n\n  const config = stateConfig[agentState];\n  if (!config) return null;\n\n  return (\n    <div className=\"absolute bottom-3 left-3 text-xs text-white bg-black/40 px-2 py-1 rounded\">\n      {config.label}\n    </div>\n  );\n}\n\nasync function loadWorkletFromCDN(\n  ctx: AudioContext,\n  url: string\n): Promise<void> {\n  const res = await fetch(url);\n  const text = await res.text();\n  const blob = new Blob([text], { type: 'application/javascript' });\n  const blobUrl = URL.createObjectURL(blob);\n  await ctx.audioWorklet.addModule(blobUrl);\n  URL.revokeObjectURL(blobUrl);\n}"],"mappings":"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","names":["_a"]}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@open-avatar/livekit-react",
+  "version": "0.1.0",
+  "author": "jempf",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jempf/open-avatar-livekit.git"
+  },
+  "homepage": "https://github.com/jempf/open-avatar-livekit#readme",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@livekit/components-react": ">=2.9.0",
+    "livekit-client": ">=2.17.0"
+  },
+  "dependencies": {
+    "@met4citizen/talkinghead": "^1.7.0",
+    "@met4citizen/headaudio": "^0.1.0"
+  }
+}