@memori.ai/memori-react 1.2.0 → 2.0.0

package/esm/components/MemoriWidget/MemoriWidget.js

@@ -15,13 +15,16 @@ import Header from '../Header/Header';
 import AttachmentMediaModal from '../AttachmentMediaModal/AttachmentMediaModal';
 import AttachmentLinkModal from '../AttachmentLinkModal/AttachmentLinkModal';
 import PoweredBy from '../PoweredBy/PoweredBy';
-import DefaultLayout from '../layouts/Default';
+import FullPageLayout from '../layouts/FullPage';
+import TotemLayout from '../layouts/Totem';
 import { getTranslation } from '../../helpers/translations';
 import { setLocalConfig, getLocalConfig } from '../../helpers/configuration';
 import { hasTouchscreen, stripDuplicates } from '../../helpers/utils';
 import { anonTag } from '../../helpers/constants';
 import { getErrori18nKey } from '../../helpers/error';
 import { getGamificationLevel } from '../../helpers/statistics';
+import AgeVerificationModal from '../AgeVerificationModal/AgeVerificationModal';
+import SettingsDrawer from '../SettingsDrawer/SettingsDrawer';
 const getMemoriState = (integrationId) => {
     var _a, _b, _c, _d, _f;
     let widget = integrationId
@@ -74,13 +77,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 } = useTranslation();
     const [isClient, setIsClient] = useState(false);
@@ -89,7 +91,6 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
     }, []);
     const client = memoriApiClient(apiUrl);
     const { initSession, postTextEnteredEvent, postPlaceChangedEvent, postTimeoutEvent, postTagChangedEvent, getSession, getContentQualityIndexes, } = client;
-    const { uploadAsset, getUploadAssetURL, deleteAsset } = client.backend;
     const [instruct, setInstruct] = useState(false);
     const [clickedStart, setClickedStart] = useState(false);
     const [gotErrorInOpening, setGotErrorInOpening] = useState(false);
@@ -101,21 +102,24 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
     const isMultilanguageEnabled = !!(integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.multilanguage);
     const [loading, setLoading] = useState(false);
     const [memoriTyping, setMemoriTyping] = useState(false);
+    const selectedLayout = layout || (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.layout) || 'DEFAULT';
     const [hasUserActivatedSpeak, setHasUserActivatedSpeak] = useState(false);
     const [hasUserActivatedListening, setHasUserActivatedListening] = useState(false);
     const [showPositionDrawer, setShowPositionDrawer] = useState(false);
     const [showSettingsDrawer, setShowSettingsDrawer] = useState(false);
     const [muteSpeaker, setMuteSpeaker] = useState(false);
     const [continuousSpeech, setContinuousSpeech] = useState(true);
-    const [continuousSpeechTimeout, setContinuousSpeechTimeout] = useState(3);
+    const [continuousSpeechTimeout, setContinuousSpeechTimeout] = useState(2);
     const [isPlayingAudio, setIsPlayingAudio] = useState(false);
+    const [controlsPosition, setControlsPosition] = useState('center');
     useEffect(() => {
         setIsPlayingAudio(!!speechSynthesizer);
     }, [speechSynthesizer]);
     useEffect(() => {
         setMuteSpeaker(getLocalConfig('muteSpeaker', false));
         setContinuousSpeech(getLocalConfig('continuousSpeech', true));
-        setContinuousSpeechTimeout(getLocalConfig('continuousSpeechTimeout', 3));
+        setContinuousSpeechTimeout(getLocalConfig('continuousSpeechTimeout', 2));
+        setControlsPosition(getLocalConfig('controlsPosition', 'center'));
     }, []);
     const [memoriPwd, setMemoriPwd] = useState(secret);
     const [memoriTokens, setMemoriTokens] = useState();
@@ -325,6 +329,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] = useState();
+    const [showAgeVerification, setShowAgeVerification] = useState(false);
     const [sessionId, setSessionId] = useState(initialSessionID);
     const [currentDialogState, _setCurrentDialogState] = useState();
     const setCurrentDialogState = (state) => {
@@ -342,6 +355,11 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
             setAuthModalState('password');
             return;
         }
