@memori.ai/memori-react 7.34.2 → 8.0.0-rc.1

package/esm/components/MemoriWidget/MemoriWidget.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, useRef, } from 'react';
+import { useState, useEffect, useCallback, useRef, useMemo, } from 'react';
 import { useTranslation } from 'react-i18next';
 import memoriApiClient from '@memori.ai/memori-api-client';
 import { AudioContext } from 'standardized-audio-context';
@@ -29,11 +29,14 @@ import HiddenChatLayout from '../layouts/HiddenChat';
 import ZoomedFullBodyLayout from '../layouts/ZoomedFullBody';
 import { getTranslation } from '../../helpers/translations';
 import { setLocalConfig, getLocalConfig, removeLocalConfig, } from '../../helpers/configuration';
-import { hasTouchscreen, stripDuplicates, stripEmojis, escapeHTML, stripMarkdown, stripOutputTags, stripHTML, installMathJax, stripReasoningTags, } from '../../helpers/utils';
+import { hasTouchscreen, stripDuplicates, installMathJax, } from '../../helpers/utils';
+import { getTTSVoice } from '../../helpers/tts/ttsVoiceUtility';
 import { allowedMediaTypes, anonTag, uiLanguages, } from '../../helpers/constants';
 import { getErrori18nKey } from '../../helpers/error';
 import { getCredits } from '../../helpers/credits';
-import { useViseme } from '../../context/visemeContext';
+import { sanitizeText } from '../../helpers/sanitizer';
+import { useTTS } from '../../helpers/tts/useTTS';
+import Alert from '../ui/Alert';
 import ChatHistoryDrawer from '../ChatHistoryDrawer/ChatHistory';
 const getMemoriState = (integrationId) => {
     var _a, _b, _c, _d, _f;
@@ -151,14 +154,11 @@ window.typeMessageHidden = typeMessageHidden;
 window.typeBatchMessages = typeBatchMessages;
 let recognizer;
 let speechConfig;
-let speechSynthesizer;
 let audioDestination;
 let audioContext;
 let memoriPassword;
-let speakerMuted = false;
-let memoriSpeaking = false;
 let userToken;
-const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenantID, memoriLang, multilingual, integration, layout, customLayout, showShare, preview = false, embed = false, showCopyButton = true, showTranslationOriginal = false, showInputs = true, showDates = false, showContextPerLine = false, showSettings, showTypingText = false, showClear = false, showLogin = false, showUpload, showOnlyLastMessages, showChatHistory, showReasoning, height = '100vh', secret, baseUrl = 'https://aisuru.com', apiURL = 'https://backend-staging.memori.ai', engineURL = 'https://engine-staging.memori.ai', initialContextVars, initialQuestion, ogImage, sessionID: initialSessionID, tenant, personification, authToken, AZURE_COGNITIVE_SERVICES_TTS_KEY, enableAudio, defaultSpeakerActive = true, disableTextEnteredEvents = false, onStateChange, additionalInfo, additionalSettings, customMediaRenderer, userAvatar, useMathFormatting = false, autoStart = false, applyVarsToRoot = false, showFunctionCache = false, }) => {
+const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenantID, memoriLang, multilingual, integration, layout, customLayout, showShare, preview = false, embed = false, showCopyButton = true, showTranslationOriginal = false, showInputs = true, showDates = false, showContextPerLine = false, showSettings, showTypingText = false, showClear = false, showLogin = false, showUpload, showOnlyLastMessages, showChatHistory, showReasoning, height = '100vh', secret, baseUrl = 'https://aisuru.com', apiURL = 'https://backend-staging.memori.ai', engineURL = 'https://engine-staging.memori.ai', initialContextVars, initialQuestion, ttsProvider, ogImage, sessionID: initialSessionID, tenant, personification, authToken, enableAudio, defaultSpeakerActive = true, disableTextEnteredEvents = false, onStateChange, additionalInfo, additionalSettings, customMediaRenderer, userAvatar, useMathFormatting = false, autoStart = false, applyVarsToRoot = false, showFunctionCache = false, }) => {
     var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
     const { t, i18n } = useTranslation();
     const [isClient, setIsClient] = useState(false);
@@ -224,25 +224,23 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
     const [typingText, setTypingText] = useState();
     const selectedLayout = layout || (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.layout) || 'DEFAULT';
     const defaultEnableAudio = (_p = enableAudio !== null && enableAudio !== void 0 ? enableAudio : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.enableAudio) !== null && _p !== void 0 ? _p : false;
-    const [hasUserActivatedSpeak, setHasUserActivatedSpeak] = useState(false);
     const [hasUserActivatedListening, setHasUserActivatedListening] = useState(false);
     const [showPositionDrawer, setShowPositionDrawer] = useState(false);
     const [showSettingsDrawer, setShowSettingsDrawer] = useState(false);
     const [showChatHistoryDrawer, setShowChatHistoryDrawer] = useState(false);
     const [showKnownFactsDrawer, setShowKnownFactsDrawer] = useState(false);
     const [showExpertsDrawer, setShowExpertsDrawer] = useState(false);
-    const [muteSpeaker, setMuteSpeaker] = useState(!defaultEnableAudio || !defaultSpeakerActive || autoStart);
     const [continuousSpeech, setContinuousSpeech] = useState(false);
     const [continuousSpeechTimeout, setContinuousSpeechTimeout] = useState(2);
-    const [isPlayingAudio, setIsPlayingAudio] = useState(false);
     const [controlsPosition, setControlsPosition] = useState('center');
     const [enablePositionControls, setEnablePositionControls] = useState(false);
     const [avatarType, setAvatarType] = useState(null);
     const [hideEmissions, setHideEmissions] = useState(false);
-    const { startProcessing, setAudioContext, addViseme, stopProcessing, resetVisemeQueue, } = useViseme();
+    const speechSynthesizerRef = useRef(null);
+    const [memoriSpeaking, setMemoriSpeaking] = useState(false);
     useEffect(() => {
-        memoriSpeaking = !!speechSynthesizer;
-    }, [speechSynthesizer]);
+        setMemoriSpeaking(!!speechSynthesizerRef.current);
+    }, [speechSynthesizerRef.current]);
     useEffect(() => {
         let defaultControlsPosition = 'bottom';
         let microphoneMode = getLocalConfig('microphoneMode', 'HOLD_TO_TALK');
@@ -257,11 +255,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         else {
             defaultControlsPosition = 'bottom';
         }
-        const muteSpeaker = autoStart ||
-            getLocalConfig('muteSpeaker', !defaultEnableAudio || !defaultSpeakerActive || autoStart);
-        setMuteSpeaker(muteSpeaker);
-        speakerMuted = muteSpeaker;
-        setContinuousSpeech(muteSpeaker ? false : microphoneMode === 'CONTINUOUS');
+        setContinuousSpeech(speakerMuted ? false : microphoneMode === 'CONTINUOUS');
         setContinuousSpeechTimeout(getLocalConfig('continuousSpeechTimeout', 2));
         setControlsPosition(getLocalConfig('controlsPosition', defaultControlsPosition));
         setAvatarType(getLocalConfig('avatarType', 'avatar3d'));
@@ -396,7 +390,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                     translateDialogState(currentState, userLang, msg).then(ts => {
                         let text = ts.translatedEmission || ts.emission;
                         if (text) {
-                            speak(text);
+                            handleSpeak(text);
                         }
                     });
                 }
@@ -422,7 +416,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                             tag: currentState.currentTag,
                             memoryTags: currentState.memoryTags,
                         });
