@memori.ai/memori-react 9.0.0-alpha.5 → 9.0.0-alpha.7

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);
             }

package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.css

@@ -17,16 +17,30 @@
     --artifact-drawer-radius-lg: var(--memori-radius-box);
 }
 
-/* Override drawer width for ArtifactDrawer */
-.memori-artifact-panel-drawer {
-    --memori-drawer--width-lg: 46%;
-    /* background-color: var(--memori-main-background); */
+/*
+ * Split-panel width for ArtifactDrawer.
+ * Must stay in sync with HiddenChat's sidebar shift (`right: 46%`).
+ * @memori.ai/ui Drawer uses `--memori-modal-size-*` (not the legacy
+ * `--memori-drawer--width-*` tokens), and size="md" maps to `--memori-modal-size-md`.
+ */
+.memori-drawer--right.memori-drawer--size-md.memori-artifact-panel-drawer {
+    --memori-modal-size-md: 46%;
+    width: 46%;
+    max-width: 100vw;
+}
+
+.memori-drawer--right.memori-artifact-panel-drawer-fullscreen {
+    --memori-modal-size-md: 100%;
+    width: 100% !important;
+    max-width: 100% !important;
 }
 
 /* Hide the Drawer backdrop so the chat remains fully visible on the left
    (applies to the mobile/legacy Drawer-overlay path) */
 body:has(.memori-artifact-panel-drawer) .memori-drawer__backdrop,
-body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop {
+body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
+.memori-widget:has(.memori-artifact-panel-drawer) .memori-drawer__backdrop,
+.memori-widget:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop {
     display: none !important;
 }
 

package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.tsx

@@ -7,6 +7,7 @@
 import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Dropdown, Drawer } from '@memori.ai/ui';
+import { useWidgetSurfaceEl } from '../../../../context/widgetSurfaceContext';
 import {
   X,
   Maximize,
@@ -31,6 +32,7 @@ const ArtifactDrawer: React.FC<{
    *  component falls back to the Drawer overlay regardless of this flag. */
   isLayoutColumn?: boolean;
 }> = ({ isChatLogPanel = false, isLayoutColumn = false }) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const { state, closeArtifact, toggleFullscreen } = useArtifact();
   const { t } = useTranslation();
   const [isMobile, setIsMobile] = useState(false);
@@ -144,6 +146,7 @@ const ArtifactDrawer: React.FC<{
         // Mobile or legacy: floating Drawer overlay
         return (
           <Drawer
+            container={surfaceEl ?? undefined}
             open={state.isDrawerOpen}
             onClose={handleClose}
             anchor="right"
@@ -167,6 +170,7 @@ const ArtifactDrawer: React.FC<{
       state.isDrawerOpen,
       state.isFullscreen,
       isMobile,
+      surfaceEl,
     ]
   );
 

package/src/components/MemoriWidget/MemoriWidget.css

@@ -9,7 +9,8 @@
     box-sizing: border-box;
 }
 
-.memori-widget > .memori-spin {
+.memori-widget > .memori-spin,
+.memori-widget > .memori-widget__surface > .memori-spin {
     height: calc(100vh - 50px);
 }
 
@@ -17,7 +18,8 @@
     .memori-widget {
         overflow-y: hidden;
     }
-    .memori-widget > .memori-spin {
+    .memori-widget > .memori-spin,
+    .memori-widget > .memori-widget__surface > .memori-spin {
         height: calc(100vh - 100px);
     }
 }