@memori.ai/memori-react 7.28.1 → 7.29.0

package/src/components/Header/__snapshots__/Header.test.tsx.snap

@@ -5,6 +5,34 @@ exports[`renders Header for board of experts unchanged 1`] = `
   <div
     class="memori-header"
   >
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--chat-history"
+      title="chatHistory"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          fill="none"
+          height="800"
+          viewBox="0 0 24 24"
+          width="800"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 8v4l2.5 2.5"
+            stroke="#ffff"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          />
+          <path
+            d="m5.604 5.604-.53-.53.53.53ZM4.338 6.871l-.75.003a.75.75 0 0 0 .746.747l.004-.75Zm2.542.762a.75.75 0 1 0 .007-1.5l-.007 1.5ZM5.075 4.321a.75.75 0 0 0-1.5.008l1.5-.008ZM3.75 12a.75.75 0 0 0-1.5 0h1.5Zm13.125 8.445a.75.75 0 1 0-.75-1.298l.75 1.298Zm2.272-4.32a.75.75 0 1 0 1.298.75l-1.298-.75ZM5.14 5.07a.75.75 0 1 0 1.056 1.066L5.14 5.071Zm13.722.067c-3.82-3.82-9.993-3.859-13.788-.064l1.06 1.06c3.2-3.199 8.423-3.18 11.668.065l1.06-1.061ZM5.074 5.074 3.808 6.34l1.06 1.06 1.267-1.265-1.061-1.061Zm-.74 2.547 2.546.012.007-1.5-2.545-.012-.008 1.5Zm.754-.754L5.075 4.32l-1.5.008.013 2.545 1.5-.007ZM12 3.75A8.25 8.25 0 0 1 20.25 12h1.5c0-5.385-4.365-9.75-9.75-9.75v1.5Zm0 16.5A8.25 8.25 0 0 1 3.75 12h-1.5c0 5.385 4.365 9.75 9.75 9.75v-1.5Zm4.125-1.103A8.209 8.209 0 0 1 12 20.25v1.5c1.775 0 3.44-.475 4.875-1.305l-.75-1.298ZM20.25 12a8.209 8.209 0 0 1-1.103 4.125l1.298.75A9.708 9.708 0 0 0 21.75 12h-1.5ZM6.196 6.137A8.221 8.221 0 0 1 12 3.75v-1.5a9.721 9.721 0 0 0-6.86 2.821l1.056 1.066Z"
+            fill="#ffff"
+          />
+        </svg>
+      </span>
+    </button>
     <button
       class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--experts"
       disabled=""
@@ -111,6 +139,34 @@ exports[`renders Header for board of experts with session open unchanged 1`] = `
   <div
     class="memori-header"
   >
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--chat-history"
+      title="chatHistory"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          fill="none"
+          height="800"
+          viewBox="0 0 24 24"
+          width="800"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 8v4l2.5 2.5"
+            stroke="#ffff"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          />
+          <path
+            d="m5.604 5.604-.53-.53.53.53ZM4.338 6.871l-.75.003a.75.75 0 0 0 .746.747l.004-.75Zm2.542.762a.75.75 0 1 0 .007-1.5l-.007 1.5ZM5.075 4.321a.75.75 0 0 0-1.5.008l1.5-.008ZM3.75 12a.75.75 0 0 0-1.5 0h1.5Zm13.125 8.445a.75.75 0 1 0-.75-1.298l.75 1.298Zm2.272-4.32a.75.75 0 1 0 1.298.75l-1.298-.75ZM5.14 5.07a.75.75 0 1 0 1.056 1.066L5.14 5.071Zm13.722.067c-3.82-3.82-9.993-3.859-13.788-.064l1.06 1.06c3.2-3.199 8.423-3.18 11.668.065l1.06-1.061ZM5.074 5.074 3.808 6.34l1.06 1.06 1.267-1.265-1.061-1.061Zm-.74 2.547 2.546.012.007-1.5-2.545-.012-.008 1.5Zm.754-.754L5.075 4.32l-1.5.008.013 2.545 1.5-.007ZM12 3.75A8.25 8.25 0 0 1 20.25 12h1.5c0-5.385-4.365-9.75-9.75-9.75v1.5Zm0 16.5A8.25 8.25 0 0 1 3.75 12h-1.5c0 5.385 4.365 9.75 9.75 9.75v-1.5Zm4.125-1.103A8.209 8.209 0 0 1 12 20.25v1.5c1.775 0 3.44-.475 4.875-1.305l-.75-1.298ZM20.25 12a8.209 8.209 0 0 1-1.103 4.125l1.298.75A9.708 9.708 0 0 0 21.75 12h-1.5ZM6.196 6.137A8.221 8.221 0 0 1 12 3.75v-1.5a9.721 9.721 0 0 0-6.86 2.821l1.056 1.066Z"
+            fill="#ffff"
+          />
+        </svg>
+      </span>
+    </button>
     <button
       class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--experts"
       title="widget.showExpertsInTheBoard"
