@sage-rsc/talking-head-react 1.0.65 → 1.0.67

package/package.json

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

@@ -402,21 +402,38 @@ const CurriculumLearning = forwardRef(({
         
         const config = defaultAvatarConfigRef.current || { lipsyncLang: 'en' };
         
-        // Speak the question text with proper introduction
+        // Check if this is the last question to adjust the introduction
+        const currentLesson = getCurrentLesson();
+        const totalQuestionsInLesson = currentLesson?.questions?.length || 0;
+        const isLastQuestion = stateRef.current.currentQuestionIndex >= totalQuestionsInLesson - 1;
+        
+        // Speak the question text with proper introduction (no "next" if it's the last question)
         if (nextQuestionObj.type === 'code_test') {
-          avatarRef.current.speakText(`Great! Now let's move on to your next coding challenge: ${nextQuestionObj.question}`, { 
+          const intro = isLastQuestion 
+            ? `Great! Here's your final coding challenge: ${nextQuestionObj.question}`
+            : `Great! Now let's move on to your next coding challenge: ${nextQuestionObj.question}`;
+          avatarRef.current.speakText(intro, { 
             lipsyncLang: config.lipsyncLang 
           });
         } else if (nextQuestionObj.type === 'multiple_choice') {
-          avatarRef.current.speakText(`Alright! Here's your next question: ${nextQuestionObj.question}`, { 
+          const intro = isLastQuestion
+            ? `Alright! Here's your final question: ${nextQuestionObj.question}`
+            : `Alright! Here's your next question: ${nextQuestionObj.question}`;
+          avatarRef.current.speakText(intro, { 
             lipsyncLang: config.lipsyncLang 
           });
         } else if (nextQuestionObj.type === 'true_false') {
-          avatarRef.current.speakText(`Now let's try this one: ${nextQuestionObj.question}`, { 
+          const intro = isLastQuestion
+            ? `Now let's try this final one: ${nextQuestionObj.question}`
+            : `Now let's try this one: ${nextQuestionObj.question}`;
+          avatarRef.current.speakText(intro, { 
             lipsyncLang: config.lipsyncLang 
           });
     } else {
-          avatarRef.current.speakText(`Here's the next question: ${nextQuestionObj.question}`, { 
+          const intro = isLastQuestion
+            ? `Here's your final question: ${nextQuestionObj.question}`
+            : `Here's the next question: ${nextQuestionObj.question}`;
+          avatarRef.current.speakText(intro, { 
             lipsyncLang: config.lipsyncLang 
           });
         }
@@ -649,6 +666,12 @@ const CurriculumLearning = forwardRef(({
           }
         }
         avatarRef.current.setBodyMovement("gesturing");
+        
+        // Check if this is the last question
+        const currentLesson = getCurrentLesson();
+        const totalQuestionsInLesson = currentLesson?.questions?.length || 0;
+        const isLastQuestion = stateRef.current.currentQuestionIndex >= totalQuestionsInLesson - 1;
+        
         const successMessage = currentQuestion.type === "code_test" 
           ? `Great job! Your code passed all the tests! ${currentQuestion.explanation || ''}`
           : `Excellent! That's correct! ${currentQuestion.explanation || ''}`;
@@ -660,8 +683,6 @@ const CurriculumLearning = forwardRef(({
           lipsyncLang: config.lipsyncLang,
           onSpeechEnd: () => {
             // Notify parent that feedback is complete - parent decides next action
-            const currentLesson = getCurrentLesson();
-            const totalQuestionsInLesson = currentLesson?.questions?.length || 0;
             callbacksRef.current.onCustomAction({
               type: 'answerFeedbackComplete',
               moduleIndex: stateRef.current.currentModuleIndex,
@@ -684,9 +705,15 @@ const CurriculumLearning = forwardRef(({
           }
         }
         avatarRef.current.setBodyMovement("gesturing");
+        
+        // Check if this is the last question
+        const currentLesson = getCurrentLesson();
+        const totalQuestionsInLesson = currentLesson?.questions?.length || 0;
+        const isLastQuestion = stateRef.current.currentQuestionIndex >= totalQuestionsInLesson - 1;
+        
         const failureMessage = currentQuestion.type === "code_test"
           ? `Your code didn't pass all the tests. ${currentQuestion.explanation || 'Try again!'}`
-          : `Not quite right, but don't worry! ${currentQuestion.explanation || ''} Let's move on to the next question.`;
+          : `Not quite right, but don't worry! ${currentQuestion.explanation || ''}${isLastQuestion ? '' : " Let's move on to the next question."}`;
         
         const config = defaultAvatarConfigRef.current || { lipsyncLang: 'en' };
         
@@ -695,8 +722,6 @@ const CurriculumLearning = forwardRef(({
           lipsyncLang: config.lipsyncLang,
           onSpeechEnd: () => {
             // Notify parent that feedback is complete - parent decides next action
-            const currentLesson = getCurrentLesson();
-            const totalQuestionsInLesson = currentLesson?.questions?.length || 0;
             callbacksRef.current.onCustomAction({
               type: 'answerFeedbackComplete',
               moduleIndex: stateRef.current.currentModuleIndex,

package/src/components/TalkingHeadAvatar.jsx

@@ -54,6 +54,8 @@ const TalkingHeadAvatar = forwardRef(({
   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 originalSentencesRef = useRef([]); // Track original text split into sentences
+  const processedSentenceCountRef = useRef(0); // Track how many sentences have been processed
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const [isReady, setIsReady] = useState(false);
@@ -295,6 +297,17 @@ const TalkingHeadAvatar = forwardRef(({
         pausedSpeechRef.current = { text: textToSpeak, options };
         // Reset progress tracking when starting new speech
         speechProgressRef.current = { remainingText: null, originalText: null, options: null };
+        
+        // Split text into sentences for tracking
+        // Use the same regex as the library: /[!\.\?\n\p{Extended_Pictographic}]/ug
+        const sentenceDividers = /[!\.\?\n\p{Extended_Pictographic}]/ug;
+        const sentences = textToSpeak
+          .split(sentenceDividers)
+          .map(s => s.trim())
+          .filter(s => s.length > 0);
+        originalSentencesRef.current = sentences;
+        processedSentenceCountRef.current = 0;
+        
         setIsPaused(false);
         isPausedRef.current = false;
         
@@ -440,29 +453,56 @@ const TalkingHeadAvatar = forwardRef(({
           speechEndIntervalRef.current = null;
         }
         
-        // Save remaining text from speechQueue before clearing it
+        // Calculate remaining text by reconstructing from original sentences
+        // We need to account for:
+        // 1. Currently playing sentence (in audioPlaylist) - gets cleared by pauseSpeaking()
+        // 2. Queued sentences (in speechQueue) - not yet sent to TTS
         let remainingText = '';
-        if (talkingHead.speechQueue && talkingHead.speechQueue.length > 0 && pausedSpeechRef.current) {
-          // Extract text from remaining queue items
-          // Note: item.text is an array of objects like [{mark: 0, word: "Hello"}, {mark: 1, word: "world"}]
-          const remainingParts = talkingHead.speechQueue
-            .filter(item => item && item.text && Array.isArray(item.text) && item.text.length > 0)
-            .map(item => {
-              // Extract words from the text array
-              return item.text
-                .map(wordObj => wordObj.word || '')
-                .filter(word => word.length > 0)
-                .join(' ');
-            })
-            .filter(text => text.length > 0)
-            .join(' ');
+        
+        if (pausedSpeechRef.current && originalSentencesRef.current.length > 0) {
+          const totalSentences = originalSentencesRef.current.length;
+          
+          // Count sentences currently in speechQueue (not yet sent to TTS)
+          const queuedSentenceCount = talkingHead.speechQueue 
+            ? talkingHead.speechQueue.filter(item => item && item.text && Array.isArray(item.text) && item.text.length > 0).length
+            : 0;
+          
+          // Check if there's a sentence currently playing (in audioPlaylist)
+          // This will be cleared by pauseSpeaking(), so we need to account for it now
+          const hasCurrentlyPlaying = talkingHead.audioPlaylist && talkingHead.audioPlaylist.length > 0;
           
-          if (remainingParts && remainingParts.trim()) {
-            remainingText = remainingParts.trim();
+          // Total sentences remaining = queued + currently playing (if any)
+          const remainingSentenceCount = queuedSentenceCount + (hasCurrentlyPlaying ? 1 : 0);
+          
+          // Calculate which sentence index we're at
+          const currentSentenceIndex = totalSentences - remainingSentenceCount;
+          
+          // If there are remaining sentences, reconstruct the text
+          if (remainingSentenceCount > 0 && currentSentenceIndex < totalSentences) {
+            const remainingSentences = originalSentencesRef.current.slice(currentSentenceIndex);
+            remainingText = remainingSentences.join('. ').trim();
+            
+            // Fallback: if reconstruction didn't work, try extracting from queue directly
+            if (!remainingText && queuedSentenceCount > 0 && talkingHead.speechQueue) {
+              const remainingParts = talkingHead.speechQueue
+                .filter(item => item && item.text && Array.isArray(item.text) && item.text.length > 0)
+                .map(item => {
+                  return item.text
+                    .map(wordObj => wordObj.word || '')
+                    .filter(word => word.length > 0)
+                    .join(' ');
+                })
+                .filter(text => text.length > 0)
+                .join(' ');
+              
+              if (remainingParts && remainingParts.trim()) {
+                remainingText = remainingParts.trim();
+              }
+            }
           }
         }
         
-        // Always save progress for resume (even if no remaining text, we'll resume from beginning)
+        // Always save progress for resume
         if (pausedSpeechRef.current) {
           speechProgressRef.current = {
             remainingText: remainingText || null,