@memori.ai/memori-react 8.10.1 → 8.12.0

package/src/components/MemoriArtifactSystem/components/ArtifactActions/ArtifactActions.tsx

@@ -215,7 +215,7 @@ const ArtifactActions: React.FC<{
                 <Button
                   onClick={handlePrint}
                   disabled={loading}
-                  className="memori-artifact-action-btn"
+                  className="memori-artifact-action-btn memori-artifact-action-btn--print"
                   ghost
                   icon={<PrintIcon className="memori-artifact-action-icon" />}
                   title={t('artifact.print') || 'Print'}
@@ -228,7 +228,7 @@ const ArtifactActions: React.FC<{
                 <Button
                   onClick={handleOpenExternal}
                   disabled={loading}
-                  className="memori-artifact-action-btn"
+                  className="memori-artifact-action-btn memori-artifact-action-btn--external"
                   ghost
                   icon={<Link className="memori-artifact-action-icon" />}
                   title={t('artifact.external') || 'External'}

package/src/components/MemoriArtifactSystem/components/ArtifactActions/components/CopyButtonWithDropdown.tsx

@@ -374,7 +374,7 @@ const CopyButtonWithDropdown: React.FC<CopyButtonWithDropdownProps> = ({
           onClick={handleCopyClick}
           disabled={disabled || loading || copyState.loading}
           className={cx(
-            'memori-copy-button memori-copy-button--main',
+            'memori-copy-button memori-copy-button--main ',
             {
               'memori-copy-button--success': copyState.success,
               'memori-copy-button--error': copyState.error,

package/src/components/MemoriArtifactSystem/components/ArtifactActions/components/CopyMenuItem.tsx

@@ -54,6 +54,9 @@ const CopyMenuItem: React.FC<CopyMenuItemProps & { active?: boolean }> = ({
         'memori-copy-menu-item--pdf': format.action === 'pdf',
         'memori-copy-menu-item--print': format.action === 'print',
         'memori-copy-menu-item--active': active,
+        'memori-copy-menu-item--external': format.action === 'link',
+        'memori-copy-menu-item--copy': format.action === 'copy',
+        'memori-copy-menu-item--download': format.action === 'download',
       })}
       onClick={handleClick}
       disabled={disabled || loading}

package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.tsx

@@ -148,6 +148,8 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
             widthLg="50%"
             closable={false}
             animated={true}
+            enterDuration={isMobile ? 'duration-500' : 'duration-300'}
+            leaveDuration={isMobile ? 'duration-400' : 'duration-200'}
             showBackdrop={false}
             preventBackdropClose={true}
             confirmDialogTitle={
@@ -158,70 +160,70 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
               t('artifact.confirmDialogMessage') ||
               'This action cannot be undone.'
             }
-            // className="memori-artifact-panel"
+          // className="memori-artifact-panel"
           >
             {children}
           </Drawer>
         );
       }
     },
-    [isChatLogPanel, handleClose, state.isDrawerOpen, state.isFullscreen]
+    [isChatLogPanel, handleClose, state.isDrawerOpen, state.isFullscreen, isMobile]
   );
 
-    /**
-   * Get MIME type string for downloads
+  /**
+ * Get MIME type string for downloads
+ */
+  const getMimeTypeString = useCallback((mimeType: string): string => {
+    const mimeTypes: Record<string, string> = {
+      html: 'text/html',
+      json: 'application/json',
+      markdown: 'text/markdown',
+      css: 'text/css',
+      javascript: 'text/javascript',
+      typescript: 'text/typescript',
+      svg: 'image/svg+xml',
+      xml: 'text/xml',
+      text: 'text/plain',
+      python: 'text/x-python',
+      java: 'text/x-java',
+      cpp: 'text/x-c++',
+      csharp: 'text/x-csharp',
+      php: 'text/x-php',
+      ruby: 'text/x-ruby',
+      go: 'text/x-go',
+      rust: 'text/x-rust',
+      yaml: 'text/yaml',
+      sql: 'text/x-sql',
+    };
+    return mimeTypes[mimeType] || 'text/plain';
+  }, []);
+
+  /**
+   * Handle external open action
    */
-    const getMimeTypeString = useCallback((mimeType: string): string => {
-      const mimeTypes: Record<string, string> = {
-        html: 'text/html',
-        json: 'application/json',
-        markdown: 'text/markdown',
-        css: 'text/css',
-        javascript: 'text/javascript',
-        typescript: 'text/typescript',
-        svg: 'image/svg+xml',
-        xml: 'text/xml',
-        text: 'text/plain',
-        python: 'text/x-python',
-        java: 'text/x-java',
-        cpp: 'text/x-c++',
-        csharp: 'text/x-csharp',
-        php: 'text/x-php',
-        ruby: 'text/x-ruby',
-        go: 'text/x-go',
-        rust: 'text/x-rust',
-        yaml: 'text/yaml',
-        sql: 'text/x-sql',
-      };
-      return mimeTypes[mimeType] || 'text/plain';
-    }, []);
-  
-    /**
-     * Handle external open action
-     */
-    const handleOpenExternal = useCallback((artifact: ArtifactData) => {
-      try {
-        const mimeType = getMimeTypeString(artifact.mimeType);
-        const blob = new Blob([artifact.content], { type: mimeType });
-        const url = URL.createObjectURL(blob);
-  
-        const externalWindow = window.open(url, '_blank');
-        if (!externalWindow) {
-          alert(
-            'Popup blocked! Please enable popups to open the artifact in a new window.'
-          );
-          return;
-        }
-  
-        // Cleanup URL after a delay
-        setTimeout(() => {
-          URL.revokeObjectURL(url);
-        }, 60000);
-  
-      } catch (error) {
-        console.error('External open failed:', error);
+  const handleOpenExternal = useCallback((artifact: ArtifactData) => {
+    try {
+      const mimeType = getMimeTypeString(artifact.mimeType);
+      const blob = new Blob([artifact.content], { type: mimeType });
+      const url = URL.createObjectURL(blob);
+
+      const externalWindow = window.open(url, '_blank');
+      if (!externalWindow) {
+        alert(
+          'Popup blocked! Please enable popups to open the artifact in a new window.'
+        );
+        return;
       }
-    }, []);
+
+      // Cleanup URL after a delay
+      setTimeout(() => {
+        URL.revokeObjectURL(url);
+      }, 60000);
+
+    } catch (error) {
+      console.error('External open failed:', error);
+    }
+  }, []);
 
   // Render web split panel
   return (

package/src/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.css

@@ -42,11 +42,6 @@
   white-space: nowrap;
 }
 
-/* .memori-artifact-tab:hover:not(.memori-artifact-tab--active) {
-  background: rgba(0, 123, 255, 0.05);
-  color: var(--memori-text-color, #333);
-} */
-
 .memori-artifact-tab--active, .memori-artifact-tab:hover, .memori-artifact-tab:active, .memori-artifact-tab:focus {
   background: var(--memori-chat-bubble-bg, #fff);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -101,8 +96,11 @@
 /* Preview Content */
 .memori-artifact-preview-content {
   position: relative;
+  display: flex;
   overflow: hidden;
+  min-height: 0;
   flex: 1;
+  flex-direction: column;
   /* border: 1px solid var(--memori-button-border-color, #e9ecef); */
   border-radius: var(--memori-border-radius, 6px);
   /* margin: 1rem; */
@@ -110,14 +108,25 @@
   background: var(--memori-chat-bubble-bg, #fff);
 }
 
+.memori-artifact-preview-iframe {
+  overflow: auto;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  flex: 1;
+  border: none;
+  border-radius: var(--memori-border-radius, 6px);
+}
+
 /* Markdown Preview */
 .memori-artifact-preview-markdown {
-  height: 100%;
+  min-height: 0;
+  flex: 1;
   padding: 1rem;
   color: var(--memori-text-color, #333);
   font-family: var(--memori-font-family);
   line-height: 1.6;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .memori-artifact-preview-markdown h1,

package/src/components/MemoriArtifactSystem/components/ArtifactPreview/ArtifactPreview.tsx

@@ -28,6 +28,7 @@ const ArtifactPreview: React.FC<{
       case 'html':
         return (
           <iframe
+            className="memori-artifact-preview-iframe"
             srcDoc={artifact.content}
             style={{
               width: '100%',
@@ -36,6 +37,7 @@ const ArtifactPreview: React.FC<{
               borderRadius: '6px',
             }}
             title={`${artifact.title} Preview`}
+            scrolling="auto"
           />
         );
 
@@ -48,9 +50,16 @@ const ArtifactPreview: React.FC<{
             }}
           />
         );
-
+        
       default:
-        return null;
+        return (
+          <div
+            className="memori-artifact-preview-text"
+            dangerouslySetInnerHTML={{
+              __html: artifact.content,
+            }}
+          />
+        );
     }
   }, [artifact]);
 
@@ -110,7 +119,7 @@ const ArtifactPreview: React.FC<{
   );
 
   const hasPreview =
-    artifact.mimeType === 'html' || artifact.mimeType === 'markdown';
+    artifact.mimeType === 'html' || artifact.mimeType === 'markdown' || artifact.mimeType === 'svg';
 
   return (
     <div className="memori-artifact-preview">

package/src/components/MemoriWidget/MemoriWidget.stories.tsx

@@ -6,6 +6,7 @@ import MemoriWidget, { Props } from './MemoriWidget';
 
 import './MemoriWidget.css';
 import { VisemeProvider } from '../../context/visemeContext';
+import { ArtifactProvider } from '../MemoriArtifactSystem/context/ArtifactContext';
 
 const meta: Meta = {
   title: 'Widget/Default',
@@ -37,9 +38,11 @@ export default meta;
 
 const Template: Story<Props> = args => (
   <I18nWrapper>
-    <VisemeProvider>
-      <MemoriWidget {...args} />
-    </VisemeProvider>
+    <ArtifactProvider>
+      <VisemeProvider>
+        <MemoriWidget {...args} />
+      </VisemeProvider>
+    </ArtifactProvider>
   </I18nWrapper>
 );
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test

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) {
@@ -1283,9 +1292,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,18 +1392,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 +1451,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 +1462,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 +1477,7 @@ 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 +1486,13 @@ 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 +1501,7 @@ 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 +1517,7 @@ 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 +2570,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!
@@ -3049,16 +3069,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 +3098,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 +3121,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 +3132,14 @@ 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 +3285,60 @@ 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/UploadButton/UploadButton.tsx

@@ -376,6 +376,7 @@ ${file.content}
           <div
             className={cx('memori--upload-menu-item', {
               'memori--upload-menu-item--disabled': hasReachedDocumentLimit,
+              'memori--upload-menu-item--document': true,
             })}
             onClick={handleDocumentClick}
             title={
@@ -408,6 +409,7 @@ ${file.content}
             className={cx('memori--upload-menu-item', {
               'memori--upload-menu-item--disabled':
                 !isMediaAccepted || hasReachedImageLimit,
+              'memori--upload-menu-item--image': true,
             })}
             onClick={handleImageClick}
             title={

package/src/components/UploadButton/UploadImages/UploadImages.tsx

@@ -149,7 +149,8 @@ const UploadImages: React.FC<UploadImagesProps> = ({
               response = await backend.uploadAsset(
                 selectedFile.name,
                 fileDataUrl,
-                authToken
+                authToken,
+                memoriID
               );
             } else if (memoriID && sessionID && backend?.uploadAssetUnlogged) {
               response = await backend.uploadAssetUnlogged(
@@ -341,7 +342,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
               <Button
                 onClick={handleTitleSubmit}
                 disabled={!selectedFile || !imageTitle.trim()}
-                className="memori-button memori-button--primary"
+                className="memori-button memori-button--primary memori-button--image-confirm"
               >
                 {t('confirm') ?? 'Confirm'}
               </Button>