@sage-rsc/talking-head-react 1.0.70 → 1.0.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sage-rsc/talking-head-react",
-  "version": "1.0.70",
+  "version": "1.0.71",
   "description": "A reusable React component for 3D talking avatars with lip-sync and text-to-speech",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",

package/src/components/SimpleTalkingAvatar.jsx

@@ -178,7 +178,7 @@ const SimpleTalkingAvatar = forwardRef(({
       setIsLoading(false);
       onError(err);
     }
-  }, [avatarUrl, avatarBody, mood, ttsLang, effectiveTtsService, ttsVoice, ttsApiKey, bodyMovement, movementIntensity, showFullAvatar, cameraView, onLoading, onReady, onError]);
+  }, []); // Empty deps - only initialize once
 
   useEffect(() => {
     initializeTalkingHead();
@@ -192,15 +192,31 @@ const SimpleTalkingAvatar = forwardRef(({
     };
   }, [initializeTalkingHead]);
 
+  // Resume audio context helper
+  const resumeAudioContext = useCallback(async () => {
+    if (talkingHeadRef.current) {
+      try {
+        // Try to access audio context through talkingHead instance
+        const audioCtx = talkingHeadRef.current.audioCtx || talkingHeadRef.current.audioContext;
+        if (audioCtx && (audioCtx.state === 'suspended' || audioCtx.state === 'interrupted')) {
+          await audioCtx.resume();
+          console.log('Audio context resumed');
+        }
+      } catch (err) {
+        console.warn('Failed to resume audio context:', err);
+      }
+    }
+  }, []);
+
   // Auto-speak text when ready and autoSpeak is true
   useEffect(() => {
     if (isReady && text && autoSpeak && talkingHeadRef.current) {
       speakText(text);
     }
-  }, [isReady, text, autoSpeak]);
+  }, [isReady, text, autoSpeak, speakText]);
 
   // Speak text with proper callback handling
-  const speakText = useCallback((textToSpeak, options = {}) => {
+  const speakText = useCallback(async (textToSpeak, options = {}) => {
     if (!talkingHeadRef.current || !isReady) {
       console.warn('Avatar not ready for speaking');
       return;
@@ -211,6 +227,9 @@ const SimpleTalkingAvatar = forwardRef(({
       return;
     }
 
+    // Always resume audio context first (required for user interaction)
+    await resumeAudioContext();
+
     // Reset speech progress tracking
     speechProgressRef.current = { remainingText: null, originalText: null, options: null };
     originalSentencesRef.current = [];
@@ -255,7 +274,7 @@ const SimpleTalkingAvatar = forwardRef(({
       console.error('Error speaking text:', err);
       setError(err.message || 'Failed to speak text');
     }
-  }, [isReady, onSpeechEnd]);
+  }, [isReady, onSpeechEnd, resumeAudioContext]);
 
   // Pause speaking
   const pauseSpeaking = useCallback(() => {
@@ -308,10 +327,8 @@ const SimpleTalkingAvatar = forwardRef(({
     if (!talkingHeadRef.current || !isPaused) return;
 
     try {
-      // Resume audio context if needed
-      if (talkingHeadRef.current.audioContext && talkingHeadRef.current.audioContext.state === 'suspended') {
-        await talkingHeadRef.current.audioContext.resume();
-      }
+      // Resume audio context first
+      await resumeAudioContext();
 
       setIsPaused(false);
       isPausedRef.current = false;
@@ -331,7 +348,7 @@ const SimpleTalkingAvatar = forwardRef(({
       setIsPaused(false);
       isPausedRef.current = false;
     }
-  }, [isPaused, speakText]);
+  }, [isPaused, speakText, resumeAudioContext]);
 
   // Stop speaking
   const stopSpeaking = useCallback(() => {
@@ -352,6 +369,7 @@ const SimpleTalkingAvatar = forwardRef(({
     pauseSpeaking,
     resumeSpeaking,
     stopSpeaking,
+    resumeAudioContext,
     isPaused: () => isPaused,
     setMood: (mood) => talkingHeadRef.current?.setMood(mood),
     setBodyMovement: (movement) => {