@memori.ai/memori-react 9.0.0-alpha.10 → 9.0.0-alpha.12

package/esm/components/MemoriWidget/MemoriWidget.js

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import memoriApiClient from '@memori.ai/memori-api-client';
 import cx from 'classnames';
 import { DateTime } from 'luxon';
-import { useAlertManager, createAlertOptions, MemoriUIProvider, } from '@memori.ai/ui';
+import { useAlertManager, createAlertOptions, MemoriUIProvider, AlertViewport, } from '@memori.ai/ui';
 import { WidgetSurfaceProvider } from '../../context/widgetSurfaceContext';
 import MemoriAuth from '../Auth/Auth';
 import Chat from '../Chat/Chat';
@@ -2358,132 +2358,132 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         }), "data-theme": widgetTheme, "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(MemoriUIProvider, { container: widgetRootEl, theme: widgetTheme, children: _jsx(WidgetSurfaceProvider, { value: widgetSurfaceEl, children: _jsxs("div", { ref: setWidgetSurfaceEl, className: "memori-widget__surface", children: [_jsx(Layout, { Header: Header, headerProps: headerProps, Avatar: Avatar, avatarProps: avatarProps, Chat: Chat, chatProps: chatProps, StartPanel: StartPanel, startPanelProps: startPanelProps, integrationStyle: integrationStyle, integrationBackground: integrationBackground, poweredBy: poweredBy, autoStart: autoStart, sessionId: sessionId, hasUserActivatedSpeak: hasUserActivatedSpeak, loading: loading, avatar3dHidden: avatar3dHidden !== null && avatar3dHidden !== void 0 ? avatar3dHidden : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.avatar_3d_hidden, totemContentMaxWidth: integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.totemContentMaxWidth }), _jsx(ArtifactAPIBridge, { pushMessage: (message) => {
-                                setHistory(history => {
-                                    if (!history.length)
-                                        return history;
-                                    const lastMessage = history[history.length - 1];
-                                    if (!lastMessage || lastMessage.fromUser)
-                                        return history;
-                                    const updatedLastMessage = {
-                                        ...lastMessage,
-                                        text: lastMessage.text + message.text,
-                                    };
-                                    return [...history.slice(0, -1), updatedLastMessage];
-                                });
-                            } }), _jsx("audio", { id: "memori-audio", style: { display: 'none' }, src: "https://aisuru.com/intro.mp3" }), isClient && (_jsx(MemoriAuth, { withModal: true, pwdOrTokens: authModalState, openModal: !!authModalState, setPwdOrTokens: setAuthModalState, showTokens: memori.privacyType === 'SECRET', onFinish: (values) => {
-                                var _a, _b, _c, _d;
-                                if (values['password'])
-                                    setMemoriPwd(values['password']);
-                                if (values['password'])
-                                    memoriPassword = values['password'];
-                                if (values['tokens'])
-                                    setMemoriTokens(values['tokens']);
-                                return reopenSession(!sessionId, values['password'], values['tokens'], personification === null || personification === void 0 ? void 0 : personification.tag, personification === null || personification === void 0 ? void 0 : personification.pin, {
-                                    LANG: userLang,
-                                    PATHNAME: (_a = window.location.pathname) === null || _a === void 0 ? void 0 : _a.toUpperCase(),
-                                    ROUTE: ((_d = (_c = (_b = window.location.pathname) === null || _b === void 0 ? void 0 : _b.split('/')) === null || _c === void 0 ? void 0 : _c.pop()) === null || _d === void 0 ? void 0 : _d.toUpperCase()) || '',
-                                    ...(initialContextVars || {}),
-                                }, initialQuestion, birthDate)
-                                    .then(state => {
-                                    if (!(state === null || state === void 0 ? void 0 : state.sessionID)) {
-                                        throw new Error('AUTH_FAILED');
-                                    }
-                                    setAuthModalState(null);
-                                    if (state === null || state === void 0 ? void 0 : state.dialogState) {
-                                        setHasUserActivatedSpeak(true);
-                                    }
-                                    else {
-                                        onClickStart(state);
-                                    }
-                                })
-                                    .catch(error => {
-                                    if (!(error instanceof Error) ||
-                                        error.message !== 'AUTH_FAILED') {
-                                        setGotErrorInOpening(true);
-                                    }
-                                    throw error;
-                                });
-                            }, minimumNumberOfRecoveryTokens: (_17 = memori === null || memori === void 0 ? void 0 : memori.minimumNumberOfRecoveryTokens) !== null && _17 !== void 0 ? _17 : 1 })), isClient && (_jsx(AgeVerificationModal, { visible: showAgeVerification, minAge: minAge, onClose: birthDate => {
-                                var _a, _b, _c, _d;
-                                if (birthDate) {
-                                    setBirthDate(birthDate);
-                                    setLocalConfig('birthDate', birthDate);
-                                    reopenSession(!sessionId, memoriPassword || memoriPwd || (memori === null || memori === void 0 ? void 0 : memori.secretToken), memoriTokens, personification === null || personification === void 0 ? void 0 : personification.tag, personification === null || personification === void 0 ? void 0 : personification.pin, {
+        }), style: { height }, children: _jsxs(MemoriUIProvider, { container: widgetRootEl, theme: widgetTheme, children: [_jsx(AlertViewport, { placement: "top-end", style: { zIndex: 10002 } }), _jsx(WidgetSurfaceProvider, { value: widgetSurfaceEl, children: _jsxs("div", { ref: setWidgetSurfaceEl, className: "memori-widget__surface", children: [_jsx(Layout, { Header: Header, headerProps: headerProps, Avatar: Avatar, avatarProps: avatarProps, Chat: Chat, chatProps: chatProps, StartPanel: StartPanel, startPanelProps: startPanelProps, integrationStyle: integrationStyle, integrationBackground: integrationBackground, poweredBy: poweredBy, autoStart: autoStart, sessionId: sessionId, hasUserActivatedSpeak: hasUserActivatedSpeak, loading: loading, avatar3dHidden: avatar3dHidden !== null && avatar3dHidden !== void 0 ? avatar3dHidden : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.avatar_3d_hidden, totemContentMaxWidth: integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.totemContentMaxWidth }), _jsx(ArtifactAPIBridge, { pushMessage: (message) => {
+                                    setHistory(history => {
+                                        if (!history.length)
+                                            return history;
+                                        const lastMessage = history[history.length - 1];
+                                        if (!lastMessage || lastMessage.fromUser)
+                                            return history;
+                                        const updatedLastMessage = {
+                                            ...lastMessage,
+                                            text: lastMessage.text + message.text,
+                                        };
+                                        return [...history.slice(0, -1), updatedLastMessage];
+                                    });
+                                } }), _jsx("audio", { id: "memori-audio", style: { display: 'none' }, src: "https://aisuru.com/intro.mp3" }), isClient && (_jsx(MemoriAuth, { withModal: true, pwdOrTokens: authModalState, openModal: !!authModalState, setPwdOrTokens: setAuthModalState, showTokens: memori.privacyType === 'SECRET', onFinish: (values) => {
+                                    var _a, _b, _c, _d;
+                                    if (values['password'])
+                                        setMemoriPwd(values['password']);
+                                    if (values['password'])
+                                        memoriPassword = values['password'];
+                                    if (values['tokens'])
+                                        setMemoriTokens(values['tokens']);
+                                    return reopenSession(!sessionId, values['password'], values['tokens'], personification === null || personification === void 0 ? void 0 : personification.tag, personification === null || personification === void 0 ? void 0 : personification.pin, {
                                         LANG: userLang,
                                         PATHNAME: (_a = window.location.pathname) === null || _a === void 0 ? void 0 : _a.toUpperCase(),
                                         ROUTE: ((_d = (_c = (_b = window.location.pathname) === null || _b === void 0 ? void 0 : _b.split('/')) === null || _c === void 0 ? void 0 : _c.pop()) === null || _d === void 0 ? void 0 : _d.toUpperCase()) || '',
                                         ...(initialContextVars || {}),
                                     }, initialQuestion, birthDate)
                                         .then(state => {
-                                        setShowAgeVerification(false);
+                                        if (!(state === null || state === void 0 ? void 0 : state.sessionID)) {
+                                            throw new Error('AUTH_FAILED');
+                                        }
                                         setAuthModalState(null);
-                                        onClickStart(state || undefined);
+                                        if (state === null || state === void 0 ? void 0 : state.dialogState) {
+                                            setHasUserActivatedSpeak(true);
+                                        }
+                                        else {
+                                            onClickStart(state);
+                                        }
                                     })
-                                        .catch(() => {
-                                        setShowAgeVerification(false);
-                                        setGotErrorInOpening(true);
+                                        .catch(error => {
+                                        if (!(error instanceof Error) ||
+                                            error.message !== 'AUTH_FAILED') {
+                                            setGotErrorInOpening(true);
+                                        }
+                                        throw error;
                                     });
-                                }
-                                else {
-                                    setShowAgeVerification(false);
-                                    setClickedStart(false);
-                                }
-                            } })), showSettingsDrawer && (_jsx(SettingsDrawer, { layout: selectedLayout, open: !!showSettingsDrawer, onClose: () => setShowSettingsDrawer(false), microphoneMode: continuousSpeech ? 'CONTINUOUS' : 'HOLD_TO_TALK', continuousSpeechTimeout: continuousSpeechTimeout, setMicrophoneMode: mode => setContinuousSpeech(mode === 'CONTINUOUS'), setContinuousSpeechTimeout: setContinuousSpeechTimeout, controlsPosition: controlsPosition, setControlsPosition: setControlsPosition, hideEmissions: hideEmissions, setHideEmissions: setHideEmissions, avatarType: avatarType, setAvatarType: setAvatarType, enablePositionControls: enablePositionControls, setEnablePositionControls: setEnablePositionControls, isAvatar3d: !!(integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.avatarURL), additionalSettings: additionalSettings, speakerMuted: speakerMuted })), showChatHistoryDrawer && (_jsx(ChatHistoryDrawer, { open: !!showChatHistoryDrawer, onClose: () => setShowChatHistoryDrawer(false), resumeSession: chatLog => {
-                                setChatLogID(chatLog.chatLogID);
-                                onClickStart(undefined, false, chatLog);
-                                setShowChatHistoryDrawer(false);
-                            }, apiClient: client, sessionId: sessionId || '', memori: memori, baseUrl: baseUrl, history: history, apiUrl: client.constants.BACKEND_URL, loginToken: loginToken, language: language, userLang: userLang, isMultilanguageEnabled: isMultilanguageEnabled })), showKnownFactsDrawer && sessionId && (_jsx(KnownFacts, { apiClient: client, memori: memori, sessionID: sessionId, visible: showKnownFactsDrawer, closeDrawer: () => setShowKnownFactsDrawer(false) })), showExpertsDrawer && !!experts && (_jsx(ExpertsDrawer, { apiUrl: client.constants.BACKEND_URL, baseUrl: baseUrl, tenant: tenant, experts: experts, open: showExpertsDrawer, onClose: () => setShowExpertsDrawer(false) })), showLoginDrawer && (tenant === null || tenant === void 0 ? void 0 : tenant.name) && (_jsx(LoginDrawer, { tenant: tenant, apiClient: client, open: !!showLoginDrawer, user: user, loginToken: loginToken, onClose: () => setShowLoginDrawer(false), drawerClassName: selectedLayout === 'WEBSITE_ASSISTANT'
-                                ? 'memori-drawer--above-website-assistant'
-                                : undefined, onLogin: (user, token) => {
-                                var _a, _b, _c, _d;
-                                reopenSession(false, memoriPassword || memoriPwd || (memori === null || memori === void 0 ? void 0 : memori.secretToken), [], personification === null || personification === void 0 ? void 0 : personification.tag, personification === null || personification === void 0 ? void 0 : personification.pin, {
-                                    LANG: userLang,
-                                    PATHNAME: (_a = window.location.pathname) === null || _a === void 0 ? void 0 : _a.toUpperCase(),
-                                    ROUTE: ((_d = (_c = (_b = window.location.pathname) === null || _b === void 0 ? void 0 : _b.split('/')) === null || _c === void 0 ? void 0 : _c.pop()) === null || _d === void 0 ? void 0 : _d.toUpperCase()) || '',
-                                    ...(initialContextVars || {}),
-                                }, undefined, birthDate, { loginToken: token }, undefined, sessionId).then(state => {
-                                    var _a, _b;
-                                    setShowLoginDrawer(false);
-                                    setUser(user);
-                                    setLoginToken(token);
-                                    userTokenRef.current = token;
-                                    setLocalConfig('loginToken', token);
-                                    if ((state === null || state === void 0 ? void 0 : state.sessionID) &&
-                                        state.sessionID !== sessionId &&
-                                        (state === null || state === void 0 ? void 0 : state.dialogState)) {
-                                        const username = (user === null || user === void 0 ? void 0 : user.userName) || t('login.user');
-                                        pushMessage({
-                                            text: '',
-                                            emitter: state.dialogState.emitter,
-                                            media: (_b = (_a = state.dialogState.emittedMedia) !== null && _a !== void 0 ? _a : state.dialogState.media) !== null && _b !== void 0 ? _b : [],
-                                            fromUser: false,
-                                            initial: t('login.successfullyLoggedIn', {
-                                                username,
-                                            }),
-                                            contextVars: state.dialogState.contextVars,
-                                            date: state.dialogState.currentDate,
-                                            placeName: state.dialogState.currentPlaceName,
-                                            placeLatitude: state.dialogState.currentLatitude,
-                                            placeLongitude: state.dialogState.currentLongitude,
-                                            placeUncertaintyKm: state.dialogState.currentUncertaintyKm,
-                                            tag: state.dialogState.currentTag,
-                                            memoryTags: state.dialogState.memoryTags,
+                                }, minimumNumberOfRecoveryTokens: (_17 = memori === null || memori === void 0 ? void 0 : memori.minimumNumberOfRecoveryTokens) !== null && _17 !== void 0 ? _17 : 1 })), isClient && (_jsx(AgeVerificationModal, { visible: showAgeVerification, minAge: minAge, onClose: birthDate => {
+                                    var _a, _b, _c, _d;
+                                    if (birthDate) {
+                                        setBirthDate(birthDate);
+                                        setLocalConfig('birthDate', birthDate);
+                                        reopenSession(!sessionId, memoriPassword || memoriPwd || (memori === null || memori === void 0 ? void 0 : memori.secretToken), memoriTokens, personification === null || personification === void 0 ? void 0 : personification.tag, personification === null || personification === void 0 ? void 0 : personification.pin, {
+                                            LANG: userLang,
+                                            PATHNAME: (_a = window.location.pathname) === null || _a === void 0 ? void 0 : _a.toUpperCase(),
+                                            ROUTE: ((_d = (_c = (_b = window.location.pathname) === null || _b === void 0 ? void 0 : _b.split('/')) === null || _c === void 0 ? void 0 : _c.pop()) === null || _d === void 0 ? void 0 : _d.toUpperCase()) || '',
+                                            ...(initialContextVars || {}),
+                                        }, initialQuestion, birthDate)
+                                            .then(state => {
+                                            setShowAgeVerification(false);
+                                            setAuthModalState(null);
+                                            onClickStart(state || undefined);
+                                        })
+                                            .catch(() => {
+                                            setShowAgeVerification(false);
+                                            setGotErrorInOpening(true);
                                         });
-                                        setCurrentDialogState(state.dialogState);
                                     }
-                                });
-                            }, setUser: setUser, onLogout: () => {
-                                if (!loginToken)
-                                    return;
-                                client.backend.pwlUserLogout(loginToken).then(() => {
-                                    setShowLoginDrawer(false);
-                                    setUser(undefined);
-                                    setLoginToken(undefined);
-                                    userTokenRef.current = undefined;
-                                    removeLocalConfig('loginToken');
-                                });
-                            } }))] }) }) }) }));
+                                    else {
+                                        setShowAgeVerification(false);
+                                        setClickedStart(false);
+                                    }
+                                } })), showSettingsDrawer && (_jsx(SettingsDrawer, { layout: selectedLayout, open: !!showSettingsDrawer, onClose: () => setShowSettingsDrawer(false), microphoneMode: continuousSpeech ? 'CONTINUOUS' : 'HOLD_TO_TALK', continuousSpeechTimeout: continuousSpeechTimeout, setMicrophoneMode: mode => setContinuousSpeech(mode === 'CONTINUOUS'), setContinuousSpeechTimeout: setContinuousSpeechTimeout, controlsPosition: controlsPosition, setControlsPosition: setControlsPosition, hideEmissions: hideEmissions, setHideEmissions: setHideEmissions, avatarType: avatarType, setAvatarType: setAvatarType, enablePositionControls: enablePositionControls, setEnablePositionControls: setEnablePositionControls, isAvatar3d: !!(integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.avatarURL), additionalSettings: additionalSettings, speakerMuted: speakerMuted })), showChatHistoryDrawer && (_jsx(ChatHistoryDrawer, { open: !!showChatHistoryDrawer, onClose: () => setShowChatHistoryDrawer(false), resumeSession: chatLog => {
+                                    setChatLogID(chatLog.chatLogID);
+                                    onClickStart(undefined, false, chatLog);
+                                    setShowChatHistoryDrawer(false);
+                                }, apiClient: client, sessionId: sessionId || '', memori: memori, baseUrl: baseUrl, history: history, apiUrl: client.constants.BACKEND_URL, loginToken: loginToken, language: language, userLang: userLang, isMultilanguageEnabled: isMultilanguageEnabled })), showKnownFactsDrawer && sessionId && (_jsx(KnownFacts, { apiClient: client, memori: memori, sessionID: sessionId, visible: showKnownFactsDrawer, closeDrawer: () => setShowKnownFactsDrawer(false) })), showExpertsDrawer && !!experts && (_jsx(ExpertsDrawer, { apiUrl: client.constants.BACKEND_URL, baseUrl: baseUrl, tenant: tenant, experts: experts, open: showExpertsDrawer, onClose: () => setShowExpertsDrawer(false) })), showLoginDrawer && (tenant === null || tenant === void 0 ? void 0 : tenant.name) && (_jsx(LoginDrawer, { tenant: tenant, apiClient: client, open: !!showLoginDrawer, user: user, loginToken: loginToken, onClose: () => setShowLoginDrawer(false), drawerClassName: selectedLayout === 'WEBSITE_ASSISTANT'
+                                    ? 'memori-drawer--above-website-assistant'
+                                    : undefined, onLogin: (user, token) => {
+                                    var _a, _b, _c, _d;
+                                    reopenSession(false, memoriPassword || memoriPwd || (memori === null || memori === void 0 ? void 0 : memori.secretToken), [], personification === null || personification === void 0 ? void 0 : personification.tag, personification === null || personification === void 0 ? void 0 : personification.pin, {
+                                        LANG: userLang,
+                                        PATHNAME: (_a = window.location.pathname) === null || _a === void 0 ? void 0 : _a.toUpperCase(),
+                                        ROUTE: ((_d = (_c = (_b = window.location.pathname) === null || _b === void 0 ? void 0 : _b.split('/')) === null || _c === void 0 ? void 0 : _c.pop()) === null || _d === void 0 ? void 0 : _d.toUpperCase()) || '',
+                                        ...(initialContextVars || {}),
+                                    }, undefined, birthDate, { loginToken: token }, undefined, sessionId).then(state => {
+                                        var _a, _b;
+                                        setShowLoginDrawer(false);
+                                        setUser(user);
+                                        setLoginToken(token);
+                                        userTokenRef.current = token;
+                                        setLocalConfig('loginToken', token);
+                                        if ((state === null || state === void 0 ? void 0 : state.sessionID) &&
+                                            state.sessionID !== sessionId &&
+                                            (state === null || state === void 0 ? void 0 : state.dialogState)) {
+                                            const username = (user === null || user === void 0 ? void 0 : user.userName) || t('login.user');
+                                            pushMessage({
+                                                text: '',
+                                                emitter: state.dialogState.emitter,
+                                                media: (_b = (_a = state.dialogState.emittedMedia) !== null && _a !== void 0 ? _a : state.dialogState.media) !== null && _b !== void 0 ? _b : [],
+                                                fromUser: false,
+                                                initial: t('login.successfullyLoggedIn', {
+                                                    username,
+                                                }),
+                                                contextVars: state.dialogState.contextVars,
+                                                date: state.dialogState.currentDate,
+                                                placeName: state.dialogState.currentPlaceName,
+                                                placeLatitude: state.dialogState.currentLatitude,
+                                                placeLongitude: state.dialogState.currentLongitude,
+                                                placeUncertaintyKm: state.dialogState.currentUncertaintyKm,
+                                                tag: state.dialogState.currentTag,
+                                                memoryTags: state.dialogState.memoryTags,
+                                            });
+                                            setCurrentDialogState(state.dialogState);
+                                        }
+                                    });
+                                }, setUser: setUser, onLogout: () => {
+                                    if (!loginToken)
+                                        return;
+                                    client.backend.pwlUserLogout(loginToken).then(() => {
+                                        setShowLoginDrawer(false);
+                                        setUser(undefined);
+                                        setLoginToken(undefined);
+                                        userTokenRef.current = undefined;
+                                        removeLocalConfig('loginToken');
+                                    });
+                                } }))] }) })] }) }));
 };
 export default MemoriWidget;
 //# sourceMappingURL=MemoriWidget.js.map