-                        speak(emission);
+                        handleSpeak(emission);
                     }
                 }
             }
@@ -1016,6 +1010,44 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             timeoutRef.current = undefined;
         }
     };
+    useEffect(() => {
+        return () => {
+            setHasUserActivatedSpeak(false);
+            setClickedStart(false);
+            clearInteractionTimeout();
+            timeoutRef.current = undefined;
+        };
+    }, []);
+    const [requestedListening, setRequestedListening] = useState(false);
+    const onEndSpeakStartListen = useCallback((_e) => {
+        if (isPlayingAudio && speechSynthesizerRef.current) {
+            speechSynthesizerRef.current.close();
+            speechSynthesizerRef.current = null;
+        }
+        if (continuousSpeech &&
+            (hasUserActivatedListening || !requestedListening)) {
+            setRequestedListening(true);
+            startListening();
+        }
+    }, [continuousSpeech, hasUserActivatedListening]);
+    const audioPlaybackOptions = useMemo(() => ({
+        apiUrl: apiURL,
+        continuousSpeech: continuousSpeech,
+        onEndSpeakStartListen: onEndSpeakStartListen,
+        preview: preview,
+    }), [apiURL, continuousSpeech, preview, onEndSpeakStartListen]);
+    console.log('tenantID', tenantID);
+    const ttsConfig = useMemo(() => {
+        var _a, _b;
+        return ({
+            provider: ttsProvider,
+            voice: getTTSVoice(userLang || ((_b = (_a = memori.culture) === null || _a === void 0 ? void 0 : _a.split('-')) === null || _b === void 0 ? void 0 : _b[0]) || 'EN', ttsProvider, memori.voiceType),
+            tenant: tenantID,
+            region: 'westeurope',
+            voiceType: memori.voiceType
+        });
+    }, [ttsProvider, userLang, memori.culture, memori.voiceType]);
+    const { speak: ttsSpeak, stop: ttsStop, isPlaying: isPlayingAudio, speakerMuted, toggleMute, hasUserActivatedSpeak, setHasUserActivatedSpeak, error, setError, } = useTTS(ttsConfig, audioPlaybackOptions, autoStart, defaultEnableAudio, defaultSpeakerActive);
     const resetInteractionTimeout = () => {
         clearInteractionTimeout();
         if (!isPlayingAudio && !userMessage.length && !memoriTyping && !listening)
@@ -1044,7 +1076,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                     translateDialogState({ ...currentState, emission: emission }, userLang).then(ts => {
                         let text = ts.translatedEmission || ts.emission;
                         if (text) {
-                            speak(text);
+                            handleSpeak(text);
                         }
                     });
                 }
@@ -1064,7 +1096,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                         tag: currentState.currentTag,
                         memoryTags: currentState.memoryTags,
                     });
-                    speak(emission);
+                    handleSpeak(emission);
                     setCurrentDialogState({
                         ...currentState,
                         hints: (_b = currentState.hints) !== null && _b !== void 0 ? _b : (currentState.state === 'G1' ? currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.hints : []),
@@ -1117,97 +1149,6 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         memoriTyping,
         hasUserActivatedSpeak,
     ]);
