@memori.ai/memori-react 9.0.0-alpha.21 → 9.0.0-alpha.22

package/esm/components/MemoriWidget/MemoriWidget.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArtifactAPIBridge } from '../MemoriArtifactSystem/utils/ArtifactAPI';
 import { checkPii } from '../../helpers/piiDetection';
-import { shouldRestartSessionOnPositionPopoverClose } from '../../helpers/positionPopover';
+import { shouldHoldAutoStartForPosition, shouldRestartSessionOnPositionPopoverClose, } from '../../helpers/positionPopover';
 import { useState, useEffect, useCallback, useRef, useMemo, } from 'react';
 import { useTranslation } from 'react-i18next';
 import memoriApiClient from '@memori.ai/memori-api-client';
@@ -183,22 +183,9 @@ export function getChatStyles(config) {
     const primaryContent = (_a = config === null || config === void 0 ? void 0 : config.buttonTextColor) !== null && _a !== void 0 ? _a : '#ffffff';
     return {
         '--memori-primary-color': primary,
-        '--memori-primary': primary,
         '--memori-primary-content': primaryContent,
-        '--memori-primary-hover': 'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, black) 15%)',
-        '--memori-primary-active': 'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast, black) 25%)',
-        '--memori-primary-disabled': 'color-mix(in oklch, var(--memori-primary), transparent 60%)',
-        '--memori-primary-subtle': 'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 60%)',
-        '--memori-primary-subtle-hover': 'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 50%)',
-        '--memori-border-primary': 'color-mix(in oklch, var(--memori-primary), transparent 70%)',
-        '--memori-border-primary-hover': 'color-mix(in oklch, var(--memori-primary), transparent 50%)',
-        '--memori-focus-ring-color': 'color-mix(in oklch, var(--memori-primary), transparent 80%)',
-        '--memori-focus-ring': '0 0 0 3px var(--memori-focus-ring-color)',
-        '--memori-shadow-primary': '0 8px 16px -4px color-mix(in oklch, var(--memori-primary), transparent 70%)',
-        '--memori-skeleton-base': 'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 85%)',
-        '--memori-skeleton-highlight': 'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 75%)',
         '--memori-icon-active-bg': 'color-mix(in oklch, var(--memori-primary) 12%, transparent)',
-        '--memori-icon-recording-bg': 'color-mix(in oklch, var(--memori-error, #dc2626) 12%, transparent)',
+        '--memori-icon-recording-bg': 'color-mix(in oklch, var(--memori-error) 12%, transparent)',
     };
 }
 const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenantID, memoriLang, uiLang, spokenLang, multilingual, integration, layout, customLayout, showShare, preview = false, embed = false, showCopyButton = true, showTranslationOriginal = false, showInputs = true, showDates = false, showContextPerLine = false, showMessageConsumption = false, showSettings, showTypingText = false, showClear = false, showLogin = false, showUpload, showOnlyLastMessages, showChatHistory, showReasoning, avatar3dHidden, height = '100vh', secret, baseUrl = 'https://aisuru-staging.aclambda.online', apiURL = 'https://backend-staging.memori.ai', engineURL = 'https://engine-staging.memori.ai', initialContextVars, initialQuestion, ttsProvider, ogImage, sessionID: initialSessionID, tenant, personification, authToken, enableAudio, defaultSpeakerActive = true, disableTextEnteredEvents = false, onStateChange, additionalInfo, additionalSettings, customMediaRenderer, userAvatar, __WEBCOMPONENT__ = false, useMathFormatting = false, autoStart = false, applyVarsToRoot = false, showFunctionCache = false, maxTotalMessagePayload, maxTextareaCharacters, }) => {
@@ -822,7 +809,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         }
     }, [initialSessionID]);
     const fetchSession = async (params) => {
-        var _a, _b, _c, _d, _f, _g, _h;
+        var _a, _b, _c, _d, _f, _g, _h, _j;
         let storageBirthDate = getLocalConfig('birthDate', undefined);
         let userBirthDate = (_a = birthDate !== null && birthDate !== void 0 ? birthDate : params.birthDate) !== null && _a !== void 0 ? _a : storageBirthDate;
         if (!userBirthDate && !!minAge) {
@@ -830,8 +817,10 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             return;
         }
         if (memori.privacyType !== 'PUBLIC' &&
+            !params.password &&
             !memori.secretToken &&
             !memoriPwd &&
+            !((_b = params.recoveryTokens) === null || _b === void 0 ? void 0 : _b.length) &&
             !memoriTokens) {
             setAuthModalState('password');
             return;
@@ -847,17 +836,17 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                     return window.location.href;
                 })();
             }
