@memori.ai/memori-react 7.8.8 → 7.9.1

package/src/components/Avatar/Avatar.tsx

@@ -17,6 +17,8 @@ import Edit from '../icons/Edit';
 import cx from 'classnames';
 import ContainerAvatarView from './AvatarView';
 import { useViseme } from '../../context/visemeContext';
+import PositionControls from './AvatarView/AvatarComponent/positionControls/positionControls';
+import { getLocalConfig } from '../../helpers/configuration';
 
 export interface Props {
   memori: Memori;
@@ -34,6 +36,10 @@ export interface Props {
   animation?: string;
   isZoomed?: boolean;
   chatProps?: any;
+  enablePositionControls?: boolean;
+  setEnablePositionControls: (value: boolean) => void;
+  avatarType?: 'blob' | 'avatar3d' | null;
+  isTotem?: boolean;
 }
 
 const Avatar: React.FC<Props> = ({
@@ -52,6 +58,10 @@ const Avatar: React.FC<Props> = ({
   animation,
   isZoomed = false,
   chatProps,
+  avatarType = null,
+  enablePositionControls,
+  setEnablePositionControls,
+  isTotem = false,
 }) => {
   const { t } = useTranslation();
   const [isClient, setIsClient] = useState(false);
@@ -86,7 +96,8 @@ const Avatar: React.FC<Props> = ({
         integrationConfig?.avatar === 'readyplayerme-full' ||
         integrationConfig?.avatar === 'customglb' ||
         integrationConfig?.avatar === 'customrpm') &&
-      integrationConfig?.avatarURL
+      integrationConfig?.avatarURL &&
+      (avatarType && avatarType !== 'blob')
     ) {
       return (
         <>
@@ -114,11 +125,10 @@ const Avatar: React.FC<Props> = ({
 
   const renderAvatarContent = () => {
     if (!isClient) return null;
-
     if (
       integrationConfig?.avatar === 'readyplayerme' ||
       integrationConfig?.avatar === 'readyplayerme-full' ||
-      integrationConfig?.avatar === 'customrpm'
+      integrationConfig?.avatar === 'customrpm' 
     ) {
       return (
         <ErrorBoundary
@@ -131,6 +141,7 @@ const Avatar: React.FC<Props> = ({
           }
         >
           <ContainerAvatarView
+            enablePositionControls={enablePositionControls}
             updateCurrentViseme={updateCurrentViseme}
             url={integrationConfig.avatarURL}
             sex={memori.voiceType === 'FEMALE' ? 'FEMALE' : 'MALE'}
@@ -145,7 +156,9 @@ const Avatar: React.FC<Props> = ({
             stopProcessing={stopProcessing}
             resetVisemeQueue={resetVisemeQueue}
             isZoomed={isZoomed}
+            isTotem={isTotem}
             chatEmission={chatProps?.dialogState?.emission}
+            setEnablePositionControls={setEnablePositionControls}
           />
         </ErrorBoundary>
       );
@@ -182,10 +195,10 @@ const Avatar: React.FC<Props> = ({
   const getAvatarStyle = () => {
     if (integrationConfig?.avatar === 'readyplayerme') {
       return {
-        width: '300px',
-        height: '300px',
+        width: '100%',
+        height: '100%',
         backgroundColor: 'none',
-        borderRadius: '100%',
+        // borderRadius: '100%',
         boxShadow: 'none',
       };
     }

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import AnimationControlPanel from './components/controls';
-import FullbodyAvatar from './components/FullbodyAvatar/fullbodyAvatar';
+import { FullbodyAvatar } from './components/FullbodyAvatar/fullbodyAvatar'
 import HalfBodyAvatar from './components/halfbodyAvatar';
 
 interface Props {
@@ -14,11 +14,14 @@ interface Props {
   speaking: boolean;
   isZoomed: boolean;
   chatEmission: any;
+  avatarHeight?: number;
+  avatarDepth?: number;
   stopProcessing: () => void;
   resetVisemeQueue: () => void;
   updateCurrentViseme: (
     currentTime: number
   ) => { name: string; weight: number } | null;
+  setCameraZ: (value: number) => void;
 }
 
 interface BaseAction {
@@ -61,12 +64,15 @@ export const AvatarView: React.FC<Props & { halfBody: boolean }> = ({
   sex,
   eyeBlink,
   headMovement,
-  speaking,
+  // speaking,
   halfBody,
   loading,
-  isZoomed,
+  // isZoomed,
+  avatarHeight,
+  avatarDepth,
   updateCurrentViseme,
   resetVisemeQueue,
+  setCameraZ,
 }) => {
   const [currentBaseAction, setCurrentBaseAction] = useState({
     action: animation || 'Idle1',
@@ -207,13 +213,13 @@ export const AvatarView: React.FC<Props & { halfBody: boolean }> = ({
       {halfBody ? (
         <HalfBodyAvatar
           url={url}
-          headMovement={headMovement}
-          speaking={speaking}
-          eyeBlink={eyeBlink}
-          morphTargetInfluences={morphTargetInfluences}
+          onCameraZChange={setCameraZ}
           setMorphTargetInfluences={setMorphTargetInfluences}
           setMorphTargetDictionary={setMorphTargetDictionary}
           updateCurrentViseme={updateCurrentViseme}
+          avatarHeight={avatarHeight || 50}
+          avatarDepth={avatarDepth || -50}
+          headMovement={headMovement}
         />
       ) : (
         <FullbodyAvatar
@@ -224,12 +230,15 @@ export const AvatarView: React.FC<Props & { halfBody: boolean }> = ({
           currentBaseAction={currentBaseAction}
           timeScale={timeScale}
           morphTargetInfluences={morphTargetInfluences}
-          isZoomed={isZoomed}
           updateCurrentViseme={updateCurrentViseme}
           stopProcessing={stopProcessing}
           setMorphTargetDictionary={setMorphTargetDictionary}
           setMorphTargetInfluences={setMorphTargetInfluences}
           emotionMorphTargets={emotionMorphTargets}
+          halfBody={halfBody}
+          onCameraZChange={setCameraZ}
+          avatarHeight={avatarHeight || 50}
+          avatarDepth={avatarDepth || -50}
         />
       )}
     </>

package/src/components/Avatar/AvatarView/AvatarComponent/components/FullbodyAvatar/AnimationController.ts

@@ -1,6 +1,6 @@
 import { AnimationState, AnimationConfig } from './types';
 import { AnimationAction, AnimationMixer, LoopOnce } from 'three';
-import { DEFAULT_CONFIG } from './constants';
+import { DEFAULT_CONFIG } from '../constants';
 
 /**
  * Controller class for managing avatar animations and transitions between states

package/src/components/Avatar/AvatarView/AvatarComponent/components/FullbodyAvatar/fullbodyAvatar.tsx

@@ -1,38 +1,38 @@
-import React, { useEffect, useRef, useMemo, useCallback } from 'react';
+import { useEffect, useRef, useMemo } from 'react';
 import {
-  Vector3,
-  Euler,
   AnimationMixer,
   SkinnedMesh,
   Object3D,
-  MathUtils,
   AnimationAction,
-  LoopOnce,
 } from 'three';
 import { useAnimations, useGLTF } from '@react-three/drei';
 import { useFrame } from '@react-three/fiber';
 import { AnimationState, FullbodyAvatarProps } from './types';
 import { AnimationController } from './AnimationController';
-import { MorphTargetController } from './MorhTargetController';
+import { MorphTargetController } from '../MorphTargetController';
+import { AvatarPositionController } from '../PositionController';
 import {
   AVATAR_POSITION,
   AVATAR_ROTATION,
   AVATAR_POSITION_ZOOMED,
   ANIMATION_URLS,
   DEFAULT_CONFIG,
-} from './constants';
+  SCALE_LERP_FACTOR,
+} from '../constants';
 
-export default function FullbodyAvatar({
+export function FullbodyAvatar({
   url,
   sex,
   currentBaseAction,
   timeScale,
-  isZoomed,
   eyeBlink,
   updateCurrentViseme,
   setMorphTargetDictionary,
   setMorphTargetInfluences,
   emotionMorphTargets,
+  avatarHeight = 50,
+  avatarDepth = 0,
+  onCameraZChange,
 }: FullbodyAvatarProps) {
   const { scene } = useGLTF(url);
   const { animations } = useGLTF(ANIMATION_URLS[sex]);
@@ -40,6 +40,8 @@ export default function FullbodyAvatar({
 
   const animationControllerRef = useRef<AnimationController>();
   const morphTargetControllerRef = useRef<MorphTargetController>();
+  const positionControllerRef = useRef<AvatarPositionController>();
+  
   const blinkStateRef = useRef({
     isBlinking: false,
     lastBlinkTime: 0,
@@ -47,10 +49,49 @@ export default function FullbodyAvatar({
     blinkStartTime: 0,
   });
 
+  // Initialize controllers
+  useEffect(() => {
+    if (!positionControllerRef.current) {
+      positionControllerRef.current = new AvatarPositionController(AVATAR_POSITION);
+    }
+
+    if (!actions || !scene) return;
+
+    const mixer = new AnimationMixer(scene);
+    animationControllerRef.current = new AnimationController(
+      mixer,
+      actions as Record<string, AnimationAction>,
+      { ...DEFAULT_CONFIG }
+    );
+
+    if (headMesh) {
+      morphTargetControllerRef.current = new MorphTargetController(headMesh);
+
+      if (headMesh.morphTargetDictionary && headMesh.morphTargetInfluences) {
+        setMorphTargetDictionary(headMesh.morphTargetDictionary);
+        const initialInfluences = Object.keys(headMesh.morphTargetDictionary)
+          .reduce((acc, key) => ({ ...acc, [key]: 0 }), {});
+        setMorphTargetInfluences(initialInfluences);
+      }
+    }
+  }, [actions, scene]);
+  useEffect(() => {
+    if (positionControllerRef.current) {
+      positionControllerRef.current.updateHeight(avatarHeight, false);
+    }
+  }, [avatarHeight]);
+
+  useEffect(() => {
+    if (positionControllerRef.current && onCameraZChange) {
+      const newCameraZ = positionControllerRef.current.updateDepth(avatarDepth, false);
+      onCameraZChange(newCameraZ);
+    }
+  }, [avatarDepth, onCameraZChange]);
+
   // Find head mesh
   const headMesh = useMemo(() => {
     let foundMesh: SkinnedMesh | undefined;
-    scene.traverse((object: Object3D) => {
+    scene?.traverse((object: Object3D) => {
       if (
         object instanceof SkinnedMesh &&
         (object.name === 'GBNL__Head' || object.name === 'Wolf3D_Avatar')
@@ -61,8 +102,8 @@ export default function FullbodyAvatar({
     return foundMesh;
   }, [scene]);
 
-  // Initialize controllers
-  useEffect(() => {
+   // Initialize controllers
+   useEffect(() => {
     if (!actions || !headMesh) return;
 
     const mixer = new AnimationMixer(scene);
@@ -96,6 +137,7 @@ export default function FullbodyAvatar({
     if (!animationControllerRef.current) return;
 
     if (currentBaseAction.action.startsWith('Loading')) {
+      animationControllerRef.current.updateIsChatAlreadyStarted(true);
       animationControllerRef.current.transitionTo(
         AnimationState.LOADING,
         currentBaseAction.action
@@ -103,7 +145,6 @@ export default function FullbodyAvatar({
     } else if (currentBaseAction.action.startsWith('Idle')) {
       animationControllerRef.current.transitionTo(AnimationState.IDLE);
     } else {
-      animationControllerRef.current.updateIsChatAlreadyStarted(true);
       animationControllerRef.current.transitionTo(
         AnimationState.EMOTION,
         currentBaseAction.action
@@ -116,12 +157,13 @@ export default function FullbodyAvatar({
     animationControllerRef.current?.setTimeScale(timeScale);
   }, [timeScale]);
 
-  // Animation update loop
-  useFrame(state => {
+
+  // Animation and scaling update loop
+  useFrame((state, delta) => {
     const currentTime = state.clock.elapsedTime * 1000;
 
     // Update animations
-    animationControllerRef.current?.update(state.clock.getDelta());
+    animationControllerRef.current?.update(delta);
 
     // Update morph targets
     if (morphTargetControllerRef.current) {
@@ -134,14 +176,23 @@ export default function FullbodyAvatar({
         blinkStateRef.current
       );
     }
+
+    // Update scale with smooth transition
+    if (scene && positionControllerRef.current) {
+      const newScale = positionControllerRef.current.updateScale(SCALE_LERP_FACTOR);
+      scene.scale.copy(newScale);
+    }
   });
 
+  // Get current position from controller
+  const position = positionControllerRef.current?.getPosition() || AVATAR_POSITION;
+
   return (
     <group
-      position={isZoomed ? AVATAR_POSITION_ZOOMED : AVATAR_POSITION}
+      position={position}
       rotation={AVATAR_ROTATION}
     >
       <primitive object={scene} />
     </group>
   );
-}
+}

package/src/components/Avatar/AvatarView/AvatarComponent/components/FullbodyAvatar/types.ts

@@ -20,8 +20,10 @@ export interface FullbodyAvatarProps {
     weight: number;
   };
   timeScale: number;
-  isZoomed?: boolean;
+  onCameraZChange: (value: number) => void;
   eyeBlink?: boolean;
+  avatarDepth?: number;
+  avatarHeight?: number;
   stopProcessing: () => void;
   resetVisemeQueue: () => void;
   updateCurrentViseme: (
@@ -37,4 +39,5 @@ export interface FullbodyAvatarProps {
     morphTargetInfluences: Record<string, number>
   ) => void;
   emotionMorphTargets: Record<string, number>;
+  halfBody: boolean;
 }

package/src/components/Avatar/AvatarView/AvatarComponent/components/PositionController.ts

@@ -0,0 +1,83 @@
+import { Vector3, MathUtils } from 'three';
+import { AVATAR_POSITION, AVATAR_POSITION_ZOOMED } from './constants';
+
+export class AvatarPositionController {
+  private currentScale: Vector3;
+  private targetScale: Vector3;
+  private currentPosition: Vector3;
+  private basePosition: Vector3;
+  private defaultPosition: Vector3;
+  private zoomedPosition: Vector3;
+  private initialCameraPosition: Vector3;
+
+  constructor(
+    defaultPosition: Vector3 = AVATAR_POSITION.clone(),
+    zoomedPosition: Vector3 = AVATAR_POSITION_ZOOMED.clone(),
+    initialCameraZ: number = 0.6
+  ) {
+    this.defaultPosition = defaultPosition;
+    this.zoomedPosition = zoomedPosition;
+    this.currentScale = new Vector3(1, 1, 1);
+    this.targetScale = new Vector3(1, 1, 1);
+    this.currentPosition = defaultPosition.clone();
+    this.basePosition = defaultPosition.clone();
+    this.initialCameraPosition = new Vector3(0, 0, initialCameraZ);
+  }
+
+  // Map height slider value (0 to 100) to scale (0.8 to 1.2)
+  private mapHeightToScale(sliderValue: number, isHalfBody: boolean): number {
+    // Convert slider value to scale factor
+    if (isHalfBody) {
+      return MathUtils.lerp(1.4, 2.1, sliderValue / 100);
+    } else {
+      return MathUtils.lerp(0.5, 1.5, sliderValue / 100);
+    }
+  }
+
+  // Map depth slider value (0 to 100) to camera Z position
+  private mapDepthToCamera(depthValue: number, isHalfBody: boolean): number {
+    const baseZ = this.initialCameraPosition.z;
+    if (isHalfBody) {
+      return MathUtils.lerp(baseZ, baseZ + 3, depthValue / 100);
+    } else {
+      return MathUtils.lerp(baseZ, baseZ + 3, depthValue / 100);
+    }
+  }
+
+  // Update height from GUI control (0-100)
+  updateHeight(heightValue: number, isHalfBody: boolean): void {
+    const heightScale = this.mapHeightToScale(heightValue, isHalfBody);
+    this.targetScale.set(heightScale, heightScale, heightScale);
+  }
+
+  // Update depth and return new camera Z position
+  updateDepth(depthValue: number, isHalfBody: boolean): number {
+    return this.mapDepthToCamera(depthValue, isHalfBody);
+  }
+
+  // Update base position for zooming
+  updateBasePosition(isZoomed: boolean): void {
+    const newPosition = isZoomed ? this.zoomedPosition : this.defaultPosition;
+    this.basePosition.copy(newPosition);
+    this.currentPosition.copy(newPosition);
+  }
+
+  // Smoothly interpolate current scale to target scale
+  updateScale(lerpFactor: number): Vector3 {
+    this.currentScale.lerp(this.targetScale, lerpFactor);
+    return this.currentScale;
+  }
+
+  // Get current position
+  getPosition(): Vector3 {
+    return this.currentPosition;
+  }
+
+  // Reset to default values
+  reset(): void {
+    this.currentScale.set(1, 1, 1);
+    this.targetScale.set(1, 1, 1);
+    this.currentPosition.copy(this.defaultPosition);
+    this.basePosition.copy(this.defaultPosition);
+  }
+}

package/src/components/Avatar/AvatarView/AvatarComponent/components/{FullbodyAvatar/constants.ts → constants.ts}

@@ -1,9 +1,10 @@
 import { Vector3, Euler } from 'three';
-import { AnimationConfig } from './types';
+import { AnimationConfig } from './FullbodyAvatar/types';
 
 export const AVATAR_POSITION = new Vector3(0, -1, 0);
 export const AVATAR_ROTATION = new Euler(0.175, 0, 0);
 export const AVATAR_POSITION_ZOOMED = new Vector3(0, -1.45, 0);
+export const SCALE_LERP_FACTOR = 0.1;
 
 export const ANIMATION_URLS = {
   MALE: 'https://assets.memori.ai/api/v2/asset/2c5e88a4-cf62-408b-9ef0-518b099dfcb2.glb',