@memori.ai/memori-react 8.45.2 → 8.45.5

package/src/components/MemoriArtifactSystem/components/ArtifactActions/hooks/useCopyArtifact.ts

@@ -1,619 +0,0 @@
-/**
- * useCopyArtifact hook for handling artifact copy operations
- * Supports multiple formats and PDF generation
- */
-
-import { useState, useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  CopyFormat,
-  UseCopyArtifactReturn,
-  CopyState,
-  PDFExportOptions,
-} from '../types';
-import { pdfExporter } from '../utils/PDFExporter';
-import { isSafari } from '../../../../../helpers/utils';
-import { marked } from 'marked';
-import DOMPurify from 'dompurify';
-
-export const useCopyArtifact = (
-  artifact: { content: string; mimeType: string; title?: string },
-  onCopy?: () => void,
-  onDownload?: () => void,
-  onPrint?: () => void
-): UseCopyArtifactReturn => {
-  const { t } = useTranslation();
-  const [copyState, setCopyState] = useState<CopyState>({
-    isOpen: false,
-    loading: false,
-    success: false,
-    error: null,
-    activeFormat: null,
-  });
-
-  /**
-   * Render markdown content to HTML
-   */
-  const renderMarkdownToHtml = useCallback((markdown: string): string => {
-    try {
-      // Configure marked for basic markdown rendering
-      marked.use({
-        async: false,
-        gfm: true,
-        pedantic: false,
-        renderer: {
-          link: ({ href, title, text }: { href: string | null; title?: string | null; text: string }) => {
-            if (!href) return text;
-            const cleanHref = href.startsWith('http') ? href : `https://${href}`;
-            return `<a href="${cleanHref}" target="_blank" rel="noopener noreferrer"${title ? ` title="${title}"` : ''}>${text}</a>`;
-          },
-        },
-      });
-
-      // Parse markdown to HTML
-      const htmlContent = marked.parse(markdown).toString().trim();
-
-      // Sanitize HTML for security
-      const sanitizedHtml = DOMPurify.sanitize(htmlContent, {
-        ADD_ATTR: ['target', 'rel'],
-        ALLOWED_TAGS: [
-          'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
-          'p', 'br', 'strong', 'em', 'u', 's',
-          'ul', 'ol', 'li', 'blockquote', 'pre', 'code',
-          'a', 'img', 'table', 'thead', 'tbody', 'tr', 'th', 'td',
-          'div', 'span'
-        ],
-        ALLOWED_ATTR: ['href', 'title', 'target', 'rel', 'src', 'alt', 'class', 'id']
-      });
-
-      return sanitizedHtml;
-    } catch (error) {
-      console.error('Error rendering markdown:', error);
-      // Fallback to basic HTML escaping
-      return markdown
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/\n/g, '<br>');
-    }
-  }, []);
-
-  /**
-   * Get available copy formats based on artifact mimeType
-   */
-  const formats = useMemo((): CopyFormat[] => {
-    const baseFormats: CopyFormat[] = [];
-
-    switch (artifact.mimeType) {
-      case 'markdown':
-        baseFormats.push(
-          {
-            id: 'markdown',
-            label: t('artifact.downloadAsMarkdown') || 'Download as Markdown',
-            description: t('artifact.downloadRawMarkdownText') || 'Download raw markdown text',
-            mimeType: 'text/markdown',
-            action: 'download',
-          },
-          {
-            id: 'pdf',
-            label: t('artifact.downloadAsPdf') || 'Download as PDF',
-            description: t('artifact.exportAsPdfDocument') || 'Export as PDF document',
-            mimeType: 'application/pdf',
-            action: 'pdf',
-            isAsync: true,
-          }
-        );
-        break;
-
-      case 'html':
-        baseFormats.push({
-          id: 'html',
-          label: t('artifact.downloadAsHtml') || 'Download as HTML',
-          description: t('artifact.downloadFormattedHtml') || 'Download formatted HTML',
-          mimeType: 'text/html',
-          action: 'download',
-        });
-        break;
-
-      case 'json':
-        baseFormats.push({
-          id: 'json',
-          label: t('artifact.downloadAsJson') || 'Download as JSON',
-          description: t('artifact.downloadJsonData') || 'Download JSON data',
-          mimeType: 'application/json',
-          action: 'download',
-        });
-        break;
-
-      case 'image/png':
-        baseFormats.push({
-          id: 'png',
-          label: t('artifact.downloadAsPng') || 'Download as PNG',
-          description: t('artifact.downloadPngImage') || 'Download PNG image',
-          mimeType: 'image/png',
-          action: 'download',
-        });
-        break;
-
-      case 'image/jpeg':
-        baseFormats.push({
-          id: 'jpeg',
-          label: t('artifact.downloadAsJpeg') || 'Download as JPEG',
-          description: t('artifact.downloadJpegImage') || 'Download JPEG image',
-          mimeType: 'image/jpeg',
-          action: 'download',
-        });
-        break;
-
-      case 'image/gif':
-        baseFormats.push({
-          id: 'gif',
-          label: t('artifact.downloadAsGif') || 'Download as GIF',
-          description: t('artifact.downloadGifImage') || 'Download GIF image',
-          mimeType: 'image/gif',
-          action: 'download',
-        });
-        break;
-
-      case 'image/webp':
-        baseFormats.push({
-          id: 'webp',
-          label: t('artifact.downloadAsWebp') || 'Download as WebP',
-          description: t('artifact.downloadWebpImage') || 'Download WebP image',
-          mimeType: 'image/webp',
-          action: 'download',
-        });
-        break;
-
-      case 'image/svg+xml':
-        baseFormats.push(
-          {
-            id: 'svg',
-            label: t('artifact.copyAsSvg') || 'Copy as SVG',
-            description: t('artifact.copySvgSourceCode') || 'Copy SVG source code',
-            mimeType: 'image/svg+xml',
-            action: 'copy',
-          },
-          {
-            id: 'plain',
-            label: t('artifact.copyAsPlainText') || 'Copy as Plain Text',
-            description: t('artifact.copyAsText') || 'Copy as text',
-            mimeType: 'text/plain',
-            action: 'copy',
-          }
-        );
-        break;
-
-      default:
-        // Handle code artifacts (application/vnd.ant.code)
-        if (artifact.mimeType.startsWith('application/vnd.ant.code')) {
-          const language = artifact.mimeType.split('.').pop() || 'text';
-          baseFormats.push(
-            {
-              id: 'code',
-              label: t('artifact.copyAsLanguage', { language: language.charAt(0).toUpperCase() + language.slice(1) }) || `Copy as ${language.charAt(0).toUpperCase() + language.slice(1)}`,
-              description: t('artifact.copyLanguageCode', { language }) || `Copy ${language} code`,
-              mimeType: artifact.mimeType,
-              action: 'copy',
-            },
-            {
-              id: 'plain',
-              label: t('artifact.copyAsPlainText') || 'Copy as Plain Text',
-              description: t('artifact.copyWithoutSyntaxHighlighting') || 'Copy without syntax highlighting',
-              mimeType: 'text/plain',
-              action: 'copy',
-            }
-          );
-        } else {
-          // Generic text content
-          baseFormats.push({
-            id: 'text',
-            label: t('artifact.copyAsText') || 'Copy as Text',
-            description: t('artifact.copyTextContent') || 'Copy text content',
-            mimeType: 'text/plain',
-            action: 'copy',
-          });
-        }
-        break;
-    }
-
-    return baseFormats;
-  }, [artifact.mimeType, t]);
-
-  /**
-   * Convert content based on format
-   */
-  const convertContent = useCallback(
-    (format: CopyFormat): string => {
-      const { content } = artifact;
-
-      switch (format.id) {
-        case 'plain':
-          // Strip HTML tags and markdown formatting
-          return content
-            .replace(/<[^>]*>/g, '') // Remove HTML tags
-            .replace(/#{1,6}\s+/g, '') // Remove markdown headers
-            .replace(/\*\*(.*?)\*\*/g, '$1') // Remove bold
-            .replace(/\*(.*?)\*/g, '$1') // Remove italic
-            .replace(/`([^`]+)`/g, '$1') // Remove inline code
-            .replace(/```[\s\S]*?```/g, '') // Remove code blocks
-            .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') // Remove links
-            .trim();
-
-        case 'html':
-          // Return HTML content as-is
-          return content;
-
-        case 'raw':
-          // Return raw HTML with escaped characters
-          return content
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;');
-
-        case 'markdown':
-          // Return markdown content as-is
-          return content;
-
-        case 'svg':
-          // Return SVG content as-is
-          return content;
-
-        default:
-          // Return content as-is for code and other formats
-          return content;
-      }
-    },
-    [artifact.content]
-  );
-
-  /**
-   * Copy content to clipboard
-   */
-  const copyToClipboard = useCallback(async (text: string): Promise<void> => {
-    if (navigator.clipboard && window.isSecureContext) {
-      await navigator.clipboard.writeText(text);
-    } else {
-      // Fallback for older browsers
-      const textArea = document.createElement('textarea');
-      textArea.value = text;
-      textArea.style.position = 'fixed';
-      textArea.style.left = '-999999px';
-      textArea.style.top = '-999999px';
-      document.body.appendChild(textArea);
-      textArea.focus();
-      textArea.select();
-      document.execCommand('copy');
-      document.body.removeChild(textArea);
-    }
-  }, []);
-
-  /**
-   * Handle copy operation
-   */
-  const handleCopy = useCallback(
-    async (format: CopyFormat): Promise<void> => {
-      setCopyState(prev => ({
-        ...prev,
-        loading: true,
-        error: null,
-        activeFormat: format.id,
-      }));
-
-      try {
-        if (format.action === 'pdf') {
-          // Handle PDF generation
-          // First check if PDF export is supported in this browser
-          // If not, throw a translated error message
-          if (!pdfExporter.isSupported()) {
-            throw new Error(t('artifact.pdfExportNotSupported') || 'PDF export is not supported in this browser');
-          }
-
-          // Configure PDF export options with sensible defaults
-          const pdfOptions: PDFExportOptions = {
-            title: artifact.title || 'Artifact', // Use artifact title or fallback
-            fontSize: '12pt', // Standard readable font size
-            fontFamily: 'system-ui, -apple-system, sans-serif', // System fonts
-            lineHeight: '1.6', // Comfortable line height for reading
-            color: '#333', // Dark gray text for good contrast
-            backgroundColor: '#fff', // White background
-          };
-
-          try {
-            // Export the artifact content to PDF using the configured options
-            await pdfExporter.exportAsPDF(
-              artifact.content,
-              artifact.title || 'Artifact',
-              pdfOptions
-            );
-
-            // Call the optional onPrint callback if provided
-            onPrint?.();
-          } catch (pdfError) {
-            // If PDF export fails on Safari, provide helpful error message
-            if (isSafari()) {
-              // For Safari, we consider this a "success" since the window opened
-              // but we show a helpful message to the user
-              setCopyState(prev => ({
-                ...prev,
-                loading: false,
-                success: true,
-                error: null,
-              }));
-
-              // Show success message briefly, then reset
-              setTimeout(() => {
-                setCopyState(prev => ({
-                  ...prev,
-                  success: false,
-                }));
-              }, 3000);
-
-              // Call the optional onPrint callback if provided
-              onPrint?.();
-              return; // Don't throw error for Safari
-            }
-            throw pdfError;
-          }
-        } else if (format.action === 'print') {
-          // Handle print operation
-          const printContent = convertContent(format);
-          const printWindow = window.open('', '_blank');
-
-          if (!printWindow) {
-            throw new Error(t('artifact.popupBlocked') || 'Popup blocked! Please enable popups to print.');
-          }
-
-          let htmlContent: string;
-
-          // For markdown files, render as HTML with proper styling
-          if (artifact.mimeType === 'markdown') {
-            const renderedHtml = renderMarkdownToHtml(artifact.content);
-            htmlContent = `
-            <!DOCTYPE html>
-            <html>
-            <head>
-              <title>${artifact.title || 'Artifact'}</title>
-              <style>
-                body {
-                  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
-                  line-height: 1.6;
-                  color: #333;
-                  max-width: 800px;
-                  margin: 0 auto;
-                  padding: 20px;
-                  background-color: #fff;
-                }
-                h1, h2, h3, h4, h5, h6 {
-                  color: #2c3e50;
-                  margin-top: 1.5em;
-                  margin-bottom: 0.5em;
-                }
-                h1 { border-bottom: 2px solid #eee; padding-bottom: 10px; }
-                h2 { border-bottom: 1px solid #eee; padding-bottom: 5px; }
-                code {
-                  background-color: #f4f4f4;
-                  padding: 2px 4px;
-                  border-radius: 3px;
-                  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-                }
-                pre {
-                  background-color: #f8f8f8;
-                  padding: 15px;
-                  border-radius: 5px;
-                  overflow-x: auto;
-                  border: 1px solid #e1e1e1;
-                }
-                pre code {
-                  background-color: transparent;
-                  padding: 0;
-                }
-                blockquote {
-                  border-left: 4px solid #ddd;
-                  margin: 0;
-                  padding-left: 20px;
-                  color: #666;
-                }
-                table {
-                  border-collapse: collapse;
-                  width: 100%;
-                  margin: 1em 0;
-                }
-                th, td {
-                  border: 1px solid #ddd;
-                  padding: 8px 12px;
-                  text-align: left;
-                }
-                th {
-                  background-color: #f5f5f5;
-                  font-weight: 600;
-                }
-                a {
-                  color: #007acc;
-                  text-decoration: none;
-                }
-                a:hover {
-                  text-decoration: underline;
-                }
-                ul, ol {
-                  padding-left: 20px;
-                }
-                img {
-                  max-width: 100%;
-                  height: auto;
-                }
-                @media print { 
-                  body { margin: 0; } 
-                }
-              </style>
-            </head>
-            <body>${renderedHtml}</body>
-            </html>
-          `;
-          } else {
-            // For other file types, use the original formatting
-            htmlContent = `
-            <!DOCTYPE html>
-            <html>
-            <head>
-              <title>${artifact.title || 'Artifact'}</title>
-              <style>
-                body { 
-                  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; 
-                  white-space: pre-wrap; 
-                  margin: 20px; 
-                  line-height: 1.4;
-                }
-                @media print { 
-                  body { margin: 0; } 
-                }
-              </style>
-            </head>
-            <body>${printContent
-              .replace(/</g, '&lt;')
-              .replace(/>/g, '&gt;')}</body>
-            </html>
-          `;
-          }
-
-          printWindow.document.write(htmlContent);
-          printWindow.document.close();
-
-          setTimeout(() => {
-            printWindow.print();
-            printWindow.close();
-          }, 500);
-
-          onPrint?.();
-        } else if (format.action === 'download') {
-          // Handle download operation
-          const contentToDownload = convertContent(format);
-          const blob = new Blob([contentToDownload], { type: format.mimeType });
-          const url = URL.createObjectURL(blob);
-          const a = document.createElement('a');
-          let mimeType = format.mimeType.split('/')[1];
-
-          if (mimeType === 'x-python') {
-            mimeType = 'py';
-          } else if (mimeType === 'x-java') {
-            mimeType = 'java';
-          } else if (mimeType === 'x-c++'){
-            mimeType = 'cpp';
-          } else if (mimeType === 'markdown') {
-            mimeType = 'md';
-          }
-          
-          a.href = url;
-          a.download = `${artifact.title || 'Artifact'}.${
-            mimeType
-          }`;
-          a.click();
-          URL.revokeObjectURL(url);
-          onDownload?.();
-        } else if (format.action === 'copy') {
-          // Handle regular copy operation
-          const contentToCopy = convertContent(format);
-          await copyToClipboard(contentToCopy);
-          onCopy?.();
-        }
-
-        setCopyState(prev => ({
-          ...prev,
-          loading: false,
-          success: format.action === 'copy',
-          error: null,
-        }));
-
-        // Reset success state after delay (only for copy actions)
-        if (format.action === 'copy') {
-          setTimeout(() => {
-            setCopyState(prev => ({
-              ...prev,
-              success: false,
-            }));
-          }, 2000);
-        }
-      } catch (error) {
-        console.error('Copy operation failed:', error);
-        setCopyState(prev => ({
-          ...prev,
-          loading: false,
-          success: false,
-          error:
-            error instanceof Error ? error.message : 'Copy operation failed',
-        }));
-
-        // Reset error state after delay
-        setTimeout(() => {
-          setCopyState(prev => ({
-            ...prev,
-            error: null,
-          }));
-        }, 3000);
-      }
-    },
-    [artifact, convertContent, copyToClipboard, onCopy, onPrint, t, renderMarkdownToHtml]
-  );
-
-  /**
-   * Handle copy button click - always copy the first/default format
-   */
-  const handleCopyClick = useCallback(async () => {
-    // Handle regular copy operation
-    const contentToCopy = convertContent(formats[0]);
-    await copyToClipboard(contentToCopy);
-
-    setCopyState(prev => ({
-      ...prev,
-      loading: false,
-      success: true,
-      error: null,
-    }));
-
-    onCopy?.();
-  }, [convertContent, copyToClipboard, onCopy, formats]);
-
-  /**
-   * Toggle dropdown visibility
-   */
-  const toggleDropdown = useCallback(() => {
-    setCopyState(prev => ({
-      ...prev,
-      isOpen: !prev.isOpen,
-      error: null,
-    }));
-  }, []);
-
-  /**
-   * Close dropdown
-   */
-  const closeDropdown = useCallback(() => {
-    setCopyState(prev => ({
-      ...prev,
-      isOpen: false,
-    }));
-  }, []);
-
-  /**
-   * Reset all state
-   */
-  const resetState = useCallback(() => {
-    setCopyState({
-      isOpen: false,
-      loading: false,
-      success: false,
-      error: null,
-      activeFormat: null,
-    });
-  }, []);
-
-  return {
-    copyState,
-    formats,
-    handleCopy,
-    handleCopyClick,
-    toggleDropdown,
-    closeDropdown,
-    resetState,
-  };
-};

package/src/components/MemoriArtifactSystem/components/ArtifactActions/index.ts

@@ -1,9 +0,0 @@
-/**
- * Export all artifact copy system components and utilities
- */
-
-export { default as CopyButtonWithDropdown } from './components/CopyButtonWithDropdown';
-export { default as CopyMenuItem } from './components/CopyMenuItem';
-export { useCopyArtifact } from './hooks/useCopyArtifact';
-export { pdfExporter } from './utils/PDFExporter';
-export * from './types';