@memori.ai/memori-react 8.5.1 → 8.6.0

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

@@ -12,7 +12,7 @@ import Close from '../../../icons/Close';
 import ArtifactActions from '../ArtifactActions/ArtifactActions';
 import { useArtifact } from '../../context/ArtifactContext';
 import ArtifactPreview from '../ArtifactPreview/ArtifactPreview';
-import { ArtifactTab } from '../../types/artifact.types';
+import { ArtifactData, ArtifactTab } from '../../types/artifact.types';
 import cx from 'classnames';
 import Drawer from '../../../ui/Drawer';
 import Fullscreen from '../../../icons/Fullscreen';
@@ -27,11 +27,9 @@ import TabSwitch from './components/TabSwitch';
 const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
   isChatLogPanel = false,
 }) => {
-  const { state, openArtifact, closeArtifact, toggleFullscreen } =
+  const { state, closeArtifact, toggleFullscreen } =
     useArtifact();
   const { t } = useTranslation();
-  const [showHistory, setShowHistory] = useState(false);
-  const [isAnimating, setIsAnimating] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
 
   const [activeTab, setActiveTab] = useState<ArtifactTab>('preview');
@@ -99,30 +97,6 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
     }
   }, [state.currentArtifact]);
 
-  /**
-   * Handle download action
-   */
-  const handleDownload = useCallback(() => {
-    // This will be handled by the ArtifactActions component
-    console.log('Download triggered');
-  }, []);
-
-  /**
-   * Handle print action
-   */
-  const handlePrint = useCallback(() => {
-    // This will be handled by the ArtifactActions component
-    console.log('Print triggered');
-  }, []);
-
-  /**
-   * Handle external open action
-   */
-  const handleOpenExternal = useCallback(() => {
-    // This will be handled by the ArtifactActions component
-    console.log('External open triggered');
-  }, []);
-
   /**
    * Handle fullscreen toggle
    */
@@ -139,20 +113,6 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
     closeArtifact();
   }, [closeArtifact]);
 
-  /**
-   * Toggle history panel
-   */
-  const toggleHistory = useCallback(() => {
-    setShowHistory(prev => !prev);
-  }, []);
-
-  /**
-   * Mobile dropdown menu handlers
-   */
-  const handleMobileOpenExternal = useCallback(() => {
-    handleOpenExternal();
-  }, [handleOpenExternal]);
-
   if (!state.currentArtifact) {
     return null;
   }