-    useEffect(() => {
-        return () => {
-            setHasUserActivatedSpeak(false);
-            setClickedStart(false);
-            clearInteractionTimeout();
-            timeoutRef.current = undefined;
-        };
-    }, []);
-    const initializeTTS = () => {
-        if (!AZURE_COGNITIVE_SERVICES_TTS_KEY)
-            return;
-        speechConfig = speechSdk.SpeechConfig.fromSubscription(AZURE_COGNITIVE_SERVICES_TTS_KEY, 'westeurope');
-        speechConfig.speechSynthesisLanguage = getCultureCodeByLanguage(userLang);
-        speechConfig.speechSynthesisVoiceName = getTTSVoice(userLang);
-        speechConfig.speechRecognitionLanguage = getCultureCodeByLanguage(userLang);
-        speechConfig.setProperty('speechSynthesis.outputFormat', 'viseme');
-        if (hasTouchscreen())
-            speechConfig.speechSynthesisOutputFormat =
-                speechSdk.SpeechSynthesisOutputFormat.Audio16Khz32KBitRateMonoMp3;
-        audioContext = new AudioContext();
-        let buffer = audioContext.createBuffer(1, 10000, 22050);
-        let source = audioContext.createBufferSource();
-        source.buffer = buffer;
-        source.connect(audioContext.destination);
-        audioDestination = new speechSdk.SpeakerAudioDestination();
-        let audioConfig = speechSdk.AudioConfig.fromSpeakerOutput(audioDestination);
-        speechSynthesizer = new speechSdk.SpeechSynthesizer(speechConfig, audioConfig);
-    };
-    const getTTSVoice = useCallback((lang) => {
-        var _a, _b, _c, _d;
-        let voice = '';
-        let voiceLang = ((_d = (_c = lang !== null && lang !== void 0 ? lang : (_b = (_a = memori.culture) === null || _a === void 0 ? void 0 : _a.split('-')) === null || _b === void 0 ? void 0 : _b[0]) !== null && _c !== void 0 ? _c : i18n.language) !== null && _d !== void 0 ? _d : 'IT').toUpperCase();
-        let voiceType = memori.voiceType;
-        if (memori.enableBoardOfExperts && (currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.emitter)) {
-            let expert = experts === null || experts === void 0 ? void 0 : experts.find(e => e.name === (currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.emitter));
-        }
-        switch (voiceLang) {
-            case 'IT':
-                voice = `${voiceType === 'MALE' ? 'it-IT-DiegoNeural' : 'it-IT-ElsaNeural'}`;
-                break;
-            case 'DE':
-                voice = `${voiceType === 'MALE' ? 'de-DE-ConradNeural' : 'de-DE-KatjaNeural'}`;
-                break;
-            case 'EN':
-                voice = `${voiceType === 'MALE' ? 'en-GB-RyanNeural' : 'en-GB-SoniaNeural'}`;
-                break;
-            case 'ES':
-                voice = `${voiceType === 'MALE' ? 'es-ES-AlvaroNeural' : 'es-ES-ElviraNeural'}`;
-                break;
-            case 'FR':
-                voice = `${voiceType === 'MALE' ? 'fr-FR-HenriNeural' : 'fr-FR-DeniseNeural'}`;
-                break;
-            case 'PT':
-                voice = `${voiceType === 'MALE' ? 'pt-PT-DuarteNeural' : 'pt-PT-RaquelNeural'}`;
-                break;
-            case 'UK':
-                voice = `${voiceType === 'MALE' ? 'uk-UA-OstapNeural' : 'uk-UA-PolinaNeural'}`;
-                break;
-            case 'RU':
-                voice = `${voiceType === 'MALE' ? 'ru-RU-DmitryNeural' : 'ru-RU-SvetlanaNeural'}`;
-                break;
-            case 'PL':
-                voice = `${voiceType === 'MALE' ? 'pl-PL-MarekNeural' : 'pl-PL-AgnieszkaNeural'}`;
-                break;
-            case 'FI':
-                voice = `${voiceType === 'MALE' ? 'fi-FI-HarriNeural' : 'fi-FI-SelmaNeural'}`;
-                break;
-            case 'EL':
-                voice = `${voiceType === 'MALE' ? 'el-GR-NestorasNeural' : 'el-GR-AthinaNeural'}`;
-                break;
-            case 'AR':
-                voice = `${voiceType === 'MALE' ? 'ar-SA-HamedNeural' : 'ar-SA-ZariyahNeural'}`;
-                break;
-            case 'ZH':
-                voice = `${voiceType === 'MALE' ? 'zh-CN-YunxiNeural' : 'zh-CN-XiaoxiaoNeural'}`;
-                break;
-            case 'JA':
-                voice = `${voiceType === 'MALE' ? 'ja-JP-KeitaNeural' : 'ja-JP-NanamiNeural'}`;
-                break;
-            default:
-                voice = `${voiceType === 'MALE' ? 'it-IT-DiegoNeural' : 'it-IT-IsabellaNeural'}`;
-                break;
-        }
-        return voice;
-    }, [
-        memori.voiceType,
-        memori.enableBoardOfExperts,
-        currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.emitter,
-        i18n.language,
-        memori.culture,
-    ]);
     const getCultureCodeByLanguage = (lang) => {
         var _a, _b;
         let voice = '';
@@ -1264,185 +1205,58 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         }
         return voice;
     };
