@memori.ai/memori-react 8.11.0 → 8.13.0

package/src/components/UploadButton/UploadButton.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 import { DocumentIcon } from '../icons/Document';
 import { ImageIcon } from '../icons/Image';
 import { UploadIcon } from '../icons/Upload';
@@ -9,10 +9,10 @@ import UploadDocuments from './UploadDocuments/UploadDocuments';
 import UploadImages from './UploadImages/UploadImages';
 import { useTranslation } from 'react-i18next';
 import memoriApiClient from '@memori.ai/memori-api-client';
+import Tooltip from '../ui/Tooltip';
 
 // Constants
-const MAX_IMAGES = 5;
-const MAX_DOCUMENTS = 5;
+const MAX_MEDIA = 10;
 
 // Props interface
 interface UploadManagerProps {
@@ -42,29 +42,23 @@ const UploadButton: React.FC<UploadManagerProps> = ({
 }) => {
   // State
   const [isLoading, setIsLoading] = useState(false);
-  const [menuOpen, setMenuOpen] = useState(false);
   const [errors, setErrors] = useState<
     { message: string; severity: 'error' | 'warning' | 'info' }[]
   >([]);
+  const [isDragging, setIsDragging] = useState(false);
   const { t, i18n } = useTranslation();
 
   // Refs
-  const menuRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const documentRef = useRef<HTMLDivElement>(null);
   const imageRef = useRef<HTMLDivElement>(null);
+  const unifiedInputRef = useRef<HTMLInputElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
-  // Calculate image count and remaining slots
-  const currentImageCount = documentPreviewFiles.filter(
-    file => file.type === 'image'
-  ).length;
-  const remainingSlots = MAX_IMAGES - currentImageCount;
-  const currentDocumentCount = documentPreviewFiles.filter(
-    file => file.type === 'document'
-  ).length;
-  const remainingDocumentSlots = MAX_DOCUMENTS - currentDocumentCount;
-  const hasReachedImageLimit = remainingSlots <= 0;
-  const hasReachedDocumentLimit = remainingDocumentSlots <= 0;
+  // Calculate total media count
+  const currentMediaCount = documentPreviewFiles.length;
+  const remainingSlots = MAX_MEDIA - currentMediaCount;
+  const hasReachedMediaLimit = remainingSlots <= 0;
 
   // Error handling
   const removeError = (errorMessage: string) => {
@@ -79,33 +73,259 @@ const UploadButton: React.FC<UploadManagerProps> = ({
     setTimeout(() => removeError(error.message), 5000);
   };
 
-  // Menu handling
-  const toggleMenu = () => {
-    setMenuOpen(prev => !prev);
+  // Check if file is an image
+  const isImageFile = (file: File): boolean => {
+    const imageTypes = ['image/jpeg', 'image/jpg', 'image/png'];
+    const imageExtensions = ['.jpg', '.jpeg', '.png'];
+    const fileExt = `.${file.name.split('.').pop()?.toLowerCase()}`;
+    return imageTypes.includes(file.type) || imageExtensions.includes(fileExt);
+  };
+
+  // Check if file is a document
+  const isDocumentFile = (file: File): boolean => {
+    const documentExtensions = ['.pdf', '.txt', '.json', '.xlsx', '.csv', '.md', '.html'];
+    const fileExt = `.${file.name.split('.').pop()?.toLowerCase()}`;
+    return documentExtensions.includes(fileExt);
+  };
+
+  // Use refs to access latest values in event handlers
+  const isMediaAcceptedRef = useRef(isMediaAccepted);
+  const currentMediaCountRef = useRef(currentMediaCount);
+  const addErrorRef = useRef(addError);
+
+  useEffect(() => {
+    isMediaAcceptedRef.current = isMediaAccepted;
+    currentMediaCountRef.current = currentMediaCount;
+    addErrorRef.current = addError;
+  }, [isMediaAccepted, currentMediaCount, addError]);
+
+  // Handle unified file selection
+  const handleUnifiedFileSelection = useCallback((files: FileList | File[]) => {
+    const fileArray = Array.from(files);
+    if (fileArray.length === 0) return;
+
+    const imageFiles: File[] = [];
+    const documentFiles: File[] = [];
+
+    // Separate files by type
+    fileArray.forEach(file => {
+      if (isImageFile(file)) {
+        imageFiles.push(file);
+      } else if (isDocumentFile(file)) {
+        documentFiles.push(file);
+      } else {
+        addErrorRef.current({
+          message: `File "${file.name}" is not a supported image or document type`,
+          severity: 'error',
+        });
+      }
+    });
+
+    // Calculate total files to be added
+    const totalFilesToAdd = imageFiles.length + documentFiles.length;
+    const newTotalCount = currentMediaCountRef.current + totalFilesToAdd;
+
+    // Check if adding these files would exceed the limit
+    if (newTotalCount > MAX_MEDIA) {
+      addErrorRef.current({
+        message: `Maximum ${MAX_MEDIA} media files allowed.`,
+        severity: 'error',
+      });
+      return;
+    }
+
+    // Process images
+    if (imageFiles.length > 0) {
+      if (!isMediaAcceptedRef.current) {
+        addErrorRef.current({
+          message:
+            t('upload.mediaNotAccepted') ?? 'Media uploads are not accepted',
+          severity: 'info',
+        });
+      } else {
+        // Trigger image upload by creating a synthetic event
+        const imageInput = imageRef.current?.querySelector('input[type="file"]') as HTMLInputElement;
+        if (imageInput) {
+          const dataTransfer = new DataTransfer();
+          imageFiles.forEach(file => {
+            try {
+              dataTransfer.items.add(file);
+            } catch (err) {
+              console.warn('Failed to add image file to DataTransfer:', err);
+            }
+          });
+          
+          // Only proceed if we successfully added files
+          if (dataTransfer.files.length > 0) {
+            imageInput.files = dataTransfer.files;
+            const changeEvent = new Event('change', { bubbles: true });
+            imageInput.dispatchEvent(changeEvent);
+          }
+        }
+      }
+    }
+
+    // Process documents
+    if (documentFiles.length > 0) {
+      // Trigger document upload by creating a synthetic event
+      const documentInput = documentRef.current?.querySelector('input[type="file"]') as HTMLInputElement;
+      if (documentInput) {
+        const dataTransfer = new DataTransfer();
+        documentFiles.forEach(file => {
+          try {
+            dataTransfer.items.add(file);
+          } catch (err) {
+            console.warn('Failed to add document file to DataTransfer:', err);
+          }
+        });
+        
+        // Only proceed if we successfully added files
+        if (dataTransfer.files.length > 0) {
+          documentInput.files = dataTransfer.files;
+          const changeEvent = new Event('change', { bubbles: true });
+          documentInput.dispatchEvent(changeEvent);
+        }
+      }
+    }
+  }, [t]);
+
+  // Handle button click - open file chooser directly
+  const handleButtonClick = () => {
+    if (unifiedInputRef.current) {
+      unifiedInputRef.current.click();
+    }
   };
 
-  const closeMenu = () => {
-    setMenuOpen(false);
+  // Handle file input change
+  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (files && files.length > 0) {
+      handleUnifiedFileSelection(files);
+    }
+    // Reset input value to allow selecting the same file again
+    if (unifiedInputRef.current) {
+      unifiedInputRef.current.value = '';
+    }
   };
 
-  // Click outside handler
+  // Paste handler for files
   useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        menuRef.current &&
-        buttonRef.current &&
-        !menuRef.current.contains(event.target as Node) &&
-        !buttonRef.current.contains(event.target as Node)
-      ) {
-        closeMenu();
+    const handlePaste = (e: ClipboardEvent) => {
+      const clipboardData = e.clipboardData;
+      if (!clipboardData) {
+        console.log('[UploadButton] handlePaste: No clipboardData available.');
+        return;
+      }
+
+      const files: File[] = [];
+      
+      // Helper to check if a file is already in the array
+      const isDuplicate = (file: File) => {
+        return files.some(f => 
+          f.name === file.name && 
+          f.size === file.size && 
+          f.lastModified === file.lastModified
+        );
+      };
+      
+      // First, try to get files directly from clipboardData.files (most reliable for multiple files)
+      if (clipboardData.files && clipboardData.files.length > 0) {
+        const clipboardFiles = Array.from(clipboardData.files);
+        console.log(`[UploadButton] handlePaste: clipboardData.files found`, clipboardFiles);
+        clipboardFiles.forEach(file => {
+          if (!isDuplicate(file)) {
+            files.push(file);
+          } else {
+            console.log(`[UploadButton] handlePaste: Duplicate file skipped from clipboardData.files:`, file);
+          }
+        });
+      }
+      
+      // Also check items array (some browsers populate this instead of or in addition to files)
+      const items = clipboardData.items;
+      if (items) {
+        for (let i = 0; i < items.length; i++) {
+          const item = items[i];
+          if (item.kind === 'file') {
+            const file = item.getAsFile();
+            if (file && !isDuplicate(file)) {
+              console.log(`[UploadButton] handlePaste: Adding file from items array:`, file);
+              files.push(file);
+            } else if (file) {
+              console.log(`[UploadButton] handlePaste: Duplicate file skipped from items array:`, file);
+            }
+          }
+        }
+      }
+
+      if (files.length > 0) {
+        console.log(`[UploadButton] handlePaste: ${files.length} file(s) to process from paste`, files);
+        e.preventDefault();
+        handleUnifiedFileSelection(files);
+      } else {
+        console.log('[UploadButton] handlePaste: No files found in paste event.');
+      }
+    };
+
+    // Add paste listener to document
+    document.addEventListener('paste', handlePaste);
+    return () => {
+      document.removeEventListener('paste', handlePaste);
+    };
+  }, [handleUnifiedFileSelection]);
+
+  // Drag and drop handlers
+  useEffect(() => {
+    let dragCounter = 0;
+
+    const handleDragEnter = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter++;
+      if (dragCounter === 1) {
+        setIsDragging(true);
+      }
+    };
+
+    const handleDragLeave = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter--;
+      if (dragCounter === 0) {
+        setIsDragging(false);
       }
     };
 
-    document.addEventListener('mousedown', handleClickOutside);
+    const handleDragOver = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+
+    const handleDrop = (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter = 0;
+      setIsDragging(false);
+
+      const files = e.dataTransfer?.files;
+      if (files && files.length > 0) {
+        handleUnifiedFileSelection(files);
+      }
+    };
+
+    // Add drag and drop listeners to document
+    document.addEventListener('dragenter', handleDragEnter);
+    document.addEventListener('dragleave', handleDragLeave);
+    document.addEventListener('dragover', handleDragOver);
+    document.addEventListener('drop', handleDrop);
+
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('dragenter', handleDragEnter);
+      document.removeEventListener('dragleave', handleDragLeave);
+      document.removeEventListener('dragover', handleDragOver);
+      document.removeEventListener('drop', handleDrop);
     };
-  }, []);
+  }, [handleUnifiedFileSelection]);
 
   // Handler for document files - now supports multiple documents
   const handleDocumentFiles = (
@@ -161,6 +381,7 @@ ${file.content}
       '.xlsx',
       '.csv',
       '.md',
+      '.html',
     ];
     const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
 
