@memori.ai/memori-react 8.12.0 → 8.13.0

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

@@ -8,6 +8,7 @@ import memoriApiClient from '@memori.ai/memori-api-client';
 import { Asset, Medium } from '@memori.ai/memori-api-client/dist/types';
 import { useTranslation } from 'react-i18next';
 import Button from '../../ui/Button';
+import { compressImage } from '../../../helpers/imageCompression';
 
 // Types
 type PreviewFile = {
@@ -74,10 +75,8 @@ const UploadImages: React.FC<UploadImagesProps> = ({
     }
   }, [isLoading, onLoadingChange]);
 
-  // Check current image count
-  const currentImageCount = documentPreviewFiles.filter(
-    (file: any) => file.type === 'image'
-  ).length;
+  // Check current total media count (images + documents)
+  const currentMediaCount = documentPreviewFiles.length;
 
   // Image upload
   const validateImageFile = (file: File): boolean => {
@@ -91,42 +90,192 @@ const UploadImages: React.FC<UploadImagesProps> = ({
     const files = Array.from(e.target.files || []);
     if (files.length === 0) return;
 
-    // Check if adding this file would exceed the limit
-    if (currentImageCount >= maxImages) {
+    // Check if adding these files would exceed the total media limit
+    if (currentMediaCount + files.length > maxImages) {
       onImageError?.({
         message:
-          t('upload.maxImagesReached') ??
-          `Maximum ${maxImages} images allowed.`,
+          `Maximum ${maxImages} media files allowed. You can upload ${Math.max(0, maxImages - currentMediaCount)} more file${maxImages - currentMediaCount !== 1 ? 's' : ''}.`,
         severity: 'error',
       });
       return;
     }
 
-    const file = files[0]; // Only handle the first file
+    // Validate all files first
+    const validFiles = files.filter(file => {
+      if (!validateImageFile(file)) {
+        return false;
+      }
+      return true;
+    });
 
-    if (!validateImageFile(file)) {
+    if (validFiles.length === 0) {
       if (imageInputRef.current) {
         imageInputRef.current.value = '';
       }
       return;
     }
 
-    // Set file and create preview
-    setSelectedFile(file);
-    setFilePreview(URL.createObjectURL(file));
-
-    // Set initial title as filename without extension
-    const fileName = file.name.split('.').slice(0, -1).join('.');
-    setImageTitle(fileName);
-
-    // Show upload modal with preview
-    setShowUploadModal(true);
+    // If only one file, show modal for title input
+    if (validFiles.length === 1) {
+      const file = validFiles[0];
+      setSelectedFile(file);
+      setFilePreview(URL.createObjectURL(file));
+      
+      // Set initial title as filename without extension
+      const fileName = file.name.split('.').slice(0, -1).join('.');
+      setImageTitle(fileName);
+      
+      // Show upload modal with preview
+      setShowUploadModal(true);
+    } else {
+      // For multiple files, upload them directly with default titles
+      await uploadMultipleImages(validFiles);
+    }
 
     if (imageInputRef.current) {
       imageInputRef.current.value = '';
     }
   };
 
+  const uploadMultipleImages = async (files: File[]) => {
+    setIsLoading(true);
+
+    try {
+      const uploadPromises = files.map(async (file) => {
+        // Compress image before upload
+        let fileToUpload = file;
+        try {
+          fileToUpload = await compressImage(file);
+        } catch (error) {
+          // If compression fails, use original file
+          console.warn('Image compression failed, using original file', error);
+          fileToUpload = file;
+        }
+
+        return new Promise<{
+          name: string;
+          id: string;
+          content: string;
+          type: string;
+          mediumID: string | undefined;
+          url: string;
+          mimeType: string;
+        } | null>((resolve) => {
+          const reader = new FileReader();
+          
+          reader.onload = async (e) => {
+            const fileDataUrl = e.target?.result as string;
+            const fileId = Math.random().toString(36).substr(2, 9);
+            const fileName = fileToUpload.name.split('.').slice(0, -1).join('.');
+
+            if (client) {
+              try {
+                let asset: Asset;
+                let response;
+
+                if (authToken && backend?.uploadAsset) {
+                  response = await backend.uploadAsset(
+                    fileToUpload.name,
+                    fileDataUrl,
+                    authToken
+                  );
+                } else if (memoriID && sessionID && backend?.uploadAssetUnlogged) {
+                  response = await backend.uploadAssetUnlogged(
+                    fileToUpload.name,
+                    fileDataUrl,
+                    memoriID,
+                    sessionID
+                  );
+
+                  if (!response) {
+                    throw new Error('Upload failed');
+                  }
+                } else {
+                  throw new Error('Missing required parameters for upload');
+                }
+
+                asset = response.asset;
+                if (response.resultCode !== 0) {
+                  throw new Error(response.resultMessage || 'Upload failed');
+                }
+
+                let medium: any = null;
+                if (dialog?.postMediumSelectedEvent && sessionID) {
+                  medium = await dialog.postMediumSelectedEvent(sessionID, {
+                    url: asset.assetURL,
+                    mimeType: asset.mimeType,
+                  } as Medium);
+                }
+
+                let finalMediumID: string | undefined = undefined;
+                if (medium?.currentState?.currentMedia) {
+                  const existingMediumIDs = new Set(
+                    documentPreviewFiles.map((file: any) => file.mediumID)
+                  );
+
+                  finalMediumID = medium.currentState.currentMedia.find(
+                    (media: any) => !existingMediumIDs.has(media.mediumID)
+                  )?.mediumID;
+                }
+
+                resolve({
+                  name: fileName,
+                  id: fileId,
+                  url: asset.assetURL,
+                  content: asset.assetURL,
+                  type: 'image',
+                  mediumID: finalMediumID,
+                  mimeType: asset.mimeType,
+                });
+              } catch (error) {
+                onImageError?.({
+                  message: t('upload.uploadFailed') ?? 'Upload failed',
+                  severity: 'error',
+                });
+                resolve(null);
+              }
+            } else {
+              onImageError?.({
+                message:
+                  t('upload.apiClientNotConfigured') ??
+                  'API client not configured properly for media upload',
+                severity: 'warning',
+              });
+              resolve(null);
+            }
+          };
+
+          reader.onerror = () => {
+            onImageError?.({
+              message: t('upload.fileReadingFailed') ?? 'File reading failed',
+              severity: 'error',
+            });
+            resolve(null);
+          };
+
+          reader.readAsDataURL(fileToUpload);
+        });
+      });
+
+      const results = await Promise.all(uploadPromises);
+      const successfulUploads = results.filter(result => result !== null);
+
+      if (successfulUploads.length > 0) {
+        setDocumentPreviewFiles((prevFiles: any[]) => [
+          ...prevFiles,
+          ...successfulUploads,
+        ]);
+      }
+    } catch (error) {
+      onImageError?.({
+        message: t('upload.uploadFailed') ?? 'Upload failed',
+        severity: 'error',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   const handleTitleSubmit = async () => {
     if (!selectedFile || !imageTitle.trim()) return;
 
@@ -134,6 +283,16 @@ const UploadImages: React.FC<UploadImagesProps> = ({
     setShowUploadModal(false);
 
     try {
+      // Compress image before upload
+      let fileToUpload = selectedFile;
+      try {
+        fileToUpload = await compressImage(selectedFile);
+      } catch (error) {
+        // If compression fails, use original file
+        console.warn('Image compression failed, using original file', error);
+        fileToUpload = selectedFile;
+      }
+
       const reader = new FileReader();
 
       reader.onload = async e => {
@@ -147,14 +306,14 @@ const UploadImages: React.FC<UploadImagesProps> = ({
 
             if (authToken && backend?.uploadAsset) {
               response = await backend.uploadAsset(
-                selectedFile.name,
+                fileToUpload.name,
                 fileDataUrl,
                 authToken,
-                memoriID
+                // memoriID
               );
             } else if (memoriID && sessionID && backend?.uploadAssetUnlogged) {
               response = await backend.uploadAssetUnlogged(
-                selectedFile.name,
+                fileToUpload.name,
                 fileDataUrl,
                 memoriID,
                 sessionID
@@ -241,7 +400,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
         setIsLoading(false);
       };
 
-      reader.readAsDataURL(selectedFile);
+      reader.readAsDataURL(fileToUpload);
     } catch (error) {
       onImageError?.({
         message: t('upload.uploadFailed') ?? 'Upload failed',
@@ -265,10 +424,11 @@ const UploadImages: React.FC<UploadImagesProps> = ({
         ref={imageInputRef}
         type="file"
         accept=".jpg,.jpeg,.png"
+        multiple
         className="memori--upload-file-input"
         onChange={handleImageUpload}
         disabled={
-          isLoading || !isMediaAccepted || currentImageCount >= maxImages
+          isLoading || !isMediaAccepted || currentMediaCount >= maxImages
         }
       />
 
@@ -284,7 +444,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
         )}
         onClick={() => imageInputRef.current?.click()}
         disabled={
-          isLoading || !isMediaAccepted || currentImageCount >= maxImages
+          isLoading || !isMediaAccepted || currentMediaCount >= maxImages
         }
       >
         {isLoading ? (
@@ -302,7 +462,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
         className="memori--modal-preview-file"
         onClose={handleCancelUpload}
         closable
-        title={t('upload.titleImage', { title: imageTitle })}
+        // title={t('upload.titleImage', { title: imageTitle })}
         // description={t('upload.imageTitleDescription')}
       >
         <div
@@ -338,20 +498,20 @@ const UploadImages: React.FC<UploadImagesProps> = ({
               style={{ width: '90%', marginBottom: '20px' }}
               className="memori--upload-title-input"
             />
-            <div style={{ display: 'flex', gap: '10px' }}>
+            <div style={{ display: 'flex', gap: '10px', justifyContent: 'center', alignItems: 'center' }}>
+            <Button
+                onClick={handleCancelUpload}
+                className="memori-button memori-button--outline memori--upload-image"
+              >
+                {t('cancel') ?? 'Cancel'}
+              </Button>
               <Button
                 onClick={handleTitleSubmit}
                 disabled={!selectedFile || !imageTitle.trim()}
-                className="memori-button memori-button--primary memori-button--image-confirm"
+                className="memori-button memori-button--primary memori-button--image-confirm memori--upload-image"
               >
                 {t('confirm') ?? 'Confirm'}
               </Button>
-              <Button
-                onClick={handleCancelUpload}
-                className="memori-button memori-button--primary"
-              >
-                {t('cancel') ?? 'Cancel'}
-              </Button>
             </div>
           </div>
         </div>

package/src/components/UploadButton/__snapshots__/UploadButton.test.tsx.snap

@@ -5,6 +5,13 @@ exports[`renders UploadButton unchanged 1`] = `
   <div
     class="memori--unified-upload-wrapper"
   >
+    <input
+      accept=".jpg,.jpeg,.png,.pdf,.txt,.json,.xlsx,.csv,.md,.html"
+      class="memori--upload-file-input"
+      multiple=""
+      style="display: none;"
+      type="file"
+    />
     <button
       class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button memori--unified-upload-button"
       title="upload.uploadFiles"
@@ -45,8 +52,9 @@ exports[`renders UploadButton unchanged 1`] = `
         class="memori--document-upload-wrapper"
       >
         <input
-          accept=".pdf,.txt,.md,.json,.xlsx,.csv"
+          accept=".pdf,.txt,.md,.json,.xlsx,.csv,.html"
           class="memori--upload-file-input"
+          multiple=""
           type="file"
         />
         <button
@@ -108,6 +116,7 @@ exports[`renders UploadButton unchanged 1`] = `
           accept=".jpg,.jpeg,.png"
           class="memori--upload-file-input"
           disabled=""
+          multiple=""
           type="file"
         />
         <button

package/src/components/layouts/chat.css

@@ -68,7 +68,7 @@
     height: 100%;
     max-height: 100%;
     flex: 1;
-    padding-bottom: 3rem;
+    /* padding-bottom: 1.5rem; */
     transition: all 0.05s ease-in-out;
 }
 

package/src/helpers/constants.ts

@@ -215,5 +215,5 @@ export const MAX_MSG_WORDS = 300;
 
 // Document upload limits
 export const MAX_DOCUMENTS_PER_MESSAGE = 5;
-// export const MAX_TOTAL_MESSAGE_PAYLOAD = 200000; // 200KB total payload limit
+export const MAX_TOTAL_MESSAGE_PAYLOAD = 200000; // 200KB total payload limit
 export const MAX_DOCUMENT_CONTENT_LENGTH = 200000; // 200KB per document content

package/src/helpers/imageCompression.ts

@@ -0,0 +1,230 @@
+/**
+ * Image compression utility using HTML5 Canvas API
+ * Compresses images before upload to reduce file size and LLM context usage
+ */
+
+export interface CompressionOptions {
+  maxWidth?: number;
+  maxHeight?: number;
+  quality?: number;
+  maxSizeMB?: number;
+}
+
+const DEFAULT_OPTIONS: Required<CompressionOptions> = {
+  maxWidth: 1920,
+  maxHeight: 1920,
+  quality: 0.85,
+  maxSizeMB: 2,
+};
+
+
+/**
+ * Apply EXIF orientation to canvas context
+ */
+const applyOrientation = (
+  ctx: CanvasRenderingContext2D,
+  orientation: number,
+  width: number,
+  height: number
+) => {
+  switch (orientation) {
+    case 2:
+      // Horizontal flip
+      ctx.transform(-1, 0, 0, 1, width, 0);
+      break;
+    case 3:
+      // 180° rotation
+      ctx.transform(-1, 0, 0, -1, width, height);
+      break;
+    case 4:
+      // Vertical flip
+      ctx.transform(1, 0, 0, -1, 0, height);
+      break;
+    case 5:
+      // Vertical flip + 90° rotation
+      ctx.transform(0, 1, 1, 0, 0, 0);
+      break;
+    case 6:
+      // 90° rotation
+      ctx.transform(0, 1, -1, 0, height, 0);
+      break;
+    case 7:
+      // Horizontal flip + 90° rotation
+      ctx.transform(0, -1, -1, 0, height, width);
+      break;
+    case 8:
+      // 270° rotation
+      ctx.transform(0, -1, 1, 0, 0, width);
+      break;
+    default:
+      // No transformation needed
+      break;
+  }
+};
+
+/**
+ * Load image from File and return HTMLImageElement
+ */
+const loadImage = (file: File): Promise<HTMLImageElement> => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    const url = URL.createObjectURL(file);
+
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      resolve(img);
+    };
+
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error('Failed to load image'));
+    };
+
+    img.src = url;
+  });
+};
+
+/**
+ * Calculate new dimensions maintaining aspect ratio
+ */
+const calculateDimensions = (
+  width: number,
+  height: number,
+  maxWidth: number,
+  maxHeight: number
+): { width: number; height: number } => {
+  // If image is already smaller than max dimensions, return original
+  if (width <= maxWidth && height <= maxHeight) {
+    return { width, height };
+  }
+
+  // Calculate scale factor
+  const scaleWidth = maxWidth / width;
+  const scaleHeight = maxHeight / height;
+  const scale = Math.min(scaleWidth, scaleHeight, 1);
+
+  return {
+    width: Math.round(width * scale),
+    height: Math.round(height * scale),
+  };
+};
+
+/**
+ * Compress image using Canvas API
+ * @param file - Original image file
+ * @param options - Compression options
+ * @returns Compressed File object
+ */
+export const compressImage = async (
+  file: File,
+  options: CompressionOptions = {}
+): Promise<File> => {
+  const opts = { ...DEFAULT_OPTIONS, ...options };
+
+  // Check if compression is needed
+  const fileSizeMB = file.size / (1024 * 1024);
+  const shouldCompress = fileSizeMB > 1; // Compress if > 1 MB
+
+  if (!shouldCompress) {
+    // Load image to check dimensions
+    try {
+      const img = await loadImage(file);
+      const needsResize =
+        img.width > opts.maxWidth || img.height > opts.maxHeight;
+
+      if (!needsResize) {
+        // File is already small enough, return original
+        return file;
+      }
+    } catch (error) {
+      // If we can't load the image, return original
+      return file;
+    }
+  }
+
+  try {
+    // Load image
+    const img = await loadImage(file);
+
+    // Get orientation (simplified - full EXIF parsing would require a library)
+    const orientation = 1;
+
+    // Calculate new dimensions
+    const { width, height } = calculateDimensions(
+      img.width,
+      img.height,
+      opts.maxWidth,
+      opts.maxHeight
+    );
+
+    // Create canvas
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      throw new Error('Failed to get canvas context');
+    }
+
+    // Apply orientation transformation
+    applyOrientation(ctx, orientation, width, height);
+
+    // Draw image to canvas
+    ctx.drawImage(img, 0, 0, width, height);
+
+    // Convert canvas to blob
+    return new Promise((resolve, reject) => {
+      canvas.toBlob(
+        (blob) => {
+          if (!blob) {
+            reject(new Error('Failed to compress image'));
+            return;
+          }
+
+          // Check if compressed size is acceptable
+          const compressedSizeMB = blob.size / (1024 * 1024);
+
+          if (compressedSizeMB > opts.maxSizeMB) {
+            // If still too large, try lower quality
+            canvas.toBlob(
+              (lowerQualityBlob) => {
+                if (!lowerQualityBlob) {
+                  // Fallback to original blob
+                  const compressedFile = new File(
+                    [blob],
+                    file.name.replace(/\.[^/.]+$/, '.jpg'),
+                    { type: 'image/jpeg' }
+                  );
+                  resolve(compressedFile);
+                  return;
+                }
+                const compressedFile = new File(
+                  [lowerQualityBlob],
+                  file.name.replace(/\.[^/.]+$/, '.jpg'),
+                  { type: 'image/jpeg' }
+                );
+                resolve(compressedFile);
+              },
+              'image/jpeg',
+              Math.max(0.5, opts.quality - 0.2) // Reduce quality by 0.2, min 0.5
+            );
+          } else {
+            // Create new File with JPEG extension
+            const compressedFile = new File(
+              [blob],
+              file.name.replace(/\.[^/.]+$/, '.jpg'),
+              { type: 'image/jpeg' }
+            );
+            resolve(compressedFile);
+          }
+        },
+        'image/jpeg', // Always convert to JPEG for better compression
+        opts.quality
+      );
+    });
+  } catch (error) {
+    // If compression fails, return original file
+    return file;
+  }
+};

package/src/locales/de.json

@@ -27,6 +27,7 @@
   "date": "Geburtsdatum",
   "day": "Tag",
   "copied": "Kopiert!",
+  "placeholder": "Stellen Sie eine Frage",
   "month": "Monat",
   "year": "Jahr",
   "createdAt": "Erstellungsdatum",
@@ -237,9 +238,10 @@
   "upload": {
     "loginRequired": "Login erforderlich",
     "loginRequiredDescription": "Bitte melden Sie sich an, um Bilder hochzuladen",
-    "uploadFiles": "Dateien hochladen",
-    "uploadImage": "Bild hochladen",
-    "uploadDocument": "Dokument hochladen",
+    "uploadFiles": "Dateien hochladen ({{shortcut}}+O zum Öffnen des Datei-Selektors)",
+    "uploadFilesWithShortcut": "{{shortcut}}+O zum Öffnen des Datei-Selektors",
+    "uploadImages": "Bilder hochladen",
+    "uploadDocuments": "Dokumente hochladen",
     "replace": "Ersetzen",
     "remaining": "verbleibend",
     "maxReached": "Maximal erreicht",
@@ -248,7 +250,8 @@
     "uploadFailed": "Hochladen fehlgeschlagen",
     "uploadSuccess": "Hochladen erfolgreich",
     "uploadSuccessDescription": "Die Datei wurde erfolgreich hochgeladen",
-    "maxImagesReached": "Sie können bis zu {{max}} Bilder hochladen"
+    "maxImagesReached": "Sie können bis zu {{max}} Bilder hochladen",
+    "dragAndDropFiles": "Ziehen Sie Dateien hierher, um sie zur Chat hinzuzufügen"
   },
   "media": {
     "title": "Titel",

package/src/locales/en.json

@@ -22,6 +22,7 @@
   "all": "All",
   "today": "Today",
   "yesterday": "Yesterday",
+  "placeholder": "Ask a question",
   "last_7_days": "Last 7 days",
   "last_30_days": "Last 30 days",
   "month": "Month",
@@ -250,14 +251,15 @@
   "upload": {
     "loginRequired": "Login required",
     "loginRequiredDescription": "Please login to upload images",
-    "uploadFiles": "Upload files",
-    "uploadImage": "Upload image",
+    "uploadFiles": "Upload files ({{shortcut}}+O to open file chooser)",
+    "uploadFilesWithShortcut": "{{shortcut}}+O to open file chooser",
+    "uploadImages": "Upload images",
     "replace": "Replace",
     "maxImagesReached": "You can upload up to {{max}} images",
     "maxDocumentsReached": "You can upload up to {{max}} documents",
     "remaining": "remaining",
     "lastDocumentSlot": "Upload last document",
-    "uploadDocument": "Upload document",
+    "uploadDocuments": "Upload documents",
     "maxReached": "Max limit reached",
     "imageTitle": "Image title: {{title}}",
     "titleHelp": "Adding a descriptive title helps the AI provide more context and appropriate responses.",
@@ -266,12 +268,13 @@
     "fileReadingFailed": "File reading failed",
     "uploadFailed": "Upload failed",
     "uploadSuccess": "Upload success",
-    "titleImage": "Image: {{title}}",
+    "titleImage": "Image title: {{title}}",
     "uploadSuccessDescription": "The file has been uploaded successfully",
     "titleImageUpload": "Upload images",
     "partialUpload": "Only {{uploaded}} images on {{total}} will be uploaded. Maximum {{max}} images allowed.",
     "maxImages": "Maximum {{max}} images allowed.",
-    "upload": "Upload"
+    "upload": "Upload",
+    "dragAndDropFiles": "Drag and drop files here to add them to the chat"
   },
   "media": {
     "title": "Title",