@memori.ai/memori-react 9.0.0-alpha.2 → 9.0.0-alpha.21

package/src/components/UploadButton/UploadButton.tsx

@@ -7,17 +7,22 @@ import React, {
 } from 'react';
 import { Upload as UploadIcon } from 'lucide-react';
 import { Spin, Tooltip, useAlertManager } from '@memori.ai/ui';
+import IconButton from '../IconButton/IconButton';
 import cx from 'classnames';
 import UploadDocuments from './UploadDocuments/UploadDocuments';
 import UploadImages from './UploadImages/UploadImages';
 import { useTranslation } from 'react-i18next';
 import memoriApiClient from '@memori.ai/memori-api-client';
-
+import {
+  documentConversionExtensions,
+  officeNativeExtensions,
+} from '../../helpers/constants';
 // Props interface
 interface UploadManagerProps {
   authToken?: string;
   client?: ReturnType<typeof memoriApiClient>;
   sessionID?: string;
+  baseUrl?: string;
   isMediaAccepted?: boolean;
   setDocumentPreviewFiles: any;
   documentPreviewFiles: {
@@ -44,6 +49,7 @@ const UploadButton: React.FC<UploadManagerProps> = ({
   authToken = '',
   client,
   sessionID = '',
+  baseUrl = '',
   isMediaAccepted = false,
   setDocumentPreviewFiles,
   documentPreviewFiles,
@@ -108,14 +114,9 @@ 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()}`;
     return documentExtensions.includes(fileExt);
@@ -413,15 +414,30 @@ const UploadButton: React.FC<UploadManagerProps> = ({
     // Process each document file
     const processedDocuments = files.map(file => {
       const escapedFileName = escapeAttributeValue(file.name);
-      // Truncate the inlined content to the per-document character limit.
-      // The full text remains available via the uploaded asset link.
-      const inlinedContent =
-        file.content.length > effectivePerDocumentLimit
-          ? file.content.slice(0, effectivePerDocumentLimit)
-          : file.content;
-      const formattedContent = `<document_attachment filename="${escapedFileName}" type="${
-        file.mimeType
-      }">
+
+      let formattedContent: string;
+
+      if (!file.content) {
+        // Office native format: metadata-only attachment tag + asset link (no text body)
+        formattedContent = `<document_attachment filename="${escapedFileName}" type="${file.mimeType}">
+</document_attachment>
+
+<attachment_link>
+${file.textAssetUrl || ''}
+</attachment_link>`;
+      } else {
+        // Truncate only the content that gets inlined inside the message
+        // <document_attachment> tag. The full text is still available via
+        // textAssetUrl as an uploaded asset.
+        const inlinedContent =
+          file.content.length > effectivePerDocumentLimit
+            ? file.content.substring(0, effectivePerDocumentLimit) +
+              '\n\n[Content truncated due to size limits]'
+            : file.content;
+
+        formattedContent = `<document_attachment filename="${escapedFileName}" type="${
+          file.mimeType
+        }">
 
 ${inlinedContent}
 
@@ -430,6 +446,7 @@ ${inlinedContent}
 <attachment_link>
 ${file.textAssetUrl || ''}
 </attachment_link>`;
+      }
 
       return {
         name: file.name,
@@ -437,6 +454,7 @@ ${file.textAssetUrl || ''}
         content: formattedContent,
         type: 'document',
         mimeType: file.mimeType,
+        url: file.textAssetUrl,
       };
     });
 
