@sage-rsc/talking-head-react 1.0.66 → 1.0.68

package/package.json

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

@@ -23,6 +23,12 @@ import TalkingHeadAvatar from './TalkingHeadAvatar';
  * @param {Function} props.onCurriculumComplete - Callback when curriculum completes
  * @param {Function} props.onCustomAction - Callback for custom actions (receives action type and data)
  *   - 'teachingComplete': Fired when teaching finishes. Check data.hasQuestions to know if questions are available.
+ *   - 'codeExampleReady': Fired after teaching if lesson has a code_example. Contains codeExample object with:
+ *     - code: The code string to type/run in IDE
+ *     - language: Programming language (default: 'javascript')
+ *     - description: Optional description of what the code does
+ *     - autoRun: Whether to auto-run after typing (default: false)
+ *     - typingSpeed: Typing speed in ms per character (default: 50)
  *   - 'answerFeedbackComplete': Fired when answer feedback finishes. Check data.hasNextQuestion to know if more questions exist.
  *   - 'lessonCompleteFeedbackDone': Fired when lesson completion feedback finishes. Check data.hasNextLesson to know if more lessons exist.
  *   - 'allQuestionsComplete': Fired when all questions in a lesson are done. Parent should call completeLesson() when ready.
@@ -632,6 +638,18 @@ const CurriculumLearning = forwardRef(({
             lesson: currentLesson,
             hasQuestions: currentLesson.questions && currentLesson.questions.length > 0
           });
+          
+          // Check if there's a code example to demonstrate
+          if (currentLesson?.code_example) {
+            // Trigger code example event - parent can handle IDE typing/running
+            callbacksRef.current.onCustomAction({
+              type: 'codeExampleReady',
+              moduleIndex: stateRef.current.currentModuleIndex,
+              lessonIndex: stateRef.current.currentLessonIndex,
+              lesson: currentLesson,
+              codeExample: currentLesson.code_example
+            });
+          }
         }
       });
     }

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,