@sage-rsc/talking-head-react 1.7.5 → 1.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sage-rsc/talking-head-react",
-  "version": "1.7.5",
+  "version": "1.7.7",
   "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/SimpleTalkingAvatar.jsx

@@ -25,7 +25,8 @@ import { loadAnimationsFromManifest, autoLoadAnimationsFromFolders } from '../ut
  * @param {Function} props.onReady - Callback when avatar is ready
  * @param {Function} props.onLoading - Callback for loading progress
  * @param {Function} props.onError - Callback for errors
- * @param {Function} props.onSpeechEnd - Callback when speech ends
+ * @param {Function} props.onSpeechStart - Callback when avatar starts speaking
+ * @param {Function} props.onSpeechEnd - Callback when avatar finishes speaking
  * @param {string} props.className - Additional CSS classes
  * @param {Object} props.style - Additional inline styles
  * @param {Object} props.animations - Object mapping animation names to FBX file paths, or animation groups
@@ -53,6 +54,7 @@ const SimpleTalkingAvatar = forwardRef(({
   onReady = () => {},
   onLoading = () => {},
   onError = () => {},
+  onSpeechStart = () => {},
   onSpeechEnd = () => {},
   className = "",
   style = {},
@@ -116,11 +118,12 @@ const SimpleTalkingAvatar = forwardRef(({
       
       // Option 1: Load from manifest file only
       if (animations.manifest && !animations.auto) {
-        try {
-          const manifestAnimations = await loadAnimationsFromManifest(animations.manifest);
+        const manifestAnimations = await loadAnimationsFromManifest(animations.manifest);
+        // loadAnimationsFromManifest returns {} on error, so check if we got anything
+        const hasAnimations = Object.keys(manifestAnimations).length > 0;
+        if (hasAnimations) {
           setLoadedAnimations(manifestAnimations);
-        } catch (error) {
-          console.error('Failed to load animation manifest:', error);
+        } else {
           setLoadedAnimations(animations);
         }
       }
@@ -153,7 +156,7 @@ const SimpleTalkingAvatar = forwardRef(({
             folderPaths[`shared_talking`] = `${basePath}/shared/talking`;
             folderPaths[`shared_idle`] = `${basePath}/shared/idle`;
             
-            console.log(`📁 Loading animations from folders with genderKey="${genderKey}" for avatarBody="${avatarBody}"`);
+            // Loading animations from folders
             const discoveredAnimations = await autoLoadAnimationsFromFolders(folderPaths, avatarBody);
             
             // Check if we found any animations
@@ -404,33 +407,30 @@ const SimpleTalkingAvatar = forwardRef(({
     if (loadedAnimations._genderSpecific) {
       const genderKey = getGenderKey(avatarBody);
       
-      // Debug: Log gender detection
-      console.log(`🔍 Gender detection: avatarBody="${avatarBody}" -> genderKey="${genderKey}"`);
-      
       const genderGroups = loadedAnimations._genderSpecific[genderKey];
       
       // Try gender-specific first
       if (genderGroups && genderGroups[groupName]) {
         group = genderGroups[groupName];
-        console.log(`✅ Found ${genderKey} animations for "${groupName}": ${Array.isArray(group) ? group.length : 1} animation(s)`);
       } 
       // Fallback to shared gender-specific animations
       else if (loadedAnimations._genderSpecific.shared && loadedAnimations._genderSpecific.shared[groupName]) {
         group = loadedAnimations._genderSpecific.shared[groupName];
-        console.log(`✅ Found shared animations for "${groupName}": ${Array.isArray(group) ? group.length : 1} animation(s)`);
-      } else {
-        console.log(`⚠️ No ${genderKey} or shared animations found for "${groupName}"`);
       }
     }
     
     // Fallback to root-level animations if gender-specific not found
     if (!group && loadedAnimations[groupName]) {
       group = loadedAnimations[groupName];
-      console.log(`✅ Found root-level animations for "${groupName}": ${Array.isArray(group) ? group.length : 1} animation(s)`);
     }
     
     if (!group) {
-      console.log(`❌ No animations found for "${groupName}"`);
+      // Only log warning if animations were actually configured (not just empty object)
+      const hasAnyAnimations = Object.keys(loadedAnimations).length > 0 || 
+                               (loadedAnimations._genderSpecific && Object.keys(loadedAnimations._genderSpecific).length > 0);
+      if (hasAnyAnimations) {
+        console.warn(`⚠️ No animations found for group "${groupName}". Make sure animations are configured correctly.`);
+      }
       return [];
     }
     
@@ -582,6 +582,16 @@ const SimpleTalkingAvatar = forwardRef(({
       playRandomAnimation(animationGroup);
     }
 
+    // Call onSpeechStart callback
+    try {
+      onSpeechStart(textToSpeak);
+      if (options.onSpeechStart) {
+        options.onSpeechStart(textToSpeak);
+      }
+    } catch (err) {
+      console.warn('Error in onSpeechStart callback:', err);
+    }
+
     // Reset speech progress tracking
     speechProgressRef.current = { remainingText: null, originalText: null, options: null };
     originalSentencesRef.current = [];
@@ -691,7 +701,7 @@ const SimpleTalkingAvatar = forwardRef(({
           speechEndIntervalRef.current = null;
         }
 
-        // Extract remaining text from speech queue
+        // Extract remaining text from speech queue (not yet sent to TTS)
         let remainingText = '';
         if (speechQueue.length > 0) {
           remainingText = speechQueue.map(item => {
@@ -702,9 +712,33 @@ const SimpleTalkingAvatar = forwardRef(({
           }).join(' ');
         }
 
+        // Extract text from audio playlist (currently playing or queued audio)
+        // This includes the currently playing sentence if it was interrupted
+        let audioPlaylistText = '';
+        if (audioPlaylist.length > 0) {
+          audioPlaylistText = audioPlaylist
+            .map(item => {
+              // Try to get text from the audio item
+              if (item.text) {
+                if (Array.isArray(item.text)) {
+                  return item.text.map(wordObj => wordObj.word).join(' ');
+                }
+                return item.text;
+              }
+              return '';
+            })
+            .filter(text => text.trim().length > 0)
+            .join(' ');
+        }
+
+        // Combine: if audio is playing, include that text first, then remaining queue text
+        const combinedRemainingText = audioPlaylistText 
+          ? (audioPlaylistText + (remainingText ? ' ' + remainingText : ''))
+          : remainingText;
+
         // Store progress for resume
         speechProgressRef.current = {
-          remainingText: remainingText || null,
+          remainingText: combinedRemainingText || null,
           originalText: pausedSpeechRef.current?.text || null,
           options: pausedSpeechRef.current?.options || null
         };
@@ -765,8 +799,15 @@ const SimpleTalkingAvatar = forwardRef(({
       
       setIsPaused(false);
       isPausedRef.current = false;
+      
+      // Call onSpeechEnd callback when manually stopped
+      try {
+        onSpeechEnd();
+      } catch (err) {
+        console.warn('Error in onSpeechEnd callback (stopSpeaking):', err);
+      }
     }
-  }, []);
+  }, [onSpeechEnd]);
 
   // Expose methods via ref
   useImperativeHandle(ref, () => ({

package/src/utils/animationLoader.js

@@ -13,13 +13,35 @@ export async function loadAnimationsFromManifest(manifestPath) {
   try {
     const response = await fetch(manifestPath);
     if (!response.ok) {
+      // Don't log error for 404 - manifest is optional
+      if (response.status === 404) {
+        return {};
+      }
       throw new Error(`Failed to fetch manifest: ${response.status} ${response.statusText}`);
     }
-    const manifest = await response.json();
+    
+    // Check if response is actually JSON (not HTML error page)
+    const contentType = response.headers.get('content-type');
+    if (contentType && !contentType.includes('application/json')) {
+      // Response is not JSON (probably HTML error page)
+      return {};
+    }
+    
+    const text = await response.text();
+    // Try to parse JSON, but check if it looks like HTML first
+    if (text.trim().startsWith('<!')) {
+      // This is HTML, not JSON (likely a 404 page)
+      return {};
+    }
+    
+    const manifest = JSON.parse(text);
     const animations = manifest.animations || {};
     return animations;
   } catch (error) {
-    console.error('Failed to load animation manifest:', error);
+    // Only log if it's not a JSON parse error (which we handle above)
+    if (!(error instanceof SyntaxError)) {
+      console.warn('⚠️ Could not load animation manifest (this is optional):', manifestPath);
+    }
     return {};
   }
 }