@sage-rsc/talking-head-react 1.0.21 → 1.0.23

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./index-BeFzGp0g.cjs");exports.CurriculumLearning=i.CurriculumLearning;exports.TalkingHeadAvatar=i.TalkingHeadAvatar;exports.TalkingHeadComponent=i.TalkingHeadComponent;exports.animations=i.animations;exports.getActiveTTSConfig=i.getActiveTTSConfig;exports.getAnimation=i.getAnimation;exports.getVoiceOptions=i.getVoiceOptions;exports.hasAnimation=i.hasAnimation;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./index-Bwi0p5fF.cjs");exports.CurriculumLearning=i.CurriculumLearning;exports.TalkingHeadAvatar=i.TalkingHeadAvatar;exports.TalkingHeadComponent=i.TalkingHeadComponent;exports.animations=i.animations;exports.getActiveTTSConfig=i.getActiveTTSConfig;exports.getAnimation=i.getAnimation;exports.getVoiceOptions=i.getVoiceOptions;exports.hasAnimation=i.hasAnimation;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { C as n, T as s, a as t, d as e, b as o, g, c as m, h as r } from "./index-3_k5n4iL.js";
+import { C as n, T as s, a as t, d as e, b as o, g, c as m, h as r } from "./index-CiNyTJ1A.js";
 export {
   n as CurriculumLearning,
   s as TalkingHeadAvatar,

package/package.json

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

@@ -80,7 +80,8 @@ const CurriculumLearning = forwardRef(({
     bodyMovement: avatarConfig.bodyMovement || "gesturing",
     movementIntensity: avatarConfig.movementIntensity || 0.7,
     showFullAvatar: avatarConfig.showFullAvatar !== undefined ? avatarConfig.showFullAvatar : true,
-    animations: animations
+    animations: animations,
+    lipsyncLang: 'en' // Default lipsync language
   };
 
   // Helper to get current lesson/question
@@ -143,9 +144,9 @@ const CurriculumLearning = forwardRef(({
         avatarRef.current.playCelebration();
         }
       }
-      avatarRef.current.speakText(feedbackMessage);
+      avatarRef.current.speakText(feedbackMessage, { lipsyncLang: defaultAvatarConfig.lipsyncLang });
     }
-  }, [animations.lessonComplete]);
+  }, [animations.lessonComplete, defaultAvatarConfig]);
 
   // Complete entire curriculum
   const completeCurriculum = useCallback(() => {
@@ -165,9 +166,9 @@ const CurriculumLearning = forwardRef(({
           avatarRef.current.playCelebration();
         }
       }
-      avatarRef.current.speakText("Amazing! You've completed the entire curriculum! You're now ready to move on to more advanced topics. Well done!");
+      avatarRef.current.speakText("Amazing! You've completed the entire curriculum! You're now ready to move on to more advanced topics. Well done!", { lipsyncLang: defaultAvatarConfig.lipsyncLang });
     }
-  }, [animations.curriculumComplete, curriculum]);
+  }, [animations.curriculumComplete, curriculum, defaultAvatarConfig]);
 
   // Start asking questions
   const startQuestions = useCallback(() => {
@@ -176,7 +177,17 @@ const CurriculumLearning = forwardRef(({
     stateRef.current.currentQuestionIndex = 0;
     stateRef.current.totalQuestions = currentLesson?.questions?.length || 0;
       
-      if (avatarRef.current) {
+    // Trigger custom action immediately (before avatar speaks) - includes first question
+    const firstQuestion = getCurrentQuestion();
+    callbacksRef.current.onCustomAction({
+      type: 'questionStart',
+      moduleIndex: stateRef.current.currentModuleIndex,
+      lessonIndex: stateRef.current.currentLessonIndex,
+      totalQuestions: stateRef.current.totalQuestions,
+      question: firstQuestion // Include first question in event
+    });
+      
+    if (avatarRef.current) {
       avatarRef.current.setMood("curious");
       
       // Play custom animation if available
@@ -188,17 +199,18 @@ const CurriculumLearning = forwardRef(({
         }
       }
       
-      avatarRef.current.speakText("Now let me ask you some questions to test your understanding.");
-      
-      // Trigger custom action
-      callbacksRef.current.onCustomAction({
-        type: 'questionStart',
-        moduleIndex: stateRef.current.currentModuleIndex,
-        lessonIndex: stateRef.current.currentLessonIndex,
-        totalQuestions: stateRef.current.totalQuestions
-      });
+      if (firstQuestion) {
+        // If there's a question, introduce it directly
+        if (firstQuestion.type === 'code_test') {
+          avatarRef.current.speakText(`Let's test your coding skills! Here's your first challenge: ${firstQuestion.question}`, { lipsyncLang: defaultAvatarConfig.lipsyncLang });
+        } else {
+          avatarRef.current.speakText(`Now let me ask you some questions. Here's the first one: ${firstQuestion.question}`, { lipsyncLang: defaultAvatarConfig.lipsyncLang });
+        }
+      } else {
+        avatarRef.current.speakText("Now let me ask you some questions to test your understanding.", { lipsyncLang: defaultAvatarConfig.lipsyncLang });
+      }
     }
-  }, [animations.questionStart, getCurrentLesson]);
+  }, [animations.questionStart, getCurrentLesson, getCurrentQuestion, defaultAvatarConfig]);
 
   // Move to next question
   const nextQuestion = useCallback(() => {
@@ -206,33 +218,44 @@ const CurriculumLearning = forwardRef(({
     if (stateRef.current.currentQuestionIndex < (currentLesson?.questions?.length || 0) - 1) {
       stateRef.current.currentQuestionIndex += 1;
     
-    if (avatarRef.current) {
-      avatarRef.current.setMood("happy");
+      // Trigger custom action BEFORE speaking (so UI can update immediately)
+      const nextQuestionObj = getCurrentQuestion();
+      callbacksRef.current.onCustomAction({
+        type: 'nextQuestion',
+        moduleIndex: stateRef.current.currentModuleIndex,
+        lessonIndex: stateRef.current.currentLessonIndex,
+        questionIndex: stateRef.current.currentQuestionIndex,
+        question: nextQuestionObj
+      });
+    
+      if (avatarRef.current) {
+        avatarRef.current.setMood("happy");
         avatarRef.current.setBodyMovement("idle");
       
         // Play custom animation if available
         if (animations.nextQuestion) {
-      try {
+          try {
             avatarRef.current.playAnimation(animations.nextQuestion, true);
-      } catch (error) {
+          } catch (error) {
             console.warn('Failed to play nextQuestion animation:', error);
           }
         }
         
-        avatarRef.current.speakText("Here's the next question.");
-        
-        // Trigger custom action
-        callbacksRef.current.onCustomAction({
-          type: 'nextQuestion',
-          moduleIndex: stateRef.current.currentModuleIndex,
-          lessonIndex: stateRef.current.currentLessonIndex,
-          questionIndex: stateRef.current.currentQuestionIndex
-        });
+      if (nextQuestionObj) {
+        // Speak the question text directly if it's a code test, otherwise introduce it
+        if (nextQuestionObj.type === 'code_test') {
+          avatarRef.current.speakText(`Here's your next coding challenge: ${nextQuestionObj.question}`, { lipsyncLang: defaultAvatarConfig.lipsyncLang });
+        } else {
+          avatarRef.current.speakText(`Here's the next question: ${nextQuestionObj.question}`, { lipsyncLang: defaultAvatarConfig.lipsyncLang });
+        }
+      } else {
+        avatarRef.current.speakText("Here's the next question.", { lipsyncLang: defaultAvatarConfig.lipsyncLang });
+      }
       }
     } else {
       completeLesson();
     }
-  }, [animations.nextQuestion, getCurrentLesson, completeLesson]);
+  }, [animations.nextQuestion, getCurrentLesson, completeLesson, getCurrentQuestion, defaultAvatarConfig]);
 
   // Move to next lesson
   const nextLesson = useCallback(() => {
@@ -245,12 +268,12 @@ const CurriculumLearning = forwardRef(({
       stateRef.current.totalQuestions = 0;
       
       if (avatarRef.current) {
-        avatarRef.current.speakText("Let's move on to the next lesson!");
+        avatarRef.current.speakText("Let's move on to the next lesson!", { lipsyncLang: defaultAvatarConfig.lipsyncLang });
       }
     } else {
       completeCurriculum();
     }
-  }, [curriculum, completeCurriculum]);
+  }, [curriculum, completeCurriculum, defaultAvatarConfig]);
 
   // Start teaching the lesson
   const startTeaching = useCallback(() => {
@@ -276,7 +299,7 @@ const CurriculumLearning = forwardRef(({
         avatarRef.current.setBodyMovement("gesturing");
       }
       
-      avatarRef.current.speakText(currentLesson.avatar_script);
+      avatarRef.current.speakText(currentLesson.avatar_script, { lipsyncLang: defaultAvatarConfig.lipsyncLang });
       
       callbacksRef.current.onLessonStart({
         moduleIndex: stateRef.current.currentModuleIndex,
@@ -302,7 +325,7 @@ const CurriculumLearning = forwardRef(({
         }
       }, 8000);
     }
-  }, [animations.teaching, getCurrentLesson, startQuestions, completeLesson]);
+  }, [animations.teaching, getCurrentLesson, startQuestions, completeLesson, defaultAvatarConfig]);
 
   // Handle answer selection
   const handleAnswerSelect = useCallback((answer) => {
@@ -336,7 +359,7 @@ const CurriculumLearning = forwardRef(({
         const successMessage = currentQuestion.type === "code_test" 
           ? `Great job! Your code passed all the tests! ${currentQuestion.explanation || ''}`
           : `Excellent! That's correct! ${currentQuestion.explanation || ''}`;
-        avatarRef.current.speakText(successMessage);
+        avatarRef.current.speakText(successMessage, { lipsyncLang: defaultAvatarConfig.lipsyncLang });
       } else {
         avatarRef.current.setMood("sad");
         if (animations.incorrect) {
@@ -350,10 +373,28 @@ const CurriculumLearning = forwardRef(({
         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.`;
-        avatarRef.current.speakText(failureMessage);
+        avatarRef.current.speakText(failureMessage, { lipsyncLang: defaultAvatarConfig.lipsyncLang });
       }
+      
+      // Automatically move to next question after avatar finishes speaking
+      // Estimate speaking time: ~150 characters per second, minimum 2 seconds
+      const messageLength = (isCorrect 
+        ? (currentQuestion.type === "code_test" 
+          ? `Great job! Your code passed all the tests! ${currentQuestion.explanation || ''}`
+          : `Excellent! That's correct! ${currentQuestion.explanation || ''}`)
+        : (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.`)).length;
+      const estimatedTime = Math.max(2000, (messageLength / 150) * 1000) + 500; // Add 500ms buffer
+      
+      setTimeout(() => {
+        nextQuestion();
+      }, estimatedTime);
+    } else {
+      // If avatar not ready, move to next question immediately
+      nextQuestion();
     }
-  }, [animations.correct, animations.incorrect, getCurrentQuestion, checkAnswer]);
+  }, [animations.correct, animations.incorrect, getCurrentQuestion, checkAnswer, nextQuestion, defaultAvatarConfig]);
 
   // Handle code test result submission
   const handleCodeTestResult = useCallback((testResult) => {
@@ -441,10 +482,10 @@ const CurriculumLearning = forwardRef(({
     getAvatarRef: () => avatarRef.current,
     
     // Convenience methods that delegate to avatar (always check current ref)
-    speakText: async (text) => {
+    speakText: async (text, options = {}) => {
       // Ensure audio context is resumed before speaking
       await avatarRef.current?.resumeAudioContext?.();
-      avatarRef.current?.speakText(text);
+      avatarRef.current?.speakText(text, { ...options, lipsyncLang: options.lipsyncLang || defaultAvatarConfig.lipsyncLang });
     },
     resumeAudioContext: async () => {
       // Try to resume through avatar ref first

package/src/components/TalkingHeadAvatar.jsx

@@ -256,17 +256,23 @@ const TalkingHeadAvatar = forwardRef(({
     }
   }, []);
 
-  const speakText = useCallback(async (textToSpeak) => {
+  const speakText = useCallback(async (textToSpeak, options = {}) => {
     if (talkingHeadRef.current && isReady) {
       try {
         // Always resume audio context first (required for user interaction)
         await resumeAudioContext();
         
+        // Ensure lipsyncLang is in options if not provided
+        const speakOptions = {
+          ...options,
+          lipsyncLang: options.lipsyncLang || defaultAvatarConfig.lipsyncLang || 'en'
+        };
+        
         if (talkingHeadRef.current.lipsync && Object.keys(talkingHeadRef.current.lipsync).length > 0) {
           if (talkingHeadRef.current.setSlowdownRate) {
             talkingHeadRef.current.setSlowdownRate(1.05);
           }
-          talkingHeadRef.current.speakText(textToSpeak);
+          talkingHeadRef.current.speakText(textToSpeak, speakOptions);
         } else {
           setTimeout(async () => {
             await resumeAudioContext();
@@ -274,7 +280,7 @@ const TalkingHeadAvatar = forwardRef(({
               if (talkingHeadRef.current.setSlowdownRate) {
                 talkingHeadRef.current.setSlowdownRate(1.05);
               }
-              talkingHeadRef.current.speakText(textToSpeak);
+              talkingHeadRef.current.speakText(textToSpeak, speakOptions);
             }
           }, 500);
         }
@@ -283,7 +289,7 @@ const TalkingHeadAvatar = forwardRef(({
         setError(err.message || 'Failed to speak text');
       }
     }
-  }, [isReady, resumeAudioContext]);
+  }, [isReady, resumeAudioContext, defaultAvatarConfig.lipsyncLang]);
 
   const stopSpeaking = useCallback(() => {
     if (talkingHeadRef.current) {