@memori.ai/memori-react 8.8.5 → 8.9.0

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

@@ -25,9 +25,6 @@ const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
   message,
 }) => {
   const { openArtifact, state, closeArtifact } = useArtifact();
-  const [currentArtifact, setCurrentArtifact] = useState<ArtifactData | null>(
-    null
-  );
 
   // Memoize the message text to prevent unnecessary recalculations
   const messageText = useMemo(() => {
@@ -53,63 +50,56 @@ const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
   // Simple artifact detection - look for <output class="memori-artifact"> tags
   // Remove message dependency to prevent recreation on every message change
   const detectArtifacts = useCallback((text: string, isFromUser: boolean): ArtifactData[] => {
-    console.log('Detecting artifacts from text:', text?.substring(0, 100) + '...');
-    
     if (!text || isFromUser) {
-      console.log('No text or message is from user, returning empty array');
       return [];
     }
 
-    //first strip the output tag isnide the think tag, if there is one
     text = stripReasoningTags(text);
 
     const artifacts: ArtifactData[] = [];
     
-    // Find complete opening and closing tags
     const artifactRegex = /<output\s+class="memori-artifact"[^>]*data-mimetype="([^"]+)"[^>]*>([\s\S]*?)<\/output>/gi;
     const titleRegex = {
       dataTitle: /data-title\s*=\s*["\']([^"']+)["\']/i,
       htmlTitle: /<title>([^<]+)<\/title>/gi
     };
 
-    const findTitle = (mimeType: string, content: string) => {
-      console.log('Finding title for mimetype:', mimeType);
-      return titleRegex.dataTitle.exec(content)?.[1] || titleRegex.htmlTitle.exec(content)?.[1] || `${mimeType.toUpperCase()} Artifact`;
+    const findTitle = (mimeType: string, content: string, outputTag: string) => {
+      // First try to find data-title in the output tag
+      const dataTitleMatch = outputTag.match(/data-title\s*=\s*["\']([^"']+)["\']/i);
+      if (dataTitleMatch) {
+        return dataTitleMatch[1];
+      }
+      
+      // Then try to find title in the content
+      const htmlTitleMatch = content.match(/<title>([^<]+)<\/title>/i);
+      if (htmlTitleMatch) {
+        return htmlTitleMatch[1];
+      }
+      
+      // Default title based on mimeType
+      return `${mimeType.toUpperCase()} Artifact`;
     };
 
     let match;
+    let artifactNum = 0;
     while ((match = artifactRegex.exec(text)) !== null) {
-      console.log('Found complete artifact match', match);
+      artifactNum++;
       const mimeType = match[1];
       const content = match[2].trim();
-
-      console.log('Artifact mimetype:', mimeType);
-      console.log('Content length:', content.length);
-
-      if (content.length > 50) {
-        const artifact = {
-          id: `artifact-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-          content,
-          mimeType,
-          title: findTitle(mimeType, text),
-          timestamp: new Date(),
-          size: content.length,
-        };
-
-        console.log('Created artifact:', {
-          id: artifact.id,
-          mimeType: artifact.mimeType,
-          title: artifact.title,
-          size: artifact.size
-        });
-
-        artifacts.push(artifact);
-      } else {
-        console.log('Skipping artifact - content too short');
-      }
+      const outputTag = match[0]; // Full output tag for title extraction
+      
+      const artifact = {
+        id: `artifact-${Date.now()}-${artifactNum}-${Math.random().toString(36).substr(2, 9)}`,
+        content,
+        mimeType,
+        title: findTitle(mimeType, content, outputTag),
+        timestamp: new Date(),
+        size: content.length,
+      };
+      artifacts.push(artifact);
     }
 
-    console.log('Detected artifacts:', artifacts.length);
     return artifacts;
   }, []); // Remove message dependency
 
@@ -118,7 +108,7 @@ const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
     return detectArtifacts(messageText, message.fromUser || false);
   }, [messageText, message.fromUser, detectArtifacts]);
 
-  // Auto-open artifacts when detected in new messages
+  // Auto-open first artifact when detected in new messages
   // Only run when messageId changes (actual new message), not on every render
   useEffect(() => {
     if (messageText.length > 0 && artifacts.length > 0) {
@@ -127,68 +117,92 @@ const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
         dispatchArtifactCreatedEvent(artifact);
       });
 
-      if(isChatlogPanel){
-        // openArtifact(artifacts[0]);
-        setCurrentArtifact(artifacts[0]);
-      } else {
+      // Only auto-open the first artifact
+      if (!isChatlogPanel) {
         setTimeout(() => {
           openArtifact(artifacts[0]);
-          setCurrentArtifact(artifacts[0]);
         }, 100);
       }
     }
   }, [messageId, artifacts, dispatchArtifactCreatedEvent, isChatlogPanel, openArtifact]);
 
+  const handleArtifactClick = useCallback((artifact: ArtifactData) => {
+    if (
+      state.isDrawerOpen &&
+      state.currentArtifact?.id === artifact.id
+    ) {
+      closeArtifact();
+    } else {
+      openArtifact(artifact);
+    }
+  }, [state.isDrawerOpen, state.currentArtifact?.id, closeArtifact, openArtifact]);
+
+  const getIconForMimeType = useCallback((mimeType: string): string => {
+    if (mimeType.includes('html')) return '🌐';
+    if (mimeType.includes('markdown')) return '📝';
+    if (mimeType.includes('javascript') || mimeType.includes('typescript')) return '📜';
+    if (mimeType.includes('python')) return '🐍';
+    if (mimeType.includes('json')) return '📊';
+    if (mimeType.includes('css')) return '🎨';
+    if (mimeType.includes('xml')) return '📋';
+    if (mimeType.includes('svg')) return '🖼️';
+    return '📄';
+  }, []);
+
   if (artifacts.length === 0) return null;
 
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-      <div
-        key={currentArtifact?.id}
-        className="memori-artifact-handler"
-        onClick={() => {
-          if (
-            state.isDrawerOpen &&
-            state.currentArtifact?.id === currentArtifact?.id
-          ) {
-            closeArtifact();
-          } else {
-            openArtifact(currentArtifact as ArtifactData);
-          }
-        }}
-      >
-        <div className="memori-artifact-handler-icon">📄</div>
-        <div className="memori-artifact-handler-info">
-          <div className="memori-artifact-handler-title">
-            {currentArtifact?.title}
+      {artifacts.map((artifact) => {
+        const isSelected = state.isDrawerOpen && state.currentArtifact?.id === artifact.id;
+        
+        return (
+          <React.Fragment key={artifact.id}>
+            <div
+              className={`memori-artifact-handler${isSelected ? ' memori-artifact-handler--selected' : ''}`}
+              onClick={() => handleArtifactClick(artifact)}
+              style={isSelected ? {
+                border: '2px solid var(--memori-primary, #3b82f6)',
+                boxShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)',
+              } : undefined}
+            >
+            <div className="memori-artifact-handler-icon">
+              {getIconForMimeType(artifact.mimeType)}
+            </div>
+            <div className="memori-artifact-handler-info">
+              <div className="memori-artifact-handler-title">
+                {artifact.title}
+              </div>
+              <div className="memori-artifact-handler-meta">
+                {artifact.mimeType} •{' '}
+                {formatBytes(artifact.size || 0)}
+              </div>
+            </div>
+            <div className="memori-artifact-handler-action">
+              {isChatlogPanel ? (
+                state.isDrawerOpen &&
+                state.currentArtifact?.id === artifact.id ? (
+                  <ChevronUp className="memori-artifact-handler-action-icon" />
+                ) : (
+                  <ChevronDown className="memori-artifact-handler-action-icon" />
+                )
+              ) : state.isDrawerOpen &&
+                state.currentArtifact?.id === artifact.id ? (
+                <ChevronLeft className="memori-artifact-handler-action-icon" />
+              ) : (
+                <ChevronRight className="memori-artifact-handler-action-icon" />
+              )}
+            </div>
           </div>
-          <div className="memori-artifact-handler-meta">
-            {currentArtifact?.mimeType} •{' '}
-            {formatBytes(currentArtifact?.size || 0)}
-          </div>
-        </div>
-        <div className="memori-artifact-handler-action">
-          {isChatlogPanel ? (
-            state.isDrawerOpen &&
-            state.currentArtifact?.id === currentArtifact?.id ? (
-              <ChevronUp className="memori-artifact-handler-action-icon" />
-            ) : (
-              <ChevronDown className="memori-artifact-handler-action-icon" />
-            )
-          ) : state.isDrawerOpen &&
-            state.currentArtifact?.id === currentArtifact?.id ? (
-            <ChevronLeft className="memori-artifact-handler-action-icon" />
-          ) : (
-            <ChevronRight className="memori-artifact-handler-action-icon" />
-          )}
-        </div>
-      </div>
-
-      {/* Render ArtifactDrawer inline when in chatlog panel */}
-      {state.isDrawerOpen &&
-        state.currentArtifact?.id === currentArtifact?.id && (
-          <ArtifactDrawer isChatLogPanel={isChatlogPanel} />
-        )}
+
+          {/* Render ArtifactDrawer inline when in chatlog panel */}
+          {state.isDrawerOpen &&
+            state.currentArtifact?.id === artifact.id && (
+              <ArtifactDrawer isChatLogPanel={isChatlogPanel} />
+            )}
+        </React.Fragment>
+      );
+      })}
     </div>
   );
 };

package/src/components/MemoriArtifactSystem/utils/ArtifactAPI.test.tsx

@@ -0,0 +1,307 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { ArtifactProvider } from '../context/ArtifactContext';
+import { ArtifactAPIBridge } from './ArtifactAPI';
+import { ArtifactData } from '../types/artifact.types';
+import MemoriWidget from '../../MemoriWidget/MemoriWidget';
+import { Memori } from '@memori.ai/memori-api-client/dist/types';
+import { VisemeProvider } from '../../../context/visemeContext';
+
+const mockMemori: Memori = {
+  memoriID: 'test-memori-id',
+  name: 'Test Memori',
+  culture: 'en-US',
+  coverURL: '',
+  enableBoardOfExperts: false,
+} as Memori;
+
+// Helper function to wrap component with all required providers
+const renderWithProviders = (component: React.ReactElement) => {
+  return render(
+    <VisemeProvider>
+      <ArtifactProvider>
+        {component}
+      </ArtifactProvider>
+    </VisemeProvider>
+  );
+};
+
+describe('ArtifactAPIBridge', () => {
+  beforeEach(() => {
+    // Clean up any previous API instance
+    if (window.MemoriArtifactAPI) {
+      delete window.MemoriArtifactAPI;
+    }
+
+    // Mock window.matchMedia
+    Object.defineProperty(window, 'matchMedia', {
+      writable: true,
+      value: jest.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(), // deprecated
+        removeListener: jest.fn(), // deprecated
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+      })),
+    });
+  });
+
+  afterEach(() => {
+    // Clean up after each test
+    if (window.MemoriArtifactAPI) {
+      delete window.MemoriArtifactAPI;
+    }
+  });
+
+  it('should expose MemoriArtifactAPI on window', () => {
+    renderWithProviders(
+      <MemoriWidget memori={mockMemori} tenantID="test-tenant-id" />
+    );
+
+    expect(window.MemoriArtifactAPI).toBeDefined();
+    expect(typeof window.MemoriArtifactAPI?.createAndOpenArtifact).toBe('function');
+    expect(typeof window.MemoriArtifactAPI?.openArtifact).toBe('function');
+    expect(typeof window.MemoriArtifactAPI?.closeArtifact).toBe('function');
+    expect(typeof window.MemoriArtifactAPI?.toggleFullscreen).toBe('function');
+    expect(typeof window.MemoriArtifactAPI?.getState).toBe('function');
+    expect(typeof window.MemoriArtifactAPI?.createFromOutputElement).toBe('function');
+  });
+
+  it('should create and open artifact with simple parameters', async () => {
+    renderWithProviders(
+      <MemoriWidget memori={mockMemori} tenantID="test-tenant-id" />
+    );
+
+    const testContent = '<h1>Test Content</h1><p>This is a test</p>';
+    const testTitle = 'Test Artifact';
+
+    window.MemoriArtifactAPI!.createAndOpenArtifact(
+      testContent,
+      'html',
+      testTitle
+    );
+
+    await waitFor(() => {
+      const state = window.MemoriArtifactAPI!.getState();
+      expect(state.isDrawerOpen).toBe(true);
+      expect(state.currentArtifact?.title).toBe(testTitle);
+      expect(state.currentArtifact?.content).toBe(testContent);
+      expect(state.currentArtifact?.mimeType).toBe('html');
+    });
+  });
+
+  it('should generate default title from mime type when not provided', async () => {
+    renderWithProviders(
+      <MemoriWidget memori={mockMemori} tenantID="test-tenant-id" />
+    );
+
+    window.MemoriArtifactAPI!.createAndOpenArtifact(
+      'console.log("test")',
+      'javascript'
+    );
+
+    await waitFor(() => {
+      const state = window.MemoriArtifactAPI!.getState();
+      expect(state.currentArtifact?.title).toBe('JavaScript Code');
+    });
+  });
+
+  it('should open artifact with full ArtifactData object', async () => {
+    renderWithProviders(
+      <MemoriWidget memori={mockMemori} tenantID="test-tenant-id" />
+    );
+
+    const artifact: ArtifactData = {
+      id: 'test-artifact-123',
+      content: '<div>Full artifact</div>',
+      mimeType: 'html',
+      title: 'Full Artifact Test',
+      timestamp: new Date(),
+      size: 100,
+    };
+
+    window.MemoriArtifactAPI!.openArtifact(artifact);
+
+    await waitFor(() => {
+      const state = window.MemoriArtifactAPI!.getState();
+      expect(state.isDrawerOpen).toBe(true);
+      expect(state.currentArtifact?.id).toBe('test-artifact-123');
+      expect(state.currentArtifact?.title).toBe('Full Artifact Test');
+    });
+  });
+
+  it('should close artifact', async () => {
+    renderWithProviders(
+      <MemoriWidget memori={mockMemori} tenantID="test-tenant-id" />
+    );
+
+    // First open an artifact
+    window.MemoriArtifactAPI!.createAndOpenArtifact(
+      '<h1>Test</h1>',
+      'html',
+      'Test'
+    );
+
+    await waitFor(() => {
+      const state = window.MemoriArtifactAPI!.getState();
+      expect(state.isDrawerOpen).toBe(true);
+    });
+
+    // Then close it
+    window.MemoriArtifactAPI!.closeArtifact();
+
+    await waitFor(() => {
+      const state = window.MemoriArtifactAPI!.getState();
+      expect(state.isDrawerOpen).toBe(false);
+      expect(state.currentArtifact).toBeNull();
+    });
+  });
+
+  it('should toggle fullscreen', async () => {
+    renderWithProviders(
+      <MemoriWidget memori={mockMemori} tenantID="test-tenant-id" />
+    );
+
+    // Open an artifact first
+    window.MemoriArtifactAPI!.createAndOpenArtifact(
+      '<h1>Test</h1>',
+      'html',
+      'Test'
+    );
+
+    await waitFor(() => {
+      const state = window.MemoriArtifactAPI!.getState();
+      expect(state.isFullscreen).toBe(false);
+    });
+
+    // Toggle fullscreen
+    window.MemoriArtifactAPI!.toggleFullscreen();
+
+    await waitFor(() => {
+      const state = window.MemoriArtifactAPI!.getState();
+      expect(state.isFullscreen).toBe(true);
+    });
+
+    // Toggle back
+    window.MemoriArtifactAPI!.toggleFullscreen();
+
+    await waitFor(() => {
+      const state = window.MemoriArtifactAPI!.getState();
+      expect(state.isFullscreen).toBe(false);
+    });
+  });
+
+  it('should create artifact from output element', async () => {
+    renderWithProviders(
+      <MemoriWidget memori={mockMemori} tenantID="test-tenant-id" />
+    );
+
+    // Create a mock output element
+    const outputElement = document.createElement('output');
+    outputElement.className = 'memori-artifact';
+    outputElement.innerHTML = '<div>Content from output</div>';
+    outputElement.setAttribute('data-mimetype', 'html');
+    outputElement.setAttribute('data-title', 'Output Artifact');
+    document.body.appendChild(outputElement);
+
+    const artifactId = window.MemoriArtifactAPI!.createFromOutputElement(outputElement);
+
+    expect(artifactId).toBeDefined();
+    expect(outputElement.style.display).toBe('none');
+    expect(outputElement.getAttribute('data-memori-processed')).toBe('true');
+
+    await waitFor(() => {
+      const state = window.MemoriArtifactAPI!.getState();
+      expect(state.isDrawerOpen).toBe(true);
+      expect(state.currentArtifact?.content).toBe('<div>Content from output</div>');
+      expect(state.currentArtifact?.title).toBe('Output Artifact');
+    });
+
+    // Clean up
+    document.body.removeChild(outputElement);
+  });
+
+  it('should handle multiple artifacts in the same message', async () => {
+    renderWithProviders(
+      <MemoriWidget memori={mockMemori} tenantID="test-tenant-id" />
+    );
+
+    // Create a message with multiple output elements
+    const messageContent = `
+      <output class="memori-artifact" data-mimetype="html" data-title="Artifact 1">
+        <div>Content 1</div>
+      </output>
+      <output class="memori-artifact" data-mimetype="javascript" data-title="Artifact 2">
+        console.log("test");
+      </output>
+    `;
+
+    window.MemoriArtifactAPI!.createAndOpenArtifact(messageContent, 'html');
+
+    await waitFor(() => {
+      const state = window.MemoriArtifactAPI!.getState();
+      // The first artifact should be opened
+      expect(state.isDrawerOpen).toBe(true);
+      expect(state.currentArtifact).toBeDefined();
+    });
+  });
+
+  it('should return initial state correctly', () => {
+    renderWithProviders(
+      <MemoriWidget memori={mockMemori} tenantID="test-tenant-id" />
+    );
+
+    const state = window.MemoriArtifactAPI!.getState();
+
+    expect(state.currentArtifact).toBeNull();
+    expect(state.isDrawerOpen).toBe(false);
+    expect(state.isFullscreen).toBe(false);
+  });
+
+  it('should clean up API on unmount', () => {
+    const { unmount } = renderWithProviders(
+      <MemoriWidget memori={mockMemori} tenantID="test-tenant-id" />
+    );
+
+    expect(window.MemoriArtifactAPI).toBeDefined();
+
+    unmount();
+
+    expect(window.MemoriArtifactAPI).toBeUndefined();
+  });
+
+  it('should handle different mime types with correct titles', async () => {
+    renderWithProviders(
+      <MemoriWidget memori={mockMemori} tenantID="test-tenant-id" />
+    );
+
+    const testCases = [
+      { mimeType: 'html', expectedTitle: 'HTML Document' },
+      { mimeType: 'markdown', expectedTitle: 'Markdown Document' },
+      { mimeType: 'javascript', expectedTitle: 'JavaScript Code' },
+      { mimeType: 'python', expectedTitle: 'Python Code' },
+      { mimeType: 'json', expectedTitle: 'JSON Data' },
+      { mimeType: 'css', expectedTitle: 'CSS Stylesheet' },
+      { mimeType: 'typescript', expectedTitle: 'TypeScript Code' },
+      { mimeType: 'xml', expectedTitle: 'XML Document' },
+      { mimeType: 'svg', expectedTitle: 'SVG Image' },
+      { mimeType: 'unknown', expectedTitle: 'Document' },
+    ];
+
+    for (const testCase of testCases) {
+      window.MemoriArtifactAPI!.createAndOpenArtifact(
+        'test content',
+        testCase.mimeType
+      );
+
+      await waitFor(() => {
+        const state = window.MemoriArtifactAPI!.getState();
+        expect(state.currentArtifact?.title).toBe(testCase.expectedTitle);
+      });
+    }
+  });
+});
+