@memori.ai/memori-react 8.11.0 → 8.13.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.css

@@ -13,6 +13,15 @@
     height: calc(100vh - 50px);
 }
 
+@media (max-width: 425px) {
+    .memori-widget {
+        overflow-y: hidden;
+    }
+    .memori-widget > .memori-spin {
+        height: calc(100vh - 100px);
+    }
+}
+
 .memori--grid {
     display: flex;
     height: calc(100% - 50px);
@@ -26,7 +35,7 @@
         align-items: flex-start;
         justify-content: flex-start;
         overflow-x: visible;
-        overflow-y: scroll;
+        overflow-y: hidden;
     }
 }
 
@@ -192,7 +201,7 @@
 
 .memori--conversation-button:active,
 .memori--conversation-button:focus {
-    box-shadow: 0 0.2rem 0.33rem #b5b6c4 !important;
+    /* box-shadow: 0 0.2rem 0.33rem #b5b6c4 !important; */
     color: var(--memori-primary) !important;
 }
 

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