@sage-rsc/talking-head-react 1.0.51 → 1.0.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sage-rsc/talking-head-react",
-  "version": "1.0.51",
+  "version": "1.0.53",
   "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,9 +299,11 @@ const CurriculumLearning = forwardRef(({
       });
     }
       
-    // Ensure avatar is ready before speaking
-    if (avatarRef.current && avatarRef.current.isReady && firstQuestion) {
-      avatarRef.current.setMood("curious");
+    // Function to speak the first question
+    const speakFirstQuestion = () => {
+      if (!avatarRef.current || !firstQuestion) return;
+      
+      avatarRef.current.setMood("happy");
       
       // Play custom animation if available
       if (animations.questionStart) {
@@ -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);
           }
         }
@@ -385,11 +404,29 @@ const CurriculumLearning = forwardRef(({
           avatarRef.current.speakText(`Now let's try this one: ${nextQuestionObj.question}`, { 
             lipsyncLang: config.lipsyncLang 
           });
-        } else {
+    } else {
           avatarRef.current.speakText(`Here's the next question: ${nextQuestionObj.question}`, { 
             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
@@ -438,7 +475,7 @@ const CurriculumLearning = forwardRef(({
     
     if (avatarRef.current) {
       avatarRef.current.setMood("happy");
-        avatarRef.current.setBodyMovement("idle");
+      avatarRef.current.setBodyMovement("idle");
       }
     } else {
       // No more lessons in current module - check if there's a next module
@@ -610,7 +647,7 @@ const CurriculumLearning = forwardRef(({
         if (animations.incorrect) {
           try {
             avatarRef.current.playAnimation(animations.incorrect, true);
-          } catch (error) {
+      } catch (error) {
             avatarRef.current.setBodyMovement("idle");
           }
         }
@@ -695,6 +732,136 @@ const CurriculumLearning = forwardRef(({
     }
   }, [getCurrentQuestion, checkAnswer]);
 
+  // Move to previous question
+  const previousQuestion = useCallback(() => {
+    if (stateRef.current.currentQuestionIndex > 0) {
+      stateRef.current.currentQuestionIndex -= 1;
+      
+      // Trigger custom action for UI update
+      const prevQuestionObj = getCurrentQuestion();
+      if (prevQuestionObj) {
+        callbacksRef.current.onCustomAction({
+          type: 'questionStart',
+          moduleIndex: stateRef.current.currentModuleIndex,
+          lessonIndex: stateRef.current.currentLessonIndex,
+          questionIndex: stateRef.current.currentQuestionIndex,
+          totalQuestions: stateRef.current.totalQuestions,
+          question: prevQuestionObj
+        });
+      }
+      
+      // Function to speak the previous question
+      const speakPrevQuestion = () => {
+        if (!avatarRef.current || !prevQuestionObj) return;
+        
+        avatarRef.current.setMood("happy");
+        avatarRef.current.setBodyMovement("idle");
+        
+        const config = defaultAvatarConfigRef.current || { lipsyncLang: 'en' };
+        
+        // Speak the question text
+        if (prevQuestionObj.type === 'code_test') {
+          avatarRef.current.speakText(`Let's go back to this coding challenge: ${prevQuestionObj.question}`, { 
+            lipsyncLang: config.lipsyncLang 
+          });
+        } else {
+          avatarRef.current.speakText(`Going back to: ${prevQuestionObj.question}`, { 
+            lipsyncLang: config.lipsyncLang 
+          });
+        }
+      };
+      
+      // Try to speak immediately if avatar is ready
+      if (avatarRef.current && avatarRef.current.isReady && prevQuestionObj) {
+        speakPrevQuestion();
+      } else if (prevQuestionObj) {
+        // Avatar not ready yet - wait for it to be ready, then speak
+        const checkReady = setInterval(() => {
+          if (avatarRef.current && avatarRef.current.isReady) {
+            clearInterval(checkReady);
+            speakPrevQuestion();
+          }
+        }, 100);
+        
+        setTimeout(() => {
+          clearInterval(checkReady);
+        }, 5000);
+      }
+    }
+  }, [getCurrentQuestion]);
+
+  // Move to previous lesson
+  const previousLesson = useCallback(() => {
+    const curriculum = curriculumRef.current || { modules: [] };
+    const currentModule = curriculum.modules[stateRef.current.currentModuleIndex];
+    
+    // Check if there's a previous lesson in the current module
+    const hasPrevLessonInModule = stateRef.current.currentLessonIndex > 0;
+    
+    if (hasPrevLessonInModule) {
+      // Move to previous lesson in current module
+      stateRef.current.currentLessonIndex -= 1;
+      stateRef.current.currentQuestionIndex = 0;
+      stateRef.current.lessonCompleted = false;
+      stateRef.current.isQuestionMode = false;
+      stateRef.current.isTeaching = false;
+      stateRef.current.score = 0;
+      stateRef.current.totalQuestions = 0;
+      
+      // Notify parent that lesson has changed
+      callbacksRef.current.onCustomAction({
+        type: 'lessonStart',
+        moduleIndex: stateRef.current.currentModuleIndex,
+        lessonIndex: stateRef.current.currentLessonIndex
+      });
+      
+      callbacksRef.current.onLessonStart({
+        moduleIndex: stateRef.current.currentModuleIndex,
+        lessonIndex: stateRef.current.currentLessonIndex,
+        lesson: getCurrentLesson()
+      });
+      
+      if (avatarRef.current) {
+        avatarRef.current.setMood("happy");
+        avatarRef.current.setBodyMovement("idle");
+      }
+    } else {
+      // No previous lesson in current module - check if there's a previous module
+      const hasPrevModule = stateRef.current.currentModuleIndex > 0;
+      
+      if (hasPrevModule) {
+        // Move to last lesson of previous module
+        const prevModule = curriculum.modules[stateRef.current.currentModuleIndex - 1];
+        stateRef.current.currentModuleIndex -= 1;
+        stateRef.current.currentLessonIndex = (prevModule?.lessons?.length || 1) - 1;
+        stateRef.current.currentQuestionIndex = 0;
+        stateRef.current.lessonCompleted = false;
+        stateRef.current.isQuestionMode = false;
+        stateRef.current.isTeaching = false;
+        stateRef.current.score = 0;
+        stateRef.current.totalQuestions = 0;
+        
+        // Notify parent that lesson has changed
+        callbacksRef.current.onCustomAction({
+          type: 'lessonStart',
+          moduleIndex: stateRef.current.currentModuleIndex,
+          lessonIndex: stateRef.current.currentLessonIndex
+        });
+        
+        callbacksRef.current.onLessonStart({
+          moduleIndex: stateRef.current.currentModuleIndex,
+          lessonIndex: stateRef.current.currentLessonIndex,
+          lesson: getCurrentLesson()
+        });
+        
+        if (avatarRef.current) {
+          avatarRef.current.setMood("happy");
+          avatarRef.current.setBodyMovement("idle");
+        }
+      }
+    }
+  }, [getCurrentLesson]);
+
   // Reset curriculum
   const resetCurriculum = useCallback(() => {
     stateRef.current.currentModuleIndex = 0;
@@ -744,7 +911,9 @@ const CurriculumLearning = forwardRef(({
     handleAnswerSelect,
     handleCodeTestResult,
     nextQuestion,
+    previousQuestion,
     nextLesson,
+    previousLesson,
     completeLesson,
     completeCurriculum,
     resetCurriculum,