@sage-rsc/talking-head-react 1.0.55 → 1.0.57

package/package.json

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

@@ -360,6 +360,11 @@ const CurriculumLearning = forwardRef(({
   const nextQuestion = useCallback(() => {
     const currentLesson = getCurrentLesson();
     if (stateRef.current.currentQuestionIndex < (currentLesson?.questions?.length || 0) - 1) {
+      // Stop any current speech/feedback before skipping to next question
+      if (avatarRef.current && avatarRef.current.stopSpeaking) {
+        avatarRef.current.stopSpeaking();
+      }
+      
       stateRef.current.currentQuestionIndex += 1;
     
       // Trigger custom action IMMEDIATELY for UI update (before avatar speaks)
@@ -987,6 +992,9 @@ const CurriculumLearning = forwardRef(({
       }
     },
     stopSpeaking: () => avatarRef.current?.stopSpeaking(),
+    pauseSpeaking: () => avatarRef.current?.pauseSpeaking(),
+    resumeSpeaking: async () => await avatarRef.current?.resumeSpeaking(),
+    isPaused: () => avatarRef.current?.isPaused || false,
     setMood: (mood) => avatarRef.current?.setMood(mood),
     playAnimation: (animationName, disablePositionLock) => avatarRef.current?.playAnimation(animationName, disablePositionLock),
     setBodyMovement: (movement) => avatarRef.current?.setBodyMovement(movement),

package/src/components/TalkingHeadAvatar.jsx

@@ -50,9 +50,11 @@ const TalkingHeadAvatar = forwardRef(({
   const containerRef = useRef(null);
   const talkingHeadRef = useRef(null);
   const showFullAvatarRef = useRef(showFullAvatar);
+  const pausedSpeechRef = useRef(null); // Track paused speech for resume
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(null);
   const [isReady, setIsReady] = useState(false);
+  const [isPaused, setIsPaused] = useState(false);
   
   // Update ref when prop changes
   useEffect(() => {
@@ -275,6 +277,10 @@ const TalkingHeadAvatar = forwardRef(({
   const speakText = useCallback(async (textToSpeak, options = {}) => {
     if (talkingHeadRef.current && isReady) {
       try {
+        // Clear paused speech when starting new speech
+        pausedSpeechRef.current = { text: textToSpeak, options };
+        setIsPaused(false);
+        
         // Always resume audio context first (required for user interaction)
         await resumeAudioContext();
         
@@ -385,9 +391,48 @@ const TalkingHeadAvatar = forwardRef(({
       if (talkingHeadRef.current.setSlowdownRate) {
         talkingHeadRef.current.setSlowdownRate(1.0);
       }
+      // Clear paused speech when stopping
+      pausedSpeechRef.current = null;
+      setIsPaused(false);
+    }
+  }, []);
+
+  const pauseSpeaking = useCallback(() => {
+    if (talkingHeadRef.current && talkingHeadRef.current.pauseSpeaking) {
+      // Only pause if we have paused speech stored (meaning something is currently speaking)
+      if (pausedSpeechRef.current && pausedSpeechRef.current.text) {
+        talkingHeadRef.current.pauseSpeaking();
+        setIsPaused(true);
+      }
     }
   }, []);
 
+  const resumeSpeaking = useCallback(async () => {
+    if (talkingHeadRef.current && pausedSpeechRef.current) {
+      setIsPaused(false);
+      const pausedSpeech = pausedSpeechRef.current;
+      pausedSpeechRef.current = null;
+      
+      // Resume audio context
+      await resumeAudioContext();
+      
+      // Re-speak the paused text
+      if (pausedSpeech.text) {
+        const speakOptions = {
+          ...pausedSpeech.options,
+          lipsyncLang: pausedSpeech.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(pausedSpeech.text, speakOptions);
+        }
+      }
+    }
+  }, [resumeAudioContext]);
+
   const setMood = useCallback((mood) => {
     if (talkingHeadRef.current) {
       talkingHeadRef.current.setMood(mood);
@@ -465,11 +510,14 @@ const TalkingHeadAvatar = forwardRef(({
   useImperativeHandle(ref, () => ({
     speakText,
     stopSpeaking,
+    pauseSpeaking,
+    resumeSpeaking,
     resumeAudioContext,
     setMood,
     setTimingAdjustment,
     playAnimation,
     isReady,
+    isPaused,
     talkingHead: talkingHeadRef.current,
     handleResize,
     setBodyMovement: (movement) => {