@memori.ai/memori-react 7.6.0 → 7.7.0

package/dist/components/Avatar/AvatarView/index.d.ts

@@ -17,7 +17,9 @@ export interface Props {
     isZoomed?: boolean;
     chatEmission?: any;
     setMeshRef?: any;
-    clearVisemes: () => void;
-    setEmotion: (emotion: string) => void;
+    updateCurrentViseme: (currentTime: number) => {
+        name: string;
+        weight: number;
+    } | null;
 }
-export default function ContainerAvatarView({ url, sex, style, rotateAvatar, eyeBlink, headMovement, speaking, fallback, fallbackImg, halfBody, loading, animation, showControls, isZoomed, chatEmission, setMeshRef, clearVisemes, setEmotion, }: Props): JSX.Element;
+export default function ContainerAvatarView({ url, sex, style, rotateAvatar, eyeBlink, headMovement, speaking, fallback, fallbackImg, halfBody, loading, animation, showControls, isZoomed, chatEmission, updateCurrentViseme, }: Props): JSX.Element;

package/dist/components/Avatar/AvatarView/index.js

@@ -34,8 +34,8 @@ const getCameraSettings = (halfBody, isZoomed) => halfBody
         }
         : { fov: 40, position: [0, 0.0000175, 3] };
 const getLightingComponent = () => (0, utils_1.isAndroid)() || (0, utils_1.isiOS)() ? ((0, jsx_runtime_1.jsx)(drei_1.SpotLight, { distance: 100, position: [-0.3, 0.2, 1.25], angle: Math.PI / 2, attenuation: 5, anglePower: 5 })) : ((0, jsx_runtime_1.jsx)(drei_1.Environment, { files: "https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/venice_sunset_1k.hdr" }));
