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

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -24,6 +24,7 @@ import type {
   PiiDetectionConfig,
 } from '../../types/layout';
 import { checkPii } from '../../helpers/piiDetection'; // PII check when integrationConfig.layout has piiDetection.enabled
+import { shouldRestartSessionOnPositionPopoverClose } from '../../helpers/positionPopover';
 
 // Libraries
 import React, {
@@ -39,7 +40,12 @@ import memoriApiClient from '@memori.ai/memori-api-client';
 import { IAudioContext } from 'standardized-audio-context';
 import cx from 'classnames';
 import { DateTime } from 'luxon';
-import { useAlertManager, createAlertOptions } from '@memori.ai/ui';
+import {
+  useAlertManager,
+  createAlertOptions,
+  MemoriUIProvider,
+} from '@memori.ai/ui';
+import { WidgetSurfaceProvider } from '../../context/widgetSurfaceContext';
 
 // Components
 import MemoriAuth from '../Auth/Auth';
@@ -88,6 +94,16 @@ import { sanitizeText } from '../../helpers/sanitizer';
 import { TTSConfig, useTTS } from '../../helpers/tts/useTTS';
 import ChatHistoryDrawer from '../ChatHistoryDrawer/ChatHistory';
 import { STTConfig, useSTT } from '../../helpers/stt/useSTT';
+import { useNats } from '../../helpers/nats/useNats';
+import {
+  NatsProgressEvent,
+  NatsDialogResponseEvent,
+  NatsErrorEvent,
+} from '../../helpers/nats/useNatsSession';
+import {
+  isSessionExpiredNatsError,
+  isSessionExpiredNatsResponse,
+} from '../../helpers/nats/isSessionExpiredError';
 
 // Widget utilities and helpers
 const getMemoriState = (integrationId?: string): object | null => {
@@ -118,7 +134,21 @@ const getMemoriState = (integrationId?: string): object | null => {
   };
 };
 
-/** Place spec with all nulls for postTextEnteredEvent when position is not set or user chose "I don't want to provide my position". */
+/** Unified login token resolution: React state > ref > call-site override > props. */
+const resolveLoginTokenValue = (
+  loginToken: string | undefined,
+  userTokenRef: string | undefined,
+  callAdditionalInfoLoginToken: string | undefined,
+  additionalInfoLoginToken: string | undefined,
+  authTokenProp: string | undefined
+): string | undefined =>
+  loginToken ??
+  userTokenRef ??
+  callAdditionalInfoLoginToken ??
+  additionalInfoLoginToken ??
+  authTokenProp;
+
+/** Place spec with all nulls for postEnterTextAsync when position is not set or user chose "I don't want to provide my position". */
 const NULL_PLACE_SPEC = {
   placeName: null,
   latitude: null,
@@ -126,6 +156,18 @@ const NULL_PLACE_SPEC = {
   uncertaintyKm: null,
 } as const;
 
+const logWidgetError = (context: string, detail?: unknown) => {
+  console.error(`[MemoriWidget] ${context}`, detail ?? '');
+};
+
+/** Reads correlation id from HTTP async response (supports camelCase / snake_case). */
+function readCorrelationID(response: {
+  correlationID?: string;
+}): string | undefined {
+  const value = response.correlationID;
+  return typeof value === 'string' && value.length > 0 ? value : undefined;
+}
+
 type MemoriTextEnteredEvent = CustomEvent<{
   text: string;
   waitForPrevious?: boolean;
@@ -359,7 +401,6 @@ window.typeBatchMessages = typeBatchMessages;
 let audioContext: IAudioContext;
 
 let memoriPassword: string | undefined;
-let userToken: string | undefined;
 
 export interface LayoutProps {
   Header?: typeof Header;
@@ -381,6 +422,9 @@ export interface LayoutProps {
   onSidebarToggle?: (isOpen: boolean) => void;
   /** When true or "true" (e.g. from integrationConfig or web component attribute), hide the 3D avatar. */
   avatar3dHidden?: boolean | string;
+  /** TOTEM only: max-width of the shared content axis (avatar + panel + status).
+   * Accepts a number (px) or a CSS length string; enables vertical-kiosk widths. */
+  totemContentMaxWidth?: number | string;
 }
 
 export interface Props {
@@ -474,20 +518,23 @@ export function getChatStyles(
 
   const primaryContent = config?.buttonTextColor ?? '#ffffff';
 
+  // Match @memori.ai/ui token semantics:
+  // --memori-surface-contrast = ink (#000 light / #fff dark)
+  // --memori-surface-contrast-inverse = surface (#fff light / #000 dark)
   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-inverse, black) 15%)',
+      '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-inverse, black) 25%)',
+      '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, white) 60%)',
+      '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, white) 50%)',
+      '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':
@@ -498,9 +545,9 @@ export function getChatStyles(
     '--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, white) 85%)',
+      '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, white) 75%)',
+      'color-mix(in oklch, var(--memori-primary), var(--memori-surface-contrast-inverse, white) 75%)',
   } as CSSProperties;
 }
 
@@ -576,6 +623,7 @@ const MemoriWidget = ({
   const {
     initSession,
     deleteSession,
+    postEnterTextAsync,
     postTextEnteredEvent,
     postPlaceChangedEvent,
     postDateChangedEvent,
@@ -588,58 +636,115 @@ const MemoriWidget = ({
   const [instruct, setInstruct] = useState(false);
   const [enableFocusChatInput, setEnableFocusChatInput] = useState(true);
 
-  const widgetRootRef = useRef<HTMLDivElement>(null);
+  // Capture the widget root via a callback ref so the value is non-null on
+  // the first render that matters (used as the `container` for portal-based
+  // UI primitives via `MemoriUIProvider`). `useRef` would not trigger a
+  // re-render and would leave the value `null` on the first pass.
+  const [widgetRootEl, setWidgetRootEl] = useState<HTMLDivElement | null>(null);
+  // Inner surface establishes `contain: layout` for Drawers/Modals. Kept separate
+  // from widgetRootEl so Floating UI menus can portal outside containment.
+  const [widgetSurfaceEl, setWidgetSurfaceEl] = useState<HTMLDivElement | null>(
+    null
+  );
   const [isDarkTheme, setIsDarkTheme] = useState(false);
   useEffect(() => {
-    const el = widgetRootRef.current;
-    if (!el) return;
+    if (!widgetRootEl) return;
     const check = () => {
-      setIsDarkTheme(!!el.closest('[data-theme="dark"]'));
+      setIsDarkTheme(!!widgetRootEl.closest('[data-theme="dark"]'));
     };
     check();
     const observer = new MutationObserver(check);
-    const parent = el.parentElement ?? document.body;
+    const parent = widgetRootEl.parentElement ?? document.body;
     observer.observe(parent, {
       attributes: true,
       attributeFilter: ['data-theme'],
       subtree: true,
     });
     return () => observer.disconnect();
-  }, []);
+  }, [widgetRootEl]);
 
   const [loginToken, setLoginToken] = useState<string | undefined>(
     additionalInfo?.loginToken ?? authToken
   );
+  const userTokenRef = useRef<string | undefined>(
+    additionalInfo?.loginToken ?? authToken
+  );
+  const prevPropsLoginTokenRef = useRef<string | undefined>(
+    additionalInfo?.loginToken ?? authToken
+  );
+
   const [user, setUser] = useState<User | undefined>({
     avatarURL: typeof userAvatar === 'string' ? userAvatar : undefined,
   } as User);
+
+  const resolveLoginToken = useCallback(
+    (callAdditionalInfoLoginToken?: string) =>
+      resolveLoginTokenValue(
+        loginToken,
+        userTokenRef.current,
+        callAdditionalInfoLoginToken,
+        additionalInfo?.loginToken,
+        authToken
+      ),
+    [loginToken, additionalInfo?.loginToken, authToken]
+  );
+
+  // Sync loginToken when props change (including explicit removal from parent)
   useEffect(() => {
-    if (
-      loginToken &&
-      !user?.userID &&
-      (showLogin || memori.requireLoginToken)
-    ) {
-      client.backend
-        .pwlGetCurrentUser(loginToken)
-        .then(({ user, resultCode }) => {
-          if (user && resultCode === 0) {
-            setUser(user);
-            setLocalConfig('loginToken', loginToken);
-
-            if (!birthDate && user.birthDate) {
-              setBirthDate(user.birthDate);
-              setLocalConfig('birthDate', user.birthDate);
-            }
-          } else {
-            removeLocalConfig('loginToken');
-          }
-        });
+    const incomingToken = additionalInfo?.loginToken ?? authToken;
+    const prevPropsToken = prevPropsLoginTokenRef.current;
+    prevPropsLoginTokenRef.current = incomingToken;
+
+    if (incomingToken !== prevPropsToken) {
+      setLoginToken(incomingToken);
+      userTokenRef.current = incomingToken;
+      if (!incomingToken) {
+        removeLocalConfig('loginToken');
+        setUser(undefined);
+      }
     }
-  }, [loginToken, user?.userID]);
+  }, [additionalInfo?.loginToken, authToken]);
+
+  useEffect(() => {
+    if (!loginToken || !(showLogin || memori.requireLoginToken)) {
+      return;
+    }
+
+    let cancelled = false;
+
+    client.backend
+      .pwlGetCurrentUser(loginToken)
+      .then(({ user: fetchedUser, resultCode }) => {
+        if (cancelled) return;
+
+        if (fetchedUser && resultCode === 0) {
+          setUser(fetchedUser);
+          setLocalConfig('loginToken', loginToken);
+          userTokenRef.current = loginToken;
+
+          if (!birthDate && fetchedUser.birthDate) {
+            setBirthDate(fetchedUser.birthDate);
+            setLocalConfig('birthDate', fetchedUser.birthDate);
+          }
+        } else {
+          setLoginToken(undefined);
+          userTokenRef.current = undefined;
+          setUser(undefined);
+          removeLocalConfig('loginToken');
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [loginToken, showLogin, memori.requireLoginToken]);
   const [showLoginDrawer, setShowLoginDrawer] = useState(false);
 
   const [clickedStart, setClickedStart] = useState(false);
   const [gotErrorInOpening, setGotErrorInOpening] = useState(false);
+  const sessionStartingRef = useRef(false);
+  const needsCredits = tenant?.billingDelegation;
+  const [hasEnoughCredits, setHasEnoughCredits] = useState<boolean>(true);
 
   const language =
     memori.culture?.split('-')?.[0]?.toUpperCase()! ||
@@ -701,7 +806,33 @@ const MemoriWidget = ({
   const [memoriTyping, setMemoriTyping] = useState<boolean>(false);
   const [typingText, setTypingText] = useState<string>();
 
-  // Layout: prop can be string or object { name, piiDetection } (e.g. from integration customData when PII is enabled).
+  type EnterTextRetryParams = {
+    text?: string;
+    media?: Medium[];
+    translate?: boolean;
+    translatedText?: string;
+    hidden?: boolean;
+    typingText?: string;
+    useLoaderTextAsMsg?: boolean;
+    hasBatchQueued?: boolean;
+    expiredSessionID?: string;
+    continueFromChatLogID?: string;
+  };
+
+  type PendingEnterText = EnterTextRetryParams & {
+    msg?: string;
+    waitForResponse?: {
+      resolve: (event: NatsDialogResponseEvent) => void;
+      reject: (error: Error) => void;
+      timeoutId: ReturnType<typeof setTimeout>;
+    };
+  };
+  const pendingEnterTextRef = useRef<Map<string, PendingEnterText>>(new Map());
+  const bufferedNatsResponsesRef = useRef<Map<string, NatsDialogResponseEvent>>(
+    new Map()
+  );
+
+  // Layout: from prop (string only) or integrationConfig. PII detection is only from integrationConfig (customData.layout as object with piiDetection).
   const layoutName =
     typeof layout === 'string'
       ? layout
@@ -818,7 +949,10 @@ const MemoriWidget = ({
 
     if (!additionalInfo?.loginToken && !authToken) {
       setLoginToken(getLocalConfig<typeof loginToken>('loginToken', undefined));
-      userToken = getLocalConfig<typeof loginToken>('loginToken', undefined);
+      userTokenRef.current = getLocalConfig<typeof loginToken>(
+        'loginToken',
+        undefined
+      );
 
       setBirthDate(getLocalConfig<string | undefined>('birthDate', undefined));
     }
@@ -893,7 +1027,7 @@ const MemoriWidget = ({
     return Object.keys(place).length > 0 ? place : undefined;
   }, []);
 
-  /** Place to send with postTextEnteredEvent: real place, nulls when no/declined position, or undefined when position not needed. */
+  /** Place to send with postEnterTextAsync: real place, nulls when no/declined position, or undefined when position not needed. */
   const getPlaceSpecForEnterText = useCallback(
     (venue: Venue | undefined) => {
       if (!memori.needsPosition) return undefined;
@@ -967,6 +1101,7 @@ const MemoriWidget = ({
    * @param typingText Optional custom typing indicator text
    * @param useLoaderTextAsMsg Whether to use the loader text as the message (default false)
    * @param hasBatchQueued Whether there are more messages queued to be sent (default false)
+   * @param skipHistoryPush Skip adding the user message to history (e.g. session-expired retry)
    */
   const sendMessage = async (
     text: string,
@@ -977,7 +1112,8 @@ const MemoriWidget = ({
     hidden: boolean = false,
     typingText?: string,
     useLoaderTextAsMsg = false,
-    hasBatchQueued = false
+    hasBatchQueued = false,
+    skipHistoryPush = false
   ) => {
     // Get the session ID from params or global state
     const sessionID =
@@ -1044,7 +1180,7 @@ const MemoriWidget = ({
     }
 
     // Add user message to chat history if not hidden
-    if (!hidden)
+    if (!hidden && !skipHistoryPush)
       pushMessage({
         text: text,
         translatedText,
@@ -1055,27 +1191,12 @@ const MemoriWidget = ({
           : !!newSessionId,
       });
 
-    // Show typing indicator
-    setMemoriTyping(true);
-    setTypingText(typingText);
-
+    // Show typing indicator after the async enter-text request is accepted (HTTP 200).
     let gotError = false;
 
     try {
-      // Add chat reference link to the message if it exists
-      // if (chatLogID) {
-      //   msg =
-      //     msg +
-      //     ' \n\n' +
-      //     '<chat-reference session-id="' +
-      //     sessionID +
-      //     '" event-log-id="' +
-      //     chatLogID +
-      //     '"></chat-reference>';
-      // }
-
       const placeSpec = getPlaceSpecForEnterText(position);
-      const { currentState, ...response } = await postTextEnteredEvent({
+      const response = await postEnterTextAsync({
         sessionId: sessionID,
         text: msg,
         ...(memori.needsDateTime && {
@@ -1083,85 +1204,35 @@ const MemoriWidget = ({
         }),
         ...(placeSpec !== undefined && { place: placeSpec }),
       });
-      if (response.resultCode === 0 && currentState) {
-        setChatLogID(undefined);
-        const emission =
-          useLoaderTextAsMsg && typingText
-            ? typingText
-            : currentState.emission ?? currentDialogState?.emission;
-
-        if (
-          userLang.toLowerCase() !== language.toLowerCase() &&
-          emission &&
-          isMultilanguageEnabled
-        ) {
-          currentState.emission = emission;
-
-          translateDialogState(currentState, userLang, msg).then(ts => {
-            let text = ts.translatedEmission || ts.emission;
-            if (text && shouldPlayAudio(text)) {
-              handleSpeak(text);
-            }
-          });
-        } else {
-          setCurrentDialogState({
-            ...currentState,
-            emission,
-          });
-
-          if (emission) {
-            pushMessage({
-              text: emission,
-              emitter: currentState.emitter,
-              media: currentState.emittedMedia ?? currentState.media,
-              llmUsage: (currentState as any).llmUsage,
-              fromUser: false,
-              questionAnswered: msg,
-              generatedByAI: !!currentState.completion,
-              contextVars: currentState.contextVars,
-              date: currentState.currentDate,
-              placeName: currentState.currentPlaceName,
-              placeLatitude: currentState.currentLatitude,
-              placeLongitude: currentState.currentLongitude,
-              placeUncertaintyKm: currentState.currentUncertaintyKm,
-              tag: currentState.currentTag,
-              memoryTags: currentState.memoryTags,
-            } as any);
-            if (emission && shouldPlayAudio(emission)) {
-              handleSpeak(emission);
-            }
-          }
-        }
+      const correlationID = readCorrelationID(response);
+      if (response.resultCode === 0 && correlationID) {
+        registerPendingEnterText(correlationID, {
+          msg,
+          text,
+          media,
+          translate,
+          translatedText,
+          hidden,
+          typingText,
+          useLoaderTextAsMsg,
+          hasBatchQueued,
+        });
+        setMemoriTyping(true);
+        setTypingText(typingText);
+      } else if (response.resultCode === 0) {
+        logWidgetError('enter-text missing correlationID', response);
       } else if (response.resultCode === 404) {
-        // Handle expired session
-        // remove last sent message, will set it as initial
-        setHistory(h => [...h.slice(0, h.length - 1)]);
-
-        reopenSession(
-          true,
-          memoriPwd || memori.secretToken,
-          memoriTokens,
-          undefined,
-          undefined,
-          {
-            LANG: userLang,
-            PATHNAME: window.location.pathname,
-            ROUTE: window.location.pathname?.split('/')?.pop() || '',
-            ...(initialContextVars || {}),
-          },
-          initialQuestion,
-          undefined,
-          undefined,
-          undefined,
-          undefined,
-          true // isSessionExpired
-        ).then(state => {
-          console.info('session timeout');
-          if (state?.sessionID) {
-            setTimeout(() => {
-              sendMessage(text, media, state?.sessionID);
-            }, 500);
-          }
+        retryAfterExpiredSessionRef.current({
+          text,
+          media,
+          translate,
+          translatedText,
+          hidden,
+          typingText,
+          useLoaderTextAsMsg,
+          hasBatchQueued,
+          expiredSessionID: sessionID,
+          continueFromChatLogID: chatLogID,
         });
       } else if (response.resultCode === 500 && response.resultMessage) {
         setHistory(h => [
@@ -1176,22 +1247,15 @@ const MemoriWidget = ({
           },
         ]);
       } else {
-        console.warn('[SEND_MESSAGE]', response);
         return Promise.reject(response);
       }
     } catch (error) {
-      console.log('error', error);
-      console.error(error);
       gotError = true;
+      logWidgetError('sendMessage failed', error);
 
       setTypingText(undefined);
       setMemoriTyping(false);
     }
-
-    if (!hasBatchQueued) {
-      setTypingText(undefined);
-      setMemoriTyping(false);
-    }
   };
 
   /**
@@ -1204,12 +1268,6 @@ const MemoriWidget = ({
     msg?: string,
     avoidPushingMessage: boolean = false
   ) => {
-    // console.log('[TRANSLATE] Starting translation with params:', {
-    //   state,
-    //   userLang,
-    //   msg
-    // });
-
     const emission = state?.emission ?? currentDialogState?.emission;
 
     let translatedState = { ...state };
@@ -1222,7 +1280,6 @@ const MemoriWidget = ({
       !isMultilanguageEnabled ||
       avoidPushingMessage
     ) {
-      // console.log('[TRANSLATE] Skipping translation - using original emission');
       translatedState = { ...state, emission };
       if (emission) {
         translatedMsg = {
@@ -1244,12 +1301,10 @@ const MemoriWidget = ({
       }
     } else {
       try {
-        // console.log('[TRANSLATE] Translating emission');
         const t = await getTranslation(emission, userLang, language, baseUrl);
 
         // Handle hints translation if present
         if (state.hints && state.hints.length > 0) {
-          // console.log('[TRANSLATE] Translating hints');
           const translatedHints = await Promise.all(
             (state.hints ?? []).map(async hint => {
               const tHint = await getTranslation(
@@ -1281,7 +1336,6 @@ const MemoriWidget = ({
         }
 
         if (t.text.length > 0) {
-          // console.log('[TRANSLATE] Creating translated message');
           translatedMsg = {
             text: emission,
             translatedText: t.text,
@@ -1302,7 +1356,6 @@ const MemoriWidget = ({
           };
         }
       } catch (error) {
-        console.error('[TRANSLATE] Error during translation:', error);
         translatedState = { ...state, emission };
         translatedMsg = {
           text: emission,
@@ -1323,10 +1376,8 @@ const MemoriWidget = ({
       }
     }
 
-    // console.log('[TRANSLATE] Setting translated state and message');
     setCurrentDialogState(translatedState);
     if (!avoidPushingMessage && translatedMsg) {
-      // console.log('[TRANSLATE] Pushing translated message', translatedMsg);
       pushMessage(translatedMsg);
     }
 
@@ -1432,7 +1483,6 @@ const MemoriWidget = ({
     executableSnippets?.forEach(s => {
       try {
         setTimeout(() => {
-          console.log('snippet', s);
           // eslint-disable-next-line no-new-func
           new Function(s.content ?? '')();
 
@@ -1446,8 +1496,8 @@ const MemoriWidget = ({
               );
           }, 400);
         }, 1000);
-      } catch (e) {
-        console.warn(e);
+      } catch {
+        // ignore snippet execution errors
       }
     });
   };
@@ -1498,6 +1548,10 @@ const MemoriWidget = ({
       return;
     }
 
+    if (!(await checkCredits({ notify: true }))) {
+      return;
+    }
+
     setLoading(true);
 
     try {
@@ -1519,8 +1573,8 @@ const MemoriWidget = ({
         referral = (() => {
           return window.location.href;
         })();
-      } catch (err) {
-        console.debug(err);
+      } catch {
+        // ignore referral URL errors
       }
 
       // Initialize session with parameters
@@ -1531,12 +1585,7 @@ const MemoriWidget = ({
         pin: params.pin ?? personification?.pin,
         additionalInfo: {
           ...(params.additionalInfo || additionalInfo || {}),
-          loginToken:
-            userToken ??
-            loginToken ??
-            params.additionalInfo?.loginToken ??
-            additionalInfo?.loginToken ??
-            authToken,
+          loginToken: resolveLoginToken(params.additionalInfo?.loginToken),
           language: (
             userLang ??
             memori.culture?.split('-')?.[0] ??
@@ -1582,7 +1631,7 @@ const MemoriWidget = ({
         setGotErrorInOpening(true);
       }
       // Handle authentication error
-      else if (session?.resultCode === 403) {
+      else if (session?.resultCode === 403 && memori.privacyType !== 'PUBLIC') {
         setMemoriPwd(undefined);
         setAuthModalState('password');
         return session;
@@ -1607,11 +1656,10 @@ const MemoriWidget = ({
             duration: 0,
           })
         );
-        setGotErrorInOpening(true);
         return session;
       }
     } catch (err) {
-      console.error(err);
+      logWidgetError('fetchSession failed', err);
     }
   };
 
@@ -1639,7 +1687,8 @@ const MemoriWidget = ({
     additionalInfoProp?: { [key: string]: string | undefined },
     continueFromChatLogID?: string,
     continueFromSessionID?: string,
-    isSessionExpired?: boolean
+    isSessionExpired?: boolean,
+    suppressHistoryUpdate?: boolean
   ) => {
     // Set loading state while reopening session
     setLoading(true);
@@ -1650,12 +1699,10 @@ const MemoriWidget = ({
       undefined
     );
     let userBirthDate = birthDate ?? storageBirthDate;
-    // console.log('[REOPEN_SESSION] Using birth date:', userBirthDate);
 
     try {
       // Show age verification if required and birth date not provided
       if (!userBirthDate && !!minAge) {
-        // console.log('[REOPEN_SESSION] Age verification required, showing modal');
         setShowAgeVerification(true);
         return;
       }
@@ -1669,24 +1716,26 @@ const MemoriWidget = ({
         !recoveryTokens &&
         !memoriTokens
       ) {
-        // console.log('[REOPEN_SESSION] Authentication required, showing modal');
         setAuthModalState('password');
         return;
       }
 
+      if (!(await checkCredits({ notify: true }))) {
+        setLoading(false);
+        return null;
+      }
+
       // Get current URL as referral
       let referral;
       try {
         referral = (() => {
           return window.location.href;
         })();
-        // console.log('[REOPEN_SESSION] Got referral:', referral);
-      } catch (err) {
-        console.debug('[REOPEN_SESSION] Error getting referral:', err);
+      } catch {
+        // ignore referral URL errors
       }
 
       // Initialize session with provided parameters
-      // console.log('[REOPEN_SESSION] Initializing session...');
       const { sessionID, currentState, ...response } = await initSession({
         memoriID: memori.engineMemoriID ?? '',
         password: password || memoriPwd || memori.secretToken,
@@ -1705,12 +1754,7 @@ const MemoriWidget = ({
         birthDate: userBirthDate,
         additionalInfo: {
           ...(additionalInfoProp || additionalInfo || {}),
-          loginToken:
-            userToken ??
-            loginToken ??
-            additionalInfoProp?.loginToken ??
-            additionalInfo?.loginToken ??
-            authToken,
+          loginToken: resolveLoginToken(additionalInfoProp?.loginToken),
           language: (
             userLang ??
             memori.culture?.split('-')?.[0] ??
@@ -1723,30 +1767,36 @@ const MemoriWidget = ({
 
       // Handle successful session initialization
       if (sessionID && currentState && response.resultCode === 0) {
-        console.log(
-          '[REOPEN_SESSION] Session initialized successfully:',
-          sessionID
-        );
         setSessionId(sessionID);
 
         // Update dialog state and history if requested
         if (updateDialogState) {
-          // console.log('[REOPEN_SESSION] Updating dialog state');
           setCurrentDialogState(currentState);
 
-          if (currentState.emission) {
-            console.log(
-              '[REOPEN_SESSION] Processing emission:',
-              currentState.emission
-            );
+          const sessionExpiredStatus =
+            isSessionExpired && history.length > 1
+              ? t('sessionExpiredReopening')
+              : null;
+
+          if (sessionExpiredStatus && suppressHistoryUpdate) {
+            pushMessage({
+              text: '',
+              emitter: 'system',
+              fromUser: false,
+              initial: sessionExpiredStatus as any,
+              contextVars: {},
+              date: new Date().toISOString(),
+            });
+          }
+
+          if (currentState.emission && !suppressHistoryUpdate) {
             // Determine initial status message based on context
             // Show status message only if session expired and there's existing history
-            const initialStatus =
-              isSessionExpired && history.length > 1
-                ? 'Session Expired, reopening session'
-                : history.length <= 1
-                ? true
-                : undefined;
+            const initialStatus = sessionExpiredStatus
+              ? sessionExpiredStatus
+              : history.length <= 1
+              ? true
+              : undefined;
 
             // Set initial message or append to existing history
             history.length <= 1
@@ -1809,8 +1859,10 @@ const MemoriWidget = ({
         setGotErrorInOpening(true);
       }
       // Handle authentication error
-      else if (response?.resultCode === 403) {
-        console.error('[REOPEN_SESSION] Authentication error');
+      else if (
+        response?.resultCode === 403 &&
+        memori.privacyType !== 'PUBLIC'
+      ) {
         setMemoriPwd(undefined);
         setAuthModalState('password');
       }
@@ -1826,7 +1878,7 @@ const MemoriWidget = ({
         setGotErrorInOpening(true);
       }
     } catch (err) {
-      console.error('[REOPEN_SESSION] Caught error:', err);
+      logWidgetError('reopenSession failed', err);
     }
     // Reset loading state
     setLoading(false);
@@ -1834,6 +1886,101 @@ const MemoriWidget = ({
     return null;
   };
 
+  const retryAfterExpiredSessionRef = useRef<
+    (params: EnterTextRetryParams) => ReturnType<typeof reopenSession>
+  >(() => Promise.resolve(null));
+
+  retryAfterExpiredSessionRef.current = (params: EnterTextRetryParams) => {
+    const {
+      text,
+      media,
+      translate = true,
+      translatedText,
+      hidden = false,
+      typingText,
+      useLoaderTextAsMsg = false,
+      hasBatchQueued = false,
+      expiredSessionID,
+      continueFromChatLogID: continueFromChatLogIDParam,
+    } = params;
+
+    const continueFromSessionID = expiredSessionID ?? sessionId;
+    const continueFromChatLogID = continueFromChatLogIDParam ?? chatLogID;
+
+    const reopenAfterExpiry = () =>
+      reopenSession(
+        true,
+        memoriPwd || memori.secretToken,
+        memoriTokens,
+        undefined,
+        undefined,
+        {
+          LANG: userLang,
+          PATHNAME: window.location.pathname,
+          ROUTE: window.location.pathname?.split('/')?.pop() || '',
+          ...(initialContextVars || {}),
+        },
+        initialQuestion,
+        undefined,
+        undefined,
+        continueFromChatLogID,
+        continueFromSessionID,
+        true,
+        true
+      );
+
+    const scheduleRetry = (newSessionID: string) => {
+      setTimeout(() => {
+        sendMessage(
+          text!,
+          media,
+          newSessionID,
+          translate,
+          translatedText,
+          hidden,
+          typingText,
+          useLoaderTextAsMsg,
+          hasBatchQueued,
+          true
+        );
+      }, 500);
+    };
+
+    const handleReopenFailure = (
+      state: Awaited<ReturnType<typeof reopenSession>>
+    ) => {
+      setMemoriTyping(false);
+      setTypingText(undefined);
+      // `null` = explicit failure; `undefined` = auth/age modal opened (message kept in history)
+      if (state === null && text && !hidden) {
+        add(
+          createAlertOptions({
+            description: t('errors.SESSION_EXPIRED'),
+            severity: 'error',
+          })
+        );
+      }
+    };
+
+    if (!text) {
+      return reopenAfterExpiry().then(state => {
+        if (!state?.sessionID) {
+          handleReopenFailure(state);
+        }
+        return state;
+      });
+    }
+
+    return reopenAfterExpiry().then(state => {
+      if (state?.sessionID) {
+        scheduleRetry(state.sessionID);
+      } else {
+        handleReopenFailure(state);
+      }
+      return state;
+    });
+  };
+
   const changeTag = async (
     memoriId: string,
     sessionId: string,
@@ -1841,7 +1988,6 @@ const MemoriWidget = ({
     pin?: string
   ) => {
     if (!memoriId || !sessionId) {
-      console.error('CHANGETAG/Session not found');
       return Promise.reject('Session not found');
     }
 
@@ -1881,7 +2027,6 @@ const MemoriWidget = ({
             };
           }
         } else if ([400, 401, 403, 404, 500].includes(resultCode)) {
-          console.warn('[APPCONTEXT/CHANGETAG]', resultCode);
           let storageBirthDate = getLocalConfig<string | undefined>(
             'birthDate',
             undefined
@@ -1892,8 +2037,8 @@ const MemoriWidget = ({
             referral = (() => {
               return window.location.href;
             })();
-          } catch (err) {
-            console.debug(err);
+          } catch {
+            // ignore referral URL errors
           }
 
           fetchSession({
@@ -1911,11 +2056,7 @@ const MemoriWidget = ({
             birthDate: birthDate || storageBirthDate || undefined,
             additionalInfo: {
               ...(additionalInfo || {}),
-              loginToken:
-                userToken ??
-                loginToken ??
-                additionalInfo?.loginToken ??
-                authToken,
+              loginToken: resolveLoginToken(),
               language: (
                 userLang ??
                 memori.culture?.split('-')?.[0] ??
@@ -1935,7 +2076,6 @@ const MemoriWidget = ({
       }
     } catch (_e) {
       let err = _e as Error;
-      console.warn('[APPCONTEXT/CHANGETAG]', err);
       return Promise.reject(err);
     }
 
@@ -1962,6 +2102,7 @@ const MemoriWidget = ({
     return () => {
       setHasUserActivatedSpeak(false);
       setClickedStart(false);
+      sessionStartingRef.current = false;
       clearInteractionTimeout();
       timeoutRef.current = undefined;
     };
@@ -1974,8 +2115,6 @@ const MemoriWidget = ({
   const [requestedListening, setRequestedListening] = useState(false);
   const startListeningRef = useRef<(() => Promise<void>) | null>(null);
 
-  // console.log('tenantID', tenantID);
-
   // Define TTS configuration
   const ttsConfig = useMemo(
     () => ({
@@ -2030,7 +2169,6 @@ const MemoriWidget = ({
       'muteSpeaker',
       !defaultEnableAudio
     );
-    console.log('[MemoriWidget] shouldPlayAudio', currentSpeakerMuted);
     return (
       text &&
       text.trim() &&
@@ -2042,7 +2180,6 @@ const MemoriWidget = ({
 
   // Create a single, centralized function to process and send messages
   const processSpeechAndSendMessage = (text: string) => {
-    // console.log('processSpeechAndSendMessage', text);
     // Skip if already processing or no text
     if (!text || text.trim().length === 0) {
       return;
@@ -2051,17 +2188,15 @@ const MemoriWidget = ({
     try {
       // Process the text
       const message = stripDuplicates(text);
-      console.debug('Processing speech message:', message);
 
       if (message.length > 0) {
         setUserMessage('');
 
         // Send the message
-        console.debug('Sending message:', message);
         sendMessage(message);
       }
-    } catch (error) {
-      console.error('Error in processSpeechAndSendMessage:', error);
+    } catch {
+      // ignore speech processing errors
     }
   };
 
@@ -2141,8 +2276,7 @@ const MemoriWidget = ({
         }
 
         return translatedState;
-      } catch (error) {
-        console.error('Error in translateAndSpeak:', error);
+      } catch {
         // Still update activation state even if there's an error
         if (!hasUserActivatedSpeak) {
           setHasUserActivatedSpeak(true);
@@ -2159,6 +2293,277 @@ const MemoriWidget = ({
     ]
   );
 
+  const processEnterTextDialogResponse = useCallback(
+    (event: NatsDialogResponseEvent, pending: PendingEnterText) => {
+      const {
+        msg,
+        typingText: pendingTypingText,
+        useLoaderTextAsMsg,
+      } = pending;
+      const currentState = event.currentState;
+
+      if (event.resultCode !== 0 || !currentState) {
+        if (isSessionExpiredNatsResponse(event) && pending.text) {
+          setMemoriTyping(false);
+          setTypingText(undefined);
+          retryAfterExpiredSessionRef.current({
+            text: pending.text,
+            media: pending.media,
+            translate: pending.translate,
+            translatedText: pending.translatedText,
+            hidden: pending.hidden,
+            typingText: pending.typingText,
+            useLoaderTextAsMsg: pending.useLoaderTextAsMsg,
+            hasBatchQueued: pending.hasBatchQueued,
+            expiredSessionID: sessionId,
+            continueFromChatLogID: chatLogID,
+          });
+          return;
+        }
+
+        if (event.resultCode === 500 && event.resultMessage) {
+          setHistory(h => [
+            ...h,
+            {
+              text: 'Error: ' + event.resultMessage,
+              emitter: 'system',
+              fromUser: false,
+              initial: false,
+              contextVars: {},
+              date: new Date().toISOString(),
+            },
+          ]);
+        }
+        return;
+      }
+
+      if (!msg) {
+        return;
+      }
+
+      setChatLogID(undefined);
+      const emission =
+        useLoaderTextAsMsg && pendingTypingText
+          ? pendingTypingText
+          : currentState.emission ?? currentDialogState?.emission;
+
+      if (
+        userLang.toLowerCase() !== language.toLowerCase() &&
+        emission &&
+        isMultilanguageEnabled
+      ) {
+        currentState.emission = emission;
+
+        translateDialogState(currentState, userLang, msg).then(ts => {
+          const text = ts.translatedEmission || ts.emission;
+          if (text && shouldPlayAudio(text)) {
+            handleSpeak(text);
+          }
+        });
+      } else {
+        setCurrentDialogState({
+          ...currentState,
+          emission,
+        });
+
+        if (emission) {
+          pushMessage({
+            text: emission,
+            emitter: currentState.emitter,
+            media: currentState.emittedMedia ?? currentState.media,
+            llmUsage: (currentState as any).llmUsage,
+            fromUser: false,
+            questionAnswered: msg,
+            generatedByAI: !!currentState.completion,
+            contextVars: currentState.contextVars,
+            date: currentState.currentDate,
+            placeName: currentState.currentPlaceName,
+            placeLatitude: currentState.currentLatitude,
+            placeLongitude: currentState.currentLongitude,
+            placeUncertaintyKm: currentState.currentUncertaintyKm,
+            tag: currentState.currentTag,
+            memoryTags: currentState.memoryTags,
+          } as any);
+          if (emission && shouldPlayAudio(emission)) {
+            handleSpeak(emission);
+          }
+        }
+      }
+    },
+    [
+      userLang,
+      language,
+      isMultilanguageEnabled,
+      currentDialogState?.emission,
+      translateDialogState,
+      handleSpeak,
+      shouldPlayAudio,
+    ]
+  );
+
+  const clearEnterTextPending = useCallback(
+    (correlationID: string, pending: PendingEnterText) => {
+      if (pending.waitForResponse?.timeoutId) {
+        clearTimeout(pending.waitForResponse.timeoutId);
+      }
+      pendingEnterTextRef.current.delete(correlationID);
+    },
+    []
+  );
+
+  const deliverEnterTextNatsError = useCallback(
+    (event: NatsErrorEvent) => {
+      const correlationID = event.correlationID;
+      let pending: PendingEnterText | undefined;
+
+      if (correlationID) {
+        pending = pendingEnterTextRef.current.get(correlationID);
+        if (pending) {
+          clearEnterTextPending(correlationID, pending);
+          pending.waitForResponse?.reject(
+            new Error(
+              event.errorMessage ?? String(event.errorCode ?? 'NATS error')
+            )
+          );
+        }
+      }
+
+      if (isSessionExpiredNatsError(event) && pending?.text) {
+        setMemoriTyping(false);
+        setTypingText(undefined);
+        retryAfterExpiredSessionRef.current({
+          text: pending.text,
+          media: pending.media,
+          translate: pending.translate,
+          translatedText: pending.translatedText,
+          hidden: pending.hidden,
+          typingText: pending.typingText,
+          useLoaderTextAsMsg: pending.useLoaderTextAsMsg,
+          hasBatchQueued: pending.hasBatchQueued,
+          expiredSessionID: sessionId,
+          continueFromChatLogID: chatLogID,
+        });
+        return;
+      }
+
+      const errorText = event.errorMessage
+        ? `Error: ${event.errorMessage}`
+        : event.errorCode
+        ? `Error: ${event.errorCode}`
+        : 'Error: An unexpected error occurred';
+
+      pushMessage({
+        text: errorText,
+        emitter: 'system',
+        fromUser: false,
+        initial: false,
+        contextVars: {},
+        date: new Date().toISOString(),
+      });
+
+      setMemoriTyping(false);
+      setTypingText(undefined);
+    },
+    [clearEnterTextPending]
+  );
+
+  const deliverEnterTextNatsResponse = useCallback(
+    (correlationID: string, event: NatsDialogResponseEvent) => {
+      const pending = pendingEnterTextRef.current.get(correlationID);
+      if (!pending) {
+        bufferedNatsResponsesRef.current.set(correlationID, event);
+        return;
+      }
+
+      clearEnterTextPending(correlationID, pending);
+
+      if (pending.waitForResponse) {
+        pending.waitForResponse.resolve(event);
+        setMemoriTyping(false);
+        setTypingText(undefined);
+        return;
+      }
+
+      processEnterTextDialogResponse(event, pending);
+
+      if (!pending.hasBatchQueued) {
+        setMemoriTyping(false);
+        setTypingText(undefined);
+      }
+    },
+    [processEnterTextDialogResponse, clearEnterTextPending]
+  );
+
+  const registerPendingEnterText = useCallback(
+    (correlationID: string, pending: PendingEnterText) => {
+      const buffered = bufferedNatsResponsesRef.current.get(correlationID);
+      if (buffered) {
+        bufferedNatsResponsesRef.current.delete(correlationID);
+        pendingEnterTextRef.current.set(correlationID, pending);
+        deliverEnterTextNatsResponse(correlationID, buffered);
+        return;
+      }
+
+      pendingEnterTextRef.current.set(correlationID, pending);
+    },
+    [deliverEnterTextNatsResponse]
+  );
+
+  const waitForEnterTextNatsResponse = useCallback(
+    (correlationID: string, timeoutMs = 120000) =>
+      new Promise<NatsDialogResponseEvent>((resolve, reject) => {
+        const timeoutId = setTimeout(() => {
+          const current = pendingEnterTextRef.current.get(correlationID);
+          if (current) {
+            clearEnterTextPending(correlationID, current);
+          }
+          logWidgetError('NATS timeout', { correlationID, timeoutMs });
+          reject(new Error('NATS enter-text response timeout'));
+        }, timeoutMs);
+
+        registerPendingEnterText(correlationID, {
+          waitForResponse: {
+            resolve: event => {
+              clearTimeout(timeoutId);
+              resolve(event);
+            },
+            reject: error => {
+              clearTimeout(timeoutId);
+              reject(error);
+            },
+            timeoutId,
+          },
+        });
+      }),
+    [registerPendingEnterText, clearEnterTextPending]
+  );
+
+  // NATS subscription: receives progress updates and the async enter-text response.
+  useNats({
+    baseUrl,
+    sessionId,
+    onProgress: useCallback((event: NatsProgressEvent) => {
+      if (event.message) {
+        setTypingText(event.message);
+      }
+    }, []),
+    onDialogResponse: useCallback(
+      (event: NatsDialogResponseEvent) => {
+        const correlationID = event.correlationID;
+        if (!correlationID) {
+          logWidgetError('NATS dialog response missing correlationID', event);
+          setMemoriTyping(false);
+          setTypingText(undefined);
+          return;
+        }
+
+        deliverEnterTextNatsResponse(correlationID, event);
+      },
+      [deliverEnterTextNatsResponse]
+    ),
+    onError: deliverEnterTextNatsError,
+  });
+
   const focusChatInput = () => {
     let textarea = document.querySelector(
       '#chat-fieldset textarea'
@@ -2187,8 +2592,8 @@ const MemoriWidget = ({
       setClickedStart(false);
       timeoutRef.current = undefined;
       ttsStop();
-    } catch (e) {
-      // console.log('Error: resetUIEffects', e);
+    } catch {
+      // ignore reset errors
     }
   };
   useEffect(() => {
@@ -2245,9 +2650,6 @@ const MemoriWidget = ({
   >();
 
   const globalBackground = integrationConfig?.globalBackground;
-  const globalBackgroundUrl = globalBackground
-    ? `url(${globalBackground})`
-    : null;
 
   const integrationProperties = (
     integration ? getChatStyles(integrationConfig) : {}
@@ -2290,7 +2692,7 @@ const MemoriWidget = ({
   }
   if (integrationConfig?.blurBackground) {
     integrationStylesheetParts.push(
-      '.memori-widget .memori--global-background { filter: blur(5px); }'
+      '.memori-widget .memori-chat--history--has-global-background::before { filter: blur(5px); }'
     );
   }
   const integrationStylesheet = `@layer integration {
@@ -2444,12 +2846,6 @@ const MemoriWidget = ({
       chatLog?: ChatLog,
       targetSessionID?: string
     ) => {
-      // console.log('[onClickStart] Starting with params:', {
-      //   session,
-      //   initialSessionExpired,
-      //   chatLog
-      // });
-
       const sessionID = chatLog ? undefined : session?.sessionID || sessionId;
       const dialogState = chatLog
         ? undefined
@@ -2478,10 +2874,17 @@ const MemoriWidget = ({
         return;
       }
 
+      if (!(await checkCredits({ notify: true }))) {
+        setClickedStart(false);
+        setLoading(false);
+        return;
+      }
+
       // Handle age verification
       if (!sessionID && !!minAge && !birth) {
         setShowAgeVerification(true);
         setClickedStart(false);
+        return;
       }
       // Handle authentication
       else if (
@@ -2498,117 +2901,125 @@ const MemoriWidget = ({
       }
       // Create new session if needed
       else if (!sessionID || initialSessionExpired) {
-        setClickedStart(false);
         setGotErrorInOpening(false);
-        const session = await fetchSession({
-          memoriID: memori.engineMemoriID!,
-          password: secret || memoriPwd || memori.secretToken,
-          tag: personification?.tag,
-          pin: personification?.pin,
-          continueFromChatLogID: chatLog?.chatLogID,
-          initialContextVars: {
-            LANG: userLang,
-            PATHNAME: window.location.pathname?.toUpperCase(),
-            ROUTE:
-              window.location.pathname?.split('/')?.pop()?.toUpperCase() || '',
-            ...((!chatLog
-              ? initialContextVars
-              : chatLog.lines[chatLog.lines.length - 1].contextVars) || {}),
-          },
-          initialQuestion: chatLog ? undefined : initialQuestion,
-          birthDate: birth,
-          additionalInfo: {
-            ...(additionalInfo || {}),
-            loginToken:
-              userToken ??
-              loginToken ??
-              additionalInfo?.loginToken ??
-              authToken,
-            language: (
-              userLang ??
-              memori.culture?.split('-')?.[0] ??
-              'IT'
-            ).toLowerCase(),
-            timeZoneOffset: new Date().getTimezoneOffset().toString(),
-          },
-        });
+        if (sessionStartingRef.current) {
+          return;
+        }
+        sessionStartingRef.current = true;
+        try {
+          const session = await fetchSession({
+            memoriID: memori.engineMemoriID!,
+            password: secret || memoriPwd || memori.secretToken,
+            tag: personification?.tag,
+            pin: personification?.pin,
+            continueFromChatLogID: chatLog?.chatLogID,
+            initialContextVars: {
+              LANG: userLang,
+              PATHNAME: window.location.pathname?.toUpperCase(),
+              ROUTE:
+                window.location.pathname?.split('/')?.pop()?.toUpperCase() ||
+                '',
+              ...((!chatLog
+                ? initialContextVars
+                : chatLog.lines[chatLog.lines.length - 1].contextVars) || {}),
+            },
+            initialQuestion: chatLog ? undefined : initialQuestion,
+            birthDate: birth,
+            additionalInfo: {
+              ...(additionalInfo || {}),
+              loginToken: resolveLoginToken(),
+              language: (
+                userLang ??
+                memori.culture?.split('-')?.[0] ??
+                'IT'
+              ).toLowerCase(),
+              timeZoneOffset: new Date().getTimezoneOffset().toString(),
+            },
+          });
 
-        if (session?.dialogState) {
-          // reset history
-          if (!chatLog) {
-            setHistory([]);
+          if (session?.dialogState) {
+            // reset history
+            if (!chatLog) {
+              setHistory([]);
 
-            // Use translateAndSpeak which already handles the speaking
-            await translateAndSpeak(session.dialogState, userLang);
-            // No need for additional handleSpeak call since translateAndSpeak already handles it
-            setHasUserActivatedSpeak(true);
-          } else {
-            const messages = chatLog.lines.map(
-              (l, i) =>
-                ({
-                  text: l.text,
-                  media: l.media
-                    ?.filter(m => allowedMediaTypes.includes(m.mimeType))
-                    ?.map(m => ({
-                      mediumID: `${i}-${m.mimeType}`,
-                      ...m,
-                    })),
-                  fromUser: l.inbound,
-                  llmUsage: (l as any).llmUsage,
-                  timestamp: l.timestamp,
-                  emitter: l.emitter,
-                  initial: i === 0,
-                } as Message)
-            );
+              // Use translateAndSpeak which already handles the speaking
+              await translateAndSpeak(session.dialogState, userLang);
+              // No need for additional handleSpeak call since translateAndSpeak already handles it
+              setHasUserActivatedSpeak(true);
+              setClickedStart(false);
+            } else {
+              const messages = chatLog.lines.map(
+                (l, i) =>
+                  ({
+                    text: l.text,
+                    media: l.media
+                      ?.filter(m => allowedMediaTypes.includes(m.mimeType))
+                      ?.map(m => ({
+                        mediumID: `${i}-${m.mimeType}`,
+                        ...m,
+                      })),
+                    fromUser: l.inbound,
+                    llmUsage: (l as any).llmUsage,
+                    timestamp: l.timestamp,
+                    emitter: l.emitter,
+                    initial: i === 0,
+                  } as Message)
+              );
 
-            // we dont remove the last one as it is the current state
-            translatedMessages = messages ?? [];
-            if (
-              language.toUpperCase() !== userLang.toUpperCase() &&
-              isMultilanguageEnabled
-            ) {
-              try {
-                translatedMessages = await Promise.all(
-                  messages.map(async m => {
-                    // If original text is present, the message is already translated
-                    if ('originalText' in m && m.originalText) {
-                      return m;
-                    }
-                    // Otherwise translate the message
-                    return {
-                      ...m,
-                      originalText: m.text,
-                      text: (
-                        await getTranslation(
-                          m.text,
-                          userLang,
-                          language,
-                          baseUrl
-                        )
-                      ).text,
-                    };
-                  })
-                );
-              } catch (e) {
-                console.error('[onClickStart] Error translating messages:', e);
+              // we dont remove the last one as it is the current state
+              translatedMessages = messages ?? [];
+              if (
+                language.toUpperCase() !== userLang.toUpperCase() &&
+                isMultilanguageEnabled
+              ) {
+                try {
+                  translatedMessages = await Promise.all(
+                    messages.map(async m => {
+                      // If original text is present, the message is already translated
+                      if ('originalText' in m && m.originalText) {
+                        return m;
+                      }
+                      // Otherwise translate the message
+                      return {
+                        ...m,
+                        originalText: m.text,
+                        text: (
+                          await getTranslation(
+                            m.text,
+                            userLang,
+                            language,
+                            baseUrl
+                          )
+                        ).text,
+                      };
+                    })
+                  );
+                } catch {
+                  // ignore translation errors
+                }
               }
-            }
 
-            setHistory(translatedMessages);
+              setHistory(translatedMessages);
 
-            translateDialogState(
-              session.dialogState,
-              userLang,
-              undefined,
-              true
-            ).finally(() => {
-              setHasUserActivatedSpeak(true);
-            });
+              translateDialogState(
+                session.dialogState,
+                userLang,
+                undefined,
+                true
+              ).finally(() => {
+                setHasUserActivatedSpeak(true);
+                setClickedStart(false);
+              });
+            }
+          } else if (session?.resultCode === 0) {
+            sessionStartingRef.current = false;
+            await onClickStart((session as any) || undefined);
+          } else {
+            setLoading(false);
+            setClickedStart(false);
           }
-        } else if (session?.resultCode === 0) {
-          await onClickStart((session as any) || undefined);
-        } else {
-          setLoading(false);
+        } finally {
+          sessionStartingRef.current = false;
         }
 
         return;
@@ -2621,9 +3032,7 @@ const MemoriWidget = ({
 
         if (response.resultCode !== 0 || !currentState) {
           const { chatLogs } = await getSessionChatLogs(sessionID!, sessionID!);
-          setGotErrorInOpening(true);
           setSessionId(undefined);
-          setClickedStart(false);
           await onClickStart(undefined, true, chatLogs?.[0]);
           return;
         }
@@ -2649,11 +3058,11 @@ const MemoriWidget = ({
 
             if (session && session.resultCode === 0) {
               await translateAndSpeak(session.currentState, userLang);
+              setClickedStart(false);
             } else {
               throw new Error('No session');
             }
-          } catch (e) {
-            console.error('[onClickStart] Error changing tag:', e);
+          } catch {
             reopenSession(
               true,
               memori?.secretToken,
@@ -2672,6 +3081,7 @@ const MemoriWidget = ({
               birth
             ).then(() => {
               setHasUserActivatedSpeak(true);
+              setClickedStart(false);
             });
           }
         }
@@ -2694,6 +3104,7 @@ const MemoriWidget = ({
 
             if (session && session.resultCode === 0) {
               await translateAndSpeak(session.currentState, userLang);
+              setClickedStart(false);
             } else {
               throw new Error('No session');
             }
@@ -2716,6 +3127,7 @@ const MemoriWidget = ({
               birth
             ).then(() => {
               setHasUserActivatedSpeak(true);
+              setClickedStart(false);
             });
           }
         }
@@ -2762,14 +3174,14 @@ const MemoriWidget = ({
                     ).text,
                   }))
                 );
-              } catch (e) {
-                console.error('[onClickStart] Error translating messages:', e);
+              } catch {
+                // ignore translation errors
               }
             }
 
             setHistory(translatedMessages);
-          } catch (e) {
-            console.error('[onClickStart] Error retrieving chat logs:', e);
+          } catch {
+            // ignore chat log retrieval errors
           }
 
           if (
@@ -2778,6 +3190,7 @@ const MemoriWidget = ({
           ) {
             // we have a history, don't push message
             setHasUserActivatedSpeak(true);
+            setClickedStart(false);
             await translateAndSpeak(
               currentState,
               userLang,
@@ -2787,16 +3200,13 @@ const MemoriWidget = ({
               !!translatedMessages?.length
             );
           } else {
-            console.log('[onClickStart] Starting with initial question');
             // remove default initial message
             translatedMessages = [];
             setHistory([]);
 
-            setMemoriTyping(true);
-
             // we have no chat history, we start by initial question
             const placeSpec = getPlaceSpecForEnterText(position);
-            const response = await postTextEnteredEvent({
+            const response = await postEnterTextAsync({
               sessionId: sessionID!,
               text: initialQuestion,
               ...(memori.needsDateTime && {
@@ -2804,8 +3214,7 @@ const MemoriWidget = ({
               }),
               ...(placeSpec !== undefined && { place: placeSpec }),
             });
-
-            // Handle 500 error from TextEnteredEvent
+            // Handle 500 error from EnterTextAsync
             if (response.resultCode === 500 && response.resultMessage) {
               setHistory(h => [
                 ...h,
@@ -2818,16 +3227,36 @@ const MemoriWidget = ({
                   date: new Date().toISOString(),
                 },
               ]);
-              setMemoriTyping(false);
               return;
             }
 
-            await translateAndSpeak(
-              response.currentState ?? currentState,
-              userLang,
-              undefined,
-              false
-            );
+            const onClickStartCorrelationID = readCorrelationID(response);
+            if (response.resultCode === 0 && onClickStartCorrelationID) {
+              setMemoriTyping(true);
+              try {
+                const natsEvent = await waitForEnterTextNatsResponse(
+                  onClickStartCorrelationID
+                );
+                if (natsEvent.resultCode === 0 && natsEvent.currentState) {
+                  await translateAndSpeak(
+                    natsEvent.currentState,
+                    userLang,
+                    undefined,
+                    false
+                  );
+                  setClickedStart(false);
+                }
+              } catch (err) {
+                logWidgetError('onClickStart NATS wait failed', err);
+                setMemoriTyping(false);
+                setTypingText(undefined);
+              }
+            } else if (response.resultCode === 0) {
+              logWidgetError(
+                'onClickStart enter-text missing correlationID',
+                response
+              );
+            }
           }
         }
       }
@@ -2838,6 +3267,7 @@ const MemoriWidget = ({
 
         // everything is fine, just translate dialog state and activate chat
         await translateAndSpeak(dialogState!, userLang);
+        setClickedStart(false);
       }
     },
     [memoriPwd, memori, memoriTokens, birthDate, sessionId, userLang, position]
@@ -2845,19 +3275,40 @@ const MemoriWidget = ({
 
   const setPositionPopoverOpen = useCallback(
     (open: boolean) => {
-      setPositionPopoverOpenState(open);
-      if (!open && autoStart) {
-        onClickStart();
-      }
+      setPositionPopoverOpenState(wasOpen => {
+        if (
+          shouldRestartSessionOnPositionPopoverClose(wasOpen, open, autoStart)
+        ) {
+          // Defer: React setState updaters must stay pure.
+          queueMicrotask(() => {
+            onClickStart();
+          });
+        }
+        return open;
+      });
     },
     [autoStart, onClickStart]
   );
 
   useEffect(() => {
-    if (!clickedStart && autoStart && selectedLayout !== 'HIDDEN_CHAT') {
+    if (
+      !clickedStart &&
+      !sessionStartingRef.current &&
+      !sessionId &&
+      autoStart &&
+      selectedLayout !== 'HIDDEN_CHAT' &&
+      (!needsCredits || hasEnoughCredits)
+    ) {
       onClickStart();
     }
-  }, [clickedStart, autoStart, selectedLayout]);
+  }, [
+    clickedStart,
+    autoStart,
+    selectedLayout,
+    sessionId,
+    needsCredits,
+    hasEnoughCredits,
+  ]);
 
   useEffect(() => {
     const targetNode =
@@ -2868,29 +3319,31 @@ const MemoriWidget = ({
       return;
     }
 
+    const propsToken = additionalInfo?.loginToken ?? authToken;
+    const initialDomToken = targetNode.getAttribute('authtoken') || undefined;
+    if (initialDomToken && !propsToken) {
+      setLoginToken(initialDomToken);
+      userTokenRef.current = initialDomToken;
+    }
+
+    const applyAuthTokenFromElement = (element: Element) => {
+      const clientNode =
+        element.nodeName === 'MEMORI-CLIENT'
+          ? element
+          : element.closest('memori-client') ?? element.parentElement;
+      const token = clientNode?.getAttribute('authtoken') || undefined;
+      setLoginToken(token);
+      userTokenRef.current = token;
+    };
+
     const config = { attributes: true, childList: false, subtree: false };
-    const callback: MutationCallback = (mutationList, _observer) => {
+    const callback: MutationCallback = mutationList => {
       for (const mutation of mutationList) {
         if (
           mutation.type === 'attributes' &&
           mutation.attributeName?.toLowerCase() === 'authtoken'
         ) {
-          if (mutation.target.nodeName === 'MEMORI-CLIENT') {
-            setLoginToken(
-              // @ts-ignore
-              mutation.target.getAttribute('authtoken') || undefined
-            );
-            // @ts-ignore
-            userToken = mutation.target.getAttribute('authtoken') || undefined;
-          } else {
-            // @ts-ignore
-            setLoginToken(
-              mutation.target?.parentElement?.getAttribute('authtoken') ||
-                undefined
-            );
-            // @ts-ignore
-            userToken = mutation.target.getAttribute('authtoken') || undefined;
-          }
+          applyAuthTokenFromElement(mutation.target as Element);
         }
       }
     };
@@ -2900,7 +3353,7 @@ const MemoriWidget = ({
     return () => {
       observer.disconnect();
     };
-  }, []);
+  }, [memori.name, memori.memoriID, additionalInfo?.loginToken, authToken]);
 
   /**
    * Experts references
@@ -2914,11 +3367,9 @@ const MemoriWidget = ({
 
       if (resp.resultCode === 0) {
         setExperts(experts);
-      } else {
-        console.warn('Error fetching experts', resp);
       }
-    } catch (err) {
-      console.warn(err);
+    } catch {
+      // ignore expert fetch errors
     }
   }, [sessionId, memori?.enableBoardOfExperts]);
   useEffect(() => {
@@ -2931,39 +3382,74 @@ const MemoriWidget = ({
     !!user?.userID &&
     user?.pAndCUAccepted;
 
-  // check if owner has enough credits
-  const needsCredits = tenant?.billingDelegation;
-  const [hasEnoughCredits, setHasEnoughCredits] = useState<boolean>(true);
-  const checkCredits = useCallback(async () => {
-    if (!tenant?.billingDelegation) return;
+  const handleNotEnoughCredits = useCallback(() => {
+    setHasEnoughCredits(false);
+    setAuthModalState(null);
+    add(
+      createAlertOptions({
+        description: t('notEnoughCredits'),
+        severity: 'error',
+      })
+    );
+  }, [add, t]);
+  const checkCredits = useCallback(
+    async (options?: { notify?: boolean }) => {
+      if (!tenant?.billingDelegation) return true;
+
+      // Billing delegation is active: credits MUST be verified.
+      // Without either owner identifier we cannot call the API, so we fail closed
+      // instead of silently letting the session start unverified.
+      if (!ownerUserID && !ownerUserName) {
+        if (options?.notify) {
+          handleNotEnoughCredits();
+        } else {
+          setHasEnoughCredits(false);
+        }
+        return false;
+      }
 
-    try {
-      const resp = await getCredits({
-        operation: deepThoughtEnabled
-          ? 'dt_session_creation'
-          : 'session_creation',
-        baseUrl: baseUrl,
-        userID: ownerUserID,
-        userName: ownerUserName,
-        tenant: tenantID,
-      });
+      try {
+        const resp = await getCredits({
+          operation: deepThoughtEnabled
+            ? 'dt_session_creation'
+            : 'session_creation',
+          baseUrl: baseUrl,
+          userID: ownerUserID,
+          userName: ownerUserName,
+          tenant: tenantID,
+        });
 
-      if (resp.enough) {
-        setHasEnoughCredits(true);
-      } else {
-        setHasEnoughCredits(false);
-        console.warn('Not enough credits. Required:', resp.required);
+        if (resp.enough) {
+          setHasEnoughCredits(true);
+          return true;
+        } else {
+          if (options?.notify) {
+            handleNotEnoughCredits();
+          } else {
+            setHasEnoughCredits(false);
+          }
+          return false;
+        }
+      } catch (err) {
+        logWidgetError('checkCredits failed', err);
+        return true;
       }
-    } catch (e) {
-      let err = e as Error;
-      console.debug(err);
-    }
-  }, [tenant?.billingDelegation, deepThoughtEnabled]);
+    },
+    [
+      baseUrl,
+      deepThoughtEnabled,
+      handleNotEnoughCredits,
+      ownerUserID,
+      ownerUserName,
+      tenant?.billingDelegation,
+      tenantID,
+    ]
+  );
   useEffect(() => {
     if (tenant?.billingDelegation) {
       checkCredits();
     }
-  }, [tenant?.billingDelegation, deepThoughtEnabled]);
+  }, [tenant?.billingDelegation, deepThoughtEnabled, checkCredits]);
 
   useEffect(() => {
     if (__WEBCOMPONENT__) return;
@@ -3036,7 +3522,7 @@ const MemoriWidget = ({
         setShowLoginDrawer(false);
         setUser(undefined);
         setLoginToken(undefined);
-        userToken = undefined;
+        userTokenRef.current = undefined;
         removeLocalConfig('loginToken');
       });
     },
@@ -3113,8 +3599,7 @@ const MemoriWidget = ({
     showTypingText:
       showTypingText ?? integrationConfig?.showTypingText ?? false,
     history: showFullHistory ? history : history.slice(-2),
-    authToken:
-      loginToken ?? userToken ?? additionalInfo?.loginToken ?? authToken,
+    authToken: resolveLoginToken(),
     dialogState: currentDialogState,
     pushMessage,
     simulateUserPrompt,
@@ -3170,19 +3655,14 @@ const MemoriWidget = ({
     isChatlogPanel:
       (integrationConfig as { artifactChatLogPanel?: boolean } | undefined)
         ?.artifactChatLogPanel === true,
+    globalBackground: globalBackground || undefined,
   };
 
-  const integrationBackground =
-    integration && globalBackgroundUrl ? (
-      <div className="memori--global-background">
-        <div
-          className="memori--global-background-image"
-          style={{ backgroundImage: globalBackgroundUrl }}
-        />
-      </div>
-    ) : (
-      <div className="memori--global-background no-background-image" />
-    );
+  // Layout chrome placeholder (e.g. Totem gradient when no image). The actual
+  // integration background image is applied on `.memori-chat--content` via chatProps.
+  const integrationBackground = (
+    <div className="memori--global-background no-background-image" />
+  );
 
   const integrationStyle =
     integration &&
@@ -3216,9 +3696,19 @@ const MemoriWidget = ({
     ? ZoomedFullBodyLayout
     : FullPageLayout;
 
+  // Resolve the widget theme once so both `data-theme` on the root and the
+  // `MemoriUIProvider` (which stamps portaled popups) stay in sync.
+  // Prefer integration config; fall back to host dark mode when unset.
+  const widgetTheme: 'light' | 'dark' | undefined =
+    integrationConfig?.theme === 'light' || integrationConfig?.theme === 'dark'
+      ? integrationConfig.theme
+      : isDarkTheme
+      ? 'dark'
+      : undefined;
+
   return (
     <div
-      ref={widgetRootRef}
+      ref={setWidgetRootEl}
       className={cx(
         'memori',
         'memori-widget',
@@ -3236,12 +3726,7 @@ const MemoriWidget = ({
           'memori--has-active-session': !!sessionId,
         }
       )}
-      data-theme={
-        integrationConfig?.theme === 'light' ||
-        integrationConfig?.theme === 'dark'
-          ? integrationConfig.theme
-          : undefined
-      }
+      data-theme={widgetTheme}
       data-memori-name={memori?.name}
       data-memori-id={memori?.engineMemoriID}
       data-memori-secondary-id={memori?.memoriID}
@@ -3253,304 +3738,324 @@ const MemoriWidget = ({
       })}
       style={{ height }}
     >
-      <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 ?? integrationConfig?.avatar_3d_hidden}
-      />
-
-      <ArtifactAPIBridge
-        pushMessage={(message: Message) => {
-          setHistory(history => {
-            if (!history.length) return history;
-            const lastMessage = history[history.length - 1];
-            if (!lastMessage || lastMessage.fromUser) return history;
-            // Create a new message object with the updated text
-            const updatedLastMessage = {
-              ...lastMessage,
-              text: lastMessage.text + message.text,
-            };
-            return [...history.slice(0, -1), updatedLastMessage];
-          });
-        }}
-      />
-
-      <audio
-        id="memori-audio"
-        style={{ display: 'none' }}
-        src="https://aisuru.com/intro.mp3"
-      />
-
-      {isClient && (
-        <MemoriAuth
-          withModal
-          pwdOrTokens={authModalState}
-          openModal={!!authModalState}
-          setPwdOrTokens={setAuthModalState}
-          showTokens={memori.privacyType === 'SECRET'}
-          onFinish={(values: any) => {
-            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?.tag,
-              personification?.pin,
-              {
-                LANG: userLang,
-                PATHNAME: window.location.pathname?.toUpperCase(),
-                ROUTE:
-                  window.location.pathname?.split('/')?.pop()?.toUpperCase() ||
-                  '',
-                ...(initialContextVars || {}),
-              },
-              initialQuestion,
-              birthDate
-            )
-              .then(state => {
-                if (!state?.sessionID) {
-                  throw new Error('AUTH_FAILED');
+      <MemoriUIProvider container={widgetRootEl} theme={widgetTheme}>
+        <WidgetSurfaceProvider value={widgetSurfaceEl}>
+          <div ref={setWidgetSurfaceEl} className="memori-widget__surface">
+            <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 ?? integrationConfig?.avatar_3d_hidden
+              }
+              totemContentMaxWidth={integrationConfig?.totemContentMaxWidth}
+            />
+
+            <ArtifactAPIBridge
+              pushMessage={(message: Message) => {
+                setHistory(history => {
+                  if (!history.length) return history;
+                  const lastMessage = history[history.length - 1];
+                  if (!lastMessage || lastMessage.fromUser) return history;
+                  // Create a new message object with the updated text
+                  const updatedLastMessage = {
+                    ...lastMessage,
+                    text: lastMessage.text + message.text,
+                  };
+                  return [...history.slice(0, -1), updatedLastMessage];
+                });
+              }}
+            />
+
+            <audio
+              id="memori-audio"
+              style={{ display: 'none' }}
+              src="https://aisuru.com/intro.mp3"
+            />
+
+            {isClient && (
+              <MemoriAuth
+                withModal
+                pwdOrTokens={authModalState}
+                openModal={!!authModalState}
+                setPwdOrTokens={setAuthModalState}
+                showTokens={memori.privacyType === 'SECRET'}
+                onFinish={(values: any) => {
+                  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?.tag,
+                    personification?.pin,
+                    {
+                      LANG: userLang,
+                      PATHNAME: window.location.pathname?.toUpperCase(),
+                      ROUTE:
+                        window.location.pathname
+                          ?.split('/')
+                          ?.pop()
+                          ?.toUpperCase() || '',
+                      ...(initialContextVars || {}),
+                    },
+                    initialQuestion,
+                    birthDate
+                  )
+                    .then(state => {
+                      if (!state?.sessionID) {
+                        throw new Error('AUTH_FAILED');
+                      }
+
+                      setAuthModalState(null);
+                      // If we got a valid state from reopenSession, don't call onClickStart again
+                      // to avoid duplicate snippet execution
+                      if (state?.dialogState) {
+                        setHasUserActivatedSpeak(true);
+                      } else {
+                        // Only call onClickStart if reopenSession didn't return a valid state
+                        onClickStart(state);
+                      }
+                    })
+                    .catch(error => {
+                      if (
+                        !(error instanceof Error) ||
+                        error.message !== 'AUTH_FAILED'
+                      ) {
+                        setGotErrorInOpening(true);
+                      }
+                      throw error;
+                    });
+                }}
+                minimumNumberOfRecoveryTokens={
+                  memori?.minimumNumberOfRecoveryTokens ?? 1
                 }
-
-                setAuthModalState(null);
-                // If we got a valid state from reopenSession, don't call onClickStart again
-                // to avoid duplicate snippet execution
-                if (state?.dialogState) {
-                  setHasUserActivatedSpeak(true);
-                } else {
-                  // Only call onClickStart if reopenSession didn't return a valid state
-                  onClickStart(state);
+              />
+            )}
+
+            {isClient && (
+              <AgeVerificationModal
+                visible={showAgeVerification}
+                minAge={minAge}
+                onClose={birthDate => {
+                  if (birthDate) {
+                    setBirthDate(birthDate);
+
+                    setLocalConfig('birthDate', birthDate);
+
+                    reopenSession(
+                      !sessionId,
+                      memoriPassword || memoriPwd || memori?.secretToken,
+                      memoriTokens,
+                      personification?.tag,
+                      personification?.pin,
+                      {
+                        LANG: userLang,
+                        PATHNAME: window.location.pathname?.toUpperCase(),
+                        ROUTE:
+                          window.location.pathname
+                            ?.split('/')
+                            ?.pop()
+                            ?.toUpperCase() || '',
+                        ...(initialContextVars || {}),
+                      },
+                      initialQuestion,
+                      birthDate
+                    )
+                      .then(state => {
+                        setShowAgeVerification(false);
+                        setAuthModalState(null);
+                        onClickStart(state || undefined);
+                      })
+                      .catch(() => {
+                        setShowAgeVerification(false);
+                        setGotErrorInOpening(true);
+                      });
+                  } else {
+                    setShowAgeVerification(false);
+                    setClickedStart(false);
+                  }
+                }}
+              />
+            )}
+
+            {showSettingsDrawer && (
+              <SettingsDrawer
+                layout={selectedLayout}
+                open={!!showSettingsDrawer}
+                onClose={() => setShowSettingsDrawer(false)}
+                microphoneMode={
+                  continuousSpeech ? 'CONTINUOUS' : 'HOLD_TO_TALK'
                 }
-              })
-              .catch(error => {
-                if (
-                  !(error instanceof Error) ||
-                  error.message !== 'AUTH_FAILED'
-                ) {
-                  setGotErrorInOpening(true);
+                continuousSpeechTimeout={continuousSpeechTimeout}
+                setMicrophoneMode={mode =>
+                  setContinuousSpeech(mode === 'CONTINUOUS')
                 }
-                throw error;
-              });
-          }}
-          minimumNumberOfRecoveryTokens={
-            memori?.minimumNumberOfRecoveryTokens ?? 1
-          }
-        />
-      )}
-
-      {isClient && (
-        <AgeVerificationModal
-          visible={showAgeVerification}
-          minAge={minAge}
-          onClose={birthDate => {
-            if (birthDate) {
-              setBirthDate(birthDate);
-
-              setLocalConfig('birthDate', birthDate);
-
-              reopenSession(
-                !sessionId,
-                memoriPassword || memoriPwd || memori?.secretToken,
-                memoriTokens,
-                personification?.tag,
-                personification?.pin,
-                {
-                  LANG: userLang,
-                  PATHNAME: window.location.pathname?.toUpperCase(),
-                  ROUTE:
-                    window.location.pathname
-                      ?.split('/')
-                      ?.pop()
-                      ?.toUpperCase() || '',
-                  ...(initialContextVars || {}),
-                },
-                initialQuestion,
-                birthDate
-              )
-                .then(state => {
-                  setShowAgeVerification(false);
-                  setAuthModalState(null);
-                  onClickStart(state || undefined);
-                })
-                .catch(() => {
-                  setShowAgeVerification(false);
-                  setGotErrorInOpening(true);
-                });
-            } else {
-              setShowAgeVerification(false);
-              setClickedStart(false);
-            }
-          }}
-        />
-      )}
-
-      {showSettingsDrawer && (
-        <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?.avatarURL}
-          additionalSettings={additionalSettings}
-          speakerMuted={speakerMuted}
-        />
-      )}
-
-      {showChatHistoryDrawer && (
-        <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 && (
-        <KnownFacts
-          apiClient={client}
-          memori={memori}
-          sessionID={sessionId}
-          visible={showKnownFactsDrawer}
-          closeDrawer={() => setShowKnownFactsDrawer(false)}
-        />
-      )}
-
-      {showExpertsDrawer && !!experts && (
-        <ExpertsDrawer
-          apiUrl={client.constants.BACKEND_URL}
-          baseUrl={baseUrl}
-          tenant={tenant}
-          experts={experts}
-          open={showExpertsDrawer}
-          onClose={() => setShowExpertsDrawer(false)}
-        />
-      )}
-
-      {showLoginDrawer && tenant?.name && (
-        <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) => {
-            //The user is logged in, so we need to set open a new session with the new token
-            reopenSession(
-              false,
-              memoriPassword || memoriPwd || memori?.secretToken,
-              [],
-              personification?.tag,
-              personification?.pin,
-              {
-                LANG: userLang,
-                PATHNAME: window.location.pathname?.toUpperCase(),
-                ROUTE:
-                  window.location.pathname?.split('/')?.pop()?.toUpperCase() ||
-                  '',
-                ...(initialContextVars || {}),
-              },
-              undefined, // Don't send initialQuestion after login, only show the login status chip
-              birthDate,
-              { loginToken: token } as any,
-              undefined,
-              sessionId
-            ).then(state => {
-              setShowLoginDrawer(false);
-              setUser(user);
-              setLoginToken(token);
-              userToken = token;
-              setLocalConfig('loginToken', token);
-              // Push a message with initial status to show status message when a new session is created after login
-              if (
-                state?.sessionID &&
-                state.sessionID !== sessionId &&
-                state?.dialogState
-              ) {
-                // Push a message with initial status message showing successful login
-                // Only show the chip component, not the emission text
-                const username = user?.userName || t('login.user');
-                pushMessage({
-                  text: '', // Empty text so only the chip is visible
-                  emitter: state.dialogState.emitter,
-                  media:
-                    state.dialogState.emittedMedia ??
-                    state.dialogState.media ??
+                setContinuousSpeechTimeout={setContinuousSpeechTimeout}
+                controlsPosition={controlsPosition}
+                setControlsPosition={setControlsPosition}
+                hideEmissions={hideEmissions}
+                setHideEmissions={setHideEmissions}
+                avatarType={avatarType}
+                setAvatarType={setAvatarType}
+                enablePositionControls={enablePositionControls}
+                setEnablePositionControls={setEnablePositionControls}
+                isAvatar3d={!!integrationConfig?.avatarURL}
+                additionalSettings={additionalSettings}
+                speakerMuted={speakerMuted}
+              />
+            )}
+
+            {showChatHistoryDrawer && (
+              <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 && (
+              <KnownFacts
+                apiClient={client}
+                memori={memori}
+                sessionID={sessionId}
+                visible={showKnownFactsDrawer}
+                closeDrawer={() => setShowKnownFactsDrawer(false)}
+              />
+            )}
+
+            {showExpertsDrawer && !!experts && (
+              <ExpertsDrawer
+                apiUrl={client.constants.BACKEND_URL}
+                baseUrl={baseUrl}
+                tenant={tenant}
+                experts={experts}
+                open={showExpertsDrawer}
+                onClose={() => setShowExpertsDrawer(false)}
+              />
+            )}
+
+            {showLoginDrawer && tenant?.name && (
+              <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) => {
+                  //The user is logged in, so we need to set open a new session with the new token
+                  reopenSession(
+                    false,
+                    memoriPassword || memoriPwd || memori?.secretToken,
                     [],
-                  fromUser: false,
-                  initial: t('login.successfullyLoggedIn', { username }) as any,
-                  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,
-                });
-                // Update the dialog state so the UI reflects the new session
-                setCurrentDialogState(state.dialogState);
-              }
-            });
-          }}
-          setUser={setUser}
-          onLogout={() => {
-            if (!loginToken) return;
-            client.backend.pwlUserLogout(loginToken).then(() => {
-              setShowLoginDrawer(false);
-              setUser(undefined);
-              setLoginToken(undefined);
-              userToken = undefined;
-              removeLocalConfig('loginToken');
-            });
-          }}
-        />
-      )}
+                    personification?.tag,
+                    personification?.pin,
+                    {
+                      LANG: userLang,
+                      PATHNAME: window.location.pathname?.toUpperCase(),
+                      ROUTE:
+                        window.location.pathname
+                          ?.split('/')
+                          ?.pop()
+                          ?.toUpperCase() || '',
+                      ...(initialContextVars || {}),
+                    },
+                    undefined, // Don't send initialQuestion after login, only show the login status chip
+                    birthDate,
+                    { loginToken: token } as any,
+                    undefined,
+                    sessionId
+                  ).then(state => {
+                    setShowLoginDrawer(false);
+                    setUser(user);
+                    setLoginToken(token);
+                    userTokenRef.current = token;
+                    setLocalConfig('loginToken', token);
+                    // Push a message with initial status to show status message when a new session is created after login
+                    if (
+                      state?.sessionID &&
+                      state.sessionID !== sessionId &&
+                      state?.dialogState
+                    ) {
+                      // Push a message with initial status message showing successful login
+                      // Only show the chip component, not the emission text
+                      const username = user?.userName || t('login.user');
+                      pushMessage({
+                        text: '', // Empty text so only the chip is visible
+                        emitter: state.dialogState.emitter,
+                        media:
+                          state.dialogState.emittedMedia ??
+                          state.dialogState.media ??
+                          [],
+                        fromUser: false,
+                        initial: t('login.successfullyLoggedIn', {
+                          username,
+                        }) as any,
+                        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,
+                      });
+                      // Update the dialog state so the UI reflects the new session
+                      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');
+                  });
+                }}
+              />
+            )}
+          </div>
+        </WidgetSurfaceProvider>
+      </MemoriUIProvider>
     </div>
   );
 };