@@ -450,6 +506,34 @@ exports[`renders Header with deep thought and session open unchanged 1`] = `
   <div
     class="memori-header"
   >
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--chat-history"
+      title="chatHistory"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          fill="none"
+          height="800"
+          viewBox="0 0 24 24"
+          width="800"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 8v4l2.5 2.5"
+            stroke="#ffff"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          />
+          <path
+            d="m5.604 5.604-.53-.53.53.53ZM4.338 6.871l-.75.003a.75.75 0 0 0 .746.747l.004-.75Zm2.542.762a.75.75 0 1 0 .007-1.5l-.007 1.5ZM5.075 4.321a.75.75 0 0 0-1.5.008l1.5-.008ZM3.75 12a.75.75 0 0 0-1.5 0h1.5Zm13.125 8.445a.75.75 0 1 0-.75-1.298l.75 1.298Zm2.272-4.32a.75.75 0 1 0 1.298.75l-1.298-.75ZM5.14 5.07a.75.75 0 1 0 1.056 1.066L5.14 5.071Zm13.722.067c-3.82-3.82-9.993-3.859-13.788-.064l1.06 1.06c3.2-3.199 8.423-3.18 11.668.065l1.06-1.061ZM5.074 5.074 3.808 6.34l1.06 1.06 1.267-1.265-1.061-1.061Zm-.74 2.547 2.546.012.007-1.5-2.545-.012-.008 1.5Zm.754-.754L5.075 4.32l-1.5.008.013 2.545 1.5-.007ZM12 3.75A8.25 8.25 0 0 1 20.25 12h1.5c0-5.385-4.365-9.75-9.75-9.75v1.5Zm0 16.5A8.25 8.25 0 0 1 3.75 12h-1.5c0 5.385 4.365 9.75 9.75 9.75v-1.5Zm4.125-1.103A8.209 8.209 0 0 1 12 20.25v1.5c1.775 0 3.44-.475 4.875-1.305l-.75-1.298ZM20.25 12a8.209 8.209 0 0 1-1.103 4.125l1.298.75A9.708 9.708 0 0 0 21.75 12h-1.5ZM6.196 6.137A8.221 8.221 0 0 1 12 3.75v-1.5a9.721 9.721 0 0 0-6.86 2.821l1.056 1.066Z"
+            fill="#ffff"
+          />
+        </svg>
+      </span>
+    </button>
     <button
       class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker"
       title="widget.sound"
@@ -528,6 +612,34 @@ exports[`renders Header with deep thought logged but without permission flag unc
   <div
     class="memori-header"
   >
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--chat-history"
+      title="chatHistory"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          fill="none"
+          height="800"
+          viewBox="0 0 24 24"
+          width="800"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 8v4l2.5 2.5"
+            stroke="#ffff"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          />
+          <path
+            d="m5.604 5.604-.53-.53.53.53ZM4.338 6.871l-.75.003a.75.75 0 0 0 .746.747l.004-.75Zm2.542.762a.75.75 0 1 0 .007-1.5l-.007 1.5ZM5.075 4.321a.75.75 0 0 0-1.5.008l1.5-.008ZM3.75 12a.75.75 0 0 0-1.5 0h1.5Zm13.125 8.445a.75.75 0 1 0-.75-1.298l.75 1.298Zm2.272-4.32a.75.75 0 1 0 1.298.75l-1.298-.75ZM5.14 5.07a.75.75 0 1 0 1.056 1.066L5.14 5.071Zm13.722.067c-3.82-3.82-9.993-3.859-13.788-.064l1.06 1.06c3.2-3.199 8.423-3.18 11.668.065l1.06-1.061ZM5.074 5.074 3.808 6.34l1.06 1.06 1.267-1.265-1.061-1.061Zm-.74 2.547 2.546.012.007-1.5-2.545-.012-.008 1.5Zm.754-.754L5.075 4.32l-1.5.008.013 2.545 1.5-.007ZM12 3.75A8.25 8.25 0 0 1 20.25 12h1.5c0-5.385-4.365-9.75-9.75-9.75v1.5Zm0 16.5A8.25 8.25 0 0 1 3.75 12h-1.5c0 5.385 4.365 9.75 9.75 9.75v-1.5Zm4.125-1.103A8.209 8.209 0 0 1 12 20.25v1.5c1.775 0 3.44-.475 4.875-1.305l-.75-1.298ZM20.25 12a8.209 8.209 0 0 1-1.103 4.125l1.298.75A9.708 9.708 0 0 0 21.75 12h-1.5ZM6.196 6.137A8.221 8.221 0 0 1 12 3.75v-1.5a9.721 9.721 0 0 0-6.86 2.821l1.056 1.066Z"
+            fill="#ffff"
+          />
+        </svg>
+      </span>
+    </button>
     <button
       class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--speaker"
       title="widget.sound"