-    const [phonemesMap, setPhonemesMap] = useState();
-    const fetchLexiconJSON = async () => {
-        try {
-            const lexiconReq = await fetch(`${baseUrl || 'https://aisuru.com'}/api/lexiconmap`);
-            const lexicon = await lexiconReq.json();
-            return lexicon;
-        }
-        catch (err) {
-            console.error(err);
-        }
-    };
-    useEffect(() => {
-        fetchLexiconJSON().then(lexicon => {
-            setPhonemesMap(lexicon);
-        });
-    }, []);
-    const replaceTextWithPhonemes = (text, lang) => {
-        var _a;
-        if (!phonemesMap)
-            return text;
-        const phonemes = {
-            ...((_a = phonemesMap.common) !== null && _a !== void 0 ? _a : {}),
-            ...((tenant === null || tenant === void 0 ? void 0 : tenant.name) && phonemesMap[tenant.name]
-                ? phonemesMap[tenant.name]
-                : {}),
-        };
-        const phonemesPairs = Object.keys(phonemes).map(word => {
-            var _a;
-            const phoneme = (_a = phonemes[word][lang.toLowerCase()]) !== null && _a !== void 0 ? _a : phonemes[word].default;
-            return { word, phoneme, caseSensitive: phonemes[word].caseSensitive };
-        });
-        const ssmlText = phonemesPairs.reduce((acc, { word, phoneme, caseSensitive }) => {
-            return acc.replace(new RegExp(`\\b${word}\\b`, caseSensitive ? 'g' : 'gi'), `<phoneme alphabet="ipa" ph="${phoneme}">${word}</phoneme>`);
-        }, text);
-        return ssmlText;
-    };
-    const emitEndSpeakEvent = () => {
-        const e = new CustomEvent('MemoriEndSpeak');
-        document.dispatchEvent(e);
-    };
-    const speak = (text) => {
-        console.debug('speak called with text:', text);
-        if (!AZURE_COGNITIVE_SERVICES_TTS_KEY || preview) {
-            console.debug('No TTS key or preview mode, emitting end speak event');
-            emitEndSpeakEvent();
-            return;
-        }
-        console.debug('Stopping listening before speaking');
-        stopListening();
-        if (preview) {
-            console.debug('Preview mode, returning early');
-            return;
-        }
-        if (speakerMuted) {
-            console.debug('Speaker muted, skipping speech synthesis');
-            memoriSpeaking = false;
-            setMemoriTyping(false);
-            emitEndSpeakEvent();
+    const handleSpeak = async (text) => {
+        if (!text || preview || speakerMuted) {
+            const e = new CustomEvent('MemoriEndSpeak');
+            document.dispatchEvent(e);
             if (continuousSpeech) {
-                console.debug('Setting listening timeout for continuous speech');
                 setListeningTimeout();
             }
-            return;
-        }
-        if (audioDestination) {
-            console.debug('Pausing existing audio destination');
-            audioDestination.pause();
-        }
-        let isSafari = window.navigator.userAgent.includes('Safari') &&
-            !window.navigator.userAgent.includes('Chrome');
-        let isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
-        console.debug('Browser detection - Safari:', isSafari, 'iOS:', isIOS);
-        if (audioContext.state === 'interrupted') {
-            console.debug('Audio context interrupted, attempting resume');
-            audioContext.resume().then(() => speak(text));
-            return;
+            return Promise.resolve();
         }
-        if (audioContext.state === 'closed') {
-            console.debug('Audio context closed, creating new context');
-            audioContext = new AudioContext();
-            let buffer = audioContext.createBuffer(1, 10000, 22050);
-            let source = audioContext.createBufferSource();
-            source.buffer = buffer;
-            source.connect(audioContext.destination);
+        if (typeof stopListening === 'function') {
+            stopListening();
         }
-        else if (audioContext.state === 'suspended') {
-            console.debug('Audio context suspended, stopping audio and creating new context');
-            stopAudio();
-            audioContext = new AudioContext();
-            let buffer = audioContext.createBuffer(1, 10000, 22050);
-            let source = audioContext.createBufferSource();
-            source.buffer = buffer;
-            source.connect(audioContext.destination);
-        }
-        if (!speechSynthesizer) {
-            initializeTTS();
-        }
-        const source = audioContext.createBufferSource();
-        source.addEventListener('ended', () => {
-            console.debug('Audio source ended');
-            setIsPlayingAudio(false);
-            memoriSpeaking = false;
+        setMemoriTyping(true);
+        const processedText = sanitizeText(text);
+        return ttsSpeak(processedText)
+            .then(() => {
+            setMemoriTyping(false);
+        })
+            .catch(error => {
+            setMemoriTyping(false);
+            throw error;
         });
-        audioDestination.onAudioEnd = () => {
-            console.debug('Audio destination ended');
-            setIsPlayingAudio(false);
-            memoriSpeaking = false;
-            source.disconnect();
-            emitEndSpeakEvent();
-            onEndSpeakStartListen();
-        };
-        console.debug('Resetting viseme queue');
-        resetVisemeQueue();
-        if (speechSynthesizer) {
-            speechSynthesizer.visemeReceived = function (_, e) {
-                console.debug('Viseme received:', e.visemeId, 'at offset:', e.audioOffset);
-                addViseme(e.visemeId, e.audioOffset);
-            };
+    };
+    const translateAndSpeak = useCallback(async (dialogState, language, msg, skipEmission = false) => {
+        try {
+            if (!dialogState) {
+                console.warn('translateAndSpeak called with empty dialog state');
+                return null;
+            }
+            const translatedState = await translateDialogState(dialogState, language, msg, skipEmission);
+            const textToSpeak = translatedState.translatedEmission || translatedState.emission;
+            if (textToSpeak && !skipEmission) {
+                if (!hasUserActivatedSpeak) {
+                    setHasUserActivatedSpeak(true);
+                }
+                await handleSpeak(textToSpeak);
+            }
+            return translatedState;
         }
-        const textToSpeak = escapeHTML(stripMarkdown(stripEmojis(stripHTML(stripReasoningTags(stripOutputTags(text))))));
-        console.debug('Processed text to speak:', textToSpeak);
-        setTimeout(() => {
-            if (speechSynthesizer) {
-                console.debug('Starting speech synthesis');
-                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)}"><s>${replaceTextWithPhonemes(textToSpeak, userLang.toLowerCase())}</s></voice></speak>`, result => {
-                    if (result) {
-                        console.debug('Speech synthesis successful');
-                        setIsPlayingAudio(true);
-                        memoriSpeaking = true;
-                        startProcessing(audioContext);
-                        try {
-                            console.debug('Decoding audio data');
-                            audioContext.decodeAudioData(result.audioData, function (buffer) {
-                                console.debug('Audio data decoded successfully');
-                                source.buffer = buffer;
-                                source.connect(audioContext.destination);
-                                if (history.length < 1 || (isSafari && isIOS)) {
-                                    console.debug('Starting audio playback');
-                                    source.start(0);
-                                }
-                            });
-                            audioContext.onstatechange = () => {
-                                console.debug('Audio context state changed to:', audioContext.state);
-                                if (audioContext.state === 'suspended' ||
-                                    audioContext.state === 'closed') {
-                                    source.disconnect();
-                                    setIsPlayingAudio(false);
-                                    stopProcessing();
-                                    resetVisemeQueue();
-                                    memoriSpeaking = false;
-                                }
-                                else if (audioContext.state === 'interrupted') {
-                                    audioContext.resume();
-                                }
-                            };
-                            audioContext.resume();
-                            if (speechSynthesizer) {
-                                console.debug('Closing speech synthesizer');
-                                speechSynthesizer.close();
-                                speechSynthesizer = null;
-                            }
-                        }
-                        catch (error) {
-                            console.error('Error processing audio data:', error);
-                            handleFallback(text);
-                        }
-                    }
-                    else {
-                        console.debug('No result from speech synthesis, using fallback');
-                        handleFallback(text);
-                    }
-                }, error => {
-                    console.error('Speak error:', error);
-                    handleFallback(text);
-                });
+        catch (error) {
+            console.error('Error in translateAndSpeak:', error);
+            if (!hasUserActivatedSpeak) {
+                setHasUserActivatedSpeak(true);
             }
-        }, 100);
-        setMemoriTyping(false);
-    };
+            return dialogState;
+        }
+    }, [
+        translateDialogState,
+        handleSpeak,
+        hasUserActivatedSpeak,
+        setHasUserActivatedSpeak,
+    ]);
     const handleFallback = (text) => {
         window.speechSynthesis.speak(new SpeechSynthesisUtterance(text));
         cleanup();
@@ -1453,39 +1267,16 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             recognizer.close();
             recognizer = null;
         }
-        if (speechSynthesizer) {
-            speechSynthesizer.close();
-            speechSynthesizer = null;
+        if (speechSynthesizerRef.current) {
+            speechSynthesizerRef.current.close();
+            speechSynthesizerRef.current = null;
         }
         setListening(false);
         clearListeningTimeout();
     };
-    const stopAudio = async () => {
-        setIsPlayingAudio(false);
-        memoriSpeaking = false;
-        try {
-            if (speechSynthesizer) {
-                const currentSynthesizer = speechSynthesizer;
-                speechSynthesizer = null;
-                try {
-                    currentSynthesizer.close();
-                }
-                catch (e) {
-                    console.debug('Error closing speech synthesizer:', e);
-                }
-            }
-            if ((audioContext === null || audioContext === void 0 ? void 0 : audioContext.state) !== 'closed') {
-                audioContext.close();
-            }
-            if (audioDestination) {
-                audioDestination.pause();
-                audioDestination.close();
-            }
-        }
-        catch (e) {
-            console.debug('stopAudio error: ', e);
-        }
-    };
+    const stopAudio = useCallback(async () => {
+        ttsStop();
+    }, [ttsStop]);
     const focusChatInput = () => {
         let textarea = document.querySelector('#chat-fieldset textarea');
         if (textarea && enableFocusChatInput) {
@@ -1544,10 +1335,6 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
     let microphoneStream = null;
     const startListening = async () => {
         console.debug('Starting speech recognition...');
-        if (!AZURE_COGNITIVE_SERVICES_TTS_KEY) {
-            console.error('No TTS key available');
-            throw new Error('No TTS key available');
-        }
         if (!sessionId) {
             console.error('No session ID available');
             throw new Error('No session ID available');
@@ -1585,7 +1372,6 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             });
             setHasUserActivatedListening(true);
             console.debug('Setting up speech config...');
-            speechConfig = setupSpeechConfig(AZURE_COGNITIVE_SERVICES_TTS_KEY);
             console.debug('Creating audio config and recognizer...');
             const audioConfig = speechSdk.AudioConfig.fromDefaultMicrophoneInput();
             recognizer = new speechSdk.SpeechRecognizer(speechConfig, audioConfig);
@@ -1739,18 +1525,6 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         if ((currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.state) === 'Z0')
             clearListening();
     }, [currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.state]);
-    const [requestedListening, setRequestedListening] = useState(false);
-    const onEndSpeakStartListen = useCallback((_e) => {
-        if (isPlayingAudio && speechSynthesizer) {
-            speechSynthesizer.close();
-            speechSynthesizer = null;
-        }
-        if (continuousSpeech &&
-            (hasUserActivatedListening || !requestedListening)) {
-            setRequestedListening(true);
-            startListening();
-        }
-    }, [continuousSpeech, hasUserActivatedListening]);
     useEffect(() => {
         if (!isPlayingAudio &&
             continuousSpeech &&
@@ -1921,7 +1695,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         if (memoriAudioElement && isSafari) {
             memoriAudioElement.muted = false;
             memoriAudioElement.play().catch((e) => {
-                console.warn('error playing intro audio', e);
+                console.warn('[CLICK_START] Error playing intro audio:', e);
             });
         }
         let storageBirthDate = getLocalConfig('birthDate', undefined);
@@ -1930,7 +1704,6 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             birth = '1970-01-01T10:24:03.845Z';
         const localPosition = getLocalConfig('position', undefined);
         if (autoStart && !localPosition && memori.needsPosition) {
-            console.log('position required', localPosition);
             setShowPositionDrawer(true);
             return;
         }
@@ -1976,16 +1749,8 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             if (session === null || session === void 0 ? void 0 : session.dialogState) {
                 if (!chatLog) {
                     setHistory([]);
-                    translateDialogState(session.dialogState, userLang)
-                        .then(ts => {
-                        let text = ts.translatedEmission || ts.emission;
-                        if (text) {
-                            speak(text);
-                        }
-                    })
-                        .finally(() => {
-                        setHasUserActivatedSpeak(true);
-                    });
+                    await translateAndSpeak(session.dialogState, userLang);
+                    setHasUserActivatedSpeak(true);
                 }
                 else {
                     const messages = chatLog.lines.map((l, i) => {
@@ -2006,7 +1771,6 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                     if (language.toUpperCase() !== userLang.toUpperCase() &&
                         isMultilanguageEnabled) {
                         try {
-                            console.debug('[CLICK_START] Translating messages');
                             translatedMessages = await Promise.all(messages.map(async (m) => ({
                                 ...m,
                                 originalText: m.text,
@@ -2014,6 +1778,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                             })));
                         }
                         catch (e) {
+                            console.error('[CLICK_START] Error translating messages:', e);
                         }
                     }
                     setHistory(translatedMessages);
@@ -2031,10 +1796,8 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             return;
         }
         else if (initialSessionID) {
-            console.debug('[CLICK_START] Handling initial session');
             const { currentState, ...response } = await getSession(sessionID);
             if (response.resultCode !== 0 || !currentState) {
-                console.debug('[CLICK_START] Session expired, opening new session');
                 setGotErrorInOpening(true);
                 setSessionId(undefined);
                 setClickedStart(false);
@@ -2042,35 +1805,25 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                 return;
             }
             setHistory([]);
-            if (position && memori.needsPosition)
+            if (position && memori.needsPosition) {
                 applyPosition(position, sessionID);
-            if (memori.needsDateTime)
+            }
+            if (memori.needsDateTime) {
                 sendDateChangedEvent({ sessionID: sessionID, state: currentState });
+            }
             if (personification &&
                 currentState.currentTag !== personification.tag) {
                 try {
-                    console.debug('[CLICK_START] Changing tag for personification', personification, currentState);
                     await changeTag(memori.engineMemoriID, sessionID, '-');
                     const session = await changeTag(memori.engineMemoriID, sessionID, personification.tag, personification.pin);
                     if (session && session.resultCode === 0) {
-                        translateDialogState(session.currentState, userLang)
-                            .then(ts => {
-                            let text = ts.translatedEmission || ts.emission;
-                            if (text) {
-                                speak(text);
-                            }
-                        })
-                            .finally(() => {
-                            setHasUserActivatedSpeak(true);
-                        });
+                        await translateAndSpeak(session.currentState, userLang);
                     }
                     else {
-                        console.error('[CLICK_START] Session error:', session);
                         throw new Error('No session');
                     }
                 }
                 catch (e) {
-                    console.error('[CLICK_START] Error changing tag:', e);
                     reopenSession(true, memori === null || memori === void 0 ? void 0 : memori.secretToken, undefined, personification.tag, personification.pin, {
                         PATHNAME: (_h = window.location.pathname) === null || _h === void 0 ? void 0 : _h.toUpperCase(),
                         ROUTE: ((_l = (_k = (_j = window.location.pathname) === null || _j === void 0 ? void 0 : _j.split('/')) === null || _k === void 0 ? void 0 : _k.pop()) === null || _l === void 0 ? void 0 : _l.toUpperCase()) ||
@@ -2086,28 +1839,16 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                 (currentState === null || currentState === void 0 ? void 0 : currentState.currentTag) !== anonTag &&
                 (currentState === null || currentState === void 0 ? void 0 : currentState.currentTag) !== '-') {
                 try {
-                    console.debug('[CLICK_START] Changing to anonymous tag');
                     await changeTag(memori.engineMemoriID, sessionID, '-');
                     const session = await changeTag(memori.engineMemoriID, sessionID, anonTag);
                     if (session && session.resultCode === 0) {
-                        translateDialogState(session.currentState, userLang)
-                            .then(ts => {
-                            let text = ts.translatedEmission || ts.emission;
-                            if (text) {
-                                speak(text);
-                            }
-                        })
-                            .finally(() => {
-                            setHasUserActivatedSpeak(true);
-                        });
+                        await translateAndSpeak(session.currentState, userLang);
                     }
                     else {
-                        console.error('[CLICK_START] Session error:', session);
                         throw new Error('No session');
                     }
                 }
                 catch (e) {
-                    console.error('[CLICK_START] Error changing tag:', e);
                     reopenSession(true, memori === null || memori === void 0 ? void 0 : memori.secretToken, undefined, undefined, undefined, {
                         PATHNAME: (_m = window.location.pathname) === null || _m === void 0 ? void 0 : _m.toUpperCase(),
                         ROUTE: ((_q = (_p = (_o = window.location.pathname) === null || _o === void 0 ? void 0 : _o.split('/')) === null || _p === void 0 ? void 0 : _p.pop()) === null || _q === void 0 ? void 0 : _q.toUpperCase()) ||
@@ -2120,8 +1861,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             }
             else {
                 try {
-                    console.debug('[CLICK_START] Getting chat history');
-                    const { chatLogs, ...resp } = await getSessionChatLogs(sessionID, sessionID);
+                    const { chatLogs } = await getSessionChatLogs(sessionID, sessionID);
                     const messages = (_r = chatLogs === null || chatLogs === void 0 ? void 0 : chatLogs[0]) === null || _r === void 0 ? void 0 : _r.lines.map((l, i) => {
                         var _a, _b;
                         return ({
@@ -2140,7 +1880,6 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                     if (language.toUpperCase() !== userLang.toUpperCase() &&
                         isMultilanguageEnabled) {
                         try {
-                            console.debug('[CLICK_START] Translating messages');
                             translatedMessages = await Promise.all(messages.map(async (m) => ({
                                 ...m,
                                 originalText: m.text,
@@ -2148,30 +1887,19 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                             })));
                         }
                         catch (e) {
+                            console.error('[CLICK_START] Error translating messages:', e);
                         }
                     }
                     setHistory(translatedMessages);
-                    console.debug('[CLICK_START] props currentState:', currentState, 'userLang:', userLang, 'translatedMessages:', translatedMessages, 'history:', history);
                 }
                 catch (e) {
-                    console.log('[CLICK_START] Error retrieving chat logs:', e);
+                    console.error('[CLICK_START] Error retrieving chat logs:', e);
                 }
                 if ((!!(translatedMessages === null || translatedMessages === void 0 ? void 0 : translatedMessages.length) && translatedMessages.length > 1) ||
                     !initialQuestion) {
-                    console.log('[CLICK_START] Using existing chat history');
-                    translateDialogState(currentState, userLang, undefined, !!(translatedMessages === null || translatedMessages === void 0 ? void 0 : translatedMessages.length))
-                        .then(ts => {
-                        let text = ts.translatedEmission || ts.emission;
-                        if (text) {
-                            speak(text);
-                        }
-                    })
-                        .finally(() => {
-                        setHasUserActivatedSpeak(true);
-                    });
+                    await translateAndSpeak(currentState, userLang, undefined, !!(translatedMessages === null || translatedMessages === void 0 ? void 0 : translatedMessages.length));
                 }
                 else {
-                    console.log('[CLICK_START] Using existing chat history with message from initial question');
                     translatedMessages = [];
                     setHistory([]);
                     setMemoriTyping(true);
@@ -2179,44 +1907,23 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                         sessionId: sessionID,
                         text: initialQuestion,
                     });
-                    translateDialogState((_s = response.currentState) !== null && _s !== void 0 ? _s : currentState, userLang, undefined, false)
-                        .then(ts => {
-                        let text = ts.translatedEmission || ts.emission;
-                        if (text) {
-                            speak(text);
-                        }
-                    })
-                        .finally(() => {
-                        setMemoriTyping(false);
-                        setHasUserActivatedSpeak(true);
-                    });
+                    await translateAndSpeak((_s = response.currentState) !== null && _s !== void 0 ? _s : currentState, userLang, undefined, false);
                 }
             }
-            if (position && memori.needsPosition)
+            if (position && memori.needsPosition) {
                 applyPosition(position, sessionID);
-            if (memori.needsDateTime)
+            }
+            if (memori.needsDateTime) {
                 sendDateChangedEvent({ sessionID: sessionID, state: currentState });
+            }
         }
         else {
-            console.debug('[CLICK_START] Using existing session');
             setHistory([]);
-            translateDialogState(dialogState, userLang)
-                .then(ts => {
-                let text = ts.translatedEmission || ts.emission;
-                if (text) {
-                    speak(text);
-                }
-            })
-                .finally(() => {
-                setHasUserActivatedSpeak(true);
-            });
+            await translateAndSpeak(dialogState, userLang);
         }
     }, [memoriPwd, memori, memoriTokens, birthDate, sessionId, userLang, position]);
     useEffect(() => {
         if (!clickedStart && autoStart) {
-            if (AZURE_COGNITIVE_SERVICES_TTS_KEY && !speechSynthesizer) {
-                initializeTTS();
-            }
             onClickStart();
         }
     }, [clickedStart, autoStart]);
@@ -2339,11 +2046,10 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         setShowKnownFactsDrawer,
         setShowExpertsDrawer,
         enableAudio: (_w = enableAudio !== null && enableAudio !== void 0 ? enableAudio : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.enableAudio) !== null && _w !== void 0 ? _w : true,
-        showSpeaker: !!AZURE_COGNITIVE_SERVICES_TTS_KEY,
-        speakerMuted: muteSpeaker || speakerMuted,
+        showSpeaker: !!ttsProvider,
+        speakerMuted: speakerMuted,
         setSpeakerMuted: mute => {
-            speakerMuted = !!mute;
-            setMuteSpeaker(mute);
+            toggleMute(mute);
             let microphoneMode = getLocalConfig('microphoneMode', 'HOLD_TO_TALK');
             if (microphoneMode === 'CONTINUOUS' && mute) {
                 setContinuousSpeech(false);
@@ -2384,7 +2090,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         avatar3dVisible,
         setAvatar3dVisible,
         hasUserActivatedSpeak,
-        isPlayingAudio: isPlayingAudio && !muteSpeaker,
+        isPlayingAudio: isPlayingAudio && !speakerMuted,
         loading: !!memoriTyping,
         baseUrl,
         apiUrl: client.constants.BACKEND_URL,
@@ -2408,7 +2114,6 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         clickedStart: clickedStart,
         isMultilanguageEnabled: isMultilanguageEnabled,
         onClickStart: onClickStart,
-        initializeTTS: initializeTTS,
         isUserLoggedIn: !!loginToken && !!(user === null || user === void 0 ? void 0 : user.userID),
         hasInitialSession: !!initialSessionID,
         notEnoughCredits: needsCredits && !hasEnoughCredits,
@@ -2420,6 +2125,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         memori,
         sessionID: sessionId || '',
         tenant,
+        provider: ttsProvider,
         translateTo: isMultilanguageEnabled &&
             userLang.toUpperCase() !==
                 ((_3 = ((_2 = (_1 = (_0 = (_z = memori.culture) === null || _z === void 0 ? void 0 : _z.split('-')) === null || _0 === void 0 ? void 0 : _0[0]) !== null && _1 !== void 0 ? _1 : i18n.language) !== null && _2 !== void 0 ? _2 : 'IT')) === null || _3 === void 0 ? void 0 : _3.toUpperCase())
@@ -2453,7 +2159,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         attachmentsMenuOpen,
         setAttachmentsMenuOpen,
         showInputs,
-        showMicrophone: !!AZURE_COGNITIVE_SERVICES_TTS_KEY,
+        showMicrophone: !!ttsProvider,
         showFunctionCache,
         userMessage,
         onChangeUserMessage,
@@ -2500,7 +2206,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             'memori--preview': preview,
             'memori--embed': embed,
             'memori--with-integration': integration,
-            'memori--with-speechkey': !!AZURE_COGNITIVE_SERVICES_TTS_KEY,
+            'memori--with-speechkey': !!ttsProvider,
             'memori--active': hasUserActivatedSpeak,
             'memori--hide-emissions': hideEmissions,
             'memori--has-active-session': !!sessionId,
@@ -2562,6 +2268,10 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                     setChatLogID(chatLog.chatLogID);
                     onClickStart(undefined, false, chatLog);
                     setShowChatHistoryDrawer(false);
+                }, apiClient: client, sessionId: sessionId || '', memori: memori, baseUrl: baseUrl, history: history, apiUrl: client.constants.BACKEND_URL, loginToken: loginToken })), showChatHistoryDrawer && (_jsx(ChatHistoryDrawer, { open: !!showChatHistoryDrawer, onClose: () => setShowChatHistoryDrawer(false), resumeSession: chatLog => {
+                    setChatLogID(chatLog.chatLogID);
+                    onClickStart(undefined, false, chatLog);
+                    setShowChatHistoryDrawer(false);
                 }, apiClient: client, sessionId: sessionId || '', memori: memori, baseUrl: baseUrl, history: history, apiUrl: client.constants.BACKEND_URL, loginToken: loginToken })), showPositionDrawer && (_jsx(PositionDrawer, { memori: memori, open: !!showPositionDrawer, venue: position, setVenue: setPosition, onClose: position => {
                     if (position)
                         applyPosition(position);
@@ -2585,7 +2295,10 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                         userToken = undefined;
                         removeLocalConfig('loginToken');
                     });
-                } }))] }));
+                } })), error && (_jsx(Alert, { open: !!error, onClose: () => {
+                    setError(null);
+                    window.open('chrome://settings/content/autoplay', '_blank');
+                }, title: "Error", description: error.message, type: "error" }))] }));
 };
 export default MemoriWidget;
 //# sourceMappingURL=MemoriWidget.js.map