@memori.ai/memori-react 8.11.0 → 8.13.0

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -323,14 +323,18 @@ declare global {
     typeBatchMessages: typeof typeBatchMessages;
     MemoriArtifactAPI?: {
       openArtifact: (artifact: ArtifactData) => void;
-      createAndOpenArtifact: (content: string, mimeType?: string, title?: string) => void;
+      createAndOpenArtifact: (
+        content: string,
+        mimeType?: string,
+        title?: string
+      ) => void;
       createFromOutputElement: (outputElement: HTMLOutputElement) => string;
       closeArtifact: () => void;
       toggleFullscreen: () => void;
-      getState: () => { 
-        currentArtifact: ArtifactData | null; 
-        isDrawerOpen: boolean; 
-        isFullscreen: boolean 
+      getState: () => {
+        currentArtifact: ArtifactData | null;
+        isDrawerOpen: boolean;
+        isFullscreen: boolean;
       };
     };
   }
@@ -915,7 +919,7 @@ const MemoriWidget = ({
         setHistory(h => [...h.slice(0, h.length - 1)]);
 
         reopenSession(
-          false,
+          true,
           memoriPwd || memori.secretToken,
           memoriTokens,
           undefined,
@@ -926,7 +930,12 @@ const MemoriWidget = ({
             ROUTE: window.location.pathname?.split('/')?.pop() || '',
             ...(initialContextVars || {}),
           },
-          initialQuestion
+          initialQuestion,
+          undefined,
+          undefined,
+          undefined,
+          undefined,
+          true // isSessionExpired
         ).then(state => {
           console.info('session timeout');
           if (state?.sessionID) {
@@ -935,8 +944,21 @@ const MemoriWidget = ({
             }, 500);
           }
         });
+      } else if (response.resultCode === 500 && response.resultMessage) {
+        setHistory(h => [...h, {
+          text: 'Error: ' + response.resultMessage,
+          emitter: 'system',
+          fromUser: false,
+          initial: false,
+          contextVars: {},
+          date: new Date().toISOString(),
+        }]);
+      } else {
+        console.warn('[SEND_MESSAGE]', response);
+        return Promise.reject(response);
       }
     } catch (error) {
+      console.log('error', error);
       console.error(error);
       gotError = true;
 
@@ -1283,9 +1305,13 @@ const MemoriWidget = ({
         tag: params.tag ?? personification?.tag,
         pin: params.pin ?? personification?.pin,
         additionalInfo: {
-          ...(additionalInfo || {}),
+          ...(params.additionalInfo || additionalInfo || {}),
           loginToken:
-            userToken ?? loginToken ?? additionalInfo?.loginToken ?? authToken,
+            userToken ??
+            loginToken ??
+            params.additionalInfo?.loginToken ??
+            additionalInfo?.loginToken ??
+            authToken,
           language: getCultureCodeByLanguage(userLang),
           referral: referral,
           timeZoneOffset: new Date().getTimezoneOffset().toString(),
@@ -1379,19 +1405,12 @@ const MemoriWidget = ({
     pin?: string,
     initialContextVars?: { [key: string]: string },
     initialQuestion?: string,
-    birthDate?: string
+    birthDate?: string,
+    additionalInfoProp?: { [key: string]: string | undefined },
+    continueFromChatLogID?: string,
+    continueFromSessionID?: string,
+    isSessionExpired?: boolean
   ) => {
-    // 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);
 
@@ -1444,6 +1463,8 @@ const MemoriWidget = ({
         recoveryTokens: recoveryTokens || memoriTokens,
         tag: tag ?? personification?.tag,
         pin: pin ?? personification?.pin,
+        continueFromChatLogID: continueFromChatLogID,
+        continueFromSessionID: continueFromSessionID,
         initialContextVars: {
           LANG: userLang,
           PATHNAME: window.location.pathname,
@@ -1453,9 +1474,13 @@ const MemoriWidget = ({
         initialQuestion,
         birthDate: userBirthDate,
         additionalInfo: {
-          ...(additionalInfo || {}),
+          ...(additionalInfoProp || additionalInfo || {}),
           loginToken:
-            userToken ?? loginToken ?? additionalInfo?.loginToken ?? authToken,
+            userToken ??
+            loginToken ??
+            additionalInfoProp?.loginToken ??
+            additionalInfo?.loginToken ??
+            authToken,
           language: getCultureCodeByLanguage(userLang),
           referral: referral,
           timeZoneOffset: new Date().getTimezoneOffset().toString(),
@@ -1464,7 +1489,10 @@ const MemoriWidget = ({
 
       // Handle successful session initialization
       if (sessionID && currentState && response.resultCode === 0) {
-        // console.log('[REOPEN_SESSION] Session initialized successfully:', sessionID);
+        console.log(
+          '[REOPEN_SESSION] Session initialized successfully:',
+          sessionID
+        );
         setSessionId(sessionID);
 
         // Update dialog state and history if requested
@@ -1473,7 +1501,19 @@ const MemoriWidget = ({
           setCurrentDialogState(currentState);
 
           if (currentState.emission) {
-            // console.log('[REOPEN_SESSION] Processing emission:', currentState.emission);
+            console.log(
+              '[REOPEN_SESSION] Processing emission:',
+              currentState.emission
+            );
+            // Determine initial status message based on context
+            // Show status message only if session expired and there's existing history
+            const initialStatus =
+              isSessionExpired && history.length > 1
+                ? 'Session Expired, reopening session'
+                : history.length <= 1
+                ? true
+                : undefined;
+
             // Set initial message or append to existing history
             history.length <= 1
               ? setHistory([
@@ -1482,7 +1522,9 @@ const MemoriWidget = ({
                     emitter: currentState.emitter,
                     media: currentState.emittedMedia ?? currentState.media,
                     fromUser: false,
-                    initial: true,
+                    initial: (initialStatus === true
+                      ? true
+                      : initialStatus || undefined) as any,
                     contextVars: currentState.contextVars,
                     date: currentState.currentDate,
                     placeName: currentState.currentPlaceName,
@@ -1498,7 +1540,9 @@ const MemoriWidget = ({
                   emitter: currentState.emitter,
                   media: currentState.emittedMedia ?? currentState.media,
                   fromUser: false,
-                  initial: true,
+                  initial: (initialStatus === true
+                    ? true
+                    : initialStatus || undefined) as any,
                   contextVars: currentState.contextVars,
                   date: currentState.currentDate,
                   placeName: currentState.currentPlaceName,
@@ -2551,6 +2595,7 @@ const MemoriWidget = ({
         // No tag changes needed
         else {
           try {
+            //This is the session id of the session that was opened before the current session
             const { chatLogs } = await getSessionChatLogs(
               sessionID!,
               sessionID!
@@ -2627,6 +2672,20 @@ const MemoriWidget = ({
               text: initialQuestion,
             });
 
+            // Handle 500 error from TextEnteredEvent
+            if (response.resultCode === 500 && response.resultMessage) {
+              setHistory(h => [...h, {
+                text: 'Error: ' + response.resultMessage,
+                emitter: 'system',
+                fromUser: false,
+                initial: false,
+                contextVars: {},
+                date: new Date().toISOString(),
+              }]);
+              setMemoriTyping(false);
+              return;
+            }
+
             await translateAndSpeak(
               response.currentState ?? currentState,
               userLang,
@@ -3049,16 +3108,21 @@ const MemoriWidget = ({
         loading={loading}
       />
 
-      <ArtifactAPIBridge pushMessage={(message: Message) => {
-        setHistory(history => {
-          if (!history.length) return history;
-          const lastMessage = history[history.length - 1];
-          if (!lastMessage || lastMessage.fromUser) return history;
-          // Create a new message object with the updated text
-          const updatedLastMessage = { ...lastMessage, text: lastMessage.text + message.text };
-          return [...history.slice(0, -1), updatedLastMessage];
-        });
-      }} />
+      <ArtifactAPIBridge
+        pushMessage={(message: Message) => {
+          setHistory(history => {
+            if (!history.length) return history;
+            const lastMessage = history[history.length - 1];
+            if (!lastMessage || lastMessage.fromUser) return history;
+            // Create a new message object with the updated text
+            const updatedLastMessage = {
+              ...lastMessage,
+              text: lastMessage.text + message.text,
+            };
+            return [...history.slice(0, -1), updatedLastMessage];
+          });
+        }}
+      />
 
       <audio
         id="memori-audio"
@@ -3073,12 +3137,12 @@ const MemoriWidget = ({
           openModal={!!authModalState}
           setPwdOrTokens={setAuthModalState}
           showTokens={memori.privacyType === 'SECRET'}
-          onFinish={async (values: any) => {
+          onFinish={(values: any) => {
             if (values['password']) setMemoriPwd(values['password']);
             if (values['password']) memoriPassword = values['password'];
             if (values['tokens']) setMemoriTokens(values['tokens']);
 
-            reopenSession(
+            return reopenSession(
               !sessionId,
               values['password'],
               values['tokens'],
@@ -3096,6 +3160,10 @@ const MemoriWidget = ({
               birthDate
             )
               .then(state => {
+                if (!state?.sessionID) {
+                  throw new Error('AUTH_FAILED');
+                }
+
                 setAuthModalState(null);
                 // If we got a valid state from reopenSession, don't call onClickStart again
                 // to avoid duplicate snippet execution
@@ -3103,12 +3171,17 @@ const MemoriWidget = ({
                   setHasUserActivatedSpeak(true);
                 } else {
                   // Only call onClickStart if reopenSession didn't return a valid state
-                  onClickStart(state || undefined);
+                  onClickStart(state);
                 }
               })
-              .catch(() => {
-                setAuthModalState(null);
-                setGotErrorInOpening(true);
+              .catch(error => {
+                if (
+                  !(error instanceof Error) ||
+                  error.message !== 'AUTH_FAILED'
+                ) {
+                  setGotErrorInOpening(true);
+                }
+                throw error;
               });
           }}
           minimumNumberOfRecoveryTokens={
@@ -3254,16 +3327,67 @@ const MemoriWidget = ({
           loginToken={loginToken}
           onClose={() => setShowLoginDrawer(false)}
           onLogin={(user, token) => {
-            setUser(user);
-            setLoginToken(token);
-            userToken = token;
-            setShowLoginDrawer(false);
-            setLocalConfig('loginToken', token);
+            //The user is logged in, so we need to set open a new session with the new token
+            reopenSession(
+              false,
+              memoriPassword || memoriPwd || memori?.secretToken,
+              [],
+              personification?.tag,
+              personification?.pin,
+              {
+                LANG: userLang,
+                PATHNAME: window.location.pathname?.toUpperCase(),
+                ROUTE:
+                  window.location.pathname?.split('/')?.pop()?.toUpperCase() ||
+                  '',
+                ...(initialContextVars || {}),
+              },
+              undefined, // Don't send initialQuestion after login, only show the login status chip
+              birthDate,
+              { loginToken: token } as any,
+              undefined,
+              sessionId
+            ).then(state => {
+              setShowLoginDrawer(false);
+              setUser(user);
+              setLoginToken(token);
+              userToken = token;
+              setLocalConfig('loginToken', token);
+              // Push a message with initial status to show status message when a new session is created after login
+              if (
+                state?.sessionID &&
+                state.sessionID !== sessionId &&
+                state?.dialogState
+              ) {
+                // Push a message with initial status message showing successful login
+                // Only show the chip component, not the emission text
+                const username = user?.userName || t('login.user');
+                pushMessage({
+                  text: '', // Empty text so only the chip is visible
+                  emitter: state.dialogState.emitter,
+                  media:
+                    state.dialogState.emittedMedia ??
+                    state.dialogState.media ??
+                    [],
+                  fromUser: false,
+                  initial: t('login.successfullyLoggedIn', { username }) as any,
+                  contextVars: state.dialogState.contextVars,
+                  date: state.dialogState.currentDate,
+                  placeName: state.dialogState.currentPlaceName,
+                  placeLatitude: state.dialogState.currentLatitude,
+                  placeLongitude: state.dialogState.currentLongitude,
+                  placeUncertaintyKm: state.dialogState.currentUncertaintyKm,
+                  tag: state.dialogState.currentTag,
+                  memoryTags: state.dialogState.memoryTags,
+                });
+                // Update the dialog state so the UI reflects the new session
+                setCurrentDialogState(state.dialogState);
+              }
+            });
           }}
           setUser={setUser}
           onLogout={() => {
             if (!loginToken) return;
-
             client.backend.pwlUserLogout(loginToken).then(() => {
               setShowLoginDrawer(false);
               setUser(undefined);

package/src/components/MicrophoneButton/MicrophoneButton.css

@@ -26,7 +26,7 @@
 }
 
 .memori-chat-inputs--mic svg {
-    color: var(--memori-primary-text, #fff);
+    color: var(--memori-primary, #fff);
     font-size: 1em;
     -webkit-user-select: none;
     user-select: none;
@@ -36,7 +36,7 @@
 .memori-chat-inputs--mic:active,
 .memori-chat-inputs--mic:focus {
     border-color: var(--memori-primary) !important;
-    color: var(--memori-primary-text, #fff);
+    color: var(--memori-primary, #fff);
 }
 
 .memori-chat-inputs--mic:active,

package/src/components/StartPanel/StartPanel.css

@@ -133,7 +133,14 @@
 }
 
 .memori--start-button {
+    position: relative;
+    overflow: hidden;
+    min-width: 140px;
+    min-height: 42px;
+    border-radius: 8px;
     margin-right: 1em;
+    font-weight: 600;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .memori--language-chooser {
@@ -263,3 +270,4 @@
 .memori--privacy-tooltip-content-list {
     padding-left: 1rem;
 }
+

package/src/components/UploadButton/UploadButton.css

@@ -200,17 +200,6 @@
   height: 20px;
 }
 
-/* Preview Container */
-.memori--preview-container {
-  min-width: 200px;
-  padding: 12px;
-  border-radius: 8px;
-  margin-bottom: 12px;
-  animation: slide-in 0.3s ease;
-  background: #fff;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
-}
 
 .memori--absolute-preview {
   position: absolute;
@@ -352,7 +341,7 @@
   padding: 16px;
   border-radius: 8px;
   margin: 0;
-  background-color: #f8f9fa;
+  /* background-color: #f8f9fa; */
   font-family: monospace;
   line-height: 1.5;
 }
@@ -362,7 +351,7 @@
   border: 1px solid #b2f2bb;
   border-radius: 8px;
   margin-top: 16px;
-  background-color: #ebfbee;
+  /* background-color: #ebfbee; */
   text-align: left;
 }
 
@@ -381,8 +370,8 @@
 .memori--error-message-container,
 .memori--login-tip {
   position: fixed;
-  z-index: 1001;
-  top: 120px;
+  z-index: 10001;
+  top: 80px;
   right: 20px;
 }
 
@@ -431,6 +420,13 @@
   font-weight: bold;
 }
 
+.memori--upload-image {
+  min-width: 140px;
+  min-height: 42px;
+  border-radius: 8px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
 .memori--image-count-full {
   background-color: #fa5252;
 }
@@ -439,8 +435,8 @@
 .memori--document-count {
   position: absolute;
   z-index: 5;
-  top: -8px;
-  right: -8px;
+  top: -20px;
+  right: -10px;
   padding: 1px 6px;
   border-radius: 10px;
   background-color: #51cf66;
@@ -509,6 +505,13 @@ input.memori--upload-title-input {
   transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
 }
 
+.memori--error-message-alert{
+  position: relative;
+  z-index: 10002;
+  top: 0;
+  right: 0;
+}
+
 /* Animation Keyframes */
 @keyframes slide-in {
   from {