@memori.ai/memori-react 8.42.0 → 8.43.0

package/src/components/UploadButton/UploadButton.stories.tsx

@@ -121,7 +121,7 @@ A unified upload button that supports both images and documents with the followi
 ## Limits
 
 - **Images**: Maximum 5 images, 15MB per file, formats: .jpg, .jpeg, .png
-- **Documents**: Maximum 5 documents, 15MB per file, formats: .pdf, .txt, .json, .xlsx, .csv, .md
+- **Documents**: Maximum 5 documents, 25MB per file; PDF, Office, OpenDocument, HTML, structured text, and plain-text formats
 - **Content**: Document content is limited to 300,000 characters per document (truncated if exceeded)
         `,
       },
@@ -206,7 +206,7 @@ const Template: Story<UploadButtonProps> = (args) => {
             <li>Drag and drop files anywhere in this area</li>
             <li>Press <kbd style={{ padding: '2px 6px', backgroundColor: '#f0f0f0', borderRadius: '3px' }}>Cmd+V</kbd> / <kbd style={{ padding: '2px 6px', backgroundColor: '#f0f0f0', borderRadius: '3px' }}>Ctrl+V</kbd> to open file chooser</li>
             <li>Paste files from clipboard using <kbd style={{ padding: '2px 6px', backgroundColor: '#f0f0f0', borderRadius: '3px' }}>Cmd+V</kbd> / <kbd style={{ padding: '2px 6px', backgroundColor: '#f0f0f0', borderRadius: '3px' }}>Ctrl+V</kbd></li>
-            <li>Upload both images (.jpg, .jpeg, .png) and documents (.pdf, .txt, .json, .xlsx, .csv, .md)</li>
+            <li>Upload images and supported PDF, Office, OpenDocument, HTML, or text documents</li>
           </ul>
         </div>
       </div>

package/src/components/UploadButton/UploadButton.tsx

@@ -9,13 +9,17 @@ import UploadDocuments from './UploadDocuments/UploadDocuments';
 import UploadImages from './UploadImages/UploadImages';
 import { useTranslation } from 'react-i18next';
 import memoriApiClient from '@memori.ai/memori-api-client';
-import { officeNativeExtensions } from '../../helpers/constants';
+import {
+  documentConversionExtensions,
+  officeNativeExtensions,
+} from '../../helpers/constants';
 import Tooltip from '../ui/Tooltip';
 // Props interface
 interface UploadManagerProps {
   authToken?: string;
   client?: ReturnType<typeof memoriApiClient>;
   sessionID?: string;
+  baseUrl?: string;
   isMediaAccepted?: boolean;
   setDocumentPreviewFiles: any;
   documentPreviewFiles: {
@@ -40,6 +44,7 @@ const UploadButton: React.FC<UploadManagerProps> = ({
   authToken = '',
   client,
   sessionID = '',
+  baseUrl = '',
   isMediaAccepted = false,
   setDocumentPreviewFiles,
   documentPreviewFiles,
@@ -101,14 +106,8 @@ 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: readonly string[] = [
+      ...documentConversionExtensions,
       ...officeNativeExtensions,
     ];
     const fileExt = `.${file.name.split('.').pop()?.toLowerCase()}`;
@@ -453,17 +452,11 @@ ${file.textAssetUrl || ''}
   // Document validation and error handling
   const validateDocumentFile = (file: File): boolean => {
     const fileExt = `.${file.name.split('.').pop()?.toLowerCase()}`;
-    const ALLOWED_FILE_TYPES = [
-      '.pdf',
-      '.txt',
-      '.json',
-      '.xlsx',
-      '.csv',
-      '.md',
-      '.html',
+    const ALLOWED_FILE_TYPES: readonly string[] = [
+      ...documentConversionExtensions,
       ...officeNativeExtensions,
     ];
-    const MAX_FILE_SIZE = 15 * 1024 * 1024; // 15MB
+    const MAX_FILE_SIZE = 25 * 1024 * 1024;
 
     if (!ALLOWED_FILE_TYPES.includes(fileExt)) {
       addError({
@@ -578,7 +571,13 @@ ${file.textAssetUrl || ''}
       <input
         ref={unifiedInputRef}
         type="file"
-        accept={`.jpg,.jpeg,.png,.pdf,.txt,.json,.xlsx,.csv,.md,.html,${officeNativeExtensions.join(',')}`}
+        accept={[
+          '.jpg',
+          '.jpeg',
+          '.png',
+          ...documentConversionExtensions,
+          ...officeNativeExtensions,
+        ].join(',')}
         multiple
         className="memori--upload-file-input"
         onChange={handleFileInputChange}
@@ -634,6 +633,7 @@ ${file.textAssetUrl || ''}
           authToken={authToken}
           client={client}
           sessionID={sessionID}
+          baseUrl={baseUrl}
           memoriID={memoriID}
           maxDocuments={maxDocumentsPerMessage}
           documentPreviewFiles={documentPreviewFiles}

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

@@ -5,8 +5,12 @@ import { DocumentIcon } from '../../icons/Document';
 import Modal from '../../ui/Modal';
 import { useTranslation } from 'react-i18next';
 import memoriApiClient from '@memori.ai/memori-api-client';
-import { officeNativeExtensions } from '../../../helpers/constants';
+import {
+  documentConversionExtensions,
+  officeNativeExtensions,
+} from '../../../helpers/constants';
 import { isOfficeNativeFilename } from '../../../helpers/utils';
+import { convertDocument } from '../../../helpers/convertDocument';
 // Types
 type PreviewFile = {
   name: string;
@@ -18,21 +22,6 @@ type PreviewFile = {
   error?: boolean;
 };
 
-// Constants
-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`;
-const XLSX_URL =
-  'https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js';
-
-// Add type definitions for external libraries
-declare global {
-  interface Window {
-    pdfjsLib: any;
-    XLSX: any;
-  }
-}
-
 // Props interface
 interface UploadDocumentsProps {
   setDocumentPreviewFiles: (
@@ -47,6 +36,7 @@ interface UploadDocumentsProps {
   authToken?: string;
   client?: ReturnType<typeof memoriApiClient>;
   sessionID?: string;
+  baseUrl?: string;
   memoriID?: string;
   maxDocuments?: number;
   documentPreviewFiles: any;
@@ -71,6 +61,7 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
   authToken = '',
   client,
   sessionID = '',
+  baseUrl = '',
   memoriID = '',
   maxDocuments,
   documentPreviewFiles,
@@ -123,182 +114,19 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
     return { valid: true };
   };
 
-  const extractTextFromPDF = async (file: File): Promise<string> => {
-    try {
-      // Load PDF.js if not already loaded
-      if (!window.pdfjsLib) {
-        await new Promise((resolve, reject) => {
-          const script = document.createElement('script');
-          script.src = PDF_JS_URL;
-          script.onload = () => {
-            window.pdfjsLib.GlobalWorkerOptions.workerSrc = WORKER_URL;
-            resolve(true);
-          };
-          script.onerror = reject;
-          document.head.appendChild(script);
-        });
-      }
-
-      // Extract text from PDF
-      const arrayBuffer = await file.arrayBuffer();
-      const pdf = await window.pdfjsLib.getDocument({ data: arrayBuffer })
-        .promise;
-      let text = '';
-
-      // Iterate through each page and extract text
-      for (let i = 1; i <= pdf.numPages; i++) {
-        const page = await pdf.getPage(i);
-        const content = await page.getTextContent();
-        const pageText = content.items
-          .filter((item: any) => item.str && typeof item.str === 'string')
-          .map((item: any) => item.str)
-          .join(' ');
-        text += pageText + '\n';
-      }
-
-      return text;
-    } catch (error) {
-      console.error('PDF extraction failed:', error);
-      throw new Error(
-        `PDF extraction failed: ${
-          error instanceof Error ? error.message : 'Unknown error'
-        }`
-      );
-    }
-  };
-
-  const loadXLSXLibrary = async (): Promise<void> => {
-    if (window.XLSX) return;
-
-    await new Promise((resolve, reject) => {
-      const script = document.createElement('script');
-      script.src = XLSX_URL;
-      script.onload = resolve;
-      script.onerror = reject;
-      document.head.appendChild(script);
-    });
-  };
-
-  const readXLSXWorkbook = async (file: File) => {
-    await loadXLSXLibrary();
-
-    const arrayBuffer = await file.arrayBuffer();
-    return window.XLSX.read(arrayBuffer, {
-      type: 'array',
-      cellFormula: true,
-      cellNF: true,
-      cellText: true,
-      cellDates: true,
-    });
-  };
-
-  const formatXLSXWorkbookForDisplay = (workbook: {
-    SheetNames: string[];
-    Sheets: Record<string, unknown>;
-  }): string => {
-    let text = '';
-
-    for (const sheetName of workbook.SheetNames) {
-      const worksheet = workbook.Sheets[sheetName];
-      const data = window.XLSX.utils.sheet_to_json(worksheet, {
-        header: 1,
-        raw: false,
-      });
-
-      const colWidths = data.reduce((widths: number[], row: any[]) => {
-        row.forEach((cell, i) => {
-          const cellWidth = (cell || '').toString().length;
-          widths[i] = Math.max(widths[i] || 0, cellWidth);
-        });
-        return widths;
-      }, []);
-
-      const formattedText = data.map((row: any[]) => {
-        return row
-          .map((cell, i) => {
-            const cellStr = (cell || '').toString();
-            return cellStr.padEnd(colWidths[i] + 2);
-          })
-          .join('|')
-          .trim();
-      });
-
-      if (formattedText.length > 0) {
-        const separator = colWidths
-          .map((w: number) => '-'.repeat(w + 2))
-          .join('+');
-        formattedText.splice(1, 0, separator);
-      }
-
-      text += `Sheet: ${sheetName}\n${formattedText.join('\n')}\n\n`;
-    }
-
-    return text;
-  };
-
-  const formatXLSXWorkbookAsCsv = (workbook: {
-    SheetNames: string[];
-    Sheets: Record<string, unknown>;
-  }): string => {
-    let text = '';
-
-    for (const sheetName of workbook.SheetNames) {
-      const worksheet = workbook.Sheets[sheetName];
-      const csv = window.XLSX.utils.sheet_to_csv(worksheet, { raw: false });
-      if (csv.trim()) {
-        text += `Sheet: ${sheetName}\n${csv}\n\n`;
-      }
-    }
-
-    return text;
-  };
-
-  const extractTextFromXLSX = async (
-    file: File
-  ): Promise<{ display: string; asset: string }> => {
-    try {
-      const workbook = await readXLSXWorkbook(file);
-      return {
-        display: formatXLSXWorkbookForDisplay(workbook),
-        asset: formatXLSXWorkbookAsCsv(workbook),
-      };
-    } 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<{
     text: string | null;
-    textForAsset?: string;
     uploadAsOriginal?: boolean;
   }> => {
     if (isOfficeNativeFilename(file.name)) {
       return { text: null, uploadAsOriginal: true };
     }
 
-    const ext = file.name.split('.').pop()?.toLowerCase() || '';
     try {
-      let text: string | null = null;
-      let textForAsset: string | undefined;
-
-      if (ext === 'pdf') {
-        text = await extractTextFromPDF(file);
-      } else if (['txt', 'md', 'json', 'csv', 'html'].includes(ext)) {
-        text = await file.text();
-      } else if (ext === 'xlsx') {
-        const extracted = await extractTextFromXLSX(file);
-        text = extracted.display;
-        textForAsset = extracted.asset;
-      }
-
-      return { text, textForAsset };
+      const text = await convertDocument(file, sessionID, baseUrl);
+      return { text };
     } catch (error) {
       console.error('Document processing failed:', error);
       throw new Error(
@@ -414,8 +242,7 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
         const fileId = Math.random().toString(36).substr(2, 9);
 
         try {
-          const { text, textForAsset, uploadAsOriginal } =
-            await processDocumentFile(file);
+          const { text, uploadAsOriginal } = await processDocumentFile(file);
 
           if (uploadAsOriginal) {
             // Office native format: upload the original file as asset, no text extraction
@@ -448,8 +275,7 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
             });
           } else if (text) {
             const baseName = file.name.replace(/\.[^/.]+$/, '') || file.name;
-            const assetText = textForAsset ?? text;
-            const textFile = new File([assetText], `${baseName}.txt`, {
+            const textFile = new File([text], `${baseName}.txt`, {
               type: 'text/plain',
             });
 
@@ -514,9 +340,9 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
       <input
         ref={documentInputRef}
         type="file"
-        accept={`.pdf,.txt,.md,.json,.xlsx,.csv,.html,${officeNativeExtensions.join(
+        accept={[...documentConversionExtensions, ...officeNativeExtensions].join(
           ','
-        )}`}
+        )}
         multiple
         className="memori--upload-file-input"
         onChange={handleDocumentUpload}

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

@@ -6,7 +6,7 @@ exports[`renders UploadButton unchanged 1`] = `
     class="memori--unified-upload-wrapper"
   >
     <input
-      accept=".jpg,.jpeg,.png,.pdf,.txt,.json,.xlsx,.csv,.md,.html,.doc,.docx,.dotx,.xltx,.potx"
+      accept=".jpg,.jpeg,.png,.pdf,.docm,.xlsx,.xlsm,.xls,.ods,.pptx,.pptm,.html,.htm,.xhtml,.csv,.tsv,.txt,.md,.markdown,.json,.xml,.log,.yml,.yaml,.doc,.docx,.dotx,.xltx,.potx"
       class="memori--upload-file-input"
       multiple=""
       style="display: none;"
@@ -52,7 +52,7 @@ exports[`renders UploadButton unchanged 1`] = `
         class="memori--document-upload-wrapper"
       >
         <input
-          accept=".pdf,.txt,.md,.json,.xlsx,.csv,.html,.doc,.docx,.dotx,.xltx,.potx"
+          accept=".pdf,.docm,.xlsx,.xlsm,.xls,.ods,.pptx,.pptm,.html,.htm,.xhtml,.csv,.tsv,.txt,.md,.markdown,.json,.xml,.log,.yml,.yaml,.doc,.docx,.dotx,.xltx,.potx"
           class="memori--upload-file-input"
           multiple=""
           type="file"

package/src/components/icons/Print.tsx

@@ -1,5 +1,9 @@
 import * as React from 'react';
-const PrintIcon: React.FC<{ className?: string, title?: string }> = ({ className, title }) => (
+
+const PrintIcon: React.FC<{ className?: string; title?: string }> = ({
+  className,
+  title,
+}) => (
   <svg
     {...(!title ? { 'aria-hidden': 'true' } : {})}
     aria-label={title}
@@ -14,7 +18,7 @@ const PrintIcon: React.FC<{ className?: string, title?: string }> = ({ className
     <g
       id="Page-1"
       stroke="none"
-      stroke-width="1"
+      strokeWidth="1"
       fill="none"
       fill-rule="evenodd"
     >

package/src/helpers/constants.ts

@@ -52,6 +52,30 @@ export const officeNativeExtensions = [
   '.potx',
 ] as const;
 
+export const documentConversionExtensions = [
+  '.pdf',
+  '.docm',
+  '.xlsx',
+  '.xlsm',
+  '.xls',
+  '.ods',
+  '.pptx',
+  '.pptm',
+  '.html',
+  '.htm',
+  '.xhtml',
+  '.csv',
+  '.tsv',
+  '.txt',
+  '.md',
+  '.markdown',
+  '.json',
+  '.xml',
+  '.log',
+  '.yml',
+  '.yaml',
+] as const;
+
 export const allowedMediaTypes = [
   'image/jpeg',
   'image/png',

package/src/helpers/convertDocument.test.ts

@@ -0,0 +1,67 @@
+import { convertDocument } from './convertDocument';
+
+describe('convertDocument', () => {
+  const fetchMock = jest.fn();
+
+  beforeEach(() => {
+    fetchMock.mockReset();
+    globalThis.fetch = fetchMock as unknown as typeof fetch;
+  });
+
+  it('uploads a file through the session-gated endpoint', async () => {
+    fetchMock.mockResolvedValue({
+      ok: true,
+      json: jest.fn().mockResolvedValue({ text: '# Converted document' }),
+    });
+    const file = new File(['document'], 'contract.pdf', {
+      type: 'application/pdf',
+    });
+
+    await expect(
+      convertDocument(file, 'session/id', 'https://www.aisuru.com/')
+    ).resolves.toBe('# Converted document');
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      'https://www.aisuru.com/api/convert/session%2Fid',
+      expect.objectContaining({
+        method: 'POST',
+        body: expect.any(FormData),
+      })
+    );
+    const body = fetchMock.mock.calls[0][1].body as FormData;
+    expect(body.get('file')).toBe(file);
+    expect(fetchMock.mock.calls[0][1].headers).toBeUndefined();
+  });
+
+  it('uses the current origin when baseUrl is omitted', async () => {
+    fetchMock.mockResolvedValue({
+      ok: true,
+      json: jest.fn().mockResolvedValue({ text: 'Converted' }),
+    });
+
+    await convertDocument(new File(['text'], 'notes.txt'), 'session');
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/api/convert/session',
+      expect.any(Object)
+    );
+  });
+
+  it('surfaces conversion API errors', async () => {
+    fetchMock.mockResolvedValue({
+      ok: false,
+      json: jest.fn().mockResolvedValue({ error: 'Formato non supportato' }),
+    });
+
+    await expect(
+      convertDocument(new File(['document'], 'contract.pages'), 'session')
+    ).rejects.toThrow('Formato non supportato');
+  });
+
+  it('requires a session before uploading', async () => {
+    await expect(
+      convertDocument(new File(['document'], 'contract.pdf'), '')
+    ).rejects.toThrow('Session ID is required');
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+});

package/src/helpers/convertDocument.ts

@@ -0,0 +1,35 @@
+type ConvertDocumentResponse = {
+  text?: string;
+  error?: string;
+};
+
+export const convertDocument = async (
+  file: File,
+  sessionID: string,
+  baseUrl = ''
+): Promise<string> => {
+  if (!sessionID) {
+    throw new Error('Session ID is required to convert documents');
+  }
+
+  const body = new FormData();
+  body.append('file', file);
+
+  const origin = baseUrl.replace(/\/+$/, '');
+  const response = await fetch(
+    `${origin}/api/convert/${encodeURIComponent(sessionID)}`,
+    {
+      method: 'POST',
+      body,
+    }
+  );
+  const payload = (await response
+    .json()
+    .catch(() => null)) as ConvertDocumentResponse | null;
+
+  if (!response.ok || !payload?.text) {
+    throw new Error(payload?.error || 'Document conversion failed');
+  }
+
+  return payload.text;
+};

package/src/version.ts

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