feat: added isTotem prop in Avatar Component for managing default ava…

…tar size for different layouts
memori-ai · Nov 11, 2024 · 9d171dc · 9d171dc
1 parent 0900f1a
commit 9d171dc
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 18 deletions.
diff --git a/src/components/Avatar/Avatar.test.tsx b/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',

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -39,6 +39,7 @@ export interface Props {
   enablePositionControls?: boolean;
   setEnablePositionControls: (value: boolean) => void;
   avatarType?: 'blob' | 'avatar3d' | undefined;
+  isTotem?: boolean;
 }
 
 const Avatar: React.FC<Props> = ({
@@ -60,6 +61,7 @@ const Avatar: React.FC<Props> = ({
   avatarType,
   enablePositionControls,
   setEnablePositionControls,
+  isTotem = false,
 }) => {
   const { t } = useTranslation();
   const [isClient, setIsClient] = useState(false);
@@ -154,7 +156,7 @@ const Avatar: React.FC<Props> = ({
             stopProcessing={stopProcessing}
             resetVisemeQueue={resetVisemeQueue}
             isZoomed={isZoomed}
-            layout={chatProps?.layout}
+            isTotem={isTotem}
             chatEmission={chatProps?.dialogState?.emission}
             setEnablePositionControls={setEnablePositionControls}
           />

diff --git a/src/components/Avatar/AvatarView/AvatarComponent/positionControls/positionControls.tsx b/src/components/Avatar/AvatarView/AvatarComponent/positionControls/positionControls.tsx
@@ -110,9 +110,7 @@ const PositionControls: React.FC<PositionControlsProps> = ({
       </div>
       <div className="memori--position-controls-helper">
         <p className="memori--position-controls-helper-text">
-          {t('Use the arrow keys to adjust the avatar height')}
-          <br />
-          {t('Use +/- to adjust the avatar depth')}
+          {t('write_and_speak.suggestions')}
         </p>
       </div>
       <div className="memori--slider-container">

diff --git a/src/components/Avatar/AvatarView/index.tsx b/src/components/Avatar/AvatarView/index.tsx
@@ -31,14 +31,7 @@ export interface Props {
   chatEmission?: any;
   enablePositionControls?: boolean;
   setEnablePositionControls: (value: boolean) => void;
-  layout?:
-    | 'DEFAULT'
-    | 'FULLPAGE'
-    | 'TOTEM'
-    | 'CHAT'
-    | 'WEBSITE_ASSISTANT'
-    | 'HIDDEN_CHAT'
-    | 'ZOOMED_FULL_BODY';
+  isTotem?: boolean;
   setMeshRef?: any;
   stopProcessing: () => void;
   resetVisemeQueue: () => void;
@@ -106,25 +99,31 @@ export default function ContainerAvatarView({
   updateCurrentViseme,
   enablePositionControls,
   setEnablePositionControls,
-  layout,
+  isTotem = false,
 }: Props) {
   const [cameraZ, setCameraZ] = useState(
     () => getCameraSettings(halfBody, isZoomed || false).position[2]
   );
 
   const getAvatarHeight = () => {
-    if (layout === 'TOTEM') {
+    console.log('avatarHeight', getLocalConfig('avatarHeight', 50), isTotem);
+    if (isTotem) {
       return getLocalConfig('avatarHeight', 50);
+    } else if (halfBody) {
+      return 100;
     } else {
-      return isZoomed ? 20 : !halfBody ? 60 : 60;
+      return isZoomed ? 20 : 55;
     }
   };
 
   const getAvatarDepth = () => {
-    if (layout === 'TOTEM') {
+    if (isTotem) {
+      console.log('avatarDepth', getLocalConfig('avatarDepth', 50));
       return getLocalConfig('avatarDepth', 50);
+    } else if (halfBody) {
+      return 50
     } else {
-      return isZoomed ? -80 : !halfBody ? -80 : -80;
+      return isZoomed ? -80 : 70;
     }
   };
 

diff --git a/src/components/layouts/Totem.tsx b/src/components/layouts/Totem.tsx
@@ -36,7 +36,7 @@ const TotemLayout: React.FC<LayoutProps> = ({
       </div>
 
       <div className="memori-totem-layout--avatar">
-        {Avatar && avatarProps && <Avatar {...avatarProps} />}
+        {Avatar && avatarProps && <Avatar {...avatarProps} isTotem />}
       </div>
 
       <div id="extension" />