@memori.ai/memori-react 1.2.0 → 2.0.0

package/src/components/AgeVerificationModal/AgeVerificationModal.tsx

@@ -0,0 +1,89 @@
+import { useTranslation } from 'react-i18next';
+import message from '../ui/Message';
+import Button from '../ui/Button';
+import Modal from '../ui/Modal';
+import moment from 'moment';
+import DateSelector from '../DateSelector/DateSelector';
+import { useCallback, useState } from 'react';
+
+export interface Props {
+  visible?: boolean;
+  onClose: (birthDate?: string) => void;
+  minAge: number;
+}
+
+const AgeVerificationModal = ({ visible = false, onClose, minAge }: Props) => {
+  const { t } = useTranslation();
+
+  const [birthDate, setBirthDate] = useState<moment.Moment>();
+  const [error, setError] = useState<string>();
+
+  const onSubmit = useCallback(() => {
+    if (!birthDate) {
+      message.error(t('requiredField'));
+      setError(t('requiredField') || 'Required field');
+      return;
+    }
+
+    let age = moment().diff(birthDate, 'years');
+    if (age < minAge) {
+      message.error(t('underageTwinSession', { age: minAge }));
+      setError(
+        t('underageTwinSession', { age: minAge }) ||
+          `You must be at least ${minAge} years old to interact with this Twin`
+      );
+      return;
+    }
+
+    onClose(birthDate.toISOString());
+  }, [birthDate, minAge, onClose, t]);
+
+  return (
+    <Modal
+      open={visible}
+      title={t('ageVerification')}
+      className="age-verification-modal"
+      closable
+      onClose={() => onClose()}
+    >
+      <p>{t('ageVerificationText', { minAge })}</p>
+
+      <form
+        className="age-verification-form"
+        onSubmit={e => {
+          e.preventDefault();
+          onSubmit();
+        }}
+      >
+        <div className="form-item">
+          <fieldset name="birthDate">
+            <legend className="sr-only">{t('birthDate')}</legend>
+
+            <DateSelector
+              defaultDate={new Date(Date.now())}
+              onChange={date => {
+                setBirthDate(date);
+              }}
+            />
+
+            <p className="form-item-help">{t('birthDateHelper')}</p>
+
+            {error && <p className="form-item-error">{error}</p>}
+          </fieldset>
+        </div>
+        <div className="form-item form-submit">
+          <Button
+            primary
+            htmlType="submit"
+            className="age-verification-submit"
+            disabled={!birthDate}
+          >
+            {t('confirm')}
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  );
+};
+
+export default AgeVerificationModal;

package/src/components/AgeVerificationModal/__snapshots__/AgeVerificationModal.test.tsx.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders AgeVerificationModal unchanged 1`] = `<div />`;
+
+exports[`renders AgeVerificationModal visible unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders AgeVerificationModal with minAge unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;

package/src/components/Avatar/Avatar.stories.tsx

