@memori.ai/memori-react 9.0.0-alpha.6 → 9.0.0-alpha.7

package/esm/components/MemoriWidget/MemoriWidget.js

@@ -7,6 +7,7 @@ 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 { WidgetSurfaceProvider } from '../../context/widgetSurfaceContext';
 import MemoriAuth from '../Auth/Auth';
 import Chat from '../Chat/Chat';
 import StartPanel from '../StartPanel/StartPanel';
@@ -209,6 +210,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
     const [instruct, setInstruct] = useState(false);
     const [enableFocusChatInput, setEnableFocusChatInput] = useState(true);
     const [widgetRootEl, setWidgetRootEl] = useState(null);
+    const [widgetSurfaceEl, setWidgetSurfaceEl] = useState(null);
     const [isDarkTheme, setIsDarkTheme] = useState(false);
     useEffect(() => {
         var _a;
@@ -2338,7 +2340,9 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                                 : FullPageLayout;
     const widgetTheme = (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.theme) === 'light' || (integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.theme) === 'dark'
         ? integrationConfig.theme
-        : undefined;
+        : isDarkTheme
+            ? 'dark'
+            : undefined;
     return (_jsx("div", { ref: setWidgetRootEl, className: cx('memori', 'memori-widget', `memori-layout-${String(selectedLayout).toLowerCase()}`, `memori-controls-${String(controlsPosition).toLowerCase()}`, `memori--avatar-${(integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.avatar) || 'default'}`, {
             'memori--auto-start': autoStart,
             'memori--preview': preview,
@@ -2351,132 +2355,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: _jsxs(MemoriUIProvider, { container: widgetRootEl, theme: widgetTheme, 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 }), _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, {
-                                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);
-                            });
-                        }
-                        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,
+        }), 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 }), _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];
                                 });
-                                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');
-                        });
-                    } }))] }) }));
+                            } }), _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, {
+                                        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);
+                                    });
+                                }
+                                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