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

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -44,6 +44,7 @@ import {
   createAlertOptions,
   MemoriUIProvider,
 } from '@memori.ai/ui';
+import { WidgetSurfaceProvider } from '../../context/widgetSurfaceContext';
 
 // Components
 import MemoriAuth from '../Auth/Auth';
@@ -92,6 +93,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 => {
@@ -122,7 +133,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,
@@ -130,6 +155,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;
@@ -363,7 +400,6 @@ window.typeBatchMessages = typeBatchMessages;
 let audioContext: IAudioContext;
 
 let memoriPassword: string | undefined;
-let userToken: string | undefined;
 
 export interface LayoutProps {
   Header?: typeof Header;
@@ -580,6 +616,7 @@ const MemoriWidget = ({
   const {
     initSession,
     deleteSession,
+    postEnterTextAsync,
     postTextEnteredEvent,
     postPlaceChangedEvent,
     postDateChangedEvent,
@@ -597,6 +634,11 @@ const MemoriWidget = ({
   // 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(() => {
     if (!widgetRootEl) return;
@@ -617,36 +659,85 @@ const MemoriWidget = ({
   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);
+      }
+    }
+  }, [additionalInfo?.loginToken, authToken]);
+
+  useEffect(() => {
+    if (!loginToken || !(showLogin || memori.requireLoginToken)) {
+      return;
     }
-  }, [loginToken, user?.userID]);
+
+    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()! ||
@@ -708,7 +799,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
@@ -825,7 +942,7 @@ 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));
     }
@@ -900,7 +1017,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;
@@ -974,6 +1091,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,
@@ -984,7 +1102,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 =
@@ -1051,7 +1170,7 @@ const MemoriWidget = ({
     }
 
     // Add user message to chat history if not hidden
-    if (!hidden)
+    if (!hidden && !skipHistoryPush)
       pushMessage({
         text: text,
         translatedText,
@@ -1062,27 +1181,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 && {
@@ -1090,85 +1194,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 => [
@@ -1183,22 +1237,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);
-    }
   };
 
   /**
@@ -1211,12 +1258,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 };
@@ -1229,7 +1270,6 @@ const MemoriWidget = ({
       !isMultilanguageEnabled ||
       avoidPushingMessage
     ) {
-      // console.log('[TRANSLATE] Skipping translation - using original emission');
       translatedState = { ...state, emission };
       if (emission) {
         translatedMsg = {
@@ -1251,12 +1291,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(
@@ -1288,7 +1326,6 @@ const MemoriWidget = ({
         }
 
         if (t.text.length > 0) {
-          // console.log('[TRANSLATE] Creating translated message');
           translatedMsg = {
             text: emission,
             translatedText: t.text,
@@ -1309,7 +1346,6 @@ const MemoriWidget = ({
           };
         }
       } catch (error) {
-        console.error('[TRANSLATE] Error during translation:', error);
         translatedState = { ...state, emission };
         translatedMsg = {
           text: emission,
@@ -1330,10 +1366,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);
     }
 
@@ -1439,7 +1473,6 @@ const MemoriWidget = ({
     executableSnippets?.forEach(s => {
       try {
         setTimeout(() => {
-          console.log('snippet', s);
           // eslint-disable-next-line no-new-func
           new Function(s.content ?? '')();
 
@@ -1453,8 +1486,8 @@ const MemoriWidget = ({
               );
           }, 400);
         }, 1000);
-      } catch (e) {
-        console.warn(e);
+      } catch {
+        // ignore snippet execution errors
       }
     });
   };
@@ -1505,6 +1538,10 @@ const MemoriWidget = ({
       return;
     }
 
+    if (!(await checkCredits({ notify: true }))) {
+      return;
+    }
+
     setLoading(true);
 
     try {
@@ -1526,8 +1563,8 @@ const MemoriWidget = ({
         referral = (() => {
           return window.location.href;
         })();
-      } catch (err) {
-        console.debug(err);
+      } catch {
+        // ignore referral URL errors
       }
 
       // Initialize session with parameters
@@ -1538,12 +1575,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] ??
@@ -1589,7 +1621,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;
@@ -1614,11 +1646,10 @@ const MemoriWidget = ({
             duration: 0,
           })
         );
-        setGotErrorInOpening(true);
         return session;
       }
     } catch (err) {
-      console.error(err);
+      logWidgetError('fetchSession failed', err);
     }
   };
 
@@ -1646,7 +1677,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);
@@ -1657,12 +1689,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;
       }
@@ -1676,24 +1706,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,
@@ -1712,12 +1744,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] ??
@@ -1730,27 +1757,34 @@ 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'
+              sessionExpiredStatus
+                ? sessionExpiredStatus
                 : history.length <= 1
                 ? true
                 : undefined;
@@ -1816,8 +1850,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');
       }
@@ -1833,7 +1869,7 @@ const MemoriWidget = ({
         setGotErrorInOpening(true);
       }
     } catch (err) {
-      console.error('[REOPEN_SESSION] Caught error:', err);
+      logWidgetError('reopenSession failed', err);
     }
     // Reset loading state
     setLoading(false);
@@ -1841,6 +1877,99 @@ 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,
@@ -1848,7 +1977,6 @@ const MemoriWidget = ({
     pin?: string
   ) => {
     if (!memoriId || !sessionId) {
-      console.error('CHANGETAG/Session not found');
       return Promise.reject('Session not found');
     }
 
@@ -1888,7 +2016,6 @@ const MemoriWidget = ({
             };
           }
         } else if ([400, 401, 403, 404, 500].includes(resultCode)) {
-          console.warn('[APPCONTEXT/CHANGETAG]', resultCode);
           let storageBirthDate = getLocalConfig<string | undefined>(
             'birthDate',
             undefined
@@ -1899,8 +2026,8 @@ const MemoriWidget = ({
             referral = (() => {
               return window.location.href;
             })();
-          } catch (err) {
-            console.debug(err);
+          } catch {
+            // ignore referral URL errors
           }
 
           fetchSession({
@@ -1918,11 +2045,7 @@ const MemoriWidget = ({
             birthDate: birthDate || storageBirthDate || undefined,
             additionalInfo: {
               ...(additionalInfo || {}),
-              loginToken:
-                userToken ??
-                loginToken ??
-                additionalInfo?.loginToken ??
-                authToken,
+              loginToken: resolveLoginToken(),
               language: (
                 userLang ??
                 memori.culture?.split('-')?.[0] ??
@@ -1942,7 +2065,6 @@ const MemoriWidget = ({
       }
     } catch (_e) {
       let err = _e as Error;
-      console.warn('[APPCONTEXT/CHANGETAG]', err);
       return Promise.reject(err);
     }
 
@@ -1969,6 +2091,7 @@ const MemoriWidget = ({
     return () => {
       setHasUserActivatedSpeak(false);
       setClickedStart(false);
+      sessionStartingRef.current = false;
       clearInteractionTimeout();
       timeoutRef.current = undefined;
     };
@@ -1981,8 +2104,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(
     () => ({
@@ -2037,7 +2158,6 @@ const MemoriWidget = ({
       'muteSpeaker',
       !defaultEnableAudio
     );
-    console.log('[MemoriWidget] shouldPlayAudio', currentSpeakerMuted);
     return (
       text &&
       text.trim() &&
@@ -2049,7 +2169,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;
@@ -2058,17 +2177,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
     }
   };
 
@@ -2148,8 +2265,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);
@@ -2166,6 +2282,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'
@@ -2194,8 +2581,8 @@ const MemoriWidget = ({
       setClickedStart(false);
       timeoutRef.current = undefined;
       ttsStop();
-    } catch (e) {
-      // console.log('Error: resetUIEffects', e);
+    } catch {
+      // ignore reset errors
     }
   };
   useEffect(() => {
@@ -2451,12 +2838,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
@@ -2485,10 +2866,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 (
@@ -2505,42 +2893,43 @@ 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) {
+          if (session?.dialogState) {
           // reset history
           if (!chatLog) {
             setHistory([]);
@@ -2549,6 +2938,7 @@ const MemoriWidget = ({
             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) =>
@@ -2596,8 +2986,8 @@ const MemoriWidget = ({
                     };
                   })
                 );
-              } catch (e) {
-                console.error('[onClickStart] Error translating messages:', e);
+              } catch {
+                // ignore translation errors
               }
             }
 
@@ -2610,12 +3000,18 @@ const MemoriWidget = ({
               true
             ).finally(() => {
               setHasUserActivatedSpeak(true);
+              setClickedStart(false);
             });
           }
-        } else if (session?.resultCode === 0) {
-          await onClickStart((session as any) || undefined);
-        } else {
-          setLoading(false);
+          } else if (session?.resultCode === 0) {
+            sessionStartingRef.current = false;
+            await onClickStart((session as any) || undefined);
+          } else {
+            setLoading(false);
+            setClickedStart(false);
+          }
+        } finally {
+          sessionStartingRef.current = false;
         }
 
         return;
@@ -2628,9 +3024,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;
         }
@@ -2656,11 +3050,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,
@@ -2679,6 +3073,7 @@ const MemoriWidget = ({
               birth
             ).then(() => {
               setHasUserActivatedSpeak(true);
+              setClickedStart(false);
             });
           }
         }
@@ -2701,6 +3096,7 @@ const MemoriWidget = ({
 
             if (session && session.resultCode === 0) {
               await translateAndSpeak(session.currentState, userLang);
+              setClickedStart(false);
             } else {
               throw new Error('No session');
             }
@@ -2723,6 +3119,7 @@ const MemoriWidget = ({
               birth
             ).then(() => {
               setHasUserActivatedSpeak(true);
+              setClickedStart(false);
             });
           }
         }
@@ -2769,14 +3166,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 (
@@ -2785,6 +3182,7 @@ const MemoriWidget = ({
           ) {
             // we have a history, don't push message
             setHasUserActivatedSpeak(true);
+            setClickedStart(false);
             await translateAndSpeak(
               currentState,
               userLang,
@@ -2794,16 +3192,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 && {
@@ -2811,8 +3206,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,
@@ -2825,16 +3219,33 @@ 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);
+            }
           }
         }
       }
@@ -2845,6 +3256,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]
@@ -2861,10 +3273,24 @@ const MemoriWidget = ({
   );
 
   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 =
@@ -2875,29 +3301,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);
         }
       }
     };
@@ -2907,7 +3335,7 @@ const MemoriWidget = ({
     return () => {
       observer.disconnect();
     };
-  }, []);
+  }, [memori.name, memori.memoriID, additionalInfo?.loginToken, authToken]);
 
   /**
    * Experts references
@@ -2921,11 +3349,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(() => {
@@ -2938,39 +3364,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;
@@ -3043,7 +3504,7 @@ const MemoriWidget = ({
         setShowLoginDrawer(false);
         setUser(undefined);
         setLoginToken(undefined);
-        userToken = undefined;
+        userTokenRef.current = undefined;
         removeLocalConfig('loginToken');
       });
     },
@@ -3120,8 +3581,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,
@@ -3225,9 +3685,12 @@ const MemoriWidget = ({
 
   // 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 (
@@ -3263,24 +3726,28 @@ const MemoriWidget = ({
       style={{ height }}
     >
       <MemoriUIProvider container={widgetRootEl} theme={widgetTheme}>
-        <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}
-        />
+        <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
+              }
+            />
 
         <ArtifactAPIBridge
           pushMessage={(message: Message) => {
@@ -3520,7 +3987,7 @@ const MemoriWidget = ({
                 setShowLoginDrawer(false);
                 setUser(user);
                 setLoginToken(token);
-                userToken = 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 (
@@ -3563,12 +4030,14 @@ const MemoriWidget = ({
                 setShowLoginDrawer(false);
                 setUser(undefined);
                 setLoginToken(undefined);
-                userToken = undefined;
+                userTokenRef.current = undefined;
                 removeLocalConfig('loginToken');
               });
             }}
           />
         )}
+          </div>
+        </WidgetSurfaceProvider>
       </MemoriUIProvider>
     </div>
   );