@memori.ai/memori-react 9.0.0-alpha.1 → 9.0.0-alpha.12

package/src/components/KnownFacts/KnownFacts.tsx

@@ -23,6 +23,7 @@ import type {
 } from '@tanstack/react-table';
 import { getErrori18nKey } from '../../helpers/error';
 import { useTranslation } from 'react-i18next';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import { Trash2 } from 'lucide-react';
 
 export interface Props {
@@ -45,6 +46,7 @@ const KnownFacts = ({
   initialKnownFacts = [],
   closeDrawer,
 }: Props) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const { t, i18n } = useTranslation();
   const { add } = useAlertManager();
   const { getKnownFactsPaginated, deleteKnownFact } = apiClient.knownFacts;
@@ -168,6 +170,7 @@ const KnownFacts = ({
 
   return (
     <Drawer
+      container={surfaceEl ?? undefined}
       open={visible}
       anchor="right"
       className="memori-known-facts-drawer"
@@ -180,6 +183,7 @@ const KnownFacts = ({
     >
         <div className="memori-known-facts-body">
           <Modal
+          container={surfaceEl ?? undefined}
           className="memori-known-facts-modal"
           open={bulkDeleteModalVisible}
           closable
@@ -208,6 +212,7 @@ const KnownFacts = ({
             <>
               <Button
                 variant="ghost"
+                danger
                 onClick={() => {
                   setBulkDeleteModalVisible(false);
                   setBulkDeleteIds([]);
@@ -316,6 +321,7 @@ const KnownFacts = ({
         />
 
         <Modal
+          container={surfaceEl ?? undefined}
           className="memori-known-facts-modal"
           open={deleteModalVisibleFor !== undefined}
           closable
@@ -330,6 +336,7 @@ const KnownFacts = ({
             <>
               <Button
                 variant="ghost"
+                danger
                 onClick={() => {
                   setDeleteModalVisibleFor(undefined);
                 }}

package/src/components/LoginDrawer/LoginDrawer.css

@@ -541,6 +541,7 @@ p.memori--login-drawer--inline-error {
 
 .memori--login-drawer--otp-label legend {
     width: 100%;
+    margin-bottom: var(--memori-spacing-md);
 }
 
 .memori--login-drawer--otp-label-text {

package/src/components/LoginDrawer/LoginDrawer.tsx

@@ -11,6 +11,7 @@ import {
   Form,
 } from '@memori.ai/ui';
 import { useTranslation } from 'react-i18next';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import cx from 'classnames';
 import memoriApiClient from '@memori.ai/memori-api-client';
 import { getErrori18nKey } from '../../helpers/error';
@@ -50,6 +51,7 @@ const LoginDrawer = ({
   __TEST__signup = false,
   __TEST__needMissingData = false,
 }: Props) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const { t, i18n } = useTranslation();
   const { add } = useAlertManager();
   const lang = i18n.language === 'it' ? 'it' : 'en';
@@ -436,6 +438,7 @@ const LoginDrawer = ({
 
   return (
     <Drawer
+      container={surfaceEl ?? undefined}
       open={open}
       onClose={onClose}
       className={cx('memori--login-drawer', {

package/src/components/MediaWidget/MediaItemWidget.tsx

@@ -11,7 +11,10 @@ import React, {
 import { getResourceUrl } from '../../helpers/media';
 import {
   withLinksOpenInNewTab,
+  stripHTML,
   stripDocumentAttachmentTags,
+  isAssetOnlyDocumentAttachment,
+  getDocumentAttachmentAssetUrl,
 } from '../../helpers/utils';
 import { getTranslation } from '../../helpers/translations';
 import { prismSyntaxLangs } from '../../helpers/constants';
@@ -32,7 +35,7 @@ import type {
 import {
   formatBytes,
   getFileExtensionFromUrl,
-  getFileExtensionFromMime,
+  getDocumentBadgeLabel,
   countLines,
   shouldUseDarkFileCard,
   fetchLinkPreview,
@@ -268,7 +271,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;
@@ -284,7 +287,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;
@@ -298,7 +301,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;
@@ -324,8 +327,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,
@@ -355,8 +361,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)}
@@ -395,16 +409,17 @@ export const RenderMediaItem = memo(function RenderMediaItem({
 
     // Build href: open in new tab (never modal). Use URL, or blob for content-only items.
     const getFileCardHref = (): string => {
-      if (item.url) {
+      const assetUrl = getDocumentAttachmentAssetUrl(item);
+      if (assetUrl) {
         return (
           getResourceUrl({
-            resourceURI: item.url,
+            resourceURI: assetUrl,
             sessionID,
             tenantID,
             baseURL,
             apiURL,
           }) ||
-          item.url ||
+          assetUrl ||
           '#'
         );
       }
@@ -416,9 +431,7 @@ export const RenderMediaItem = memo(function RenderMediaItem({
           htmlContent.includes('<document_attachment')
         ) {
           if (htmlContent.includes('&lt;') || htmlContent.includes('&quot;')) {
-            const div = document.createElement('div');
-            div.innerHTML = htmlContent;
-            htmlContent = div.textContent || div.innerText || htmlContent;
+            htmlContent = stripHTML(htmlContent) || htmlContent;
           }
           htmlContent = stripDocumentAttachmentTags(htmlContent);
         }

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 = [
@@ -7,6 +11,7 @@ export const FILE_EXTENSIONS_DARK_CARD = [
   'PDF',
   'DOC',
   'DOCX',
+  'DOTX',
   'XLS',
   'XLSX',
   'JSON',
@@ -22,6 +27,7 @@ export const FILE_MIME_TYPES_DARK_CARD = [
   'application/pdf',
   'application/msword',
   'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.template',
   'application/vnd.ms-excel',
   'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
   'text/html',
@@ -54,11 +60,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 +88,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/MediaWidget/MediaPreviewModal.tsx

@@ -70,6 +70,8 @@ const MIME_MARKDOWN = 'text/markdown';
 const MIME_WORD_DOC = 'application/msword';
 const MIME_WORD_DOCX =
   'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+const MIME_WORD_DOTX =
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.template';
 
 const VIDEO_MIME_TYPES = [
   'video/mp4',
@@ -99,7 +101,11 @@ function isAudio(mimeType: string): boolean {
 }
 
 function isWordDoc(mimeType: string): boolean {
-  return mimeType === MIME_WORD_DOC || mimeType === MIME_WORD_DOCX;
+  return (
+    mimeType === MIME_WORD_DOC ||
+    mimeType === MIME_WORD_DOCX ||
+    mimeType === MIME_WORD_DOTX
+  );
 }
 
 // Document attachments (PDF, XLSX, TXT, CSV, etc.) are extracted as text, not binary.
@@ -268,9 +274,7 @@ export function MediaPreviewModal({
             // HTML document attachment: display HTML content in a code-like format
             let htmlContent = medium.content || '';
             if (htmlContent.includes('<') || htmlContent.includes('"')) {
-              const div = document.createElement('div');
-              div.innerHTML = htmlContent;
-              htmlContent = div.textContent || div.innerText || htmlContent;
+              htmlContent = stripHTML(htmlContent) || htmlContent;
             } else {
               htmlContent = stripDocumentAttachmentTags(htmlContent);
             }
@@ -290,9 +294,7 @@ export function MediaPreviewModal({
             // Other document attachments: render as plain text
             let displayContent = medium.content;
             if (displayContent.includes('<') || displayContent.includes('"')) {
-              const div = document.createElement('div');
-              div.innerHTML = displayContent;
-              displayContent = div.textContent || div.innerText || displayContent;
+              displayContent = stripHTML(displayContent) || displayContent;
             } else {
               displayContent = stripDocumentAttachmentTags(displayContent);
             }