@memori.ai/memori-react 6.8.1 → 6.8.4

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,8 @@ import Eye from '../icons/Eye';
 import EyeInvisible from '../icons/EyeInvisible';
 import Edit from '../icons/Edit';
 import cx from 'classnames';
+import ContainerAvatarView from './AvatarView';
+import { useViseme } from '../../context/visemeContext';
 
 export interface Props {
   memori: Memori;
@@ -30,6 +31,13 @@ export interface Props {
   loading?: boolean;
   baseUrl?: string;
   apiUrl?: string;
+  animation?: string;
+  isZoomed?: boolean;
+  chatProps?: any;
+  enablePositionControls?: boolean;
+  setEnablePositionControls: (value: boolean) => void;
+  avatarType?: 'blob' | 'avatar3d' | null;
+  isTotem?: boolean;
 }
 
 const Avatar: React.FC<Props> = ({
@@ -45,34 +53,52 @@ const Avatar: React.FC<Props> = ({
   loading = false,
   baseUrl,
   apiUrl,
+  animation,
+  isZoomed = false,
+  chatProps,
+  avatarType = null,
+  enablePositionControls,
+  setEnablePositionControls,
+  isTotem = false,
 }) => {
   const { t } = useTranslation();
   const [isClient, setIsClient] = useState(false);
 
+  const { stopProcessing, updateCurrentViseme, resetVisemeQueue } = useViseme();
+
   useEffect(() => {
     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?.name,
+        resourceURI: memori.avatarURL,
+        baseURL: baseUrl,
+        apiURL: apiUrl,
+      });
+    }
+    return undefined;
+  };
 
-  return (
-    <>
-      {(integrationConfig?.avatar === 'readyplayerme' ||
+  const renderAvatar = () => {
+    if (
+      (integrationConfig?.avatar === 'readyplayerme' ||
         integrationConfig?.avatar === 'readyplayerme-full' ||
-        integrationConfig?.avatar === 'customglb') &&
-      integrationConfig?.avatarURL ? (
+        integrationConfig?.avatar === 'customglb' ||
+        integrationConfig?.avatar === 'customrpm') &&
+      integrationConfig?.avatarURL &&
+      avatarType &&
+      avatarType !== 'blob'
+    ) {
+      return (
         <>
           <div
             className={cx(
@@ -83,133 +109,137 @@ 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' ||
+      integrationConfig?.avatar === 'customrpm'
+    ) {
+      return (
+        <ErrorBoundary
+          fallback={
+            <div className="memori--blob-container">
+              {isClient && (
+                <Blob speaking={isPlayingAudio} avatar={getAvatarUrl()} />
+              )}
+            </div>
+          }
+        >
+          <ContainerAvatarView
+            enablePositionControls={enablePositionControls}
+            updateCurrentViseme={updateCurrentViseme}
+            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()}
+            stopProcessing={stopProcessing}
+            resetVisemeQueue={resetVisemeQueue}
+            isZoomed={isZoomed}
+            isTotem={isTotem}
+            chatEmission={chatProps?.dialogState?.emission}
+            setEnablePositionControls={setEnablePositionControls}
+          />
+        </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: '100%',
+        height: '100%',
+        backgroundColor: 'none',
+        // borderRadius: '100%',
+        boxShadow: 'none',
+      };
+    }
+    return {
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'none',
+    };
+  };
+
+  const renderIntegrationsLink = () => {
+    if (!(instruct && !hasUserActivatedSpeak && memori.isGiver && tenant?.name))
+      return null;
+
+    const href = `https://${tenant.name}/${
+      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/Avatar/AvatarView/AvatarComponent/Shadow/DynamicShadow.tsx

@@ -0,0 +1,103 @@
+import React, { useEffect, useState } from 'react';
+import { Canvas } from '@react-three/fiber';
+import { ContactShadows, PerspectiveCamera } from '@react-three/drei';
+import { AvatarAnimator } from '../components/controllers/AvatarAnimator';
+
+const DynamicShadow = ({
+  animator,
+  avatarPosition,
+  }: {
+    animator: AvatarAnimator | null;
+  avatarPosition: any;
+}) => {
+  // Calculate shadow properties based on animation
+  const getShadowProps = () => {
+    const baseProps = {
+      width: 10,
+      height: 10,
+      blur: 2.5,
+      scale: 10,
+      far: 5,
+      resolution: 1024,
+      color: '#000000',
+    };
+
+    if (!animator) {
+      return {
+        ...baseProps,
+        opacity: 0,
+      };
+    }
+    // Adjust shadow based on animation type
+    if (animator.getCurrentAnimationName()?.startsWith('Loading')) {
+      return {
+        ...baseProps,
+        opacity: 0.85,
+        blur: 3,
+        width: 12,
+        height: 12,
+      };
+    } else if (
+      animator.getCurrentAnimationName()?.includes('Gioia') ||
+      animator.getCurrentAnimationName()?.includes('Joy')
+    ) {
+      return {
+        ...baseProps,
+        opacity: 0.9,
+        blur: 2,
+        width: 11,
+        height: 11,
+      };
+    } else if (
+      animator.getCurrentAnimationName()?.includes('Rabbia') ||
+      animator.getCurrentAnimationName()?.includes('Anger')
+    ) {
+      return {
+        ...baseProps,
+        opacity: 0.95,
+        blur: 1.8,
+        width: 12,
+        height: 12,
+      };
+    }
+
+    // Default idle state
+    return {
+      ...baseProps,
+      opacity: 0.9,
+      blur: 2.2,
+    };
+  };
+
+  const shadowProps = getShadowProps();
+
+  return (
+    <>
+      {/* Main body shadow */}
+      <ContactShadows
+        opacity={shadowProps.opacity}
+        scale={shadowProps.scale}
+        blur={shadowProps.blur}
+        far={shadowProps.far}
+        resolution={shadowProps.resolution}
+        color={shadowProps.color}
+        frames={Infinity}
+        position={[0, avatarPosition.y, 0]}
+      />
+
+      {/* Foot shadow - smaller and sharper */}
+      <ContactShadows
+         opacity={1}
+         width={5}
+         height={5}
+         blur={1}
+         far={2}
+         resolution={1024}
+         color="#000000"
+        position={[0, -0.98, 0]}
+      />
+    </>
+  );
+};
+
+export default DynamicShadow;

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

@@ -0,0 +1,106 @@
+import { useRef, useEffect, useCallback, memo } from 'react';
+import { AvatarAnimator } from './components/controllers/AvatarAnimator';
+import { FullbodyAvatar } from './components/FullbodyAvatar/fullbodyAvatar';
+import HalfBodyAvatar from './components/halfbodyAvatar';
+
+interface AvatarViewProps {
+  chatEmission: string | null | undefined;
+  url: string;
+  sex: 'MALE' | 'FEMALE';
+  eyeBlink: boolean;
+  halfBody: boolean;
+  loading: boolean;
+  avatarHeight: number;
+  avatarDepth: number;
+  updateCurrentViseme: (
+    currentTime: number
+  ) => { name: string; weight: number } | null;
+  setCameraZ: (cameraZ: number) => void;
+  headMovement: boolean;
+  speaking: boolean;
+  showControls: boolean;
+}
+
+// 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,
+  url,
+  sex,
+  eyeBlink,
+  halfBody,
+  loading,
+  avatarHeight = 50,
+  avatarDepth = -50,
+  updateCurrentViseme,
+  setCameraZ,
+  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
+
+  // 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);
+    }
+  }, [loading, chatEmission]); // Both dependencies are needed
+
+  // Memoize common props to prevent unnecessary object creation on re-renders
+  const commonAvatarProps = useCallback(() => ({
+    url,
+    onCameraZChange: setCameraZ,
+    updateCurrentViseme,
+    avatarHeight,
+    avatarDepth,
+    setAnimatorRef, // This is now stable across renders
+  }), [url, setCameraZ, updateCurrentViseme, avatarHeight, avatarDepth, setAnimatorRef]);
+
+  // Render avatar based on halfBody flag
+  return (
+    <>
+      {halfBody ? (
+        <MemoizedHalfBodyAvatar
+          {...commonAvatarProps()}
+          eyeBlink={eyeBlink}
+          headMovement={headMovement}
+        />
+      ) : (
+        <MemoizedFullbodyAvatar
+          {...commonAvatarProps()}
+          sex={sex}
+          eyeBlink={eyeBlink}
+          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