@memori.ai/memori-react 8.38.3 → 8.38.4

package/src/components/FilePreview/FilePreview.css

@@ -255,6 +255,55 @@
     line-height: 1.5;
 }
 
+/* Skeleton loading card */
+.memori--preview-item--skeleton {
+    min-width: 140px;
+    cursor: default;
+    pointer-events: none;
+}
+
+.memori--preview-item--skeleton:hover {
+    background-color: #f8f9fa;
+    transform: none;
+}
+
+.memori--skeleton-icon {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+    border-radius: 4px;
+    animation: memori-skeleton-pulse 1.5s ease-in-out infinite;
+    background: linear-gradient(90deg, #e9ecef 25%, #f1f3f5 50%, #e9ecef 75%);
+    background-size: 200% 100%;
+}
+
+.memori--skeleton-line {
+    border-radius: 4px;
+    animation: memori-skeleton-pulse 1.5s ease-in-out infinite;
+    background: linear-gradient(90deg, #e9ecef 25%, #f1f3f5 50%, #e9ecef 75%);
+    background-size: 200% 100%;
+}
+
+.memori--skeleton-line--name {
+    width: 80px;
+    height: 12px;
+    margin-bottom: 6px;
+}
+
+.memori--skeleton-line--type {
+    width: 40px;
+    height: 10px;
+}
+
+@keyframes memori-skeleton-pulse {
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
+}
+
 @keyframes fadeIn {
     from {
         opacity: 0;

package/src/components/FilePreview/FilePreview.tsx

@@ -13,7 +13,7 @@ type FilePreviewProps = {
   removeFile: (id: string, mediumID: string | undefined) => void;
   allowRemove?: boolean;
   showAnonymousRetentionNotice?: boolean;
-  // isMessagePreview?: boolean;
+  uploadingCount?: number;
 };
 
 const FilePreview = ({
@@ -21,8 +21,8 @@ const FilePreview = ({
   removeFile,
   allowRemove = true,
   showAnonymousRetentionNotice = false,
-}: // isMessagePreview = false,
-FilePreviewProps) => {
+  uploadingCount = 0,
+}: FilePreviewProps) => {
   const { t } = useTranslation();
   const [selectedFile, setSelectedFile] = useState<{
     name: string;
@@ -139,7 +139,7 @@ FilePreviewProps) => {
 
   return (
     <>
-      {previewFiles.length > 0 && (
+      {(previewFiles.length > 0 || uploadingCount > 0) && (
         <div className="memori--preview-container">
           {showAnonymousRetentionNotice && (
             <small
@@ -199,6 +199,20 @@ FilePreviewProps) => {
                 )}
               </div>
             ))}
+
+            {uploadingCount > 0 &&
+              Array.from({ length: uploadingCount }, (_, i) => (
+                <div
+                  key={`skeleton-${i}`}
+                  className="memori--preview-item memori--preview-item--document memori--preview-item--skeleton"
+                >
+                  <div className="memori--skeleton-icon" />
+                  <div className="memori--preview-file-info">
+                    <div className="memori--skeleton-line memori--skeleton-line--name" />
+                    <div className="memori--skeleton-line memori--skeleton-line--type" />
+                  </div>
+                </div>
+              ))}
           </div>
         </div>
       )}

package/src/components/UploadButton/UploadButton.tsx

@@ -31,6 +31,8 @@ interface UploadManagerProps {
   maxDocumentsPerMessage?: number;
   /** Per-document content character limit. */
   maxDocumentContentLength?: number;
+  /** Called when the upload loading state changes. */
+  onUploadLoadingChange?: (loading: boolean, fileCount?: number) => void;
 }
 
 const UploadButton: React.FC<UploadManagerProps> = ({
@@ -44,11 +46,17 @@ const UploadButton: React.FC<UploadManagerProps> = ({
   maxTotalMessagePayload,
   maxDocumentsPerMessage = 10,
   maxDocumentContentLength = 300000,
+  onUploadLoadingChange,
 }) => {
   const effectivePerDocumentLimit =
     maxTotalMessagePayload ?? maxDocumentContentLength ?? 300000;
   // State
-  const [isLoading, setIsLoading] = useState(false);
+  const [isDocumentLoading, setIsDocumentLoading] = useState(false);
+  const [isImageLoading, setIsImageLoading] = useState(false);
+  const isLoading = isDocumentLoading || isImageLoading;
+  const [docUploadingCount, setDocUploadingCount] = useState(0);
+  const [imgUploadingCount, setImgUploadingCount] = useState(0);
+  const uploadingFileCount = docUploadingCount + imgUploadingCount;
   const [errors, setErrors] = useState<
     { message: string; severity: 'error' | 'warning' | 'info' }[]
   >([]);
@@ -189,9 +197,9 @@ const UploadButton: React.FC<UploadManagerProps> = ({
       }
     }
 
-    // Process documents
+    // Process documents – set loading early so skeleton shows for all entry points
     if (documentFiles.length > 0) {
-      // Trigger document upload by creating a synthetic event
+      setIsDocumentLoading(true);
       const documentInput = documentRef.current?.querySelector('input[type="file"]') as HTMLInputElement;
       if (documentInput) {
         const dataTransfer = new DataTransfer();
@@ -241,7 +249,6 @@ const UploadButton: React.FC<UploadManagerProps> = ({
     const handlePaste = (e: ClipboardEvent) => {
       const clipboardData = e.clipboardData;
       if (!clipboardData) {
-        console.log('[UploadButton] handlePaste: No clipboardData available.');
         return;
       }
 
@@ -260,12 +267,9 @@ const UploadButton: React.FC<UploadManagerProps> = ({
       // Only fall back to items if files is empty (some browsers only populate items)
       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);
           }
         });
       } else {
@@ -278,10 +282,7 @@ const UploadButton: React.FC<UploadManagerProps> = ({
             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);
               }
             }
           }
@@ -289,11 +290,8 @@ const UploadButton: React.FC<UploadManagerProps> = ({
       }
 
       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.');
       }
     };
 
@@ -406,14 +404,8 @@ ${file.textAssetUrl || ''}
       };
     });
 
-    // Keep existing images and add new documents
-    const imageFiles = documentPreviewFiles.filter(
-      (file: any) => file.type === 'image'
-    );
-
-    setDocumentPreviewFiles([...processedDocuments, ...imageFiles]);
-
-    setIsLoading(false);
+    // Append new documents to existing files (images + previous documents)
+    setDocumentPreviewFiles((prev: any[]) => [...prev, ...processedDocuments]);
   };
 
   // Document validation and error handling
@@ -514,10 +506,24 @@ ${file.textAssetUrl || ''}
   };
 
 
-  // Set loading state for child components
-  const handleLoadingChange = (loading: boolean) => {
-    setIsLoading(loading);
-  };
+  const handleDocumentLoadingChange = useCallback(
+    (loading: boolean, fileCount?: number) => {
+      setIsDocumentLoading(loading);
+      setDocUploadingCount(loading ? (fileCount ?? 1) : 0);
+    },
+    []
+  );
+  const handleImageLoadingChange = useCallback(
+    (loading: boolean, fileCount?: number) => {
+      setIsImageLoading(loading);
+      setImgUploadingCount(loading ? (fileCount ?? 1) : 0);
+    },
+    []
+  );
+
+  useEffect(() => {
+    onUploadLoadingChange?.(isLoading, isLoading ? uploadingFileCount : 0);
+  }, [isLoading, uploadingFileCount, onUploadLoadingChange]);
 
   return (
     <div 
@@ -581,7 +587,7 @@ ${file.textAssetUrl || ''}
           memoriID={memoriID}
           maxDocuments={maxDocumentsPerMessage}
           documentPreviewFiles={documentPreviewFiles}
-          onLoadingChange={handleLoadingChange}
+          onLoadingChange={handleDocumentLoadingChange}
           onDocumentError={handleDocumentError}
           onValidateFile={validateDocumentFile}
           onValidatePayloadSize={validatePayloadSize}
@@ -597,7 +603,7 @@ ${file.textAssetUrl || ''}
           sessionID={sessionID}
           documentPreviewFiles={documentPreviewFiles}
           isMediaAccepted={isMediaAccepted}
-          onLoadingChange={handleLoadingChange}
+          onLoadingChange={handleImageLoadingChange}
           maxImages={maxDocumentsPerMessage}
           memoriID={memoriID}
           onImageError={handleImageError}

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
 import cx from 'classnames';
 import Spin from '../../ui/Spin';
 import { DocumentIcon } from '../../icons/Document';
@@ -49,7 +49,7 @@ interface UploadDocumentsProps {
   memoriID?: string;
   maxDocuments?: number;
   documentPreviewFiles: any;
-  onLoadingChange?: (loading: boolean) => void;
+  onLoadingChange?: (loading: boolean, fileCount?: number) => void;
   onDocumentError?: (error: {
     message: string;
     severity: 'error' | 'warning' | 'info';
@@ -93,12 +93,10 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
   // Refs
   const documentInputRef = useRef<HTMLInputElement>(null);
 
-  // Update loading state in parent component
-  useEffect(() => {
-    if (onLoadingChange) {
-      onLoadingChange(isLoading);
-    }
-  }, [isLoading, onLoadingChange]);
+  const setLoadingState = (loading: boolean, fileCount?: number) => {
+    setIsLoading(loading);
+    onLoadingChange?.(loading, fileCount);
+  };
 
   // Document upload
   const validateDocumentFile = (file: File): boolean => {
@@ -342,110 +340,113 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
       return;
     }
 
-    setIsLoading(true);
-
-    // Process each file
-    const processedFiles: {
-      name: string;
-      id: string;
-      content: string;
-      mimeType: string;
-      sourceUrl?: string;
-      textAssetUrl?: string;
-    }[] = [];
-    let hadTruncation = false;
-
-    for (const file of filesToProcess) {
-      if (!validateDocumentFile(file)) {
-        continue;
-      }
+    setLoadingState(true, filesToProcess.length);
 
-      const fileId = Math.random().toString(36).substr(2, 9);
+    try {
+      // Process each file
+      const processedFiles: {
+        name: string;
+        id: string;
+        content: string;
+        mimeType: string;
+        sourceUrl?: string;
+        textAssetUrl?: string;
+      }[] = [];
+
+      let activeCount = filesToProcess.length;
+
+      for (const file of filesToProcess) {
+        if (!validateDocumentFile(file)) {
+          activeCount--;
+          onLoadingChange?.(true, activeCount);
+          continue;
+        }
 
-      try {
-        const { text } = await processDocumentFile(file);
+        const fileId = Math.random().toString(36).substr(2, 9);
 
-        if (text) {
-          // Build the .txt from the FULL extracted text so the uploaded
-          // asset always contains the complete document content.
-          const baseName = file.name.replace(/\.[^/.]+$/, '') || file.name;
-          const textFile = new File([text], `${baseName}.txt`, {
-            type: 'text/plain',
-          });
+        try {
+          const { text } = await processDocumentFile(file);
 
-          const uploadResults = await Promise.allSettled([
-            uploadAssetFile(file),
-            uploadAssetFile(textFile),
-          ]);
-
-          const sourceUrl =
-            uploadResults[0].status === 'fulfilled'
-              ? uploadResults[0].value
-              : undefined;
-          const textAssetUrl =
-            uploadResults[1].status === 'fulfilled'
-              ? uploadResults[1].value
-              : undefined;
-
-          // Keep the document even when one of the optional links fails to upload.
-          if (
-            uploadResults[0].status === 'rejected' ||
-            uploadResults[1].status === 'rejected'
-          ) {
-            onDocumentError?.({
-              message: t('upload.partialAssetUploadWarning', {
-                fileName: file.name,
-                defaultValue:
-                  'Some file links could not be uploaded, but the document was added anyway.',
-              }),
-              severity: 'warning',
+          if (text) {
+            const baseName = file.name.replace(/\.[^/.]+$/, '') || file.name;
+            const textFile = new File([text], `${baseName}.txt`, {
+              type: 'text/plain',
             });
-          }
 
-          // Truncate the content AFTER uploading the full-text asset,
-          // so the message payload stays within safe limits while
-          // the asset link preserves the complete document.
-          let contentForMessage = text;
-          const perDocumentLimit = maxDocumentContentLength;
-          if (text.length > perDocumentLimit) {
-            hadTruncation = true;
-            contentForMessage =
-              text.substring(0, perDocumentLimit) +
-              '\n\n[Content truncated due to size limits]';
+            const uploadResults = await Promise.allSettled([
+              uploadAssetFile(file),
+              uploadAssetFile(textFile),
+            ]);
+
+            const sourceUrl =
+              uploadResults[0].status === 'fulfilled'
+                ? uploadResults[0].value
+                : undefined;
+            const textAssetUrl =
+              uploadResults[1].status === 'fulfilled'
+                ? uploadResults[1].value
+                : undefined;
+
+            if (
+              uploadResults[0].status === 'rejected' ||
+              uploadResults[1].status === 'rejected'
+            ) {
+              onDocumentError?.({
+                message: t('upload.partialAssetUploadWarning', {
+                  fileName: file.name,
+                  defaultValue:
+                    'Some file links could not be uploaded, but the document was added anyway.',
+                }),
+                severity: 'warning',
+              });
+            }
+
+            let contentForMessage = text;
+            const perDocumentLimit = maxDocumentContentLength;
+            if (text.length > perDocumentLimit) {
+              contentForMessage =
+                text.substring(0, perDocumentLimit) +
+                '\n\n[Content truncated due to size limits]';
+            }
+
+            processedFiles.push({
+              name: file.name,
+              id: fileId,
+              content: contentForMessage,
+              mimeType: file.type,
+              sourceUrl,
+              textAssetUrl,
+            });
+          } else {
+            activeCount--;
+            onLoadingChange?.(true, activeCount);
           }
-
-          processedFiles.push({
-            name: file.name,
-            id: fileId,
-            content: contentForMessage,
-            mimeType: file.type,
-            sourceUrl,
-            textAssetUrl,
+        } catch (error) {
+          activeCount--;
+          onLoadingChange?.(true, activeCount);
+          console.error('File processing error:', error);
+          onDocumentError?.({
+            message: `${
+              error instanceof Error ? error.message : 'Unknown error'
+            }`,
+            severity: 'warning',
           });
         }
-      } catch (error) {
-        console.error('File processing error:', error);
-        onDocumentError?.({
-          message: `${
-            error instanceof Error ? error.message : 'Unknown error'
-          }`,
-          severity: 'warning',
-        });
       }
-    }
 
-    // Add new documents to existing ones (only those that fit within payload)
-    if (processedFiles.length > 0) {
-      setDocumentPreviewFiles([
-        ...processedFiles.map(file => ({
-          ...file,
-          type: 'document',
-        })),
-      ]);
-    }
-    setIsLoading(false);
-    if (documentInputRef.current) {
-      documentInputRef.current.value = '';
+      if (processedFiles.length > 0) {
+        setDocumentPreviewFiles(
+          processedFiles.map(file => ({
+            ...file,
+            type: 'document',
+          }))
+        );
+      }
+    } finally {
+      setLoadingState(false);
+      if (documentInputRef.current) {
+        documentInputRef.current.value = '';
+      }
     }
   };
 

package/src/components/UploadButton/UploadImages/UploadImages.tsx

@@ -31,7 +31,7 @@ interface UploadImagesProps {
   isMediaAccepted?: boolean;
   setDocumentPreviewFiles: any;
   documentPreviewFiles: any;
-  onLoadingChange?: (loading: boolean) => void;
+  onLoadingChange?: (loading: boolean, fileCount?: number) => void;
   maxImages?: number;
   memoriID?: string;
   onImageError?: (error: { message: string; severity: 'error' | 'warning' | 'info' }) => void;
@@ -60,6 +60,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
 
   // State
   const [isLoading, setIsLoading] = useState(false);
+  const [loadingFileCount, setLoadingFileCount] = useState(0);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [filePreview, setFilePreview] = useState<string | null>(null);
   const [imageTitle, setImageTitle] = useState('');
@@ -68,12 +69,11 @@ const UploadImages: React.FC<UploadImagesProps> = ({
   // Refs
   const imageInputRef = useRef<HTMLInputElement>(null);
 
-  // Update loading state in parent component
   useEffect(() => {
     if (onLoadingChange) {
-      onLoadingChange(isLoading);
+      onLoadingChange(isLoading, isLoading ? loadingFileCount : 0);
     }
-  }, [isLoading, onLoadingChange]);
+  }, [isLoading, loadingFileCount, onLoadingChange]);
 
   // Check current total media count (images + documents)
   const currentMediaCount = documentPreviewFiles.length;
@@ -151,6 +151,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
   };
 
   const uploadMultipleImages = async (files: File[]) => {
+    setLoadingFileCount(files.length);
     setIsLoading(true);
 
     try {
@@ -292,6 +293,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
   const handleTitleSubmit = async () => {
     if (!selectedFile || !imageTitle.trim()) return;
 
+    setLoadingFileCount(1);
     setIsLoading(true);
     setShowUploadModal(false);
 

package/src/version.ts

@@ -1,2 +1,2 @@
 // This file is auto-generated. Do not edit manually.
-export const version = '8.38.3';
+export const version = '8.38.4';