@memori.ai/memori-react 7.19.1 → 7.21.0

package/src/components/Avatar/AvatarView/AvatarComponent/avatarComponent.tsx

@@ -1,261 +1,106 @@
-// Import required dependencies
-import React, { useState, useEffect, useCallback } from 'react';
-import AnimationControlPanel from './components/controls';
+import { useRef, useEffect, useCallback, memo } from 'react';
+import { AvatarAnimator } from './components/controllers/AvatarAnimator';
 import { FullbodyAvatar } from './components/FullbodyAvatar/fullbodyAvatar';
 import HalfBodyAvatar from './components/halfbodyAvatar';
-import {
-  BASE_ACTIONS,
-  MAPPING_BLEND_SHAPE_TO_EMOTION_CUSTOM_GLB,
-  MAPPING_BLEND_SHAPE_TO_EMOTION_RPM,
-} from './constants';
 
-// Props interface for AvatarView component
-interface Props {
-  showControls: boolean;
-  animation?: string;
-  loading: boolean;
+interface AvatarViewProps {
+  chatEmission: string | null | undefined;
   url: string;
   sex: 'MALE' | 'FEMALE';
   eyeBlink: boolean;
-  headMovement: boolean;
-  speaking: boolean;
-  isZoomed: boolean;
-  chatEmission: any;
-  avatarHeight?: number;
-  avatarDepth?: number;
-  stopProcessing: () => void;
-  resetVisemeQueue: () => void;
+  halfBody: boolean;
+  loading: boolean;
+  avatarHeight: number;
+  avatarDepth: number;
   updateCurrentViseme: (
     currentTime: number
   ) => { name: string; weight: number } | null;
-  setCameraZ: (value: number) => void;
+  setCameraZ: (cameraZ: number) => void;
+  headMovement: boolean;
+  speaking: boolean;
+  showControls: boolean;
 }
 
-/**
- * AvatarView Component
- * Renders either a full body or half body 3D avatar with animations and morphing capabilities
- */
-export const AvatarView: React.FC<Props & { halfBody: boolean }> = ({
-  stopProcessing,
+// Memoized FullbodyAvatar component to prevent unnecessary re-renders
+const MemoizedFullbodyAvatar = memo(FullbodyAvatar);
+
+// Memoized HalfBodyAvatar component to prevent unnecessary re-renders
+const MemoizedHalfBodyAvatar = memo(HalfBodyAvatar);
+
+export const AvatarView = ({
   chatEmission,
-  showControls,
-  animation,
   url,
   sex,
   eyeBlink,
-  headMovement,
   halfBody,
   loading,
   avatarHeight = 50,
   avatarDepth = -50,
   updateCurrentViseme,
-  resetVisemeQueue,
   setCameraZ,
-}) => {
-  // State management for avatar animations and morphing
-  const [currentBaseAction, setCurrentBaseAction] = useState({
-    action: animation || 'Idle1',
-    weight: 1,
-  });
-  const [morphTargetInfluences, setMorphTargetInfluences] = useState<
-    Record<string, number>
-  >({});
-  const [morphTargetDictionary, setMorphTargetDictionary] = useState<
-    Record<string, number>
-  >({});
-  const [emotionMorphTargets, setEmotionMorphTargets] = useState<
-    Record<string, number>
-  >({});
-  const [isRPM, setIsRPM] = useState(false);
-  const [timeScale, setTimeScale] = useState(0.8);
-
-  // Map of basic emotions with their corresponding morph values
-  const emotionMap: Record<string, Record<string, number>> = {
-    Joy: { Joy: 1 },
-    Anger: { Anger: 1 },
-    Surprise: { Surprise: 1 },
-    Sadness: { Sadness: 1 },
-    Fear: { Fear: 1 },
-  };
-
-  // Helper function to get default emotion state (all set to 0)
-  const getDefaultEmotions = () =>
-    Object.keys(emotionMap).reduce((acc, key) => ({ ...acc, [key]: 0 }), {});
-
-  // Handlers for different blend shape types
-  const handleRPMBlendShape = useCallback(
-    (outputContent: string) =>
-      MAPPING_BLEND_SHAPE_TO_EMOTION_RPM[
-        outputContent as keyof typeof MAPPING_BLEND_SHAPE_TO_EMOTION_RPM
-      ],
-    []
-  );
-
-  const handleCustomGLBBlendShape = useCallback(
-    (outputContent: string) =>
-      MAPPING_BLEND_SHAPE_TO_EMOTION_CUSTOM_GLB[
-        outputContent as keyof typeof MAPPING_BLEND_SHAPE_TO_EMOTION_CUSTOM_GLB
-      ],
-    []
-  );
-
-  // Handler for setting emotion morph target influences, used for RPM and GLB blend shapes
-  const setEmotionMorphTargetInfluences = useCallback(
-    (action: string, outputContent: string) => {
-      if (action.startsWith('Loading')) return;
-
-      const defaultEmotions = getDefaultEmotions();
-
-      // If output content is default, set default emotions
-      if (outputContent === 'default') {
-        setEmotionMorphTargets(defaultEmotions);
-        return;
-      }
-
-      // If RPM, convert emotion to blend shape
-      /*from the chat output, we get the emotion and we convert it to the blend shapes
-       * we map the emotion to the blend shape, example:
-       * Anger -> {browDownLeft: 1, browDownRight: 0}
-       * Joy -> {browUpLeft: 1, browUpRight: 0}
-       * Surprise -> {browUpLeft: 1, browUpRight: 0}
-       * Sadness -> {browDownLeft: 1, browDownRight: 0}
-       * Fear -> {browDownLeft: 1, browDownRight: 0}
-       */
-      if (isRPM) {
-        const emotion = handleRPMBlendShape(outputContent);
-        setEmotionMorphTargets(_ => ({ ...defaultEmotions, ...emotion }));
-      } else {
-        // If GLB, convert italian emotions to english ones
-        const emotion = handleCustomGLBBlendShape(outputContent);
-        const emotionValues =
-          emotion === 'default' ? defaultEmotions : emotionMap[emotion];
-        setEmotionMorphTargets(_ => ({ ...defaultEmotions, ...emotionValues }));
-      }
-    },
-    [isRPM, handleRPMBlendShape, handleCustomGLBBlendShape]
-  );
-
-  // Callback handlers for various avatar state changes
-  const onBaseActionChange = useCallback(
-    (action: string, outputContent: string) => {
-      // Set emotion morph target influences
-      setEmotionMorphTargetInfluences(action, outputContent);
-
-      // Set current base action
-      setCurrentBaseAction({ action, weight: 1 });
-    },
-    [setEmotionMorphTargetInfluences]
-  );
-
-  const onMorphTargetInfluencesChange = useCallback(
-    (influences: Record<string, number>) => {
-      // Set morph target influences
-      setMorphTargetInfluences(prev => ({ ...prev, ...influences }));
-    },
-    []
-  );
-
-  const onMorphTargetDictionaryChange = useCallback(
-    (dictionary: Record<string, number>) => {
-      // Set morph target dictionary
-      setMorphTargetDictionary(dictionary);
-    },
-    []
-  );
-
-  // Effect to handle animation changes based on loading state and chat emissions
-  useEffect(() => {
-    // If loading, set a random loading animation
-    if (loading) {
-      const randomNumber = Math.floor(Math.random() * 3) + 1;
-      onBaseActionChange(`Loading${randomNumber}`, '');
-      return;
+  headMovement,
+  // speaking,
+  showControls,
+}: AvatarViewProps) => {
+  // Reference to the AvatarAnimator instance for animation control
+  const animatorRef = useRef<AvatarAnimator | null>(null);
+
+  // Memoize the setAnimatorRef callback to ensure it doesn't change on re-renders
+  const setAnimatorRef = useCallback((animator: AvatarAnimator | null) => {
+    if (animator !== animatorRef.current) {
+      console.log('[AvatarView] Animator reference updated');
+      animatorRef.current = animator;
     }
+  }, []); // Empty dependency array ensures this function never changes
 
-    // Check if chat emission contains animation control
-    const hasOutputTagEmotion = chatEmission?.includes(
-      '<output class="memori-emotion">'
-    );
-    const outputContentEmotion = hasOutputTagEmotion
-      ? chatEmission
-          ?.split('<output class="memori-emotion">')[1]
-          ?.split('</output>')[0]
-          ?.trim()
-      : null;
-
-    // Check if chat emission contains animation sequence
-    const hasOutputTagSequence = chatEmission?.includes(
-      '<output class="animation-sequence">'
-    );
-    const outputContentSequence = hasOutputTagSequence
-      ? chatEmission
-          ?.split('<output class="animation-sequence">')[1]
-          ?.split('</output>')[0]
-          ?.trim()
-      : null;
-
-    if (outputContentSequence && outputContentSequence.includes('->')) {
-      // It's a sequence
-      onBaseActionChange(outputContentSequence, outputContentSequence);
-    } else if (outputContentEmotion) {
-
-      console.log('[AvatarView] outputContentEmotion:', outputContentEmotion);
-      // It's an emotion
-      const randomNumber = Math.floor(Math.random() * 3) + 1;
-      onBaseActionChange(
-        `${outputContentEmotion}${randomNumber}`,
-        outputContentEmotion
-      );
-    } else {
-      const randomNumber = Math.floor(Math.random() * 5) + 1;
-      onBaseActionChange(`Idle${randomNumber === 3 ? 4 : randomNumber}`, '');
+  // React to changes in chat emission or loading state
+  // This effect doesn't re-create the animator, it just uses it
+  useEffect(() => {
+    if (!animatorRef.current) return;
+    
+    try {
+      // Prevents any extra work if loading/emission hasn't changed
+      animatorRef.current.processChatEmission(chatEmission, loading);
+    } catch (error) {
+      console.error('Error processing chat emission:', error);
     }
-  }, [chatEmission, loading, onBaseActionChange]);
+  }, [loading, chatEmission]); // Both dependencies are needed
 
-  // Common props shared between full body and half body avatars
-  const commonAvatarProps = {
+  // Memoize common props to prevent unnecessary object creation on re-renders
+  const commonAvatarProps = useCallback(() => ({
     url,
     onCameraZChange: setCameraZ,
-    setMorphTargetInfluences,
-    setMorphTargetDictionary,
     updateCurrentViseme,
     avatarHeight,
     avatarDepth,
-  };
+    setAnimatorRef, // This is now stable across renders
+  }), [url, setCameraZ, updateCurrentViseme, avatarHeight, avatarDepth, setAnimatorRef]);
 
-  // Render avatar with controls
+  // Render avatar based on halfBody flag
   return (
     <>
-      {showControls && (
-        <AnimationControlPanel
-          timeScale={timeScale}
-          morphTargetDictionary={morphTargetDictionary}
-          onBaseActionChange={onBaseActionChange}
-          onMorphTargetInfluencesChange={onMorphTargetInfluencesChange}
-          onMorphTargetDictionaryChange={onMorphTargetDictionaryChange}
-          baseActions={BASE_ACTIONS}
-          currentBaseAction={currentBaseAction}
-          modifyTimeScale={setTimeScale}
-        />
-      )}
-
       {halfBody ? (
-        <HalfBodyAvatar {...commonAvatarProps} headMovement={headMovement} />
+        <MemoizedHalfBodyAvatar
+          {...commonAvatarProps()}
+          eyeBlink={eyeBlink}
+          headMovement={headMovement}
+        />
       ) : (
-        <FullbodyAvatar
-          {...commonAvatarProps}
+        <MemoizedFullbodyAvatar
+          {...commonAvatarProps()}
           sex={sex}
-          setIsRpm={setIsRPM}
-          resetVisemeQueue={resetVisemeQueue}
           eyeBlink={eyeBlink}
-          currentBaseAction={currentBaseAction}
-          timeScale={timeScale}
-          morphTargetInfluences={morphTargetInfluences}
-          stopProcessing={stopProcessing}
-          emotionMorphTargets={emotionMorphTargets}
-          halfBody={halfBody}
+          chatEmission={chatEmission}
+          loading={loading}
         />
       )}
+      {showControls && animatorRef.current && (
+        <div className="animation-controls">
+          {/* Optional animation control UI could be added here */}
+        </div>
+      )}
     </>
   );
 };
+
+export default memo(AvatarView); // Memoize the entire component