@memori.ai/memori-react 8.45.1 → 8.45.4

package/src/components/Avatar/Avatar.test.tsx

@@ -1,158 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { memori, tenant, integration } from '../../mocks/data';
-import Avatar from './Avatar';
-import { VisemeProvider } from '../../context/visemeContext';
-import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
-const integrationConfig = JSON.parse(integration.customData ?? '{}');
-
-it('renders defualt Avatar (blob) unchanged', () => {
-  const { container } = render(
-    <VisemeProvider>
-      <ArtifactProvider>
-      <Avatar
-        memori={memori}
-      tenant={tenant}
-      isTotem={false}
-      setEnablePositionControls={() => {}}
-      instruct={false}
-      avatar3dVisible={true}
-      setAvatar3dVisible={() => {}}
-      hasUserActivatedSpeak={false}
-        isPlayingAudio={false}
-      />
-      </ArtifactProvider>
-    </VisemeProvider>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Avatar with blob and avatar in blob unchanged', () => {
-  const { container } = render(
-    <VisemeProvider>
-      <Avatar
-        memori={memori}
-        integrationConfig={{
-        ...integrationConfig,
-        avatar: 'userAvatar',
-        avatarURL: memori.avatarURL,
-      }}
-      tenant={tenant}
-      instruct={false}
-      isTotem={false}
-      setEnablePositionControls={() => {}}
-      avatar3dVisible={true}
-      setAvatar3dVisible={() => {}}
-      hasUserActivatedSpeak={false}
-      isPlayingAudio={false}
-      />
-    </VisemeProvider>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Avatar with custom glb model unchanged', () => {
-  const { container } = render(
-    <VisemeProvider>
-      <Avatar
-        memori={memori}
-        integration={integration}
-        isTotem={false}
-        setEnablePositionControls={() => {}}
-        integrationConfig={{
-        ...integrationConfig,
-        avatar: 'customglb',
-        avatarURL:
-          'https://assets.memori.ai/api/v2/asset/7383f05a-0788-49b0-b9b9-3bfc402c7ddf.glb#1669136149862',
-      }}
-      tenant={tenant}
-      instruct={false}
-      avatar3dVisible={true}
-      setAvatar3dVisible={() => {}}
-      hasUserActivatedSpeak={false}
-      isPlayingAudio={false}
-      />
-    </VisemeProvider>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Avatar with rpm 3d avatar unchanged', () => {
-  const { container } = render( 
-    <VisemeProvider>
-      <Avatar
-        memori={memori}
-      integration={integration}
-      isTotem={false}
-      setEnablePositionControls={() => {}}
-      integrationConfig={{
-        ...integrationConfig,
-        avatar: 'readyplayerme',
-        avatarURL:
-          'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
-      }}
-      tenant={tenant}
-      instruct={false}
-      avatar3dVisible={true}
-      setAvatar3dVisible={() => {}}
-        hasUserActivatedSpeak={false}
-        isPlayingAudio={false}
-      />
-    </VisemeProvider>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Avatar with avatar-configurator like readyplayerme-full', () => {
-  const { container } = render(
-    <VisemeProvider>
-      <Avatar
-        memori={memori}
-        integration={integration}
-        isTotem={false}
-        setEnablePositionControls={() => {}}
-        integrationConfig={{
-          ...integrationConfig,
-          avatar: 'avatar-configurator',
-          avatarURL:
-            'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
-        }}
-        tenant={tenant}
-        instruct={false}
-        avatar3dVisible={true}
-        setAvatar3dVisible={() => {}}
-        hasUserActivatedSpeak={false}
-        isPlayingAudio={false}
-        avatarType="avatar3d"
-      />
-    </VisemeProvider>
-  );
-  expect(container).toMatchSnapshot();
-});
-
-it('renders Avatar with avatar-configurator on totem layout unchanged', () => {
-  const { container } = render(
-    <VisemeProvider>
-      <Avatar
-        memori={memori}
-        integration={integration}
-        isTotem
-        setEnablePositionControls={() => {}}
-        integrationConfig={{
-          ...integrationConfig,
-          avatar: 'avatar-configurator',
-          avatarURL:
-            'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
-        }}
-        tenant={tenant}
-        instruct={false}
-        avatar3dVisible={true}
-        setAvatar3dVisible={() => {}}
-        hasUserActivatedSpeak={false}
-        isPlayingAudio={false}
-        avatarType="avatar3d"
-      />
-    </VisemeProvider>
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/Avatar/Avatar.tsx

@@ -1,245 +0,0 @@
-import React, { memo, useEffect, useState } from 'react';
-import {
-  Integration,
-  Memori,
-  Tenant,
-} from '@memori.ai/memori-api-client/dist/types';
-import ErrorBoundary from '../ErrorBoundary/ErrorBoundary';
-import Tooltip from '../ui/Tooltip';
-import { getResourceUrl } from '../../helpers/media';
-import Blob from '../Blob/Blob';
-import ModelViewer from '../CustomGLBModelViewer/ModelViewer';
-import Button from '../ui/Button';
-import { useTranslation } from 'react-i18next';
-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';
-import { is3dAvatarWithUrl, usesRpmAvatarView } from '../../types/integration';
-
-export interface Props {
-  memori: Memori;
-  integration?: Integration;
-  integrationConfig?: { [key: string]: any };
-  tenant?: Tenant;
-  instruct?: boolean;
-  hasUserActivatedSpeak?: boolean;
-  avatar3dVisible?: boolean;
-  setAvatar3dVisible: (visible: boolean) => void;
-  isPlayingAudio?: boolean;
-  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> = ({
-  memori,
-  integration,
-  integrationConfig,
-  tenant,
-  instruct = false,
-  avatar3dVisible = false,
-  setAvatar3dVisible,
-  hasUserActivatedSpeak = false,
-  isPlayingAudio = false,
-  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);
-  }, []);
-
-  // 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;
-  };
-
-  const renderAvatar = () => {
-    if (
-      is3dAvatarWithUrl(
-        integrationConfig?.avatar,
-        integrationConfig?.avatarURL
-      ) &&
-      avatarType &&
-      avatarType !== 'blob'
-    ) {
-      return (
-        <>
-          <div
-            className={cx(
-              'memori--avatar-wrapper',
-              `memori--avatar-${integrationConfig?.avatar || 'default'}`,
-              {
-                hidden: !avatar3dVisible,
-              }
-            )}
-          >
-            {renderAvatarContent()}
-          </div>
-          {renderAvatarToggle()}
-        </>
-      );
-    }
-    return (
-      <div className="memori--blob-container">
-        {isClient && <Blob speaking={isPlayingAudio} avatar={getAvatarUrl()} />}
-      </div>
-    );
-  };
-
-  const renderAvatarContent = () => {
-    if (!isClient || !integrationConfig) return null;
-    if (usesRpmAvatarView(integrationConfig.avatar)) {
-      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()}
-    </>
-  );
-};
-
-export default memo(Avatar, (prevProps, nextProps) => {
-  return JSON.stringify(prevProps) === JSON.stringify(nextProps);
-});

package/src/components/Avatar/AvatarView/AvatarComponent/Shadow/DynamicShadow.tsx

@@ -1,103 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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) {
-      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