@memori.ai/memori-react 1.2.0 → 2.0.0

package/dist/components/MemoriWidget/MemoriWidget.js

@@ -18,13 +18,16 @@ const Header_1 = tslib_1.__importDefault(require("../Header/Header"));
 const AttachmentMediaModal_1 = tslib_1.__importDefault(require("../AttachmentMediaModal/AttachmentMediaModal"));
 const AttachmentLinkModal_1 = tslib_1.__importDefault(require("../AttachmentLinkModal/AttachmentLinkModal"));
 const PoweredBy_1 = tslib_1.__importDefault(require("../PoweredBy/PoweredBy"));
-const Default_1 = tslib_1.__importDefault(require("../layouts/Default"));
+const FullPage_1 = tslib_1.__importDefault(require("../layouts/FullPage"));
+const Totem_1 = tslib_1.__importDefault(require("../layouts/Totem"));
 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 AgeVerificationModal_1 = tslib_1.__importDefault(require("../AgeVerificationModal/AgeVerificationModal"));
+const SettingsDrawer_1 = tslib_1.__importDefault(require("../SettingsDrawer/SettingsDrawer"));
 const getMemoriState = (integrationId) => {
     var _a, _b, _c, _d, _f;
     let widget = integrationId
@@ -77,13 +80,12 @@ const typeMessage = (message) => {
 };
 window.getMemoriState = getMemoriState;
 window.typeMessage = typeMessage;
-const silenceSeconds = [2, 3, 5, 10, 15, 20, 30, 60];
 let recognizer;
 let speechConfig;
 let speechSynthesizer;
 let audioDestination;
 let audioContext;
-const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInstruct = false, showShare = true, preview = false, embed = false, showInputs = true, showDates = false, showContextPerLine = false, showSettings = false, 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, }) => {
+const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, layout = 'DEFAULT', showInstruct = false, showShare = true, 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, }) => {
     var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _t, _u, _v;
     const { t, i18n } = (0, react_i18next_1.useTranslation)();
     const [isClient, setIsClient] = (0, react_1.useState)(false);
@@ -92,7 +94,6 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
     }, []);
     const client = (0, memori_api_client_1.default)(apiUrl);
     const { initSession, postTextEnteredEvent, postPlaceChangedEvent, postTimeoutEvent, postTagChangedEvent, getSession, getContentQualityIndexes, } = client;
-    const { uploadAsset, getUploadAssetURL, deleteAsset } = client.backend;
     const [instruct, setInstruct] = (0, react_1.useState)(false);
     const [clickedStart, setClickedStart] = (0, react_1.useState)(false);
     const [gotErrorInOpening, setGotErrorInOpening] = (0, react_1.useState)(false);
@@ -104,21 +105,24 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
     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 selectedLayout = layout || (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.layout) || 'DEFAULT';
     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 [muteSpeaker, setMuteSpeaker] = (0, react_1.useState)(false);
     const [continuousSpeech, setContinuousSpeech] = (0, react_1.useState)(true);
-    const [continuousSpeechTimeout, setContinuousSpeechTimeout] = (0, react_1.useState)(3);
+    const [continuousSpeechTimeout, setContinuousSpeechTimeout] = (0, react_1.useState)(2);
     const [isPlayingAudio, setIsPlayingAudio] = (0, react_1.useState)(false);
+    const [controlsPosition, setControlsPosition] = (0, react_1.useState)('center');
     (0, react_1.useEffect)(() => {
         setIsPlayingAudio(!!speechSynthesizer);
     }, [speechSynthesizer]);
     (0, react_1.useEffect)(() => {
         setMuteSpeaker((0, configuration_1.getLocalConfig)('muteSpeaker', false));
         setContinuousSpeech((0, configuration_1.getLocalConfig)('continuousSpeech', true));
-        setContinuousSpeechTimeout((0, configuration_1.getLocalConfig)('continuousSpeechTimeout', 3));
+        setContinuousSpeechTimeout((0, configuration_1.getLocalConfig)('continuousSpeechTimeout', 2));
+        setControlsPosition((0, configuration_1.getLocalConfig)('controlsPosition', 'center'));
     }, []);
     const [memoriPwd, setMemoriPwd] = (0, react_1.useState)(secret);
     const [memoriTokens, setMemoriTokens] = (0, react_1.useState)();
