@sage-rsc/talking-head-react 1.0.62 → 1.0.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sage-rsc/talking-head-react",
-  "version": "1.0.62",
+  "version": "1.0.64",
   "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

@@ -53,6 +53,7 @@ const TalkingHeadAvatar = forwardRef(({
   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);
@@ -292,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();
@@ -436,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 && pausedSpeechRef.current) {
+          // Extract text from remaining queue items
+          const remainingParts = talkingHead.speechQueue
+            .filter(item => item && item.text) // Only get items with text
+            .map(item => item.text)
+            .join(' ');
+          
+          if (remainingParts && remainingParts.trim()) {
+            remainingText = remainingParts.trim();
+          }
+        }
+        
+        // Always save progress for resume (even if no remaining text, we'll resume from beginning)
+        if (pausedSpeechRef.current) {
+          speechProgressRef.current = {
+            remainingText: remainingText || null,
+            originalText: pausedSpeechRef.current.text,
+            options: pausedSpeechRef.current.options
+          };
+        }
+        
         // Clear speech queue to prevent next statements from playing
         if (talkingHead.speechQueue) {
           talkingHead.speechQueue.length = 0;
@@ -450,34 +477,55 @@ const TalkingHeadAvatar = forwardRef(({
   }, []);
 
   const resumeSpeaking = useCallback(async () => {
-    if (talkingHeadRef.current && isPaused && pausedSpeechRef.current && pausedSpeechRef.current.text) {
-      const pausedSpeech = pausedSpeechRef.current;
-      const pausedOptions = pausedSpeech.options || {};
-      
-      // Clear pause state first
+    if (!talkingHeadRef.current || !isPaused) {
+      return;
+    }
+    
+    // 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
+      console.warn('Resume called but no paused speech found');
       setIsPaused(false);
-      
-      // Resume audio context
-      await resumeAudioContext();
-      
-      // Re-speak the paused text with original options (including onSpeechEnd callback)
-      const speakOptions = {
-        ...pausedOptions,
-        lipsyncLang: pausedOptions.lipsyncLang || defaultAvatarConfig.lipsyncLang || 'en'
-      };
-      
-      // Use speakText method which will set up the onSpeechEnd callback again
-      if (talkingHeadRef.current.lipsync && Object.keys(talkingHeadRef.current.lipsync).length > 0) {
-        if (talkingHeadRef.current.setSlowdownRate) {
-          talkingHeadRef.current.setSlowdownRate(1.05);
-        }
-        // Call speakText which will handle everything including onSpeechEnd
-        await speakText(pausedSpeech.text, speakOptions);
-      }
-      
-      // Don't clear pausedSpeechRef here - speakText will handle it
+      isPausedRef.current = false;
+      return;
+    }
+    
+    // Clear pause state before speaking
+    setIsPaused(false);
+    isPausedRef.current = false;
+    
+    // Resume audio context
+    await resumeAudioContext();
+    
+    // Prepare speak options
+    const speakOptions = {
+      ...optionsToUse,
+      lipsyncLang: optionsToUse.lipsyncLang || defaultAvatarConfig.lipsyncLang || 'en'
+    };
+    
+    // Use speakText method which will set up the onSpeechEnd callback again
+    try {
+      await speakText(textToSpeak, speakOptions);
+    } catch (error) {
+      console.error('Error resuming speech:', error);
+      // Reset pause state on error
+      setIsPaused(false);
+      isPausedRef.current = false;
     }
-  }, [resumeAudioContext, isPaused, speakText]);
+  }, [resumeAudioContext, isPaused, speakText, defaultAvatarConfig]);
 
   const setMood = useCallback((mood) => {
     if (talkingHeadRef.current) {