@memori.ai/memori-react 8.38.4 → 8.38.6

package/src/components/MediaWidget/MediaItemWidget.tsx

@@ -12,6 +12,7 @@ import { getResourceUrl } from '../../helpers/media';
 import {
   withLinksOpenInNewTab,
   stripDocumentAttachmentTags,
+  isAssetOnlyDocumentAttachment,
 } from '../../helpers/utils';
 import { getTranslation } from '../../helpers/translations';
 import { prismSyntaxLangs } from '../../helpers/constants';
@@ -36,7 +37,7 @@ import type {
 import {
   formatBytes,
   getFileExtensionFromUrl,
-  getFileExtensionFromMime,
+  getDocumentBadgeLabel,
   countLines,
   shouldUseDarkFileCard,
   fetchLinkPreview,
@@ -272,7 +273,7 @@ export const RenderMediaItem = memo(function RenderMediaItem({
           ) : (
             <DocumentCard
               title={medium.title || 'File'}
-              badge={getFileExtensionFromMime(medium.mimeType)}
+              badge={getDocumentBadgeLabel(medium.mimeType, medium.title)}
               meta={(() => {
                 const size = getContentSize(medium);
                 return size != null && size > 0 ? formatBytes(size) : null;
@@ -288,7 +289,7 @@ export const RenderMediaItem = memo(function RenderMediaItem({
           return (
             <DocumentCard
               title={medium.title || 'File'}
-              badge={getFileExtensionFromMime(medium.mimeType)}
+              badge={getDocumentBadgeLabel(medium.mimeType, medium.title)}
               meta={(() => {
                 const size = getContentSize(medium);
                 return size != null && size > 0 ? formatBytes(size) : null;
@@ -302,7 +303,7 @@ export const RenderMediaItem = memo(function RenderMediaItem({
           return (
             <DocumentCard
               title={medium.title || 'File'}
-              badge={getFileExtensionFromMime(medium.mimeType)}
+              badge={getDocumentBadgeLabel(medium.mimeType, medium.title)}
               meta={(() => {
                 const size = getContentSize(medium);
                 return size != null && size > 0 ? formatBytes(size) : null;
@@ -328,8 +329,11 @@ export const RenderMediaItem = memo(function RenderMediaItem({
 
   // Extension and file detection helpers
   const fileExtensionFromUrl = getFileExtensionFromUrl(normURL || item.url);
-  const fileExtensionFromMime = getFileExtensionFromMime(item.mimeType);
-  const fileExtension = fileExtensionFromUrl || fileExtensionFromMime;
+  const fileExtension = getDocumentBadgeLabel(
+    item.mimeType,
+    item.title,
+    normURL || item.url
+  );
   const isFile = shouldUseDarkFileCard(
     item,
     fileExtensionFromUrl,
@@ -359,8 +363,16 @@ export const RenderMediaItem = memo(function RenderMediaItem({
     const metaParts = [lineText, sizeText].filter(Boolean);
     const metaLine = metaParts.length > 0 ? metaParts.join(' · ') : null;
 
+    // Asset-only attachments (e.g. Office native files) open via URL, not modal
+    const isAssetOnlyAttachment = isAssetOnlyDocumentAttachment(item);
+
     // Document attachments and attached files should open in modal, not as links
-    if ((isDocumentAttachment || isAttachedFile) && item.mediumID && _onClick) {
+    if (
+      (isDocumentAttachment || isAttachedFile) &&
+      item.mediumID &&
+      _onClick &&
+      !isAssetOnlyAttachment
+    ) {
       return (
         <div
           onClick={() => _onClick(item)}

package/src/components/MediaWidget/MediaItemWidget.utils.test.ts

@@ -2,6 +2,7 @@ import {
   formatBytes,
   getFileExtensionFromUrl,
   getFileExtensionFromMime,
+  getDocumentBadgeLabel,
   countLines,
   shouldUseDarkFileCard,
   fetchLinkPreview,
@@ -57,8 +58,25 @@ describe('MediaItemWidget.utils', () => {
       expect(getFileExtensionFromMime('text/html')).toBe('HTML');
       expect(getFileExtensionFromMime('text/plain')).toBe('TXT');
       expect(getFileExtensionFromMime('application/json')).toBe('JSON');
-      expect(getFileExtensionFromMime('application/vnd.ms-excel')).toBe('XLS');
-      expect(getFileExtensionFromMime('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')).toBe('XLSX');
+      expect(getFileExtensionFromMime('application/vnd.ms-excel')).toBe('Excel');
+      expect(
+        getFileExtensionFromMime(
+          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+        )
+      ).toBe('Excel');
+    });
+
+    it('maps office mime types with parameters to short labels', () => {
+      expect(
+        getFileExtensionFromMime(
+          'application/vnd.openxmlformats-officedocument.wordprocessingml.document; charset=binary'
+        )
+      ).toBe('Word');
+      expect(
+        getFileExtensionFromMime(
+          'application/vnd.openxmlformats-officedocument.spreadsheetml.template'
+        )
+      ).toBe('Excel');
     });
 
     it('uses subtype when not in MIME_TO_EXT map', () => {
@@ -71,6 +89,31 @@ describe('MediaItemWidget.utils', () => {
     });
   });
 
+  describe('getDocumentBadgeLabel', () => {
+    it('prefers URL extension, then filename, then mime type', () => {
+      expect(
+        getDocumentBadgeLabel(
+          'application/pdf',
+          'report.docx',
+          'https://example.com/file.pdf'
+        )
+      ).toBe('PDF');
+      expect(
+        getDocumentBadgeLabel(
+          'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+          'report.docx',
+          'https://example.com/asset/123'
+        )
+      ).toBe('Word');
+      expect(
+        getDocumentBadgeLabel(
+          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+          'budget.xlsx'
+        )
+      ).toBe('Excel');
+    });
+  });
+
   describe('countLines', () => {
     it('returns 0 for undefined or empty', () => {
       expect(countLines(undefined)).toBe(0);

package/src/components/MediaWidget/MediaItemWidget.utils.ts

@@ -1,4 +1,8 @@
 import type { Medium } from '@memori.ai/memori-api-client/dist/types';
+import {
+  officeExtensionShortLabels,
+  officeMimeShortLabels,
+} from '../../helpers/constants';
 import type { LinkPreviewInfo } from './MediaItemWidget.types';
 
 export const FILE_EXTENSIONS_DARK_CARD = [
@@ -54,11 +58,6 @@ export const IMAGE_MIME_TYPES = [
 
 const MIME_TO_EXT: Record<string, string> = {
   'application/pdf': 'PDF',
-  'application/msword': 'DOC',
-  'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
-    'DOCX',
-  'application/vnd.ms-excel': 'XLS',
-  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'XLSX',
   'text/html': 'HTML',
   'text/plain': 'TXT',
   'text/css': 'CSS',
@@ -87,14 +86,46 @@ export function getFileExtensionFromUrl(
   return match ? match[1].toUpperCase() : null;
 }
 
+function normalizeMimeType(mimeType: string): string {
+  return mimeType.split(';')[0].trim();
+}
+
 export function getFileExtensionFromMime(mimeType: string): string {
+  const normalized = normalizeMimeType(mimeType);
+  const normalizedLower = normalized.toLowerCase();
+
+  const officeLabel =
+    officeMimeShortLabels[normalized] ||
+    officeMimeShortLabels[normalizedLower];
+  if (officeLabel) return officeLabel;
+
   return (
+    MIME_TO_EXT[normalized] ||
+    MIME_TO_EXT[normalizedLower] ||
     MIME_TO_EXT[mimeType] ||
-    mimeType.split('/')[1]?.toUpperCase() ||
+    normalized.split('/')[1]?.toUpperCase() ||
     'FILE'
   );
 }
 
+export function getDocumentBadgeLabel(
+  mimeType: string,
+  filename?: string | null,
+  url?: string | null
+): string {
+  const fromUrl = getFileExtensionFromUrl(url || undefined);
+  if (fromUrl) {
+    return officeExtensionShortLabels[fromUrl] || fromUrl;
+  }
+
+  const fromFilename = getFileExtensionFromUrl(filename || undefined);
+  if (fromFilename) {
+    return officeExtensionShortLabels[fromFilename] || fromFilename;
+  }
+
+  return getFileExtensionFromMime(mimeType);
+}
+
 export function countLines(content: string | undefined): number {
   if (!content) return 0;
   return content.split(/\r\n|\r|\n/).length;

package/src/components/UploadButton/UploadButton.tsx

@@ -9,6 +9,7 @@ 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 Tooltip from '../ui/Tooltip';
 // Props interface
 interface UploadManagerProps {
@@ -48,6 +49,8 @@ const UploadButton: React.FC<UploadManagerProps> = ({
   maxDocumentContentLength = 300000,
   onUploadLoadingChange,
 }) => {
+  // Per-document character limit for the inlined `<document_attachment>`
+  // content. Does NOT affect the full text uploaded as an asset.
   const effectivePerDocumentLimit =
     maxTotalMessagePayload ?? maxDocumentContentLength ?? 300000;
   // State
@@ -98,7 +101,16 @@ 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 = [
+      '.pdf',
+      '.txt',
+      '.json',
+      '.xlsx',
+      '.csv',
+      '.md',
+      '.html',
+      ...officeNativeExtensions,
+    ];
     const fileExt = `.${file.name.split('.').pop()?.toLowerCase()}`;
     return documentExtensions.includes(fileExt);
   };
@@ -115,115 +127,124 @@ const UploadButton: React.FC<UploadManagerProps> = ({
   }, [isMediaAccepted, currentMediaCount, addError]);
 
   // Handle unified file selection
-  const handleUnifiedFileSelection = useCallback((files: FileList | File[]) => {
-    const fileArray = Array.from(files);
-    if (fileArray.length === 0) return;
-
-    const supportedFiles: File[] = [];
-    fileArray.forEach(file => {
-      if (isImageFile(file)) {
-        supportedFiles.push(file);
-      } else if (isDocumentFile(file)) {
-        supportedFiles.push(file);
-      } else {
+  const handleUnifiedFileSelection = useCallback(
+    (files: FileList | File[]) => {
+      const fileArray = Array.from(files);
+      if (fileArray.length === 0) return;
+
+      const supportedFiles: File[] = [];
+      fileArray.forEach(file => {
+        if (isImageFile(file)) {
+          supportedFiles.push(file);
+        } else if (isDocumentFile(file)) {
+          supportedFiles.push(file);
+        } else {
+          addErrorRef.current({
+            message: `File "${file.name}" is not a supported image or document type`,
+            severity: 'warning',
+          });
+        }
+      });
+
+      const totalSupported = supportedFiles.length;
+      if (totalSupported === 0) return;
+
+      const remainingSlots =
+        maxDocumentsPerMessage - currentMediaCountRef.current;
+      if (remainingSlots <= 0) {
         addErrorRef.current({
-          message: `File "${file.name}" is not a supported image or document type`,
+          message: `Maximum ${maxDocumentsPerMessage} media files allowed.`,
           severity: 'warning',
         });
+        return;
       }
-    });
-
-    const totalSupported = supportedFiles.length;
-    if (totalSupported === 0) return;
 
-    const remainingSlots = maxDocumentsPerMessage - currentMediaCountRef.current;
-    if (remainingSlots <= 0) {
-      addErrorRef.current({
-        message: `Maximum ${maxDocumentsPerMessage} media files allowed.`,
-        severity: 'warning',
-      });
-      return;
-    }
+      const toProcess = supportedFiles.slice(0, remainingSlots);
+      const imageFiles = toProcess.filter(f => isImageFile(f));
+      const documentFiles = toProcess.filter(f => isDocumentFile(f));
 
-    const toProcess = supportedFiles.slice(0, remainingSlots);
-    const imageFiles = toProcess.filter(f => isImageFile(f));
-    const documentFiles = toProcess.filter(f => isDocumentFile(f));
-
-    if (totalSupported > remainingSlots) {
-      const skipped = totalSupported - remainingSlots;
-      addErrorRef.current({
-        message:
-          t('upload.filesNotAddedMaxAllowed', {
-            count: skipped,
-            max: maxDocumentsPerMessage,
-            defaultValue: `${skipped} file(s) not added (maximum ${maxDocumentsPerMessage} files allowed).`,
-          }) ?? `${skipped} file(s) not added (maximum ${maxDocumentsPerMessage} files allowed).`,
-        severity: 'warning',
-      });
-    }
-
-    // Process images
-    if (imageFiles.length > 0) {
-      if (!isMediaAcceptedRef.current) {
+      if (totalSupported > remainingSlots) {
+        const skipped = totalSupported - remainingSlots;
         addErrorRef.current({
           message:
-            t('upload.mediaNotAccepted') ?? 'Media uploads are not accepted',
+            t('upload.filesNotAddedMaxAllowed', {
+              count: skipped,
+              max: maxDocumentsPerMessage,
+              defaultValue: `${skipped} file(s) not added (maximum ${maxDocumentsPerMessage} files allowed).`,
+            }) ??
+            `${skipped} file(s) not added (maximum ${maxDocumentsPerMessage} files allowed).`,
           severity: 'warning',
         });
-      } else {
-        // Trigger image upload by creating a synthetic event
-        const imageInput = imageRef.current?.querySelector('input[type="file"]') as HTMLInputElement;
-        if (imageInput) {
+      }
+
+      // Process images
+      if (imageFiles.length > 0) {
+        if (!isMediaAcceptedRef.current) {
+          addErrorRef.current({
+            message:
+              t('upload.mediaNotAccepted') ?? 'Media uploads are not accepted',
+            severity: 'warning',
+          });
+        } else {
+          // Trigger image upload by creating a synthetic event
+          const imageInput = imageRef.current?.querySelector(
+            'input[type="file"]'
+          ) as HTMLInputElement;
+          if (imageInput) {
+            const dataTransfer = new DataTransfer();
+            imageFiles.forEach(file => {
+              try {
+                dataTransfer.items.add(file);
+              } catch (err) {
+                console.warn('Failed to add image file to DataTransfer:', err);
+              }
+            });
+
+            // Only proceed if we successfully added files
+            if (dataTransfer.files.length > 0) {
+              try {
+                imageInput.files = dataTransfer.files;
+              } catch {
+                // JSDOM and some environments do not allow assigning to input.files
+              }
+              const changeEvent = new Event('change', { bubbles: true });
+              imageInput.dispatchEvent(changeEvent);
+            }
+          }
+        }
+      }
+
+      // Process documents – set loading early so skeleton shows for all entry points
+      if (documentFiles.length > 0) {
+        setIsDocumentLoading(true);
+        const documentInput = documentRef.current?.querySelector(
+          'input[type="file"]'
+        ) as HTMLInputElement;
+        if (documentInput) {
           const dataTransfer = new DataTransfer();
-          imageFiles.forEach(file => {
+          documentFiles.forEach(file => {
             try {
               dataTransfer.items.add(file);
             } catch (err) {
-              console.warn('Failed to add image file to DataTransfer:', err);
+              console.warn('Failed to add document file to DataTransfer:', err);
             }
           });
-          
+
           // Only proceed if we successfully added files
           if (dataTransfer.files.length > 0) {
             try {
-              imageInput.files = dataTransfer.files;
+              documentInput.files = dataTransfer.files;
             } catch {
               // JSDOM and some environments do not allow assigning to input.files
             }
             const changeEvent = new Event('change', { bubbles: true });
-            imageInput.dispatchEvent(changeEvent);
+            documentInput.dispatchEvent(changeEvent);
           }
         }
       }
-    }
-
-    // Process documents – set loading early so skeleton shows for all entry points
-    if (documentFiles.length > 0) {
-      setIsDocumentLoading(true);
-      const documentInput = documentRef.current?.querySelector('input[type="file"]') as HTMLInputElement;
-      if (documentInput) {
-        const dataTransfer = new DataTransfer();
-        documentFiles.forEach(file => {
-          try {
-            dataTransfer.items.add(file);
-          } catch (err) {
-            console.warn('Failed to add document file to DataTransfer:', err);
-          }
-        });
-        
-        // Only proceed if we successfully added files
-        if (dataTransfer.files.length > 0) {
-          try {
-            documentInput.files = dataTransfer.files;
-          } catch {
-            // JSDOM and some environments do not allow assigning to input.files
-          }
-          const changeEvent = new Event('change', { bubbles: true });
-          documentInput.dispatchEvent(changeEvent);
-        }
-      }
-    }
-  }, [t]);
+    },
+    [t]
+  );
 
   // Handle button click - open file chooser directly
   const handleButtonClick = () => {
@@ -253,16 +274,17 @@ const UploadButton: React.FC<UploadManagerProps> = ({
       }
 
       const files: File[] = [];
-      
+
       // Helper to check if a file is already in the array
       const isDuplicate = (file: File) => {
-        return files.some(f => 
-          f.name === file.name && 
-          f.size === file.size && 
-          f.lastModified === file.lastModified
+        return files.some(
+          f =>
+            f.name === file.name &&
+            f.size === file.size &&
+            f.lastModified === file.lastModified
         );
       };
-      
+
       // Prefer clipboardData.files if available (most reliable and prevents duplicates)
       // Only fall back to items if files is empty (some browsers only populate items)
       if (clipboardData.files && clipboardData.files.length > 0) {
@@ -362,7 +384,6 @@ const UploadButton: React.FC<UploadManagerProps> = ({
       id: string;
       content: string;
       mimeType: string;
-      sourceUrl?: string;
       textAssetUrl?: string;
     }[]
   ) => {
@@ -381,19 +402,39 @@ const UploadButton: React.FC<UploadManagerProps> = ({
     // Process each document file
     const processedDocuments = files.map(file => {
       const escapedFileName = escapeAttributeValue(file.name);
-      const formattedContent = `<document_attachment filename="${escapedFileName}" type="${file.mimeType}">
 
-${file.content}
+      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_source>
-${file.sourceUrl || ''}
-</attachment_source>
+<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}
+
+</document_attachment>
 
 <attachment_link>
 ${file.textAssetUrl || ''}
 </attachment_link>`;
+      }
 
       return {
         name: file.name,
@@ -419,6 +460,7 @@ ${file.textAssetUrl || ''}
       '.csv',
       '.md',
       '.html',
+      ...officeNativeExtensions,
     ];
     const MAX_FILE_SIZE = 15 * 1024 * 1024; // 15MB
 
@@ -505,18 +547,17 @@ ${file.textAssetUrl || ''}
     addError(error);
   };
 
-
   const handleDocumentLoadingChange = useCallback(
     (loading: boolean, fileCount?: number) => {
       setIsDocumentLoading(loading);
-      setDocUploadingCount(loading ? (fileCount ?? 1) : 0);
+      setDocUploadingCount(loading ? fileCount ?? 1 : 0);
     },
     []
   );
   const handleImageLoadingChange = useCallback(
     (loading: boolean, fileCount?: number) => {
       setIsImageLoading(loading);
-      setImgUploadingCount(loading ? (fileCount ?? 1) : 0);
+      setImgUploadingCount(loading ? fileCount ?? 1 : 0);
     },
     []
   );
@@ -526,7 +567,7 @@ ${file.textAssetUrl || ''}
   }, [isLoading, uploadingFileCount, onUploadLoadingChange]);
 
   return (
-    <div 
+    <div
       className={cx('memori--unified-upload-wrapper', {
         'memori--dragging': isDragging,
       })}
@@ -536,7 +577,7 @@ ${file.textAssetUrl || ''}
       <input
         ref={unifiedInputRef}
         type="file"
-        accept=".jpg,.jpeg,.png,.pdf,.txt,.json,.xlsx,.csv,.md,.html"
+        accept={`.jpg,.jpeg,.png,.pdf,.txt,.json,.xlsx,.csv,.md,.html,${officeNativeExtensions.join(',')}`}
         multiple
         className="memori--upload-file-input"
         onChange={handleFileInputChange}
@@ -557,7 +598,15 @@ ${file.textAssetUrl || ''}
         )}
         onClick={handleButtonClick}
         disabled={isLoading || hasReachedMediaLimit}
-        title={t('upload.uploadFiles', { shortcut: /Mac|iPhone|iPod|iPad/i.test(navigator.platform) || navigator.userAgent.includes('Mac') ? 'Cmd' : 'Ctrl' }) ?? 'Upload files (drag & drop)'}
+        title={
+          t('upload.uploadFiles', {
+            shortcut:
+              /Mac|iPhone|iPod|iPad/i.test(navigator.platform) ||
+              navigator.userAgent.includes('Mac')
+                ? 'Cmd'
+                : 'Ctrl',
+          }) ?? 'Upload files (drag & drop)'
+        }
       >
         {isLoading ? (
           <Spin spinning className="memori--upload-icon" />
@@ -591,7 +640,6 @@ ${file.textAssetUrl || ''}
           onDocumentError={handleDocumentError}
           onValidateFile={validateDocumentFile}
           onValidatePayloadSize={validatePayloadSize}
-          maxDocumentContentLength={effectivePerDocumentLimit}
         />
       </div>
 
@@ -619,7 +667,9 @@ ${file.textAssetUrl || ''}
             key={`${error.message}-${index}`}
             open={true}
             type={error.severity}
-            title={t('upload.uploadNotification', { defaultValue: 'Upload notification' })}
+            title={t('upload.uploadNotification', {
+              defaultValue: 'Upload notification',
+            })}
             description={error.message}
             onClose={() => removeError(error.message)}
             width="350px"