@memori.ai/memori-react 7.7.1 → 7.8.0-rc.0

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

@@ -96,8 +96,7 @@ Default.args = {
   headMovement: false,
   rotateAvatar: false,
   speaking: false,
-  clearVisemes: () => {},
-  setMeshRef: () => {},
+  updateCurrentViseme: () => {},
   url: 'https://assets.memori.ai/api/v2/asset/b791f77c-1a94-4272-829e-eca82fcc62b7.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/d8035229-08cf-42a7-a532-ab051df2603d.png',
@@ -105,8 +104,7 @@ Default.args = {
 
 export const EyeBlink = Template.bind({});
 EyeBlink.args = {
-  clearVisemes: () => {},
-  setMeshRef: () => {},
+  updateCurrentViseme: () => {},
   eyeBlink: true,
   headMovement: false,
   rotateAvatar: false,
@@ -118,8 +116,7 @@ EyeBlink.args = {
 
 export const HeadMovement = Template.bind({});
 HeadMovement.args = {
-  clearVisemes: () => {},
-  setMeshRef: () => {},
+  updateCurrentViseme: () => {},
   eyeBlink: false,
   headMovement: true,
   rotateAvatar: false,
@@ -131,8 +128,7 @@ HeadMovement.args = {
 
 export const RotateAvatar = Template.bind({});
 RotateAvatar.args = {
-  clearVisemes: () => {},
-  setMeshRef: () => {},
+  updateCurrentViseme: () => {},
   eyeBlink: false,
   headMovement: false,
   rotateAvatar: true,
@@ -144,8 +140,7 @@ RotateAvatar.args = {
 
 export const Speaking = Template.bind({});
 Speaking.args = {
-  clearVisemes: () => {},
-  setMeshRef: () => {},
+  updateCurrentViseme: () => {},
   eyeBlink: false,
   headMovement: false,
   rotateAvatar: false,
@@ -162,8 +157,7 @@ Fullbody.args = {
   headMovement: true,
   rotateAvatar: true,
   speaking: false,
-  clearVisemes: () => {},
-  setMeshRef: () => {},
+  updateCurrentViseme: () => {},
   url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
@@ -178,8 +172,7 @@ FullbodyZoomed.args = {
   rotateAvatar: true,
   speaking: false,
   isZoomed: true,
-  clearVisemes: () => {},
-  setMeshRef: () => {},
+  updateCurrentViseme: () => {},
   url: 'https://assets.memori.ai/api/v2/asset/3f5ef41c-6c4c-449c-888d-cf9c89782528.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
@@ -193,8 +186,7 @@ FullbodyAnimatedIdle.args = {
   headMovement: true,
   rotateAvatar: true,
   speaking: false,
-  clearVisemes: () => {},
-  setMeshRef: () => {},
+  updateCurrentViseme: () => {},
   url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
@@ -209,8 +201,7 @@ FullbodyAnimatedLoading.args = {
   headMovement: true,
   rotateAvatar: true,
   speaking: false,
-  clearVisemes: () => {},
-  setMeshRef: () => {},
+  updateCurrentViseme: () => {},
   url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
@@ -225,8 +216,7 @@ FullbodyAnimatedSpeaking.args = {
   headMovement: true,
   rotateAvatar: true,
   speaking: true,
-  clearVisemes: () => {},
-  setMeshRef: () => {},
+  updateCurrentViseme: () => {},
   url: 'https://models.readyplayer.me/63b55751f17e295642bf07a2.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
@@ -241,8 +231,7 @@ FullbodyFemale.args = {
   headMovement: true,
   rotateAvatar: true,
   speaking: false,
-  clearVisemes: () => {},
-  setMeshRef: () => {},
+  updateCurrentViseme: () => {},
   url: 'https://models.readyplayer.me/650d50c2663b19e0d2831b2b.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',
@@ -256,8 +245,7 @@ FullbodyAnimatedFemale.args = {
   headMovement: true,
   rotateAvatar: true,
   speaking: true,
-  clearVisemes: () => {},
-  setMeshRef: () => {},
+  updateCurrentViseme: () => {},
   url: 'https://models.readyplayer.me/650d50c2663b19e0d2831b2b.glb',
   fallbackImg:
     'https://assets.memori.ai/api/v2/asset/3049582f-db5f-452c-913d-e4340d4afd0a.png',

package/src/components/Avatar/AvatarView/index.tsx

@@ -23,8 +23,9 @@ export interface Props {
   isZoomed?: boolean;
   chatEmission?: any;
   setMeshRef?: any;
-  clearVisemes: () => void;
-  setEmotion: (emotion: string) => void;
+  stopProcessing: () => void;
+  resetVisemeQueue: () => void;
+  updateCurrentViseme: (currentTime: number) => { name: string; weight: number } | null;
 }
 
 const defaultStyles = {
@@ -88,9 +89,9 @@ export default function ContainerAvatarView({
   showControls = false,
   isZoomed,
   chatEmission,
-  setMeshRef,
-  clearVisemes,
-  setEmotion,
+  stopProcessing,
+  resetVisemeQueue,
+  updateCurrentViseme,
 }: Props) {
   return (
     <Canvas
@@ -114,9 +115,9 @@ export default function ContainerAvatarView({
           speaking={speaking || false}
           halfBody={halfBody || false}
           chatEmission={chatEmission}
-          setMeshRef={setMeshRef}
-          clearVisemes={clearVisemes}
-          setEmotion={setEmotion}
+          updateCurrentViseme={updateCurrentViseme}
+          stopProcessing={stopProcessing}
+          resetVisemeQueue={resetVisemeQueue}
         />
       </Suspense>
     </Canvas>

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -543,11 +543,13 @@ const MemoriWidget = ({
   const [hideEmissions, setHideEmissions] = useState(false);
 
   const {
-    addVisemeToQueue,
-    processVisemeQueue,
-    clearVisemes,
-    emotion,
-    getAzureStyleForEmotion,
+    updateCurrentViseme,
+    startProcessing,
+    resetAndStartProcessing,
+    isProcessing,
+    addViseme,
+    stopProcessing,
+    resetVisemeQueue,
   } = useViseme();
 
   useEffect(() => {
@@ -1961,15 +1963,12 @@ const MemoriWidget = ({
       onEndSpeakStartListen();
     };
 
-    // Clear any existing visemes before starting new speech
-    clearVisemes();
+    // Add this before starting new speech synthesis
+    resetVisemeQueue();
 
     // Set up the viseme event handler
     speechSynthesizer.visemeReceived = function (_, e) {
-      addVisemeToQueue({
-        visemeId: e.visemeId,
-        audioOffset: e.audioOffset,
-      });
+      addViseme(e.visemeId, e.audioOffset);
     };
 
     const textToSpeak = escapeHTML(
@@ -1979,31 +1978,33 @@ const MemoriWidget = ({
     speechSynthesizer.speakSsmlAsync(
       `<speak version="1.0" xmlns="http://www.w3.org/2001/10/synthesis" xmlns:mstts="https://www.w3.org/2001/mstts" xmlns:emo="http://www.w3.org/2009/10/emotionml" xml:lang="${getCultureCodeByLanguage(
         userLang
-      )}"><voice name="${getTTSVoice(
-        userLang
-      )}"><prosody rate="0.95"><mstts:express-as style="${getAzureStyleForEmotion(
-        emotion
-      )}"><s>${replaceTextWithPhonemes(
+      )}"><voice name="${getTTSVoice(userLang)}"><s>${replaceTextWithPhonemes(
         textToSpeak,
         userLang.toLowerCase()
-      )}</s></mstts:express-as></prosody></voice></speak>`,
+      )}</s></voice></speak>`,
       result => {
         if (result) {
           setIsPlayingAudio(true);
           memoriSpeaking = true;
 
-          // Process the viseme data
-          processVisemeQueue();
-
           try {
             // Decode the audio data
-            audioContext.decodeAudioData(result.audioData, function (buffer) {
-              source.buffer = buffer;
-              source.connect(audioContext.destination);
-
-              if (history.length < 1 || (isSafari && isIOS)) {
-                source.start(0);
-              }
+            audioContext!.decodeAudioData(result.audioData, function (buffer) {
+              console.log('decoded');
+              const currentSource = audioContext!.createBufferSource();
+              currentSource.buffer = buffer;
+              currentSource.connect(audioContext!.destination);
+              startProcessing();
+              currentSource.start();
+
+              currentSource.onended = () => {
+                console.log('ended');
+                setIsPlayingAudio(false);
+                memoriSpeaking = false;
+                stopProcessing();
+                resetVisemeQueue();
+                emitEndSpeakEvent();
+              };
             });
 
             // Handle the audio context state changes
@@ -2012,27 +2013,28 @@ const MemoriWidget = ({
                 audioContext.state === 'suspended' ||
                 audioContext.state === 'closed'
               ) {
+                console.log('suspended');
                 source.disconnect();
                 setIsPlayingAudio(false);
-                clearVisemes();
+                stopProcessing();
+                resetVisemeQueue();
                 memoriSpeaking = false;
+                emitEndSpeakEvent();
               } else if ((audioContext.state as string) === 'interrupted') {
+                console.log('interrupted');
+                stopProcessing();
+                resetVisemeQueue();
+
                 audioContext.resume();
               }
             };
-
-            audioContext.resume();
-
-            if (speechSynthesizer) {
-              speechSynthesizer.close();
-              speechSynthesizer = null;
-            }
           } catch (e) {
             console.warn('speak error: ', e);
             window.speechSynthesis.speak(new SpeechSynthesisUtterance(text));
-            clearVisemes();
             setIsPlayingAudio(false);
             memoriSpeaking = false;
+            stopProcessing();
+            resetVisemeQueue();
 
             if (speechSynthesizer) {
               speechSynthesizer.close();
@@ -2042,7 +2044,8 @@ const MemoriWidget = ({
           }
         } else {
           audioContext.resume();
-          clearVisemes();
+          stopProcessing();
+          resetVisemeQueue();
           setIsPlayingAudio(false);
           memoriSpeaking = false;
           emitEndSpeakEvent();
@@ -2053,6 +2056,8 @@ const MemoriWidget = ({
         window.speechSynthesis.speak(new SpeechSynthesisUtterance(text));
         setIsPlayingAudio(false);
         memoriSpeaking = false;
+        stopProcessing();
+        resetVisemeQueue();
         emitEndSpeakEvent();
       }
     );
@@ -2994,7 +2999,9 @@ const MemoriWidget = ({
 
   const showFullHistory =
     showOnlyLastMessages === undefined
-      ? layout !== 'TOTEM' && layout !== 'WEBSITE_ASSISTANT'
+      ? layout !== 'TOTEM' &&
+        layout !== 'WEBSITE_ASSISTANT' &&
+        layout !== 'HIDDEN_CHAT'
       : !showOnlyLastMessages;
 
   const headerProps: HeaderProps = {

package/src/components/layouts/ZoomedFullBody.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useCallback } from 'react';
+import React from 'react';
 import Spin from '../ui/Spin';
 import { LayoutProps } from '../MemoriWidget/MemoriWidget';
 
@@ -21,20 +21,15 @@ const ZoomedFullBodyLayout: React.FC<LayoutProps> = ({
   loading = false,
   poweredBy,
 }) => {
-  useEffect(() => {
-    document.body.style.overflow = 'hidden';
-    return () => {
-      document.body.style.overflow = '';
-    };
-  }, []);
-
   return (
     <>
       {integrationStyle}
       {integrationBackground}
 
-      <Spin className="memori-spin--zoomed-full-body"  spinning={loading}>
-        {showInstruct && ChangeMode && changeModeProps && <ChangeMode {...changeModeProps} />}
+      <Spin className="memori-spin--zoomed-full-body" spinning={loading}>
+        {showInstruct && ChangeMode && changeModeProps && (
+          <ChangeMode {...changeModeProps} />
+        )}
 
         {Header && headerProps && <Header {...headerProps} />}
 
@@ -61,4 +56,4 @@ const ZoomedFullBodyLayout: React.FC<LayoutProps> = ({
   );
 };
 
-export default ZoomedFullBodyLayout;
+export default ZoomedFullBodyLayout;

package/src/components/layouts/zoomed-full-body.css

@@ -13,4 +13,8 @@
 
 .memori--grid-column--zoomed-full-body {
     max-height: calc(100% - 80px) !important;
-}
+}
+
+.memori.memori-widget.memori-layout-zoomed_full_body .memori--grid {
+    height: calc(100% - 25px);
+}