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

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

@@ -5,6 +5,9 @@ import { FileText as DocumentIcon } from 'lucide-react';
 import { Modal } from '@memori.ai/ui';
 import { useTranslation } from 'react-i18next';
 import memoriApiClient from '@memori.ai/memori-api-client';
+import { officeNativeExtensions } from '../../../helpers/constants';
+import { isOfficeNativeFilename } from '../../../helpers/utils';
+import { useWidgetSurfaceEl } from '../../../context/widgetSurfaceContext';
 // Types
 type PreviewFile = {
   name: string;
@@ -78,6 +81,7 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
   onValidatePayloadSize,
 }) => {
   const { t } = useTranslation();
+  const surfaceEl = useWidgetSurfaceEl();
   const { backend } = client || {
     backend: { uploadAsset: null, uploadAssetUnlogged: null },
   };
@@ -165,64 +169,101 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
     }
   };
 
-  const extractTextFromXLSX = async (file: File): Promise<string> => {
-    try {
-      if (!window.XLSX) {
-        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 loadXLSXLibrary = async (): Promise<void> => {
+    if (window.XLSX) return;
 
-      const arrayBuffer = await file.arrayBuffer();
-      const workbook = window.XLSX.read(arrayBuffer, {
-        type: 'array',
-        cellFormula: true,
-        cellNF: true,
-        cellText: true,
-        cellDates: true,
+    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,
       });
 
-      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();
+      });
 
-        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);
+      }
 
-        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;
+  };
 