@@ -447,16 +465,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({
@@ -571,13 +584,10 @@ ${file.textAssetUrl || ''}
   const isUploadDisabled = disabled || isLoading || hasReachedMediaLimit;
 
   const uploadButton = (
-    <button
+    <IconButton
       ref={buttonRef}
       type="button"
       className={cx(
-        'memori-button',
-        'memori-button--circle',
-        'memori-button--icon-only',
         'memori-share-button--button',
         'memori--conversation-button',
         'memori--unified-upload-button'
@@ -592,7 +602,7 @@ ${file.textAssetUrl || ''}
       ) : (
         <UploadIcon className="memori--upload-icon" />
       )}
-    </button>
+    </IconButton>
   );
 
   return (
@@ -607,7 +617,13 @@ ${file.textAssetUrl || ''}
       <input
         ref={unifiedInputRef}
         type="file"
-        accept=".jpg,.jpeg,.png,.pdf,.txt,.json,.xlsx,.csv,.md,.html"
+        accept={[
+          '.jpg',
+          '.jpeg',
+          '.png',
+          ...documentConversionExtensions,
+          ...officeNativeExtensions,
+        ].join(',')}
         multiple
         className="memori--upload-file-input"
         onChange={handleFileInputChange}
@@ -636,17 +652,6 @@ ${file.textAssetUrl || ''}
         )}
       </Tooltip>
 
-      {/* Media count indicator */}
-      {currentMediaCount > 0 && (
-        <div
-          className={cx('memori--document-count', {
-            'memori--document-count-full': hasReachedMediaLimit,
-          })}
-        >
-          {currentMediaCount}/{maxDocumentsPerMessage}
-        </div>
-      )}
-
       {/* Hidden components */}
       <div className="memori--hidden-uploader" ref={documentRef} aria-hidden>
         <UploadDocuments
@@ -654,6 +659,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,6 +5,13 @@ 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 {
+  documentConversionExtensions,
+  officeNativeExtensions,
+} from '../../../helpers/constants';
+import { isOfficeNativeFilename } from '../../../helpers/utils';
+import { useWidgetSurfaceEl } from '../../../context/widgetSurfaceContext';
+import { convertDocument } from '../../../helpers/convertDocument';
 // Types
 type PreviewFile = {
   name: string;
@@ -16,21 +23,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: (
@@ -45,6 +37,7 @@ interface UploadDocumentsProps {
   authToken?: string;
   client?: ReturnType<typeof memoriApiClient>;
   sessionID?: string;
+  baseUrl?: string;
   memoriID?: string;
   maxDocuments?: number;
   documentPreviewFiles: any;
@@ -69,6 +62,7 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
   authToken = '',
   client,
   sessionID = '',
+  baseUrl = '',
   memoriID = '',
   maxDocuments,
   documentPreviewFiles,
@@ -78,6 +72,7 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
   onValidatePayloadSize,
 }) => {
   const { t } = useTranslation();
+  const surfaceEl = useWidgetSurfaceEl();
   const { backend } = client || {
     backend: { uploadAsset: null, uploadAssetUnlogged: null },
   };
@@ -121,134 +116,18 @@ 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 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 arrayBuffer = await file.arrayBuffer();
-      const workbook = window.XLSX.read(arrayBuffer, {
-        type: 'array',
-        cellFormula: true,
-        cellNF: true,
-        cellText: true,
-        cellDates: true,
-      });
-
-      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;
-    } 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 }> => {
-    const fileExt = file.name.split('.').pop()?.toLowerCase() || '';
+  ): Promise<{
+    text: string | null;
+    uploadAsOriginal?: boolean;
+  }> => {
+    if (isOfficeNativeFilename(file.name)) {
+      return { text: null, uploadAsOriginal: true };
+    }
 
     try {
-      let text: string | null = null;
-
-      if (fileExt === 'pdf') {
-        text = await extractTextFromPDF(file);
-      } else if (['txt', 'md', 'json', 'csv', 'html'].includes(fileExt)) {
-        text = await file.text();
-      } else if (fileExt === 'xlsx') {
-        text = await extractTextFromXLSX(file);
-      }
-
+      const text = await convertDocument(file, sessionID, baseUrl);
       return { text };
     } catch (error) {
       console.error('Document processing failed:', error);
@@ -295,7 +174,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,9 +244,38 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
         const fileId = Math.random().toString(36).substr(2, 9);
 
         try {
-          const { text } = await processDocumentFile(file);
+          const { text, uploadAsOriginal } = await processDocumentFile(file);
 
-          if (text) {
+          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;
+            }
+
+            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`, {
               type: 'text/plain',
@@ -429,7 +342,9 @@ const UploadDocuments: React.FC<UploadDocumentsProps> = ({
       <input
         ref={documentInputRef}
         type="file"
-        accept=".pdf,.txt,.md,.json,.xlsx,.csv,.html"
+        accept={[...documentConversionExtensions, ...officeNativeExtensions].join(
+          ','
+        )}
         multiple
         className="memori--upload-file-input"
         onChange={handleDocumentUpload}
@@ -468,6 +383,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}

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

@@ -6,49 +6,53 @@ 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,.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;"
       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
           aria-label="upload.uploadFilesOrImages"
-          class="memori-button memori-button--circle memori-button--icon-only memori-share-button--button memori--conversation-button memori--unified-upload-button"
+          class="memori-button memori-button--toolbar memori-button--sm memori-icon-button memori-icon-button--labeled memori-share-button--button memori--conversation-button memori--unified-upload-button"
           type="button"
         >
-          <svg
-            class="lucide lucide-upload memori--upload-icon"
-            fill="none"
-            height="24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="memori-button__content"
           >
-            <path
-              d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
-            />
-            <polyline
-              points="17 8 12 3 7 8"
-            />
-            <line
-              x1="12"
-              x2="12"
-              y1="3"
-              y2="15"
-            />
-          </svg>
+            <svg
+              class="lucide lucide-upload memori--upload-icon"
+              fill="none"
+              height="24"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"
+              />
+              <polyline
+                points="17 8 12 3 7 8"
+              />
+              <line
+                x1="12"
+                x2="12"
+                y1="3"
+                y2="15"
+              />
+            </svg>
+          </span>
         </button>
       </span>
     </span>
@@ -60,7 +64,7 @@ exports[`renders UploadButton unchanged 1`] = `
         class="memori--document-upload-wrapper"
       >
         <input
-          accept=".pdf,.txt,.md,.json,.xlsx,.csv,.html"
+          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/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"