@memori.ai/memori-react 7.4.5 → 7.5.0

package/src/components/Avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useMemo, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import {
   Integration,
   Memori,
@@ -6,7 +6,6 @@ import {
 } from '@memori.ai/memori-api-client/dist/types';
 import ErrorBoundary from '../ErrorBoundary/ErrorBoundary';
 import Tooltip from '../ui/Tooltip';
-import AvatarView, { Props as AvatarViewProps } from '../AvatarView';
 import { getResourceUrl } from '../../helpers/media';
 import Blob from '../Blob/Blob';
 import ModelViewer from '../CustomGLBModelViewer/ModelViewer';
@@ -16,6 +15,7 @@ import Eye from '../icons/Eye';
 import EyeInvisible from '../icons/EyeInvisible';
 import Edit from '../icons/Edit';
 import cx from 'classnames';
+import ContainerAvatarView from './AvatarView';
 
 export interface Props {
   memori: Memori;
@@ -30,6 +30,7 @@ export interface Props {
   loading?: boolean;
   baseUrl?: string;
   apiUrl?: string;
+  animation?: string;
 }
 
 const Avatar: React.FC<Props> = ({
@@ -45,6 +46,7 @@ const Avatar: React.FC<Props> = ({
   loading = false,
   baseUrl,
   apiUrl,
+  animation,
 }) => {
   const { t } = useTranslation();
   const [isClient, setIsClient] = useState(false);
@@ -53,26 +55,33 @@ const Avatar: React.FC<Props> = ({
     setIsClient(true);
   }, []);
 
-  const animation = useMemo(
-    () =>
-      isPlayingAudio
-        ? (['Talk 1', 'Talk 2', 'Talk 3'][
-            Math.round(Math.random() * 2)
-          ] as AvatarViewProps['animation'])
-        : loading
-        ? 'Loading'
-        : (['Idle', 'Idle 1', 'Idle 2', 'Idle 3'][
-            Math.round(Math.random() * 3)
-          ] as AvatarViewProps['animation']),
-    [isPlayingAudio, loading]
-  );
+  // Get the avatar URL, if the avatar is a user avatar, the avatar URL is the user avatar URL, if the avatar is a default avatar, the avatar URL is the default avatar URL
+  const getAvatarUrl = () => {
+    if (
+      integrationConfig?.avatar === 'userAvatar' &&
+      memori.avatarURL &&
+      memori.avatarURL.length > 0
+    ) {
+      return getResourceUrl({
+        type: 'avatar',
+        tenantID: tenant?.id,
+        resourceURI: memori.avatarURL,
+        baseURL: baseUrl,
+        apiURL: apiUrl,
+      });
+    }
+    return undefined;
+  };
 
-  return (
-    <>
-      {(integrationConfig?.avatar === 'readyplayerme' ||
+  // Render the avatar, if the avatar is a user avatar, the avatar is rendered, if the avatar is a default avatar, the avatar is rendered
+  const renderAvatar = () => {
+    if (
+      (integrationConfig?.avatar === 'readyplayerme' ||
         integrationConfig?.avatar === 'readyplayerme-full' ||
         integrationConfig?.avatar === 'customglb') &&
-      integrationConfig?.avatarURL ? (
+      integrationConfig?.avatarURL
+    ) {
+      return (
         <>
           <div
             className={cx(
@@ -83,133 +92,129 @@ const Avatar: React.FC<Props> = ({
               }
             )}
           >
-            {isClient &&
-              (integrationConfig.avatar === 'readyplayerme' ||
-                integrationConfig.avatar === 'readyplayerme-full') && (
-                <ErrorBoundary
-                  fallback={
-                    <div className="memori--blob-container">
-                      {isClient && (
-                        <Blob
-                          speaking={isPlayingAudio}
-                          avatar={
-                            integrationConfig?.avatar === 'userAvatar' &&
-                            memori.avatarURL &&
-                            memori.avatarURL.length > 0
-                              ? getResourceUrl({
-                                  type: 'avatar',
-                                  tenantID: tenant?.id,
-                                  resourceURI: memori.avatarURL,
-                                  baseURL: baseUrl,
-                                  apiURL: apiUrl,
-                                })
-                              : undefined
-                          }
-                        />
-                      )}
-                    </div>
-                  }
-                >
-                  <AvatarView
-                    url={integrationConfig.avatarURL}
-                    sex={memori.voiceType === 'FEMALE' ? 'FEMALE' : 'MALE'}
-                    fallbackImg={getResourceUrl({
-                      type: 'avatar',
-                      tenantID: tenant?.id,
-                      resourceURI: memori.avatarURL,
-                      baseURL: baseUrl,
-                      apiURL: apiUrl,
-                    })}
-                    headMovement
-                    eyeBlink
-                    halfBody={integrationConfig.avatar === 'readyplayerme'}
-                    animation={animation}
-                    speaking={isPlayingAudio}
-                    style={
-                      integrationConfig.avatar === 'readyplayerme'
-                        ? {
-                            width: '300px',
-                            height: '300px',
-                            backgroundColor: 'none',
-                            borderRadius: '100%',
-                            boxShadow: 'none',
-                          }
-                        : {
-                            width: '600px',
-                            height: '600px',
-                            backgroundColor: 'none',
-                          }
-                    }
-                  />
-                </ErrorBoundary>
-              )}
-            {isClient && integrationConfig.avatar === 'customglb' && (
-              <ModelViewer
-                poster={getResourceUrl({
-                  type: 'avatar',
-                  tenantID: tenant?.id,
-                  resourceURI: memori.avatarURL,
-                  baseURL: baseUrl,
-                  apiURL: apiUrl,
-                })}
-                src={integrationConfig.avatarURL}
-                alt=""
-              />
-            )}
-          </div>
-          <div className="memori--avatar-toggle">
-            <Button
-              ghost
-              onClick={() => setAvatar3dVisible(!avatar3dVisible)}
-              icon={avatar3dVisible ? <EyeInvisible /> : <Eye />}
-            >
-              <span className="memori--avatar-toggle-text">
-                {avatar3dVisible ? t('hide') : t('show')}
-              </span>
-            </Button>
+            {renderAvatarContent()}
           </div>
+          {renderAvatarToggle()}
         </>
-      ) : (
-        <div className="memori--blob-container">
-          {isClient && (
-            <Blob
-              avatar={
-                integrationConfig?.avatar === 'userAvatar' &&
-                memori.avatarURL &&
-                memori.avatarURL.length > 0
-                  ? getResourceUrl({
-                      type: 'avatar',
-                      tenantID: tenant?.id,
-                      resourceURI: memori.avatarURL,
-                      baseURL: baseUrl,
-                      apiURL: apiUrl,
-                    })
-                  : undefined
-              }
-            />
-          )}
-        </div>
-      )}
-      {instruct && !hasUserActivatedSpeak && memori.isGiver && tenant?.id && (
-        <div className="memori--avatar-link-to-integrations">
-          <a
-            className="memori-button memori-button--circle memori-button--outlined"
-            href={`https://${tenant.id}/${
-              memori.culture === 'it-IT' ? 'it' : 'en'
-            }/${memori.ownerUserName}/${memori.name}/integrations${
-              integration?.integrationID
-                ? `?integration=${integration.integrationID}&openAvatarModal=true`
-                : ''
-            }`}
-          >
-            <Tooltip content={t('widgetgoToIntegrationsToCustomizeAvatar')}>
-              <span className="memori-button--icon">
-                <Edit />
-              </span>
-            </Tooltip>
-          </a>
-        </div>
-      )}
+      );
+    }
+    return (
+      <div className="memori--blob-container">
+        {isClient && <Blob speaking={isPlayingAudio} avatar={getAvatarUrl()} />}
+      </div>
+    );
+  };
+
+  const renderAvatarContent = () => {
+    if (!isClient) return null;
+
+    if (
+      integrationConfig?.avatar === 'readyplayerme' ||
+      integrationConfig?.avatar === 'readyplayerme-full'
+    ) {
+      return (
+        <ErrorBoundary
+          fallback={
+            <div className="memori--blob-container">
+              {isClient && (
+                <Blob speaking={isPlayingAudio} avatar={getAvatarUrl()} />
+              )}
+            </div>
+          }
+        >
+          <ContainerAvatarView
+            url={integrationConfig.avatarURL}
+            sex={memori.voiceType === 'FEMALE' ? 'FEMALE' : 'MALE'}
+            fallbackImg={getAvatarUrl()}
+            headMovement
+            eyeBlink
+            animation={animation}
+            halfBody={integrationConfig.avatar === 'readyplayerme'}
+            speaking={isPlayingAudio}
+            loading={loading}
+            style={getAvatarStyle()}
+          />
+        </ErrorBoundary>
+      );
+    }
+
+    if (integrationConfig?.avatar === 'customglb') {
+      return (
+        <ModelViewer
+          poster={getAvatarUrl() || ''}
+          src={integrationConfig.avatarURL}
+          alt=""
+        />
+      );
+    }
+
+    return null;
+  };
+
+  // Render the avatar toggle
+  const renderAvatarToggle = () => (
+    <div className="memori--avatar-toggle">
+      <Button
+        ghost
+        onClick={() => setAvatar3dVisible(!avatar3dVisible)}
+        icon={avatar3dVisible ? <EyeInvisible /> : <Eye />}
+      >
+        <span className="memori--avatar-toggle-text">
+          {avatar3dVisible ? t('hide') : t('show')}
+        </span>
+      </Button>
+    </div>
+  );
+
+  const getAvatarStyle = () => {
+    if (integrationConfig?.avatar === 'readyplayerme') {
+      return {
+        width: '300px',
+        height: '300px',
+        backgroundColor: 'none',
+        borderRadius: '100%',
+        boxShadow: 'none',
+      };
+    }
+    return {
+      width: '600px',
+      height: '600px',
+      backgroundColor: 'none',
+    };
+  };
+
+  const renderIntegrationsLink = () => {
+    if (!(instruct && !hasUserActivatedSpeak && memori.isGiver && tenant?.id))
+      return null;
+
+    const href = `https://${tenant.id}/${
+      memori.culture === 'it-IT' ? 'it' : 'en'
+    }/${memori.ownerUserName}/${memori.name}/integrations${
+      integration?.integrationID
+        ? `?integration=${integration.integrationID}&openAvatarModal=true`
+        : ''
+    }`;
+
+    return (
+      <div className="memori--avatar-link-to-integrations">
+        <a
+          className="memori-button memori-button--circle memori-button--outlined"
+          href={href}
+        >
+          <Tooltip content={t('widgetgoToIntegrationsToCustomizeAvatar')}>
+            <span className="memori-button--icon">
+              <Edit />
+            </span>
+          </Tooltip>
+        </a>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {renderAvatar()}
+      {renderIntegrationsLink()}
     </>
   );
 };

package/src/components/{AvatarView → Avatar/AvatarView}/AvatarView.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import I18nWrapper from '../../I18nWrapper';
+import I18nWrapper from '../../../I18nWrapper';
 import AvatarView, { Props } from './index';
 
 const meta: Meta = {
@@ -37,6 +37,11 @@ const meta: Meta = {
         type: 'boolean',
       },
     },
+    showControls: {
+      control: {
+        type: 'boolean',
+      },
+    },
     animation: {
       control: {
         type: 'select',
@@ -55,7 +60,9 @@ const meta: Meta = {
     },
   },
   parameters: {
-    controls: { expanded: true },
+    controls: { expanded: false,
+    },
+    
   },
 };
 

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

@@ -0,0 +1,94 @@
+import React, { useEffect, useRef, useState } from 'react';
+import GUI from 'lil-gui';
+
+interface BaseAction {
+  weight: number;
+  action?: string;
+}
+
+interface AdditiveAction {
+  weight: number;
+  action?: string;
+}
+
+export interface AnimationControlPanelProps {
+  baseActions: Record<string, BaseAction>;
+  additiveActions: Record<string, AdditiveAction>;
+  onBaseActionChange: (action: string) => void;
+  onAdditiveActionChange?: (action: string, weight: number) => void;
+  currentBaseAction: {
+    action: string;
+    weight: number;
+  };
+  modifyTimeScale: (value: number) => void;
+  timeScale: number;
+}
+
+const AnimationControlPanel: React.FC<AnimationControlPanelProps> = ({
+  onBaseActionChange,
+  onAdditiveActionChange,
+  baseActions,
+  additiveActions,
+  modifyTimeScale,
+  timeScale,
+}) => {
+  const guiRef = useRef<GUI | null>(null);
+  const panelSettingsRef = useRef<Record<string, any>>({
+    'modify time scale': timeScale,
+  });
+  const crossFadeControlsRef = useRef<any[]>([]);
+
+  useEffect(() => {
+
+    const gui = new GUI({ width: 310 });
+    guiRef.current = gui;
+
+    const folder1 = gui.addFolder('Base Actions');
+    const folder2 = gui.addFolder('Additive Action Weights');
+    const folder3 = gui.addFolder('General Speed');
+
+    const baseNames = ['None', ...Object.keys(baseActions)];
+
+    baseNames.forEach(name => {
+      const settings = baseActions[name];
+      panelSettingsRef.current[name] = () => {
+        onBaseActionChange(name);
+      };
+
+      const control = folder1.add(panelSettingsRef.current, name);
+      crossFadeControlsRef.current.push(control);
+    });
+
+    Object.entries(additiveActions).forEach(([name, settings]) => {
+      panelSettingsRef.current[name] = settings.weight;
+      folder2
+        .add(panelSettingsRef.current, name, 0.0, 1.0, 0.01)
+        .listen()
+        .onChange((weight: number) => {
+          settings.weight = weight;
+          onAdditiveActionChange?.(name, weight);
+        });
+    });
+
+    folder3
+      .add(panelSettingsRef.current, 'modify time scale', 0.0, 1.5, 0.01)
+      .onChange((value: number) => {
+        modifyTimeScale(value);
+      });
+
+    folder1.open();
+    folder2.open();
+    folder3.open();
+
+    return () => {
+      gui.destroy();
+    };
+  }, [
+    onBaseActionChange,
+    onAdditiveActionChange /*onTimeScaleChange, setWeight, prepareCrossFade, modifyTimeScale */,
+  ]);
+
+  return null; // This component doesn't render anything itself
+};
+
+export default AnimationControlPanel;

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

@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Vector3,
+  Euler,
+  AnimationMixer,
+  AnimationAction,
+  AnimationClip,
+} from 'three';
+import { useAnimations, useGLTF } from '@react-three/drei';
+import { useGraph, dispose, useFrame } from '@react-three/fiber';
+import { correctMaterials, isSkinnedMesh } from '../utils/utils';
+import useEyeBlink from '../utils/useEyeBlink';
+import useMouthSpeaking from '../utils/useMouthSpeaking';
+import useHeadMovement from '../utils/useHeadMovement';
+import useSmile from '../utils/useSmile';
+
+export interface FullbodyAvatarProps {
+  url: string;
+  sex: 'MALE' | 'FEMALE';
+  onLoaded?: () => void;
+  currentBaseAction: {
+    action: string;
+    weight: number;
+  };
+  additiveActions: {
+    [key: string]: {
+      weight: number;
+    };
+  };
+  timeScale: number;
+  loading?: boolean;
+  speaking?: boolean;
+}
+
+const AVATAR_POSITION = new Vector3(0, -1, 0);
+const AVATAR_ROTATION = new Euler(0.175, 0, 0);
+const ANIMATION_URLS = {
+  MALE: 'https://assets.memori.ai/api/v2/asset/5de7456f-0cd8-4e29-95a7-0cd0045a5325.glb',
+  FEMALE:
+    'https://assets.memori.ai/api/v2/asset/84487a2b-377c-4565-800a-51459d580ec8.glb',
+};
+
+export default function FullbodyAvatar({
+  url,
+  sex,
+  onLoaded,
+  currentBaseAction,
+  additiveActions,
+  timeScale
+}: FullbodyAvatarProps) {
+  const { scene } = useGLTF(url);
+  const { animations } = useGLTF(ANIMATION_URLS[sex]);
+  const { nodes, materials } = useGraph(scene);
+  const { actions } = useAnimations(animations, scene);
+  const [mixer] = useState(() => new AnimationMixer(scene));
+
+  useEffect(() => {
+    correctMaterials(materials);
+    onLoaded?.();
+
+    return () => {
+      Object.values(materials).forEach(dispose);
+      Object.values(nodes).filter(isSkinnedMesh).forEach(dispose);
+    };
+  }, [materials, nodes, url, onLoaded]);
+
+  useEffect(() => {
+    if (!actions || !currentBaseAction.action) return;
+
+    const newAction = actions[currentBaseAction.action];
+
+    if (!newAction) {
+      console.warn(
+        `Animation "${currentBaseAction.action}" not found in actions.`
+      );
+      return;
+    }
+
+    const fadeOutDuration = 0.8;
+    const fadeInDuration = 0.8;
+
+    newAction.timeScale = timeScale;
+    newAction.reset().fadeIn(fadeInDuration).play();
+
+    return () => {
+      newAction.fadeOut(fadeOutDuration);
+    };
+  }, [currentBaseAction, timeScale]);
+
+
+
+
+  // useEffect(() => {
+  //   if (speaking && actions['Talk 1'] && actions['Talk 2']) {
+  //     const talk1 = actions['Talk 1'].getClip();
+  //     const talk2 = actions['Talk 2'].getClip();
+  //     const talk = new AnimationClip(
+  //       'Talk',
+  //       talk1.duration + talk2.duration,
+  //     );
+  //     mixer.clipAction(talk, scene).play();
+  //   }
+  // }, [speaking]);
+
+  // Additive actions
+  useEyeBlink(additiveActions.blink.weight > 0, nodes);
+  useMouthSpeaking(additiveActions.speak.weight > 0, nodes);
+  useHeadMovement(additiveActions.headMovement.weight > 0, nodes);
+  useSmile(additiveActions.smile.weight > 0, nodes);
+
+  useFrame((_, delta) => {
+    mixer.update(delta * 0.001);
+  });
+
+  return (
+    <group position={AVATAR_POSITION} rotation={AVATAR_ROTATION}>
+      <primitive object={scene} />
+    </group>
+  );
+}

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

@@ -0,0 +1,69 @@
+import React, { useEffect, useMemo } from 'react';
+import { Object3D, Vector3 } from 'three';
+import { useGLTF } from '@react-three/drei';
+import useEyeBlink from '../utils/useEyeBlink';
+import useHeadMovement from '../utils/useHeadMovement';
+import useMouthSpeaking from '../utils/useMouthSpeaking';
+import { dispose, useGraph } from '@react-three/fiber';
+import { correctMaterials, hideHands, isSkinnedMesh } from '../utils/utils';
+
+interface HalfBodyAvatarProps {
+  url: string;
+  eyeBlink?: boolean;
+  headMovement?: boolean;
+  speaking?: boolean;
+  onLoaded?: () => void;
+}
+
+const AVATAR_POSITION = new Vector3(0, -0.6, 0);
+
+export default function HalfBodyAvatar({
+  url,
+  eyeBlink,
+  headMovement,
+  speaking,
+  onLoaded,
+}: HalfBodyAvatarProps) {
+  const { scene } = useGLTF(url);
+  const { nodes, materials } = useGraph(scene);
+
+  useEyeBlink(eyeBlink, nodes);
+  useHeadMovement(headMovement, nodes);
+  useMouthSpeaking(!!speaking, nodes);
+
+  useEffect(() => {
+    const setupAvatar = () => {
+      hideHands(nodes);
+      correctMaterials(materials);
+      onLoaded?.();
+    };
+
+    setupAvatar();
+
+    return () => {
+      const disposeObjects = () => {
+        Object.values(materials).forEach(dispose);
+        Object.values(nodes).filter(isSkinnedMesh).forEach(dispose);
+      };
+
+      disposeObjects();
+    };
+  }, [materials, nodes, url, onLoaded]);
+
+  const skinnedMeshes = useMemo(
+    () => Object.values(nodes).filter(isSkinnedMesh),
+    [nodes]
+  );
+
+  return (
+    <group position={AVATAR_POSITION}>
+      {nodes.Hips && <primitive key="armature" object={nodes.Hips} />}
+      {skinnedMeshes.map(
+        (node: Object3D) =>
+          node && (
+            <primitive key={node.name} object={node} receiveShadow castShadow />
+          )
+      )}
+    </group>
+  );
+}

package/src/components/{AvatarView → Avatar/AvatarView}/components/loader.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Html, useProgress } from '@react-three/drei';
-import Spin from '../../ui/Spin';
+import Spin from '../../../ui/Spin';
 
 interface Props {
   fallbackImg?: string;