+        let storageBirthDate = 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)) {
@@ -364,6 +382,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.error(t('underageTwinSession', { age: minAge }));
+                setGotErrorInOpening(true);
+            }
             else {
                 console.error(session);
                 message.error(t(getErrori18nKey(session === null || session === void 0 ? void 0 : session.resultCode)));
@@ -375,10 +398,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 = getLocalConfig('birthDate', undefined);
             const { sessionID, currentState, ...response } = await initSession({
                 memoriID: (_a = memori.engineMemoriID) !== null && _a !== void 0 ? _a : '',
                 password,
@@ -387,6 +411,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
                 pin,
                 initialContextVars,
                 initialQuestion,
+                birthDate: birthDate || storageBirthDate || undefined,
             });
             if (sessionID && currentState && response.resultCode === 0) {
                 setSessionId(sessionID);
@@ -416,6 +441,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.error(t('underageTwinSession', { age: minAge }));
+                setGotErrorInOpening(true);
+            }
             else {
                 console.error(response);
                 message.error(t(getErrori18nKey(response.resultCode)));
@@ -459,6 +489,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
                 }
                 else if ([400, 401, 403, 404, 500].includes(resultCode)) {
                     console.warn('[APPCONTEXT/CHANGETAG]', resultCode);
+                    let storageBirthDate = getLocalConfig('birthDate', undefined);
                     fetchSession({
                         memoriID: (_a = memori.engineMemoriID) !== null && _a !== void 0 ? _a : '',
                         password: secret || memori.secretToken,
@@ -466,6 +497,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
                         pin: memori.giverPIN,
                         initialContextVars,
                         initialQuestion,
+                        birthDate: birthDate || storageBirthDate || undefined,
                     });
                 }
                 else if (!!currentState) {
@@ -746,6 +778,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
     const speak = (text) => {
         if (!AZURE_COGNITIVE_SERVICES_TTS_KEY)
             return;
+        stopListening();
         if (preview)
             return;
         if (muteSpeaker) {
@@ -754,9 +787,6 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
             }
             return;
         }
-        if (listening) {
-            stopListening();
-        }
         if (audioDestination)
             audioDestination.pause();
         let isSafari = window.navigator.userAgent.includes('Safari') &&
@@ -811,9 +841,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 => {
@@ -941,6 +969,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 || '');
@@ -1014,7 +1044,10 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
         }
     }, [continuousSpeech, hasUserActivatedListening]);
     useEffect(() => {
-        if (!isPlayingAudio && continuousSpeech && hasUserActivatedListening)
+        if (history.length > 1 &&
+            !isPlayingAudio &&
+            continuousSpeech &&
+            (hasUserActivatedListening || !requestedListening))
             startListening();
         else if (isPlayingAudio && listening) {
             stopListening();
@@ -1094,8 +1127,10 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
         : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showAIicon;
     const [avatar3dVisible, setAvatar3dVisible] = useState(false);
     useEffect(() => {
-        if (window.innerWidth >= 768)
+        if ((window.innerWidth >= 768 && selectedLayout === 'FULLPAGE') ||
+            selectedLayout !== 'FULLPAGE') {
             setAvatar3dVisible(true);
+        }
     }, []);
     const [gamificationLevel, setGamificationLevel] = useState();
     const getGamificationPoints = async (memoriID) => {
@@ -1205,6 +1240,7 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
     };
     const simulateUserPrompt = (text, translatedText) => {
         stopListening();
+        stopAudio();
         sendMessage(text, undefined, undefined, false, translatedText);
     };
     const onClickStart = async (session) => {
@@ -1220,6 +1256,8 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
                 console.error('error playing intro audio', e);
             });
         }
+        let storageBirthDate = getLocalConfig('birthDate', undefined);
+        let birth = birthDate || storageBirthDate || undefined;
         if ((!sessionID &&
             memori.privacyType !== 'PUBLIC' &&
             !memori.secretToken &&
@@ -1230,6 +1268,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);
@@ -1240,6 +1282,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([]);
@@ -1294,7 +1337,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);
                     });
                 }
