@memori.ai/memori-react 8.45.1 → 8.45.4

package/src/components/Avatar/AvatarView/AvatarView.stories.tsx

@@ -1,254 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../../I18nWrapper';
-import AvatarView, { Props } from './index';
-import { VisemeProvider } from '../../../context/visemeContext';
-
-const meta: Meta = {
-  title: 'RPM 3D Avatar',
-  component: AvatarView,
-  argTypes: {
-    url: {
-      control: {
-        type: 'text',
-      },
-    },
-    rotateAvatar: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    eyeBlink: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    headMovement: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    speaking: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    halfBody: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    showControls: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    animation: {
-      control: {
-        type: 'select',
-        options: [
-          'Idle',
-          'Idle 1',
-          'Idle 2',
-          'Idle 3',
-          'Loading',
-          'Sad',
-          'Talk 1',
-          'Talk 2',
-          'Talk 3',
-        ],
-      },
-    },
-  },
-  parameters: {
-    controls: { expanded: false },
-  },
-};
-
-export default meta;
-
-const Template: Story<Props> = args => {
-  const [hydrated, setHydrated] = React.useState(false);
-  React.useEffect(() => {
-    setHydrated(true);
-  }, []);
-
-  return hydrated ? (
-    <I18nWrapper>
-      <VisemeProvider>
-        <AvatarView
-          {...args}
-          url={args.url + `#${new Date(Date.now()).toISOString()}`}
-          key={Date.now()}
-        />
-      </VisemeProvider>
-    </I18nWrapper>
-  ) : (
-    <></>
-  );
-};
-
-// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
-// https://storybook.js.org/docs/react/workflows/unit-testing
-export const Default = Template.bind({});
-Default.args = {
-  eyeBlink: false,
-  headMovement: false,
-  rotateAvatar: false,
-  speaking: false,
-  updateCurrentViseme: () => {},
-  url: 'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
-  fallbackImg:
-    'https://assets.memori.ai/api/v2/asset/d8035229-08cf-42a7-a532-ab051df2603d.png',
-};
-
-export const EyeBlink = Template.bind({});
-EyeBlink.args = {
-  updateCurrentViseme: () => {},
-  eyeBlink: true,
-  headMovement: false,
-  rotateAvatar: false,
-  speaking: false,
-  url: 'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
-  fallbackImg:
-    'https://assets.memori.ai/api/v2/asset/d8035229-08cf-42a7-a532-ab051df2603d.png',
-};
-
-export const HeadMovement = Template.bind({});
-HeadMovement.args = {
-  updateCurrentViseme: () => {},
-  eyeBlink: false,
-  headMovement: true,
-  rotateAvatar: false,
-  speaking: false,
-  url: 'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
-  fallbackImg:
-    'https://assets.memori.ai/api/v2/asset/d8035229-08cf-42a7-a532-ab051df2603d.png',
-};
-
-export const RotateAvatar = Template.bind({});
-RotateAvatar.args = {
-  updateCurrentViseme: () => {},
-  eyeBlink: false,
-  headMovement: false,
-  rotateAvatar: true,
-  speaking: false,
-  url: 'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
-  fallbackImg:
-    'https://assets.memori.ai/api/v2/asset/d8035229-08cf-42a7-a532-ab051df2603d.png',
-};
-
-export const Speaking = Template.bind({});
-Speaking.args = {
-  updateCurrentViseme: () => {},
-  eyeBlink: false,
-  headMovement: false,
-  rotateAvatar: false,
-  speaking: true,
-  url: 'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
-  fallbackImg:
-    'https://assets.memori.ai/api/v2/asset/d8035229-08cf-42a7-a532-ab051df2603d.png',
-};
-
-export const Fullbody = Template.bind({});
-Fullbody.args = {
-  sex: 'MALE',
-  eyeBlink: true,
-  headMovement: true,
-  rotateAvatar: true,
-  speaking: false,
-  updateCurrentViseme: () => {},
-  url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
-  fallbackImg:
-    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
-  halfBody: false,
-};
-
-export const FullbodyZoomed = Template.bind({});
-FullbodyZoomed.args = {
-  sex: 'FEMALE',
-  eyeBlink: true,
-  headMovement: true,
-  rotateAvatar: true,
-  speaking: false,
-  isZoomed: true,
-  updateCurrentViseme: () => {},
-  url: 'https://assets.memori.ai/api/v2/asset/3f5ef41c-6c4c-449c-888d-cf9c89782528.glb',
-  fallbackImg:
-    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
-  halfBody: false,
-};
-
-export const FullbodyAnimatedIdle = Template.bind({});
-FullbodyAnimatedIdle.args = {
-  sex: 'MALE',
-  eyeBlink: true,
-  headMovement: true,
-  rotateAvatar: true,
-  speaking: false,
-  updateCurrentViseme: () => {},
-  url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
-  fallbackImg:
-    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
-  animation: 'Idle',
-  halfBody: false,
-};
-
-export const FullbodyAnimatedLoading = Template.bind({});
-FullbodyAnimatedLoading.args = {
-  sex: 'MALE',
-  eyeBlink: true,
-  headMovement: true,
-  rotateAvatar: true,
-  speaking: false,
-  updateCurrentViseme: () => {},
-  url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
-  fallbackImg:
-    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
-  animation: 'Loading',
-  halfBody: false,
-};
-
-export const FullbodyAnimatedSpeaking = Template.bind({});
-FullbodyAnimatedSpeaking.args = {
-  sex: 'MALE',
-  eyeBlink: true,
-  headMovement: true,
-  rotateAvatar: true,
-  speaking: true,
-  updateCurrentViseme: () => {},
-  url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
-  fallbackImg:
-    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
-  animation: 'Talk 1',
-  halfBody: false,
-};
-
-export const FullbodyFemale = Template.bind({});
-FullbodyFemale.args = {
-  sex: 'FEMALE',
-  eyeBlink: true,
-  headMovement: true,
-  rotateAvatar: true,
-  speaking: false,
-  updateCurrentViseme: () => {},
-  url: 'https://models.readyplayer.me/650d50c2663b19e0d2831b2b.glb',
-  fallbackImg:
-    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
-  halfBody: false,
-};
-
-export const FullbodyAnimatedFemale = Template.bind({});
-FullbodyAnimatedFemale.args = {
-  sex: 'FEMALE',
-  eyeBlink: true,
-  headMovement: true,
-  rotateAvatar: true,
-  speaking: true,
-  updateCurrentViseme: () => {},
-  url: 'https://models.readyplayer.me/650d50c2663b19e0d2831b2b.glb',
-  fallbackImg:
-    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
-  animation: 'Idle',
-  halfBody: false,
-};

