@memori.ai/memori-react 1.0.0-alpha.1

package/dist/components/MemoriWidget/MemoriWidget.js

@@ -0,0 +1,1371 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_i18next_1 = require("react-i18next");
+const memori_api_client_1 = tslib_1.__importDefault(require("@memori.ai/memori-api-client"));
+const standardized_audio_context_1 = require("standardized-audio-context");
+const speechSdk = tslib_1.__importStar(require("microsoft-cognitiveservices-speech-sdk"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Message_1 = tslib_1.__importDefault(require("../ui/Message"));
+const Chat_1 = tslib_1.__importDefault(require("../Chat/Chat"));
+const StartPanel_1 = tslib_1.__importDefault(require("../StartPanel/StartPanel"));
+const Avatar_1 = tslib_1.__importDefault(require("../Avatar/Avatar"));
+const ChangeMode_1 = tslib_1.__importDefault(require("../ChangeMode/ChangeMode"));
+const Default_1 = tslib_1.__importDefault(require("../layouts/Default"));
+const translations_1 = require("../../helpers/translations");
+const configuration_1 = require("../../helpers/configuration");
+const utils_1 = require("../../helpers/utils");
+const constants_1 = require("../../helpers/constants");
+const error_1 = require("../../helpers/error");
+const statistics_1 = require("../../helpers/statistics");
+const Header_1 = tslib_1.__importDefault(require("../Header/Header"));
+require("./MemoriWidget.css");
+const getMemoriState = (integrationId) => {
+    var _a;
+    let widget = integrationId
+        ? document.querySelector(`.memori-landing-experience[data-memori-integration="${integrationId}"]`)
+        : document.querySelector('.memori-landing-experience');
+    let widgetInner = (widget !== null && widget !== void 0 ? widget : document).querySelector('div[data-memori-engine-state]');
+    if (!widgetInner)
+        return null;
+    let engineState = (_a = widgetInner.dataset) === null || _a === void 0 ? void 0 : _a.memoriEngineState;
+    if (!engineState)
+        return null;
+    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) => {
+    let textarea = document.querySelector('fieldset#chat-fieldset textarea');
+    if (!textarea)
+        return;
+    setNativeValue(textarea, message);
+    textarea.dispatchEvent(new Event('input', { bubbles: true }));
+    setTimeout(() => {
+        let sendButton = document.querySelector('fieldset#chat-fieldset textarea + button');
+        if (!sendButton)
+            return;
+        sendButton.click();
+    }, 100);
+};
+window.getMemoriState = getMemoriState;
+window.typeMessage = typeMessage;
+const silenceSeconds = [2, 3, 5, 10, 15, 20, 30, 60];
+let recognizer;
+let speechConfig;
+let speechSynthesizer;
+let audioDestination;
+const MemoriWidget = ({ memori: initialMemori, memoriConfigs, memoriLang, integration, showInstruct = false, showShare = true, preview = false, embed = false, showInputs = true, showDates = false, showContextPerLine = false, showSettings = false, secret, baseUrl = 'https://app.twincreator.com', apiUrl = 'https://backend.memori.ai', initialContextVars, initialQuestion, ogImage, sessionID: initialSessionID, tenant, personification, AZURE_COGNITIVE_SERVICES_TTS_KEY, }) => {
+    var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _t, _u;
+    const { t, i18n } = (0, react_i18next_1.useTranslation)();
+    const client = (0, memori_api_client_1.default)(apiUrl);
+    const { initSession, postTextEnteredEvent, postPlaceChangedEvent, postTimeoutEvent, postTagChangedEvent, getSession, getContentQualityIndexes, } = client;
+    const [memori, setMemori] = (0, react_1.useState)(initialMemori);
+    const [instruct, setInstruct] = (0, react_1.useState)(false);
+    const [clickedStart, setClickedStart] = (0, react_1.useState)(false);
+    const [gotErrorInOpening, setGotErrorInOpening] = (0, react_1.useState)(false);
+    const language = (_d = (_c = (_b = (_a = memoriConfigs === null || memoriConfigs === void 0 ? void 0 : memoriConfigs.find(c => c.memoriConfigID === memori.memoriConfigurationID)) === null || _a === void 0 ? void 0 : _a.culture) === null || _b === void 0 ? void 0 : _b.split('-')) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.toUpperCase();
+    const [userLang, setUserLang] = (0, react_1.useState)((_k = (_j = (_h = memoriLang !== null && memoriLang !== void 0 ? memoriLang : (_g = (_f = memori === null || memori === void 0 ? void 0 : memori.culture) === null || _f === void 0 ? void 0 : _f.split('-')) === null || _g === void 0 ? void 0 : _g[0]) !== null && _h !== void 0 ? _h : language) !== null && _j !== void 0 ? _j : i18n.language) !== null && _k !== void 0 ? _k : 'IT');
+    const integrationConfig = (integration === null || integration === void 0 ? void 0 : integration.customData)
+        ? JSON.parse(integration.customData)
+        : null;
+    const isMultilanguageEnabled = !!(integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.multilanguage);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [memoriTyping, setMemoriTyping] = (0, react_1.useState)(false);
+    const [hasUserActivatedSpeak, setHasUserActivatedSpeak] = (0, react_1.useState)(false);
+    const [hasUserActivatedListening, setHasUserActivatedListening] = (0, react_1.useState)(false);
+    const [showPositionDrawer, setShowPositionDrawer] = (0, react_1.useState)(false);
+    const [showSettingsDrawer, setShowSettingsDrawer] = (0, react_1.useState)(false);
+    const [showChatHistory, setShowChatHistory] = (0, react_1.useState)(false);
+    const [muteSpeaker, setMuteSpeaker] = (0, react_1.useState)(false);
+    const [continuousSpeech, setContinuousSpeech] = (0, react_1.useState)(false);
+    const [continuousSpeechTimeout, setContinuousSpeechTimeout] = (0, react_1.useState)(3);
+    const [isPlayingAudio, setIsPlayingAudio] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setIsPlayingAudio(!!speechSynthesizer);
+    }, [speechSynthesizer]);
+    (0, react_1.useEffect)(() => {
+        setMuteSpeaker((0, configuration_1.getLocalConfig)('muteSpeaker', false));
+        setContinuousSpeech((0, configuration_1.getLocalConfig)('continuousSpeech', false));
+        setContinuousSpeechTimeout((0, configuration_1.getLocalConfig)('continuousSpeechTimeout', 3));
+    }, []);
+    const [isClient, setIsClient] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        setIsClient(true);
+    }, []);
+    const [memoriPwd, setMemoriPwd] = (0, react_1.useState)(secret);
+    const [memoriTokens, setMemoriTokens] = (0, react_1.useState)();
+    const [authModalState, setAuthModalState] = (0, react_1.useState)(null);
+    const [position, _setPosition] = (0, react_1.useState)();
+    const applyPosition = async (venue, sessionID) => {
+        var _a;
+        const session = sessionID !== null && sessionID !== void 0 ? sessionID : sessionId;
+        if (venue && session) {
+            const { currentState, ...response } = await postPlaceChangedEvent({
+                sessionId: session,
+                placeName: venue.placeName,
+                latitude: venue.latitude,
+                longitude: venue.longitude,
+                uncertaintyKm: (_a = venue.uncertainty) !== null && _a !== void 0 ? _a : 0,
+            });
+            if (currentState && response.resultCode === 0) {
+                setCurrentDialogState({ ...currentDialogState, ...currentState });
+            }
+        }
+    };
+    const setPosition = (venue) => {
+        _setPosition(venue);
+        applyPosition(venue);
+    };
+    const [userMessage, setUserMessage] = (0, react_1.useState)('');
+    const onChangeUserMessage = (value) => {
+        if (!value || value === '\n' || value.trim() === '') {
+            setUserMessage('');
+            resetInteractionTimeout();
+            return;
+        }
+        setUserMessage(value);
+        clearInteractionTimeout();
+    };
+    const [listening, setListening] = (0, react_1.useState)(false);
+    const [history, setHistory] = (0, react_1.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 (0, translations_1.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,
+                        });
+                    }
+                }
+                else {
+                    console.error(response, resp);
+                    Message_1.default.error(t((0, error_1.getErrori18nKey)(resp.resultCode), { ns: 'common' }));
+                }
+            }
+            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,
+                            });
+                        }
+                    }
+                    else {
+                        console.error(response, resp);
+                        Message_1.default.error(t((0, error_1.getErrori18nKey)(resp.resultCode), { ns: 'common' }));
+                    }
+                }
+                else {
+                    console.error(response, resp);
+                    Message_1.default.error(t((0, error_1.getErrori18nKey)(resp.resultCode), { ns: 'common' }));
+                }
+            }
+            else if (userLang.toLowerCase() !== language.toLowerCase() &&
+                emission &&
+                !instruct &&
+                isMultilanguageEnabled) {
+                translateDialogState(currentState, userLang);
+            }
+            else {
+                setCurrentDialogState({
+                    ...currentState,
+                    emission,
+                });
+                if (emission)
+                    pushMessage({
+                        text: emission,
+                        media: currentState.media,
+                        fromUser: false,
+                    });
+            }
+        }
+        else {
+            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(sessionID => {
+                console.info('session timeout');
+                if (sessionID) {
+                    setTimeout(() => {
+                        sendMessage(text, media, sessionID);
+                    }, 500);
+                }
+            });
+        }
+        setMemoriTyping(false);
+    };
+    const translateDialogState = async (state, userLang) => {
+        var _a, _b, _c, _d, _f, _g;
+        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 (0, translations_1.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 (0, translations_1.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,
+                };
+            }
+            if (t.text.length > 0)
+                translatedMsg = {
+                    text: t.text,
+                    media: state.media,
+                    fromUser: false,
+                };
+        }
+        setCurrentDialogState(translatedState);
+        if (translatedMsg) {
+            pushMessage(translatedMsg);
+        }
+        return translatedState;
+    };
+    const [sessionId, setSessionId] = (0, react_1.useState)(initialSessionID);
+    const [currentDialogState, setCurrentDialogState] = (0, react_1.useState)();
+    const fetchSession = async (params) => {
+        var _a, _b, _c, _d, _f;
+        if (memori.privacyType !== 'PUBLIC' && !memori.secretToken) {
+            setAuthModalState('password');
+        }
+        setLoading(true);
+        try {
+            if (!memori.giverTag && !!((_a = memori.receivedInvitations) === null || _a === void 0 ? void 0 : _a.length)) {
+                let giverInvitation = memori.receivedInvitations.find((i) => i.type === 'GIVER' && i.state === 'ACCEPTED');
+                if (giverInvitation) {
+                    memori.giverTag = giverInvitation.tag;
+                    memori.giverPIN = giverInvitation.pin;
+                }
+            }
+            const session = await initSession(params);
+            if ((session === null || session === void 0 ? void 0 : session.sessionID) &&
+                (session === null || session === void 0 ? void 0 : session.currentState) &&
+                session.resultCode === 0) {
+                setSessionId(session.sessionID);
+                const language = (_f = (_d = (_c = (_b = memori.culture) === null || _b === void 0 ? void 0 : _b.split('-')) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : i18n.language) !== null && _f !== void 0 ? _f : 'IT';
+                if (!instruct &&
+                    isMultilanguageEnabled &&
+                    userLang.toLowerCase() !== language.toLowerCase()) {
+                    translateDialogState(session.currentState, userLang).then(state => {
+                        if (state === null || state === void 0 ? void 0 : state.emission) {
+                            history.length <= 1
+                                ? setHistory([
+                                    {
+                                        text: state.emission,
+                                        media: state.media,
+                                        fromUser: false,
+                                        initial: true,
+                                    },
+                                ])
+                                : pushMessage({
+                                    text: state.emission,
+                                    media: state.media,
+                                    fromUser: false,
+                                    initial: true,
+                                });
+                        }
+                    });
+                }
+                else {
+                    setCurrentDialogState(session.currentState);
+                    if (session.currentState.emission) {
+                        history.length <= 1
+                            ? setHistory([
+                                {
+                                    text: session.currentState.emission,
+                                    media: session.currentState.media,
+                                    fromUser: false,
+                                    initial: true,
+                                },
+                            ])
+                            : pushMessage({
+                                text: session.currentState.emission,
+                                media: session.currentState.media,
+                                fromUser: false,
+                                initial: true,
+                            });
+                    }
+                }
+                if (position)
+                    applyPosition(position, session.sessionID);
+            }
+            else {
+                console.error(session);
+                Message_1.default.error(t((0, error_1.getErrori18nKey)(session === null || session === void 0 ? void 0 : session.resultCode), { ns: 'common' }));
+                setGotErrorInOpening(true);
+            }
+        }
+        catch (err) {
+            console.error(err);
+            new Error('Error fetching session');
+        }
+        setLoading(false);
+    };
+    const reopenSession = async (updateDialogState = false, password, recoveryTokens, tag, pin, initialContextVars, initialQuestion) => {
+        var _a;
+        setLoading(true);
+        try {
+            const { sessionID, currentState, ...response } = await initSession({
+                memoriID: (_a = memori.engineMemoriID) !== null && _a !== void 0 ? _a : '',
+                password,
+                recoveryTokens,
+                tag,
+                pin,
+                initialContextVars,
+                initialQuestion,
+            });
+            if (sessionID && currentState && response.resultCode === 0) {
+                setSessionId(sessionID);
+                if (updateDialogState) {
+                    setCurrentDialogState(currentState);
+                    if (currentState.emission) {
+                        history.length <= 1
+                            ? setHistory([
+                                {
+                                    text: currentState.emission,
+                                    media: currentState.media,
+                                    fromUser: false,
+                                },
+                            ])
+                            : pushMessage({
+                                text: currentState.emission,
+                                media: currentState.media,
+                                fromUser: false,
+                            });
+                    }
+                }
+                if (position)
+                    applyPosition(position, sessionID);
+                setLoading(false);
+                return sessionID;
+            }
+            else {
+                console.error(response);
+                Message_1.default.error(t((0, error_1.getErrori18nKey)(response.resultCode), { ns: 'common' }));
+                setGotErrorInOpening(true);
+            }
+        }
+        catch (err) {
+            console.error(err);
+        }
+        setLoading(false);
+        return null;
+    };
+    (0, react_1.useEffect)(() => {
+        if (!initialSessionID) {
+            fetchSession({
+                memoriID: memori.engineMemoriID,
+                initialContextVars: initialContextVars || {},
+                initialQuestion,
+            });
+        }
+    }, []);
+    const changeTag = async (memoriId, sessionId, tag, pin) => {
+        var _a;
+        if (!memoriId || !sessionId) {
+            console.error('CHANGETAG/Session not found');
+            return Promise.reject('Session not found');
+        }
+        try {
+            const { currentState, resultCode } = await postTagChangedEvent(sessionId, tag !== null && tag !== void 0 ? tag : constants_1.anonTag);
+            if (resultCode === 0) {
+                let textResult = 0;
+                if (tag !== constants_1.anonTag &&
+                    pin &&
+                    (currentState.state === 'X1a' || currentState.state === 'X1b')) {
+                    const { resultCode: textResultCode } = await postTextEnteredEvent({
+                        sessionId,
+                        text: pin !== null && pin !== void 0 ? pin : '',
+                    });
+                    textResult = textResultCode;
+                }
+                if (textResult === 0) {
+                    const { currentState, ...response } = await getSession(sessionId);
+                    if (response.resultCode === 0 && !!currentState) {
+                        return {
+                            currentState,
+                            sessionId,
+                            ...response,
+                        };
+                    }
+                }
+                else if ([400, 401, 403, 404, 500].includes(resultCode)) {
+                    console.warn('[APPCONTEXT/CHANGETAG]', resultCode);
+                    fetchSession({
+                        memoriID: (_a = memori.engineMemoriID) !== null && _a !== void 0 ? _a : '',
+                        password: memori.secretToken,
+                        tag: memori.giverTag,
+                        pin: memori.giverPIN,
+                    });
+                }
+                else if (!!currentState) {
+                    return {
+                        currentState,
+                        sessionId,
+                        resultCode,
+                    };
+                }
+            }
+        }
+        catch (_e) {
+            let err = _e;
+            console.error('[APPCONTEXT/CHANGETAG]', err);
+            return Promise.reject(err);
+        }
+        return null;
+    };
+    const restoreGiverTag = async () => {
+        if (sessionId && memori.giverTag && memori.giverPIN) {
+            setHistory([]);
+            await changeTag(memori.engineMemoriID, sessionId, memori.giverTag, memori.giverPIN);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (!currentDialogState ||
+                (currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.currentTag) !== memori.giverTag)
+                restoreGiverTag();
+        };
+    }, []);
+    const [userInteractionTimeout, setUserInteractionTimeout] = (0, react_1.useState)();
+    const timeoutRef = (0, react_1.useRef)();
+    const clearInteractionTimeout = () => {
+        if (userInteractionTimeout) {
+            clearTimeout(userInteractionTimeout);
+            setUserInteractionTimeout(undefined);
+        }
+        if (timeoutRef === null || timeoutRef === void 0 ? void 0 : timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = undefined;
+        }
+    };
+    const resetInteractionTimeout = () => {
+        clearInteractionTimeout();
+        if ((currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.acceptsTimeout) &&
+            !speechSynthesizer &&
+            !isPlayingAudio &&
+            !userMessage.length &&
+            !listening)
+            setInteractionTimeout();
+    };
+    const handleTimeout = async () => {
+        if (!!speechSynthesizer ||
+            isPlayingAudio ||
+            !!userMessage.length ||
+            listening) {
+            resetInteractionTimeout();
+            return;
+        }
+        else if (sessionId &&
+            hasUserActivatedSpeak &&
+            (currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.acceptsTimeout)) {
+            const { currentState, ...response } = await postTimeoutEvent(sessionId);
+            if (response.resultCode === 0 && currentState) {
+                const emission = currentState.emission;
+                if (!instruct &&
+                    isMultilanguageEnabled &&
+                    userLang !== (i18n === null || i18n === void 0 ? void 0 : i18n.language) &&
+                    emission &&
+                    emission.length > 0) {
+                    translateDialogState({ ...currentState, emission: emission }, userLang);
+                }
+                else if (emission && emission.length > 0) {
+                    pushMessage({
+                        text: emission,
+                        media: currentState.media,
+                        fromUser: false,
+                    });
+                    setCurrentDialogState(currentState);
+                }
+                else {
+                    setCurrentDialogState({
+                        ...currentState,
+                    });
+                }
+            }
+        }
+    };
+    const setInteractionTimeout = () => {
+        let timeoutLimit = 40000;
+        let timeoutMinLimit = 25000;
+        let timeout = Math.floor(Math.random() * (timeoutLimit - timeoutMinLimit)) +
+            timeoutMinLimit;
+        if (currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.emission) {
+            let readTime = currentDialogState.emission.length / 26.5;
+            timeout = timeout + readTime * 1000;
+        }
+        let uiTimeout = setTimeout(handleTimeout, timeout);
+        setUserInteractionTimeout(uiTimeout);
+        timeoutRef.current = uiTimeout;
+    };
+    (0, react_1.useEffect)(() => {
+        if (!!userMessage.length || isPlayingAudio)
+            clearInteractionTimeout();
+        if (sessionId && !!!userMessage.length)
+            resetInteractionTimeout();
+    }, [
+        currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.acceptsTimeout,
+        currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.state,
+        isPlayingAudio,
+        sessionId,
+        history,
+        userMessage,
+    ]);
+    (0, react_1.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, 'eastus');
+        speechConfig.speechSynthesisLanguage = getCultureCodeByLanguage(userLang);
+        speechConfig.speechSynthesisVoiceName = getTTSVoice(userLang);
+        if ((0, utils_1.hasTouchscreen)())
+            speechConfig.speechSynthesisOutputFormat =
+                speechSdk.SpeechSynthesisOutputFormat.Audio16Khz32KBitRateMonoMp3;
+        let memoriAudioElement = document.getElementById('memori-audio');
+        if (memoriAudioElement && window.navigator.userAgent.includes('Safari')) {
+            memoriAudioElement.muted = false;
+            memoriAudioElement
+                .play()
+                .then(async () => {
+                try {
+                    const context = new standardized_audio_context_1.AudioContext();
+                    let buffer = context.createBuffer(1, 1, 22050);
+                    let source = context.createBufferSource();
+                    source.buffer = buffer;
+                    source.connect(context.destination);
+                }
+                catch (e) {
+                    console.error(e);
+                }
+            })
+                .catch((e) => {
+                console.error('error playing intro audio', e);
+            });
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (audioDestination)
+                audioDestination.pause();
+            if (speechSynthesizer) {
+                speechSynthesizer.close();
+                speechSynthesizer = null;
+            }
+        };
+    }, []);
+    const getTTSVoice = (0, react_1.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();
+        switch (voiceLang) {
+            case 'IT':
+                voice = `${memori.voiceType === 'MALE'
+                    ? 'it-IT-DiegoNeural'
+                    : 'it-IT-ElsaNeural'}`;
+                break;
+            case 'DE':
+                voice = `${memori.voiceType === 'MALE'
+                    ? 'de-DE-ConradNeural'
+                    : 'de-DE-KatjaNeural'}`;
+                break;
+            case 'EN':
+                voice = `${memori.voiceType === 'MALE'
+                    ? 'en-GB-RyanNeural'
+                    : 'en-GB-SoniaNeural'}`;
+                break;
+            case 'ES':
+                voice = `${memori.voiceType === 'MALE'
+                    ? 'es-ES-AlvaroNeural'
+                    : 'es-ES-ElviraNeural'}`;
+                break;
+            case 'FR':
+                voice = `${memori.voiceType === 'MALE'
+                    ? 'fr-FR-HenriNeural'
+                    : 'fr-FR-DeniseNeural'}`;
+                break;
+            case 'PT':
+                voice = `${memori.voiceType === 'MALE'
+                    ? 'pt-PT-DuarteNeural'
+                    : 'pt-PT-RaquelNeural'}`;
+                break;
+            case 'UK':
+                voice = `${memori.voiceType === 'MALE'
+                    ? 'uk-UA-OstapNeural'
+                    : 'uk-UA-PolinaNeural'}`;
+                break;
+            case 'RU':
+                voice = `${memori.voiceType === 'MALE'
+                    ? 'ru-RU-DmitryNeural'
+                    : 'ru-RU-SvetlanaNeural'}`;
+                break;
+            default:
+                voice = `${memori.voiceType === 'MALE'
+                    ? 'it-IT-DiegoNeural'
+                    : 'it-IT-IsabellaNeural'}`;
+                break;
+        }
+        return voice;
+    }, [memori.voiceType, i18n.language, memori.culture]);
+    const getCultureCodeByLanguage = (lang) => {
+        var _a, _b, _c;
+        let voice = '';
+        let voiceLang = ((_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,
+            'IT').toUpperCase();
+        switch (voiceLang) {
+            case 'IT':
+                voice = 'it-IT';
+                break;
+            case 'DE':
+                voice = 'de-DE';
+                break;
+            case 'EN':
+                voice = 'en-GB';
+                break;
+            case 'ES':
+                voice = 'es-ES';
+                break;
+            case 'FR':
+                voice = 'fr-FR';
+                break;
+            case 'PT':
+                voice = 'pt-PT';
+                break;
+            case 'UK':
+                voice = 'uk-UK';
+                break;
+            case 'RU':
+                voice = 'ru-RU';
+                break;
+            default:
+                voice = 'it-IT';
+                break;
+        }
+        return voice;
+    };
+    const [phonemesMap, setPhonemesMap] = (0, react_1.useState)();
+    const fetchLexiconJSON = async () => {
+        try {
+            const lexiconReq = await fetch(`${baseUrl || 'https://app.twincreator.com'}/api/lexiconmap`);
+            const lexicon = await lexiconReq.json();
+            return lexicon;
+        }
+        catch (err) {
+            console.error(err);
+        }
+    };
+    (0, react_1.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.id) && phonemesMap[tenant.id] ? phonemesMap[tenant.id] : {}),
+        };
+        const phonemesPairs = Object.keys(phonemes).map(word => {
+            var _a;
+            const phoneme = (_a = phonemes[word][lang]) !== null && _a !== void 0 ? _a : phonemes[word].default;
+            return { word, phoneme };
+        });
+        const ssmlText = phonemesPairs.reduce((acc, { word, phoneme }) => {
+            return acc.replace(new RegExp(word, 'gi'), `<phoneme alphabet="ipa" ph="${phoneme}">${word}</phoneme>`);
+        }, text);
+        return ssmlText;
+    };
+    const speak = (text, fireListeningEvent = true) => {
+        if (!AZURE_COGNITIVE_SERVICES_TTS_KEY)
+            return;
+        if (preview || !hasUserActivatedSpeak)
+            return;
+        if (audioDestination)
+            audioDestination.pause();
+        if (speechSynthesizer) {
+            speechSynthesizer.close();
+            speechSynthesizer = null;
+        }
+        if (muteSpeaker && fireListeningEvent) {
+            setTimeout(() => {
+                document.dispatchEvent(new Event('endSpeakStartListen'));
+            }, 3000);
+            return;
+        }
+        else if (muteSpeaker) {
+            return;
+        }
+        audioDestination = new speechSdk.SpeakerAudioDestination();
+        let audioConfig = speechSdk.AudioConfig.fromSpeakerOutput(audioDestination);
+        speechSynthesizer = new speechSdk.SpeechSynthesizer(speechConfig, audioConfig);
+        audioDestination.onAudioEnd = () => {
+            setIsPlayingAudio(false);
+            if (fireListeningEvent) {
+                document.dispatchEvent(new Event('endSpeakStartListen'));
+            }
+        };
+        setIsPlayingAudio(true);
+        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(text, userLang.toLowerCase())}</s></voice></speak>`, result => {
+            if (result) {
+                try {
+                    if (speechSynthesizer) {
+                        speechSynthesizer.close();
+                        speechSynthesizer = null;
+                    }
+                }
+                catch (e) {
+                    console.error('speak error: ', e);
+                    window.speechSynthesis.speak(new SpeechSynthesisUtterance(text));
+                    setIsPlayingAudio(false);
+                }
+            }
+            else {
+                setIsPlayingAudio(false);
+            }
+        }, error => {
+            console.error('speak:', error);
+            window.speechSynthesis.speak(new SpeechSynthesisUtterance(text));
+            setIsPlayingAudio(false);
+        });
+    };
+    (0, react_1.useEffect)(() => {
+        let textarea = document.querySelector('#chat-fieldset textarea');
+        if (textarea)
+            textarea.focus();
+    }, [currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.emission]);
+    const [transcript, setTranscript] = (0, react_1.useState)('');
+    const resetTranscript = () => setTranscript('');
+    const [transcriptTimeout, setTranscriptTimeout,] = (0, react_1.useState)(null);
+    const setListeningTimeout = () => {
+        let timeout = setTimeout(async () => {
+            clearListening();
+            const message = (0, utils_1.stripDuplicates)(transcript);
+            if (message.length > 0) {
+                sendMessage(message);
+                resetTranscript();
+                setUserMessage('');
+            }
+            else if (listening) {
+                resetInteractionTimeout();
+            }
+        }, continuousSpeechTimeout * 1000);
+        setTranscriptTimeout(timeout);
+    };
+    const clearListeningTimeout = () => {
+        if (transcriptTimeout) {
+            clearTimeout(transcriptTimeout);
+            setTranscriptTimeout(null);
+        }
+    };
+    const resetListeningTimeout = () => {
+        clearListeningTimeout();
+        if (continuousSpeech)
+            setListeningTimeout();
+    };
+    (0, react_1.useEffect)(() => {
+        resetListeningTimeout();
+        resetInteractionTimeout();
+        if ((transcript === null || transcript === void 0 ? void 0 : transcript.length) > 0) {
+            const transcriptMessage = (0, utils_1.stripDuplicates)(transcript);
+            if (transcriptMessage.length > 0)
+                setUserMessage(transcriptMessage);
+        }
+    }, [transcript]);
+    const startListening = () => {
+        if (!AZURE_COGNITIVE_SERVICES_TTS_KEY)
+            return;
+        clearListening();
+        setTranscript('');
+        try {
+            navigator.mediaDevices
+                .getUserMedia({ audio: true })
+                .then(function (_stream) {
+                if (!speechConfig) {
+                    speechConfig = speechSdk.SpeechConfig.fromSubscription(AZURE_COGNITIVE_SERVICES_TTS_KEY, 'eastus');
+                    speechConfig.speechRecognitionLanguage = getCultureCodeByLanguage(userLang);
+                }
+                const audioConfig = speechSdk.AudioConfig.fromDefaultMicrophoneInput();
+                recognizer = new speechSdk.SpeechRecognizer(speechConfig, audioConfig);
+                setListening(true);
+                recognizer.recognized = (_s, e) => {
+                    var _a;
+                    if (e.result.reason === speechSdk.ResultReason.RecognizedSpeech) {
+                        setTranscript((_a = e.result.text) !== null && _a !== void 0 ? _a : '');
+                    }
+                    else if (e.result.reason === speechSdk.ResultReason.NoMatch) {
+                        console.debug('NOMATCH: Speech could not be recognized.');
+                    }
+                };
+                recognizer.canceled = (_s, e) => {
+                    if (e.reason === speechSdk.CancellationReason.Error) {
+                        console.debug(`"CANCELED: ErrorCode=${e.errorCode}`);
+                        console.debug(`"CANCELED: ErrorDetails=${e.errorDetails}`);
+                        console.debug('CANCELED: Did you set the speech resource key and region values?');
+                    }
+                    stopListening();
+                };
+                recognizer.sessionStopped = (_s, _e) => {
+                    if (recognizer)
+                        recognizer.stopContinuousRecognitionAsync();
+                };
+                recognizer.startContinuousRecognitionAsync();
+            })
+                .catch(console.error);
+        }
+        catch (error) {
+            console.error(error);
+        }
+    };
+    const stopListening = () => {
+        if (recognizer) {
+            recognizer.stopContinuousRecognitionAsync();
+            recognizer.close();
+            recognizer = null;
+            setListening(false);
+        }
+    };
+    const clearListening = () => {
+        stopListening();
+        clearListeningTimeout();
+    };
+    const resetListening = () => {
+        if (listening) {
+            clearListening();
+            resetTranscript();
+            setUserMessage('');
+            startListening();
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        return () => clearListening();
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if ((currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.state) === 'Z0')
+            clearListening();
+    }, [currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.state]);
+    (0, react_1.useEffect)(() => {
+        if (hasUserActivatedSpeak &&
+            !preview &&
+            !muteSpeaker &&
+            history.length > 0 &&
+            (currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.emission)) {
+            speak(currentDialogState.emission, currentDialogState.state !== 'Z0');
+        }
+    }, [currentDialogState, hasUserActivatedSpeak]);
+    const [requestedListening, setRequestedListening] = (0, react_1.useState)(false);
+    const onEndSpeakStartListen = (0, react_1.useCallback)((_e) => {
+        if (isPlayingAudio && speechSynthesizer) {
+            speechSynthesizer.close();
+            speechSynthesizer = null;
+        }
+        if (continuousSpeech &&
+            (hasUserActivatedListening || !requestedListening)) {
+            setRequestedListening(true);
+            startListening();
+        }
+    }, [continuousSpeech, hasUserActivatedListening]);
+    (0, react_1.useEffect)(() => {
+        if (!isPlayingAudio && continuousSpeech && hasUserActivatedListening)
+            startListening();
+        else if (isPlayingAudio && listening) {
+            stopListening();
+        }
+    }, [isPlayingAudio]);
+    (0, react_1.useEffect)(() => {
+        document.addEventListener('endSpeakStartListen', onEndSpeakStartListen);
+        return () => {
+            document.removeEventListener('endSpeakStartListen', onEndSpeakStartListen);
+        };
+    }, [onEndSpeakStartListen]);
+    (0, react_1.useEffect)(() => {
+        resetListening();
+    }, [language]);
+    const [sendOnEnter, setSendOnEnter] = (0, react_1.useState)('keypress');
+    (0, react_1.useEffect)(() => {
+        const stored = (0, configuration_1.getLocalConfig)('sendOnEnter', 'keypress');
+        setSendOnEnter(stored);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        (0, configuration_1.setLocalConfig)('sendOnEnter', sendOnEnter);
+    }, [sendOnEnter]);
+    const [attachmentsMenuOpen, setAttachmentsMenuOpen] = (0, react_1.useState)();
+    const globalBackground = integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.globalBackground;
+    const globalBackgroundUrl = globalBackground
+        ? `url(${globalBackground})`
+        : null;
+    const integrationProperties = (integration
+        ? {
+            '--memori-chat-bubble-bg': '#fff',
+            ...(integrationConfig && !showInstruct
+                ? { '--memori-text-color': (_l = integrationConfig.textColor) !== null && _l !== void 0 ? _l : '#000' }
+                : {}),
+            ...((integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.buttonBgColor)
+                ? {
+                    '--memori-button-bg': integrationConfig.buttonBgColor,
+                    '--memori-button-hover-brightness': '1.2',
+                    '--ant-primary-color': integrationConfig.buttonBgColor,
+                    '--ant-primary-color-hover': integrationConfig.buttonBgColor,
+                    '--ant-primary-4': integrationConfig.buttonBgColor,
+                    '--ant-primary-5': integrationConfig.buttonBgColor,
+                    '--ant-primary-7': integrationConfig.buttonBgColor,
+                }
+                : {
+                    '--memori-button-hover-brightness': '1',
+                }),
+            ...((integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.buttonTextColor)
+                ? {
+                    '--memori-button-text': integrationConfig.buttonTextColor,
+                    '--ant-primary-text': integrationConfig.buttonTextColor,
+                }
+                : {}),
+            ...((integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.blurBackground)
+                ? {
+                    '--memori-blur-background': '5px',
+                }
+                : {
+                    '--memori-blur-background': '0px',
+                }),
+            ...((integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.innerBgColor)
+                ? {
+                    '--memori-inner-bg': `rgba(${integrationConfig.innerBgColor === 'dark'
+                        ? '0, 0, 0'
+                        : '255, 255, 255'}, ${(_m = integrationConfig.innerBgAlpha) !== null && _m !== void 0 ? _m : 0.4})`,
+                    '--memori-inner-content-pad': '1.5rem',
+                    '--memori-nav-bg-image': 'none',
+                    '--memori-nav-bg': `rgba(${integrationConfig.innerBgColor === 'dark'
+                        ? '0, 0, 0'
+                        : '255, 255, 255'}, ${(_o = integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.innerBgAlpha) !== null && _o !== void 0 ? _o : 0.4})`,
+                }
+                : {
+                    '--memori-inner-content-pad': '0px',
+                }),
+        }
+        : {});
+    const integrationStylesheet = `
+    ${preview ? '#preview' : ':root'} {
+      ${Object.entries(integrationProperties)
+        .map(([key, value]) => `${key}: ${value};`)
+        .join('\n')}
+    }
+  `;
+    const [avatar3dVisible, setAvatar3dVisible] = (0, react_1.useState)(true);
+    const [gamificationLevel, setGamificationLevel] = (0, react_1.useState)();
+    const getGamificationPoints = async (memoriID) => {
+        let gamificationPoints;
+        let unansQuestions;
+        try {
+            const { contentQualityIndex, answerQualityIndex, unansweredQuestions, ...cqResp } = await getContentQualityIndexes(memoriID);
+            if (cqResp.resultCode === 0) {
+                gamificationPoints = contentQualityIndex;
+                unansQuestions = unansweredQuestions;
+            }
+        }
+        catch (_e) {
+            let err = _e;
+            console.error('[APPCONTEXT/QUERYGAMIFICATIONPOINTS]', err);
+        }
+        return {
+            points: gamificationPoints !== null && gamificationPoints !== void 0 ? gamificationPoints : 0,
+            unansweredQuestions: unansQuestions !== null && unansQuestions !== void 0 ? unansQuestions : 0,
+        };
+    };
+    (0, react_1.useEffect)(() => {
+        if (memori.engineMemoriID) {
+            getGamificationPoints(memori.engineMemoriID)
+                .then(value => {
+                setGamificationLevel((0, statistics_1.getGamificationLevel)(value.points));
+            })
+                .catch(console.error);
+        }
+    }, [memori.engineMemoriID]);
+    (0, react_1.useEffect)(() => {
+        if (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.seoTitle) {
+            let meta = document.createElement('meta');
+            meta.setAttribute('property', 'og:title');
+            meta.setAttribute('content', integrationConfig.seoTitle);
+            document.head.append(meta);
+        }
+        if (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.seoDescription) {
+            let meta = document.createElement('meta');
+            meta.setAttribute('property', 'og:description');
+            meta.setAttribute('content', integrationConfig.seoDescription);
+            document.head.append(meta);
+        }
+        if (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.seoUrl) {
+            let meta = document.createElement('meta');
+            meta.setAttribute('property', 'og:url');
+            meta.setAttribute('content', integrationConfig.seoUrl);
+            document.head.append(meta);
+        }
+        let image = ogImage || memori.avatarURL;
+        if ((integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.seoImageShowAvatar) && image) {
+            let meta = document.createElement('meta');
+            meta.setAttribute('property', 'og:image');
+            meta.setAttribute('content', image);
+            document.head.append(meta);
+        }
+    }, [integrationConfig, memori.avatarURL, ogImage]);
+    const selectReceiverTag = async (tag) => {
+        var _a;
+        if (!sessionId)
+            return;
+        try {
+            const { currentState, ...resp } = await postTagChangedEvent(sessionId, tag);
+            if (resp.resultCode === 0) {
+                pushMessage({
+                    text: tag,
+                    fromUser: true,
+                });
+                if (currentState.state === 'X4' && memori.giverTag) {
+                    const { currentState, ...resp } = await client.postTagChangedEvent(sessionId, memori.giverTag);
+                    if (resp.resultCode === 0) {
+                        setCurrentDialogState(currentState);
+                        if (currentState.emission) {
+                            pushMessage({
+                                text: currentState.emission,
+                                media: currentState.media,
+                                fromUser: false,
+                            });
+                        }
+                    }
+                    else {
+                        console.error(resp);
+                        Message_1.default.error(t((0, error_1.getErrori18nKey)(resp.resultCode), {
+                            ns: 'common',
+                        }));
+                    }
+                }
+                else {
+                    setCurrentDialogState(currentState);
+                    if (currentState.emission) {
+                        pushMessage({
+                            text: currentState.emission,
+                            media: currentState.media,
+                            fromUser: false,
+                        });
+                    }
+                }
+            }
+            else {
+                console.error(resp, tag, (_a = currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.knownTags) === null || _a === void 0 ? void 0 : _a[tag]);
+                Message_1.default.error(t((0, error_1.getErrori18nKey)(resp.resultCode), { ns: 'common' }));
+            }
+        }
+        catch (e) {
+            let err = e;
+            console.error(err);
+            Message_1.default.error(err.message);
+        }
+    };
+    const simulateUserPrompt = (text, translatedText) => {
+        stopListening();
+        sendMessage(text, undefined, undefined, false, translatedText);
+    };
+    const onClickStart = async () => {
+        setClickedStart(true);
+        initializeTTS();
+        if ((!sessionId &&
+            ((memori.privacyType === 'SECRET' && !memori.secretToken) ||
+                (memori.privacyType === 'PRIVATE' && !memori.secretToken))) ||
+            (!sessionId && gotErrorInOpening)) {
+            setAuthModalState('password');
+            setClickedStart(false);
+        }
+        else if (!sessionId) {
+            console.info('No session ID');
+            setClickedStart(false);
+            setGotErrorInOpening(true);
+            return;
+        }
+        else {
+            try {
+                if (!instruct && personification) {
+                    try {
+                        if (!embed) {
+                            setHistory([]);
+                            console.debug('change tag #1');
+                            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).finally(() => {
+                                    setHasUserActivatedSpeak(true);
+                                });
+                            }
+                            else {
+                                console.error('session #1', session);
+                                throw new Error('No session');
+                            }
+                        }
+                        else {
+                            if (currentDialogState) {
+                                setHistory([]);
+                                translateDialogState(currentDialogState, userLang).finally(() => {
+                                    setHasUserActivatedSpeak(true);
+                                });
+                            }
+                            else {
+                                setHasUserActivatedSpeak(true);
+                            }
+                        }
+                    }
+                    catch (e) {
+                        console.error('session #2', e);
+                        reopenSession(true, memori === null || memori === void 0 ? void 0 : memori.secretToken, undefined, personification.tag, personification.pin).then(() => {
+                            setHasUserActivatedSpeak(true);
+                        });
+                    }
+                }
+                else if (!instruct && (currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.currentTag) !== constants_1.anonTag) {
+                    try {
+                        if (!embed) {
+                            setHistory([]);
+                            console.debug('change tag #2');
+                            await changeTag(memori.engineMemoriID, sessionId, '-');
+                            const session = await changeTag(memori.engineMemoriID, sessionId, constants_1.anonTag);
+                            if (session && session.resultCode === 0) {
+                                translateDialogState(session.currentState, userLang).finally(() => {
+                                    setHasUserActivatedSpeak(true);
+                                });
+                            }
+                            else {
+                                console.error('session #3', session);
+                                throw new Error('No session');
+                            }
+                        }
+                        else {
+                            if (currentDialogState) {
+                                setHistory([]);
+                                translateDialogState(currentDialogState, userLang).finally(() => {
+                                    setHasUserActivatedSpeak(true);
+                                });
+                            }
+                            else {
+                                setHasUserActivatedSpeak(true);
+                            }
+                        }
+                    }
+                    catch (e) {
+                        console.error('session #4', e);
+                        reopenSession(true, memori === null || memori === void 0 ? void 0 : memori.secretToken, undefined, undefined, undefined, initialContextVars, initialQuestion).then(() => {
+                            setHasUserActivatedSpeak(true);
+                        });
+                    }
+                }
+                else if (instruct &&
+                    memori.giverTag &&
+                    (currentDialogState === null || currentDialogState === void 0 ? void 0 : currentDialogState.currentTag) !== memori.giverTag) {
+                    try {
+                        if (!embed) {
+                            setHistory([]);
+                            console.debug('change tag #3');
+                            await changeTag(memori.engineMemoriID, sessionId, '-');
+                            const session = await changeTag(memori.engineMemoriID, sessionId, memori.giverTag, memori.giverPIN);
+                            if (session && session.resultCode === 0) {
+                                translateDialogState(session.currentState, userLang).finally(() => {
+                                    setHasUserActivatedSpeak(true);
+                                });
+                            }
+                            else {
+                                console.error('session #5', session);
+                                throw new Error('No session');
+                            }
+                        }
+                        else {
+                            if (currentDialogState) {
+                                setHistory([]);
+                                translateDialogState(currentDialogState, userLang).finally(() => {
+                                    setHasUserActivatedSpeak(true);
+                                });
+                            }
+                            else {
+                                setHasUserActivatedSpeak(true);
+                            }
+                        }
+                    }
+                    catch (e) {
+                        console.error('session #6', e);
+                        reopenSession(true, memori === null || memori === void 0 ? void 0 : memori.secretToken, undefined, memori === null || memori === void 0 ? void 0 : memori.giverTag, memori === null || memori === void 0 ? void 0 : memori.giverPIN, initialContextVars, initialQuestion).then(() => {
+                            setHasUserActivatedSpeak(true);
+                        });
+                    }
+                }
+                else {
+                    try {
+                        if (!embed) {
+                            setHistory([]);
+                            console.debug('change tag #4');
+                            await changeTag(memori.engineMemoriID, sessionId, '-');
+                            const session = await changeTag(memori.engineMemoriID, sessionId, instruct
+                                ? memori.giverTag
+                                : personification
+                                    ? personification.tag
+                                    : constants_1.anonTag, instruct
+                                ? memori.giverPIN
+                                : personification
+                                    ? personification.pin
+                                    : undefined);
+                            if (session && session.resultCode === 0) {
+                                translateDialogState(session.currentState, userLang).finally(() => {
+                                    setHasUserActivatedSpeak(true);
+                                });
+                            }
+                            else {
+                                console.error('session #7', session);
+                                throw new Error('No session');
+                            }
+                        }
+                        else {
+                            if (currentDialogState) {
+                                setHistory([]);
+                                translateDialogState(currentDialogState, userLang).finally(() => {
+                                    setHasUserActivatedSpeak(true);
+                                });
+                            }
+                            else {
+                                setHasUserActivatedSpeak(true);
+                            }
+                        }
+                    }
+                    catch (e) {
+                        console.error('session #8', e);
+                        reopenSession(true, memori === null || memori === void 0 ? void 0 : memori.secretToken, undefined, memori === null || memori === void 0 ? void 0 : memori.giverTag, memori === null || memori === void 0 ? void 0 : memori.giverPIN, initialContextVars, initialQuestion).then(() => {
+                            setHasUserActivatedSpeak(true);
+                        });
+                    }
+                }
+            }
+            catch (e) {
+                let err = e;
+                console.error('session #0', err);
+                reopenSession(true, memori.secretToken, undefined, memori.giverTag, memori.giverPIN, initialContextVars, initialQuestion);
+            }
+        }
+    };
+    const header = (react_1.default.createElement(Header_1.default, { memori: memori, history: history, showShare: showShare, position: position, setShowPositionDrawer: setShowPositionDrawer, setShowSettingsDrawer: setShowSettingsDrawer, speakerMuted: muteSpeaker, setSpeakerMuted: setMuteSpeaker, showSettings: showSettings, hasUserActivatedSpeak: hasUserActivatedSpeak }));
+    const avatar = (react_1.default.createElement(Avatar_1.default, { memori: memori, integration: integration, integrationConfig: integrationConfig, tenant: tenant, instruct: instruct, avatar3dVisible: avatar3dVisible, setAvatar3dVisible: setAvatar3dVisible, hasUserActivatedSpeak: hasUserActivatedSpeak, isPlayingAudio: isPlayingAudio, baseUrl: baseUrl }));
+    const startPanel = (react_1.default.createElement(StartPanel_1.default, { memori: memori, tenant: tenant, gamificationLevel: gamificationLevel, language: language, userLang: userLang, setUserLang: setUserLang, baseUrl: baseUrl, position: position, openPositionDrawer: () => setShowPositionDrawer(true), integrationConfig: integrationConfig, instruct: instruct, sessionId: sessionId, clickedStart: clickedStart, onClickStart: onClickStart }));
+    const chat = sessionId ? (react_1.default.createElement(Chat_1.default, { memori: memori, sessionID: sessionId, tenant: tenant, translateTo: isMultilanguageEnabled &&
+            userLang.toUpperCase() !==
+                ((_u = ((_t = (_r = (_q = (_p = memori.culture) === null || _p === void 0 ? void 0 : _p.split('-')) === null || _q === void 0 ? void 0 : _q[0]) !== null && _r !== void 0 ? _r : i18n.language) !== null && _t !== void 0 ? _t : 'IT')) === null || _u === void 0 ? void 0 : _u.toUpperCase())
+            ? userLang
+            : undefined, baseUrl: baseUrl, memoriTyping: memoriTyping, history: history, dialogState: currentDialogState, setDialogState: setCurrentDialogState, pushMessage: pushMessage, simulateUserPrompt: simulateUserPrompt, showDates: showDates, showContextPerLine: showContextPerLine, client: client, selectReceiverTag: selectReceiverTag, preview: preview, sendOnEnter: sendOnEnter, setSendOnEnter: setSendOnEnter, attachmentsMenuOpen: attachmentsMenuOpen, setAttachmentsMenuOpen: setAttachmentsMenuOpen, instruct: instruct, showInputs: showInputs, userMessage: userMessage, onChangeUserMessage: onChangeUserMessage, sendMessage: (msg) => {
+            stopListening();
+            sendMessage(msg);
+            setUserMessage('');
+            resetTranscript();
+        }, stopListening: stopListening, resetTranscript: resetTranscript })) : null;
+    const integrationBackground = integration && globalBackgroundUrl ? (react_1.default.createElement("div", { className: "memori--global-background" },
+        react_1.default.createElement("div", { className: "memori--global-background-image", style: { backgroundImage: globalBackgroundUrl } }))) : null;
+    const integrationStyle = integration ? (react_1.default.createElement("style", { dangerouslySetInnerHTML: { __html: integrationStylesheet } })) : null;
+    const onChangeMode = (mode) => {
+        setInstruct(mode === 'instruct');
+        setHasUserActivatedSpeak(false);
+        setClickedStart(false);
+    };
+    const changeMode = (react_1.default.createElement(ChangeMode_1.default, { instruct: instruct, onChangeMode: onChangeMode }));
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)('memori', 'memori-widget', {
+            'memori--preview': preview,
+            'memori--embed': embed,
+            'memori--with-integration': integration,
+            'memori--active': hasUserActivatedSpeak,
+        }), "data-memori-engine-state": JSON.stringify({
+            ...currentDialogState,
+            sessionID: sessionId,
+        }) },
+        react_1.default.createElement(Default_1.default, { header: header, avatar: avatar, chat: chat, startPanel: startPanel, integrationStyle: integrationStyle, integrationBackground: integrationBackground, changeMode: changeMode, sessionId: sessionId, hasUserActivatedSpeak: hasUserActivatedSpeak, showInstruct: showInstruct, loading: loading })));
+};
+exports.default = MemoriWidget;
+//# sourceMappingURL=MemoriWidget.js.map