@@ -328,6 +332,15 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
         }
         return translatedState;
     };
+    const minAge = memori.ageRestriction
+        ? memori.ageRestriction
+        : memori.nsfw
+            ? 18
+            : memori.enableCompletions
+                ? 14
+                : 0;
+    const [birthDate, setBirthDate] = (0, react_1.useState)();
+    const [showAgeVerification, setShowAgeVerification] = (0, react_1.useState)(false);
     const [sessionId, setSessionId] = (0, react_1.useState)(initialSessionID);
     const [currentDialogState, _setCurrentDialogState] = (0, react_1.useState)();
     const setCurrentDialogState = (state) => {
@@ -345,6 +358,11 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
             setAuthModalState('password');
             return;
         }
+        let storageBirthDate = (0, configuration_1.getLocalConfig)('birthDate', undefined);
+        if (!(birthDate || storageBirthDate) && !!minAge) {
+            setShowAgeVerification(true);
+            return;
+        }
         setLoading(true);
         try {
             if (!memori.giverTag && !!((_a = memori.receivedInvitations) === null || _a === void 0 ? void 0 : _a.length)) {
@@ -367,6 +385,11 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
                     sessionID: session.sessionID,
                 };
             }
+            else if (session === null || session === void 0 ? void 0 : session.resultMessage.startsWith('This Memori is aged restricted')) {
+                console.error(session);
+                Message_1.default.error(t('underageTwinSession', { age: minAge }));
+                setGotErrorInOpening(true);
+            }
             else {
                 console.error(session);
                 Message_1.default.error(t((0, error_1.getErrori18nKey)(session === null || session === void 0 ? void 0 : session.resultCode)));
@@ -378,10 +401,11 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
             new Error('Error fetching session');
         }
     };