package/src/components/Avatar/AvatarView/index.tsx

@@ -1,194 +0,0 @@
-import { CSSProperties, useState } from 'react';
-import React, { Suspense } from 'react';
-import { Canvas } from '@react-three/fiber';
-import {
-  OrbitControls,
-  SpotLight,
-  Environment,
-  PerspectiveCamera,
-} from '@react-three/drei';
-import { isAndroid, isiOS } from '../../../helpers/utils';
-import { AvatarView } from './AvatarComponent/avatarComponent';
-import PositionControls from './AvatarComponent/positionControls/positionControls';
-import { getLocalConfig } from '../../../helpers/configuration';
-import Loader from './AvatarComponent/components/loader';
-import Lights from './AvatarComponent/lights/Lights';
-
-export interface Props {
-  url: string;
-  sex: 'MALE' | 'FEMALE';
-  fallbackImg?: string;
-  eyeBlink?: boolean;
-  headMovement?: boolean;
-  rotateAvatar?: boolean;
-  speaking?: boolean;
-  style?: CSSProperties;
-  fallback?: React.ReactNode;
-  halfBody?: boolean;
-  loading?: boolean;
-  animation?: string;
-  showControls?: boolean;
-  isZoomed?: boolean;
-  chatEmission?: any;
-  enablePositionControls?: boolean;
-  setEnablePositionControls: (value: boolean) => void;
-  isTotem?: boolean;
-  setMeshRef?: any;
-  stopProcessing: () => void;
-  resetVisemeQueue: () => void;
-  updateCurrentViseme: (
-    currentTime: number
-  ) => { name: string; weight: number } | null;
-}
-
-const defaultStyles = {
-  halfBody: {
-    width: '100%',
-    height: '100%',
-    minHeight: '500px', // Ensure minimum height
-    backgroundColor: 'white',
-    borderRadius: '100%',
-  },
-  fullBody: {
-    width: '500px',
-    height: '500px',
-    backgroundColor: 'white',
-  },
-};
-
-
-const getCameraSettings = (halfBody: boolean, isZoomed: boolean) => {
-  const baseZ = halfBody ? 0.6 : 3;
-
-  return {
-    fov: isZoomed ? 44 : 40,
-    position: [0, 0, baseZ],
-    target: [0, 0, 0],
-  };
-};
-
-export default function ContainerAvatarView({
-  url,
-  sex,
-  style,
-  rotateAvatar,
-  eyeBlink,
-  headMovement,
-  speaking,
-  fallback,
-  fallbackImg,
-  halfBody = true,
-  loading,
-  // animation,
-  showControls = false,
-  isZoomed,
-  chatEmission,
-  updateCurrentViseme,
-  enablePositionControls,
-  setEnablePositionControls,
-  isTotem = false,
-
-}: Props) {
-  const [cameraZ, setCameraZ] = useState(
-    () => getCameraSettings(halfBody, isZoomed || false).position[2]
-  );
-
-  const getAvatarHeight = () => {
-    // For totem avatars, use stored config value or default to 50
-    if (isTotem) {
-      const height = getLocalConfig('avatarHeight', 50);
-      return height;
-    }
-
-    // For half body avatars, use fixed height of 100
-    if (halfBody) {
-      return 80;
-    }
-
-    // For full body avatars, adjust height based on zoom
-    return isZoomed ? 16 : 65;
-  };
-
-  const getAvatarDepth = () => {
-    // For totem avatars, use stored config value or default to 50
-    if (isTotem) {
-      const depth = getLocalConfig('avatarDepth', 50);
-      return depth;
-    }
-
-    // For half body avatars, use fixed depth of 50
-    if (halfBody) {
-      return 50;
-    }
-
-    // For full body avatars, adjust depth based on zoom
-    return isZoomed ? 5 : 100;
-  };
-
-  const [avatarHeight, setAvatarHeight] = useState(getAvatarHeight());
-  const [avatarDepth, setAvatarDepth] = useState(getAvatarDepth());
-
-  return (
-    <>
-          {enablePositionControls && (
-        <PositionControls
-          avatarHeight={avatarHeight}
-          avatarDepth={avatarDepth}
-          halfBody={halfBody}
-          setAvatarHeight={setAvatarHeight}
-          setAvatarDepth={setAvatarDepth}
-          setEnablePositionControls={setEnablePositionControls}
-        />
-      )}
-      <Canvas 
-        style={style || defaultStyles.fullBody}
-        shadows={true}
-        dpr={[1, 2]} // Optimize pixel ratio
-        gl={{
-          antialias: true,
-          alpha: true,
-          powerPreference: "high-performance",
-          stencil: false
-        }}
-      >
-        <PerspectiveCamera
-          makeDefault
-          position={[0, 0, cameraZ]}
-          fov={getCameraSettings(halfBody, isZoomed || false).fov}
-          near={0.1}
-          far={1000}
-        />
-
-        {rotateAvatar && (
-          <OrbitControls
-            enablePan={false} 
-            enableZoom={false}
-            target={[0, 0, 0]}
-            enableDamping
-            dampingFactor={0.05}
-          />
-        )}
-
-        <Suspense fallback={fallback || <Loader fallbackImg={fallbackImg} />}>
-          <Lights />
-          
-          <AvatarView
-            url={url}
-            sex={sex}
-            showControls={showControls}
-            loading={loading || false}
-            eyeBlink={eyeBlink || false}
-            headMovement={headMovement || false}
-            speaking={speaking || false}
-            halfBody={halfBody}
-            chatEmission={chatEmission}
-            updateCurrentViseme={updateCurrentViseme}
-            setCameraZ={setCameraZ}
-            avatarHeight={avatarHeight}
-            avatarDepth={avatarDepth}
-          />
-        </Suspense>
-      </Canvas>
-    </>
-  );
-}

