@memori.ai/memori-react 7.33.4 → 7.34.1

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import cx from 'classnames';
 import { UploadIcon } from '../../icons/Upload';
 import Spin from '../../ui/Spin';
@@ -7,14 +7,9 @@ import { DocumentIcon } from '../../icons/Document';
 import CloseIcon from '../../icons/Close';
 import Button from '../../ui/Button';
 import Modal from '../../ui/Modal';
+import { MAX_DOCUMENT_CONTENT_LENGTH, MAX_TOTAL_MESSAGE_PAYLOAD } from '../../../helpers/constants';
 
 // Types
-type UploadError = {
-  message: string;
-  severity: 'error' | 'warning' | 'info';
-  fileId?: string;
-};
-
 type PreviewFile = {
   name: string;
   id: string;
@@ -26,8 +21,6 @@ type PreviewFile = {
 };
 
 // Constants
-const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
-const MAX_TEXT_LENGTH = 100000; // 100,000 characters
 const PDF_JS_VERSION = '3.11.174';
 const WORKER_URL = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDF_JS_VERSION}/pdf.worker.min.js`;
 const PDF_JS_URL = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDF_JS_VERSION}/pdf.min.js`;
@@ -46,68 +39,63 @@ interface UploadDocumentsProps {
   setDocumentPreviewFiles: (files: { name: string; id: string; content: string; mimeType: string }[]) => void;
   maxDocuments?: number;
   documentPreviewFiles: any;
+  onLoadingChange?: (loading: boolean) => void;
+  onDocumentError?: (error: { message: string; severity: 'error' | 'warning' | 'info' }) => void;
+  onValidateFile?: (file: File) => boolean;
+  onValidatePayloadSize?: (newDocuments: { name: string; id: string; content: string; mimeType: string }[]) => boolean;
 }
 
 const UploadDocuments: React.FC<UploadDocumentsProps> = ({
   setDocumentPreviewFiles,
   maxDocuments,
   documentPreviewFiles,
+  onLoadingChange,
+  onDocumentError,
+  onValidateFile,
+  onValidatePayloadSize,
 }) => {
   // State
   const [isLoading, setIsLoading] = useState(false);
-  const [errors, setErrors] = useState<UploadError[]>([]);
   const [selectedFile, setSelectedFile] = useState<PreviewFile | null>(null);
 
   // Refs
   const documentInputRef = useRef<HTMLInputElement>(null);
 
-  // Error handling
-  const clearErrors = () => setErrors([]);
-  
-  const removeError = (errorMessage: string) => {
-    setErrors(prev => prev.filter(e => e.message !== errorMessage));
-  };
-  
-  const addError = (error: UploadError) => {
-    setErrors(prev => [...prev, error]);
-    setTimeout(() => removeError(error.message), 5000);
-  };
+  // Update loading state in parent component
+  useEffect(() => {
+    if (onLoadingChange) {
+      onLoadingChange(isLoading);
+    }
+  }, [isLoading, onLoadingChange]);
 
   // Document upload
   const validateDocumentFile = (file: File): boolean => {
-    const fileExt = `.${file.name.split('.').pop()?.toLowerCase()}`;
-    const ALLOWED_FILE_TYPES = ['.pdf', '.txt', '.json', '.xlsx', '.csv', '.md']; // Added .md
-
-    if (!ALLOWED_FILE_TYPES.includes(fileExt)) {
-      addError({
-        message: `File type "${fileExt}" is not supported. Please use: ${ALLOWED_FILE_TYPES.join(', ')}`,
-        severity: 'error',
-        fileId: file.name,
-      });
-      return false;
+    if (onValidateFile) {
+      return onValidateFile(file);
     }
+    return true;
+  };
 
-    if (file.size > MAX_FILE_SIZE) {
-      addError({
-        message: `File "${file.name}" exceeds ${MAX_FILE_SIZE / 1024 / 1024}MB limit`,
-        severity: 'error',
-        fileId: file.name,
-      });
-      return false;
+  // Validate total payload size
+  const validatePayloadSize = (newDocuments: { name: string; id: string; content: string; mimeType: string }[]): boolean => {
+    if (onValidatePayloadSize) {
+      return onValidatePayloadSize(newDocuments);
     }
-
     return true;
   };
 
   const extractTextFromPDF = async (file: File): Promise<string> => {
+    console.log('Extracting text from PDF:', file.name);
     try {
       // Load PDF.js if not already loaded
       if (!window.pdfjsLib) {
+        console.log('Loading PDF.js library...');
         await new Promise((resolve, reject) => {
           const script = document.createElement('script');
           script.src = PDF_JS_URL;
           script.onload = () => {
             window.pdfjsLib.GlobalWorkerOptions.workerSrc = WORKER_URL;
+            console.log('PDF.js loaded successfully');
             resolve(true);
           };
           script.onerror = reject;
@@ -118,10 +106,12 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
       // Extract text from PDF
       const arrayBuffer = await file.arrayBuffer();
       const pdf = await window.pdfjsLib.getDocument({ data: arrayBuffer }).promise;
+      console.log('PDF loaded, pages:', pdf.numPages);
       let text = '';
 
       // Iterate through each page and extract text
       for (let i = 1; i <= pdf.numPages; i++) {
+        console.log('Processing page', i);
         const page = await pdf.getPage(i);
         const content = await page.getTextContent();
         const pageText = content.items
@@ -131,15 +121,19 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
         text += pageText + '\n';
       }
 
+      console.log('PDF text extraction complete');
       return text;
     } catch (error) {
+      console.error('PDF extraction failed:', error);
       throw new Error(`PDF extraction failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
   };
 
   const extractTextFromXLSX = async (file: File): Promise<string> => {
+    console.log('Extracting text from XLSX:', file.name);
     try {
       if (!window.XLSX) {
+        console.log('Loading XLSX library...');
         await new Promise((resolve, reject) => {
           const script = document.createElement('script');
           script.src = XLSX_URL;
@@ -147,6 +141,7 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
           script.onerror = reject;
           document.head.appendChild(script);
         });
+        console.log('XLSX library loaded successfully');
       }
 
       const arrayBuffer = await file.arrayBuffer();
@@ -157,9 +152,11 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
         cellText: true,
         cellDates: true,
       });
+      console.log('XLSX workbook loaded, sheets:', workbook.SheetNames);
 
       let text = '';
       for (const sheetName of workbook.SheetNames) {
+        console.log('Processing sheet:', sheetName);
         const worksheet = workbook.Sheets[sheetName];
         const data = window.XLSX.utils.sheet_to_json(worksheet, { header: 1, raw: false });
         
@@ -191,13 +188,16 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
         text += `Sheet: ${sheetName}\n${formattedText.join('\n')}\n\n`;
       }
 
+      console.log('XLSX text extraction complete');
       return text;
     } catch (error) {
+      console.error('XLSX extraction failed:', error);
       throw new Error(`XLSX extraction failed: ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
   };
 
   const processDocumentFile = async (file: File): Promise<string | null> => {
+    console.log('Processing document file:', file.name);
     const fileExt = file.name.split('.').pop()?.toLowerCase() || '';
 
     try {
@@ -211,62 +211,93 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
         text = await extractTextFromXLSX(file);
       }
 
-      if (text && text.length > MAX_TEXT_LENGTH) {
-        addError({
-          message: `File "${file.name}" content exceeds ${MAX_TEXT_LENGTH} characters and was truncated`,
+      if (text && text.length > MAX_DOCUMENT_CONTENT_LENGTH) {
+        console.warn('Document content exceeds length limit:', text.length, '>', MAX_DOCUMENT_CONTENT_LENGTH);
+        onDocumentError?.({
+          message: `File "${file.name}" content exceeds ${MAX_DOCUMENT_CONTENT_LENGTH} characters and was truncated`,
           severity: 'warning',
-          fileId: file.name,
         });
-        text = text.substring(0, MAX_TEXT_LENGTH) + "\n\n[Content truncated due to size limits]";
+        text = text.substring(0, MAX_DOCUMENT_CONTENT_LENGTH) + "\n\n[Content truncated due to size limits]";
       }
 
+      console.log('Document processing complete');
       return text;
     } catch (error) {
+      console.error('Document processing failed:', error);
       throw new Error(`Failed to process "${file.name}": ${error instanceof Error ? error.message : 'Unknown error'}`);
     }
   };
 
   const handleDocumentUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    console.log('Document upload started');
     const files = Array.from(e.target.files || []);
     if (files.length === 0) return;
 
-    // Only process the first file
-    const file = files[0];
-
     setIsLoading(true);
-    clearErrors();
 
-    if (!validateDocumentFile(file)) {
-      setIsLoading(false);
-      if (documentInputRef.current) {
-        documentInputRef.current.value = '';
+    // Process each file
+    const processedFiles: { name: string; id: string; content: string; mimeType: string }[] = [];
+    
+    for (const file of files) {
+      console.log('Processing file:', file.name);
+      if (!validateDocumentFile(file)) {
+        continue;
       }
-      return;
-    }
 
-    const fileId = Math.random().toString(36).substr(2, 9);
-      
-    try {
-      const text = await processDocumentFile(file);
+      const fileId = Math.random().toString(36).substr(2, 9);
       
-      if (text) {
+      try {
+        const text = await processDocumentFile(file);
         
-        // Replace document preview files with the new one
-        setDocumentPreviewFiles([{
-          name: file.name,
-          id: fileId,
-          content: text,
-          mimeType: file.type,
-        }]);
+        if (text) {
+          processedFiles.push({
+            name: file.name,
+            id: fileId,
+            content: text,
+            mimeType: file.type,
+          });
+        }
+      } catch (error) {
+        console.error('File processing error:', error);
+        onDocumentError?.({
+          message: `${error instanceof Error ? error.message : 'Unknown error'}`,
+          severity: 'error',
+        });
       }
-    } catch (error) {
-      addError({
-        message: `${error instanceof Error ? error.message : 'Unknown error'}`,
-        severity: 'error',
-        fileId: file.name,
-      });
     }
 
+    // Add new documents to existing ones
+    if (processedFiles.length > 0) {
+      console.log('Successfully processed files:', processedFiles.length);
+      // Validate total payload size
+      if (!validatePayloadSize(processedFiles)) {
+        setIsLoading(false);
+        if (documentInputRef.current) {
+          documentInputRef.current.value = '';
+        }
+        return;
+      }
+
+      const existingDocuments = documentPreviewFiles.filter(
+        (file: any) => file.type === 'document'
+      );
+      const existingImages = documentPreviewFiles.filter(
+        (file: any) => file.type === 'image'
+      );
+      
+      console.log('existingDocuments', existingDocuments);
+      console.log('processedFiles', processedFiles);
+      console.log('existingImages', existingImages);
+      setDocumentPreviewFiles([
+        ...existingDocuments,
+        ...processedFiles.map(file => ({
+          ...file,
+          type: 'document'
+        })),
+      ]);
+    }
+
+    console.log('Document upload complete');
     setIsLoading(false);
     if (documentInputRef.current) {
       documentInputRef.current.value = '';
@@ -275,6 +306,7 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
 
   return (
     <div className="memori--document-upload-wrapper">
+
       {/* Hidden file input */}
       <input
         ref={documentInputRef}
@@ -293,7 +325,7 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
           'memori-share-button--button',
           'memori--conversation-button',
           'memori--document-upload-button',
-          { 'memori--error': errors.length > 0 }
+          { 'memori--error': false } // Removed errors.length > 0
         )}
         onClick={() => documentInputRef.current?.click()}
         disabled={isLoading || (maxDocuments && documentPreviewFiles.filter((file: any) => file.type !== 'image').length >= maxDocuments) || false}
@@ -331,20 +363,6 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
         </div>
       </Modal>
 
-      {/* Error messages container */}
-      <div className="memori--error-message-container">
-        {errors.map((error, index) => (
-          <Alert
-            key={`${error.message}-${index}`}
-            open={true}
-            type={error.severity}
-            title={'Upload notification'}
-            description={error.message}
-            onClose={() => removeError(error.message)}
-            width="350px"
-          />
-        ))}
-      </div>
     </div>
   );
 };

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

@@ -10,12 +10,6 @@ import { useTranslation } from 'react-i18next';
 import Button from '../../ui/Button';
 
 // Types
-type UploadError = {
-  message: string;
-  severity: 'error' | 'warning' | 'info';
-  fileId?: string;
-};
-
 type PreviewFile = {
   name: string;
   id: string;
@@ -28,9 +22,6 @@ type PreviewFile = {
   title?: string;
 };
 
-// Constants
-const DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
-
 // Props interface
 interface UploadImagesProps {
   authToken?: string;
@@ -42,10 +33,10 @@ interface UploadImagesProps {
   onLoadingChange?: (loading: boolean) => void;
   maxImages?: number;
   memoriID?: string;
+  onImageError?: (error: { message: string; severity: 'error' | 'warning' | 'info' }) => void;
+  onValidateImageFile?: (file: File) => boolean;
 }
 
-const ALLOWED_FILE_TYPES = ['.jpg', '.jpeg', '.png'];
-
 const UploadImages: React.FC<UploadImagesProps> = ({
   authToken = '',
   sessionID = '',
@@ -56,6 +47,8 @@ const UploadImages: React.FC<UploadImagesProps> = ({
   onLoadingChange,
   maxImages = 5,
   memoriID = '',
+  onImageError,
+  onValidateImageFile,
 }) => {
   const { t, i18n } = useTranslation();
   // Client
@@ -66,7 +59,6 @@ const UploadImages: React.FC<UploadImagesProps> = ({
 
   // State
   const [isLoading, setIsLoading] = useState(false);
-  const [errors, setErrors] = useState<UploadError[]>([]);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [filePreview, setFilePreview] = useState<string | null>(null);
   const [imageTitle, setImageTitle] = useState('');
@@ -82,18 +74,6 @@ const UploadImages: React.FC<UploadImagesProps> = ({
     }
   }, [isLoading, onLoadingChange]);
 
-  // Error handling
-  const clearErrors = () => setErrors([]);
-
-  const removeError = (errorMessage: string) => {
-    setErrors(prev => prev.filter(e => e.message !== errorMessage));
-  };
-
-  const addError = (error: UploadError) => {
-    setErrors(prev => [...prev, error]);
-    setTimeout(() => removeError(error.message), 5000);
-  };
-
   // Check current image count
   const currentImageCount = documentPreviewFiles.filter(
     (file: any) => file.type === 'image'
@@ -101,33 +81,9 @@ const UploadImages: React.FC<UploadImagesProps> = ({
 
   // Image upload
   const validateImageFile = (file: File): boolean => {
-    const fileExt = `.${file.name.split('.').pop()?.toLowerCase()}`;
-
-    if (
-      !ALLOWED_FILE_TYPES.includes(fileExt) &&
-      !file.type.startsWith('image/')
-    ) {
-      addError({
-        message: `File type "${fileExt}" is not supported. Please use: ${ALLOWED_FILE_TYPES.join(
-          ', '
-        )}`,
-        severity: 'error',
-        fileId: file.name,
-      });
-      return false;
+    if (onValidateImageFile) {
+      return onValidateImageFile(file);
     }
-
-    if (file.size > DEFAULT_MAX_FILE_SIZE) {
-      addError({
-        message: `File "${file.name}" exceeds ${
-          DEFAULT_MAX_FILE_SIZE / 1024 / 1024
-        }MB limit`,
-        severity: 'error',
-        fileId: file.name,
-      });
-      return false;
-    }
-
     return true;
   };
 
@@ -137,7 +93,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
 
     // Check if adding this file would exceed the limit
     if (currentImageCount >= maxImages) {
-      addError({
+      onImageError?.({
         message:
           t('upload.maxImagesReached') ??
           `Maximum ${maxImages} images allowed.`,
@@ -146,8 +102,6 @@ const UploadImages: React.FC<UploadImagesProps> = ({
       return;
     }
 
-    clearErrors();
-
     const file = files[0]; // Only handle the first file
 
     if (!validateImageFile(file)) {
@@ -261,14 +215,13 @@ const UploadImages: React.FC<UploadImagesProps> = ({
               ]
             );
           } catch (error) {
-            addError({
+            onImageError?.({
               message: t('upload.uploadFailed') ?? 'Upload failed',
               severity: 'error',
-              fileId: selectedFile.name,
             });
           }
         } else {
-          addError({
+          onImageError?.({
             message:
               t('upload.apiClientNotConfigured') ??
               'API client not configured properly for media upload',
@@ -280,20 +233,18 @@ const UploadImages: React.FC<UploadImagesProps> = ({
       };
 
       reader.onerror = () => {
-        addError({
+        onImageError?.({
           message: t('upload.fileReadingFailed') ?? 'File reading failed',
           severity: 'error',
-          fileId: selectedFile.name,
         });
         setIsLoading(false);
       };
 
       reader.readAsDataURL(selectedFile);
     } catch (error) {
-      addError({
+      onImageError?.({
         message: t('upload.uploadFailed') ?? 'Upload failed',
         severity: 'error',
-        fileId: selectedFile.name,
       });
       setIsLoading(false);
     }
@@ -312,7 +263,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
       <input
         ref={imageInputRef}
         type="file"
-        accept={ALLOWED_FILE_TYPES.join(',')}
+        accept=".jpg,.jpeg,.png"
         className="memori--upload-file-input"
         onChange={handleImageUpload}
         disabled={
@@ -404,21 +355,6 @@ const UploadImages: React.FC<UploadImagesProps> = ({
           </div>
         </div>
       </Modal>
-
-      {/* Error messages container */}
-      <div className="memori--error-message-container">
-        {errors.map((error, index) => (
-          <Alert
-            key={`${error.message}-${index}`}
-            open={true}
-            type={error.severity}
-            title={'Upload notification'}
-            description={error.message}
-            onClose={() => removeError(error.message)}
-            width="350px"
-          />
-        ))}
-      </div>
     </div>
   );
 };

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

@@ -96,9 +96,6 @@ exports[`renders UploadButton unchanged 1`] = `
             />
           </svg>
         </button>
-        <div
-          class="memori--error-message-container"
-        />
       </div>
     </div>
     <div
@@ -149,9 +146,6 @@ exports[`renders UploadButton unchanged 1`] = `
             />
           </svg>
         </button>
-        <div
-          class="memori--error-message-container"
-        />
       </div>
     </div>
     <div

package/src/helpers/constants.ts

@@ -186,3 +186,8 @@ export const boardOfExpertsLoadingSentences: {
 
 export const MAX_MSG_CHARS = 4000;
 export const MAX_MSG_WORDS = 300;
+
+// Document upload limits
+export const MAX_DOCUMENTS_PER_MESSAGE = 5;
+export const MAX_TOTAL_MESSAGE_PAYLOAD = 100000; // 100KB total payload limit
+export const MAX_DOCUMENT_CONTENT_LENGTH = 100000; // 100KB per document content

package/src/helpers/utils.ts

@@ -201,6 +201,19 @@ export const stripOutputTags = (text: string): string => {
   return stripOutputTags(strippedText);
 };
 
+export const stripReasoningTags = (text: string) => {
+  const reasoningTagRegex = /<think.*?<\/think>/gs;
+
+  if (!reasoningTagRegex.test(text)) {
+    return text;
+  }
+
+  const strippedText = text.replace(reasoningTagRegex, '');
+
+  // Recursively strip nested reasoning tags
+  return stripOutputTags(strippedText);
+};
+
 export const stripHTML = (text: string) => {
   const el = document.createElement('div');
   el.innerHTML = text;

package/src/index.test.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { memori, tenant, integration } from './mocks/data';
+import Memori from './index';
+
+// Mock window.location
+const mockLocation = {
+  hostname: 'localhost',
+};
+
+Object.defineProperty(window, 'location', {
+  value: mockLocation,
+  writable: true,
+});
+
+it('renders client', () => {
+  const { container } = render(
+    <Memori
+      memoriID={memori.memoriID}
+      ownerUserID={memori.ownerUserID}
+      tenantID={tenant.tenantID}
+      integration={{
+        ...integration,
+        customData: JSON.stringify({}),
+      }}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders client with whiteListedDomains on allowed domains', () => {
+  mockLocation.hostname = 'memori.ai';
+  const { container } = render(
+    <Memori
+      memoriID={memori.memoriID}
+      ownerUserID={memori.ownerUserID}
+      tenantID={tenant.tenantID}
+      integration={{
+        ...integration,
+        customData: JSON.stringify({
+          whiteListedDomains: ['localhost', 'memori.ai'],
+        }),
+      }}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders client with whiteListedDomains on not allowed domains', () => {
+  mockLocation.hostname = 'aisuru.com';
+  const { container } = render(
+    <Memori
+      memoriID={memori.memoriID}
+      ownerUserID={memori.ownerUserID}
+      tenantID={tenant.tenantID}
+      integration={{
+        ...integration,
+        customData: JSON.stringify({
+          whiteListedDomains: ['localhost', 'memori.ai'],
+        }),
+      }}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/index.tsx

@@ -259,6 +259,22 @@ const Memori: React.FC<Props> = ({
   const layoutIntegrationConfig = safeParseJSON(
     layoutIntegration?.customData ?? '{}'
   );
+
+  const whiteListedDomains = layoutIntegrationConfig.whiteListedDomains;
+  if (whiteListedDomains) {
+    // check if we are client side
+    if (typeof window !== 'undefined') {
+      // check if the current domain is in the whiteListedDomains with Regex
+      if (
+        !whiteListedDomains.some((domain: string) =>
+          new RegExp(domain).test(window.location.hostname)
+        )
+      ) {
+        return null;
+      }
+    }
+  }
+
   const initialContextVars =
     context ?? getParsedContext(layoutIntegrationConfig.contextVars);
   const initialQuestionLayout =