-    const reopenSession = async (updateDialogState = false, password, recoveryTokens, tag, pin, initialContextVars, initialQuestion) => {
+    const reopenSession = async (updateDialogState = false, password, recoveryTokens, tag, pin, initialContextVars, initialQuestion, birthDate) => {
         var _a;
         setLoading(true);
         try {
+            let storageBirthDate = (0, configuration_1.getLocalConfig)('birthDate', undefined);
             const { sessionID, currentState, ...response } = await initSession({
                 memoriID: (_a = memori.engineMemoriID) !== null && _a !== void 0 ? _a : '',
                 password,
@@ -390,6 +414,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
                 pin,
                 initialContextVars,
                 initialQuestion,
+                birthDate: birthDate || storageBirthDate || undefined,
             });
             if (sessionID && currentState && response.resultCode === 0) {
                 setSessionId(sessionID);
@@ -419,6 +444,11 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
                     sessionID,
                 };
             }
+            else if (response === null || response === void 0 ? void 0 : response.resultMessage.startsWith('This Memori is aged restricted')) {
+                console.error(response);
+                Message_1.default.error(t('underageTwinSession', { age: minAge }));
+                setGotErrorInOpening(true);
+            }
             else {
                 console.error(response);
                 Message_1.default.error(t((0, error_1.getErrori18nKey)(response.resultCode)));
@@ -462,6 +492,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
                 }
                 else if ([400, 401, 403, 404, 500].includes(resultCode)) {
                     console.warn('[APPCONTEXT/CHANGETAG]', resultCode);
+                    let storageBirthDate = (0, configuration_1.getLocalConfig)('birthDate', undefined);
                     fetchSession({
                         memoriID: (_a = memori.engineMemoriID) !== null && _a !== void 0 ? _a : '',
                         password: secret || memori.secretToken,
@@ -469,6 +500,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
                         pin: memori.giverPIN,
                         initialContextVars,
                         initialQuestion,
+                        birthDate: birthDate || storageBirthDate || undefined,
                     });
                 }
                 else if (!!currentState) {
@@ -749,6 +781,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
     const speak = (text) => {
         if (!AZURE_COGNITIVE_SERVICES_TTS_KEY)
             return;
+        stopListening();
         if (preview)
             return;
         if (muteSpeaker) {
@@ -757,9 +790,6 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
             }
             return;
         }
-        if (listening) {
-            stopListening();
-        }
         if (audioDestination)
             audioDestination.pause();
         let isSafari = window.navigator.userAgent.includes('Safari') &&
@@ -814,9 +844,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
         audioDestination.onAudioEnd = () => {
             setIsPlayingAudio(false);
             source.disconnect();
-            if (continuousSpeech) {
-                document.dispatchEvent(new Event('endSpeakStartListen'));
-            }
+            onEndSpeakStartListen();
         };
         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 => {
@@ -944,6 +972,8 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
                 recognizer = new speechSdk.SpeechRecognizer(speechConfig, audioConfig);
                 setListening(true);
                 recognizer.recognized = (_s, e) => {
+                    if (!e.result.text)
+                        return;
                     if (e.result.reason === speechSdk.ResultReason.RecognizedSpeech) {
                         let transcript = e.result.text;
                         setTranscript(transcript || '');
@@ -1017,7 +1047,10 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
         }
     }, [continuousSpeech, hasUserActivatedListening]);
     (0, react_1.useEffect)(() => {
-        if (!isPlayingAudio && continuousSpeech && hasUserActivatedListening)
+        if (history.length > 1 &&
+            !isPlayingAudio &&
+            continuousSpeech &&
+            (hasUserActivatedListening || !requestedListening))
             startListening();
         else if (isPlayingAudio && listening) {
             stopListening();
@@ -1097,8 +1130,10 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
         : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showAIicon;
     const [avatar3dVisible, setAvatar3dVisible] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
-        if (window.innerWidth >= 768)
+        if ((window.innerWidth >= 768 && selectedLayout === 'FULLPAGE') ||
+            selectedLayout !== 'FULLPAGE') {
             setAvatar3dVisible(true);
+        }
     }, []);
     const [gamificationLevel, setGamificationLevel] = (0, react_1.useState)();
     const getGamificationPoints = async (memoriID) => {
@@ -1208,6 +1243,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
     };
     const simulateUserPrompt = (text, translatedText) => {
         stopListening();
+        stopAudio();
         sendMessage(text, undefined, undefined, false, translatedText);
     };
     const onClickStart = async (session) => {
@@ -1223,6 +1259,8 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
                 console.error('error playing intro audio', e);
             });
         }
+        let storageBirthDate = (0, configuration_1.getLocalConfig)('birthDate', undefined);
+        let birth = birthDate || storageBirthDate || undefined;
         if ((!sessionID &&
             memori.privacyType !== 'PUBLIC' &&
             !memori.secretToken &&
@@ -1233,6 +1271,10 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
             setClickedStart(false);
             return;
         }
+        else if (!sessionID && !!minAge && !birth) {
+            setShowAgeVerification(true);
+            setClickedStart(false);
+        }
         else if (!sessionID) {
             setClickedStart(false);
             setGotErrorInOpening(false);
@@ -1243,6 +1285,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
                 pin: personification === null || personification === void 0 ? void 0 : personification.pin,
                 initialContextVars,
                 initialQuestion,
+                birthDate: birth,
             });
             if (session === null || session === void 0 ? void 0 : session.dialogState) {
                 setHistory([]);
@@ -1297,7 +1340,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
                 }
                 catch (e) {
                     console.error('session #2', 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(() => {
+                    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, birth).then(() => {
                         setHasUserActivatedSpeak(true);
                     });
                 }
@@ -1327,7 +1370,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
                 }
                 catch (e) {
                     console.error('session #5', e);
-                    reopenSession(true, memori === null || memori === void 0 ? void 0 : memori.secretToken, undefined, personification.tag, personification.pin, initialContextVars, initialQuestion).then(() => {
+                    reopenSession(true, memori === null || memori === void 0 ? void 0 : memori.secretToken, undefined, personification.tag, personification.pin, initialContextVars, initialQuestion, birth).then(() => {
                         setHasUserActivatedSpeak(true);
                     });
                 }
@@ -1357,7 +1400,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
                 }
                 catch (e) {
                     console.error('session #8', e);
-                    reopenSession(true, memori === null || memori === void 0 ? void 0 : memori.secretToken, undefined, undefined, undefined, initialContextVars, initialQuestion).then(() => {
+                    reopenSession(true, memori === null || memori === void 0 ? void 0 : memori.secretToken, undefined, undefined, undefined, initialContextVars, initialQuestion, birth).then(() => {
                         setHasUserActivatedSpeak(true);
                     });
                 }
@@ -1429,20 +1472,21 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
                 source.buffer = buffer;
                 source.connect(audioContext.destination);
             }
-        }, showSettings: showSettings, hasUserActivatedSpeak: hasUserActivatedSpeak }));
+        }, showSettings: showSettings, hasUserActivatedSpeak: hasUserActivatedSpeak, showReload: selectedLayout === 'TOTEM' }));
     const avatar = ((0, jsx_runtime_1.jsx)(Avatar_1.default, { memori: memori, integration: integration, integrationConfig: integrationConfig, tenant: tenant, instruct: instruct, avatar3dVisible: avatar3dVisible, setAvatar3dVisible: setAvatar3dVisible, hasUserActivatedSpeak: hasUserActivatedSpeak, isPlayingAudio: isPlayingAudio, loading: memoriTyping, baseUrl: baseUrl, apiUrl: apiUrl }));
     const startPanel = ((0, jsx_runtime_1.jsx)(StartPanel_1.default, { memori: memori, tenant: tenant, gamificationLevel: gamificationLevel, language: language, userLang: userLang, setUserLang: setUserLang, baseUrl: baseUrl, apiUrl: apiUrl, position: position, openPositionDrawer: () => setShowPositionDrawer(true), integrationConfig: integrationConfig, instruct: instruct, sessionId: sessionId, clickedStart: clickedStart, onClickStart: onClickStart, initializeTTS: initializeTTS }));
     const chat = sessionId ? ((0, jsx_runtime_1.jsx)(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, apiUrl: apiUrl, memoriTyping: memoriTyping, history: history, authToken: loginToken, dialogState: currentDialogState, setDialogState: setCurrentDialogState, pushMessage: pushMessage, simulateUserPrompt: simulateUserPrompt, showDates: showDates, showContextPerLine: showContextPerLine, showAIicon: showAIicon, client: client, selectReceiverTag: selectReceiverTag, preview: preview, sendOnEnter: sendOnEnter, setSendOnEnter: setSendOnEnter, attachmentsMenuOpen: attachmentsMenuOpen, setAttachmentsMenuOpen: setAttachmentsMenuOpen, instruct: instruct, showInputs: showInputs, showMicrophone: !!AZURE_COGNITIVE_SERVICES_TTS_KEY, userMessage: userMessage, onChangeUserMessage: onChangeUserMessage, sendMessage: (msg) => {
+            : undefined, baseUrl: baseUrl, apiUrl: apiUrl, memoriTyping: memoriTyping, history: layout === 'TOTEM' ? history.slice(-2) : history, authToken: loginToken, dialogState: currentDialogState, setDialogState: setCurrentDialogState, pushMessage: pushMessage, simulateUserPrompt: simulateUserPrompt, showDates: showDates, showContextPerLine: showContextPerLine, showAIicon: showAIicon, client: client, selectReceiverTag: selectReceiverTag, preview: preview, sendOnEnter: sendOnEnter, setSendOnEnter: setSendOnEnter, attachmentsMenuOpen: attachmentsMenuOpen, setAttachmentsMenuOpen: setAttachmentsMenuOpen, instruct: instruct, showInputs: showInputs, showMicrophone: !!AZURE_COGNITIVE_SERVICES_TTS_KEY, userMessage: userMessage, onChangeUserMessage: onChangeUserMessage, sendMessage: (msg) => {
+            stopAudio();
             stopListening();
             sendMessage(msg);
             setUserMessage('');
             resetTranscript();
         }, stopListening: clearListening, startListening: startListening, stopAudio: stopAudio, resetTranscript: resetTranscript, listening: listening, isPlayingAudio: isPlayingAudio })) : null;