package/src/components/Avatar/AvatarView/utils/hideHands.ts

@@ -1,11 +0,0 @@
-import { Nodes } from "./utils";
-
-export const hideHands = (nodes: Nodes) => {
-  if (nodes.Wolf3D_Hands) {
-    nodes.Wolf3D_Hands.visible = false;
-  }
-  if (nodes.RightHand && nodes.LeftHand) {
-    nodes.RightHand.position.set(0, -2, 0);
-    nodes.LeftHand.position.set(0, -2, 0);
-  }
-};

package/src/components/Avatar/AvatarView/utils/useEyeBlink.ts

@@ -1,100 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-
-interface BlinkConfig {
-  minInterval: number;
-  maxInterval: number;
-  blinkDuration: number;
-}
-
-const DEFAULT_BLINK_CONFIG: BlinkConfig = {
-  minInterval: 1000,    // Minimum time between blinks in milliseconds
-  maxInterval: 5000,    // Maximum time between blinks in milliseconds
-  blinkDuration: 150,   // Duration of a single blink in milliseconds
-};
-
-interface UseAvatarBlinkProps {
-  enabled: boolean;
-  setMorphTargetInfluences: (morphTargetInfluences: any) => void;
-  config?: Partial<BlinkConfig>;
-}
-
-export function useAvatarBlink({
-  enabled,
-  setMorphTargetInfluences,
-  config = {}
-}: UseAvatarBlinkProps) {
-  const blinkTimeoutRef = useRef<NodeJS.Timeout>();
-  const isBlinkingRef = useRef(false);
-  const lastBlinkTime = useRef(0);
-  
-  const blinkConfig = {
-    ...DEFAULT_BLINK_CONFIG,
-    ...config
-  };
-  
-  const blink = useCallback(() => {
-    if (!enabled || isBlinkingRef.current) return;
-    
-    isBlinkingRef.current = true;
-    // Close eyes
-    setMorphTargetInfluences((prev: any) => ({
-      ...prev,
-      eyesClosed: 1
-    }));
-    
-    // Open eyes after blinkDuration
-    setTimeout(() => {
-      setMorphTargetInfluences((prev: any) => ({
-        ...prev,
-        eyesClosed: 0
-      }));
-      isBlinkingRef.current = false;
-      lastBlinkTime.current = Date.now();
-      
-      // Schedule next blink
-      scheduleNextBlink();
-    }, blinkConfig.blinkDuration);
-  }, [enabled, blinkConfig.blinkDuration, setMorphTargetInfluences]);
-  
-  const scheduleNextBlink = useCallback(() => {
-    if (blinkTimeoutRef.current) {
-      clearTimeout(blinkTimeoutRef.current);
-    }
-    
-    // Randomize the next blink delay between min and max interval
-    const nextBlinkDelay = Math.random() * 
-      (blinkConfig.maxInterval - blinkConfig.minInterval) + 
-      blinkConfig.minInterval;
-    
-    blinkTimeoutRef.current = setTimeout(blink, nextBlinkDelay);
-  }, [blink, blinkConfig.maxInterval, blinkConfig.minInterval]);
-
-  // Handle enabled state changes
-  useEffect(() => {
-    if (enabled) {
-      scheduleNextBlink();
-    } else {
-      if (blinkTimeoutRef.current) {
-        clearTimeout(blinkTimeoutRef.current);
-      }
-      // Reset eyes to open
-      setMorphTargetInfluences((prevInfluences: any) => ({
-        ...prevInfluences,
-        eyesClosed: 0
-      }));
-    }
-    
-    // Cleanup
-    return () => {
-      if (blinkTimeoutRef.current) {
-        clearTimeout(blinkTimeoutRef.current);
-      }
-    };
-  }, [enabled, scheduleNextBlink, setMorphTargetInfluences]);
-
-  return {
-    isBlinking: isBlinkingRef.current,
-    lastBlinkTime: lastBlinkTime.current,
-    triggerBlink: blink
-  };
-}

