@memori.ai/memori-react 2.9.2 → 2.10.0

package/esm/components/MemoriWidget/MemoriWidget.js

@@ -43,41 +43,19 @@ const getMemoriState = (integrationId) => {
     let dialogState = JSON.parse(engineState);
     return dialogState;
 };
-function setNativeValue(element, value) {
-    var _a, _b, _c, _d;
-    const valueSetter = (_b = (_a = Object === null || Object === void 0 ? void 0 : Object.getOwnPropertyDescriptor) === null || _a === void 0 ? void 0 : _a.call(Object, element, 'value')) === null || _b === void 0 ? void 0 : _b.set;
-    const prototype = Object.getPrototypeOf(element);
-    const prototypeValueSetter = (_d = (_c = Object === null || Object === void 0 ? void 0 : Object.getOwnPropertyDescriptor) === null || _c === void 0 ? void 0 : _c.call(Object, prototype, 'value')) === null || _d === void 0 ? void 0 : _d.set;
-    if (prototypeValueSetter &&
-        valueSetter &&
-        valueSetter !== prototypeValueSetter) {
-        prototypeValueSetter.call(element, value);
-    }
-    else if (valueSetter) {
-        valueSetter.call(element, value);
-    }
-}
-const typeMessage = (message) => {
-    var _a, _b;
-    let textarea = document.querySelector('fieldset#chat-fieldset textarea') ||
-        ((_b = (_a = document
-            .querySelector('memori-client')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('fieldset#chat-fieldset textarea'));
-    if (!textarea)
-        return;
-    setNativeValue(textarea, message);
-    textarea.dispatchEvent(new Event('input', { bubbles: true }));
-    setTimeout(() => {
-        var _a, _b;
-        let sendButton = document.querySelector('button.memori-chat-inputs--send') ||
-            ((_b = (_a = document
-                .querySelector('memori-client')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('button.memori-chat-inputs--send'));
-        if (!sendButton)
-            return;
-        sendButton.click();
-    }, 100);
+const typeMessage = (message, hidden = false) => {
+    const e = new CustomEvent('MemoriTextEntered', {
+        detail: {
+            text: message,
+            hidden,
+        },
+    });
+    document.dispatchEvent(e);
 };
+const typeMessageHidden = (message) => typeMessage(message, true);
 window.getMemoriState = getMemoriState;
 window.typeMessage = typeMessage;
+window.typeMessageHidden = typeMessageHidden;
 let recognizer;
 let speechConfig;
 let speechSynthesizer;
@@ -85,6 +63,7 @@ let audioDestination;
 let audioContext;
 let memoriPassword;
 let speakerMuted = false;
+let memoriSpeaking = false;
 const MemoriWidget = ({ memori, memoriConfigs, memoriLang, multilingual, integration, layout = 'DEFAULT', customLayout, showInstruct = false, showShare, preview = false, embed = false, showInputs = true, showDates = false, showContextPerLine = false, showSettings = true, height = '100vh', secret, baseUrl = 'https://app.twincreator.com', apiUrl = 'https://backend.memori.ai', initialContextVars, initialQuestion, ogImage, sessionID: initialSessionID, tenant, personification, authToken, AZURE_COGNITIVE_SERVICES_TTS_KEY, onStateChange, additionalInfo, additionalSettings, customMediaRenderer, }) => {
     var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _t, _u, _v, _w, _x, _y;
     const { t, i18n } = useTranslation();
@@ -120,6 +99,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, multilingual, integra
     const [hideEmissions, setHideEmissions] = useState(false);
     useEffect(() => {
         setIsPlayingAudio(!!speechSynthesizer);
+        memoriSpeaking = !!speechSynthesizer;
     }, [speechSynthesizer]);
     useEffect(() => {
         let defaultControlsPosition = 'bottom';
@@ -166,199 +146,6 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, multilingual, integra
         _setPosition(venue);
         applyPosition(venue);
     };
-    const [userMessage, setUserMessage] = useState('');
-    const onChangeUserMessage = (value) => {
-        if (!value || value === '\n' || value.trim() === '') {
-            setUserMessage('');
-            resetInteractionTimeout();
-            return;
-        }
-        setUserMessage(value);
-        clearInteractionTimeout();
-    };
-    const [listening, setListening] = useState(false);
-    const [history, setHistory] = useState([]);
-    const pushMessage = (message) => {
-        setHistory(history => [...history, { ...message }]);
-    };
-    const sendMessage = async (text, media, newSessionId, translate = true, translatedText) => {
-        var _a, _b, _c, _d, _f;
-        if (!sessionId || !(text === null || text === void 0 ? void 0 : text.length))
-            return;
-        pushMessage({
-            text: text,
-            translatedText,
-            fromUser: true,
-            media: media !== null && media !== void 0 ? media : [],
-            initial: !!newSessionId,
-        });
-        setMemoriTyping(true);
-        const language = (_d = (_c = (_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';
-        let msg = text;
-        if (translate &&
-            !instruct &&
-            isMultilanguageEnabled &&
-            userLang.toUpperCase() !== language.toUpperCase()) {
-            const translation = await getTranslation(text, language, userLang, baseUrl);
-            msg = translation.text;
-        }
-        const { currentState, ...response } = await postTextEnteredEvent({
-            sessionId: newSessionId !== null && newSessionId !== void 0 ? newSessionId : sessionId,
-            text: msg,
-        });
-        if (response.resultCode === 0 && currentState) {
-            const emission = (_f = currentState.emission) !== null && _f !== void 0 ? _f : currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.emission;
-            if (currentState.state === 'X4' && memori.giverTag) {
-                const { currentState, ...resp } = await postTagChangedEvent(sessionId, memori.giverTag);
-                if (resp.resultCode === 0) {
-                    setCurrentDialogState(currentState);
-                    if (currentState.emission) {
-                        pushMessage({
-                            text: currentState.emission,
-                            media: currentState.media,
-                            fromUser: false,
-                        });
-                        speak(currentState.emission);
-                    }
-                }
-                else {
-                    console.error(response, resp);
-                    message.error(t(getErrori18nKey(resp.resultCode)));
-                }
-            }
-            else if (currentState.state === 'X2d' && memori.giverTag) {
-                const { currentState, ...resp } = await postTextEnteredEvent({
-                    sessionId: newSessionId !== null && newSessionId !== void 0 ? newSessionId : sessionId,
-                    text: Math.random().toString().substring(2, 8),
-                });
-                if (resp.resultCode === 0) {
-                    const { currentState, ...resp } = await postTagChangedEvent(sessionId, memori.giverTag);
-                    if (resp.resultCode === 0) {
-                        setCurrentDialogState(currentState);
-                        if (currentState.emission) {
-                            pushMessage({
-                                text: currentState.emission,
-                                media: currentState.media,
-                                fromUser: false,
-                            });
-                            speak(currentState.emission);
-                        }
-                    }
-                    else {
-                        console.error(response, resp);
-                        message.error(t(getErrori18nKey(resp.resultCode)));
-                    }
-                }
-                else {
-                    console.error(response, resp);
-                    message.error(t(getErrori18nKey(resp.resultCode)));
-                }
-            }
-            else if (userLang.toLowerCase() !== language.toLowerCase() &&
-                emission &&
-                !instruct &&
-                isMultilanguageEnabled) {
-                translateDialogState(currentState, userLang).then(ts => {
-                    if (ts.emission) {
-                        speak(ts.emission);
-                    }
-                });
-            }
-            else {
-                setCurrentDialogState({
-                    ...currentState,
-                    emission,
-                });
-                if (emission) {
-                    pushMessage({
-                        text: emission,
-                        media: currentState.media,
-                        fromUser: false,
-                        generatedByAI: !!currentState.completion,
-                    });
-                    speak(emission);
-                }
-            }
-        }
-        else if (response.resultCode === 404) {
-            setHistory(h => [...h.slice(0, h.length - 1)]);
-            reopenSession(false, memoriPwd || memori.secretToken, memoriTokens, instruct && memori.giverTag ? memori.giverTag : undefined, instruct && memori.giverPIN ? memori.giverPIN : undefined, initialContextVars, initialQuestion).then(state => {
-                console.info('session timeout');
-                if (state === null || state === void 0 ? void 0 : state.sessionID) {
-                    setTimeout(() => {
-                        sendMessage(text, media, state === null || state === void 0 ? void 0 : state.sessionID);
-                    }, 500);
-                }
-            });
-        }
-        setMemoriTyping(false);
-    };
-    const translateDialogState = async (state, userLang) => {
-        var _a, _b, _c, _d, _f, _g, _h;
-        const language = (_d = (_c = (_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';
-        const emission = (_f = state.emission) !== null && _f !== void 0 ? _f : currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.emission;
-        let translatedState = { ...state };
-        let translatedMsg = null;
-        if (!emission ||
-            instruct ||
-            language.toUpperCase() === userLang.toUpperCase() ||
-            !isMultilanguageEnabled) {
-            translatedState = { ...state, emission };
-            if (emission) {
-                translatedMsg = {
-                    text: emission,
-                    media: state.media,
-                    fromUser: false,
-                };
-            }
-        }
-        else {
-            const t = await getTranslation(emission, userLang, language, baseUrl);
-            if (state.hints && state.hints.length > 0) {
-                const translatedHints = await Promise.all(((_g = state.hints) !== null && _g !== void 0 ? _g : []).map(async (hint) => {
-                    var _a;
-                    const tHint = await getTranslation(hint, userLang, language, baseUrl);
-                    return {
-                        text: (_a = tHint === null || tHint === void 0 ? void 0 : tHint.text) !== null && _a !== void 0 ? _a : hint,
-                        originalText: hint,
-                    };
-                }));
-                translatedState = {
-                    ...state,
-                    emission: t.text,
-                    translatedHints,
-                };
-            }
-            else {
-                translatedState = {
-                    ...state,
-                    emission: t.text,
-                    hints: (_h = state.hints) !== null && _h !== void 0 ? _h : (state.state === 'G1' ? currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.hints : []),
-                };
-            }
-            if (t.text.length > 0)
-                translatedMsg = {
-                    text: t.text,
-                    media: state.media,
-                    fromUser: false,
-                    generatedByAI: !!state.completion,
-                };
-        }
-        setCurrentDialogState(translatedState);
-        if (translatedMsg) {
-            pushMessage(translatedMsg);
-        }
-        return translatedState;
-    };
-    const minAge = memori.ageRestriction
-        ? memori.ageRestriction
-        : memori.nsfw
-            ? 18
-            : memori.enableCompletions
-                ? 14
-                : 0;
-    const [birthDate, setBirthDate] = useState();
-    const [showAgeVerification, setShowAgeVerification] = useState(false);
     const [sessionId, setSessionId] = useState(initialSessionID);
     const [currentDialogState, _setCurrentDialogState] = useState();
     const setCurrentDialogState = (state) => {
@@ -607,6 +394,201 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, multilingual, integra
                 restoreGiverTag();
         };
     }, []);
+    const [userMessage, setUserMessage] = useState('');
+    const onChangeUserMessage = (value) => {
+        if (!value || value === '\n' || value.trim() === '') {
+            setUserMessage('');
+            resetInteractionTimeout();
+            return;
+        }
+        setUserMessage(value);
+        clearInteractionTimeout();
+    };
+    const [listening, setListening] = useState(false);
+    const [history, setHistory] = useState([]);
+    const pushMessage = (message) => {
+        setHistory(history => [...history, { ...message }]);
+    };
+    const sendMessage = useCallback(async (text, media, newSessionId, translate = true, translatedText, hidden = false) => {
+        var _a, _b, _c, _d, _f;
+        const sessionID = newSessionId || sessionId;
+        if (!sessionID || !(text === null || text === void 0 ? void 0 : text.length))
+            return;
+        if (!hidden)
+            pushMessage({
+                text: text,
+                translatedText,
+                fromUser: true,
+                media: media !== null && media !== void 0 ? media : [],
+                initial: !!newSessionId,
+            });
+        setMemoriTyping(true);
+        const language = (_d = (_c = (_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';
+        let msg = text;
+        if (translate &&
+            !instruct &&
+            isMultilanguageEnabled &&
+            userLang.toUpperCase() !== language.toUpperCase()) {
+            const translation = await getTranslation(text, language, userLang, baseUrl);
+            msg = translation.text;
+        }
+        const { currentState, ...response } = await postTextEnteredEvent({
+            sessionId: sessionID,
+            text: msg,
+        });
+        if (response.resultCode === 0 && currentState) {
+            const emission = (_f = currentState.emission) !== null && _f !== void 0 ? _f : currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.emission;
+            if (currentState.state === 'X4' && memori.giverTag) {
+                const { currentState, ...resp } = await postTagChangedEvent(sessionID, memori.giverTag);
+                if (resp.resultCode === 0) {
+                    setCurrentDialogState(currentState);
+                    if (currentState.emission) {
+                        pushMessage({
+                            text: currentState.emission,
+                            media: currentState.media,
+                            fromUser: false,
+                        });
+                        speak(currentState.emission);
+                    }
+                }
+                else {
+                    console.error(response, resp);
+                    message.error(t(getErrori18nKey(resp.resultCode)));
+                }
+            }
+            else if (currentState.state === 'X2d' && memori.giverTag) {
+                const { currentState, ...resp } = await postTextEnteredEvent({
+                    sessionId: sessionID,
+                    text: Math.random().toString().substring(2, 8),
+                });
+                if (resp.resultCode === 0) {
+                    const { currentState, ...resp } = await postTagChangedEvent(sessionID, memori.giverTag);
+                    if (resp.resultCode === 0) {
+                        setCurrentDialogState(currentState);
+                        if (currentState.emission) {
+                            pushMessage({
+                                text: currentState.emission,
+                                media: currentState.media,
+                                fromUser: false,
+                            });
+                            speak(currentState.emission);
+                        }
+                    }
+                    else {
+                        console.error(response, resp);
+                        message.error(t(getErrori18nKey(resp.resultCode)));
+                    }
+                }
+                else {
+                    console.error(response, resp);
+                    message.error(t(getErrori18nKey(resp.resultCode)));
+                }
+            }
+            else if (userLang.toLowerCase() !== language.toLowerCase() &&
+                emission &&
+                !instruct &&
+                isMultilanguageEnabled) {
+                translateDialogState(currentState, userLang).then(ts => {
+                    if (ts.emission) {
+                        speak(ts.emission);
+                    }
+                });
+            }
+            else {
+                setCurrentDialogState({
+                    ...currentState,
+                    emission,
+                });
+                if (emission) {
+                    pushMessage({
+                        text: emission,
+                        media: currentState.media,
+                        fromUser: false,
+                        generatedByAI: !!currentState.completion,
+                    });
+                    speak(emission);
+                }
+            }
+        }
+        else if (response.resultCode === 404) {
+            setHistory(h => [...h.slice(0, h.length - 1)]);
+            reopenSession(false, memoriPwd || memori.secretToken, memoriTokens, instruct && memori.giverTag ? memori.giverTag : undefined, instruct && memori.giverPIN ? memori.giverPIN : undefined, initialContextVars, initialQuestion).then(state => {
+                console.info('session timeout');
+                if (state === null || state === void 0 ? void 0 : state.sessionID) {
+                    setTimeout(() => {
+                        sendMessage(text, media, state === null || state === void 0 ? void 0 : state.sessionID);
+                    }, 500);
+                }
+            });
+        }
+        setMemoriTyping(false);
+    }, [sessionId]);
+    const translateDialogState = async (state, userLang) => {
+        var _a, _b, _c, _d, _f, _g, _h;
+        const language = (_d = (_c = (_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';
+        const emission = (_f = state.emission) !== null && _f !== void 0 ? _f : currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.emission;
+        let translatedState = { ...state };
+        let translatedMsg = null;
+        if (!emission ||
+            instruct ||
+            language.toUpperCase() === userLang.toUpperCase() ||
+            !isMultilanguageEnabled) {
+            translatedState = { ...state, emission };
+            if (emission) {
+                translatedMsg = {
+                    text: emission,
+                    media: state.media,
+                    fromUser: false,
+                };
+            }
+        }
+        else {
+            const t = await getTranslation(emission, userLang, language, baseUrl);
+            if (state.hints && state.hints.length > 0) {
+                const translatedHints = await Promise.all(((_g = state.hints) !== null && _g !== void 0 ? _g : []).map(async (hint) => {
+                    var _a;
+                    const tHint = await getTranslation(hint, userLang, language, baseUrl);
+                    return {
+                        text: (_a = tHint === null || tHint === void 0 ? void 0 : tHint.text) !== null && _a !== void 0 ? _a : hint,
+                        originalText: hint,
+                    };
+                }));
+                translatedState = {
+                    ...state,
+                    emission: t.text,
+                    translatedHints,
+                };
+            }
+            else {
+                translatedState = {
+                    ...state,
+                    emission: t.text,
+                    hints: (_h = state.hints) !== null && _h !== void 0 ? _h : (state.state === 'G1' ? currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.hints : []),
+                };
+            }
+            if (t.text.length > 0)
+                translatedMsg = {
+                    text: t.text,
+                    media: state.media,
+                    fromUser: false,
+                    generatedByAI: !!state.completion,
+                };
+        }
+        setCurrentDialogState(translatedState);
+        if (translatedMsg) {
+            pushMessage(translatedMsg);
+        }
+        return translatedState;
+    };
+    const minAge = memori.ageRestriction
+        ? memori.ageRestriction
+        : memori.nsfw
+            ? 18
+            : memori.enableCompletions
+                ? 14
+                : 0;
+    const [birthDate, setBirthDate] = useState();
+    const [showAgeVerification, setShowAgeVerification] = useState(false);
     const [userInteractionTimeout, setUserInteractionTimeout] = useState();
     const timeoutRef = useRef();
     const clearInteractionTimeout = () => {
@@ -876,6 +858,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, multilingual, integra
         if (preview)
             return;
         if (muteSpeaker || speakerMuted) {
+            memoriSpeaking = false;
             if (continuousSpeech) {
                 setListeningTimeout();
             }
@@ -894,6 +877,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, multilingual, integra
             audioContext.suspend();
             if (isPlayingAudio) {
                 try {
+                    memoriSpeaking = false;
                     if (speechSynthesizer) {
                         speechSynthesizer.close();
                         speechSynthesizer = null;
@@ -934,15 +918,18 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, multilingual, integra
         const source = audioContext.createBufferSource();
         source.addEventListener('ended', () => {
             setIsPlayingAudio(false);
+            memoriSpeaking = false;
         });
         audioDestination.onAudioEnd = () => {
             setIsPlayingAudio(false);
+            memoriSpeaking = false;
             source.disconnect();
             onEndSpeakStartListen();
         };
         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(escapeHTML(text), userLang.toLowerCase())}</s></voice></speak>`, result => {
             if (result) {
                 setIsPlayingAudio(true);
+                memoriSpeaking = true;
                 try {
                     audioContext.decodeAudioData(result.audioData, function (buffer) {
                         source.buffer = buffer;
@@ -956,6 +943,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, multilingual, integra
                             audioContext.state === 'closed') {
                             source.disconnect();
                             setIsPlayingAudio(false);
+                            memoriSpeaking = false;
                         }
                         else if (audioContext.state === 'interrupted') {
                             audioContext.resume();
@@ -971,6 +959,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, multilingual, integra
                     console.error('speak error: ', e);
                     window.speechSynthesis.speak(new SpeechSynthesisUtterance(text));
                     setIsPlayingAudio(false);
+                    memoriSpeaking = false;
                     if (speechSynthesizer) {
                         speechSynthesizer.close();
                         speechSynthesizer = null;
@@ -980,16 +969,19 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, multilingual, integra
             else {
                 audioContext.resume();
                 setIsPlayingAudio(false);
+                memoriSpeaking = false;
             }
         }, error => {
             console.error('speak:', error);
             window.speechSynthesis.speak(new SpeechSynthesisUtterance(text));
             setIsPlayingAudio(false);
+            memoriSpeaking = false;
         });
         setMemoriTyping(false);
     };
     const stopAudio = () => {
         setIsPlayingAudio(false);
+        memoriSpeaking = false;
         try {
             if (speechSynthesizer) {
                 speechSynthesizer.close();
@@ -1346,6 +1338,27 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, multilingual, integra
         stopAudio();
         sendMessage(text, undefined, undefined, false, translatedText);
     };
+    const memoriTextEnteredHandler = useCallback((e) => {
+        var _a;
+        const { text, hidden } = e.detail;
+        const sessionID = sessionId || ((_a = window.getMemoriState()) === null || _a === void 0 ? void 0 : _a.sessionID);
+        if (text) {
+            if (!speakerMuted && (memoriSpeaking || memoriTyping)) {
+                setTimeout(() => {
+                    memoriTextEnteredHandler(e);
+                }, 1000);
+            }
+            else {
+                sendMessage(text, undefined, sessionID, undefined, undefined, hidden);
+            }
+        }
+    }, [sessionId, isPlayingAudio, memoriTyping]);
+    useEffect(() => {
+        document.addEventListener('MemoriTextEntered', memoriTextEnteredHandler);
+        return () => {
+            document.removeEventListener('MemoriTextEntered', memoriTextEnteredHandler);
+        };
+    }, []);
     const onClickStart = useCallback(async (session) => {
         const sessionID = (session === null || session === void 0 ? void 0 : session.sessionID) || sessionId;
         const dialogState = (session === null || session === void 0 ? void 0 : session.dialogState) || currentDialogState;