@memori.ai/memori-react 7.8.7 → 7.9.0

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',

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

@@ -1,168 +1,150 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-import { Object3D, SkinnedMesh, Vector3 } from 'three';
+import { useEffect, useMemo, useRef } from 'react';
+import { Object3D, SkinnedMesh } from 'three';
 import { useGLTF } from '@react-three/drei';
+import { useGraph, useFrame, useThree } from '@react-three/fiber';
 import { correctMaterials, isSkinnedMesh } from '../../../../../helpers/utils';
-import { useGraph, dispose, useFrame } from '@react-three/fiber';
-import { useAvatarBlink } from '../../utils/useEyeBlink';
-import useHeadMovement from '../../utils/useHeadMovement';
+import { MorphTargetController } from './MorphTargetController';
+import { AvatarPositionController } from './PositionController';
+import {
+  AVATAR_POSITION,
+  SCALE_LERP_FACTOR,
+  AVATAR_POSITION_ZOOMED,
+} from './constants';
 import { hideHands } from '../../utils/utils';
-import { AnimationMixer, MathUtils } from 'three';
+import useHeadMovement from '../../utils/useHeadMovement';
 
 interface HalfBodyAvatarProps {
   url: string;
   setMorphTargetInfluences: (morphTargetInfluences: any) => void;
-  headMovement?: boolean;
-  speaking?: boolean;
-  onLoaded?: () => void;
   setMorphTargetDictionary: (morphTargetDictionary: any) => void;
-  eyeBlink?: boolean;
-  morphTargetInfluences: any;
   updateCurrentViseme: (currentTime: number) => any;
-  morphTargetSmoothing?: number;
+  eyeBlink?: boolean;
+  heightValue?: number; // 0-100 slider value
+  avatarHeight: number;
+  avatarDepth: number;
+  onLoaded?: () => void;
+  onCameraZChange: (value: number) => void;
+  headMovement?: boolean;
 }
 
