@memori.ai/memori-react 8.45.1 → 8.45.4

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

@@ -1,308 +0,0 @@
-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',
-      artifactId: 'test-artifact',
-      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);
-      });
-    }
-  });
-});
-

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

@@ -1,379 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useArtifact } from '../context/ArtifactContext';
-import type { ArtifactData } from '../types/artifact.types';
-import { Message } from '@memori.ai/memori-api-client/dist/types';
-
-// Queue for calls made before the component is ready
-const pendingCalls: Array<{ method: string; args: any[] }> = [];
-let isReady = false;
-
-/**
- * Initialize the MemoriArtifactAPI stub on window
- * This should be called as early as possible to prevent "undefined" errors
- */
-export const initMemoriArtifactAPI = () => {
-  if (typeof window === 'undefined') return;
-  
-  // Only initialize if not already present
-  if ((window as any).MemoriArtifactAPI) {
-    return;
-  }
-
-  (window as any).MemoriArtifactAPI = {
-    _isReady: () => isReady,
-    _setReady: (ready: boolean) => { isReady = ready; },
-    _getPendingCalls: () => pendingCalls,
-    _clearPendingCalls: () => { pendingCalls.length = 0; },
-    
-    openArtifact: (artifact: ArtifactData) => {
-      if (!isReady) {
-        pendingCalls.push({ method: 'openArtifact', args: [artifact] });
-      }
-    },
-    createAndOpenArtifact: (content: string, mimeType?: string, title?: string) => {
-      if (!isReady) {
-        pendingCalls.push({ method: 'createAndOpenArtifact', args: [content, mimeType, title] });
-      }
-    },
-    createFromOutputElement: (outputElement: HTMLOutputElement) => {
-      if (!isReady) {
-        pendingCalls.push({ method: 'createFromOutputElement', args: [outputElement] });
-        return 'pending';
-      }
-      return 'not-ready';
-    },
-    closeArtifact: () => {
-      if (!isReady) {
-        pendingCalls.push({ method: 'closeArtifact', args: [] });
-      }
-    },
-    toggleFullscreen: () => {
-      if (!isReady) {
-        pendingCalls.push({ method: 'toggleFullscreen', args: [] });
-      }
-    },
-    getState: () => {
-      if (!isReady) {
-        return { currentArtifact: null, isDrawerOpen: false, isFullscreen: false };
-      }
-      return { currentArtifact: null, isDrawerOpen: false, isFullscreen: false };
-    },
-  };
-};
-
-// Initialize immediately when this module is loaded
-initMemoriArtifactAPI();
-
-/**
- * Componente che espone le funzioni dell'Artifact System come API globale
- * Questo permette di controllare gli artifacts da JavaScript vanilla esterno
- */
-export const ArtifactAPIBridge = ({
-  pushMessage,
-}: {
-  pushMessage: (message: Message) => void;
-}) => {
-  const { openArtifact, closeArtifact, toggleFullscreen, state, registerArtifact } =
-    useArtifact();
-  
-  const apiRef = useRef<any>(null);
-
-  useEffect(() => {
-    // Update API with actual implementations
-    if (typeof window !== 'undefined') {
-      const windowApi = (window as any).MemoriArtifactAPI;
-      
-      // Store reference to actual implementations
-      apiRef.current = {
-        /**
-         * Apri un artifact esistente
-         * @param artifact - Oggetto ArtifactData completo
-         */
-        openArtifact: (artifact: ArtifactData) => {
-          openArtifact(artifact);
-        },
-
-        /**
-         * Crea e apri un artifact con parametri semplici
-         * @param content - Contenuto dell'artifact (HTML, markdown, ecc.)
-         * @param mimeType - Tipo MIME (default: 'html')
-         * @param title - Titolo da mostrare (default: auto-generato)
-         */
-        createAndOpenArtifact: (
-          content: string,
-          mimeType: string = 'html',
-          title?: string
-        ) => {
-          const autoTitle = title || getTitleFromMimeType(mimeType);
-          const artifactId = `api-${Date.now()}-${Math.random()
-            .toString(36)
-            .substr(2, 9)}`;
-
-          // Create the artifact object
-          const artifact: ArtifactData = {
-            id: `artifact-ui-${artifactId}`,
-            artifactId,
-            content,
-            mimeType,
-            title: autoTitle,
-            timestamp: new Date(),
-            size: content.length,
-          };
-
-          // Create wrapped message text for artifact detection
-          // Don't reassign content parameter - use a new variable
-          let messageText = content;
-          if (!messageText.includes('class="memori-artifact"')) {
-            messageText = `<output class="memori-artifact" data-action="create" data-artifact-id="${artifactId}" data-mimetype="${mimeType}" data-title="${autoTitle}">${content}</output>`;
-          }
-
-          //we have to push in the history the artifact as message
-          pushMessage({
-            text: messageText,
-            timestamp: new Date().toISOString(),
-            fromUser: false as const,
-            media: [],
-            initial: false,
-            translatedText: undefined,
-            questionAnswered: undefined,
-            generatedByAI: false,
-            contextVars: undefined,
-            date: undefined,
-            placeName: undefined,
-            placeLatitude: undefined,
-            placeLongitude: undefined,
-            placeUncertaintyKm: undefined,
-          });
-
-          registerArtifact(artifact);
-          // Open the artifact immediately
-          openArtifact(artifact);
-        },
-
-        /**
-         * Crea un artifact da un elemento <output> esistente nel DOM
-         * @param outputElement - Elemento DOM <output class="memori-artifact">
-         * @returns artifactId
-         */
-        createFromOutputElement: (outputElement: HTMLOutputElement) => {
-          const content = outputElement.innerHTML;
-          const mimeType =
-            outputElement.getAttribute('data-mimetype') || 'html';
-          const title =
-            outputElement.getAttribute('data-title') ||
-            getTitleFromMimeType(mimeType);
-          const artifactId =
-            outputElement.getAttribute('data-artifact-id') ||
-            `api-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-
-          // Nascondi l'elemento originale
-          outputElement.style.display = 'none';
-          outputElement.setAttribute('data-memori-processed', 'true');
-
-          const artifact: ArtifactData = {
-            id: `artifact-ui-${artifactId}`,
-            artifactId,
-            content,
-            mimeType,
-            title,
-            timestamp: new Date(),
-            size: content.length,
-          };
-
-          // Create wrapped message text for artifact detection
-          // Don't reassign content - use a new variable
-          let messageText = content;
-          if (!messageText.includes('class="memori-artifact"')) {
-            messageText = `<output class="memori-artifact" data-action="create" data-artifact-id="${artifactId}" data-mimetype="${mimeType}" data-title="${title}">${content}</output>`;
-          }
-
-          pushMessage({
-            text: messageText,
-            timestamp: new Date().toISOString(),
-            fromUser: false as const,
-            media: [],
-            initial: false,
-            translatedText: undefined,
-            questionAnswered: undefined,
-            generatedByAI: false,
-            contextVars: undefined,
-            date: undefined,
-            placeName: undefined,
-            placeLatitude: undefined,
-            placeLongitude: undefined,
-            placeUncertaintyKm: undefined,
-          });
-
-          registerArtifact(artifact);
-          // Open the artifact immediately
-          openArtifact(artifact);
-
-          return artifact.artifactId;
-        },
-
-        /**
-         * Chiudi l'artifact drawer corrente
-         */
-        closeArtifact: () => {
-          closeArtifact();
-        },
-
-        /**
-         * Toggle fullscreen dell'artifact drawer
-         */
-        toggleFullscreen: () => {
-          toggleFullscreen();
-        },
-
-        /**
-         * Ottieni lo stato corrente del sistema artifacts
-         */
-        getState: () => {
-          return {
-            currentArtifact: state.currentArtifact,
-            isDrawerOpen: state.isDrawerOpen,
-            isFullscreen: state.isFullscreen,
-          };
-        },
-      };
-
-      // Update window API methods to use the real implementations
-      if (windowApi) {
-        windowApi.openArtifact = apiRef.current.openArtifact;
-        windowApi.createAndOpenArtifact = apiRef.current.createAndOpenArtifact;
-        windowApi.createFromOutputElement = apiRef.current.createFromOutputElement;
-        windowApi.closeArtifact = apiRef.current.closeArtifact;
-        windowApi.toggleFullscreen = apiRef.current.toggleFullscreen;
-        windowApi.getState = apiRef.current.getState;
-
-        // Mark API as ready
-        windowApi._setReady(true);
-        
-        // Process any pending calls that were queued before ready
-        const pendingCalls = windowApi._getPendingCalls();
-        if (pendingCalls.length > 0) {
-          pendingCalls.forEach((call: { method: string; args: any[] }) => {
-            try {
-              const method = (apiRef.current as any)[call.method];
-              if (method) {
-                method(...call.args);
-              }
-            } catch (error) {
-              // Swallow error, remove log
-            }
-          });
-          windowApi._clearPendingCalls();
-        }
-      } else {
-        // If windowApi doesn't exist yet, initialize it now
-        (window as any).MemoriArtifactAPI = {
-          ...apiRef.current,
-          _isReady: true,
-          _pendingCalls: [],
-          _setReady: (ready: boolean) => {
-            (window as any).MemoriArtifactAPI._isReady = ready;
-          },
-          _getPendingCalls: () => {
-            return (window as any).MemoriArtifactAPI._pendingCalls;
-          },
-          _clearPendingCalls: () => {
-            (window as any).MemoriArtifactAPI._pendingCalls = [];
-          },
-        };
-      }
-    }
-
-    return () => {
-      // Clean up the API on unmount
-      if (typeof window !== 'undefined') {
-        delete (window as any).MemoriArtifactAPI;
-      }
-    };
-  }, [openArtifact, closeArtifact, toggleFullscreen, state, pushMessage, registerArtifact]);
-
-  return null;
-};
-
-// Helper functions
-function getTitleFromMimeType(mimeType: string): string {
-  if (mimeType.includes('html')) return 'HTML Document';
-  if (mimeType.includes('markdown')) return 'Markdown Document';
-  if (mimeType.includes('javascript')) return 'JavaScript Code';
-  if (mimeType.includes('python')) return 'Python Code';
-  if (mimeType.includes('json')) return 'JSON Data';
-  if (mimeType.includes('css')) return 'CSS Stylesheet';
-  if (mimeType.includes('typescript')) return 'TypeScript Code';
-  if (mimeType.includes('xml')) return 'XML Document';
-  if (mimeType.includes('svg')) return 'SVG Image';
-  return 'Document';
-}
-
-function createArtifactHandler(
-  content: string,
-  mimeType: string,
-  title: string
-): HTMLDivElement {
-  const handler = document.createElement('div');
-  handler.className = 'memori-artifact-handler';
-  handler.style.cssText = `
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 16px;
-    margin: 12px 0;
-    background: white;
-    border: 1px solid #e5e7eb;
-    border-radius: 12px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-  `;
-
-  const icon = getIconForMimeType(mimeType);
-  const size = `${(content.length / 1024).toFixed(1)} KB`;
-
-  handler.innerHTML = `
-    <div style="font-size: 32px;">${icon}</div>
-    <div style="flex: 1;">
-      <div style="font-weight: 600; margin-bottom: 4px;">${escapeHtml(
-        title
-      )}</div>
-      <div style="font-size: 13px; color: #6b7280;">${mimeType} • ${size}</div>
-    </div>
-    <div>
-      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <polyline points="9 18 15 12 9 6"></polyline>
-      </svg>
-    </div>
-  `;
-
-  handler.addEventListener('mouseenter', () => {
-    handler.style.background = '#faf5ff';
-    handler.style.borderColor = '#9333ea';
-  });
-
-  handler.addEventListener('mouseleave', () => {
-    handler.style.background = 'white';
-    handler.style.borderColor = '#e5e7eb';
-  });
-
-  return handler;
-}
-
-function getIconForMimeType(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 '📄';
-}
-
-function escapeHtml(text: string): string {
-  const div = document.createElement('div');
-  div.textContent = text;
-  return div.innerHTML;
-}