@memori.ai/memori-react 8.38.4 → 9.0.0-alpha.0

package/src/components/UploadButton/UploadButton.tsx

@@ -1,15 +1,18 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { DocumentIcon } from '../icons/Document';
-import { ImageIcon } from '../icons/Image';
-import { UploadIcon } from '../icons/Upload';
-import Spin from '../ui/Spin';
-import Alert from '../ui/Alert';
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useMemo,
+} from 'react';
+import { Upload as UploadIcon } from 'lucide-react';
+import { Spin, Tooltip, useAlertManager } from '@memori.ai/ui';
 import cx from 'classnames';
 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';
+
 // Props interface
 interface UploadManagerProps {
   authToken?: string;
@@ -33,6 +36,8 @@ interface UploadManagerProps {
   maxDocumentContentLength?: number;
   /** Called when the upload loading state changes. */
   onUploadLoadingChange?: (loading: boolean, fileCount?: number) => void;
+  /** When true, the control does not open the file picker and ignores paste/drop for uploads. */
+  disabled?: boolean;
 }
 
 const UploadButton: React.FC<UploadManagerProps> = ({
@@ -47,7 +52,10 @@ const UploadButton: React.FC<UploadManagerProps> = ({
   maxDocumentsPerMessage = 10,
   maxDocumentContentLength = 300000,
   onUploadLoadingChange,
+  disabled = false,
 }) => {
+  // Per-document character limit for the inlined `<document_attachment>`
+  // content. Does NOT affect the full text uploaded as an asset.
   const effectivePerDocumentLimit =
     maxTotalMessagePayload ?? maxDocumentContentLength ?? 300000;
   // State
@@ -57,11 +65,9 @@ const UploadButton: React.FC<UploadManagerProps> = ({
   const [docUploadingCount, setDocUploadingCount] = useState(0);
   const [imgUploadingCount, setImgUploadingCount] = useState(0);
   const uploadingFileCount = docUploadingCount + imgUploadingCount;
-  const [errors, setErrors] = useState<
-    { message: string; severity: 'error' | 'warning' | 'info' }[]
-  >([]);
   const [isDragging, setIsDragging] = useState(false);
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
+  const alertManager = useAlertManager();
 
   // Refs
   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -75,18 +81,22 @@ const UploadButton: React.FC<UploadManagerProps> = ({
   const remainingSlots = maxDocumentsPerMessage - currentMediaCount;
   const hasReachedMediaLimit = remainingSlots <= 0;
 
-  // Error handling
-  const removeError = (errorMessage: string) => {
-    setErrors(prev => prev.filter(e => e.message !== errorMessage));
-  };
-
-  const addError = (error: {
-    message: string;
-    severity: 'error' | 'warning' | 'info';
-  }) => {
-    setErrors(prev => [...prev, error]);
-    setTimeout(() => removeError(error.message), 5000);
-  };
+  // Error handling - show alerts via toast manager
+  const addError = useCallback(
+    (error: { message: string; severity: 'error' | 'warning' | 'info' }) => {
+      alertManager.add({
+        id: `upload-notification-${Date.now()}`,
+        title: 'Upload notification',
+        description: error.message,
+        data: {
+          severity: error.severity,
+          closable: true,
+          style: { zIndex: 10002, top: 30, right: 30, position: 'fixed' },
+        },
+      });
+    },
+    [alertManager]
+  );
 
   // Check if file is an image
   const isImageFile = (file: File): boolean => {
@@ -98,7 +108,15 @@ const UploadButton: React.FC<UploadManagerProps> = ({
 
   // Check if file is a document
   const isDocumentFile = (file: File): boolean => {
-    const documentExtensions = ['.pdf', '.txt', '.json', '.xlsx', '.csv', '.md', '.html'];
+    const documentExtensions = [
+      '.pdf',
+      '.txt',
+      '.json',
+      '.xlsx',
+      '.csv',
+      '.md',
+      '.html',
+    ];
     const fileExt = `.${file.name.split('.').pop()?.toLowerCase()}`;
     return documentExtensions.includes(fileExt);
   };
@@ -115,118 +133,128 @@ const UploadButton: React.FC<UploadManagerProps> = ({
   }, [isMediaAccepted, currentMediaCount, addError]);
 
   // Handle unified file selection
-  const handleUnifiedFileSelection = useCallback((files: FileList | File[]) => {
-    const fileArray = Array.from(files);
-    if (fileArray.length === 0) return;
-
-    const supportedFiles: File[] = [];
-    fileArray.forEach(file => {
-      if (isImageFile(file)) {
-        supportedFiles.push(file);
-      } else if (isDocumentFile(file)) {
-        supportedFiles.push(file);
-      } else {
+  const handleUnifiedFileSelection = useCallback(
+    (files: FileList | File[]) => {
+      const fileArray = Array.from(files);
+      if (fileArray.length === 0) return;
+
+      const supportedFiles: File[] = [];
+      fileArray.forEach(file => {
+        if (isImageFile(file)) {
+          supportedFiles.push(file);
+        } else if (isDocumentFile(file)) {
+          supportedFiles.push(file);
+        } else {
+          addErrorRef.current({
+            message: `File "${file.name}" is not a supported image or document type`,
+            severity: 'warning',
+          });
+        }
+      });
+
+      const totalSupported = supportedFiles.length;
+      if (totalSupported === 0) return;
+
+      const remainingSlots =
+        maxDocumentsPerMessage - currentMediaCountRef.current;
+      if (remainingSlots <= 0) {
         addErrorRef.current({
-          message: `File "${file.name}" is not a supported image or document type`,
+          message: `Maximum ${maxDocumentsPerMessage} media files allowed.`,
           severity: 'warning',
         });
+        return;
       }
-    });
-
-    const totalSupported = supportedFiles.length;
-    if (totalSupported === 0) return;
-
-    const remainingSlots = maxDocumentsPerMessage - currentMediaCountRef.current;
-    if (remainingSlots <= 0) {
-      addErrorRef.current({
-        message: `Maximum ${maxDocumentsPerMessage} media files allowed.`,
-        severity: 'warning',
-      });
-      return;
-    }
 
-    const toProcess = supportedFiles.slice(0, remainingSlots);
-    const imageFiles = toProcess.filter(f => isImageFile(f));
-    const documentFiles = toProcess.filter(f => isDocumentFile(f));
-
-    if (totalSupported > remainingSlots) {
-      const skipped = totalSupported - remainingSlots;
-      addErrorRef.current({
-        message:
-          t('upload.filesNotAddedMaxAllowed', {
-            count: skipped,
-            max: maxDocumentsPerMessage,
-            defaultValue: `${skipped} file(s) not added (maximum ${maxDocumentsPerMessage} files allowed).`,
-          }) ?? `${skipped} file(s) not added (maximum ${maxDocumentsPerMessage} files allowed).`,
-        severity: 'warning',
-      });
-    }
+      const toProcess = supportedFiles.slice(0, remainingSlots);
+      const imageFiles = toProcess.filter(f => isImageFile(f));
+      const documentFiles = toProcess.filter(f => isDocumentFile(f));
 
-    // Process images
-    if (imageFiles.length > 0) {
-      if (!isMediaAcceptedRef.current) {
+      if (totalSupported > remainingSlots) {
+        const skipped = totalSupported - remainingSlots;
         addErrorRef.current({
           message:
-            t('upload.mediaNotAccepted') ?? 'Media uploads are not accepted',
+            t('upload.filesNotAddedMaxAllowed', {
+              count: skipped,
+              max: maxDocumentsPerMessage,
+              defaultValue: `${skipped} file(s) not added (maximum ${maxDocumentsPerMessage} files allowed).`,
+            }) ??
+            `${skipped} file(s) not added (maximum ${maxDocumentsPerMessage} files allowed).`,
           severity: 'warning',
         });
-      } else {
-        // Trigger image upload by creating a synthetic event
-        const imageInput = imageRef.current?.querySelector('input[type="file"]') as HTMLInputElement;
-        if (imageInput) {
+      }
+
+      // Process images
+      if (imageFiles.length > 0) {
+        if (!isMediaAcceptedRef.current) {
+          addErrorRef.current({
+            message:
+              t('upload.mediaNotAccepted') ?? 'Media uploads are not accepted',
+            severity: 'warning',
+          });
+        } 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) {
+              try {
+                imageInput.files = dataTransfer.files;
+              } catch {
+                // JSDOM and some environments do not allow assigning to input.files
+              }
+              const changeEvent = new Event('change', { bubbles: true });
+              imageInput.dispatchEvent(changeEvent);
+            }
+          }
+        }
+      }
+
+      // Process documents – set loading early so skeleton shows for all entry points
+      if (documentFiles.length > 0) {
+        setIsDocumentLoading(true);
+        const documentInput = documentRef.current?.querySelector(
+          'input[type="file"]'
+        ) as HTMLInputElement;
+        if (documentInput) {
           const dataTransfer = new DataTransfer();
-          imageFiles.forEach(file => {
+          documentFiles.forEach(file => {
             try {
               dataTransfer.items.add(file);
             } catch (err) {
-              console.warn('Failed to add image file to DataTransfer:', err);
+              console.warn('Failed to add document file to DataTransfer:', err);
             }
           });
-          
+
           // Only proceed if we successfully added files
           if (dataTransfer.files.length > 0) {
             try {
-              imageInput.files = dataTransfer.files;
+              documentInput.files = dataTransfer.files;
             } catch {
               // JSDOM and some environments do not allow assigning to input.files
             }
             const changeEvent = new Event('change', { bubbles: true });
-            imageInput.dispatchEvent(changeEvent);
+            documentInput.dispatchEvent(changeEvent);
           }
         }
       }
-    }
-
-    // Process documents – set loading early so skeleton shows for all entry points
-    if (documentFiles.length > 0) {
-      setIsDocumentLoading(true);
-      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) {
-          try {
-            documentInput.files = dataTransfer.files;
-          } catch {
-            // JSDOM and some environments do not allow assigning to input.files
-          }
-          const changeEvent = new Event('change', { bubbles: true });
-          documentInput.dispatchEvent(changeEvent);
-        }
-      }
-    }
-  }, [t]);
+    },
+    [t]
+  );
 
   // Handle button click - open file chooser directly
   const handleButtonClick = () => {
+    if (disabled) return;
     if (unifiedInputRef.current) {
       unifiedInputRef.current.click();
     }
@@ -247,22 +275,24 @@ const UploadButton: React.FC<UploadManagerProps> = ({
   // Paste handler for files
   useEffect(() => {
     const handlePaste = (e: ClipboardEvent) => {
+      if (disabled) return;
       const clipboardData = e.clipboardData;
       if (!clipboardData) {
         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
+        return files.some(
+          f =>
+            f.name === file.name &&
+            f.size === file.size &&
+            f.lastModified === file.lastModified
         );
       };
-      
+
       // Prefer clipboardData.files if available (most reliable and prevents duplicates)
       // Only fall back to items if files is empty (some browsers only populate items)
       if (clipboardData.files && clipboardData.files.length > 0) {
@@ -300,7 +330,7 @@ const UploadButton: React.FC<UploadManagerProps> = ({
     return () => {
       document.removeEventListener('paste', handlePaste);
     };
-  }, [handleUnifiedFileSelection]);
+  }, [handleUnifiedFileSelection, disabled]);
 
   // Drag and drop handlers
   useEffect(() => {
@@ -309,6 +339,7 @@ const UploadButton: React.FC<UploadManagerProps> = ({
     const handleDragEnter = (e: DragEvent) => {
       e.preventDefault();
       e.stopPropagation();
+      if (disabled) return;
       dragCounter++;
       if (dragCounter === 1) {
         setIsDragging(true);
@@ -335,6 +366,8 @@ const UploadButton: React.FC<UploadManagerProps> = ({
       dragCounter = 0;
       setIsDragging(false);
 
+      if (disabled) return;
+
       const files = e.dataTransfer?.files;
       if (files && files.length > 0) {
         handleUnifiedFileSelection(files);
@@ -353,7 +386,7 @@ const UploadButton: React.FC<UploadManagerProps> = ({
       document.removeEventListener('dragover', handleDragOver);
       document.removeEventListener('drop', handleDrop);
     };
-  }, [handleUnifiedFileSelection]);
+  }, [handleUnifiedFileSelection, disabled]);
 
   // Handler for document files - now supports multiple documents
   const handleDocumentFiles = (
@@ -362,7 +395,6 @@ const UploadButton: React.FC<UploadManagerProps> = ({
       id: string;
       content: string;
       mimeType: string;
-      sourceUrl?: string;
       textAssetUrl?: string;
     }[]
   ) => {
@@ -381,16 +413,20 @@ const UploadButton: React.FC<UploadManagerProps> = ({
     // Process each document file
     const processedDocuments = files.map(file => {
       const escapedFileName = escapeAttributeValue(file.name);
-      const formattedContent = `<document_attachment filename="${escapedFileName}" type="${file.mimeType}">
-
-${file.content}
+      // Truncate the inlined content to the per-document character limit.
+      // The full text remains available via the uploaded asset link.
+      const inlinedContent =
+        file.content.length > effectivePerDocumentLimit
+          ? file.content.slice(0, effectivePerDocumentLimit)
+          : file.content;
+      const formattedContent = `<document_attachment filename="${escapedFileName}" type="${
+        file.mimeType
+      }">
+
+${inlinedContent}
 
 </document_attachment>
 
-<attachment_source>
-${file.sourceUrl || ''}
-</attachment_source>
-
 <attachment_link>
 ${file.textAssetUrl || ''}
 </attachment_link>`;
@@ -505,18 +541,17 @@ ${file.textAssetUrl || ''}
     addError(error);
   };
 
-
   const handleDocumentLoadingChange = useCallback(
     (loading: boolean, fileCount?: number) => {
       setIsDocumentLoading(loading);
-      setDocUploadingCount(loading ? (fileCount ?? 1) : 0);
+      setDocUploadingCount(loading ? fileCount ?? 1 : 0);
     },
     []
   );
   const handleImageLoadingChange = useCallback(
     (loading: boolean, fileCount?: number) => {
       setIsImageLoading(loading);
-      setImgUploadingCount(loading ? (fileCount ?? 1) : 0);
+      setImgUploadingCount(loading ? fileCount ?? 1 : 0);
     },
     []
   );
@@ -525,10 +560,46 @@ ${file.textAssetUrl || ''}
     onUploadLoadingChange?.(isLoading, isLoading ? uploadingFileCount : 0);
   }, [isLoading, uploadingFileCount, onUploadLoadingChange]);
 
+  const uploadTooltipTitle = useMemo(() => {
+    if (hasReachedMediaLimit) {
+      return t('upload.maxReached') ?? 'Max limit reached';
+    }
+
+    return t('upload.uploadFilesOrImages') ?? 'Upload files or images';
+  }, [hasReachedMediaLimit, t]);
+
+  const isUploadDisabled = disabled || isLoading || hasReachedMediaLimit;
+
+  const uploadButton = (
+    <button
+      ref={buttonRef}
+      type="button"
+      className={cx(
+        'memori-button',
+        'memori-button--circle',
+        'memori-button--icon-only',
+        'memori-share-button--button',
+        'memori--conversation-button',
+        'memori--unified-upload-button'
+      )}
+      onClick={handleButtonClick}
+      disabled={isUploadDisabled}
+      tabIndex={isUploadDisabled ? -1 : undefined}
+      aria-label={uploadTooltipTitle}
+    >
+      {isLoading ? (
+        <Spin spinning className="memori--upload-icon" />
+      ) : (
+        <UploadIcon className="memori--upload-icon" />
+      )}
+    </button>
+  );
+
   return (
-    <div 
+    <div
       className={cx('memori--unified-upload-wrapper', {
-        'memori--dragging': isDragging,
+        'memori--dragging': isDragging && !disabled,
+        'memori--upload-disabled': disabled,
       })}
       ref={wrapperRef}
     >
@@ -543,28 +614,27 @@ ${file.textAssetUrl || ''}
         style={{ display: 'none' }}
       />
 
-      {/* Main upload button */}
-      <button
-        ref={buttonRef}
-        className={cx(
-          'memori-button',
-          'memori-button--circle',
-          'memori-button--icon-only',
-          'memori-share-button--button',
-          'memori--conversation-button',
-          'memori--unified-upload-button',
-          { 'memori--error': errors.length > 0 }
-        )}
-        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" />
+      {/* Main upload button — direct child of Tooltip so Tab reaches the button (no extra span wrapper) */}
+      <Tooltip placement="top" title={uploadTooltipTitle}>
+        {isUploadDisabled ? (
+          <span
+            className="memori--unified-upload-button-tooltip-trigger"
+            tabIndex={0}
+            role="button"
+            aria-disabled="true"
+            aria-label={uploadTooltipTitle}
+            onKeyDown={event => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+              }
+            }}
+          >
+            {uploadButton}
+          </span>
         ) : (
-          <UploadIcon className="memori--upload-icon" />
+          uploadButton
         )}
-      </button>
+      </Tooltip>
 
       {/* Media count indicator */}
       {currentMediaCount > 0 && (
@@ -578,7 +648,7 @@ ${file.textAssetUrl || ''}
       )}
 
       {/* Hidden components */}
-      <div className="memori--hidden-uploader" ref={documentRef}>
+      <div className="memori--hidden-uploader" ref={documentRef} aria-hidden>
         <UploadDocuments
           setDocumentPreviewFiles={handleDocumentFiles}
           authToken={authToken}
@@ -591,11 +661,10 @@ ${file.textAssetUrl || ''}
           onDocumentError={handleDocumentError}
           onValidateFile={validateDocumentFile}
           onValidatePayloadSize={validatePayloadSize}
-          maxDocumentContentLength={effectivePerDocumentLimit}
         />
       </div>
 
-      <div className="memori--hidden-uploader" ref={imageRef}>
+      <div className="memori--hidden-uploader" ref={imageRef} aria-hidden>
         <UploadImages
           authToken={authToken}
           client={client}
@@ -610,22 +679,6 @@ ${file.textAssetUrl || ''}
           onValidateImageFile={validateImageFile}
         />
       </div>
-
-      {/* Error messages container */}
-      <div className="memori--error-message-container">
-        {errors.map((error, index) => (
-          <Alert
-            className="memori--error-message-alert"
-            key={`${error.message}-${index}`}
-            open={true}
-            type={error.severity}
-            title={t('upload.uploadNotification', { defaultValue: 'Upload notification' })}
-            description={error.message}
-            onClose={() => removeError(error.message)}
-            width="350px"
-          />
-        ))}
-      </div>
     </div>
   );
 };