@@ -33,7 +33,8 @@ const Template: Story<Props> = args => {
     <div
       style={
         args.integrationConfig?.avatar === 'customglb' ||
-        args.integrationConfig?.avatar === 'readyplayerme'
+        args.integrationConfig?.avatar === 'readyplayerme' ||
+        args.integrationConfig?.avatar === 'readyplayerme-full'
           ? {}
           : { marginTop: '20vw' }
       }
@@ -116,3 +117,21 @@ ReadyPlayerMeAvatar.args = {
   integration,
   integrationConfig,
 };
+
+export const FullbodyReadyPlayerMeAvatar = Template.bind({});
+FullbodyReadyPlayerMeAvatar.args = {
+  memori,
+  tenant,
+  instruct: false,
+  avatar3dVisible: true,
+  setAvatar3dVisible: () => {},
+  hasUserActivatedSpeak: false,
+  isPlayingAudio: false,
+  integration,
+  integrationConfig: {
+    ...integrationConfig,
+    avatar: 'readyplayerme-full',
+    avatarURL:
+      'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb#1669136149862',
+  },
+};

package/src/components/Avatar/Avatar.tsx

@@ -108,6 +108,7 @@ const Avatar: React.FC<Props> = ({
                 >
                   <AvatarView
                     url={integrationConfig.avatarURL}
+                    sex={memori.voiceType === 'FEMALE' ? 'FEMALE' : 'MALE'}
                     fallbackImg={getResourceUrl({
                       type: 'avatar',
                       tenantID: tenant?.id,
@@ -115,7 +116,7 @@ const Avatar: React.FC<Props> = ({
                       baseURL: baseUrl,
                       apiURL: apiUrl,
                     })}
-                    headMovement
+                    headMovement={integrationConfig.avatar === 'readyplayerme'}
                     eyeBlink
                     halfBody={integrationConfig.avatar === 'readyplayerme'}
                     animation={animation}

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

@@ -12,7 +12,7 @@ exports[`renders Avatar with blob and avatar in blob unchanged 1`] = `
         <img
           alt=""
           role="presentation"
-          src="https://api.lorem.space/image/face?hash=0p9vyl1e"
+          src="https://app.twincreator.com/images/twincreator/square_logo.png"
         />
       </figure>
       <div
@@ -49,7 +49,7 @@ exports[`renders Avatar with custom glb model unchanged 1`] = `
         camera-controls="true"
         disable-zoom="true"
         ios-src=""
-        poster="https://api.lorem.space/image/face?hash=0p9vyl1e"
+        poster="https://app.twincreator.com/images/twincreator/square_logo.png"
         shadow-intensity="1"
         src="https://assets.memori.ai/api/v2/asset/7383f05a-0788-49b0-b9b9-3bfc402c7ddf.glb#1669136149862"
       />

package/src/components/AvatarView/AvatarView.stories.tsx

@@ -136,6 +136,7 @@ Speaking.args = {
 
 export const Fullbody = Template.bind({});
 Fullbody.args = {
+  sex: 'MALE',
   eyeBlink: true,
   headMovement: true,
   rotateAvatar: true,
@@ -148,6 +149,7 @@ Fullbody.args = {
 
 export const FullbodyAnimatedIdle = Template.bind({});
 FullbodyAnimatedIdle.args = {
+  sex: 'MALE',
   eyeBlink: true,
   headMovement: true,
   rotateAvatar: true,
@@ -161,6 +163,7 @@ FullbodyAnimatedIdle.args = {
 
 export const FullbodyAnimatedLoading = Template.bind({});
 FullbodyAnimatedLoading.args = {
+  sex: 'MALE',
   eyeBlink: true,
   headMovement: true,
   rotateAvatar: true,
@@ -174,6 +177,7 @@ FullbodyAnimatedLoading.args = {
 
 export const FullbodyAnimatedSpeaking = Template.bind({});
 FullbodyAnimatedSpeaking.args = {
+  sex: 'MALE',
   eyeBlink: true,
   headMovement: true,
   rotateAvatar: true,
@@ -184,3 +188,30 @@ FullbodyAnimatedSpeaking.args = {
   animation: 'Talk 1',
   halfBody: false,
 };
+
+export const FullbodyFemale = Template.bind({});
+FullbodyFemale.args = {
+  sex: 'FEMALE',
+  eyeBlink: true,
+  headMovement: true,
+  rotateAvatar: true,
+  speaking: false,
+  url: 'https://assets.memori.ai/api/v2/asset/6af08bf1-f011-40ea-92a2-699b7b53a53c.glb',
+  fallbackImg:
+    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
+  halfBody: false,
+};
+
+export const FullbodyAnimatedFemale = Template.bind({});
+FullbodyAnimatedFemale.args = {
+  sex: 'FEMALE',
+  eyeBlink: true,
+  headMovement: true,
+  rotateAvatar: true,
+  speaking: true,
+  url: 'https://assets.memori.ai/api/v2/asset/6af08bf1-f011-40ea-92a2-699b7b53a53c.glb',
+  fallbackImg:
+    'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
+  animation: 'Idle',
+  halfBody: false,
+};

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

@@ -1,5 +1,5 @@
 import React, { memo, useEffect, useMemo } from 'react';
-import { AnimationMixer, Object3D, Vector3 } from 'three';
+import { AnimationMixer, Object3D, Vector3, Euler } from 'three';
 import { useAnimations, useGLTF } from '@react-three/drei';
 import useEyeBlink from '../utils/useEyeBlink';
 import useHeadMovement from '../utils/useHeadMovement';
@@ -9,6 +9,7 @@ import { correctMaterials, hideHands, isSkinnedMesh } from '../utils/utils';
 
 export interface AvatarProps {
   url: string;
+  sex: 'MALE' | 'FEMALE';
   eyeBlink?: boolean;
   headMovement?: boolean;
   speaking?: boolean;
@@ -26,9 +27,11 @@ export interface AvatarProps {
 }
 
 const position = new Vector3(0, -1, 0);
+const rotation = new Euler(0.175, 0, 0);
 
 export default function Avatar({
   url,
+  sex,
   eyeBlink,
   headMovement,
   speaking,
@@ -37,7 +40,9 @@ export default function Avatar({
 }: AvatarProps) {
   const { scene } = useGLTF(url);
   const { animations } = useGLTF(
-    'https://assets.memori.ai/api/v2/asset/b11eef07-c45b-4959-9d43-be8105365c1f.glb'
+    sex === 'MALE'
+      ? 'https://assets.memori.ai/api/v2/asset/b11eef07-c45b-4959-9d43-be8105365c1f.glb'
+      : 'https://assets.memori.ai/api/v2/asset/24dc2bd7-d6b5-4492-ab29-791928b0a669.glb'
   );
   const { nodes, materials } = useGraph(scene);
 
@@ -59,8 +64,6 @@ export default function Avatar({
     };
   }, [materials, nodes, url, onLoaded]);
 
-  // useEffect(() => {
-  // console.log('animation', animation, animation && animation in anim.actions);
   try {
     if (animation && animation in anim.actions) {
       Object.keys(anim.actions).forEach(name => {
@@ -78,10 +81,9 @@ export default function Avatar({
   } catch (e) {
     console.log(e);
   }
-  // }, [animation]);
 
   return (
-    <group position={position}>
+    <group position={position} rotation={rotation}>
       <primitive object={scene} />
     </group>
   );

package/src/components/AvatarView/components/loader.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Html, useProgress } from '@react-three/drei';
+import Spin from '../../ui/Spin';
 
 interface Props {
   fallbackImg?: string;
@@ -9,18 +10,20 @@ const Loader = ({ fallbackImg }: Props) => {
   const { progress } = useProgress();
   return (
     <Html center className="avatar-loader">
-      {fallbackImg ? (
-        <figure>
-          <img
-            src={fallbackImg}
-            alt={`${Math.round(progress)}% loaded`}
-            title={`${Math.round(progress)}% loaded`}
-          />
-          <figcaption>{`${Math.round(progress)}%`}</figcaption>
-        </figure>
-      ) : (
-        <>{Math.round(progress)} % loaded</>
-      )}
+      <Spin spinning>
+        {fallbackImg ? (
+          <figure>
+            <img
+              src={fallbackImg}
+              alt={`${Math.round(progress)}% loaded`}
+              title={`${Math.round(progress)}% loaded`}
+            />
+            <figcaption>{`${Math.round(progress)}%`}</figcaption>
+          </figure>
+        ) : (
+          <>{Math.round(progress)} % loaded</>
+        )}
+      </Spin>
     </Html>
   );
 };

package/src/components/AvatarView/index.tsx

@@ -9,6 +9,7 @@ import { isAndroid } from '../../helpers/utils';
 
 export interface Props {
   url: string;
+  sex: 'MALE' | 'FEMALE';
   fallbackImg?: string;
   eyeBlink?: boolean;
   headMovement?: boolean;
@@ -35,6 +36,7 @@ const defaultStylesFullBody = {
 
 export default function AvatarView({
   url,
+  sex,
   fallbackImg,
   style,
   rotateAvatar,
@@ -57,7 +59,7 @@ export default function AvatarView({
               fov: 40,
               position: [0, 0, 0.6],
             }
-          : { fov: 40, position: [0, 0, 3] }
+          : { fov: 40, position: [0, 0.0000175, 3] }
       }
     >
       <Suspense fallback={fallback || <Loader fallbackImg={fallbackImg} />}>
@@ -85,6 +87,7 @@ export default function AvatarView({
         ) : (
           <FullbodyAvatar
             url={url}
+            sex={sex}
             eyeBlink={eyeBlink}
             headMovement={headMovement}
             speaking={speaking}

package/src/components/AvatarView/utils/useMouthSpeaking.ts

@@ -26,7 +26,9 @@ export default function useMouthSpeaking(
   useEffect(() => {
     if (!speaking) return;
 
-    mouthMesh = (nodes.Wolf3D_Head || nodes.Wolf3D_Avatar) as SkinnedMesh;
+    mouthMesh = (nodes.Wolf3D_Head ||
+      nodes.Wolf3D_Avatar ||
+      nodes.Wolf3D_Avatar001) as SkinnedMesh;
 
     if (mouthMesh?.morphTargetDictionary && mouthMesh?.morphTargetInfluences) {
       mouthOpenMorphIndex = mouthMesh.morphTargetDictionary.mouthOpen;