@sage-rsc/talking-head-react 1.0.28 → 1.0.30

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./index-Dx7mDKJm.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-BFQNNYmP.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-zMY6cyU2.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-V_d1NQ-5.js";
 export {
   n as CurriculumLearning,
   s as TalkingHeadAvatar,

package/package.json

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

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, forwardRef, useImperativeHandle, useCallback } from 'react';
+import React, { useRef, useEffect, useLayoutEffect, forwardRef, useImperativeHandle, useCallback } from 'react';
 import TalkingHeadAvatar from './TalkingHeadAvatar';
 
 /**
@@ -55,6 +55,9 @@ const CurriculumLearning = forwardRef(({
   const startTeachingRef = useRef(null);
   const nextLessonRef = useRef(null);
   const completeLessonRef = useRef(null);
+  const nextQuestionRef = useRef(null);
+  const completeCurriculumRef = useRef(null);
+  const startQuestionsRef = useRef(null);
 
   // Update callbacks ref when they change
   useEffect(() => {
@@ -127,7 +130,7 @@ const CurriculumLearning = forwardRef(({
     let feedbackMessage = `Congratulations! You've completed this lesson`;
     if (stateRef.current.totalQuestions > 0) {
       feedbackMessage += ` with a score of ${stateRef.current.score} out of ${stateRef.current.totalQuestions} (${percentage}%). `;
-    } else {
+        } else {
       feedbackMessage += `! `;
     }
     
@@ -185,20 +188,22 @@ const CurriculumLearning = forwardRef(({
             }, 1000);
           }
         });
-      } else {
+        } else {
         // This is the last lesson, complete curriculum instead
         avatarRef.current.speakText(feedbackMessage, { 
           lipsyncLang: defaultAvatarConfig.lipsyncLang,
           onSpeechEnd: () => {
             // Add a small delay after speech ends for natural flow
             setTimeout(() => {
-              completeCurriculum();
+              if (completeCurriculumRef.current) {
+                completeCurriculumRef.current();
+              }
             }, 1000);
           }
         });
       }
     }
-  }, [animations.lessonComplete, curriculum, completeCurriculum, defaultAvatarConfig]);
+  }, [animations.lessonComplete, curriculum, defaultAvatarConfig]);
 
   // Complete entire curriculum
   const completeCurriculum = useCallback(() => {
@@ -208,8 +213,8 @@ const CurriculumLearning = forwardRef(({
       modules: curriculum.modules.length,
       totalLessons: curriculum.modules.reduce((sum, mod) => sum + mod.lessons.length, 0)
     });
-    
-    if (avatarRef.current) {
+      
+      if (avatarRef.current) {
       avatarRef.current.setMood("celebrating");
       if (animations.curriculumComplete) {
         try {
@@ -262,7 +267,7 @@ const CurriculumLearning = forwardRef(({
         avatarRef.current.speakText(`Now let me ask you some questions. Here's the first one: ${firstQuestion.question}`, { lipsyncLang: defaultAvatarConfig.lipsyncLang });
       } else if (firstQuestion.type === 'true_false') {
         avatarRef.current.speakText(`Let's start with some true or false questions. First question: ${firstQuestion.question}`, { lipsyncLang: defaultAvatarConfig.lipsyncLang });
-      } else {
+    } else {
         avatarRef.current.speakText(`Now let me ask you some questions. Here's the first one: ${firstQuestion.question}`, { lipsyncLang: defaultAvatarConfig.lipsyncLang });
       }
     } else if (avatarRef.current) {
@@ -291,14 +296,14 @@ const CurriculumLearning = forwardRef(({
       }
     
       if (avatarRef.current && nextQuestionObj) {
-        avatarRef.current.setMood("happy");
+      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);
           }
         }
@@ -323,9 +328,12 @@ const CurriculumLearning = forwardRef(({
         }
       }
     } else {
-      completeLesson();
+      // Use ref to avoid circular dependency
+      if (completeLessonRef.current) {
+        completeLessonRef.current();
+      }
     }
-  }, [animations.nextQuestion, getCurrentLesson, completeLesson, getCurrentQuestion, defaultAvatarConfig]);
+  }, [animations.nextQuestion, getCurrentLesson, getCurrentQuestion, defaultAvatarConfig]);
 
   // Move to next lesson
   const nextLesson = useCallback(() => {
@@ -358,9 +366,11 @@ const CurriculumLearning = forwardRef(({
         }, 500);
       }
     } else {
-      completeCurriculum();
+      if (completeCurriculumRef.current) {
+        completeCurriculumRef.current();
+      }
     }
-  }, [curriculum, completeCurriculum]);
+  }, [curriculum]);
 
   // Start teaching the lesson
   const startTeaching = useCallback(() => {
@@ -406,7 +416,10 @@ const CurriculumLearning = forwardRef(({
       setTimeout(() => {
         stateRef.current.isTeaching = false;
         if (currentLesson.questions && currentLesson.questions.length > 0) {
-          startQuestions();
+          // Use ref to avoid circular dependency
+          if (startQuestionsRef.current) {
+            startQuestionsRef.current();
+          }
     } else {
           // No questions, complete the lesson using ref to avoid circular dependency
           if (completeLessonRef.current) {
@@ -415,7 +428,7 @@ const CurriculumLearning = forwardRef(({
         }
       }, 8000);
     }
-  }, [animations.teaching, getCurrentLesson, startQuestions, defaultAvatarConfig]);
+  }, [animations.teaching, getCurrentLesson, defaultAvatarConfig]);
 
   // Handle answer selection
   const handleAnswerSelect = useCallback((answer) => {
@@ -456,7 +469,9 @@ const CurriculumLearning = forwardRef(({
           onSpeechEnd: () => {
             // Add a small delay after speech ends for natural flow
             setTimeout(() => {
-              nextQuestion();
+              if (nextQuestionRef.current) {
+                nextQuestionRef.current();
+              }
             }, 500);
           }
         });
@@ -480,16 +495,20 @@ const CurriculumLearning = forwardRef(({
           onSpeechEnd: () => {
             // Add a small delay after speech ends for natural flow
             setTimeout(() => {
-              nextQuestion();
+              if (nextQuestionRef.current) {
+                nextQuestionRef.current();
+              }
             }, 500);
           }
         });
       }
     } else {
       // If avatar not ready, move to next question immediately
-      nextQuestion();
+      if (nextQuestionRef.current) {
+        nextQuestionRef.current();
+      }
     }
-  }, [animations.correct, animations.incorrect, getCurrentQuestion, checkAnswer, nextQuestion, defaultAvatarConfig]);
+  }, [animations.correct, animations.incorrect, getCurrentQuestion, checkAnswer, defaultAvatarConfig]);
 
   // Handle code test result submission
   const handleCodeTestResult = useCallback((testResult) => {
@@ -530,8 +549,10 @@ const CurriculumLearning = forwardRef(({
     });
 
     // Handle answer using the same logic as regular questions
-    handleAnswerSelect(codeTestAnswer);
-  }, [getCurrentQuestion, handleAnswerSelect]);
+    if (handleAnswerSelectRef.current) {
+      handleAnswerSelectRef.current(codeTestAnswer);
+    }
+  }, [getCurrentQuestion, checkAnswer, defaultAvatarConfig]);
 
   // Reset curriculum
   const resetCurriculum = useCallback(() => {
@@ -546,23 +567,30 @@ const CurriculumLearning = forwardRef(({
     stateRef.current.totalQuestions = 0;
   }, []);
 
-  // Handle avatar ready callback
+  // Handle avatar ready callback - use ref to avoid circular dependency
   const handleAvatarReady = useCallback((talkingHead) => {
     console.log('Avatar is ready!', talkingHead);
     const currentLesson = getCurrentLesson();
     if (autoStart && currentLesson?.avatar_script) {
       setTimeout(() => {
-        startTeaching();
+        if (startTeachingRef.current) {
+          startTeachingRef.current();
+        }
       }, 1000);
     }
-  }, [autoStart, getCurrentLesson, startTeaching]);
+  }, [autoStart, getCurrentLesson]);
 
-  // Update refs after all functions are defined to avoid circular dependency issues
-  useEffect(() => {
+  // Set refs after all functions are defined - use useLayoutEffect for synchronous execution
+  // This ensures refs are set before React commits the render, avoiding initialization errors
+  useLayoutEffect(() => {
     startTeachingRef.current = startTeaching;
     nextLessonRef.current = nextLesson;
     completeLessonRef.current = completeLesson;
-  }, [startTeaching, nextLesson, completeLesson]);
+    nextQuestionRef.current = nextQuestion;
+    completeCurriculumRef.current = completeCurriculum;
+    startQuestionsRef.current = startQuestions;
+    handleAnswerSelectRef.current = handleAnswerSelect;
+  });
 
   // Expose methods via ref (for external control)
   useImperativeHandle(ref, () => ({

package/src/lib/talkinghead.mjs

@@ -3248,7 +3248,7 @@ class TalkingHead {
         const module = LIPSYNC_MODULES[langLower];
         
         if (module && module[className]) {
-          this.lipsync[lang] = new module[className];
+        this.lipsync[lang] = new module[className];
           console.log(`Loaded lip-sync module for ${lang}`);
         } else {
           console.warn(`Lip-sync module for ${lang} not found. Available modules:`, Object.keys(LIPSYNC_MODULES));