@@ -1324,7 +1367,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);
                     });
                 }
@@ -1354,7 +1397,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);
                     });
                 }
@@ -1426,20 +1469,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 = (_jsx(Avatar, { 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 = (_jsx(StartPanel, { 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 ? (_jsx(Chat, { 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 ? (_jsx("div", { className: "memori--global-background", children: _jsx("div", { className: "memori--global-background-image", style: { backgroundImage: globalBackgroundUrl } }) })) : null;
+    const integrationBackground = integration && globalBackgroundUrl ? (_jsx("div", { className: "memori--global-background", children: _jsx("div", { className: "memori--global-background-image", style: { backgroundImage: globalBackgroundUrl } }) })) : (_jsx("div", { className: "memori--global-background no-background-image" }));
     const integrationStyle = integration ? (_jsx("style", { dangerouslySetInnerHTML: { __html: integrationStylesheet } })) : null;
     const onChangeMode = (mode) => {
         setInstruct(mode === 'instruct');
@@ -1448,7 +1492,12 @@ const MemoriWidget = ({ memori, memoriConfigs, memoriLang, integration, showInst
     };
     const changeMode = (_jsx(ChangeMode, { canInstruct: !!memori.giverTag, instruct: instruct, onChangeMode: onChangeMode }));
     const poweredBy = _jsx(PoweredBy, { tenant: tenant, userLang: userLang });
-    return (_jsxs("div", { className: cx('memori', 'memori-widget', {
+    const Layout = selectedLayout === 'TOTEM'
+        ? TotemLayout
+        : selectedLayout === 'FULLPAGE'
+            ? FullPageLayout
+            : FullPageLayout;
+    return (_jsxs("div", { className: cx('memori', 'memori-widget', `memori-layout-${layout.toLowerCase()}`, `memori-controls-${controlsPosition.toLowerCase()}`, {
             'memori--preview': preview,
             'memori--embed': embed,
             'memori--with-integration': integration,
@@ -1456,12 +1505,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: [_jsx(DefaultLayout, { header: header, avatar: avatar, chat: chat, startPanel: startPanel, integrationStyle: integrationStyle, integrationBackground: integrationBackground, changeMode: changeMode, poweredBy: poweredBy, sessionId: sessionId, hasUserActivatedSpeak: hasUserActivatedSpeak, showInstruct: showInstruct, loading: loading }), _jsx("audio", { id: "memori-audio", style: { display: 'none' }, src: "https://app.twincreator.com/intro.mp3" }), isClient && (_jsx(MemoriAuth, { withModal: true, pwdOrTokens: authModalState, openModal: !!authModalState, setPwdOrTokens: setAuthModalState, showTokens: memori.privacyType === 'SECRET', onFinish: async (values) => {
+        }), style: { height }, children: [_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 }), _jsx("audio", { id: "memori-audio", style: { display: 'none' }, src: "https://app.twincreator.com/intro.mp3" }), isClient && (_jsx(MemoriAuth, { 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);
@@ -1470,7 +1519,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 && (_jsx(AttachmentLinkModal, { 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 && (_jsx(AgeVerificationModal, { visible: showAgeVerification, minAge: minAge, onClose: birthDate => {
+                    if (birthDate) {
+                        setBirthDate(birthDate);
+                        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 && (_jsx(SettingsDrawer, { layout: selectedLayout, open: !!showSettingsDrawer, onClose: () => setShowSettingsDrawer(false), continuousSpeech: continuousSpeech, continuousSpeechTimeout: continuousSpeechTimeout, setContinuousSpeech: setContinuousSpeech, setContinuousSpeechTimeout: setContinuousSpeechTimeout, controlsPosition: controlsPosition, setControlsPosition: setControlsPosition })), sessionId && (_jsx(AttachmentLinkModal, { apiURL: apiUrl, visible: attachmentsMenuOpen === 'link', onCancel: () => setAttachmentsMenuOpen(undefined), onOk: async (link) => {
                     if (!sessionId)
                         return;
                     let medium = {