@sage-rsc/talking-head-react 1.0.50 → 1.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sage-rsc/talking-head-react",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "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/CurriculumLearning.jsx

@@ -299,8 +299,10 @@ const CurriculumLearning = forwardRef(({
       });
     }
       
-    // Ensure avatar is ready before speaking
-    if (avatarRef.current && avatarRef.current.isReady && firstQuestion) {
+    // Function to speak the first question
+    const speakFirstQuestion = () => {
+      if (!avatarRef.current || !firstQuestion) return;
+      
       avatarRef.current.setMood("curious");
       
       // Play custom animation if available
@@ -324,16 +326,30 @@ const CurriculumLearning = forwardRef(({
         } else {
         avatarRef.current.speakText(`Now let me ask you some questions. Here's the first one: ${firstQuestion.question}`, { lipsyncLang: config.lipsyncLang });
       }
+    };
+    
+    // Try to speak immediately if avatar is ready
+    if (avatarRef.current && avatarRef.current.isReady && firstQuestion) {
+      speakFirstQuestion();
     } else if (avatarRef.current && avatarRef.current.isReady) {
+      // No question but avatar ready - just announce
       const config = defaultAvatarConfigRef.current || { lipsyncLang: 'en' };
       avatarRef.current.speakText("Now let me ask you some questions to test your understanding.", { lipsyncLang: config.lipsyncLang });
     } else {
-      // Avatar not ready yet, retry after a short delay
-      setTimeout(() => {
-        if (startQuestionsRef.current) {
-          startQuestionsRef.current();
+      // Avatar not ready yet - wait for it to be ready, then speak
+      const checkReady = setInterval(() => {
+        if (avatarRef.current && avatarRef.current.isReady) {
+          clearInterval(checkReady);
+          if (firstQuestion) {
+            speakFirstQuestion();
+          }
         }
       }, 100);
+      
+      // Timeout after 5 seconds
+      setTimeout(() => {
+        clearInterval(checkReady);
+      }, 5000);
     }
   }, [animations.questionStart, getCurrentLesson, getCurrentQuestion]);
 
@@ -357,15 +373,18 @@ const CurriculumLearning = forwardRef(({
         });
       }
     
-      if (avatarRef.current && nextQuestionObj) {
+      // Function to speak the next question
+      const speakNextQuestion = () => {
+        if (!avatarRef.current || !nextQuestionObj) return;
+        
       avatarRef.current.setMood("happy");
         avatarRef.current.setBodyMovement("idle");
-      
+        
         // Play custom animation if available
         if (animations.nextQuestion) {
           try {
             avatarRef.current.playAnimation(animations.nextQuestion, true);
-        } catch (error) {
+          } catch (error) {
             console.warn('Failed to play nextQuestion animation:', error);
           }
         }
@@ -390,6 +409,24 @@ const CurriculumLearning = forwardRef(({
             lipsyncLang: config.lipsyncLang 
           });
         }
+      };
+      
+      // Try to speak immediately if avatar is ready
+      if (avatarRef.current && avatarRef.current.isReady && nextQuestionObj) {
+        speakNextQuestion();
+      } else if (nextQuestionObj) {
+        // Avatar not ready yet - wait for it to be ready, then speak
+        const checkReady = setInterval(() => {
+          if (avatarRef.current && avatarRef.current.isReady) {
+            clearInterval(checkReady);
+            speakNextQuestion();
+          }
+        }, 100);
+        
+        // Timeout after 5 seconds
+        setTimeout(() => {
+          clearInterval(checkReady);
+        }, 5000);
       }
     } else {
       // No more questions - notify parent that all questions are done

package/src/components/TalkingHeadAvatar.jsx

@@ -289,120 +289,71 @@ const TalkingHeadAvatar = forwardRef(({
           const talkingHead = talkingHeadRef.current;
           
           // Set up a polling mechanism to detect when speech finishes
-          // Wait for audio to actually start playing before checking if it's finished
           let checkInterval = null;
           let checkCount = 0;
-          let audioStarted = false;
           const maxChecks = 1200; // 60 seconds max (50ms intervals)
-          const maxWaitForAudioStart = 10000; // 10 seconds max to wait for audio to start
+          let callbackFired = false;
           
-          // First, wait for audio to actually start playing (API call completes and audio is added to playlist)
-          let waitForAudioStartCount = 0;
-          const waitForAudioStart = setInterval(() => {
-            waitForAudioStartCount++;
-            
-            // Check if audio has started playing (audioPlaylist has items OR isAudioPlaying is true)
-            // Also check if isSpeaking is true (indicating API call has started processing)
-            if (talkingHead && talkingHead.isSpeaking && (
-              (talkingHead.audioPlaylist && talkingHead.audioPlaylist.length > 0) ||
-              (talkingHead.isAudioPlaying === true)
-            )) {
-              audioStarted = true;
-              clearInterval(waitForAudioStart);
-              
-              // Now start checking if speech has finished
-              checkInterval = setInterval(checkSpeechFinished, 50);
-            }
-            
-            // Also check if speech queue is empty and not speaking (meaning all sentences processed)
-            // This handles the case where text was split into sentences but all are processed
-            const speechQueueEmpty = !talkingHead.speechQueue || talkingHead.speechQueue.length === 0;
-            
-            if (talkingHead && !talkingHead.isSpeaking && speechQueueEmpty && 
-                (!talkingHead.audioPlaylist || talkingHead.audioPlaylist.length === 0) &&
-                (!talkingHead.isAudioPlaying || talkingHead.isAudioPlaying === false)) {
-              // All speech has finished (all sentences processed and audio finished)
-              clearInterval(waitForAudioStart);
-              try {
-                options.onSpeechEnd();
-              } catch (e) {
-                console.error('Error in onSpeechEnd callback:', e);
-              }
-              return;
-            }
-            
-            // Timeout if audio doesn't start within reasonable time
-            if (waitForAudioStartCount * 50 > maxWaitForAudioStart) {
-              clearInterval(waitForAudioStart);
-              // Check if speech has actually started (isSpeaking should be true)
-              // If isSpeaking is false, the speech might have failed or completed very quickly
-              if (talkingHead && talkingHead.isSpeaking) {
-                // Still waiting for API, but assume it will start soon
-                audioStarted = true;
-                checkInterval = setInterval(checkSpeechFinished, 50);
-              } else if (talkingHead && !talkingHead.isSpeaking && speechQueueEmpty &&
-                         (!talkingHead.audioPlaylist || talkingHead.audioPlaylist.length === 0) &&
-                         (!talkingHead.isAudioPlaying || talkingHead.isAudioPlaying === false)) {
-                // Speech never started or finished immediately, call callback
-                try {
-                  options.onSpeechEnd();
-                } catch (e) {
-                  console.error('Error in onSpeechEnd callback:', e);
-                }
-              }
-            }
-          }, 50);
-          
-          const checkSpeechFinished = () => {
+          // Start checking immediately - don't wait for audio to start
+          checkInterval = setInterval(() => {
             checkCount++;
+            
+            // Safety timeout - call callback anyway after max time
             if (checkCount > maxChecks) {
-              // Timeout - call callback anyway
               if (checkInterval) {
                 clearInterval(checkInterval);
                 checkInterval = null;
               }
-              try {
-                options.onSpeechEnd();
-              } catch (e) {
-                console.error('Error in onSpeechEnd callback:', e);
+              if (!callbackFired) {
+                callbackFired = true;
+                try {
+                  options.onSpeechEnd();
+                } catch (e) {
+                  console.error('Error in onSpeechEnd callback (timeout):', e);
+                }
               }
               return;
             }
             
-            // Only check if audio has started playing
-            if (!audioStarted) {
-              return;
-            }
-            
             // Check if speech has finished:
-            // 1. Not speaking OR speech queue is empty
-            // 2. Audio playlist is empty (no more audio to play)
-            // 3. Not currently playing audio
-            // 4. Speech queue is empty (all sentences have been processed)
+            // 1. isSpeaking is false (not currently processing speech)
+            // 2. speechQueue is empty (all sentences processed)
+            // 3. audioPlaylist is empty (no more audio to play)
+            // 4. isAudioPlaying is false (not currently playing audio)
             const speechQueueEmpty = !talkingHead.speechQueue || talkingHead.speechQueue.length === 0;
+            const audioPlaylistEmpty = !talkingHead.audioPlaylist || talkingHead.audioPlaylist.length === 0;
             
             const isFinished = talkingHead && 
-              (!talkingHead.isSpeaking || talkingHead.isSpeaking === false) && 
-              (!talkingHead.audioPlaylist || talkingHead.audioPlaylist.length === 0) &&
-              (!talkingHead.isAudioPlaying || talkingHead.isAudioPlaying === false) &&
-              speechQueueEmpty;
+              talkingHead.isSpeaking === false && 
+              speechQueueEmpty &&
+              audioPlaylistEmpty &&
+              talkingHead.isAudioPlaying === false;
             
-            if (isFinished) {
-              if (checkInterval) {
-                clearInterval(checkInterval);
-                checkInterval = null;
-              }
-              
-              // Small delay to ensure everything is settled
+            if (isFinished && !callbackFired) {
+              // Double-check after a small delay to ensure it's really finished
               setTimeout(() => {
-                try {
-                  options.onSpeechEnd();
-                } catch (e) {
-                  console.error('Error in onSpeechEnd callback:', e);
+                // Re-check one more time to be sure
+                const finalCheck = talkingHead && 
+                  talkingHead.isSpeaking === false && 
+                  (!talkingHead.speechQueue || talkingHead.speechQueue.length === 0) &&
+                  (!talkingHead.audioPlaylist || talkingHead.audioPlaylist.length === 0) &&
+                  talkingHead.isAudioPlaying === false;
+                
+                if (finalCheck && !callbackFired) {
+                  callbackFired = true;
+                  if (checkInterval) {
+                    clearInterval(checkInterval);
+                    checkInterval = null;
+                  }
+                  try {
+                    options.onSpeechEnd();
+                  } catch (e) {
+                    console.error('Error in onSpeechEnd callback:', e);
+                  }
                 }
-              }, 50);
+              }, 100);
             }
-          };
+          }, 100); // Check every 100ms for better reliability
         }
         
         if (talkingHeadRef.current.lipsync && Object.keys(talkingHeadRef.current.lipsync).length > 0) {

package/src/lib/talkinghead.mjs

@@ -180,9 +180,9 @@ class TalkingHead {
       lightSpotDispersion: 1,
       avatarMood: "neutral",
       avatarMute: false,
-      avatarIdleEyeContact: 0.2,
+      avatarIdleEyeContact: 0.6,
       avatarIdleHeadMove: 0.5,
-      avatarSpeakingEyeContact: 0.5,
+      avatarSpeakingEyeContact: 0.8,
       avatarSpeakingHeadMove: 0.5,
       avatarIgnoreCamera: false,
       listeningSilenceThresholdLevel: 40,
@@ -426,7 +426,7 @@ class TalkingHead {
 
     this.animMoods = {
       'neutral' : {
-        baseline: { eyesLookDown: 0.1 },
+        baseline: { eyesLookDown: 0 },
         speech: { deltaRate: 0, deltaPitch: 0, deltaVolume: 0 },
         anims: [
           { name: 'breathing', delay: 1500, dt: [ 1200,500,1000 ], vs: { chestInhale: [0.5,0.5,0] } },
@@ -448,7 +448,7 @@ class TalkingHead {
         ]
       },
       'happy' : {
-        baseline: { mouthSmile: 0.2, eyesLookDown: 0.1 },
+        baseline: { mouthSmile: 0.2, eyesLookDown: 0 },
         speech: { deltaRate: 0, deltaPitch: 0.1, deltaVolume: 0 },
         anims: [
           { name: 'breathing', delay: 1500, dt: [ 1200,500,1000 ], vs: { chestInhale: [0.5,0.5,0] } },