-    const integrationBackground = integration && globalBackgroundUrl ? ((0, jsx_runtime_1.jsx)("div", { className: "memori--global-background", children: (0, jsx_runtime_1.jsx)("div", { className: "memori--global-background-image", style: { backgroundImage: globalBackgroundUrl } }) })) : null;
+    const integrationBackground = integration && globalBackgroundUrl ? ((0, jsx_runtime_1.jsx)("div", { className: "memori--global-background", children: (0, jsx_runtime_1.jsx)("div", { className: "memori--global-background-image", style: { backgroundImage: globalBackgroundUrl } }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "memori--global-background no-background-image" }));
     const integrationStyle = integration ? ((0, jsx_runtime_1.jsx)("style", { dangerouslySetInnerHTML: { __html: integrationStylesheet } })) : null;
     const onChangeMode = (mode) => {
         setInstruct(mode === 'instruct');
@@ -1451,7 +1495,12 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
     };
     const changeMode = ((0, jsx_runtime_1.jsx)(ChangeMode_1.default, { canInstruct: !!memori.giverTag, instruct: instruct, onChangeMode: onChangeMode }));
     const poweredBy = (0, jsx_runtime_1.jsx)(PoweredBy_1.default, { tenant: tenant, userLang: userLang });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('memori', 'memori-widget', {
+    const Layout = selectedLayout === 'TOTEM'
+        ? Totem_1.default
+        : selectedLayout === 'FULLPAGE'
+            ? FullPage_1.default
+            : FullPage_1.default;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('memori', 'memori-widget', `memori-layout-${layout.toLowerCase()}`, `memori-controls-${controlsPosition.toLowerCase()}`, {
             'memori--preview': preview,
             'memori--embed': embed,
             'memori--with-integration': integration,
@@ -1459,12 +1508,12 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
         }), "data-memori-name": memori === null || memori === void 0 ? void 0 : memori.name, "data-memori-id": memori === null || memori === void 0 ? void 0 : memori.engineMemoriID, "data-memori-secondary-id": memori === null || memori === void 0 ? void 0 : memori.memoriID, "data-memori-session-id": sessionId, "data-memori-integration": integration === null || integration === void 0 ? void 0 : integration.integrationID, "data-memori-engine-state": JSON.stringify({
             ...currentDialogState,
             sessionID: sessionId,
-        }), style: { height }, children: [(0, jsx_runtime_1.jsx)(Default_1.default, { header: header, avatar: avatar, chat: chat, startPanel: startPanel, integrationStyle: integrationStyle, integrationBackground: integrationBackground, changeMode: changeMode, poweredBy: poweredBy, sessionId: sessionId, hasUserActivatedSpeak: hasUserActivatedSpeak, showInstruct: showInstruct, loading: loading }), (0, jsx_runtime_1.jsx)("audio", { id: "memori-audio", style: { display: 'none' }, src: "https://app.twincreator.com/intro.mp3" }), isClient && ((0, jsx_runtime_1.jsx)(Auth_1.default, { withModal: true, pwdOrTokens: authModalState, openModal: !!authModalState, setPwdOrTokens: setAuthModalState, showTokens: memori.privacyType === 'SECRET', onFinish: async (values) => {
+        }), style: { height }, children: [(0, jsx_runtime_1.jsx)(Layout, { header: header, avatar: avatar, chat: chat, startPanel: startPanel, integrationStyle: integrationStyle, integrationBackground: integrationBackground, changeMode: changeMode, poweredBy: poweredBy, sessionId: sessionId, hasUserActivatedSpeak: hasUserActivatedSpeak, showInstruct: showInstruct, loading: loading }), (0, jsx_runtime_1.jsx)("audio", { id: "memori-audio", style: { display: 'none' }, src: "https://app.twincreator.com/intro.mp3" }), isClient && ((0, jsx_runtime_1.jsx)(Auth_1.default, { withModal: true, pwdOrTokens: authModalState, openModal: !!authModalState, setPwdOrTokens: setAuthModalState, showTokens: memori.privacyType === 'SECRET', onFinish: async (values) => {
                     if (values['password'])
                         setMemoriPwd(values['password']);
                     if (values['tokens'])
                         setMemoriTokens(values['tokens']);
-                    reopenSession(!sessionId, values['password'], values['tokens'], instruct ? memori.giverTag : undefined, instruct ? memori.giverPIN : undefined, initialContextVars, initialQuestion)
+                    reopenSession(!sessionId, values['password'], values['tokens'], instruct ? memori.giverTag : undefined, instruct ? memori.giverPIN : undefined, initialContextVars, initialQuestion, birthDate)
                         .then(state => {
                         setAuthModalState(null);
                         onClickStart(state || undefined);
@@ -1473,7 +1522,25 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
                         setAuthModalState(null);
                         setGotErrorInOpening(true);
                     });
-                }, minimumNumberOfRecoveryTokens: (_v = memori === null || memori === void 0 ? void 0 : memori.minimumNumberOfRecoveryTokens) !== null && _v !== void 0 ? _v : 1 })), sessionId && ((0, jsx_runtime_1.jsx)(AttachmentLinkModal_1.default, { apiURL: apiUrl, visible: attachmentsMenuOpen === 'link', onCancel: () => setAttachmentsMenuOpen(undefined), onOk: async (link) => {
+                }, minimumNumberOfRecoveryTokens: (_v = memori === null || memori === void 0 ? void 0 : memori.minimumNumberOfRecoveryTokens) !== null && _v !== void 0 ? _v : 1 })), isClient && ((0, jsx_runtime_1.jsx)(AgeVerificationModal_1.default, { visible: showAgeVerification, minAge: minAge, onClose: birthDate => {
+                    if (birthDate) {
+                        setBirthDate(birthDate);
+                        (0, configuration_1.setLocalConfig)('birthDate', birthDate);
+                        reopenSession(!sessionId, memori === null || memori === void 0 ? void 0 : memori.secretToken, undefined, instruct ? memori.giverTag : undefined, instruct ? memori.giverPIN : undefined, initialContextVars, initialQuestion, birthDate)
+                            .then(state => {
+                            setShowAgeVerification(false);
+                            onClickStart(state || undefined);
+                        })
+                            .catch(() => {
+                            setShowAgeVerification(false);
+                            setGotErrorInOpening(true);
+                        });
+                    }
+                    else {
+                        setShowAgeVerification(false);
+                        setClickedStart(false);
+                    }
+                } })), showSettingsDrawer && ((0, jsx_runtime_1.jsx)(SettingsDrawer_1.default, { layout: selectedLayout, open: !!showSettingsDrawer, onClose: () => setShowSettingsDrawer(false), continuousSpeech: continuousSpeech, continuousSpeechTimeout: continuousSpeechTimeout, setContinuousSpeech: setContinuousSpeech, setContinuousSpeechTimeout: setContinuousSpeechTimeout, controlsPosition: controlsPosition, setControlsPosition: setControlsPosition })), sessionId && ((0, jsx_runtime_1.jsx)(AttachmentLinkModal_1.default, { apiURL: apiUrl, visible: attachmentsMenuOpen === 'link', onCancel: () => setAttachmentsMenuOpen(undefined), onOk: async (link) => {
                     if (!sessionId)
                         return;
                     let medium = {