-        text += `Sheet: ${sheetName}\n${formattedText.join('\n')}\n\n`;
+  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;
+    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(
@@ -235,21 +276,31 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
 
   const processDocumentFile = async (
     file: File
-  ): Promise<{ text: string | null }> => {
-    const fileExt = file.name.split('.').pop()?.toLowerCase() || '';
+  ): 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 (fileExt === 'pdf') {
+      if (ext === 'pdf') {
         text = await extractTextFromPDF(file);
-      } else if (['txt', 'md', 'json', 'csv', 'html'].includes(fileExt)) {
+      } else if (['txt', 'md', 'json', 'csv', 'html'].includes(ext)) {
         text = await file.text();
-      } else if (fileExt === 'xlsx') {
-        text = await extractTextFromXLSX(file);
+      } else if (ext === 'xlsx') {
+        const extracted = await extractTextFromXLSX(file);
+        text = extracted.display;
+        textForAsset = extracted.asset;
       }
 
-      return { text };
+      return { text, textForAsset };
     } catch (error) {
       console.error('Document processing failed:', error);
       throw new Error(
@@ -295,7 +346,12 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
       throw new Error(response.resultMessage || 'Upload failed');
     }
 
-    return response.asset?.assetURL;
+    const assetURL = response.asset?.assetURL;
+    if (!assetURL) {
+      throw new Error('Upload failed: missing asset URL');
+    }
+
+    return assetURL;
   };
 
   const handleDocumentUpload = async (
@@ -360,11 +416,42 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
         const fileId = Math.random().toString(36).substr(2, 9);
 
         try {
-          const { text } = await processDocumentFile(file);
+          const { text, textForAsset, uploadAsOriginal } =
+            await processDocumentFile(file);
+
+          if (uploadAsOriginal) {
+            // Office native format: upload the original file as asset, no text extraction
+            let assetUrl: string | undefined;
+            try {
+              assetUrl = await uploadAssetFile(file);
+            } catch (uploadError) {
+              console.error('Office asset upload failed:', uploadError);
+              onDocumentError?.({
+                message: t('upload.officeAssetUploadFailed', {
+                  fileName: file.name,
+                  defaultValue: `"${file.name}" could not be uploaded and was not added.`,
+                }),
+                severity: 'error',
+              });
+            }
+
+            if (!assetUrl) {
+              activeCount--;
+              onLoadingChange?.(true, activeCount);
+              continue;
+            }
 
-          if (text) {
+            processedFiles.push({
+              name: file.name,
+              id: fileId,
+              content: '',
+              mimeType: file.type,
+              textAssetUrl: assetUrl,
+            });
+          } else if (text) {
             const baseName = file.name.replace(/\.[^/.]+$/, '') || file.name;
-            const textFile = new File([text], `${baseName}.txt`, {
+            const assetText = textForAsset ?? text;
+            const textFile = new File([assetText], `${baseName}.txt`, {
               type: 'text/plain',
             });
 
@@ -429,7 +516,9 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
       <input
         ref={documentInputRef}
         type="file"
-        accept=".pdf,.txt,.md,.json,.xlsx,.csv,.html"
+        accept={`.pdf,.txt,.md,.json,.xlsx,.csv,.html,${officeNativeExtensions.join(
+          ','
+        )}`}
         multiple
         className="memori--upload-file-input"
         onChange={handleDocumentUpload}
@@ -468,6 +557,7 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
 
       {/* Modal */}
       <Modal
+        container={surfaceEl ?? undefined}
         width="80%"
         widthMd="80%"
         open={!!selectedFile}

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

@@ -8,6 +8,7 @@ import { Asset, Medium } from '@memori.ai/memori-api-client/dist/types';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@memori.ai/ui';
 import { compressImage } from '../../../helpers/imageCompression';
+import { useWidgetSurfaceEl } from '../../../context/widgetSurfaceContext';
 
 // Types
 type PreviewFile = {
@@ -54,6 +55,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
   onValidateImageFile,
 }) => {
   const { t, i18n } = useTranslation();
+  const surfaceEl = useWidgetSurfaceEl();
   // Client
   const { backend, dialog } = client || {
     backend: { uploadAsset: null, uploadAssetUnlogged: null },
@@ -483,6 +485,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
 
       {/* Upload Modal with Title Input */}
       <Modal
+        container={surfaceEl ?? undefined}
         open={showUploadModal && !!selectedFile}
         className="memori--modal-preview-file memori--upload-image-preview-modal"
         onClose={handleCancelUpload}
@@ -496,7 +499,7 @@ const UploadImages: React.FC<UploadImagesProps> = ({
               borderTop: '1px solid rgba(255, 255, 255, 0.2)',
             }}
           >
-            <Button onClick={handleCancelUpload} variant="outline">
+            <Button onClick={handleCancelUpload} variant="outline" danger>
               {t('cancel') ?? 'Cancel'}
             </Button>
             <Button

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

@@ -6,17 +6,17 @@ exports[`renders UploadButton unchanged 1`] = `
     class="memori--unified-upload-wrapper"
   >
     <input
-      accept=".jpg,.jpeg,.png,.pdf,.txt,.json,.xlsx,.csv,.md,.html"
+      accept=".jpg,.jpeg,.png,.pdf,.txt,.json,.xlsx,.csv,.md,.html,.doc,.docx,.dotx,.xltx,.potx"
       class="memori--upload-file-input"
       multiple=""
       style="display: none;"
       type="file"
     />
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:r1:"
       >
         <button
@@ -60,7 +60,7 @@ exports[`renders UploadButton unchanged 1`] = `
         class="memori--document-upload-wrapper"
       >
         <input
-          accept=".pdf,.txt,.md,.json,.xlsx,.csv,.html"
+          accept=".pdf,.txt,.md,.json,.xlsx,.csv,.html,.doc,.docx,.dotx,.xltx,.potx"
           class="memori--upload-file-input"
           multiple=""
           type="file"

package/src/components/WhyThisAnswer/WhyThisAnswer.tsx

@@ -13,6 +13,7 @@ import {
 } from '@memori.ai/ui';
 import { getErrori18nKey } from '../../helpers/error';
 import { useTranslation } from 'react-i18next';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import Snippet from '../Snippet/Snippet';
 import MediaWidget from '../MediaWidget/MediaWidget';
 import { Card } from '@memori.ai/ui';
@@ -40,6 +41,7 @@ const WhyThisAnswer = ({
   client,
   _TEST_loading = false,
 }: Props) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const { t } = useTranslation();
   const { add } = useAlertManager();
   const searchMemory = client?.search.searchMemory;
@@ -97,6 +99,7 @@ const WhyThisAnswer = ({
 
   return (
     <Drawer
+      container={surfaceEl ?? undefined}
       open={visible}
       anchor="right"
       className="memori-whythisanswer-drawer"