@@ -267,56 +488,6 @@ ${file.content}
     addError(error);
   };
 
-  // When document option is clicked
-  const handleDocumentClick = () => {
-    // Check if document limit has been reached
-    if (hasReachedDocumentLimit) {
-      addError({
-        message: `Maximum ${MAX_DOCUMENTS} documents allowed.`,
-        severity: 'error',
-      });
-      closeMenu();
-      return;
-    }
-
-    // Find the actual button in the UploadDocuments component and click it
-    const documentButtonElement = documentRef.current?.querySelector('button');
-    if (documentButtonElement) {
-      documentButtonElement.click();
-    }
-    closeMenu();
-  };
-
-  // When image option is clicked
-  const handleImageClick = () => {
-    if (!isMediaAccepted) {
-      addError({
-        message:
-          t('upload.mediaNotAccepted') ?? 'Media uploads are not accepted',
-        severity: 'info',
-      });
-      closeMenu();
-      return;
-    }
-
-    if (hasReachedImageLimit) {
-      addError({
-        message:
-          t('upload.maxImagesReached', { max: MAX_IMAGES }) ??
-          `Maximum ${MAX_IMAGES} images already uploaded`,
-        severity: 'warning',
-      });
-      closeMenu();
-      return;
-    }
-
-    // If all checks pass, click the button in UploadImages component
-    const imageButtonElement = imageRef.current?.querySelector('button');
-    if (imageButtonElement) {
-      imageButtonElement.click();
-    }
-    closeMenu();
-  };
 
   // Set loading state for child components
   const handleLoadingChange = (loading: boolean) => {
@@ -324,7 +495,23 @@ ${file.content}
   };
 
   return (
-    <div className="memori--unified-upload-wrapper">
+    <div 
+      className={cx('memori--unified-upload-wrapper', {
+        'memori--dragging': isDragging,
+      })}
+      ref={wrapperRef}
+    >
+      {/* Unified file input - accepts both images and documents */}
+      <input
+        ref={unifiedInputRef}
+        type="file"
+        accept=".jpg,.jpeg,.png,.pdf,.txt,.json,.xlsx,.csv,.md,.html"
+        multiple
+        className="memori--upload-file-input"
+        onChange={handleFileInputChange}
+        style={{ display: 'none' }}
+      />
+
       {/* Main upload button */}
       <button
         ref={buttonRef}
@@ -337,9 +524,9 @@ ${file.content}
           'memori--unified-upload-button',
           { 'memori--error': errors.length > 0 }
         )}
