@sage-rsc/talking-head-react 1.0.61 → 1.0.63

package/package.json

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

@@ -52,11 +52,18 @@ const TalkingHeadAvatar = forwardRef(({
   const showFullAvatarRef = useRef(showFullAvatar);
   const pausedSpeechRef = useRef(null); // Track paused speech for resume
   const speechEndIntervalRef = useRef(null); // Track onSpeechEnd polling interval
+  const isPausedRef = useRef(false); // Track pause state for interval checks
+  const speechProgressRef = useRef({ remainingText: null, originalText: null, options: null }); // Track speech progress for resume
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const [isReady, setIsReady] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
   
+  // Keep ref in sync with state
+  useEffect(() => {
+    isPausedRef.current = isPaused;
+  }, [isPaused]);
+  
   // Update ref when prop changes
   useEffect(() => {
     showFullAvatarRef.current = showFullAvatar;
@@ -286,7 +293,10 @@ const TalkingHeadAvatar = forwardRef(({
         
         // Store speech for potential pause/resume
         pausedSpeechRef.current = { text: textToSpeak, options };
+        // Reset progress tracking when starting new speech
+        speechProgressRef.current = { remainingText: null, originalText: null, options: null };
         setIsPaused(false);
+        isPausedRef.current = false;
         
         // Always resume audio context first (required for user interaction)
         await resumeAudioContext();
@@ -311,8 +321,8 @@ const TalkingHeadAvatar = forwardRef(({
           checkInterval = setInterval(() => {
             checkCount++;
             
-            // Don't fire callback if paused
-            if (isPaused) {
+            // Don't fire callback if paused (check ref for current value)
+            if (isPausedRef.current) {
               return;
             }
             
@@ -323,7 +333,7 @@ const TalkingHeadAvatar = forwardRef(({
                 checkInterval = null;
                 speechEndIntervalRef.current = null;
               }
-              if (!callbackFired && !isPaused) {
+              if (!callbackFired && !isPausedRef.current) {
                 callbackFired = true;
                 try {
                   options.onSpeechEnd();
@@ -348,18 +358,18 @@ const TalkingHeadAvatar = forwardRef(({
               audioPlaylistEmpty &&
               talkingHead.isAudioPlaying === false;
             
-            if (isFinished && !callbackFired && !isPaused) {
+            if (isFinished && !callbackFired && !isPausedRef.current) {
               // Double-check after a small delay to ensure it's really finished
               setTimeout(() => {
                 // Re-check one more time to be sure, and make sure we're still not paused
                 const finalCheck = talkingHead && 
-                  !isPaused &&
+                  !isPausedRef.current &&
                   talkingHead.isSpeaking === false && 
                   (!talkingHead.speechQueue || talkingHead.speechQueue.length === 0) &&
                   (!talkingHead.audioPlaylist || talkingHead.audioPlaylist.length === 0) &&
                   talkingHead.isAudioPlaying === false;
                 
-                if (finalCheck && !callbackFired && !isPaused) {
+                if (finalCheck && !callbackFired && !isPausedRef.current) {
                   callbackFired = true;
                   if (checkInterval) {
                     clearInterval(checkInterval);
@@ -430,6 +440,29 @@ const TalkingHeadAvatar = forwardRef(({
           speechEndIntervalRef.current = null;
         }
         
+        // Save remaining text from speechQueue before clearing it
+        let remainingText = '';
+        if (talkingHead.speechQueue && talkingHead.speechQueue.length > 0) {
+          // Extract text from remaining queue items
+          const remainingParts = talkingHead.speechQueue
+            .filter(item => item.text) // Only get items with text
+            .map(item => item.text)
+            .join(' ');
+          
+          if (remainingParts) {
+            remainingText = remainingParts.trim();
+          }
+        }
+        
+        // If we have remaining text, save it for resume
+        if (remainingText && pausedSpeechRef.current) {
+          speechProgressRef.current = {
+            remainingText: remainingText,
+            originalText: pausedSpeechRef.current.text,
+            options: pausedSpeechRef.current.options
+          };
+        }
+        
         // Clear speech queue to prevent next statements from playing
         if (talkingHead.speechQueue) {
           talkingHead.speechQueue.length = 0;
@@ -437,26 +470,44 @@ const TalkingHeadAvatar = forwardRef(({
         
         // Pause the speaking
         talkingHeadRef.current.pauseSpeaking();
+        isPausedRef.current = true;
         setIsPaused(true);
       }
     }
   }, []);
 
   const resumeSpeaking = useCallback(async () => {
-    if (talkingHeadRef.current && isPaused && pausedSpeechRef.current && pausedSpeechRef.current.text) {
-      const pausedSpeech = pausedSpeechRef.current;
-      const pausedOptions = pausedSpeech.options || {};
-      
+    if (talkingHeadRef.current && isPaused) {
       // Clear pause state first
       setIsPaused(false);
+      isPausedRef.current = false;
       
       // Resume audio context
       await resumeAudioContext();
       
-      // Re-speak the paused text with original options (including onSpeechEnd callback)
+      // Determine what text to speak - use remaining text if available, otherwise full text
+      let textToSpeak = '';
+      let optionsToUse = {};
+      
+      if (speechProgressRef.current && speechProgressRef.current.remainingText) {
+        // Resume from where we paused - speak only the remaining text
+        textToSpeak = speechProgressRef.current.remainingText;
+        optionsToUse = speechProgressRef.current.options || {};
+        // Clear progress after using it
+        speechProgressRef.current = { remainingText: null, originalText: null, options: null };
+      } else if (pausedSpeechRef.current && pausedSpeechRef.current.text) {
+        // Fallback: if no progress tracked, resume from beginning
+        textToSpeak = pausedSpeechRef.current.text;
+        optionsToUse = pausedSpeechRef.current.options || {};
+      } else {
+        // Nothing to resume
+        return;
+      }
+      
+      // Prepare speak options
       const speakOptions = {
-        ...pausedOptions,
-        lipsyncLang: pausedOptions.lipsyncLang || defaultAvatarConfig.lipsyncLang || 'en'
+        ...optionsToUse,
+        lipsyncLang: optionsToUse.lipsyncLang || defaultAvatarConfig.lipsyncLang || 'en'
       };
       
       // Use speakText method which will set up the onSpeechEnd callback again
@@ -465,10 +516,8 @@ const TalkingHeadAvatar = forwardRef(({
           talkingHeadRef.current.setSlowdownRate(1.05);
         }
         // Call speakText which will handle everything including onSpeechEnd
-        await speakText(pausedSpeech.text, speakOptions);
+        await speakText(textToSpeak, speakOptions);
       }
-      
-      // Don't clear pausedSpeechRef here - speakText will handle it
     }
   }, [resumeAudioContext, isPaused, speakText]);