@sage-rsc/talking-head-react 1.0.80 → 1.0.82

package/dist/index.js

@@ -1,10 +1,10 @@
 import { jsxs as Pe, jsx as me } from "react/jsx-runtime";
-import { forwardRef as Me, useRef as D, useState as ce, useEffect as de, useCallback as T, useImperativeHandle as Ee, useLayoutEffect as Xe } from "react";
+import { forwardRef as Me, useRef as O, useState as ce, useEffect as de, useCallback as T, useImperativeHandle as Ee, useLayoutEffect as Xe } from "react";
 import * as x from "three";
 import { OrbitControls as Ye } from "three/addons/controls/OrbitControls.js";
 import { GLTFLoader as je } from "three/addons/loaders/GLTFLoader.js";
 import { DRACOLoader as Qe } from "three/addons/loaders/DRACOLoader.js";
-import { FBXLoader as Oe } from "three/addons/loaders/FBXLoader.js";
+import { FBXLoader as De } from "three/addons/loaders/FBXLoader.js";
 import { RoomEnvironment as qe } from "three/addons/environments/RoomEnvironment.js";
 import Ke from "three/addons/libs/stats.module.js";
 let m, re, ue;
@@ -4961,15 +4961,15 @@ class Be {
     let l = t;
     for (; ; )
       if (l.hasOwnProperty(this.stateName))
-        l = l[this.stateName];
+        (this.stateName === "speaking" || this.stateName === "idle") && console.log("Selected state:", this.stateName, "for avatar body:", this.avatar?.body), l = l[this.stateName];
       else if (l.hasOwnProperty(this.moodName))
         l = l[this.moodName];
       else if (l.hasOwnProperty(this.poseName))
         l = l[this.poseName];
       else if (l.hasOwnProperty(this.viewName))
         l = l[this.viewName];
-      else if (this.avatar.body && l.hasOwnProperty(this.avatar.body))
-        console.log("Applying gender-specific override:", this.avatar.body, "for object:", Object.keys(l)), l = l[this.avatar.body];
+      else if (this.avatar && this.avatar.body && l.hasOwnProperty(this.avatar.body))
+        console.log("Applying gender-specific override:", this.avatar.body, "for state:", this.stateName, "keys:", Object.keys(l)), l = l[this.avatar.body];
       else if (l.hasOwnProperty("alt")) {
         let r = l.alt[0];
         if (l.alt.length > 1) {
@@ -5122,7 +5122,7 @@ class Be {
           this.onSubtitles && typeof this.onSubtitles == "function" && this.onSubtitles(i);
           break;
         case "pose":
-          this.poseName = i, console.log("Setting pose to:", this.poseName, "for avatar body:", this.avatar?.body), this.setPoseFromTemplate(this.poseTemplates[this.poseName]);
+          this.avatar && this.avatar.body === "M" && i === "hip" && (this.poseTemplates.wide ? (i = "wide", console.log("Overriding hip pose to wide for male avatar")) : this.poseTemplates.side && (i = "side", console.log("Overriding hip pose to side for male avatar"))), this.poseName = i, console.log("Setting pose to:", this.poseName, "for avatar body:", this.avatar?.body, "state:", this.stateName), this.setPoseFromTemplate(this.poseTemplates[this.poseName]);
           break;
         case "gesture":
           this.playGesture(...i);
@@ -6404,7 +6404,7 @@ class Be {
       } catch (c) {
         console.warn(`Could not verify file existence for ${t}, attempting to load anyway:`, c);
       }
-      const u = new Oe();
+      const u = new De();
       let a;
       try {
         a = await u.loadAsync(t, e);
@@ -6481,7 +6481,7 @@ class Be {
       let l = this.animQueue.find((h) => h.template.name === "pose");
       l && (l.ts[0] = this.animClock + n * 1e3 + 2e3), this.setPoseFromTemplate(o);
     } else {
-      let h = await new Oe().loadAsync(t, e);
+      let h = await new De().loadAsync(t, e);
       if (h && h.animations && h.animations[i]) {
         let r = h.animations[i];
         const u = {};
@@ -6686,32 +6686,32 @@ const Ve = Me(({
   style: y = {},
   animations: b = {}
 }, I) => {
-  const V = D(null), p = D(null), M = D(r), z = D(null), f = D(null), E = D(!1), P = D({ remainingText: null, originalText: null, options: null }), U = D([]), oe = D(0), [S, Z] = ce(!0), [K, X] = ce(null), [$, se] = ce(!1), [ae, pe] = ce(!1);
+  const V = O(null), p = O(null), M = O(r), z = O(null), f = O(null), E = O(!1), P = O({ remainingText: null, originalText: null, options: null }), U = O([]), oe = O(0), [S, Z] = ce(!0), [K, X] = ce(null), [$, se] = ce(!1), [ae, pe] = ce(!1);
   de(() => {
     E.current = ae;
   }, [ae]), de(() => {
     M.current = r;
   }, [r]);
   const ee = Fe(), le = i || ee.service;
-  let O;
-  le === "browser" ? O = {
+  let D;
+  le === "browser" ? D = {
     service: "browser",
     endpoint: "",
     apiKey: null,
     defaultVoice: "Google US English"
-  } : le === "elevenlabs" ? O = {
+  } : le === "elevenlabs" ? D = {
     service: "elevenlabs",
     endpoint: "https://api.elevenlabs.io/v1/text-to-speech",
     apiKey: o || ee.apiKey,
     defaultVoice: s || ee.defaultVoice || Ie.defaultVoice,
     voices: ee.voices || Ie.voices
-  } : le === "deepgram" ? O = {
+  } : le === "deepgram" ? D = {
     service: "deepgram",
     endpoint: "https://api.deepgram.com/v1/speak",
     apiKey: o || ee.apiKey,
     defaultVoice: s || ee.defaultVoice || Te.defaultVoice,
     voices: ee.voices || Te.voices
-  } : O = {
+  } : D = {
     ...ee,
     // Override API key if provided via props
     apiKey: o !== null ? o : ee.apiKey
@@ -6721,14 +6721,14 @@ const Ve = Me(({
     body: t,
     avatarMood: e,
     ttsLang: le === "browser" ? "en-US" : n,
-    ttsVoice: s || O.defaultVoice,
+    ttsVoice: s || D.defaultVoice,
     lipsyncLang: "en",
     showFullAvatar: r,
     bodyMovement: l,
     movementIntensity: h
   }, R = {
-    ttsEndpoint: O.endpoint,
-    ttsApikey: O.apiKey,
+    ttsEndpoint: D.endpoint,
+    ttsApikey: D.apiKey,
     ttsService: le,
     lipsyncModules: ["en"],
     cameraView: u
@@ -6808,8 +6808,8 @@ const Ve = Me(({
                 be = !0;
                 try {
                   F.onSpeechEnd();
-                } catch (De) {
-                  console.error("Error in onSpeechEnd callback (timeout):", De);
+                } catch (Oe) {
+                  console.error("Error in onSpeechEnd callback (timeout):", Oe);
                 }
               }
               return;
@@ -7053,7 +7053,7 @@ const pt = Me(({
   style: s = {},
   avatarConfig: o = {}
 }, l) => {
-  const h = D(null), r = D(null), [u, a] = ce(!0), [c, d] = ce(null), [g, y] = ce(!1), b = Fe(), I = o.ttsService || b.service, V = I === "browser" ? {
+  const h = O(null), r = O(null), [u, a] = ce(!0), [c, d] = ce(null), [g, y] = ce(!1), b = Fe(), I = o.ttsService || b.service, V = I === "browser" ? {
     endpoint: "",
     apiKey: null,
     defaultVoice: "Google US English"
@@ -7308,13 +7308,13 @@ const gt = Me(({
   animations: V = {},
   autoSpeak: p = !1
 }, M) => {
-  const z = D(null), f = D(null), E = D(u), P = D(null), U = D(null), oe = D(!1), S = D({ remainingText: null, originalText: null, options: null }), Z = D([]), [K, X] = ce(!0), [$, se] = ce(null), [ae, pe] = ce(!1), [ee, le] = ce(!1);
+  const z = O(null), f = O(null), E = O(u), P = O(null), U = O(null), oe = O(!1), S = O({ remainingText: null, originalText: null, options: null }), Z = O([]), [K, X] = ce(!0), [$, se] = ce(null), [ae, pe] = ce(!1), [ee, le] = ce(!1);
   de(() => {
     oe.current = ee;
   }, [ee]), de(() => {
     E.current = u;
   }, [u]);
-  const O = Fe(), v = s || O.service;
+  const D = Fe(), v = s || D.service;
   let R;
   v === "browser" ? R = {
     service: "browser",
@@ -7324,18 +7324,18 @@ const gt = Me(({
   } : v === "elevenlabs" ? R = {
     service: "elevenlabs",
     endpoint: "https://api.elevenlabs.io/v1/text-to-speech",
-    apiKey: l || O.apiKey,
-    defaultVoice: o || O.defaultVoice || Ie.defaultVoice,
-    voices: O.voices || Ie.voices
+    apiKey: l || D.apiKey,
+    defaultVoice: o || D.defaultVoice || Ie.defaultVoice,
+    voices: D.voices || Ie.voices
   } : v === "deepgram" ? R = {
     service: "deepgram",
     endpoint: "https://api.deepgram.com/v1/speak",
-    apiKey: l || O.apiKey,
-    defaultVoice: o || O.defaultVoice || Te.defaultVoice,
-    voices: O.voices || Te.voices
+    apiKey: l || D.apiKey,
+    defaultVoice: o || D.defaultVoice || Te.defaultVoice,
+    voices: D.voices || Te.voices
   } : R = {
-    ...O,
-    apiKey: l !== null ? l : O.apiKey
+    ...D,
+    apiKey: l !== null ? l : D.apiKey
   };
   const k = {
     url: t,
@@ -7516,7 +7516,7 @@ const yt = Me(({
   },
   autoStart: h = !1
 }, r) => {
-  const u = D(null), a = D({
+  const u = O(null), a = O({
     currentModuleIndex: 0,
     currentLessonIndex: 0,
     currentQuestionIndex: 0,
@@ -7526,18 +7526,18 @@ const yt = Me(({
     curriculumCompleted: !1,
     score: 0,
     totalQuestions: 0
-  }), c = D({
+  }), c = O({
     onLessonStart: n,
     onLessonComplete: i,
     onQuestionAnswer: s,
     onCurriculumComplete: o,
     onCustomAction: l
-  }), d = D(null), g = D(null), y = D(null), b = D(null), I = D(null), V = D(null), p = D(null), M = D(G?.curriculum || {
+  }), d = O(null), g = O(null), y = O(null), b = O(null), I = O(null), V = O(null), p = O(null), M = O(G?.curriculum || {
     title: "Default Curriculum",
     description: "No curriculum data provided",
     language: "en",
     modules: []
-  }), z = D({
+  }), z = O({
     avatarUrl: t.avatarUrl || "/avatars/brunette.glb",
     avatarBody: t.avatarBody || "F",
     mood: t.mood || "happy",
@@ -8056,7 +8056,7 @@ const yt = Me(({
     // Avatar readiness check (always returns current value)
     isAvatarReady: () => u.current?.isReady || !1
   }), [X, S, $, se, Z, K, U, oe, ee, E, f]);
-  const O = z.current || {
+  const D = z.current || {
     avatarUrl: "/avatars/brunette.glb",
     avatarBody: "F",
     mood: "happy",
@@ -8073,18 +8073,18 @@ const yt = Me(({
     Ve,
     {
       ref: u,
-      avatarUrl: O.avatarUrl,
-      avatarBody: O.avatarBody,
-      mood: O.mood,
-      ttsLang: O.ttsLang,
-      ttsService: O.ttsService,
-      ttsVoice: O.ttsVoice,
-      ttsApiKey: O.ttsApiKey,
-      bodyMovement: O.bodyMovement,
-      movementIntensity: O.movementIntensity,
-      showFullAvatar: O.showFullAvatar,
+      avatarUrl: D.avatarUrl,
+      avatarBody: D.avatarBody,
+      mood: D.mood,
+      ttsLang: D.ttsLang,
+      ttsService: D.ttsService,
+      ttsVoice: D.ttsVoice,
+      ttsApiKey: D.ttsApiKey,
+      bodyMovement: D.bodyMovement,
+      movementIntensity: D.movementIntensity,
+      showFullAvatar: D.showFullAvatar,
       cameraView: "upper",
-      animations: O.animations,
+      animations: D.animations,
       onReady: le,
       onLoading: () => {
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sage-rsc/talking-head-react",
-  "version": "1.0.80",
+  "version": "1.0.82",
   "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/lib/talkinghead.mjs

@@ -2660,6 +2660,10 @@ class TalkingHead {
     let a = t;
     while(1) {
       if ( a.hasOwnProperty(this.stateName) ) {
+        // Debug: Log state selection
+        if (this.stateName === 'speaking' || this.stateName === 'idle') {
+          console.log('Selected state:', this.stateName, 'for avatar body:', this.avatar?.body);
+        }
         a = a[this.stateName];
       } else if ( a.hasOwnProperty(this.moodName) ) {
         a = a[this.moodName];
@@ -2667,9 +2671,9 @@ class TalkingHead {
         a = a[this.poseName];
       } else if ( a.hasOwnProperty(this.viewName) ) {
         a = a[this.viewName];
-      } else if ( this.avatar.body && a.hasOwnProperty(this.avatar.body) ) {
+      } else if ( this.avatar && this.avatar.body && a.hasOwnProperty(this.avatar.body) ) {
         // Debug: Log gender-specific override
-        console.log('Applying gender-specific override:', this.avatar.body, 'for object:', Object.keys(a));
+        console.log('Applying gender-specific override:', this.avatar.body, 'for state:', this.stateName, 'keys:', Object.keys(a));
         a = a[this.avatar.body];
       } else if ( a.hasOwnProperty('alt') ) {
 
@@ -3028,8 +3032,20 @@ class TalkingHead {
         break;
 
       case 'pose':
+        // Ensure gender-appropriate pose for male avatars
+        // If 'hip' pose is selected for male avatar, override to 'wide' or 'side'
+        if (this.avatar && this.avatar.body === 'M' && j === 'hip') {
+          // Prefer 'wide' for male avatars, fallback to 'side' if 'wide' doesn't exist
+          if (this.poseTemplates['wide']) {
+            j = 'wide';
+            console.log('Overriding hip pose to wide for male avatar');
+          } else if (this.poseTemplates['side']) {
+            j = 'side';
+            console.log('Overriding hip pose to side for male avatar');
+          }
+        }
         this.poseName = j;
-        console.log('Setting pose to:', this.poseName, 'for avatar body:', this.avatar?.body);
+        console.log('Setting pose to:', this.poseName, 'for avatar body:', this.avatar?.body, 'state:', this.stateName);
         this.setPoseFromTemplate( this.poseTemplates[ this.poseName ] );
         break;