package/src/components/Avatar/AvatarView/utils/useHeadMovement.ts

@@ -1,72 +0,0 @@
-import { Nodes } from './utils';
-import { Vector2 } from 'three';
-import { useEffect } from 'react';
-import { lerp, mapRange } from './utils';
-import { useFrame, useThree } from '@react-three/fiber';
-
-const rad = Math.PI / 180;
-// const eyeRotationOffsetX = 90 * rad;
-
-let reset: boolean = false;
-let timeout: NodeJS.Timeout;
-
-const targetPos = new Vector2(0, 0);
-const currentPos = new Vector2(0, 0);
-
-const setResetTrue = () => {
-  timeout = setTimeout(() => {
-    reset = true;
-  }, 1000);
-};
-
-const setResetFalse = () => {
-  clearTimeout(timeout);
-  reset = false;
-};
-
-export default function useHeadMovement(
-  enabled: boolean | undefined,
-  nodes: Nodes
-) {
-  const { gl } = useThree();
-
-  useEffect(() => {
-    if (!enabled) return;
-
-    gl.domElement.addEventListener('mouseleave', setResetTrue);
-    gl.domElement.addEventListener('mouseenter', setResetFalse);
-
-    return () => {
-      gl.domElement.removeEventListener('mouseleave', setResetTrue);
-      gl.domElement.removeEventListener('mouseenter', setResetFalse);
-    };
-  }, [gl.domElement, enabled]);
-
-  useFrame(state => {
-    if (!enabled || !nodes?.Neck || !nodes?.Head) return;
-
-    const cameraRotation = Math.abs(state.camera.rotation.z);
-
-    if (!reset && cameraRotation < 0.2) {
-      targetPos.x = mapRange(state.mouse.y, -1, 1, 5 * rad, -5 * rad);
-      targetPos.y = mapRange(state.mouse.x, -1, 1, -10 * rad, 10 * rad);
-    } else {
-      targetPos.set(0, 0);
-    }
-
-    currentPos.x = lerp(currentPos.x, targetPos.x);
-    currentPos.y = lerp(currentPos.y, targetPos.y);
-
-    nodes.Neck.rotation.x = currentPos.x + 0.1;
-    nodes.Neck.rotation.y = currentPos.y;
-
-    nodes.Head.rotation.x = currentPos.x * 2;
-    nodes.Head.rotation.y = currentPos.y * 2;
-
-    // nodes.RightEye.rotation.x = currentPos.x - eyeRotationOffsetX;
-    // nodes.LeftEye.rotation.x = currentPos.x - eyeRotationOffsetX;
-
-    // nodes.RightEye.rotation.z = currentPos.y * 3 + Math.PI;
-    // nodes.LeftEye.rotation.z = currentPos.y * 3 + Math.PI;
-  });
-}