-function ContainerAvatarView({ url, sex, style, rotateAvatar, eyeBlink, headMovement, speaking, fallback, fallbackImg, halfBody = true, loading, animation, showControls = false, isZoomed, chatEmission, setMeshRef, clearVisemes, setEmotion, }) {
-    return ((0, jsx_runtime_1.jsx)(fiber_1.Canvas, { style: style || (halfBody ? defaultStyles.halfBody : defaultStyles.fullBody), camera: getCameraSettings(halfBody, isZoomed), children: (0, jsx_runtime_1.jsxs)(react_1.Suspense, { fallback: fallback || (0, jsx_runtime_1.jsx)(loader_1.default, { fallbackImg: fallbackImg }), children: [getLightingComponent(), rotateAvatar && (0, jsx_runtime_1.jsx)(drei_1.OrbitControls, { enablePan: false, enableZoom: false }), (0, jsx_runtime_1.jsx)(avatarComponent_1.AvatarView, { url: url, sex: sex, showControls: showControls, loading: loading || false, animation: animation, isZoomed: isZoomed || false, eyeBlink: eyeBlink || false, headMovement: headMovement || false, speaking: speaking || false, halfBody: halfBody || false, chatEmission: chatEmission, setMeshRef: setMeshRef, clearVisemes: clearVisemes, setEmotion: setEmotion })] }) }));
+function ContainerAvatarView({ url, sex, style, rotateAvatar, eyeBlink, headMovement, speaking, fallback, fallbackImg, halfBody = true, loading, animation, showControls = false, isZoomed, chatEmission, updateCurrentViseme, }) {
+    return ((0, jsx_runtime_1.jsx)(fiber_1.Canvas, { style: style || (halfBody ? defaultStyles.halfBody : defaultStyles.fullBody), camera: getCameraSettings(halfBody, isZoomed), children: (0, jsx_runtime_1.jsxs)(react_1.Suspense, { fallback: fallback || (0, jsx_runtime_1.jsx)(loader_1.default, { fallbackImg: fallbackImg }), children: [getLightingComponent(), rotateAvatar && (0, jsx_runtime_1.jsx)(drei_1.OrbitControls, { enablePan: false, enableZoom: false }), (0, jsx_runtime_1.jsx)(avatarComponent_1.AvatarView, { url: url, sex: sex, showControls: showControls, loading: loading || false, animation: animation, isZoomed: isZoomed || false, eyeBlink: eyeBlink || false, headMovement: headMovement || false, speaking: speaking || false, halfBody: halfBody || false, chatEmission: chatEmission, updateCurrentViseme: updateCurrentViseme })] }) }));
 }
 exports.default = ContainerAvatarView;
 //# sourceMappingURL=index.js.map

package/dist/components/Avatar/AvatarView/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Avatar/AvatarView/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Avatar/AvatarView/index.tsx"],"names":[],"mappings":";;;;AACA,iCAAwC;AACxC,8CAA4C;AAC5C,4CAA0E;AAC1E,kDAA0D;AAC1D,uEAA6D;AAC7D,yFAAyD;AAsBzD,MAAM,aAAa,GAAG;IACpB,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,SAAS,EAAE,OAAO;QAClB,eAAe,EAAE,OAAO;QACxB,YAAY,EAAE,MAAM;KACrB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,OAAO;QACf,eAAe,EAAE,OAAO;KACzB;CACF,CAAC;AAGF,MAAM,iBAAiB,GAAG,CAAC,QAAiB,EAAE,QAAkB,EAAE,EAAE,CAClE,QAAQ;IACN,CAAC,CAAC;QACE,GAAG,EAAE,EAAE;QACP,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC;KACtB;IACH,CAAC,CAAC,CAAC,QAAQ,IAAI,QAAQ;QACvB,CAAC,CAAC;YAEE,GAAG,EAAE,EAAE;YACP,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC;SACvB;QACH,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC;AAE/C,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAChC,IAAA,iBAAS,GAAE,IAAI,IAAA,aAAK,GAAE,CAAC,CAAC,CAAC,CACvB,uBAAC,gBAAS,IACR,QAAQ,EAAE,GAAG,EACb,QAAQ,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,EAC3B,KAAK,EAAE,IAAI,CAAC,EAAE,GAAG,CAAC,EAClB,WAAW,EAAE,CAAC,EACd,UAAU,EAAE,CAAC,GACb,CACH,CAAC,CAAC,CAAC,CACF,uBAAC,kBAAW,IAAC,KAAK,EAAC,+GAA+G,GAAG,CACtI,CAAC;AAIJ,SAAwB,mBAAmB,CAAC,EAC1C,GAAG,EACH,GAAG,EACH,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,QAAQ,GAAG,IAAI,EACf,OAAO,EACP,SAAS,EACT,YAAY,GAAG,KAAK,EACpB,QAAQ,EACR,YAAY,EACZ,mBAAmB,GACb;IACN,OAAO,CACL,uBAAC,cAAM,IACL,KAAK,EACH,KAAK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,EAEvE,MAAM,EAAE,iBAAiB,CAAC,QAAQ,EAAE,QAAQ,CAAQ,YAEpD,wBAAC,gBAAQ,IAAC,QAAQ,EAAE,QAAQ,IAAI,uBAAC,gBAAM,IAAC,WAAW,EAAE,WAAW,GAAI,aACjE,oBAAoB,EAAE,EACtB,YAAY,IAAI,uBAAC,oBAAa,IAAC,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,GAAI,EACvE,uBAAC,4BAAU,IACT,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,IAAI,KAAK,EACzB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,IAAI,KAAK,EAC3B,QAAQ,EAAE,QAAQ,IAAI,KAAK,EAC3B,YAAY,EAAE,YAAY,IAAI,KAAK,EACnC,QAAQ,EAAE,QAAQ,IAAI,KAAK,EAC3B,QAAQ,EAAE,QAAQ,IAAI,KAAK,EAC3B,YAAY,EAAE,YAAY,EAC1B,mBAAmB,EAAE,mBAAmB,GACxC,IACO,GACJ,CACV,CAAC;AACJ,CAAC;AA7CD,sCA6CC"}

package/dist/components/MemoriWidget/MemoriWidget.js

@@ -219,7 +219,11 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
     const [isPlayingAudio, setIsPlayingAudio] = (0, react_1.useState)(false);
     const [controlsPosition, setControlsPosition] = (0, react_1.useState)('center');
     const [hideEmissions, setHideEmissions] = (0, react_1.useState)(false);
-    const { addVisemeToQueue, processVisemeQueue, clearVisemes, emotion, getAzureStyleForEmotion, } = (0, visemeContext_1.useViseme)();
+    const { startProcessing, stopProcessing, addViseme, resetVisemeQueue, isProcessing, } = (0, visemeContext_1.useViseme)();
+    const audioContextRef = (0, react_1.useRef)(null);
+    const speechSynthesizerRef = (0, react_1.useRef)(null);
+    const audioDestinationRef = (0, react_1.useRef)(null);
+    const currentSpeechRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         setIsPlayingAudio(!!speechSynthesizer);
         memoriSpeaking = !!speechSynthesizer;
@@ -1246,16 +1250,43 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         const e = new CustomEvent('MemoriEndSpeak');
         document.dispatchEvent(e);
     };