-        onClick={toggleMenu}
-        disabled={isLoading}
-        title={t('upload.uploadFiles') ?? 'Upload files'}
+        onClick={handleButtonClick}
+        disabled={isLoading || hasReachedMediaLimit}
+        title={t('upload.uploadFiles', { shortcut: /Mac|iPhone|iPod|iPad/i.test(navigator.platform) || navigator.userAgent.includes('Mac') ? 'Cmd' : 'Ctrl' }) ?? 'Upload files (drag & drop)'}
       >
         {isLoading ? (
           <Spin spinning className="memori--upload-icon" />
@@ -348,94 +535,14 @@ ${file.content}
         )}
       </button>
 
-      {/* Image count indicator - moved here from UploadImages */}
-      {currentImageCount > 0 && (
-        <div
-          className={cx('memori--image-count', {
-            'memori--image-count-full': hasReachedImageLimit,
-          })}
-        >
-          {currentImageCount}/{MAX_IMAGES}
-        </div>
-      )}
-
-      {/* Document count indicator */}
-      {currentDocumentCount > 0 && (
+      {/* Media count indicator */}
+      {currentMediaCount > 0 && (
         <div
           className={cx('memori--document-count', {
-            'memori--document-count-full': hasReachedDocumentLimit,
+            'memori--document-count-full': hasReachedMediaLimit,
           })}
         >
-          {currentDocumentCount}/{MAX_DOCUMENTS}
-        </div>
-      )}
-
-      {/* Floating menu */}
-      {menuOpen && (
-        <div className="memori--upload-menu" ref={menuRef}>
-          <div
-            className={cx('memori--upload-menu-item', {
-              'memori--upload-menu-item--disabled': hasReachedDocumentLimit,
-            })}
-            onClick={handleDocumentClick}
-            title={
-              hasReachedDocumentLimit
-                ? t('upload.maxDocumentsReached', { max: MAX_DOCUMENTS }) ??
-                  `Maximum ${MAX_DOCUMENTS} documents already uploaded`
-                : remainingDocumentSlots === 1
-                ? t('upload.lastDocumentSlot') ?? 'Upload last document'
-                : t('upload.uploadDocument', {
-                    remaining: remainingDocumentSlots,
-                  }) ?? `Upload document (${remainingDocumentSlots} remaining)`
-            }
-          >
-            <DocumentIcon className="memori--upload-menu-icon" />
-            <span>
-              {t('upload.uploadDocument') ?? 'Upload document'}
-              {/* {currentDocumentCount > 0 && (
-                <span className="memori--upload-slots-info">
-                  {hasReachedDocumentLimit
-                    ? ` (${t('upload.maxReached') ?? 'Max reached'})`
-                    : ` (${remainingDocumentSlots} ${
-                        t('upload.remaining') ?? 'remaining'
-                      })`}
-                </span>
-              )} */}
-            </span>
-          </div>
-
-          <div
-            className={cx('memori--upload-menu-item', {
-              'memori--upload-menu-item--disabled':
-                !isMediaAccepted || hasReachedImageLimit,
-            })}
-            onClick={handleImageClick}
-            title={
-              !isMediaAccepted
-                ? t('upload.mediaNotAccepted') ?? 'Media uploads not accepted'
-                : hasReachedImageLimit
-                ? t('upload.maxImagesReached', { max: MAX_IMAGES }) ??
-                  `Maximum ${MAX_IMAGES} images already uploaded`
-                : remainingSlots === 1
-                ? t('upload.lastImageSlot') ?? 'Upload last image'
-                : t('upload.uploadImage', { remaining: remainingSlots }) ??
-                  `Upload image (${remainingSlots} remaining)`
-            }
-          >
-            <ImageIcon className="memori--upload-menu-icon-image" />
-            <span>
-              {t('upload.uploadImage') ?? 'Upload image'}
-              {/* {currentImageCount > 0 && (
-                <span className="memori--upload-slots-info">
-                  {hasReachedImageLimit
-                    ? ` (${t('upload.maxReached') ?? 'Max reached'})`
-                    : ` (${remainingSlots} ${
-                        t('upload.remaining') ?? 'remaining'
-                      })`}
-                </span>
-              )} */}
-            </span>
-          </div>
+          {currentMediaCount}/{MAX_MEDIA}
         </div>
       )}
 
@@ -443,7 +550,7 @@ ${file.content}
       <div className="memori--hidden-uploader" ref={documentRef}>
         <UploadDocuments
           setDocumentPreviewFiles={handleDocumentFiles}
-          maxDocuments={MAX_DOCUMENTS}
+          maxDocuments={MAX_MEDIA}
           documentPreviewFiles={documentPreviewFiles}
           onLoadingChange={handleLoadingChange}
           onDocumentError={handleDocumentError}
@@ -461,7 +568,7 @@ ${file.content}
           documentPreviewFiles={documentPreviewFiles}
           isMediaAccepted={isMediaAccepted}
           onLoadingChange={handleLoadingChange}
-          maxImages={MAX_IMAGES}
+          maxImages={MAX_MEDIA}
           memoriID={memoriID}
           onImageError={handleImageError}
           onValidateImageFile={validateImageFile}

package/src/components/UploadButton/UploadDocuments/UploadDocuments.tsx

@@ -220,7 +220,7 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
 
       if (fileExt === 'pdf') {
         text = await extractTextFromPDF(file);
-      } else if (['txt', 'md', 'json', 'csv'].includes(fileExt)) {
+      } else if (['txt', 'md', 'json', 'csv', 'html'].includes(fileExt)) {
         text = await file.text();
       } else if (fileExt === 'xlsx') {
         text = await extractTextFromXLSX(file);
@@ -258,6 +258,21 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
     const files = Array.from(e.target.files || []);
     if (files.length === 0) return;
 
+    // Check current total media count (images + documents)
+    const currentMediaCount = documentPreviewFiles.length;
+
+    // Check if adding these files would exceed the total media limit
+    if (maxDocuments && currentMediaCount + files.length > maxDocuments) {
+      onDocumentError?.({
+        message: `Maximum ${maxDocuments} media files allowed. You can upload ${Math.max(0, maxDocuments - currentMediaCount)} more file${maxDocuments - currentMediaCount !== 1 ? 's' : ''}.`,
+        severity: 'error',
+      });
+      if (documentInputRef.current) {
+        documentInputRef.current.value = '';
+      }
+      return;
+    }
+
     setIsLoading(true);
 
     // Process each file
@@ -335,7 +350,8 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
       <input
         ref={documentInputRef}
         type="file"
-        accept=".pdf,.txt,.md,.json,.xlsx,.csv"
+        accept=".pdf,.txt,.md,.json,.xlsx,.csv,.html"
+        multiple
         className="memori--upload-file-input"
         onChange={handleDocumentUpload}
       />
@@ -355,8 +371,7 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
         disabled={
           isLoading ||
           (maxDocuments &&
-            documentPreviewFiles.filter((file: any) => file.type !== 'image')
-              .length >= maxDocuments) ||
+            documentPreviewFiles.length >= maxDocuments) ||
           false
         }
         title="Upload documents"