@@ -606,6 +718,34 @@ exports[`renders Header with deep thought logged with permission flag unchanged
   <div
     class="memori-header"
   >
+    <button
+      class="memori-button memori-button--primary memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--chat-history"
+      title="chatHistory"
+    >
+      <span
+        class="memori-button--icon"
+      >
+        <svg
+          fill="none"
+          height="800"
+          viewBox="0 0 24 24"
+          width="800"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 8v4l2.5 2.5"
+            stroke="#ffff"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+          />
+          <path
+            d="m5.604 5.604-.53-.53.53.53ZM4.338 6.871l-.75.003a.75.75 0 0 0 .746.747l.004-.75Zm2.542.762a.75.75 0 1 0 .007-1.5l-.007 1.5ZM5.075 4.321a.75.75 0 0 0-1.5.008l1.5-.008ZM3.75 12a.75.75 0 0 0-1.5 0h1.5Zm13.125 8.445a.75.75 0 1 0-.75-1.298l.75 1.298Zm2.272-4.32a.75.75 0 1 0 1.298.75l-1.298-.75ZM5.14 5.07a.75.75 0 1 0 1.056 1.066L5.14 5.071Zm13.722.067c-3.82-3.82-9.993-3.859-13.788-.064l1.06 1.06c3.2-3.199 8.423-3.18 11.668.065l1.06-1.061ZM5.074 5.074 3.808 6.34l1.06 1.06 1.267-1.265-1.061-1.061Zm-.74 2.547 2.546.012.007-1.5-2.545-.012-.008 1.5Zm.754-.754L5.075 4.32l-1.5.008.013 2.545 1.5-.007ZM12 3.75A8.25 8.25 0 0 1 20.25 12h1.5c0-5.385-4.365-9.75-9.75-9.75v1.5Zm0 16.5A8.25 8.25 0 0 1 3.75 12h-1.5c0 5.385 4.365 9.75 9.75 9.75v-1.5Zm4.125-1.103A8.209 8.209 0 0 1 12 20.25v1.5c1.775 0 3.44-.475 4.875-1.305l-.75-1.298ZM20.25 12a8.209 8.209 0 0 1-1.103 4.125l1.298.75A9.708 9.708 0 0 0 21.75 12h-1.5ZM6.196 6.137A8.221 8.221 0 0 1 12 3.75v-1.5a9.721 9.721 0 0 0-6.86 2.821l1.056 1.066Z"
+            fill="#ffff"
+          />
+        </svg>
+      </span>
+    </button>
     <button
       class="memori-button memori-button--circle memori-button--padded memori-button--icon-only memori-header--button memori-header--button--knownfacts"
       disabled=""

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -14,6 +14,8 @@ import {
   User,
   ExpertReference,
   ResponseSpec,
+  ChatLog,
+  ChatLogLine,
 } from '@memori.ai/memori-api-client/src/types';
 import {
   SpeakerAudioDestination,
@@ -87,6 +89,7 @@ import {
 import { getErrori18nKey } from '../../helpers/error';
 import { getCredits } from '../../helpers/credits';
 import { useViseme } from '../../context/visemeContext';
+import ChatHistoryDrawer from '../ChatHistoryDrawer/ChatHistory';
 
 // Widget utilities and helpers
 const getMemoriState = (integrationId?: string): object | null => {
@@ -384,6 +387,7 @@ export interface Props {
   showTypingText?: boolean;
   showLogin?: boolean;
   showUpload?: boolean;
+  showChatHistory?: boolean;
   preview?: boolean;
   embed?: boolean;
   height?: number | string;
@@ -442,11 +446,12 @@ const MemoriWidget = ({
   showLogin = false,
   showUpload,
   showOnlyLastMessages,
+  showChatHistory,
   height = '100vh',
   secret,
   baseUrl = 'https://aisuru.com',
-  apiURL = 'https://backend.memori.ai',
-  engineURL = 'https://engine.memori.ai',
+  apiURL = 'https://backend-staging.memori.ai',
+  engineURL = 'https://engine-staging.memori.ai',
   initialContextVars,
   initialQuestion,
   ogImage,
@@ -584,6 +589,7 @@ const MemoriWidget = ({
     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(
@@ -744,6 +750,9 @@ 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
@@ -810,16 +819,31 @@ const MemoriWidget = ({
         msg = translation.text;
       }
 
-      const findMediaDocument = media?.find(m => !m.mediumID && m.properties?.isAttachedFile);
+      const findMediaDocument = media?.find(
+        m => !m.mediumID && m.properties?.isAttachedFile
+      );
       if (findMediaDocument) {
         msg = msg + ' ' + findMediaDocument.content;
       }
 
+      // 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
@@ -1447,6 +1471,136 @@ const MemoriWidget = ({
     return null;
   };
 
+  const [chatLogs, setChatLogs] = useState<any[]>([]);
+  const resumeSession = async (
+    chatLog: ChatLog,
+    questionsAndAnswers: { question: string; answer: string }[],
+    initialContextVars?: { [key: string]: string },
+    initialQuestion?: string,
+    birthDate?: string
+  ) => {
+    // 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 {
+      // 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,
@@ -2878,10 +3032,13 @@ const MemoriWidget = ({
   const onClickStart = useCallback(
     async (
       session?: { dialogState: DialogState; sessionID: string },
-      initialSessionExpired = false
+      initialSessionExpired = false,
+      chatLog?: ChatLog
     ) => {
-      const sessionID = session?.sessionID || sessionId;
-      const dialogState = session?.dialogState || currentDialogState;
+      const sessionID = chatLog ? undefined : session?.sessionID || sessionId;
+      const dialogState = chatLog
+        ? undefined
+        : session?.dialogState || currentDialogState;
       setClickedStart(true);
 
       let translatedMessages: Message[] = [];
@@ -2951,13 +3108,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 || {}),
@@ -2974,18 +3134,71 @@ const MemoriWidget = ({
         if (session?.dialogState) {
           // console.log('[CLICK_START] Got new session with dialog state');
           // reset history
-          setHistory([]);
+          if (!chatLog) {
+            setHistory([]);
 
-          translateDialogState(session.dialogState, userLang)
-            .then(ts => {
-              let text = ts.translatedEmission || ts.emission;
-              if (text) {
-                speak(text);
+            translateDialogState(session.dialogState, userLang)
+              .then(ts => {
+                let text = ts.translatedEmission || ts.emission;
+                if (text) {
+                  speak(text);
+                }
+              })
+              .finally(() => {
+                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)
+            );
+
+            // we dont remove the last one as it is the current state
+            translatedMessages = messages ?? [];
+            if (
+              language.toUpperCase() !== userLang.toUpperCase() &&
+              isMultilanguageEnabled
+            ) {
+              try {
+                console.debug('[CLICK_START] Translating messages');
+                translatedMessages = await Promise.all(
+                  messages.map(async m => ({
+                    ...m,
+                    originalText: m.text,
+                    text: (
+                      await getTranslation(m.text, userLang, language, baseUrl)
+                    ).text,
+                  }))
+                );
+                // console.log('[CLICK_START] Translated messages:', translatedMessages);
+              } catch (e) {
+                // console.log('[CLICK_START] Error translating messages:', e);
               }
-            })
-            .finally(() => {
+            }
+
+            setHistory(translatedMessages);
+
+            translateDialogState(
+              session.dialogState,
+              userLang,
+              undefined,
+              true
+            ).finally(() => {
               setHasUserActivatedSpeak(true);
             });
+          }
         } else if (session?.resultCode === 0) {
           // console.log('[CLICK_START] Retrying with session:', session);
           await onClickStart((session as any) || undefined);
@@ -3439,7 +3652,10 @@ const MemoriWidget = ({
         source.connect(audioContext.destination);
       }
     },
+    setShowChatHistoryDrawer,
     showSettings: showSettings ?? integrationConfig?.showSettings ?? true,
+    showChatHistory:
+      showChatHistory ?? integrationConfig?.showChatHistory ?? true,
     hasUserActivatedSpeak,
     showReload: selectedLayout === 'TOTEM',
     showClear,
@@ -3773,6 +3989,23 @@ const MemoriWidget = ({
         />
       )}
 
+      {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}
+          apiUrl={client.constants.BACKEND_URL}
+        />
+      )}
+
       {showPositionDrawer && (
         <PositionDrawer
           memori={memori}

package/src/components/StartPanel/StartPanel.css

@@ -96,6 +96,26 @@
     display: block;
 }
 
+.memori--start-privacy-explanation {
+    color: var(--memori-text-color, rgba(0, 0, 0, 0.85));
+    font-size: 0.85em;
+    font-style: italic;
+    opacity: 0.85;
+}
+
+.memori--start-privacy-explanation-container {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.memori--start-privacy-explanation-icon {
+    width: 1.2rem;
+    height: 1.2rem;
+    align-self: center;
+    margin-left: 0.5rem;
+}
+
 .memori--translation-toggle {
     height: auto;
     padding-right: 0;
@@ -220,27 +240,6 @@
     text-decoration: underline;
 }
 
-.memori--start-privacy-explanation-container {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-}
-
-.memori--start-privacy-explanation {
-    color: var(--memori-text-color, rgba(0, 0, 0, 0.85));
-    font-size: 0.85em;
-    font-style: italic;
-    opacity: 0.85;
-}
-
-.memori--start-privacy-explanation-icon {
-    display: flex;
-    width: 1.2rem;
-    height: 1.2rem;
-    align-self: center;
-    margin-left: 0.5rem;
-}
-
 .memori--privacy-tooltip-content {
     text-align: left;
 }

package/src/components/StartPanel/StartPanel.tsx

@@ -80,6 +80,7 @@ const StartPanel: React.FC<Props> = ({
   const [translatedDescription, setTranslatedDescription] = useState(
     memori.description
   );
+  
   const [showTranslation, setShowTranslation] = useState(true);
   const toggleTranslations = () => {
     setShowTranslation(show => !show);

package/src/components/VenueWidget/VenueWidget.css

@@ -139,6 +139,13 @@ li.memori--venue-widget-search--option--active {
     background-color: #f7fafc;
 }
 
+.memori--venue-widget-search--option-centered {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+
 .memori--venue--widget__place-name {
     margin: 0 0 1rem;
 }

package/src/components/VenueWidget/VenueWidget.tsx

@@ -292,14 +292,14 @@ const VenueWidget = ({
                       <Combobox.Options className="memori--venue-widget-search--options">
                         {fetching ? (
                           <Spin spinning>
-                            <center className="memori--venue-widget-search--option">
+                            <div className="memori--venue-widget-search--option memori--venue-widget-search--option-centered">
                               {t('loading')}...
-                            </center>
+                            </div>
                           </Spin>
                         ) : suggestions.length === 0 && query !== '' ? (
-                          <center className="memori--venue-widget-search--option">
+                          <div className="memori--venue-widget-search--option memori--venue-widget-search--option-centered">
                             {t('nothingFound')}
-                          </center>
+                          </div>
                         ) : (
                           suggestions?.map(s => (
                             <Combobox.Option

package/src/components/icons/Chat.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const ChatRound = ({
+  className,
+  title,
+}: {
+  className?: string;
+  title?: string;
+}) => (
+  <svg
+    {...(!title ? { 'aria-hidden': 'true' } : {})}
+    focusable="false"
+    width="24"
+    height="24"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    aria-label={title}
+  >
+    <path
+      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 13.5997 2.37562 15.1116 3.04346 16.4525C3.22094 16.8088 3.28001 17.2161 3.17712 17.6006L2.58151 19.8267C2.32295 20.793 3.20701 21.677 4.17335 21.4185L6.39939 20.8229C6.78393 20.72 7.19121 20.7791 7.54753 20.9565C8.88837 21.6244 10.4003 22 12 22Z"
+      stroke="currentColor"
+      stroke-width="1.5"
+    />
+  </svg>
+);
+
+export default ChatRound;