-            catch (_j) {
+            catch (_k) {
             }
             const session = await initSession({
                 ...params,
                 birthDate: userBirthDate,
-                tag: (_b = params.tag) !== null && _b !== void 0 ? _b : personification === null || personification === void 0 ? void 0 : personification.tag,
-                pin: (_c = params.pin) !== null && _c !== void 0 ? _c : personification === null || personification === void 0 ? void 0 : personification.pin,
+                tag: (_c = params.tag) !== null && _c !== void 0 ? _c : personification === null || personification === void 0 ? void 0 : personification.tag,
+                pin: (_d = params.pin) !== null && _d !== void 0 ? _d : personification === null || personification === void 0 ? void 0 : personification.pin,
                 additionalInfo: {
                     ...(params.additionalInfo || additionalInfo || {}),
-                    loginToken: resolveLoginToken((_d = params.additionalInfo) === null || _d === void 0 ? void 0 : _d.loginToken),
-                    language: ((_h = userLang !== null && userLang !== void 0 ? userLang : (_g = (_f = memori.culture) === null || _f === void 0 ? void 0 : _f.split('-')) === null || _g === void 0 ? void 0 : _g[0]) !== null && _h !== void 0 ? _h : 'IT').toLowerCase(),
+                    loginToken: resolveLoginToken((_f = params.additionalInfo) === null || _f === void 0 ? void 0 : _f.loginToken),
+                    language: ((_j = userLang !== null && userLang !== void 0 ? userLang : (_h = (_g = memori.culture) === null || _g === void 0 ? void 0 : _g.split('-')) === null || _h === void 0 ? void 0 : _h[0]) !== null && _j !== void 0 ? _j : 'IT').toLowerCase(),
                     referral: referral,
                     timeZoneOffset: new Date().getTimezoneOffset().toString(),
                 },
@@ -913,15 +902,17 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         try {
             if (!userBirthDate && !!minAge) {
                 setShowAgeVerification(true);
+                setLoading(false);
                 return;
             }
             if (memori.privacyType !== 'PUBLIC' &&
                 !password &&
                 !memori.secretToken &&
                 !memoriPwd &&
-                !recoveryTokens &&
+                !(recoveryTokens === null || recoveryTokens === void 0 ? void 0 : recoveryTokens.length) &&
                 !memoriTokens) {
                 setAuthModalState('password');
+                setLoading(false);
                 return;
             }
             if (!(await checkCredits({ notify: true }))) {
@@ -1548,16 +1539,22 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
     }, []);
     useEffect(() => {
         if (!isPlayingAudio &&
+            !memoriTyping &&
             continuousSpeech &&
             (hasUserActivatedListening || !requestedListening) &&
             sessionId &&
             !hasUserTypedMessage) {
             startRecording();
         }
-        else if (isPlayingAudio && isListening) {
+        else if ((isPlayingAudio || memoriTyping) && isListening) {
             stopRecording();
         }
-    }, [isPlayingAudio, hasUserActivatedListening, hasUserTypedMessage]);
+    }, [
+        isPlayingAudio,
+        hasUserActivatedListening,
+        hasUserTypedMessage,
+        memoriTyping,
+    ]);
     useEffect(() => {
         stopRecording();
     }, [language]);
@@ -1607,7 +1604,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
     transform: none;
   }`);
     }
-    const integrationStylesheet = `@layer integration {
+    const integrationStylesheet = `@layer memori.overrides {
   ${integrationStylesheetParts.join('\n  ')}
 }
 `;
@@ -1709,8 +1706,9 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         if (!birth && autoStart && (initialSessionID || targetSessionID))
             birth = '1970-01-01T10:24:03.845Z';
         const localPosition = getLocalConfig('position', undefined);
-        if (autoStart && !localPosition && memori.needsPosition) {
-            setPositionPopoverOpenState(true);
+        if (autoStart &&
+            shouldHoldAutoStartForPosition(!!memori.needsPosition, Boolean(position || localPosition))) {
+            setClickedStart(false);
             return;
         }
         if (!(await checkCredits({ notify: true }))) {
@@ -1987,8 +1985,9 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
     }, [memoriPwd, memori, memoriTokens, birthDate, sessionId, userLang, position]);
     const setPositionPopoverOpen = useCallback((open) => {
         const sessionAlreadyStarted = !!(sessionId && hasUserActivatedSpeak);
+        const hasPosition = Boolean(position || getLocalConfig('position', undefined));
         setPositionPopoverOpenState(wasOpen => {
-            if (shouldRestartSessionOnPositionPopoverClose(wasOpen, open, autoStart, sessionAlreadyStarted)) {
+            if (shouldRestartSessionOnPositionPopoverClose(wasOpen, open, autoStart, sessionAlreadyStarted, hasPosition)) {
                 queueMicrotask(() => {
                     onClickStart();
                 });
@@ -2000,14 +1999,17 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             }
             return open;
         });
-    }, [autoStart, onClickStart, sessionId, hasUserActivatedSpeak]);
+    }, [autoStart, onClickStart, sessionId, hasUserActivatedSpeak, position]);
     useEffect(() => {
+        const storedPosition = getLocalConfig('position', undefined);
+        const hasPosition = Boolean(position || storedPosition);
         if (!clickedStart &&
             !sessionStartingRef.current &&
             !sessionId &&
             autoStart &&
             selectedLayout !== 'HIDDEN_CHAT' &&
-            (!needsCredits || hasEnoughCredits)) {
+            (!needsCredits || hasEnoughCredits) &&
+            !shouldHoldAutoStartForPosition(!!memori.needsPosition, hasPosition)) {
             onClickStart();
         }
     }, [
@@ -2017,6 +2019,8 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         sessionId,
         needsCredits,
         hasEnoughCredits,
+        position,
+        memori.needsPosition,
     ]);
     useEffect(() => {
         var _a;
@@ -2154,7 +2158,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         };
     }, [sessionId]);
     const showFullHistory = showOnlyLastMessages === undefined
-        ? selectedLayout !== 'TOTEM' && selectedLayout !== 'WEBSITE_ASSISTANT'
+        ? selectedLayout !== 'WEBSITE_ASSISTANT'
         : !showOnlyLastMessages;
     const canShowLoginButton = !(tenant === null || tenant === void 0 ? void 0 : tenant.ssoLogin) &&
         ((_y = showLogin !== null && showLogin !== void 0 ? showLogin : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.showLogin) !== null && _y !== void 0 ? _y : memori.requireLoginToken);
@@ -2438,7 +2442,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
                                     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'
+                                }, apiClient: client, sessionId: sessionId || '', memori: memori, baseUrl: baseUrl, history: history, apiUrl: client.constants.BACKEND_URL, loginToken: loginToken, language: language, userLang: userLang, isMultilanguageEnabled: isMultilanguageEnabled, showFunctionCache: showFunctionCache, showMessageConsumption: enableMessageConsumption })), 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;