@@ -166,9 +126,7 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
       if (isChatLogPanel) {
         return (
           <div
-            style={
-              isChatLogPanel ? { minHeight: '75vh', maxHeight: '75vh' } : {}
-            }
+            style={{ minHeight: '75vh', maxHeight: '75vh' }}
             className="memori-artifact-panel"
           >
             {children}
@@ -210,176 +168,229 @@ const ArtifactDrawer: React.FC<{ isChatLogPanel?: boolean }> = ({
     [isChatLogPanel, handleClose, state.isDrawerOpen, state.isFullscreen]
   );
 
+    /**
+   * 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 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 (
     <ContentContainer>
       {/* Header */}
-      <div className="memori-artifact-drawer-container-actions">
+      <div
+        className={cx('memori-artifact-drawer-container-actions', {
+          'memori-artifact-drawer-container-actions--no-preview': !hasPreview,
+          'memori-artifact-drawer-container-actions--chatlog': isChatLogPanel,
+        })}
+      >
         {/* Desktop Actions */}
         {!isMobile && (
           <>
-            {/* {!isChatLogPanel && (
-              <Button
-                onClick={handleToggleFullscreen}
-                className={cx(
-                  'memori-artifact-drawer-fullscreen',
-                  'memori-button--circle',
-                  'memori-button--icon-only'
-                )}
-                ghost
-                icon={
-                  state.isFullscreen ? (
-                    <Fullscreen className="memori-artifact-panel--close-icon" />
-                  ) : (
-                    <FullscreenExit className="memori-artifact-panel--close-icon" />
-                  )
-                }
-                title={
-                  state.isFullscreen
-                    ? t('artifact.exitFullscreen') || 'Exit Fullscreen'
-                    : t('artifact.fullscreen') || 'Fullscreen'
-                }
-              />
-            )} */}
             {/* Modern Tab Switch */}
-            <TabSwitch
-              activeTab={activeTab}
-              onTabChange={handleTabChange}
-              hasPreview={hasPreview}
-            />
+            {hasPreview && (
+              <TabSwitch
+                activeTab={activeTab}
+                onTabChange={handleTabChange}
+                hasPreview={hasPreview}
+              />
+            )}
             <ArtifactActions
               artifact={state.currentArtifact}
               onCopy={handleCopy}
-              onDownload={handleDownload}
               loading={false}
-              onPrint={handlePrint}
-              onOpenExternal={handleOpenExternal}
               isMobile={isMobile}
             />
             <Button
               onClick={closeArtifact}
               className={cx(
                 'memori-artifact-drawer--close',
-                'memori-button--icon-only'
+                'memori-button--icon-only',
+                {
+                  'memori-artifact-drawer--close-desktop': !hasPreview,
+                }
               )}
               ghost
               title={t('artifact.close') || 'Close'}
             >
-              <Close  className="memori-artifact-panel--close-icon" />
+              <Close className="memori-artifact-panel--close-icon" />
             </Button>
           </>
         )}
       </div>
 
       {/* Top Right Header Section */}
-      <div className="memori-artifact-drawer-top-right">
+      <div
+        className={cx('memori-artifact-drawer-top-right', {
+          'memori-artifact-drawer-top-right--no-preview': !hasPreview,
+          'memori-artifact-drawer-top-right--chatlog': isChatLogPanel,
+        })}
+      >
         {/* Mobile Dropdown Menu */}
         {isMobile && (
           <>
-          <TabSwitch
-              activeTab={activeTab}
-              onTabChange={handleTabChange}
-              hasPreview={hasPreview}
-            />
-          <Menu as="div" className="memori-mobile-actions-menu">
-            <Menu.Button as="div" className="memori-mobile-actions-trigger">
-              <Button
-                className={cx(
-                  'memori-button',
-                  'memori-button--more-options',
-                  'memori-button--icon-only'
-                )}
-                ghost
-                title={t('artifact.actions') || 'Actions'}
-              >
-                <MenuVertical className="memori-artifact-action-icon" />
-              </Button>
-            </Menu.Button>
-
-            <Transition
-              as={React.Fragment}
-              enter="memori-mobile-dropdown-enter"
-              enterFrom="memori-mobile-dropdown-enter-from"
-              enterTo="memori-mobile-dropdown-enter-to"
-              leave="memori-mobile-dropdown-leave"
-              leaveFrom="memori-mobile-dropdown-leave-from"
-              leaveTo="memori-mobile-dropdown-leave-to"
-            >
-              <Menu.Items className="memori-mobile-dropdown">
-                <div className="memori-mobile-dropdown-list">
-                  <Button
-                    onClick={handleCopy}
-                    disabled={false}
-                    className="memori-artifact-action-btn"
-                    ghost
-                    title={t('artifact.copy') || 'Copy'}
-                  >
-                    <span className="memori-artifact-action-text">
-                      {t('artifact.copy') || 'Copy'}
-                    </span>
-                  </Button>
+            {hasPreview && (
+              <TabSwitch
+                activeTab={activeTab}
+                onTabChange={handleTabChange}
+                hasPreview={hasPreview}
+              />
+            )}
+            <Menu as="div" className="memori-mobile-actions-menu">
+              <Menu.Button as="div" className="memori-mobile-actions-trigger">
+                <Button
+                  className={cx(
+                    'memori-button',
+                    'memori-button--more-options',
+                    'memori-button--icon-only'
+                  )}
+                  ghost
+                  title={t('artifact.actions') || 'Actions'}
+                >
+                  <MenuVertical className="memori-artifact-action-icon" />
+                </Button>
+              </Menu.Button>
 
-                  {formats.map(format => {
-                    // Get appropriate icon based on action type
-                    const getIcon = () => {
-                      switch (format.action) {
-                        case 'copy':
-                          return (
-                            <Link className="memori-artifact-action-icon" />
-                          );
-                        case 'download':
-                          return (
-                            <Download className="memori-artifact-action-icon" />
-                          );
-                        case 'print':
-                        case 'pdf':
-                          return (
-                            <PrintIcon className="memori-artifact-action-icon" />
-                          );
-                        default:
-                          return (
-                            <Link className="memori-artifact-action-icon" />
-                          );
-                      }
-                    };
+              <Transition
+                as={React.Fragment}
+                enter="memori-mobile-dropdown-enter"
+                enterFrom="memori-mobile-dropdown-enter-from"
+                enterTo="memori-mobile-dropdown-enter-to"
+                leave="memori-mobile-dropdown-leave"
+                leaveFrom="memori-mobile-dropdown-leave-from"
+                leaveTo="memori-mobile-dropdown-leave-to"
+              >
+                <Menu.Items className="memori-mobile-dropdown">
+                  <div className="memori-mobile-dropdown-list">
+                    <Button
+                      onClick={handleCopy}
+                      disabled={false}
+                      className="memori-artifact-action-btn"
+                      ghost
+                      title={t('artifact.copy') || 'Copy'}
+                    >
+                      <span className="memori-artifact-action-text">
+                        {t('artifact.copy') || 'Copy'}
+                      </span>
+                    </Button>
 
-                    return (
-                      <Button
-                        key={format.id}
-                        onClick={() => handleCopyFormat(format)}
-                        disabled={
-                          copyState.loading &&
-                          copyState.activeFormat === format.id
+                    {formats.map(format => {
+                      // Get appropriate icon based on action type
+                      const getIcon = () => {
+                        switch (format.action) {
+                          case 'copy':
+                            return (
+                              <Link className="memori-artifact-action-icon" />
+                            );
+                          case 'download':
+                            return (
+                              <Download className="memori-artifact-action-icon" />
+                            );
+                          case 'print':
+                          case 'pdf':
+                            return (
+                              <PrintIcon className="memori-artifact-action-icon" />
+                            );
+                          default:
+                            return (
+                              <Link className="memori-artifact-action-icon" />
+                            );
                         }
-                        className="memori-artifact-action-btn"
-                        ghost
-                        icon={getIcon()}
-                        title={format.label}
-                      >
-                        <span className="memori-artifact-action-text">
-                          {format.label}
-                        </span>
-                      </Button>
-                    );
-                  })}
+                      };
+
+                      return (
+                        <Button
+                          key={format.id}
+                          onClick={() => handleCopyFormat(format)}
+                          disabled={
+                            copyState.loading &&
+                            copyState.activeFormat === format.id
+                          }
+                          className="memori-artifact-action-btn"
+                          ghost
+                          icon={getIcon()}
+                          title={format.label}
+                        >
+                          <span className="memori-artifact-action-text">
+                            {format.label}
+                          </span>
+                        </Button>
+                      );
+                    })}
 
-                  {/* External open action (not from hook) */}
-                  <Button
-                    onClick={handleMobileOpenExternal}
-                    disabled={false}
-                    className="memori-artifact-action-btn"
-                    ghost
-                    icon={<Link className="memori-artifact-action-icon" />}
-                    title={t('artifact.external') || 'External'}
-                  >
-                    <span className="memori-artifact-action-text">
-                      {t('artifact.external') || 'External'}
-                    </span>
-                  </Button>
-                </div>
-              </Menu.Items>
-            </Transition>
-          </Menu>
+                    {/* External open action (not from hook) */}
+                    <Button
+                      onClick={() => handleOpenExternal(state.currentArtifact ?? {
+                        content: '',
+                        mimeType: '',
+                        title: '',
+                        timestamp: new Date(),
+                        size: 0,
+                        id: '',
+                      })}
+                      disabled={false}
+                      className="memori-artifact-action-btn"
+                      ghost
+                      icon={<Link className="memori-artifact-action-icon" />}
+                      title={t('artifact.external') || 'External'}
+                    >
+                      <span className="memori-artifact-action-text">
+                        {t('artifact.external') || 'External'}
+                      </span>
+                    </Button>
+                  </div>
+                </Menu.Items>
+              </Transition>
+            </Menu>
           </>
         )}
 

package/src/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.tsx

@@ -25,14 +25,19 @@ const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
   // Auto-open artifacts when detected in new messages
   useEffect(() => {
     const messageText = message.translatedText || message.text || '';
-    if (!state.isDrawerOpen && messageText.length > 0) {
+    if (messageText.length > 0) {
       const artifacts = detectArtifacts(messageText);
 
       if (artifacts.length > 0) {
-        setTimeout(() => {
-          openArtifact(artifacts[0]);
+        if(isChatlogPanel){
+          // openArtifact(artifacts[0]);
           setCurrentArtifact(artifacts[0]);
-        }, 100);
+        } else {
+          setTimeout(() => {
+            openArtifact(artifacts[0]);
+            setCurrentArtifact(artifacts[0]);
+          }, 100);
+        }
       }
     }
   }, [message]);

package/src/components/layouts/chat.css

@@ -73,7 +73,7 @@
 
 .memori-chat-layout--controls-with-artifact {
     max-height: 100%;
-    flex: 0 0 50%;
+    flex: 0 0 49%;
     padding-bottom: 2.5rem;
     margin: 0;
 }

package/src/helpers/utils.ts

@@ -68,6 +68,27 @@ export const isAndroid = (): boolean => {
   return isAndroid;
 };
 
+export const isSafari = (): boolean => {
+  if (typeof navigator === 'undefined') return false;
+  
+  const userAgent = navigator.userAgent;
+  const isSafariUA = userAgent.includes('Safari') && !userAgent.includes('Chrome');
+  const isWebKit = 'WebKit' in window && !('Chrome' in window);
+  
+  return isSafariUA || isWebKit;
+};
+
+export const isSafariIOS = (): boolean => {
+  if (typeof navigator === 'undefined') return false;
+  
+  const userAgent = navigator.userAgent;
+  return (
+    userAgent.includes('Safari') &&
+    !userAgent.includes('Chrome') &&
+    /iPad|iPhone|iPod/.test(userAgent)
+  );
+};
+
 export const pwdRegEx =
   // eslint-disable-next-line no-useless-escape
   /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$_:;|,~+=\{\}\[\]%^&*-]).{8,}$/;

package/src/locales/de.json

@@ -224,7 +224,8 @@
     "copyWithoutSyntaxHighlighting": "Ohne Syntaxhervorhebung kopieren",
     "copyTextContent": "Textinhalt kopieren",
     "pdfExportNotSupported": "PDF-Export wird in diesem Browser nicht unterstützt",
-    "popupBlocked": "Popup blockiert! Bitte aktivieren Sie Popups zum Drucken."
+    "popupBlocked": "Popup blockiert! Bitte aktivieren Sie Popups zum Drucken.",
+    "safariPdfInstructions": "PDF-Export in neuem Fenster geöffnet. Bitte verwenden Sie Cmd+P (Mac) oder Strg+P (Windows) zum Drucken und als PDF speichern."
   },
   "upload": {
     "loginRequired": "Login erforderlich",

package/src/locales/en.json

@@ -235,7 +235,8 @@
     "copyWithoutSyntaxHighlighting": "Copy without syntax highlighting",
     "copyTextContent": "Copy text content",
     "pdfExportNotSupported": "PDF export is not supported in this browser",
-    "popupBlocked": "Popup blocked! Please enable popups to print."
+    "popupBlocked": "Popup blocked! Please enable popups to print.",
+    "safariPdfInstructions": "PDF export opened in new window. Please use Cmd+P (Mac) or Ctrl+P (Windows) to print and save as PDF."
   },
   "upload": {
     "loginRequired": "Login required",

package/src/locales/es.json

@@ -224,7 +224,8 @@
     "copyWithoutSyntaxHighlighting": "Copiar sin resaltado de sintaxis",
     "copyTextContent": "Copiar contenido de texto",
     "pdfExportNotSupported": "La exportación PDF no es compatible con este navegador",
-    "popupBlocked": "¡Popup bloqueado! Por favor, habilita los popups para imprimir."
+    "popupBlocked": "¡Popup bloqueado! Por favor, habilita los popups para imprimir.",
+    "safariPdfInstructions": "Exportación PDF abierta en nueva ventana. Por favor, usa Cmd+P (Mac) o Ctrl+P (Windows) para imprimir y guardar como PDF."
   },
   "upload": {
     "loginRequired": "Connexion requise",

package/src/locales/fr.json

@@ -233,7 +233,8 @@
     "copyWithoutSyntaxHighlighting": "Copier sans coloration syntaxique",
     "copyTextContent": "Copier le contenu texte",
     "pdfExportNotSupported": "L'exportation PDF n'est pas prise en charge dans ce navigateur",
-    "popupBlocked": "Popup bloqué ! Veuillez activer les popups pour imprimer."
+    "popupBlocked": "Popup bloqué ! Veuillez activer les popups pour imprimer.",
+    "safariPdfInstructions": "Export PDF ouvert dans une nouvelle fenêtre. Veuillez utiliser Cmd+P (Mac) ou Ctrl+P (Windows) pour imprimer et sauvegarder en PDF."
   },
   "upload": {
     "loginRequired": "Connexion requise",

package/src/locales/it.json

@@ -238,7 +238,8 @@
     "copyWithoutSyntaxHighlighting": "Copia senza evidenziazione sintassi",
     "copyTextContent": "Copia contenuto testo",
     "pdfExportNotSupported": "L'esportazione PDF non è supportata in questo browser",
-    "popupBlocked": "Popup bloccato! Abilita i popup per stampare."
+    "popupBlocked": "Popup bloccato! Abilita i popup per stampare.",
+    "safariPdfInstructions": "Esportazione PDF aperta in una nuova finestra. Usa Cmd+P (Mac) o Ctrl+P (Windows) per stampare e salvare come PDF."
 
   },
   "media": {