Feat totem layout

src/components/Avatar/Avatar.test.tsx

@@ -11,6 +11,8 @@ it('renders defualt Avatar (blob) unchanged', () => {
       <Avatar
         memori={memori}
       tenant={tenant}
+      isTotem={false}
+      setEnablePositionControls={() => {}}
       instruct={false}
       avatar3dVisible={true}
       setAvatar3dVisible={() => {}}
@@ -34,6 +36,8 @@ it('renders Avatar with blob and avatar in blob unchanged', () => {
       }}
       tenant={tenant}
       instruct={false}
+      isTotem={false}
+      setEnablePositionControls={() => {}}
       avatar3dVisible={true}
       setAvatar3dVisible={() => {}}
       hasUserActivatedSpeak={false}
@@ -50,6 +54,8 @@ it('renders Avatar with custom glb model unchanged', () => {
       <Avatar
         memori={memori}
         integration={integration}
+        isTotem={false}
+        setEnablePositionControls={() => {}}
         integrationConfig={{
         ...integrationConfig,
         avatar: 'customglb',
@@ -74,6 +80,8 @@ it('renders Avatar with rpm 3d avatar unchanged', () => {
       <Avatar
         memori={memori}
       integration={integration}
+      isTotem={false}
+      setEnablePositionControls={() => {}}
       integrationConfig={{
         ...integrationConfig,
         avatar: 'readyplayerme',

src/components/Avatar/Avatar.tsx

@@ -17,6 +17,8 @@ import Edit from '../icons/Edit';
 import cx from 'classnames';
 import ContainerAvatarView from './AvatarView';
 import { useViseme } from '../../context/visemeContext';
+import PositionControls from './AvatarView/AvatarComponent/positionControls/positionControls';
+import { getLocalConfig } from '../../helpers/configuration';
 
 export interface Props {
   memori: Memori;
@@ -34,6 +36,10 @@ export interface Props {
   animation?: string;
   isZoomed?: boolean;
   chatProps?: any;
+  enablePositionControls?: boolean;
+  setEnablePositionControls: (value: boolean) => void;
+  avatarType?: 'blob' | 'avatar3d' | undefined;
+  isTotem?: boolean;
 }
 
 const Avatar: React.FC<Props> = ({
@@ -52,8 +58,11 @@ const Avatar: React.FC<Props> = ({
   animation,
   isZoomed = false,
   chatProps,
+  avatarType,
+  enablePositionControls,
+  setEnablePositionControls,
+  isTotem = false,
 }) => {
-
   const { t } = useTranslation();
   const [isClient, setIsClient] = useState(false);
 
@@ -87,7 +96,8 @@ const Avatar: React.FC<Props> = ({
         integrationConfig?.avatar === 'readyplayerme-full' ||
         integrationConfig?.avatar === 'customglb' ||
         integrationConfig?.avatar === 'customrpm') &&
-      integrationConfig?.avatarURL
+      integrationConfig?.avatarURL &&
+      (avatarType && avatarType !== 'blob')
     ) {
       return (
         <>
@@ -115,11 +125,10 @@ const Avatar: React.FC<Props> = ({
 
   const renderAvatarContent = () => {
     if (!isClient) return null;
-
     if (
       integrationConfig?.avatar === 'readyplayerme' ||
-      integrationConfig?.avatar === 'readyplayerme-full' || 
-      integrationConfig?.avatar === 'customrpm'
+      integrationConfig?.avatar === 'readyplayerme-full' ||
+      integrationConfig?.avatar === 'customrpm' 
     ) {
       return (
         <ErrorBoundary
@@ -132,6 +141,7 @@ const Avatar: React.FC<Props> = ({
           }
         >
           <ContainerAvatarView
+            enablePositionControls={enablePositionControls}
             updateCurrentViseme={updateCurrentViseme}
             url={integrationConfig.avatarURL}
             sex={memori.voiceType === 'FEMALE' ? 'FEMALE' : 'MALE'}
@@ -145,8 +155,10 @@ const Avatar: React.FC<Props> = ({
             style={getAvatarStyle()}
             stopProcessing={stopProcessing}
             resetVisemeQueue={resetVisemeQueue}
-            isZoomed={isZoomed} 
+            isZoomed={isZoomed}
+            isTotem={isTotem}
             chatEmission={chatProps?.dialogState?.emission}
+            setEnablePositionControls={setEnablePositionControls}
           />
         </ErrorBoundary>
       );
@@ -183,10 +195,10 @@ const Avatar: React.FC<Props> = ({
   const getAvatarStyle = () => {
     if (integrationConfig?.avatar === 'readyplayerme') {
       return {
-        width: '300px',
-        height: '300px',
+        width: '100%',
+        height: '100%',
         backgroundColor: 'none',
-        borderRadius: '100%',
+        // borderRadius: '100%',
         boxShadow: 'none',
       };
     }

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

@@ -1,7 +1,10 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import AnimationControlPanel from './components/controls';
-import FullbodyAvatar from './components/fullbodyAvatar';
+import { FullbodyAvatar } from './components/FullbodyAvatar/FullbodyAvatar';
 import HalfBodyAvatar from './components/halfbodyAvatar';
+import PositionControls from './positionControls/positionControls';
+import { PerspectiveCamera, Vector3 } from 'three';
+import { getLocalConfig } from '../../../../helpers/configuration';
 
 interface Props {
   showControls: boolean;
@@ -14,11 +17,14 @@ interface Props {
   speaking: boolean;
   isZoomed: boolean;
   chatEmission: any;
+  avatarHeight?: number;
+  avatarDepth?: number;
   stopProcessing: () => void;
   resetVisemeQueue: () => void;
   updateCurrentViseme: (
     currentTime: number
   ) => { name: string; weight: number } | null;
+  setCameraZ: (value: number) => void;
 }
 
 interface BaseAction {
@@ -65,8 +71,11 @@ export const AvatarView: React.FC<Props & { halfBody: boolean }> = ({
   halfBody,
   loading,
   isZoomed,
+  avatarHeight,
+  avatarDepth,
   updateCurrentViseme,
   resetVisemeQueue,
+  setCameraZ,
 }) => {
   const [currentBaseAction, setCurrentBaseAction] = useState({
     action: animation || 'Idle1',
@@ -87,8 +96,11 @@ export const AvatarView: React.FC<Props & { halfBody: boolean }> = ({
 
   // Set the morph target influences for the given emotions
   const setEmotionMorphTargetInfluences = useCallback((action: string) => {
-
-    if(action === 'Loading1' || action === 'Loading2' || action === 'Loading3') {
+    if (
+      action === 'Loading1' ||
+      action === 'Loading2' ||
+      action === 'Loading3'
+    ) {
       return;
     }
 
@@ -99,9 +111,6 @@ export const AvatarView: React.FC<Props & { halfBody: boolean }> = ({
       Tristezza: { Tristezza: 1 },
       Timore: { Timore: 1 },
     };
-
-
-
 
     // Set all emotions to 0
     const defaultEmotions = Object.keys(emotionMap).reduce((acc, key) => {
@@ -190,13 +199,6 @@ export const AvatarView: React.FC<Props & { halfBody: boolean }> = ({
     }
   }, [loading]);
 
-  // useEffect(() => {
-  //   if (speaking && currentBaseAction.action !== 'Idle1') {
-  //     const animation = `Idle1`;
-  //     onBaseActionChange(animation);
-  //   }
-  // }, [speaking]);
-
   return (
     <>
       {showControls && (
@@ -214,13 +216,12 @@ export const AvatarView: React.FC<Props & { halfBody: boolean }> = ({
       {halfBody ? (
         <HalfBodyAvatar
           url={url}
-          headMovement={headMovement}
-          speaking={speaking}
-          eyeBlink={eyeBlink}
-          morphTargetInfluences={morphTargetInfluences}
+          onCameraZChange={setCameraZ}
           setMorphTargetInfluences={setMorphTargetInfluences}
           setMorphTargetDictionary={setMorphTargetDictionary}
           updateCurrentViseme={updateCurrentViseme}
+          avatarHeight={avatarHeight || 50}
+          avatarDepth={avatarDepth || -50}
         />
       ) : (
         <FullbodyAvatar
@@ -237,6 +238,10 @@ export const AvatarView: React.FC<Props & { halfBody: boolean }> = ({
           setMorphTargetDictionary={setMorphTargetDictionary}
           setMorphTargetInfluences={setMorphTargetInfluences}
           emotionMorphTargets={emotionMorphTargets}
+          halfBody={halfBody}
+          onCameraZChange={setCameraZ}
+          avatarHeight={avatarHeight || 50}
+          avatarDepth={avatarDepth || -50}
         />
       )}
     </>