-const AVATAR_POSITION = new Vector3(0, -0.6, 0);
-// Blink configuration
-const BLINK_CONFIG = {
-  minInterval: 1000,
-  maxInterval: 5000,
-  blinkDuration: 150,
-};
-
 export default function HalfBodyAvatar({
   url,
   setMorphTargetInfluences,
   setMorphTargetDictionary,
-  eyeBlink,
-  onLoaded,
-  morphTargetSmoothing = 0.5,
   updateCurrentViseme,
+  eyeBlink = false,
+  avatarHeight = 50,
+  avatarDepth = 0,
+  headMovement = false,
+  onLoaded,
+  onCameraZChange,
 }: HalfBodyAvatarProps) {
   const { scene } = useGLTF(url);
   const { nodes, materials } = useGraph(scene);
-  const mixer = useRef(new AnimationMixer(scene));
-  const avatarMeshRef = useRef<SkinnedMesh | null>(null);
+  const { camera } = useThree();
 
-  // Blink state
-  const lastBlinkTime = useRef(0);
-  const nextBlinkTime = useRef(0);
-  const isBlinking = useRef(false);
-  const blinkStartTime = useRef(0);
+  const morphTargetControllerRef = useRef<MorphTargetController>();
+  const positionControllerRef = useRef<AvatarPositionController>();
+  const targetCameraZRef = useRef(camera.position.z);
 
-  const headMeshRef = useRef<SkinnedMesh>();
 
-  useEffect(() => {
-    correctMaterials(materials);
+  useHeadMovement(headMovement, nodes);
+  
+  const blinkStateRef = useRef({
+    isBlinking: false,
+    lastBlinkTime: 0,
+    nextBlinkTime: 0,
+    blinkStartTime: 0,
+  });
 
-    scene.traverse((object: Object3D) => {
-      if (object instanceof SkinnedMesh) {
-        if (object.name === 'GBNL__Head' || object.name === 'Wolf3D_Avatar') {
-          headMeshRef.current = object;
-          if (object.morphTargetDictionary && object.morphTargetInfluences) {
-            setMorphTargetDictionary(object.morphTargetDictionary);
-
-            const initialInfluences = Object.keys(
-              object.morphTargetDictionary
-            ).reduce((acc, key) => ({ ...acc, [key]: 0 }), {});
-            setMorphTargetInfluences(initialInfluences);
-          }
-        }
+  // Find head mesh
+  const headMesh = useMemo(() => {
+    let foundMesh: SkinnedMesh | undefined;
+    scene?.traverse((object: Object3D) => {
+      if (
+        object instanceof SkinnedMesh &&
+        (object.name === 'GBNL__Head' || object.name === 'Wolf3D_Avatar')
+      ) {
+        foundMesh = object;
       }
     });
+    return foundMesh;
+  }, [scene]);
 
-    onLoaded?.();
+  // Initialize controllers
+  useEffect(() => {
+    if (!positionControllerRef.current) {
+      positionControllerRef.current = new AvatarPositionController(
+        AVATAR_POSITION,
+        AVATAR_POSITION_ZOOMED,
+      );
+    }
 
+    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);
+      }
+    }
+
+    correctMaterials(materials);
+    onLoaded?.();
+    hideHands(nodes);
+    
     return () => {
       Object.values(materials).forEach(material => material.dispose());
       Object.values(nodes)
         .filter(isSkinnedMesh)
         .forEach(mesh => mesh.geometry.dispose());
     };
-  }, [materials, nodes, url, onLoaded, scene]);
-  useFrame(state => {
-
-    if (
-      headMeshRef.current &&
-      headMeshRef.current.morphTargetDictionary &&
-      headMeshRef.current.morphTargetInfluences
-    ) {
-      const currentTime = state.clock.getElapsedTime() * 1000; // Convert to milliseconds
-
-      // Handle blinking
-      let blinkValue = 0;
-      if (eyeBlink) {
-        if (currentTime >= nextBlinkTime.current && !isBlinking.current) {
-          isBlinking.current = true;
-          blinkStartTime.current = currentTime;
-          lastBlinkTime.current = currentTime;
-          nextBlinkTime.current =
-            currentTime +
-            Math.random() *
-              (BLINK_CONFIG.maxInterval - BLINK_CONFIG.minInterval) +
-            BLINK_CONFIG.minInterval;
-        }
-
-        if (isBlinking.current) {
-          const blinkProgress =
-            (currentTime - blinkStartTime.current) / BLINK_CONFIG.blinkDuration;
-          if (blinkProgress <= 0.5) {
-            // Eyes closing
-            blinkValue = blinkProgress * 2;
-          } else if (blinkProgress <= 1) {
-            // Eyes opening
-            blinkValue = 2 - blinkProgress * 2;
-          } else {
-            // Blink finished
-            isBlinking.current = false;
-            blinkValue = 0;
-          }
-        }
-      }
+  }, [materials, nodes, url, onLoaded, scene, headMesh]);
 
-      const currentViseme = updateCurrentViseme(currentTime / 1000);
+  useEffect(() => {
+    if (positionControllerRef.current) {
+      positionControllerRef.current.updateHeight(avatarHeight, true);
+    }
+  }, [avatarHeight]);
+
+  useEffect(() => {
+    if (positionControllerRef.current && onCameraZChange) {
+      const newCameraZ = positionControllerRef.current.updateDepth(avatarDepth, true);
+      onCameraZChange(newCameraZ);
+    }
+  }, [avatarDepth, onCameraZChange]);
+
+  // Animation and morphing update loop
+  useFrame((state) => {
+    const currentTime = state.clock.elapsedTime * 1000;
 
-      // Update morph targets
-      Object.entries(headMeshRef.current.morphTargetDictionary).forEach(
-        ([key, index]) => {
-          if (typeof index === 'number') {
-            let targetValue = 0;
-
-            // Handle visemes (additive layer)
-            if (currentViseme && key === currentViseme.name) {
-              targetValue += currentViseme.weight * 1.3; // Amplify the effect
-            }
-
-            // Handle blinking (additive layer, only for 'eyesClosed')
-            if (key === 'eyesClosed' && eyeBlink) {
-              targetValue += blinkValue;
-            }
-
-            // Clamp the final value between 0 and 1
-            targetValue = MathUtils.clamp(targetValue, 0, 1);
-
-            // Apply smoothing
-            if (
-              headMeshRef.current &&
-              headMeshRef.current.morphTargetInfluences
-            ) {
-              headMeshRef.current.morphTargetInfluences[index] = MathUtils.lerp(
-                headMeshRef.current.morphTargetInfluences[index],
-                targetValue,
-                morphTargetSmoothing
-              );
-            }
-          }
-        }
+    // Update morph targets
+    if (morphTargetControllerRef.current) {
+      const currentViseme = updateCurrentViseme(currentTime / 1000);
+      morphTargetControllerRef.current.updateMorphTargets(
+        currentTime,
+        {},
+        currentViseme,
+        eyeBlink,
+        blinkStateRef.current,
       );
+    }
 
-      // Update the animation mixer
-      mixer.current.update(0.01); // Fixed delta time for consistent animation speed
+    // 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={AVATAR_POSITION}>
+    <group position={position}>
       <primitive object={scene} />
     </group>
   );
-}
+}

package/src/components/Avatar/AvatarView/AvatarComponent/positionControls/positionControls.css

@@ -0,0 +1,99 @@
+.memori--position-controls {
+  position: fixed;
+  z-index: 1000;
+  top: auto; /* Remove top positioning */
+  top: 65px; /* Position from bottom to avoid overlapping with buttons */
+  left: 15px; /* Remove left positioning */
+  display: flex;
+  width: 350px; /* Fixed width */
+  max-width: 90%; /* Maximum width relative to screen */
+  height: 300px;
+  flex-direction: column;
+  padding: 16px;
+  border-radius: 16px;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  background-color: var(--memori-inner-bg, #fff);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  gap: 0.5rem;
+  text-align: left;
+  transform: none; /* Remove transform */
+}
+
+/* Slider adjustments */
+.memori--slider-container {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 0;
+  gap: 0.75rem;
+}
+
+.memori--slider-label {
+  margin-bottom: 4px;
+  font-size: 1rem;
+}
+
+/* Button adjustments */
+.memori--preset-buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 8px;
+  gap: 8px;
+}
+
+.memori--preset-buttons button {
+  min-height: 36px;
+  flex: 1;
+  padding: 8px 4px;
+  font-size: 0.9rem;
+}
+
+/* Close button */
+.memori--position-controls-close {
+  position: absolute;
+  top: -25px;
+  right: -30px;
+  border-radius: 50%;
+  background-color: var(--memori-inner-bg, #fff);
+}
+
+.memori--position-controls-close-button {
+  min-width: 36px;
+  min-height: 36px;
+  padding: 8px;
+}
+
+/* Totem specific adjustments */
+@media screen and (max-width: 480px) {
+  .memori--position-controls {
+    right: 10px;
+    bottom: 80px;
+    width: 280px;
+  }
+  
+  .memori--preset-buttons button {
+    padding: 6px 4px;
+    font-size: 0.85rem;
+  }
+  
+  .memori--slider-container {
+    padding: 6px 0;
+  }
+}
+
+/* Portrait/vertical orientation */
+@media screen and (min-height: 800px) {
+  .memori--position-controls {
+    bottom: 120px;
+  }
+  
+  .memori--slider-label {
+    font-size: 1.1rem;
+  }
+  
+  .memori--preset-buttons button {
+    padding: 10px 6px;
+    font-size: 1rem;
+  }
+}