@memori.ai/memori-react 6.8.1 → 6.8.4

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -9,19 +9,14 @@ import {
   OpenSession,
   MemoriConfig,
   TranslatedHint,
-  Invitation,
-  GamificationLevel,
   Tenant,
   MemoriSession,
   User,
   ExpertReference,
+  ResponseSpec,
+  ChatLog,
 } from '@memori.ai/memori-api-client/src/types';
-import {
-  SpeakerAudioDestination,
-  SpeechConfig,
-  SpeechSynthesizer,
-  SpeechRecognizer,
-} from 'microsoft-cognitiveservices-speech-sdk';
+import { ArtifactData } from '../MemoriArtifactSystem/types/artifact.types';
 
 // Libraries
 import React, {
@@ -30,11 +25,11 @@ import React, {
   useCallback,
   CSSProperties,
   useRef,
+  useMemo,
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import memoriApiClient from '@memori.ai/memori-api-client';
 import { AudioContext, IAudioContext } from 'standardized-audio-context';
-import * as speechSdk from 'microsoft-cognitiveservices-speech-sdk';
 import cx from 'classnames';
 import { DateTime } from 'luxon';
 import toast from 'react-hot-toast';
@@ -45,7 +40,6 @@ import MemoriAuth from '../Auth/Auth';
 import Chat, { Props as ChatProps } from '../Chat/Chat';
 import StartPanel, { Props as StartPanelProps } from '../StartPanel/StartPanel';
 import Avatar, { Props as AvatarProps } from '../Avatar/Avatar';
-import ChangeMode, { Props as ChangeModeProps } from '../ChangeMode/ChangeMode';
 import Header, { Props as HeaderProps } from '../Header/Header';
 import PoweredBy from '../PoweredBy/PoweredBy';
 import AgeVerificationModal from '../AgeVerificationModal/AgeVerificationModal';
@@ -53,12 +47,16 @@ import SettingsDrawer from '../SettingsDrawer/SettingsDrawer';
 import KnownFacts from '../KnownFacts/KnownFacts';
 import ExpertsDrawer from '../ExpertsDrawer/ExpertsDrawer';
 import LoginDrawer from '../LoginDrawer/LoginDrawer';
+import Button from '../ui/Button';
+import CloseIcon from '../icons/Close';
 
 // Layout
 import FullPageLayout from '../layouts/FullPage';
 import TotemLayout from '../layouts/Totem';
 import ChatLayout from '../layouts/Chat';
 import WebsiteAssistantLayout from '../layouts/WebsiteAssistant';
+import HiddenChatLayout from '../layouts/HiddenChat';
+import ZoomedFullBodyLayout from '../layouts/ZoomedFullBody';
 
 // Helpers / Utils
 import { getTranslation } from '../../helpers/translations';
@@ -70,14 +68,23 @@ import {
 import {
   hasTouchscreen,
   stripDuplicates,
-  stripEmojis,
-  escapeHTML,
-  stripMarkdown,
+  installMathJax,
+  stripReasoningTags,
 } from '../../helpers/utils';
-import { anonTag } from '../../helpers/constants';
+import { getTTSVoice } from '../../helpers/tts/ttsVoiceUtility';
+import {
+  allowedMediaTypes,
+  anonTag,
+  uiLanguages,
+} from '../../helpers/constants';
 import { getErrori18nKey } from '../../helpers/error';
-import { getGamificationLevel } from '../../helpers/statistics';
 import { getCredits } from '../../helpers/credits';
+import { useViseme } from '../../context/visemeContext';
+import { sanitizeText } from '../../helpers/sanitizer';
+import { TTSConfig, useTTS } from '../../helpers/tts/useTTS';
+import Alert from '../ui/Alert';
+import ChatHistoryDrawer from '../ChatHistoryDrawer/ChatHistory';
+import { STTConfig, useSTT } from '../../helpers/stt/useSTT';
 
 // Widget utilities and helpers
 const getMemoriState = (integrationId?: string): object | null => {
@@ -99,7 +106,13 @@ const getMemoriState = (integrationId?: string): object | null => {
   if (!engineState) return null;
 
   let dialogState = JSON.parse(engineState);
-  return dialogState;
+
+  let loginToken = getLocalConfig<string | undefined>('loginToken', undefined);
+
+  return {
+    ...dialogState,
+    loginToken,
+  };
 };
 
 type MemoriTextEnteredEvent = CustomEvent<{
@@ -111,6 +124,15 @@ type MemoriTextEnteredEvent = CustomEvent<{
   hasBatchQueued?: boolean;
 }>;
 
+/**
+ * Dispatches a MemoriTextEntered event to simulate a user typing a message
+ * @param message The text message to send
+ * @param waitForPrevious Whether to wait for previous message to finish before sending (default true)
+ * @param hidden Whether to hide the message from chat history (default false)
+ * @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)
+ */
 const typeMessage = (
   message: string,
   waitForPrevious = true,
@@ -131,17 +153,24 @@ const typeMessage = (
   });
   document.dispatchEvent(e);
 
+  // Special handling for Safari on iOS devices
   const isSafariIOS =
     window.navigator.userAgent.includes('Safari') &&
     !window.navigator.userAgent.includes('Chrome') &&
     /iPad|iPhone|iPod/.test(navigator.userAgent);
 
   if (isSafariIOS) {
+    // Dispatch end speak event after short delay for iOS Safari
     setTimeout(() => {
       document.dispatchEvent(new CustomEvent('MemoriEndSpeak'));
     }, 300);
   }
 };
+
+/**
+ * Helper function to send a hidden message
+ * Wraps typeMessage with hidden=true and passes through other params
+ */
 const typeMessageHidden = (
   message: string,
   waitForPrevious = true,
@@ -260,10 +289,19 @@ const typeBatchMessages = (
   submitNewMessage();
 };
 
+type MemoriNewDialogStateEvent = CustomEvent<DialogState>;
+
+type ArtifactCreatedEvent = CustomEvent<{
+  artifact: ArtifactData;
+  message: Message;
+}>;
+
 interface CustomEventMap {
   MemoriTextEntered: MemoriTextEnteredEvent;
   MemoriEndSpeak: CustomEvent;
   MemoriResetUIEffects: CustomEvent;
+  MemoriNewDialogState: MemoriNewDialogStateEvent;
+  artifactCreated: ArtifactCreatedEvent;
 }
 declare global {
   interface Document {
@@ -290,16 +328,10 @@ window.typeMessage = typeMessage;
 window.typeMessageHidden = typeMessageHidden;
 window.typeBatchMessages = typeBatchMessages;
 
-// Global variables
-let recognizer: SpeechRecognizer | null;
-let speechConfig: SpeechConfig;
-let speechSynthesizer: SpeechSynthesizer | null;
-let audioDestination: SpeakerAudioDestination;
 let audioContext: IAudioContext;
 
 let memoriPassword: string | undefined;
 let speakerMuted: boolean = false;
-let memoriSpeaking: boolean = false;
 let userToken: string | undefined;
 
 export interface LayoutProps {
@@ -313,13 +345,13 @@ export interface LayoutProps {
   startPanelProps?: StartPanelProps;
   integrationStyle?: JSX.Element | null;
   integrationBackground?: JSX.Element | null;
-  ChangeMode?: typeof ChangeMode;
-  changeModeProps?: ChangeModeProps;
   poweredBy?: JSX.Element | null;
   sessionId?: string;
   hasUserActivatedSpeak?: boolean;
-  showInstruct?: boolean;
+  showUpload?: boolean;
   loading?: boolean;
+  autoStart?: boolean;
+  onSidebarToggle?: (isOpen: boolean) => void;
 }
 
 export interface Props {
@@ -331,10 +363,18 @@ export interface Props {
   memoriLang?: string;
   multilingual?: boolean;
   integration?: Integration;
-  layout?: 'DEFAULT' | 'FULLPAGE' | 'TOTEM' | 'CHAT' | 'WEBSITE_ASSISTANT';
+  layout?:
+    | 'DEFAULT'
+    | 'FULLPAGE'
+    | 'TOTEM'
+    | 'CHAT'
+    | 'WEBSITE_ASSISTANT'
+    | 'HIDDEN_CHAT'
+    | 'ZOOMED_FULL_BODY';
   customLayout?: React.FC<LayoutProps>;
   showShare?: boolean;
-  showInstruct?: boolean;
+  showCopyButton?: boolean;
+  showTranslationOriginal?: boolean;
   showInputs?: boolean;
   showDates?: boolean;
   showContextPerLine?: boolean;
@@ -343,12 +383,16 @@ export interface Props {
   showOnlyLastMessages?: boolean;
   showTypingText?: boolean;
   showLogin?: boolean;
+  showUpload?: boolean;
+  showChatHistory?: boolean;
+  showReasoning?: boolean;
   preview?: boolean;
   embed?: boolean;
   height?: number | string;
   secret?: string;
   baseUrl?: string;
-  apiUrl?: string;
+  apiURL?: string;
+  engineURL?: string;
   initialContextVars?: { [key: string]: string };
   initialQuestion?: string;
   ogImage?: string;
@@ -359,14 +403,20 @@ export interface Props {
     tag: string;
     pin: string;
   };
-  authToken?: string;
-  AZURE_COGNITIVE_SERVICES_TTS_KEY?: string;
+  ttsProvider?: 'azure' | 'openai';
+  enableAudio?: boolean;
   defaultSpeakerActive?: boolean;
+  disableTextEnteredEvents?: boolean;
   onStateChange?: (state?: DialogState) => void;
   additionalInfo?: OpenSession['additionalInfo'] & { [key: string]: string };
   customMediaRenderer?: ChatProps['customMediaRenderer'];
   additionalSettings?: JSX.Element | null;
   userAvatar?: string | JSX.Element;
+  useMathFormatting?: boolean;
+  autoStart?: boolean;
+  applyVarsToRoot?: boolean;
+  showFunctionCache?: boolean;
+  authToken?: string;
 }
 
 const MemoriWidget = ({
@@ -378,38 +428,49 @@ const MemoriWidget = ({
   memoriLang,
   multilingual,
   integration,
-  layout = 'DEFAULT',
+  layout,
   customLayout,
-  showInstruct = false,
   showShare,
   preview = false,
   embed = false,
+  showCopyButton = true,
+  showTranslationOriginal = false,
   showInputs = true,
   showDates = false,
   showContextPerLine = false,
-  showSettings = true,
+  showSettings,
   showTypingText = false,
   showClear = false,
   showLogin = false,
+  showUpload,
   showOnlyLastMessages,
+  showChatHistory,
+  showReasoning,
   height = '100vh',
   secret,
-  baseUrl = 'https://aisuru.com',
-  apiUrl = 'https://backend.memori.ai',
+  baseUrl = 'https://aisuru-staging.aclambda.online',
+  apiURL = 'https://backend-staging.memori.ai',
+  engineURL = 'https://engine-staging.memori.ai',
   initialContextVars,
   initialQuestion,
+  ttsProvider,
   ogImage,
   sessionID: initialSessionID,
   tenant,
   personification,
   authToken,
-  AZURE_COGNITIVE_SERVICES_TTS_KEY,
+  enableAudio,
   defaultSpeakerActive = true,
+  disableTextEnteredEvents = false,
   onStateChange,
   additionalInfo,
   additionalSettings,
   customMediaRenderer,
   userAvatar,
+  useMathFormatting = false,
+  autoStart = false,
+  applyVarsToRoot = false,
+  showFunctionCache = false,
 }: Props) => {
   const { t, i18n } = useTranslation();
 
@@ -419,20 +480,22 @@ const MemoriWidget = ({
   }, []);
 
   // API calls methods
-  const client = memoriApiClient(apiUrl);
+  const client = memoriApiClient(apiURL, engineURL);
   const {
     initSession,
+    deleteSession,
     postTextEnteredEvent,
     postPlaceChangedEvent,
     postDateChangedEvent,
     postTimeoutEvent,
     postTagChangedEvent,
     getSession,
-    getContentQualityIndexes,
     getExpertReferences,
+    getSessionChatLogs,
   } = client;
 
   const [instruct, setInstruct] = useState(false);
+  const [enableFocusChatInput, setEnableFocusChatInput] = useState(true);
 
   const [loginToken, setLoginToken] = useState<string | undefined>(
     additionalInfo?.loginToken ?? authToken
@@ -441,11 +504,20 @@ const MemoriWidget = ({
     avatarURL: typeof userAvatar === 'string' ? userAvatar : undefined,
   } as User);
   useEffect(() => {
-    if (loginToken && !user?.userID && showLogin) {
+    if (
+      loginToken &&
+      !user?.userID &&
+      (showLogin || memori.requireLoginToken)
+    ) {
       client.backend.getCurrentUser(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');
         }
@@ -466,6 +538,7 @@ const MemoriWidget = ({
   const integrationConfig = integration?.customData
     ? JSON.parse(integration.customData)
     : null;
+
   const isMultilanguageEnabled =
     multilingual !== undefined
       ? multilingual
@@ -480,32 +553,62 @@ const MemoriWidget = ({
       'IT'
   );
 
+  const applyMathFormatting =
+    useMathFormatting !== undefined
+      ? useMathFormatting
+      : !!integrationConfig?.useMathFormatting;
+  useEffect(() => {
+    if (applyMathFormatting) installMathJax();
+  }, [applyMathFormatting]);
+
+  /**
+   * Sets the language in the i18n instance
+   */
+  useEffect(() => {
+    if (
+      isMultilanguageEnabled &&
+      userLang &&
+      uiLanguages.includes(userLang.toLowerCase())
+    ) {
+      // @ts-ignore
+      i18n.changeLanguage(userLang.toLowerCase());
+    }
+  }, [userLang]);
+
   const [loading, setLoading] = useState(false);
   const [memoriTyping, setMemoriTyping] = useState<boolean>(false);
   const [typingText, setTypingText] = useState<string>();
 
   const selectedLayout = layout || integrationConfig?.layout || 'DEFAULT';
 
-  const [hasUserActivatedSpeak, setHasUserActivatedSpeak] = useState(false);
+  const defaultEnableAudio =
+    enableAudio ?? integrationConfig?.enableAudio ?? true;
+
   const [hasUserActivatedListening, setHasUserActivatedListening] =
     useState(false);
   const [showPositionDrawer, setShowPositionDrawer] = useState(false);
   const [showSettingsDrawer, setShowSettingsDrawer] = useState(false);
+  const [showChatHistoryDrawer, setShowChatHistoryDrawer] = useState(false);
   const [showKnownFactsDrawer, setShowKnownFactsDrawer] = useState(false);
   const [showExpertsDrawer, setShowExpertsDrawer] = useState(false);
-  const [muteSpeaker, setMuteSpeaker] = useState(!defaultSpeakerActive);
   const [continuousSpeech, setContinuousSpeech] = useState(false);
   const [continuousSpeechTimeout, setContinuousSpeechTimeout] = useState(2);
-  const [isPlayingAudio, setIsPlayingAudio] = useState(false);
   const [controlsPosition, setControlsPosition] = useState<'center' | 'bottom'>(
     'center'
   );
+
+  const [enablePositionControls, setEnablePositionControls] = useState(false);
+  const [avatarType, setAvatarType] = useState<'blob' | 'avatar3d' | null>(
+    null
+  );
   const [hideEmissions, setHideEmissions] = useState(false);
+
+  const speechSynthesizerRef = useRef<any | null>(null);
+  const [memoriSpeaking, setMemoriSpeaking] = useState(false);
+
   useEffect(() => {
-    setIsPlayingAudio(!!speechSynthesizer);
-    memoriSpeaking = !!speechSynthesizer;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [speechSynthesizer]);
+    setMemoriSpeaking(!!speechSynthesizerRef.current);
+  }, [speechSynthesizerRef.current]);
 
   useEffect(() => {
     let defaultControlsPosition: 'center' | 'bottom' = 'bottom';
@@ -530,21 +633,37 @@ const MemoriWidget = ({
       defaultControlsPosition = 'bottom';
     }
 
-    setMuteSpeaker(getLocalConfig('muteSpeaker', !defaultSpeakerActive));
-    speakerMuted = getLocalConfig('muteSpeaker', !defaultSpeakerActive);
-    setContinuousSpeech(microphoneMode === 'CONTINUOUS');
+    setContinuousSpeech(speakerMuted ? false : microphoneMode === 'CONTINUOUS');
     setContinuousSpeechTimeout(getLocalConfig('continuousSpeechTimeout', 2));
     setControlsPosition(
       getLocalConfig('controlsPosition', defaultControlsPosition)
     );
+    setAvatarType(getLocalConfig('avatarType', 'avatar3d'));
     setHideEmissions(getLocalConfig('hideEmissions', false));
 
     if (!additionalInfo?.loginToken && !authToken) {
       setLoginToken(getLocalConfig<typeof loginToken>('loginToken', undefined));
       userToken = getLocalConfig<typeof loginToken>('loginToken', undefined);
+
+      setBirthDate(getLocalConfig<string | undefined>('birthDate', undefined));
+    }
+
+    // If audio is disabled, automatically mute the speaker
+    if (!(enableAudio ?? integrationConfig?.enableAudio ?? true)) {
+      setLocalConfig('muteSpeaker', true);
     }
   }, []);
 
+  // Effect to handle enableAudio changes
+  useEffect(() => {
+    const isAudioEnabled =
+      enableAudio ?? integrationConfig?.enableAudio ?? true;
+    if (!isAudioEnabled) {
+      // Force mute when audio is disabled
+      setLocalConfig('muteSpeaker', true);
+    }
+  }, [enableAudio, integrationConfig?.enableAudio]);
+
   /**
    * Auth for private and secret memori
    */
@@ -560,7 +679,8 @@ const MemoriWidget = ({
   const [position, _setPosition] = useState<Venue>();
   const applyPosition = async (venue?: Venue, sessionID?: string) => {
     const session = sessionID ?? sessionId;
-    if (venue && session) {
+    // Only apply position if memori.needsPosition is true
+    if (venue && session && memori.needsPosition) {
       const { currentState, ...response } = await postPlaceChangedEvent({
         sessionId: session,
         placeName: venue.placeName,
@@ -583,19 +703,23 @@ const MemoriWidget = ({
     _setPosition(venue);
     applyPosition(venue);
 
-    if (venue) {
+    // Only save position to local config if memori.needsPosition is true
+    if (venue && memori.needsPosition) {
       setLocalConfig('position', JSON.stringify(venue));
-    } else {
+    } else if (!venue) {
       removeLocalConfig('position');
     }
   };
 
   useEffect(() => {
-    const position = getLocalConfig<Venue | undefined>('position', undefined);
-    if (position) {
-      _setPosition(position);
+    // Only load position from local config if memori.needsPosition is true
+    if (memori.needsPosition) {
+      const position = getLocalConfig<Venue | undefined>('position', undefined);
+      if (position) {
+        _setPosition(position);
+      }
     }
-  }, []);
+  }, [memori.needsPosition]);
 
   /**
    * History e gestione invio messaggi
@@ -604,7 +728,7 @@ const MemoriWidget = ({
   const onChangeUserMessage = (value: string) => {
     if (!value || value === '\n' || value.trim() === '') {
       setUserMessage('');
-      resetInteractionTimeout();
+      // resetInteractionTimeout();
       return;
     }
     setUserMessage(value);
@@ -625,6 +749,21 @@ const MemoriWidget = ({
       },
     ]);
   };
+
+  // When a user resumes a chat, we need to set the chat reference link of the previous chat
+  const [chatLogID, setChatLogID] = useState<string | undefined>(undefined);
+  /**
+   * Sends a message to the Memori and handles the response
+   * @param text The text message to send
+   * @param media Optional media attachments
+   * @param newSessionId Optional new session ID to use
+   * @param translate Whether to translate the message before sending (default true)
+   * @param translatedText Optional pre-translated text
+   * @param hidden Whether to hide the message from chat history (default false)
+   * @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)
+   */
   const sendMessage = async (
     text: string,
     media?: Medium[],
@@ -636,12 +775,14 @@ const MemoriWidget = ({
     useLoaderTextAsMsg = false,
     hasBatchQueued = false
   ) => {
+    // Get the session ID from params or global state
     const sessionID =
       newSessionId ||
       sessionId ||
       (window.getMemoriState() as MemoriSession)?.sessionID;
     if (!sessionID || !text?.length) return;
 
+    // Add user message to chat history if not hidden
     if (!hidden)
       pushMessage({
         text: text,
@@ -653,52 +794,98 @@ const MemoriWidget = ({
           : !!newSessionId,
       });
 
+    // Show typing indicator
     setMemoriTyping(true);
     setTypingText(typingText);
 
     let msg = text;
     let gotError = false;
 
-    if (
-      translate &&
-      !instruct &&
-      isMultilanguageEnabled &&
-      userLang.toUpperCase() !== language.toUpperCase()
-    ) {
-      const translation = await getTranslation(
-        text,
-        language,
-        userLang,
-        baseUrl
+    try {
+      // Translate message if needed
+      if (
+        !hidden &&
+        translate &&
+        isMultilanguageEnabled &&
+        userLang.toUpperCase() !== language.toUpperCase()
+      ) {
+        const translation = await getTranslation(
+          text,
+          language,
+          userLang,
+          baseUrl
+        );
+        msg = translation.text;
+      }
+
+      const findMediaDocument = media?.find(
+        m => !m.mediumID && m.properties?.isAttachedFile
       );
-      msg = translation.text;
-    }
+      if (findMediaDocument) {
+        msg = msg + ' ' + findMediaDocument.content;
+      }
 
-    const { currentState, ...response } = await postTextEnteredEvent({
-      sessionId: sessionID,
-      text: msg,
-    });
-    if (response.resultCode === 0 && currentState) {
-      const emission =
-        useLoaderTextAsMsg && typingText
-          ? typingText
-          : currentState.emission ?? currentDialogState?.emission;
-      if (currentState.state === 'X4' && memori.giverTag) {
-        const { currentState, ...resp } = await postTagChangedEvent(
-          sessionID,
-          memori.giverTag
-        );
+      // Handle multiple documents
+      const mediaDocuments = media?.filter(
+        m => !m.mediumID && m.properties?.isAttachedFile
+      );
+      if (mediaDocuments && mediaDocuments.length > 0) {
+        const documentContents = mediaDocuments
+          .map(doc => doc.content)
+          .join(' ');
+        msg = msg + ' ' + documentContents;
+      }
 
-        if (resp.resultCode === 0) {
-          setCurrentDialogState(currentState);
+      // 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 { currentState, ...response } = await postTextEnteredEvent({
+        sessionId: sessionID,
+        text: msg,
+      });
+      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 && text.trim() && !speakerMuted) {
+              handleSpeak(text);
+            }
+          });
+        } else {
+          setCurrentDialogState({
+            ...currentState,
+            emission,
+          });
 
           if (emission) {
             pushMessage({
               text: emission,
               emitter: currentState.emitter,
-              media: currentState.media,
+              media: currentState.emittedMedia ?? currentState.media,
               fromUser: false,
               questionAnswered: msg,
+              generatedByAI: !!currentState.completion,
               contextVars: currentState.contextVars,
               date: currentState.currentDate,
               placeName: currentState.currentPlaceName,
@@ -708,118 +895,43 @@ const MemoriWidget = ({
               tag: currentState.currentTag,
               memoryTags: currentState.memoryTags,
             });
-            speak(emission);
-          }
-        } else {
-          console.error(response, resp);
-          toast.error(t(getErrori18nKey(resp.resultCode)));
-          gotError = true;
-        }
-      } else if (currentState.state === 'X2d' && memori.giverTag) {
-        const { currentState, ...resp } = await postTextEnteredEvent({
-          sessionId: sessionID,
-          text: Math.random().toString().substring(2, 8),
-        });
-
-        if (resp.resultCode === 0) {
-          const { currentState, ...resp } = await postTagChangedEvent(
-            sessionID,
-            memori.giverTag
-          );
-
-          if (resp.resultCode === 0) {
-            setCurrentDialogState(currentState);
-
-            if (emission) {
-              pushMessage({
-                text: emission,
-                emitter: currentState.emitter,
-                media: currentState.media,
-                fromUser: false,
-                questionAnswered: msg,
-                contextVars: currentState.contextVars,
-                date: currentState.currentDate,
-                placeName: currentState.currentPlaceName,
-                placeLatitude: currentState.currentLatitude,
-                placeLongitude: currentState.currentLongitude,
-                placeUncertaintyKm: currentState.currentUncertaintyKm,
-                tag: currentState.currentTag,
-                memoryTags: currentState.memoryTags,
-              });
-              speak(emission);
+            if (emission && emission.trim()) {
+              handleSpeak(emission);
             }
-          } else {
-            console.error(response, resp);
-            toast.error(t(getErrori18nKey(resp.resultCode)));
-            gotError = true;
           }
-        } else {
-          console.error(response, resp);
-          toast.error(t(getErrori18nKey(resp.resultCode)));
-          gotError = true;
         }
-      } else if (
-        userLang.toLowerCase() !== language.toLowerCase() &&
-        emission &&
-        !instruct &&
-        isMultilanguageEnabled
-      ) {
-        translateDialogState(currentState, userLang, msg).then(ts => {
-          if (ts.emission) {
-            speak(ts.emission);
+      } 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(
+          false,
+          memoriPwd || memori.secretToken,
+          memoriTokens,
+          undefined,
+          undefined,
+          {
+            PATHNAME: window.location.pathname,
+            ROUTE: window.location.pathname?.split('/')?.pop() || '',
+            ...(initialContextVars || {}),
+          },
+          initialQuestion
+        ).then(state => {
+          console.info('session timeout');
+          if (state?.sessionID) {
+            setTimeout(() => {
+              sendMessage(text, media, state?.sessionID);
+            }, 500);
           }
         });
-      } else {
-        setCurrentDialogState({
-          ...currentState,
-          emission,
-        });
-
-        if (emission) {
-          pushMessage({
-            text: emission,
-            emitter: currentState.emitter,
-            media: currentState.media,
-            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,
-          });
-          speak(emission);
-        }
       }
-    } else if (response.resultCode === 404) {
-      // remove last sent message, will set it as initial
-      setHistory(h => [...h.slice(0, h.length - 1)]);
-
-      // post session timeout -> Z0/A0 -> restart session and re-send msg
-      reopenSession(
-        false,
-        memoriPwd || memori.secretToken,
-        memoriTokens,
-        instruct && memori.giverTag ? memori.giverTag : undefined,
-        instruct && memori.giverPIN ? memori.giverPIN : undefined,
-        {
-          PATHNAME: window.location.pathname,
-          ROUTE: window.location.pathname?.split('/')?.pop() || '',
-          ...(initialContextVars || {}),
-        },
-        initialQuestion
-      ).then(state => {
-        console.info('session timeout');
-        if (state?.sessionID) {
-          setTimeout(() => {
-            sendMessage(text, media, state?.sessionID);
-          }, 500);
-        }
-      });
+    } catch (error) {
+      console.error(error);
+      gotError = true;
+
+      setTypingText(undefined);
+      setMemoriTyping(false);
     }
 
     if (!hasBatchQueued) {
@@ -829,30 +941,40 @@ const MemoriWidget = ({
   };
 
   /**
-   * Traduzioni istantanee
+   * An enhanced version of translateDialogState that integrates smooth speaking
+   * This preserves all your existing logic while improving speech reliability
    */
   const translateDialogState = async (
     state: DialogState,
     userLang: string,
-    msg?: string
+    msg?: string,
+    avoidPushingMessage: boolean = false
   ) => {
-    const emission = state.emission ?? currentDialogState?.emission;
+    // console.log('[TRANSLATE] Starting translation with params:', {
+    //   state,
+    //   userLang,
+    //   msg
+    // });
+
+    const emission = state?.emission ?? currentDialogState?.emission;
 
     let translatedState = { ...state };
     let translatedMsg = null;
 
+    // Skip translation if not needed
     if (
       !emission ||
-      instruct ||
       language.toUpperCase() === userLang.toUpperCase() ||
-      !isMultilanguageEnabled
+      !isMultilanguageEnabled ||
+      avoidPushingMessage
     ) {
+      // console.log('[TRANSLATE] Skipping translation - using original emission');
       translatedState = { ...state, emission };
       if (emission) {
         translatedMsg = {
           text: emission,
           emitter: state.emitter,
-          media: state.media,
+          media: state.emittedMedia ?? state.media,
           fromUser: false,
           questionAnswered: msg,
           contextVars: state.contextVars,
@@ -866,45 +988,72 @@ const MemoriWidget = ({
         };
       }
     } else {
-      const t = await getTranslation(emission, userLang, language, baseUrl);
-      if (state.hints && state.hints.length > 0) {
-        const translatedHints = await Promise.all(
-          (state.hints ?? []).map(async hint => {
-            const tHint = await getTranslation(
-              hint,
-              userLang,
-              language,
-              baseUrl
-            );
-            return {
-              text: tHint?.text ?? hint,
-              originalText: hint,
-            } as TranslatedHint;
-          })
-        );
-        translatedState = {
-          ...state,
-          emission: t.text,
-          translatedHints,
-        };
-      } else {
-        translatedState = {
-          ...state,
-          emission: t.text,
-          hints:
-            state.hints ??
-            (state.state === 'G1' ? currentDialogState?.hints : []),
-        };
-      }
+      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(
+                hint,
+                userLang,
+                language,
+                baseUrl
+              );
+              return {
+                text: tHint?.text ?? hint,
+                originalText: hint,
+              } as TranslatedHint;
+            })
+          );
+          translatedState = {
+            ...state,
+            emission: t.text,
+            translatedHints,
+          };
+        } else {
+          translatedState = {
+            ...state,
+            emission: emission,
+            translatedEmission: t.text,
+            hints:
+              state.hints ??
+              (state.state === 'G1' ? currentDialogState?.hints : []),
+          };
+        }
 
-      if (t.text.length > 0)
+        if (t.text.length > 0) {
+          // console.log('[TRANSLATE] Creating translated message');
+          translatedMsg = {
+            text: emission,
+            translatedText: t.text,
+            emitter: state.emitter,
+            media: state.emittedMedia ?? state.media,
+            fromUser: false,
+            questionAnswered: msg,
+            generatedByAI: !!state.completion,
+            contextVars: state.contextVars,
+            date: state.currentDate,
+            placeName: state.currentPlaceName,
+            placeLatitude: state.currentLatitude,
+            placeLongitude: state.currentLongitude,
+            placeUncertaintyKm: state.currentUncertaintyKm,
+            tag: state.currentTag,
+            memoryTags: state.memoryTags,
+          };
+        }
+      } catch (error) {
+        console.error('[TRANSLATE] Error during translation:', error);
+        translatedState = { ...state, emission };
         translatedMsg = {
-          text: t.text,
+          text: emission,
           emitter: state.emitter,
-          media: state.media,
+          media: state.emittedMedia ?? state.media,
           fromUser: false,
           questionAnswered: msg,
-          generatedByAI: !!state.completion,
           contextVars: state.contextVars,
           date: state.currentDate,
           placeName: state.currentPlaceName,
@@ -914,10 +1063,13 @@ const MemoriWidget = ({
           tag: state.currentTag,
           memoryTags: state.memoryTags,
         };
+      }
     }
 
+    // console.log('[TRANSLATE] Setting translated state and message');
     setCurrentDialogState(translatedState);
-    if (translatedMsg) {
+    if (!avoidPushingMessage && translatedMsg) {
+      // console.log('[TRANSLATE] Pushing translated message', translatedMsg);
       pushMessage(translatedMsg);
     }
 
@@ -938,6 +1090,64 @@ const MemoriWidget = ({
   const [birthDate, setBirthDate] = useState<string | undefined>();
   const [showAgeVerification, setShowAgeVerification] = useState(false);
 
+  const getCultureCodeByLanguage = (lang?: string): string => {
+    let voice = '';
+    let voiceLang = (
+      lang ||
+      memori.culture?.split('-')?.[0] ||
+      i18n.language ||
+      'IT'
+    ).toUpperCase();
+    switch (voiceLang) {
+      case 'IT':
+        voice = 'it-IT';
+        break;
+      case 'DE':
+        voice = 'de-DE';
+        break;
+      case 'EN':
+        voice = 'en-GB';
+        break;
+      case 'ES':
+        voice = 'es-ES';
+        break;
+      case 'FR':
+        voice = 'fr-FR';
+        break;
+      case 'PT':
+        voice = 'pt-PT';
+        break;
+      case 'UK':
+        voice = 'uk-UK';
+        break;
+      case 'RU':
+        voice = 'ru-RU';
+        break;
+      case 'PL':
+        voice = 'pl-PL';
+        break;
+      case 'FI':
+        voice = 'fi-FI';
+        break;
+      case 'EL':
+        voice = 'el-GR';
+        break;
+      case 'AR':
+        voice = 'ar-SA';
+        break;
+      case 'ZH':
+        voice = 'zh-CN';
+        break;
+      case 'JA':
+        voice = 'ja-JP';
+        break;
+      default:
+        voice = 'it-IT';
+        break;
+    }
+    return voice;
+  };
+
   /**
    * Sessione
    */
@@ -951,7 +1161,15 @@ const MemoriWidget = ({
       onStateChange(state);
     }
 
-    const executableSnippets = state?.media?.filter(
+    const e: MemoriNewDialogStateEvent = new CustomEvent(
+      'MemoriNewDialogState',
+      {
+        detail: state,
+      }
+    );
+    document.dispatchEvent(e);
+
+    const executableSnippets = (state?.emittedMedia ?? state?.media)?.filter(
       m => m.mimeType === 'text/javascript' && !!m.properties?.executable
     );
     executableSnippets?.forEach(s => {
@@ -972,25 +1190,40 @@ const MemoriWidget = ({
           }, 400);
         }, 1000);
       } catch (e) {
-        console.error(e);
+        console.warn(e);
       }
     });
   };
+
+  /**
+   * Opening Session
+   */
+  /**
+   * Fetches a new session with the given parameters
+   * @param params OpenSession parameters
+   * @returns Promise resolving to dialog state and session ID if successful, void otherwise
+   */
   const fetchSession = async (
     params: OpenSession
-  ): Promise<{
-    dialogState: DialogState;
-    sessionID: string;
-  } | void> => {
+  ): Promise<
+    | (ResponseSpec & {
+        dialogState?: DialogState;
+        sessionID: string;
+      })
+    | undefined
+    | void
+  > => {
     let storageBirthDate = getLocalConfig<string | undefined>(
       'birthDate',
       undefined
     );
-    if (!(birthDate || storageBirthDate) && !!minAge) {
+    let userBirthDate = birthDate ?? params.birthDate ?? storageBirthDate;
+    if (!userBirthDate && !!minAge) {
       setShowAgeVerification(true);
       return;
     }
 
+    // Check if authentication is needed for private Memori
     if (
       memori.privacyType !== 'PUBLIC' &&
       !memori.secretToken &&
@@ -1000,30 +1233,36 @@ const MemoriWidget = ({
       setAuthModalState('password');
       return;
     }
-    setLoading(true);
-    try {
-      if (!memori.giverTag && !!memori.receivedInvitations?.length) {
-        let giverInvitation = memori.receivedInvitations.find(
-          (i: Invitation) => i.type === 'GIVER' && i.state === 'ACCEPTED'
-        );
 
-        if (giverInvitation) {
-          memori.giverTag = giverInvitation.tag;
-          memori.giverPIN = giverInvitation.pin;
-        }
-      }
+    setLoading(true);
 
+    try {
+      // Check for and set giver invitation if available
+      // if (!memori.giverTag && !!memori.receivedInvitations?.length) {
+      //   let giverInvitation = memori.receivedInvitations.find(
+      //     (i: Invitation) => i.type === 'GIVER' && i.state === 'ACCEPTED'
+      //   );
+
+      //   if (giverInvitation) {
+      //     memori.giverTag = giverInvitation.tag;
+      //     memori.giverPIN = giverInvitation.pin;
+      //   }
+      // }
+
+      // Get referral URL
       let referral;
       try {
         referral = (() => {
           return window.location.href;
         })();
       } catch (err) {
-        console.error(err);
+        console.debug(err);
       }
 
+      // Initialize session with parameters
       const session = await initSession({
         ...params,
+        birthDate: userBirthDate,
         tag: params.tag ?? personification?.tag,
         pin: params.pin ?? personification?.pin,
         additionalInfo: {
@@ -1032,8 +1271,11 @@ const MemoriWidget = ({
             userToken ?? loginToken ?? additionalInfo?.loginToken ?? authToken,
           language: getCultureCodeByLanguage(userLang),
           referral: referral,
+          timeZoneOffset: new Date().getTimezoneOffset().toString(),
         },
       });
+
+      // Handle successful session creation
       if (
         session?.sessionID &&
         session?.currentState &&
@@ -1041,32 +1283,77 @@ const MemoriWidget = ({
       ) {
         setSessionId(session.sessionID);
 
-        if (position) applyPosition(position, session.sessionID);
+        // save giver state
+        if (currentDialogState?.currentTag && memori.giverTag) {
+          setInstruct(currentDialogState?.currentTag === memori.giverTag);
+        } else {
+          setInstruct(false);
+        }
+
+        if (position && memori.needsPosition)
+          applyPosition(position, session.sessionID);
 
         setLoading(false);
         return {
           dialogState: session.currentState,
           sessionID: session.sessionID,
-        } as { dialogState: DialogState; sessionID: string };
-      } else if (
+        } as any;
+      }
+      // Handle age restriction error
+      else if (
         session?.resultMessage.startsWith('This Memori is aged restricted')
       ) {
-        console.error(session);
+        console.warn(session);
         toast.error(t('underageTwinSession', { age: minAge }));
         setGotErrorInOpening(true);
-      } else if (session?.resultCode === 403) {
+      }
+      // Handle authentication error
+      else if (session?.resultCode === 403) {
         setMemoriPwd(undefined);
         setAuthModalState('password');
-      } else {
-        console.error(session);
-        toast.error(t(getErrori18nKey(session?.resultCode)));
+        return session;
+      }
+      // Handle other errors
+      else {
+        console.warn(session);
+        toast.error(
+          tst => (
+            <div>
+              <p>{t(getErrori18nKey(session?.resultCode))}</p>
+              <Button
+                outlined
+                padded={false}
+                onClick={() => toast.dismiss(tst.id)}
+                icon={<CloseIcon />}
+              >
+                {t('close')}
+              </Button>
+            </div>
+          ),
+          {
+            duration: Infinity,
+          }
+        );
         setGotErrorInOpening(true);
+        return session;
       }
     } catch (err) {
       console.error(err);
-      new Error('Error fetching session');
     }
   };
+
+  /**
+   * Reopens an existing session with optional parameters
+   * @param updateDialogState Whether to update dialog state
+   * @param password Optional password for authentication
+   * @param recoveryTokens Optional recovery tokens
+   * @param tag Optional tag
+   * @param pin Optional PIN
+   * @param initialContextVars Optional initial context variables
+   * @param initialQuestion Optional initial question
+   * @param birthDate Optional birth date for age verification
+   * @returns Promise resolving to dialog state and session ID if successful, null otherwise
+   */
   const reopenSession = async (
     updateDialogState: boolean = false,
     password?: string,
@@ -1077,17 +1364,37 @@ const MemoriWidget = ({
     initialQuestion?: string,
     birthDate?: string
   ) => {
+    // console.log('[REOPEN_SESSION] Starting reopenSession with params:', {
+    //   updateDialogState,
+    //   hasPassword: !!password,
+    //   hasRecoveryTokens: !!recoveryTokens,
+    //   tag,
+    //   hasPin: !!pin,
+    //   initialContextVars,
+    //   initialQuestion,
+    //   hasBirthDate: !!birthDate
+    // });
+
+    // Set loading state while reopening session
     setLoading(true);
+
+    // Get birth date from local storage if not provided
+    let storageBirthDate = getLocalConfig<string | undefined>(
+      'birthDate',
+      undefined
+    );
+    let userBirthDate = birthDate ?? storageBirthDate;
+    // console.log('[REOPEN_SESSION] Using birth date:', userBirthDate);
+
     try {
-      let storageBirthDate = getLocalConfig<string | undefined>(
-        'birthDate',
-        undefined
-      );
-      if (!(birthDate || storageBirthDate) && !!minAge) {
+      // 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;
       }
 
+      // Check if authentication is needed based on privacy type and credentials
       if (
         memori.privacyType !== 'PUBLIC' &&
         !password &&
@@ -1096,53 +1403,66 @@ const MemoriWidget = ({
         !recoveryTokens &&
         !memoriTokens
       ) {
+        // console.log('[REOPEN_SESSION] Authentication required, showing modal');
         setAuthModalState('password');
         return;
       }
 
+      // Get current URL as referral
       let referral;
       try {
         referral = (() => {
           return window.location.href;
         })();
+        console.log('[REOPEN_SESSION] Got referral:', referral);
       } catch (err) {
-        console.error(err);
+        console.debug('[REOPEN_SESSION] Error getting referral:', err);
       }
 
+      // 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,
         recoveryTokens: recoveryTokens || memoriTokens,
-        tag,
-        pin,
+        tag: tag ?? personification?.tag,
+        pin: pin ?? personification?.pin,
         initialContextVars: {
           PATHNAME: window.location.pathname,
           ROUTE: window.location.pathname?.split('/')?.pop() || '',
           ...(initialContextVars || {}),
         },
         initialQuestion,
-        birthDate: birthDate || storageBirthDate || undefined,
+        birthDate: userBirthDate,
         additionalInfo: {
           ...(additionalInfo || {}),
           loginToken:
             userToken ?? loginToken ?? additionalInfo?.loginToken ?? authToken,
           language: getCultureCodeByLanguage(userLang),
           referral: referral,
+          timeZoneOffset: new Date().getTimezoneOffset().toString(),
         },
       });
 
+      // 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);
+            // Set initial message or append to existing history
             history.length <= 1
               ? setHistory([
                   {
                     text: currentState.emission,
                     emitter: currentState.emitter,
-                    media: currentState.media,
+                    media: currentState.emittedMedia ?? currentState.media,
                     fromUser: false,
                     initial: true,
                     contextVars: currentState.contextVars,
@@ -1158,7 +1478,7 @@ const MemoriWidget = ({
               : pushMessage({
                   text: currentState.emission,
                   emitter: currentState.emitter,
-                  media: currentState.media,
+                  media: currentState.emittedMedia ?? currentState.media,
                   fromUser: false,
                   initial: true,
                   contextVars: currentState.contextVars,
@@ -1173,49 +1493,193 @@ const MemoriWidget = ({
           }
         }
 
-        if (position) applyPosition(position, sessionID);
-        if (memori.needsDateTime)
+        // Apply position and date settings if needed
+        if (position && memori.needsPosition) {
+          // console.log('[REOPEN_SESSION] Applying position');
+          applyPosition(position, sessionID);
+        }
+        if (memori.needsDateTime) {
+          // console.log('[REOPEN_SESSION] Sending date changed event');
           sendDateChangedEvent({ sessionID: sessionID, state: currentState });
+        }
 
         setLoading(false);
         return {
           dialogState: currentState,
           sessionID,
         };
-      } else if (
+      }
+      // Handle age restriction error
+      else if (
         response?.resultMessage.startsWith('This Memori is aged restricted')
       ) {
-        console.error(response);
+        console.error('[REOPEN_SESSION] Age restriction error:', response);
         toast.error(t('underageTwinSession', { age: minAge }));
         setGotErrorInOpening(true);
-      } else if (response?.resultCode === 403) {
+      }
+      // Handle authentication error
+      else if (response?.resultCode === 403) {
+        console.error('[REOPEN_SESSION] Authentication error');
         setMemoriPwd(undefined);
         setAuthModalState('password');
-      } else {
-        console.error(response);
+      }
+      // Handle other errors
+      else {
+        console.error('[REOPEN_SESSION] Other error:', response);
         toast.error(t(getErrori18nKey(response.resultCode)));
         setGotErrorInOpening(true);
       }
     } catch (err) {
-      console.error(err);
+      console.error('[REOPEN_SESSION] Caught error:', err);
     }
+    // Reset loading state
     setLoading(false);
 
     return null;
   };
 
-  const changeTag = async (
-    memoriId: string,
-    sessionId: string,
-    tag?: string,
-    pin?: string
+  const [chatLogs, setChatLogs] = useState<any[]>([]);
+  const resumeSession = async (
+    chatLog: ChatLog,
+    questionsAndAnswers: { question: string; answer: string }[],
+    initialContextVars?: { [key: string]: string },
+    initialQuestion?: string,
+    birthDate?: string
   ) => {
-    if (!memoriId || !sessionId) {
-      console.error('CHANGETAG/Session not found');
-      return Promise.reject('Session not found');
-    }
+    // Set loading state while reopening session
+    setLoading(true);
 
-    try {
+    // Get birth date from local storage if not provided
+    let storageBirthDate = getLocalConfig<string | undefined>(
+      'birthDate',
+      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;
+      }
+
+      // Check if authentication is needed based on privacy type and credentials
+      if (
+        memori.privacyType !== 'PUBLIC' &&
+        !memoriPassword &&
+        !memori.secretToken &&
+        !memoriPwd &&
+        !memoriTokens
+      ) {
+        // console.log('[REOPEN_SESSION] Authentication required, showing modal');
+        setAuthModalState('password');
+        return;
+      }
+
+      // 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);
+      }
+
+      // Initialize session with provided parameters
+      // console.log('[REOPEN_SESSION] Initializing session...');
+      const { sessionID, currentState, ...response } = await initSession({
+        memoriID: memori.engineMemoriID ?? '',
+        password: memoriPassword || memoriPwd || memori.secretToken,
+        recoveryTokens: memoriTokens,
+        tag: personification?.tag,
+        pin: personification?.pin,
+        continueFromChatLogID: chatLog.chatLogID,
+        initialContextVars: {
+          PATHNAME: window.location.pathname,
+          ROUTE: window.location.pathname?.split('/')?.pop() || '',
+          ...(initialContextVars || {}),
+        },
+        initialQuestion,
+        birthDate: userBirthDate,
+        additionalInfo: {
+          ...(additionalInfo || {}),
+          loginToken:
+            userToken ?? loginToken ?? additionalInfo?.loginToken ?? authToken,
+          language: getCultureCodeByLanguage(userLang),
+          referral: referral,
+          timeZoneOffset: new Date().getTimezoneOffset().toString(),
+        },
+      });
+
+      // Handle successful session initialization
+      if (sessionID) {
+        // console.log('[REOPEN_SESSION] Session initialized successfully:', sessionID);
+        setSessionId(sessionID);
+
+        // console.log('[REOPEN_SESSION] Processing emission:', currentState.emission);
+        // Set initial message or append to existing history
+        setHistory(
+          chatLog.lines.map(log => ({
+            text: log.text,
+            emitter: log.emitter,
+            media: log.media?.map(m => ({
+              ...m,
+              mediumID:
+                'mediumID' in m ? String(m.mediumID) : crypto.randomUUID(),
+            })),
+            fromUser: log.inbound,
+            initial: false,
+            contextVars: log.contextVars,
+            date: log.timestamp,
+          }))
+        );
+
+        setChatLogs(questionsAndAnswers);
+      }
+
+      // Handle age restriction error
+      else if (
+        response?.resultMessage.startsWith('This Memori is aged restricted')
+      ) {
+        console.error('[REOPEN_SESSION] Age restriction error:', response);
+        toast.error(t('underageTwinSession', { age: minAge }));
+        setGotErrorInOpening(true);
+      }
+      // Handle authentication error
+      else if (response?.resultCode === 403) {
+        console.error('[REOPEN_SESSION] Authentication error');
+        setMemoriPwd(undefined);
+        setAuthModalState('password');
+      }
+      // Handle other errors
+      else {
+        console.error('[REOPEN_SESSION] Other error:', response);
+        toast.error(t(getErrori18nKey(response.resultCode)));
+        setGotErrorInOpening(true);
+      }
+    } catch (err) {
+      console.error('[RESUME_SESSION] Caught error:', err);
+    }
+
+    setLoading(false);
+  };
+
+  const changeTag = async (
+    memoriId: string,
+    sessionId: string,
+    tag?: string,
+    pin?: string
+  ) => {
+    if (!memoriId || !sessionId) {
+      console.error('CHANGETAG/Session not found');
+      return Promise.reject('Session not found');
+    }
+
+    try {
       const { currentState, resultCode } = await postTagChangedEvent(
         sessionId,
         tag ?? anonTag
@@ -1258,14 +1722,14 @@ const MemoriWidget = ({
               return window.location.href;
             })();
           } catch (err) {
-            console.error(err);
+            console.debug(err);
           }
 
           fetchSession({
             memoriID: memori.engineMemoriID ?? '',
             password: secret || memoriPwd || memori.secretToken,
-            tag: memori.giverTag,
-            pin: memori.giverPIN,
+            tag: tag ?? personification?.tag,
+            pin: pin ?? personification?.pin,
             initialContextVars: {
               PATHNAME: window.location.pathname,
               ROUTE: window.location.pathname?.split('/')?.pop() || '',
@@ -1282,6 +1746,7 @@ const MemoriWidget = ({
                 authToken,
               language: getCultureCodeByLanguage(userLang),
               referral: referral,
+              timeZoneOffset: new Date().getTimezoneOffset().toString(),
             },
           });
         } else if (!!currentState) {
@@ -1294,33 +1759,12 @@ const MemoriWidget = ({
       }
     } catch (_e) {
       let err = _e as Error;
-      console.error('[APPCONTEXT/CHANGETAG]', err);
+      console.warn('[APPCONTEXT/CHANGETAG]', err);
       return Promise.reject(err);
     }
 
     return null;
   };
-  const restoreGiverTag = async () => {
-    if (sessionId && memori.giverTag && memori.giverPIN) {
-      setHistory([]);
-      await changeTag(
-        memori.engineMemoriID!,
-        sessionId,
-        memori.giverTag,
-        memori.giverPIN
-      );
-    }
-  };
-  useEffect(() => {
-    return () => {
-      if (
-        !currentDialogState ||
-        currentDialogState?.currentTag !== memori.giverTag
-      )
-        restoreGiverTag();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
 
   /**
    * Polling dates
@@ -1396,117 +1840,6 @@ const MemoriWidget = ({
       timeoutRef.current = undefined;
     }
   };
-  const resetInteractionTimeout = () => {
-    clearInteractionTimeout();
-    if (!isPlayingAudio && !userMessage.length && !memoriTyping && !listening)
-      setInteractionTimeout();
-  };
-  const handleTimeout = async () => {
-    if (
-      !hasUserActivatedSpeak ||
-      isPlayingAudio ||
-      !!userMessage.length ||
-      !!memoriTyping ||
-      listening
-    ) {
-      resetInteractionTimeout();
-      return;
-    } else if (
-      sessionId &&
-      hasUserActivatedSpeak &&
-      currentDialogState?.acceptsTimeout
-    ) {
-      const { currentState, ...response } = await postTimeoutEvent(sessionId);
-      if (response.resultCode === 0 && currentState) {
-        const emission = currentState.emission;
-        if (
-          !instruct &&
-          isMultilanguageEnabled &&
-          userLang !== i18n?.language &&
-          emission &&
-          emission.length > 0
-        ) {
-          translateDialogState(
-            { ...currentState, emission: emission },
-            userLang
-          ).then(ts => {
-            if (ts.emission) {
-              speak(ts.emission);
-            }
-          });
-        } else if (emission && emission.length > 0) {
-          pushMessage({
-            text: emission,
-            emitter: currentState.emitter,
-            media: currentState.media,
-            fromUser: false,
-            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,
-          });
-          speak(emission);
-          setCurrentDialogState({
-            ...currentState,
-            hints:
-              currentState.hints ??
-              (currentState.state === 'G1' ? currentDialogState?.hints : []),
-          });
-        } else {
-          resetInteractionTimeout();
-          return;
-        }
-      }
-    }
-  };
-  const setInteractionTimeout = () => {
-    let timeout = currentDialogState?.timeout;
-    if (!timeout) {
-      let timeoutLimit = 40;
-      let timeoutMinLimit = 25;
-      timeout =
-        Math.floor(Math.random() * (timeoutLimit - timeoutMinLimit)) +
-        timeoutMinLimit;
-
-      if (currentDialogState?.emission) {
-        let readTime = currentDialogState.emission.length / 26.5;
-        timeout = timeout + readTime;
-      }
-    }
-    if (forcedTimeout) {
-      timeout = forcedTimeout;
-
-      if (currentDialogState?.emission) {
-        let readTime = currentDialogState.emission.length / 26.5;
-        timeout = timeout + readTime;
-      }
-    }
-
-    let uiTimeout = setTimeout(handleTimeout, timeout * 1000);
-    setUserInteractionTimeout(uiTimeout);
-    timeoutRef.current = uiTimeout;
-  };
-  useEffect(() => {
-    if (!!userMessage.length || isPlayingAudio || !!memoriTyping)
-      clearInteractionTimeout();
-    if (sessionId && !!!userMessage.length) resetInteractionTimeout();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    currentDialogState?.acceptsTimeout,
-    currentDialogState?.timeout,
-    currentDialogState?.state,
-    isPlayingAudio,
-    sessionId,
-    history,
-    userMessage,
-    memoriTyping,
-    hasUserActivatedSpeak,
-  ]);
   useEffect(() => {
     return () => {
       setHasUserActivatedSpeak(false);
@@ -1517,593 +1850,216 @@ const MemoriWidget = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const initializeTTS = () => {
-    if (!AZURE_COGNITIVE_SERVICES_TTS_KEY) return;
-
-    speechConfig = speechSdk.SpeechConfig.fromSubscription(
-      AZURE_COGNITIVE_SERVICES_TTS_KEY,
-      'eastus'
-    );
-
-    speechConfig.speechSynthesisLanguage = getCultureCodeByLanguage(userLang);
-    speechConfig.speechSynthesisVoiceName = getTTSVoice(userLang); // https://docs.microsoft.com/it-it/azure/cognitive-services/speech-service/language-support#text-to-speech
-    speechConfig.speechRecognitionLanguage = getCultureCodeByLanguage(userLang);
-
-    if (hasTouchscreen())
-      speechConfig.speechSynthesisOutputFormat =
-        speechSdk.SpeechSynthesisOutputFormat.Audio16Khz32KBitRateMonoMp3;
-
-    audioContext = new AudioContext();
-    let buffer = audioContext.createBuffer(1, 10000, 22050);
-    let source = audioContext.createBufferSource();
-    source.buffer = buffer;
-    source.connect(audioContext.destination);
-
-    audioDestination = new speechSdk.SpeakerAudioDestination();
-    let audioConfig = speechSdk.AudioConfig.fromSpeakerOutput(audioDestination);
-    speechSynthesizer = new speechSdk.SpeechSynthesizer(
-      speechConfig,
-      audioConfig
-    );
-  };
+  /**
+   * Speech recognition event handlers
+   */
+  const [requestedListening, setRequestedListening] = useState(false);
+  const startListeningRef = useRef<(() => Promise<void>) | null>(null);
+
+  console.log('tenantID', tenantID);
+
+  // Define TTS configuration
+  const ttsConfig = useMemo(
+    () => ({
+      provider: ttsProvider,
+      voice: getTTSVoice(
+        userLang || memori.culture?.split('-')?.[0] || 'EN',
+        ttsProvider,
+        memori.voiceType as 'MALE' | 'FEMALE' | 'NEUTRAL'
+      ),
+      tenant: tenantID,
+      region: 'westeurope',
+      voiceType: memori.voiceType,
+      layout: selectedLayout,
+    }),
+    [ttsProvider, userLang, memori.culture, memori.voiceType]
+  );
 
-  const getTTSVoice = useCallback(
-    (lang?: string): string => {
-      let voice = '';
-      let voiceLang = (
-        lang ??
-        memori.culture?.split('-')?.[0] ??
-        i18n.language ??
-        'IT'
-      ).toUpperCase();
-
-      let voiceType = memori.voiceType;
-      if (memori.enableBoardOfExperts && currentDialogState?.emitter) {
-        let expert = experts?.find(e => e.name === currentDialogState?.emitter);
-
-        // TODO: once got info from backend, select voice from expert
-        // if (expert?.voiceType) {
-        //   voiceType = expert.voiceType;
-        // }
-      }
+  const sttConfig = useMemo(
+    () => ({
+      provider: ttsProvider,
+      language: getCultureCodeByLanguage(userLang),
+      tenant: tenantID,
+    }),
+    [ttsProvider, userLang]
+  );
 
-      // https://learn.microsoft.com/en-us/azure/ai-services/speech-service/language-support?tabs=tts
-      switch (voiceLang) {
-        case 'IT':
-          voice = `${
-            voiceType === 'MALE' ? 'it-IT-DiegoNeural' : 'it-IT-ElsaNeural'
-          }`;
-          break;
-        case 'DE':
-          voice = `${
-            voiceType === 'MALE' ? 'de-DE-ConradNeural' : 'de-DE-KatjaNeural'
-          }`;
-          break;
-        case 'EN':
-          voice = `${
-            voiceType === 'MALE' ? 'en-GB-RyanNeural' : 'en-GB-SoniaNeural'
-          }`;
-          break;
-        case 'ES':
-          voice = `${
-            voiceType === 'MALE' ? 'es-ES-AlvaroNeural' : 'es-ES-ElviraNeural'
-          }`;
-          break;
-        case 'FR':
-          voice = `${
-            voiceType === 'MALE' ? 'fr-FR-HenriNeural' : 'fr-FR-DeniseNeural'
-          }`;
-          break;
-        case 'PT':
-          voice = `${
-            voiceType === 'MALE' ? 'pt-PT-DuarteNeural' : 'pt-PT-RaquelNeural'
-          }`;
-          break;
-        case 'UK':
-          voice = `${
-            voiceType === 'MALE' ? 'uk-UA-OstapNeural' : 'uk-UA-PolinaNeural'
-          }`;
-          break;
-        case 'RU':
-          voice = `${
-            voiceType === 'MALE' ? 'ru-RU-DmitryNeural' : 'ru-RU-SvetlanaNeural'
-          }`;
-          break;
-        case 'PL':
-          voice = `${
-            voiceType === 'MALE' ? 'pl-PL-MarekNeural' : 'pl-PL-AgnieszkaNeural'
-          }`;
-          break;
-        case 'FI':
-          voice = `${
-            voiceType === 'MALE' ? 'fi-FI-HarriNeural' : 'fi-FI-SelmaNeural'
-          }`;
-          break;
-        case 'EL':
-          voice = `${
-            voiceType === 'MALE' ? 'el-GR-NestorasNeural' : 'el-GR-AthinaNeural'
-          }`;
-          break;
-        case 'AR':
-          voice = `${
-            voiceType === 'MALE' ? 'ar-SA-HamedNeural' : 'ar-SA-ZariyahNeural'
-          }`;
-          break;
-        case 'ZH':
-          voice = `${
-            voiceType === 'MALE' ? 'zh-CN-YunxiNeural' : 'zh-CN-XiaoxiaoNeural'
-          }`;
-          break;
-        case 'JA':
-          voice = `${
-            voiceType === 'MALE' ? 'ja-JP-KeitaNeural' : 'ja-JP-NanamiNeural'
-          }`;
-          break;
-        default:
-          voice = `${
-            voiceType === 'MALE' ? 'it-IT-DiegoNeural' : 'it-IT-IsabellaNeural'
-          }`;
-          break;
-      }
-      return voice;
+  // Initialize TTS hook with basic options first
+  const {
+    speak: ttsSpeak,
+    stop: ttsStop,
+    isPlaying: isPlayingAudio,
+    speakerMuted,
+    toggleMute,
+    hasUserActivatedSpeak,
+    setHasUserActivatedSpeak,
+    error,
+    setError,
+  } = useTTS(
+    ttsConfig as TTSConfig,
+    {
+      apiUrl: `${baseUrl}/api/tts`,
+      continuousSpeech: continuousSpeech,
+      preview: preview,
     },
-    [
-      memori.voiceType,
-      memori.enableBoardOfExperts,
-      currentDialogState?.emitter,
-      i18n.language,
-      memori.culture,
-    ]
+    autoStart,
+    defaultEnableAudio,
+    defaultSpeakerActive
   );
 
-  const getCultureCodeByLanguage = (lang?: string): string => {
-    let voice = '';
-    let voiceLang = (
-      lang ||
-      memori.culture?.split('-')?.[0] ||
-      i18n.language ||
-      'IT'
-    ).toUpperCase();
-    switch (voiceLang) {
-      case 'IT':
-        voice = 'it-IT';
-        break;
-      case 'DE':
-        voice = 'de-DE';
-        break;
-      case 'EN':
-        voice = 'en-GB';
-        break;
-      case 'ES':
-        voice = 'es-ES';
-        break;
-      case 'FR':
-        voice = 'fr-FR';
-        break;
-      case 'PT':
-        voice = 'pt-PT';
-        break;
-      case 'UK':
-        voice = 'uk-UK';
-        break;
-      case 'RU':
-        voice = 'ru-RU';
-        break;
-      case 'PL':
-        voice = 'pl-PL';
-        break;
-      case 'FI':
-        voice = 'fi-FI';
-        break;
-      case 'EL':
-        voice = 'el-GR';
-        break;
-      case 'AR':
-        voice = 'ar-SA';
-        break;
-      case 'ZH':
-        voice = 'zh-CN';
-        break;
-      case 'JA':
-        voice = 'ja-JP';
-        break;
-      default:
-        voice = 'it-IT';
-        break;
-    }
-    return voice;
-  };
-
-  const [phonemesMap, setPhonemesMap] = useState<{
-    [ns: 'common' | string]: {
-      [word: string]: {
-        caseSensitive: boolean;
-        default: string;
-        it?: string;
-        en?: string;
-        fr?: string;
-      };
-    };
-  }>();
-  const fetchLexiconJSON = async () => {
-    try {
-      const lexiconReq = await fetch(
-        `${baseUrl || 'https://aisuru.com'}/api/lexiconmap`
-      );
-      const lexicon = await lexiconReq.json();
-      return lexicon;
-    } catch (err) {
-      console.error(err);
-    }
-  };
-  useEffect(() => {
-    fetchLexiconJSON().then(lexicon => {
-      setPhonemesMap(lexicon);
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const replaceTextWithPhonemes = (text: string, lang: string) => {
-    if (!phonemesMap) return text;
-
-    const phonemes = {
-      ...(phonemesMap.common ?? {}),
-      ...(tenant?.id && phonemesMap[tenant.id] ? phonemesMap[tenant.id] : {}),
-    };
-    const phonemesPairs = Object.keys(phonemes).map(word => {
-      const phoneme =
-        phonemes[word][lang.toLowerCase() as 'it' | 'en' | 'fr'] ??
-        phonemes[word].default;
-      return { word, phoneme, caseSensitive: phonemes[word].caseSensitive };
-    });
-    const ssmlText = phonemesPairs.reduce(
-      (acc, { word, phoneme, caseSensitive }) => {
-        return acc.replace(
-          new RegExp(`\\b${word}\\b`, caseSensitive ? 'g' : 'gi'),
-          `<phoneme alphabet="ipa" ph="${phoneme}">${word}</phoneme>`
-        );
-      },
-      text
-    );
-
-    return ssmlText;
-
-    // E.g.:
-    // return text.replace(
-    //   /martius/gi,
-    //   `<phoneme alphabet="ipa" ph="ˈmaːrːtzius">Martius</phoneme>`,
-    // )
-    // .replace(
-    //   /rawmaterial/gi,
-    //   `<phoneme alphabet="ipa" ph="ˈpippo">RawMaterial</phoneme>`,
-    // )
-    // .replace(/qfe/gi, `<sub alias="Quota Filo Erba">QFE</sub>`)
-  };
-
-  const emitEndSpeakEvent = () => {
-    const e = new CustomEvent('MemoriEndSpeak');
-    document.dispatchEvent(e);
-  };
-
-  const speak = (text: string): void => {
-    if (!AZURE_COGNITIVE_SERVICES_TTS_KEY || preview) {
-      emitEndSpeakEvent();
-      return;
-    }
-    stopListening();
-    // stopAudio();
-
-    if (preview) return;
-
-    if (muteSpeaker || speakerMuted) {
-      memoriSpeaking = false;
-      setMemoriTyping(false);
+    // Create a single, centralized function to process and send messages
+    const processSpeechAndSendMessage = (text: string) => {
 
-      emitEndSpeakEvent();
-
-      // trigger start continuous listening if set, see MemoriChat
-      if (continuousSpeech) {
-        setListeningTimeout();
-      }
-      return;
-    }
-
-    if (audioDestination) audioDestination.pause();
-
-    let isSafari =
-      window.navigator.userAgent.includes('Safari') &&
-      !window.navigator.userAgent.includes('Chrome');
-    let isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
-    if ((audioContext.state as string) === 'interrupted') {
-      audioContext.resume().then(() => speak(text));
-      return;
-    }
-    if (audioContext.state === 'closed') {
-      audioContext = new AudioContext();
-      let buffer = audioContext.createBuffer(1, 10000, 22050);
-      let source = audioContext.createBufferSource();
-      source.buffer = buffer;
-      source.connect(audioContext.destination);
-    } else if (audioContext.state === 'suspended') {
-      stopAudio();
-
-      audioContext = new AudioContext();
-      let buffer = audioContext.createBuffer(1, 10000, 22050);
-      let source = audioContext.createBufferSource();
-      source.buffer = buffer;
-      source.connect(audioContext.destination);
-    }
-
-    if (!speechSynthesizer) {
-      if (!isIOS) {
-        audioDestination = new speechSdk.SpeakerAudioDestination();
+      console.log('processSpeechAndSendMessage', text);
+      // Skip if already processing or no text
+      if (!text || text.trim().length === 0) {
+        return;
       }
-      let audioConfig =
-        speechSdk.AudioConfig.fromSpeakerOutput(audioDestination);
-      speechSynthesizer = new speechSdk.SpeechSynthesizer(
-        speechConfig,
-        audioConfig
-      );
-    }
-
-    const source = audioContext.createBufferSource();
-    source.addEventListener('ended', () => {
-      setIsPlayingAudio(false);
-      memoriSpeaking = false;
-    });
-    audioDestination.onAudioEnd = () => {
-      setIsPlayingAudio(false);
-      memoriSpeaking = false;
-      source.disconnect();
-
-      emitEndSpeakEvent();
-
-      // trigger start continuous listening if set
-      onEndSpeakStartListen();
-    };
-
-    speechSynthesizer.speakSsmlAsync(
-      `<speak version="1.0" xmlns="http://www.w3.org/2001/10/synthesis" xmlns:mstts="https://www.w3.org/2001/mstts" xmlns:emo="http://www.w3.org/2009/10/emotionml" xml:lang="${getCultureCodeByLanguage(
-        userLang
-      )}"><voice name="${getTTSVoice(userLang)}"><s>${replaceTextWithPhonemes(
-        escapeHTML(stripMarkdown(stripEmojis(text))),
-        userLang.toLowerCase()
-      )}</s></voice></speak>`,
-      result => {
-        if (result) {
-          setIsPlayingAudio(true);
-          memoriSpeaking = true;
-
-          try {
-            audioContext.decodeAudioData(result.audioData, function (buffer) {
-              source.buffer = buffer;
-              source.connect(audioContext.destination);
-
-              if (history.length < 1 || (isSafari && isIOS)) {
-                source.start(0);
-              }
-            });
-
-            audioContext.onstatechange = () => {
-              if (
-                audioContext.state === 'suspended' ||
-                audioContext.state === 'closed'
-              ) {
-                source.disconnect();
-                setIsPlayingAudio(false);
-                memoriSpeaking = false;
-              } else if ((audioContext.state as string) === 'interrupted') {
-                audioContext.resume();
-              }
-            };
-
-            audioContext.resume();
-
-            if (speechSynthesizer) {
-              speechSynthesizer.close();
-              speechSynthesizer = null;
-            }
-          } catch (e) {
-            console.error('speak error: ', e);
-            window.speechSynthesis.speak(new SpeechSynthesisUtterance(text));
-            setIsPlayingAudio(false);
-            memoriSpeaking = false;
-
-            if (speechSynthesizer) {
-              speechSynthesizer.close();
-              speechSynthesizer = null;
-            }
-            emitEndSpeakEvent();
-          }
-        } else {
-          audioContext.resume();
-          setIsPlayingAudio(false);
-          memoriSpeaking = false;
-          emitEndSpeakEvent();
+  
+      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);
         }
-      },
-      error => {
-        console.error('speak:', error);
-        window.speechSynthesis.speak(new SpeechSynthesisUtterance(text));
-        setIsPlayingAudio(false);
-        memoriSpeaking = false;
-        emitEndSpeakEvent();
+      } catch (error) {
+        console.error('Error in processSpeechAndSendMessage:', error);
       }
-    );
+    };
 
-    setMemoriTyping(false);
-  };
-  const stopAudio = () => {
-    setIsPlayingAudio(false);
-    memoriSpeaking = false;
-    try {
-      if (speechSynthesizer) {
-        speechSynthesizer.close();
-        speechSynthesizer = null;
-      }
-      if (audioContext.state !== 'closed') {
-        audioContext.close();
-      }
-      if (audioDestination) {
-        audioDestination.pause();
-        audioDestination.close();
-      }
-    } catch (e) {
-      console.error('stopAudio error: ', e);
-    }
-  };
+  const {
+    isListening,
+
+    // Actions
+    startRecording,
+    stopRecording,
+  } = useSTT(
+    sttConfig as STTConfig,
+    processSpeechAndSendMessage,
+    {
+      apiUrl: `${baseUrl}/api/stt`,
+      continuousRecording: continuousSpeech,
+      silenceTimeout: continuousSpeechTimeout,
+      autoStart: autoStart,
+    },
+    defaultEnableAudio
+  );
 
   /**
-   * Focus on the chat input on mount
+   * Enhanced handleSpeak that integrates with the improved useTTS hook
+   * Uses promise-based approach for better reliability
    */
-  useEffect(() => {
-    let textarea = document.querySelector(
-      '#chat-fieldset textarea'
-    ) as HTMLTextAreaElement | null;
-    if (textarea) textarea.focus();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentDialogState?.emission]);
+  const handleSpeak = async (text: string) => {
+    if (!text || !text.trim() || preview || speakerMuted || !defaultEnableAudio) {
+      const e = new CustomEvent('MemoriEndSpeak');
+      document.dispatchEvent(e);
 
-  /**
-   * Speech recognition and transcript management
-   */
-  const [transcript, setTranscript] = useState('');
-  const resetTranscript = () => setTranscript('');
+      return Promise.resolve();
+    }
 
-  /**
-   * Listening transcript timeout
-   */
-  const [transcriptTimeout, setTranscriptTimeout] =
-    useState<NodeJS.Timeout | null>(null);
-  const setListeningTimeout = () => {
-    let timeout = setTimeout(async () => {
-      clearListening();
-      const message = stripDuplicates(transcript);
-      if (message.length > 0 && listening) {
-        sendMessage(message);
-        resetTranscript();
-        setUserMessage('');
-      } else if (listening) {
-        resetInteractionTimeout();
-      }
-    }, continuousSpeechTimeout * 1000);
-    setTranscriptTimeout(timeout);
-  };
-  const clearListeningTimeout = () => {
-    if (transcriptTimeout) {
-      clearTimeout(transcriptTimeout);
-      setTranscriptTimeout(null);
+    if (typeof stopRecording === 'function') {
+      stopRecording();
     }
-  };
-  const resetListeningTimeout = () => {
-    clearListeningTimeout();
-    if (continuousSpeech) setListeningTimeout();
-  };
-  useEffect(() => {
-    resetListeningTimeout();
-    resetInteractionTimeout();
 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [transcript]);
+    const processedText = sanitizeText(text);
 
+    return ttsSpeak(processedText)
+  };
   /**
-   * Listening methods
+   * Integrated solution for translating dialog state and speaking
+   * This uses promise chaining for reliable sequencing without timeouts
    */
-  const startListening = () => {
-    if (!AZURE_COGNITIVE_SERVICES_TTS_KEY) return;
+  const translateAndSpeak = useCallback(
+    async (
+      dialogState: DialogState,
+      language: string,
+      msg?: string,
+      skipEmission: boolean = false
+    ) => {
+      try {
+        // First ensure we have a valid dialog state
+        if (!dialogState) {
+          console.warn('translateAndSpeak called with empty dialog state');
+          return null;
+        }
 
-    clearListening();
-    setTranscript('');
-    resetTranscript();
+        // Then translate the dialog state
+        const translatedState = await translateDialogState(
+          dialogState,
+          language,
+          msg,
+          skipEmission
+        );
 
-    try {
-      navigator.mediaDevices
-        .getUserMedia({ audio: true })
-        .then(function (_stream) {
-          setHasUserActivatedListening(true);
-
-          if (!speechConfig) {
-            speechConfig = speechSdk.SpeechConfig.fromSubscription(
-              AZURE_COGNITIVE_SERVICES_TTS_KEY,
-              'eastus'
-            );
-            speechConfig.speechRecognitionLanguage =
-              getCultureCodeByLanguage(userLang);
-            speechConfig.speechSynthesisLanguage =
-              getCultureCodeByLanguage(userLang);
-            speechConfig.speechSynthesisVoiceName = getTTSVoice(userLang); // https://docs.microsoft.com/it-it/azure/cognitive-services/speech-service/language-support#text-to-speech
-          }
+        // If we're not skipping emission and there's something to speak, speak it
+        const textToSpeak =
+          translatedState.translatedEmission || translatedState.emission;
 
-          const audioConfig =
-            speechSdk.AudioConfig.fromDefaultMicrophoneInput();
-          recognizer = new speechSdk.SpeechRecognizer(
-            speechConfig,
-            audioConfig
-          );
+        if (textToSpeak && textToSpeak.trim() && !skipEmission && !speakerMuted) {
+          // Update activation state before speaking for better browser interaction
+          if (!hasUserActivatedSpeak) {
+            setHasUserActivatedSpeak(true);
+          }
 
-          setListening(true);
-          recognizer.recognized = (_s, e) => {
-            if (!e.result.text) return;
-            if (e.result.reason === speechSdk.ResultReason.RecognizedSpeech) {
-              let transcript = e.result.text;
-              setTranscript(transcript || '');
-              if (transcript?.length > 0) {
-                const transcriptMessage = stripDuplicates(transcript);
-                if (transcriptMessage.length > 0)
-                  setUserMessage(msg => `${msg} ${transcriptMessage}`);
-              }
-            } else if (e.result.reason === speechSdk.ResultReason.NoMatch) {
-              console.debug('NOMATCH: Speech could not be recognized.');
-            }
-          };
-          recognizer.canceled = (_s, e) => {
-            if (e.reason === speechSdk.CancellationReason.Error) {
-              console.debug(`"CANCELED: ErrorCode=${e.errorCode}`);
-              console.debug(`"CANCELED: ErrorDetails=${e.errorDetails}`);
-              console.debug(
-                'CANCELED: Did you set the speech resource key and region values?'
-              );
-            }
+          // Note: now using the Promise-based speak function to ensure proper sequencing
+          await handleSpeak(textToSpeak);
+        }
 
-            stopListening();
-          };
+        return translatedState;
+      } catch (error) {
+        console.error('Error in translateAndSpeak:', error);
+        // Still update activation state even if there's an error
+        if (!hasUserActivatedSpeak) {
+          setHasUserActivatedSpeak(true);
+        }
+        return dialogState;
+      }
+    },
+    [
+      translateDialogState,
+      handleSpeak,
+      hasUserActivatedSpeak,
+      setHasUserActivatedSpeak,
+    ]
+  );
 
-          recognizer.sessionStopped = (_s, _e) => {
-            stopListening();
-          };
+  /**
+   * Funzione stopAudio che sostituisce quella originale
+   */
+  const stopAudio = useCallback(async () => {
+    ttsStop();
+  }, [ttsStop]);
 
-          resetTranscript();
-          recognizer.startContinuousRecognitionAsync();
-        })
-        .catch(console.error);
-    } catch (error) {
-      console.error(error);
-    }
-  };
-  const stopListening = () => {
-    if (recognizer) {
-      recognizer.stopContinuousRecognitionAsync();
-      recognizer.close();
-      recognizer = null;
+  const focusChatInput = () => {
+    let textarea = document.querySelector(
+      '#chat-fieldset textarea'
+    ) as HTMLTextAreaElement | null;
+    if (textarea && enableFocusChatInput) {
+      textarea.focus();
+    } else {
+      textarea?.blur();
     }
-    setListening(false);
-  };
-  const clearListening = () => {
-    setHasUserActivatedListening(false);
-    stopListening();
-    clearListeningTimeout();
   };
-  const resetListening = () => {
-    if (listening) {
-      clearListening();
-      resetTranscript();
-      setUserMessage('');
-      startListening();
+
+  /**
+   * Focus on the chat input on mount
+   */
+  useEffect(() => {
+    // focus on chat input disabled for totem layout
+    if (selectedLayout !== 'TOTEM') {
+      focusChatInput();
     }
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentDialogState?.emission]);
+
   const resetUIEffects = () => {
     try {
-      clearListening();
       clearInteractionTimeout();
       setClickedStart(false);
       timeoutRef.current = undefined;
@@ -2125,47 +2081,24 @@ const MemoriWidget = ({
       document.removeEventListener('MemoriResetUIEffects', resetUIEffects);
     };
   }, []);
-  useEffect(() => {
-    if (currentDialogState?.state === 'Z0') clearListening();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentDialogState?.state]);
 
-  /**
-   * Speech recognition event handlers
-   */
-  const [requestedListening, setRequestedListening] = useState(false);
-  const onEndSpeakStartListen = useCallback(
-    (_e?: Event) => {
-      if (isPlayingAudio && speechSynthesizer) {
-        speechSynthesizer.close();
-        speechSynthesizer = null;
-      }
-      if (
-        continuousSpeech &&
-        (hasUserActivatedListening || !requestedListening)
-      ) {
-        setRequestedListening(true);
-        startListening();
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [continuousSpeech, hasUserActivatedListening]
-  );
   useEffect(() => {
+    // if memori is speaking, don't start listening
     if (
-      history.length > 1 &&
       !isPlayingAudio &&
       continuousSpeech &&
-      (hasUserActivatedListening || !requestedListening)
-    )
-      startListening();
-    else if (isPlayingAudio && listening) {
-      stopListening();
+      (hasUserActivatedListening || !requestedListening) &&
+      sessionId
+    ) {
+      startRecording();
+    } else if (isPlayingAudio && isListening) {
+      stopRecording();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isPlayingAudio]);
+  }, [isPlayingAudio, hasUserActivatedListening]);
+
   useEffect(() => {
-    resetListening();
+    stopRecording();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [language]);
 
@@ -2176,16 +2109,9 @@ const MemoriWidget = ({
     'keypress'
   );
   useEffect(() => {
-    const stored = getLocalConfig<'keypress' | 'click'>(
-      'sendOnEnter',
-      'keypress'
-    );
-    if (window.innerWidth <= 768) setSendOnEnter('click');
-    else setSendOnEnter(stored);
+    if (window.innerWidth <= 768 && hasTouchscreen()) setSendOnEnter('click');
+    else setSendOnEnter('keypress');
   }, []);
-  useEffect(() => {
-    setLocalConfig('sendOnEnter', sendOnEnter);
-  }, [sendOnEnter]);
 
   /**
    * Attachments
@@ -2203,7 +2129,7 @@ const MemoriWidget = ({
     integration
       ? {
           '--memori-chat-bubble-bg': '#fff',
-          ...(integrationConfig && !showInstruct
+          ...(integrationConfig && !instruct
             ? { '--memori-text-color': integrationConfig.textColor ?? '#000' }
             : {}),
           ...(integrationConfig?.buttonBgColor
@@ -2248,12 +2174,8 @@ const MemoriWidget = ({
 
   const integrationStylesheet = `
     ${
-      preview
-        ? '#preview,'
-        : selectedLayout === 'WEBSITE_ASSISTANT'
-        ? ''
-        : ':root,'
-    } .memori-widget, .memori-drawer, .memori-modal {
+      preview ? '#preview, ' : applyVarsToRoot ? ':root, ' : ''
+    }memori-client, .memori-widget, .memori-drawer, .memori-modal {
       ${Object.entries(integrationProperties)
         .map(([key, value]) => `${key}: ${value};`)
         .join('\n')}
@@ -2265,6 +2187,10 @@ const MemoriWidget = ({
       ? true
       : integrationConfig?.showAIicon;
 
+  const enableUpload = !!(showUpload ?? integrationConfig?.showUpload);
+
+  const enableReasoning = !!(showReasoning ?? integrationConfig?.showReasoning);
+
   const showWhyThisAnswer =
     integrationConfig?.showWhyThisAnswer === undefined
       ? true
@@ -2281,48 +2207,6 @@ const MemoriWidget = ({
     }
   }, []);
 
-  const [gamificationLevel, setGamificationLevel] =
-    useState<GamificationLevel>();
-  const getGamificationPoints = async (
-    memoriID: string
-  ): Promise<{
-    points: number;
-    unansweredQuestions: number;
-  }> => {
-    let gamificationPoints: number | undefined;
-    let unansQuestions: number | undefined;
-    try {
-      const {
-        contentQualityIndex,
-        answerQualityIndex,
-        unansweredQuestions,
-        ...cqResp
-      } = await getContentQualityIndexes(memoriID);
-      if (cqResp.resultCode === 0) {
-        gamificationPoints = contentQualityIndex;
-        unansQuestions = unansweredQuestions;
-      }
-    } catch (_e) {
-      let err = _e as Error;
-      console.error('[APPCONTEXT/QUERYGAMIFICATIONPOINTS]', err);
-    }
-
-    return {
-      points: gamificationPoints ?? 0,
-      unansweredQuestions: unansQuestions ?? 0,
-    };
-  };
-  useEffect(() => {
-    if (memori.engineMemoriID) {
-      getGamificationPoints(memori.engineMemoriID)
-        .then(value => {
-          setGamificationLevel(getGamificationLevel(value.points));
-        })
-        .catch(console.error);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [memori.engineMemoriID]);
-
   // Put SEO tags in head
   useEffect(() => {
     if (integrationConfig?.seoTitle) {
@@ -2352,83 +2236,7 @@ const MemoriWidget = ({
     }
   }, [integrationConfig, memori.avatarURL, ogImage]);
 
-  // X3 state - tag change
-  const selectReceiverTag = async (tag: string) => {
-    if (!sessionId) return;
-
-    try {
-      const { currentState, ...resp } = await postTagChangedEvent(
-        sessionId,
-        tag
-      );
-
-      if (resp.resultCode === 0) {
-        pushMessage({
-          text: tag,
-          fromUser: true,
-        });
-
-        if (currentState.state === 'X4' && memori.giverTag) {
-          const { currentState, ...resp } = await client.postTagChangedEvent(
-            sessionId,
-            memori.giverTag
-          );
-
-          if (resp.resultCode === 0) {
-            setCurrentDialogState(currentState);
-
-            if (currentState.emission) {
-              pushMessage({
-                text: currentState.emission,
-                emitter: currentState.emitter,
-                media: currentState.media,
-                fromUser: false,
-                contextVars: currentState.contextVars,
-                date: currentState.currentDate,
-                placeName: currentState.currentPlaceName,
-                placeLatitude: currentState.currentLatitude,
-                placeLongitude: currentState.currentLongitude,
-                placeUncertaintyKm: currentState.currentUncertaintyKm,
-                tag: currentState.currentTag,
-                memoryTags: currentState.memoryTags,
-              });
-            }
-          } else {
-            console.error(resp);
-            toast.error(t(getErrori18nKey(resp.resultCode)));
-          }
-        } else {
-          setCurrentDialogState(currentState);
-          if (currentState.emission) {
-            pushMessage({
-              text: currentState.emission,
-              emitter: currentState.emitter,
-              media: currentState.media,
-              fromUser: false,
-              contextVars: currentState.contextVars,
-              date: currentState.currentDate,
-              placeName: currentState.currentPlaceName,
-              placeLatitude: currentState.currentLatitude,
-              placeLongitude: currentState.currentLongitude,
-              placeUncertaintyKm: currentState.currentUncertaintyKm,
-              tag: currentState.currentTag,
-              memoryTags: currentState.memoryTags,
-            });
-          }
-        }
-      } else {
-        console.error(resp, tag, currentDialogState?.knownTags?.[tag]);
-        toast.error(t(getErrori18nKey(resp.resultCode)));
-      }
-    } catch (e) {
-      let err = e as Error;
-      console.error(err);
-      toast.error(err.message);
-    }
-  };
-
   const simulateUserPrompt = (text: string, translatedText?: string) => {
-    stopListening();
     stopAudio();
     sendMessage(text, undefined, undefined, false, translatedText);
   };
@@ -2437,6 +2245,8 @@ const MemoriWidget = ({
   // to use in integrations or snippets
   const memoriTextEnteredHandler = useCallback(
     (e: MemoriTextEnteredEvent) => {
+      if (disableTextEnteredEvents) return;
+
       const {
         text,
         waitForPrevious,
@@ -2457,7 +2267,6 @@ const MemoriWidget = ({
             memoriTextEnteredHandler(e);
           }, 1000);
         } else {
-          stopListening();
           stopAudio();
           sendMessage(
             text,
@@ -2473,10 +2282,23 @@ const MemoriWidget = ({
         }
       }
     },
-    [sessionId, isPlayingAudio, memoriTyping, userLang]
+    [
+      sessionId,
+      isPlayingAudio,
+      memoriTyping,
+      userLang,
+      disableTextEnteredEvents,
+    ]
   );
   useEffect(() => {
-    document.addEventListener('MemoriTextEntered', memoriTextEnteredHandler);
+    if (!disableTextEnteredEvents) {
+      document.addEventListener('MemoriTextEntered', memoriTextEnteredHandler);
+    } else {
+      document.removeEventListener(
+        'MemoriTextEntered',
+        memoriTextEnteredHandler
+      );
+    }
 
     return () => {
       document.removeEventListener(
@@ -2484,37 +2306,53 @@ const MemoriWidget = ({
         memoriTextEnteredHandler
       );
     };
-  }, [sessionId, userLang]);
+  }, [sessionId, userLang, disableTextEnteredEvents]);
 
+  /**
+   * Handles clicking the start button to begin or resume a session
+   * @param session Optional existing session with dialog state and ID
+   * @param initialSessionExpired Whether the initial session has expired
+   */
   const onClickStart = useCallback(
-    async (session?: { dialogState: DialogState; sessionID: string }) => {
-      const sessionID = session?.sessionID || sessionId;
-      const dialogState = session?.dialogState || currentDialogState;
+    async (
+      session?: { dialogState: DialogState; sessionID: string },
+      initialSessionExpired = false,
+      chatLog?: ChatLog
+    ) => {
+      const sessionID = chatLog ? undefined : session?.sessionID || sessionId;
+      const dialogState = chatLog
+        ? undefined
+        : session?.dialogState || currentDialogState;
       setClickedStart(true);
 
-      let memoriAudioElement = document.getElementById(
-        'memori-audio'
-      ) as HTMLAudioElement;
-      let isSafari =
-        window.navigator.userAgent.includes('Safari') &&
-        !window.navigator.userAgent.includes('Chrome');
-      if (memoriAudioElement && isSafari) {
-        memoriAudioElement.muted = false;
-        memoriAudioElement.play().catch((e: any) => {
-          console.error('error playing intro audio', e);
-        });
-      }
+      let translatedMessages: Message[] = [];
 
+      // Get birth date from storage or props
       let storageBirthDate = getLocalConfig<string | undefined>(
         'birthDate',
         undefined
       );
-      let birth = birthDate || storageBirthDate || undefined;
+      let birth = birthDate || storageBirthDate || user?.birthDate;
+      if (!birth && autoStart && initialSessionID)
+        birth = '1970-01-01T10:24:03.845Z';
+
+      const localPosition = getLocalConfig<Venue | undefined>(
+        'position',
+        undefined
+      );
+      // Only check for position requirement if memori.needsPosition is true
+      if (autoStart && !localPosition && memori.needsPosition) {
+        setShowPositionDrawer(true);
+        return;
+      }
 
+      // Handle age verification
       if (!sessionID && !!minAge && !birth) {
         setShowAgeVerification(true);
         setClickedStart(false);
-      } else if (
+      }
+      // Handle authentication
+      else if (
         (!sessionID &&
           memori.privacyType !== 'PUBLIC' &&
           !memori.secretToken &&
@@ -2525,7 +2363,9 @@ const MemoriWidget = ({
         setAuthModalState('password');
         setClickedStart(false);
         return;
-      } else if (!sessionID) {
+      }
+      // Create new session if needed
+      else if (!sessionID || initialSessionExpired) {
         setClickedStart(false);
         setGotErrorInOpening(false);
         const session = await fetchSession({
@@ -2533,13 +2373,16 @@ const MemoriWidget = ({
           password: secret || memoriPwd || memori.secretToken,
           tag: personification?.tag,
           pin: personification?.pin,
+          continueFromChatLogID: chatLog?.chatLogID,
           initialContextVars: {
             PATHNAME: window.location.pathname?.toUpperCase(),
             ROUTE:
               window.location.pathname?.split('/')?.pop()?.toUpperCase() || '',
-            ...(initialContextVars || {}),
+            ...((!chatLog
+              ? initialContextVars
+              : chatLog.lines[chatLog.lines.length - 1].contextVars) || {}),
           },
-          initialQuestion,
+          initialQuestion: chatLog ? undefined : initialQuestion,
           birthDate: birth,
           additionalInfo: {
             ...(additionalInfo || {}),
@@ -2549,36 +2392,94 @@ const MemoriWidget = ({
               additionalInfo?.loginToken ??
               authToken,
             language: getCultureCodeByLanguage(userLang),
+            timeZoneOffset: new Date().getTimezoneOffset().toString(),
           },
         });
 
         if (session?.dialogState) {
           // reset history
-          setHistory([]);
+          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,
+                  timestamp: l.timestamp,
+                  emitter: l.emitter,
+                  initial: i === 0,
+                } as Message)
+            );
 
-          translateDialogState(session.dialogState, userLang)
-            .then(ts => {
-              if (ts.emission) {
-                speak(ts.emission);
+            // 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('[CLICK_START] Error translating messages:', e);
               }
-            })
-            .finally(() => {
+            }
+
+            setHistory(translatedMessages);
+
+            translateDialogState(
+              session.dialogState,
+              userLang,
+              undefined,
+              true
+            ).finally(() => {
               setHasUserActivatedSpeak(true);
             });
+          }
+        } else if (session?.resultCode === 0) {
+          await onClickStart((session as any) || undefined);
         } else {
-          await onClickStart(session || undefined);
+          setLoading(false);
         }
 
         return;
-      } else if (initialSessionID) {
+      }
+      // Handle initial session
+      else if (initialSessionID) {
         // check if session is valid and not expired
         const { currentState, ...response } = await getSession(sessionID);
+
         if (response.resultCode !== 0 || !currentState) {
-          console.debug('session expired, opening new session');
           setGotErrorInOpening(true);
           setSessionId(undefined);
           setClickedStart(false);
-          await onClickStart();
+          await onClickStart(undefined, true);
           return;
         }
 
@@ -2586,75 +2487,19 @@ const MemoriWidget = ({
         setHistory([]);
 
         // date and place events
-        if (position) applyPosition(position, sessionID);
-        if (memori.needsDateTime)
+        if (position && memori.needsPosition) {
+          applyPosition(position, sessionID);
+        }
+        if (memori.needsDateTime) {
           sendDateChangedEvent({ sessionID: sessionID, state: currentState });
+        }
 
-        // checks engine state for current tag
-        // opening session would have already correct tag
-        // otherwise change tag to anonymous for test, giver for instruct, receiver if set
-
-        // test if current tag is giver on instruct
+        // Handle personification tag changes
         if (
-          instruct &&
-          memori.giverTag &&
-          currentDialogState?.currentTag !== memori.giverTag
-        ) {
-          try {
-            console.debug('change tag #0');
-            // reset tag
-            await changeTag(memori.engineMemoriID!, sessionID, '-');
-            // change tag to giver
-            const session = await changeTag(
-              memori.engineMemoriID!,
-              sessionID,
-              memori.giverTag,
-              memori.giverPIN
-            );
-
-            if (session && session.resultCode === 0) {
-              translateDialogState(session.currentState, userLang)
-                .then(ts => {
-                  if (ts.emission) {
-                    speak(ts.emission);
-                  }
-                })
-                .finally(() => {
-                  setHasUserActivatedSpeak(true);
-                });
-            } else {
-              console.error('session #1', session);
-              throw new Error('No session');
-            }
-          } catch (e) {
-            console.error('session #2', e);
-            reopenSession(
-              true,
-              memori?.secretToken,
-              undefined,
-              memori?.giverTag,
-              memori?.giverPIN,
-              {
-                PATHNAME: window.location.pathname?.toUpperCase(),
-                ROUTE:
-                  window.location.pathname?.split('/')?.pop()?.toUpperCase() ||
-                  '',
-                ...(initialContextVars || {}),
-              },
-              initialQuestion,
-              birth
-            ).then(() => {
-              setHasUserActivatedSpeak(true);
-            });
-          }
-        } else if (
-          // test if current tag is receiver on test as it is requested
-          !instruct &&
           personification &&
-          currentDialogState?.currentTag !== personification.tag
+          currentState.currentTag !== personification.tag
         ) {
           try {
-            console.debug('change tag #3');
             // reset tag
             await changeTag(memori.engineMemoriID!, sessionID, '-');
             // change tag to receiver
@@ -2666,21 +2511,11 @@ const MemoriWidget = ({
             );
 
             if (session && session.resultCode === 0) {
-              translateDialogState(session.currentState, userLang)
-                .then(ts => {
-                  if (ts.emission) {
-                    speak(ts.emission);
-                  }
-                })
-                .finally(() => {
-                  setHasUserActivatedSpeak(true);
-                });
+              await translateAndSpeak(session.currentState, userLang);
             } else {
-              console.error('session #4', session);
               throw new Error('No session');
             }
           } catch (e) {
-            console.error('session #5', e);
             reopenSession(
               true,
               memori?.secretToken,
@@ -2700,15 +2535,15 @@ const MemoriWidget = ({
               setHasUserActivatedSpeak(true);
             });
           }
-        } else if (
-          // test if current tag is anonymous on test without personification
-          // this is the default case with anonymous tag
-          !instruct &&
+        }
+        // Handle anonymous tag changes
+        else if (
           !personification &&
-          currentDialogState?.currentTag !== anonTag
+          currentState?.currentTag &&
+          currentState?.currentTag !== anonTag &&
+          currentState?.currentTag !== '-'
         ) {
           try {
-            console.debug('change tag #6');
             // reset tag
             await changeTag(memori.engineMemoriID!, sessionID, '-');
             // change tag to anonymous
@@ -2719,21 +2554,11 @@ const MemoriWidget = ({
             );
 
             if (session && session.resultCode === 0) {
-              translateDialogState(session.currentState, userLang)
-                .then(ts => {
-                  if (ts.emission) {
-                    speak(ts.emission);
-                  }
-                })
-                .finally(() => {
-                  setHasUserActivatedSpeak(true);
-                });
+              await translateAndSpeak(session.currentState, userLang);
             } else {
-              console.error('session #7', session);
               throw new Error('No session');
             }
           } catch (e) {
-            console.error('session #8', e);
             reopenSession(
               true,
               memori?.secretToken,
@@ -2753,41 +2578,120 @@ const MemoriWidget = ({
               setHasUserActivatedSpeak(true);
             });
           }
-        } else {
-          // no need to change tag
-          translateDialogState(currentState, userLang)
-            .then(ts => {
-              if (ts.emission) {
-                speak(ts.emission);
+        }
+        // No tag changes needed
+        else {
+          try {
+            const { chatLogs } = await getSessionChatLogs(sessionID, sessionID);
+
+            const messages = chatLogs?.[0]?.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,
+                  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 => ({
+                    ...m,
+                    originalText: m.text,
+                    text: (
+                      await getTranslation(m.text, userLang, language, baseUrl)
+                    ).text,
+                  }))
+                );
+              } catch (e) {
+                console.error('[CLICK_START] Error translating messages:', e);
               }
-            })
-            .finally(() => {
-              setHasUserActivatedSpeak(true);
+            }
+
+            setHistory(translatedMessages);
+          } catch (e) {
+            console.error('[CLICK_START] Error retrieving chat logs:', e);
+          }
+
+          if (
+            (!!translatedMessages?.length && translatedMessages.length > 1) ||
+            !initialQuestion
+          ) {
+            // we have a history, don't push message
+            await translateAndSpeak(
+              currentState,
+              userLang,
+              undefined,
+              // if empty history, pick current state emission
+              // otherwise, don't push message
+              !!translatedMessages?.length
+            );
+          } else {
+            // remove default initial message
+            translatedMessages = [];
+            setHistory([]);
+
+            setMemoriTyping(true);
+
+            // we have no chat history, we start by initial question
+            const response = await postTextEnteredEvent({
+              sessionId: sessionID,
+              text: initialQuestion,
             });
+
+            await translateAndSpeak(
+              response.currentState ?? currentState,
+              userLang,
+              undefined,
+              false
+            );
+          }
         }
 
         // date and place events
-        if (position) applyPosition(position, sessionID);
-        if (memori.needsDateTime)
+        if (position && memori.needsPosition) {
+          applyPosition(position, sessionID);
+        }
+        if (memori.needsDateTime) {
           sendDateChangedEvent({ sessionID: sessionID, state: currentState });
-      } else {
+        }
+      }
+      // Default case - just translate and activate
+      else {
         // reset history
         setHistory([]);
 
         // everything is fine, just translate dialog state and activate chat
-        translateDialogState(dialogState!, userLang)
-          .then(ts => {
-            if (ts.emission) {
-              speak(ts.emission);
-            }
-          })
-          .finally(() => {
-            setHasUserActivatedSpeak(true);
-          });
+        await translateAndSpeak(dialogState!, userLang);
       }
     },
     [memoriPwd, memori, memoriTokens, birthDate, sessionId, userLang, position]
   );
+
+  useEffect(() => {
+    // Don't auto-start for HIDDEN_CHAT layout - let the layout handle it
+    console.log('clickedStart', clickedStart);
+    console.log('autoStart', autoStart);
+    console.log('selectedLayout', selectedLayout);
+    if (!clickedStart && autoStart && selectedLayout !== 'HIDDEN_CHAT') {
+      onClickStart();
+    }
+  }, [clickedStart, autoStart, selectedLayout]);
+
   useEffect(() => {
     const targetNode =
       document.querySelector(`memori-client[memoriname="${memori.name}"]`) ||
@@ -2885,7 +2789,7 @@ const MemoriWidget = ({
       }
     } catch (e) {
       let err = e as Error;
-      console.error(err);
+      console.debug(err);
     }
   }, [tenant?.billingDelegation, deepThoughtEnabled]);
   useEffect(() => {
@@ -2894,13 +2798,34 @@ const MemoriWidget = ({
     }
   }, [tenant?.billingDelegation, deepThoughtEnabled]);
 
+  useEffect(() => {
+    const closeSession = () => {
+      if (sessionId) {
+        deleteSession(sessionId);
+      }
+    };
+
+    // delete session when the user closes the browser tab
+    window.addEventListener('beforeunload', closeSession);
+
+    return () => {
+      window.removeEventListener('beforeunload', closeSession);
+      closeSession();
+    };
+  }, [sessionId]);
+
   const showFullHistory =
     showOnlyLastMessages === undefined
-      ? layout !== 'TOTEM' && layout !== 'WEBSITE_ASSISTANT'
+      ? selectedLayout !== 'TOTEM' &&
+        selectedLayout !== 'WEBSITE_ASSISTANT' &&
+        selectedLayout !== 'HIDDEN_CHAT'
       : !showOnlyLastMessages;
 
   const headerProps: HeaderProps = {
-    memori,
+    memori: {
+      ...memori,
+      ownerUserID: memori.ownerUserID ?? ownerUserID ?? undefined,
+    },
     tenant,
     history,
     showShare: showShare ?? integrationConfig?.showShare ?? true,
@@ -2909,11 +2834,23 @@ const MemoriWidget = ({
     setShowSettingsDrawer,
     setShowKnownFactsDrawer,
     setShowExpertsDrawer,
-    showSpeaker: !!AZURE_COGNITIVE_SERVICES_TTS_KEY,
-    speakerMuted: muteSpeaker || speakerMuted,
+    enableAudio: defaultEnableAudio,
+    speakerMuted: speakerMuted ?? false,
     setSpeakerMuted: mute => {
-      speakerMuted = !!mute;
-      setMuteSpeaker(mute);
+      // If audio is disabled, force mute and don't allow unmuting
+      if (!(enableAudio ?? integrationConfig?.enableAudio ?? true)) {
+        mute = true;
+      }
+
+      toggleMute(mute);
+      let microphoneMode = getLocalConfig<string>(
+        'microphoneMode',
+        'HOLD_TO_TALK'
+      );
+      if (microphoneMode === 'CONTINUOUS' && mute) {
+        setContinuousSpeech(false);
+        setLocalConfig('microphoneMode', 'HOLD_TO_TALK');
+      }
       setLocalConfig('muteSpeaker', !!mute);
       if (mute) {
         stopAudio();
@@ -2925,16 +2862,20 @@ const MemoriWidget = ({
         source.connect(audioContext.destination);
       }
     },
-    showSettings,
+    setShowChatHistoryDrawer,
+    showSettings: showSettings ?? integrationConfig?.showSettings ?? true,
+    showChatHistory:
+      showChatHistory ?? integrationConfig?.showChatHistory ?? true,
     hasUserActivatedSpeak,
     showReload: selectedLayout === 'TOTEM',
     showClear,
     clearHistory: () => setHistory(h => h.slice(-1)),
-    showLogin,
+    showLogin: showLogin ?? memori.requireLoginToken,
     setShowLoginDrawer,
     loginToken,
     user,
     sessionID: sessionId,
+    baseUrl,
   };
 
   const avatarProps: AvatarProps = {
@@ -2946,32 +2887,38 @@ const MemoriWidget = ({
     avatar3dVisible,
     setAvatar3dVisible,
     hasUserActivatedSpeak,
-    isPlayingAudio: isPlayingAudio && !muteSpeaker,
+    isPlayingAudio:
+      isPlayingAudio &&
+      !speakerMuted &&
+      (enableAudio ?? integrationConfig?.enableAudio ?? true),
     loading: !!memoriTyping,
     baseUrl,
-    apiUrl,
+    apiUrl: client.constants.BACKEND_URL,
+    enablePositionControls,
+    setEnablePositionControls,
+    avatarType,
   };
 
   const startPanelProps: StartPanelProps = {
     memori,
     tenant: tenant,
-    gamificationLevel: gamificationLevel,
     language: language,
     userLang: userLang,
     setUserLang: setUserLang,
     baseUrl: baseUrl,
-    apiUrl: apiUrl,
+    apiUrl: client.constants.BACKEND_URL,
     position: position,
     openPositionDrawer: () => setShowPositionDrawer(true),
     integrationConfig: integrationConfig,
     instruct: instruct,
     sessionId: sessionId,
     clickedStart: clickedStart,
+    isMultilanguageEnabled: isMultilanguageEnabled,
     onClickStart: onClickStart,
-    initializeTTS: initializeTTS,
     isUserLoggedIn: !!loginToken && !!user?.userID,
+    hasInitialSession: !!initialSessionID,
     notEnoughCredits: needsCredits && !hasEnoughCredits,
-    showLogin,
+    showLogin: showLogin ?? memori.requireLoginToken,
     setShowLoginDrawer,
     user,
   };
@@ -2991,7 +2938,7 @@ const MemoriWidget = ({
         ? userLang
         : undefined,
     baseUrl,
-    apiUrl,
+    apiUrl: client.constants.BACKEND_URL,
     layout,
     memoriTyping,
     typingText,
@@ -3000,43 +2947,47 @@ const MemoriWidget = ({
     authToken:
       loginToken ?? userToken ?? additionalInfo?.loginToken ?? authToken,
     dialogState: currentDialogState,
-    setDialogState: setCurrentDialogState,
     pushMessage,
     simulateUserPrompt,
     showDates,
     showContextPerLine,
     showAIicon,
+    showUpload: enableUpload,
+    showReasoning: enableReasoning,
     showWhyThisAnswer,
+    showCopyButton,
+    showTranslationOriginal,
     client,
-    selectReceiverTag,
+    instruct,
     preview,
     sendOnEnter,
     setSendOnEnter,
     microphoneMode: continuousSpeech ? 'CONTINUOUS' : 'HOLD_TO_TALK',
     attachmentsMenuOpen,
     setAttachmentsMenuOpen,
-    instruct,
     showInputs,
-    showMicrophone: !!AZURE_COGNITIVE_SERVICES_TTS_KEY,
+    showMicrophone:
+      !!ttsProvider && (enableAudio ?? integrationConfig?.enableAudio ?? true),
+    showFunctionCache,
     userMessage,
     onChangeUserMessage,
-    sendMessage: (msg: string) => {
+    sendMessage: (msg: string, media?: (Medium & { type: string })[]) => {
       stopAudio();
-      stopListening();
-      sendMessage(msg);
+      stopRecording();
+      sendMessage(msg, media);
       setUserMessage('');
-      resetTranscript();
     },
-    stopListening: clearListening,
-    startListening,
+    stopListening: stopRecording,
+    startListening: startRecording,
     stopAudio,
-    resetTranscript,
-    listening,
+    listening: isListening,
+    setEnableFocusChatInput,
     isPlayingAudio,
     customMediaRenderer,
     user,
     userAvatar,
     experts,
+    useMathFormatting: applyMathFormatting,
   };
 
   const integrationBackground =
@@ -3055,17 +3006,6 @@ const MemoriWidget = ({
     <style dangerouslySetInnerHTML={{ __html: integrationStylesheet }} />
   ) : null;
 
-  const onChangeMode = (mode: 'instruct' | 'test') => {
-    setInstruct(mode === 'instruct');
-    setHasUserActivatedSpeak(false);
-    setClickedStart(false);
-  };
-  const changeModeProps: ChangeModeProps = {
-    canInstruct: !!memori.giverTag,
-    instruct: !!instruct,
-    onChangeMode,
-  };
-
   const poweredBy = (
     <PoweredBy
       tenant={tenant}
@@ -3085,6 +3025,10 @@ const MemoriWidget = ({
     ? FullPageLayout
     : selectedLayout === 'WEBSITE_ASSISTANT'
     ? WebsiteAssistantLayout
+    : selectedLayout === 'HIDDEN_CHAT'
+    ? HiddenChatLayout
+    : selectedLayout === 'ZOOMED_FULL_BODY'
+    ? ZoomedFullBodyLayout
     : FullPageLayout;
 
   return (
@@ -3092,14 +3036,15 @@ const MemoriWidget = ({
       className={cx(
         'memori',
         'memori-widget',
-        `memori-layout-${layout.toLowerCase()}`,
+        `memori-layout-${selectedLayout.toLowerCase()}`,
         `memori-controls-${controlsPosition.toLowerCase()}`,
         `memori--avatar-${integrationConfig?.avatar || 'default'}`,
         {
+          'memori--auto-start': autoStart,
           'memori--preview': preview,
           'memori--embed': embed,
           'memori--with-integration': integration,
-          'memori--with-speechkey': !!AZURE_COGNITIVE_SERVICES_TTS_KEY,
+          'memori--with-speechkey': !!ttsProvider,
           'memori--active': hasUserActivatedSpeak,
           'memori--hide-emissions': hideEmissions,
           'memori--has-active-session': !!sessionId,
@@ -3127,12 +3072,10 @@ const MemoriWidget = ({
         startPanelProps={startPanelProps}
         integrationStyle={integrationStyle}
         integrationBackground={integrationBackground}
-        ChangeMode={ChangeMode}
-        changeModeProps={changeModeProps}
         poweredBy={poweredBy}
+        autoStart={autoStart}
         sessionId={sessionId}
         hasUserActivatedSpeak={hasUserActivatedSpeak}
-        showInstruct={showInstruct}
         loading={loading}
       />
 
@@ -3158,8 +3101,8 @@ const MemoriWidget = ({
               !sessionId,
               values['password'],
               values['tokens'],
-              instruct ? memori.giverTag : personification?.tag,
-              instruct ? memori.giverPIN : personification?.pin,
+              personification?.tag,
+              personification?.pin,
               {
                 PATHNAME: window.location.pathname?.toUpperCase(),
                 ROUTE:
@@ -3172,7 +3115,14 @@ const MemoriWidget = ({
             )
               .then(state => {
                 setAuthModalState(null);
-                onClickStart(state || undefined);
+                // 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 || undefined);
+                }
               })
               .catch(() => {
                 setAuthModalState(null);
@@ -3199,8 +3149,8 @@ const MemoriWidget = ({
                 !sessionId,
                 memoriPassword || memoriPwd || memori?.secretToken,
                 memoriTokens,
-                instruct ? memori.giverTag : personification?.tag,
-                instruct ? memori.giverPIN : personification?.pin,
+                personification?.tag,
+                personification?.pin,
                 {
                   PATHNAME: window.location.pathname?.toUpperCase(),
                   ROUTE:
@@ -3243,7 +3193,35 @@ const MemoriWidget = ({
           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}
         />
       )}
 
@@ -3256,13 +3234,16 @@ const MemoriWidget = ({
           onClose={position => {
             if (position) applyPosition(position);
             setShowPositionDrawer(false);
+            if (autoStart) {
+              onClickStart();
+            }
           }}
         />
       )}
 
       {showKnownFactsDrawer && sessionId && (
         <KnownFacts
-          apiURL={apiUrl}
+          apiClient={client}
           memori={memori}
           sessionID={sessionId}
           visible={showKnownFactsDrawer}
@@ -3272,7 +3253,7 @@ const MemoriWidget = ({
 
       {showExpertsDrawer && !!experts && (
         <ExpertsDrawer
-          apiUrl={apiUrl}
+          apiUrl={client.constants.BACKEND_URL}
           baseUrl={baseUrl}
           tenant={tenant}
           experts={experts}
@@ -3281,10 +3262,10 @@ const MemoriWidget = ({
         />
       )}
 
-      {showLoginDrawer && tenant?.id && (
+      {showLoginDrawer && tenant?.name && (
         <LoginDrawer
           tenant={tenant}
-          apiUrl={apiUrl}
+          apiClient={client}
           open={!!showLoginDrawer}
           user={user}
           loginToken={loginToken}
@@ -3309,6 +3290,20 @@ const MemoriWidget = ({
           }}
         />
       )}
+
+      {error && (
+        <Alert
+          open={!!error}
+          onClose={() => {
+            setError(null);
+            //opens up the allow media of the browser
+            window.open('chrome://settings/content/autoplay', '_blank');
+          }}
+          title="Error"
+          description={error.message}
+          type="error"
+        />
+      )}
     </div>
   );
 };