-    const speak = (text) => {
+    const initializeAudioContext = (0, react_1.useCallback)(() => {
+        if (!audioContextRef.current || audioContextRef.current.state === 'closed') {
+            audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)();
+        }
+        return audioContextRef.current;
+    }, []);
+    const initializeSpeechSynthesizer = (0, react_1.useCallback)((audioConfig) => {
+        if (!speechSynthesizerRef.current && AZURE_COGNITIVE_SERVICES_TTS_KEY) {
+            const speechConfig = speechSdk.SpeechConfig.fromSubscription(AZURE_COGNITIVE_SERVICES_TTS_KEY, 'eastus');
+            speechSynthesizerRef.current = new speechSdk.SpeechSynthesizer(speechConfig, audioConfig);
+        }
+        return speechSynthesizerRef.current;
+    }, []);
+    const stopCurrentSpeech = (0, react_1.useCallback)(() => {
+        if (currentSpeechRef.current) {
+            currentSpeechRef.current.cancel();
+            currentSpeechRef.current = null;
+        }
+        if (audioContextRef.current) {
+            audioContextRef.current.suspend();
+        }
+        if (audioDestinationRef.current) {
+            audioDestinationRef.current.pause();
+        }
+        setIsPlayingAudio(false);
+        stopProcessing();
+        resetVisemeQueue();
+    }, []);
+    const speak = (0, react_1.useCallback)(async (text) => {
         if (!AZURE_COGNITIVE_SERVICES_TTS_KEY || preview) {
             emitEndSpeakEvent();
             return;
         }
         stopListening();
-        if (preview)
-            return;
-        if (muteSpeaker || speakerMuted) {
-            memoriSpeaking = false;
+        stopCurrentSpeech();
+        if (preview || muteSpeaker || speakerMuted) {
+            setIsPlayingAudio(false);
             setMemoriTyping(false);
             emitEndSpeakEvent();
             if (continuousSpeech) {
@@ -1263,136 +1294,98 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             }
             return;
         }
-        if (audioDestination)
-            audioDestination.pause();
-        let isSafari = window.navigator.userAgent.includes('Safari') &&
-            !window.navigator.userAgent.includes('Chrome');
-        let isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
-        if (audioContext.state === 'interrupted') {
-            audioContext.resume().then(() => speak(text));
-            return;
-        }
-        if (audioContext.state === 'closed') {
-            audioContext = new standardized_audio_context_1.AudioContext();
-            let buffer = audioContext.createBuffer(1, 10000, 22050);
-            let source = audioContext.createBufferSource();
-            source.buffer = buffer;
-            source.connect(audioContext.destination);
-        }
-        else if (audioContext.state === 'suspended') {
-            stopAudio();
-            audioContext = new standardized_audio_context_1.AudioContext();
-            let buffer = audioContext.createBuffer(1, 10000, 22050);
-            let source = audioContext.createBufferSource();
-            source.buffer = buffer;
-            source.connect(audioContext.destination);
-        }
-        if (!speechSynthesizer) {
-            if (!isIOS) {
-                audioDestination = new speechSdk.SpeakerAudioDestination();
+        try {
+            const audioContext = initializeAudioContext();
+            await audioContext.resume();
+            if (!audioDestinationRef.current) {
+                audioDestinationRef.current = new speechSdk.SpeakerAudioDestination();
             }
-            let audioConfig = speechSdk.AudioConfig.fromSpeakerOutput(audioDestination);
-            speechSynthesizer = new speechSdk.SpeechSynthesizer(speechConfig, audioConfig);
-        }
-        const source = audioContext.createBufferSource();
-        source.addEventListener('ended', () => {
-            setIsPlayingAudio(false);
-            memoriSpeaking = false;
-        });
-        audioDestination.onAudioEnd = () => {
-            setIsPlayingAudio(false);
-            memoriSpeaking = false;
-            source.disconnect();
-            emitEndSpeakEvent();
-            onEndSpeakStartListen();
-        };
-        clearVisemes();
-        speechSynthesizer.visemeReceived = function (_, e) {
-            addVisemeToQueue({
-                visemeId: e.visemeId,
-                audioOffset: e.audioOffset,
+            const audioConfig = speechSdk.AudioConfig.fromSpeakerOutput(audioDestinationRef.current);
+            const speechSynthesizer = initializeSpeechSynthesizer(audioConfig);
+            if (speechSynthesizer) {
+                speechSynthesizer.visemeReceived = (_, e) => {
+                    addViseme(e.visemeId, e.audioOffset);
+                    console.log('viseme added');
+                };
+            }
+            startProcessing();
+            const textToSpeak = (0, utils_1.escapeHTML)((0, utils_1.stripMarkdown)((0, utils_1.stripEmojis)((0, utils_1.stripHTML)((0, utils_1.stripOutputTags)(text)))));
+            const ssml = `
+        <speak version="1.0" 
+               xmlns="http://www.w3.org/2001/10/synthesis" 
+               xmlns:mstts="https://www.w3.org/2001/mstts" 
+               xml:lang="${getCultureCodeByLanguage(userLang)}">
+          <voice name="${getTTSVoice(userLang)}">
+              <s>${replaceTextWithPhonemes(textToSpeak, userLang.toLowerCase())}</s>
+          </voice>
+        </speak>
+      `;
+            const speakPromise = new Promise((resolve, reject) => {
+                speechSynthesizer === null || speechSynthesizer === void 0 ? void 0 : speechSynthesizer.speakSsmlAsync(ssml, result => resolve(result), error => reject(error));
             });
-        };
-        const textToSpeak = (0, utils_1.escapeHTML)((0, utils_1.stripMarkdown)((0, utils_1.stripEmojis)((0, utils_1.stripHTML)((0, utils_1.stripOutputTags)(text)))));
-        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)}"><mstts:express-as style="${getAzureStyleForEmotion(emotion)}"><s>${replaceTextWithPhonemes(textToSpeak, userLang.toLowerCase())}</s></mstts:express-as></voice></speak>`, result => {
-            if (result) {
-                setIsPlayingAudio(true);
-                memoriSpeaking = true;
-                processVisemeQueue();
-                try {
-                    audioContext.decodeAudioData(result.audioData, function (buffer) {
-                        source.buffer = buffer;
-                        source.connect(audioContext.destination);
-                        if (history.length < 1 || (isSafari && isIOS)) {
-                            source.start(0);
-                        }
-                    });
-                    audioContext.onstatechange = () => {
-                        if (audioContext.state === 'suspended' ||
-                            audioContext.state === 'closed') {
-                            source.disconnect();
-                            setIsPlayingAudio(false);
-                            memoriSpeaking = false;
-                        }
-                        else if (audioContext.state === 'interrupted') {
-                            audioContext.resume();
-                        }
-                    };
-                    audioContext.resume();
-                    if (speechSynthesizer) {
-                        speechSynthesizer.close();
-                        speechSynthesizer = null;
-                    }
+            currentSpeechRef.current = {
+                cancel: () => {
+                    var _a;
+                    speechSynthesizer === null || speechSynthesizer === void 0 ? void 0 : speechSynthesizer.close();
+                    (_a = audioDestinationRef.current) === null || _a === void 0 ? void 0 : _a.pause();
                 }
-                catch (e) {
-                    console.warn('speak error: ', e);
-                    window.speechSynthesis.speak(new SpeechSynthesisUtterance(text));
-                    clearVisemes();
+            };
+            const result = await speakPromise;
+            setIsPlayingAudio(true);
+            if (audioContext && result) {
+                const audioBuffer = await audioContext.decodeAudioData(result.audioData);
+                const source = audioContext.createBufferSource();
+                source.buffer = audioBuffer;
+                source.connect(audioContext.destination);
+                source.onended = () => {
                     setIsPlayingAudio(false);
-                    memoriSpeaking = false;
-                    if (speechSynthesizer) {
-                        speechSynthesizer.close();
-                        speechSynthesizer = null;
-                    }
+                    stopProcessing();
+                    resetVisemeQueue();
+                    currentSpeechRef.current = null;
                     emitEndSpeakEvent();
-                }
+                    onEndSpeakStartListen();
+                };
+                await audioContext.resume();
+                source.start(0);
             }
             else {
-                audioContext.resume();
-                clearVisemes();
-                setIsPlayingAudio(false);
-                memoriSpeaking = false;
-                emitEndSpeakEvent();
+                stopProcessing();
+                resetVisemeQueue();
+                throw new Error('No result from speech synthesis');
             }
-        }, error => {
-            console.error('speak:', error);
-            window.speechSynthesis.speak(new SpeechSynthesisUtterance(text));
-            setIsPlayingAudio(false);
-            memoriSpeaking = false;
-            emitEndSpeakEvent();
-        });
-        setMemoriTyping(false);
-    };
-    const stopAudio = () => {
+        }
+        catch (error) {
+            console.error('Speech synthesis error:', error);
+            stopProcessing();
+            resetVisemeQueue();
+            const utterance = new SpeechSynthesisUtterance(text);
+            window.speechSynthesis.speak(utterance);
+        }
+        finally {
+            setMemoriTyping(false);
+        }
+    }, [initializeAudioContext, initializeSpeechSynthesizer, stopCurrentSpeech]);
+    const stopAudio = (0, react_1.useCallback)(() => {
         setIsPlayingAudio(false);
         memoriSpeaking = false;
         try {
-            if (speechSynthesizer) {
-                speechSynthesizer.close();
-                speechSynthesizer = null;
+            if (speechSynthesizerRef.current) {
+                speechSynthesizerRef.current.close();
+                speechSynthesizerRef.current = null;
             }
-            if (audioContext.state !== 'closed') {
-                audioContext.close();
+            if (audioContextRef.current && audioContextRef.current.state !== 'closed') {
+                audioContextRef.current.close();
             }
-            if (audioDestination) {
-                audioDestination.pause();
-                audioDestination.close();
+            if (audioDestinationRef.current) {
+                audioDestinationRef.current.pause();
+                audioDestinationRef.current.close();
             }
+            stopCurrentSpeech();
         }
         catch (e) {
             console.debug('stopAudio error: ', e);
         }
-    };
+    }, [stopCurrentSpeech]);
     (0, react_1.useEffect)(() => {
         let textarea = document.querySelector('#chat-fieldset textarea');
         if (textarea)
@@ -1525,6 +1518,12 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
     (0, react_1.useEffect)(() => {
         return () => {
             resetUIEffects();
+            if (speechSynthesizerRef.current) {
+                speechSynthesizerRef.current.close();
+            }
+            if (audioContextRef.current) {
+                audioContextRef.current.close();
+            }
         };
     }, []);
     (0, react_1.useEffect)(() => {