package/src/components/Avatar/AvatarView/utils/useLoadingMorphAnim.ts

@@ -1,38 +0,0 @@
-import { Nodes } from './utils';
-import { SkinnedMesh } from 'three';
-import { useEffect } from 'react';
-import { useFrame } from '@react-three/fiber';
-
-let headMesh: SkinnedMesh;
-let eyesClosedMorphIndex: number = 0;
-let viseme_UMorphIndex: number = 0;
-
-export default function useLoadingMorphAnim(
-  loading: boolean | undefined,
-  nodes: Nodes
-) {
-  useEffect(() => {
-    if (!loading) return;
-
-    headMesh = (nodes.Wolf3D_Head ||
-      nodes.Wolf3D_Avatar ||
-      nodes.Wolf3D_Avatar001) as SkinnedMesh;
-
-    if (headMesh?.morphTargetDictionary && headMesh?.morphTargetInfluences) {
-      eyesClosedMorphIndex = headMesh.morphTargetDictionary.mouthOpen;
-      viseme_UMorphIndex = headMesh.morphTargetDictionary.viseme_U;
-    }
-  }, [nodes, loading]);
-
-  useFrame(() => {
-    if (!loading) {
-      if (headMesh?.morphTargetInfluences) {
-        headMesh.morphTargetInfluences[eyesClosedMorphIndex] = 0;
-        headMesh.morphTargetInfluences[viseme_UMorphIndex] = 0;
-      }
-    } else if (headMesh?.morphTargetInfluences) {
-      headMesh.morphTargetInfluences[eyesClosedMorphIndex] = 0.56;
-      headMesh.morphTargetInfluences[viseme_UMorphIndex] = 0.67;
-    }
-  });
-}