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

package/src/components/ChatBubble/ChatBubble.tsx

@@ -36,6 +36,7 @@ import {
 import { Expandable, Modal } from '@memori.ai/ui';
 import memoriApiClient from '@memori.ai/memori-api-client';
 import { usePressTooltip } from '../../helpers/usePressTooltip';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 const ASSET_URL_PATTERN = /https?:\/\/\S*\/api\/v\d+\/asset\/\S+/gi;
 
 const sanitizeRawCopyText = (text: string) =>
@@ -122,6 +123,7 @@ const ChatBubble: React.FC<Props> = ({
   customMediaRenderer,
 }) => {
   const { t, i18n } = useTranslation();
+  const surfaceEl = useWidgetSurfaceEl();
   const lang = i18n.language || 'en';
   const generatedByAiTooltip = usePressTooltip();
   const [showingWhyThisAnswer, setShowingWhyThisAnswer] = useState(false);
@@ -129,13 +131,16 @@ const ChatBubble: React.FC<Props> = ({
   const [copyStatus, setCopyStatus] = useState<{
     plain: 'idle' | 'success' | 'error';
     raw: 'idle' | 'success' | 'error';
-  }>({ plain: 'idle', raw: 'idle' });
+    functionCache: 'idle' | 'success' | 'error';
+  }>({ plain: 'idle', raw: 'idle', functionCache: 'idle' });
   const copyResetTimers = useRef<{
     plain: ReturnType<typeof setTimeout> | null;
     raw: ReturnType<typeof setTimeout> | null;
+    functionCache: ReturnType<typeof setTimeout> | null;
   }>({
     plain: null,
     raw: null,
+    functionCache: null,
   });
   // Initialize MathJax on component mount
   useEffect(() => {
@@ -244,26 +249,33 @@ const ChatBubble: React.FC<Props> = ({
 
   useEffect(() => {
     return () => {
-      (Object.keys(copyResetTimers.current) as Array<'plain' | 'raw'>).forEach(
-        key => {
-          const timer = copyResetTimers.current[key];
-          if (timer) {
-            clearTimeout(timer);
-            copyResetTimers.current[key] = null;
-          }
+      (
+        Object.keys(copyResetTimers.current) as Array<
+          'plain' | 'raw' | 'functionCache'
+        >
+      ).forEach(key => {
+        const timer = copyResetTimers.current[key];
+        if (timer) {
+          clearTimeout(timer);
+          copyResetTimers.current[key] = null;
         }
-      );
+      });
     };
   }, []);
 
-  const clearCopyReset = (type: 'plain' | 'raw') => {
+  const functionCacheCopyText =
+    functionCacheData
+      ?.map(f => `${f.title}\n\n${f.content}`)
+      .join('\n\n---\n\n') ?? '';
+
+  const clearCopyReset = (type: 'plain' | 'raw' | 'functionCache') => {
     if (copyResetTimers.current[type]) {
       clearTimeout(copyResetTimers.current[type]!);
       copyResetTimers.current[type] = null;
     }
   };
 
-  const scheduleCopyReset = (type: 'plain' | 'raw') => {
+  const scheduleCopyReset = (type: 'plain' | 'raw' | 'functionCache') => {
     clearCopyReset(type);
     copyResetTimers.current[type] = setTimeout(() => {
       setCopyStatus(prev => ({ ...prev, [type]: 'idle' }));
@@ -271,7 +283,10 @@ const ChatBubble: React.FC<Props> = ({
     }, COPY_FEEDBACK_MS);
   };
 
-  const handleCopyClick = async (type: 'plain' | 'raw', text: string) => {
+  const handleCopyClick = async (
+    type: 'plain' | 'raw' | 'functionCache',
+    text: string
+  ) => {
     if (!text?.length) return;
     try {
       if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
@@ -821,12 +836,25 @@ const ChatBubble: React.FC<Props> = ({
       )}
 
       <Modal
+        container={surfaceEl ?? undefined}
         open={openFunctionCache}
         className="memori-chat--function-cache-modal"
         title={t('functionCache') || 'Function Cache'}
         closable={true}
         onOpenChange={setOpenFunctionCache}
       >
+        <div style={{ marginBottom: '1rem' }}>
+          <Button
+            icon={<Copy aria-hidden />}
+            onClick={() =>
+              handleCopyClick('functionCache', functionCacheCopyText)
+            }
+          >
+            {copyStatus.functionCache === 'success'
+              ? copiedLabel
+              : t('copy') || 'Copy'}
+          </Button>
+        </div>
         {functionCacheData?.map((f, i) => (
           <div
             key={f.mediumID}

package/src/components/ChatHistoryDrawer/ChatHistory.tsx

@@ -21,6 +21,7 @@ import { stripAllInternalTags } from '../../helpers/message';
 import debounce from 'lodash/debounce';
 import { Spin } from '@memori.ai/ui';
 import { SelectBox } from '@memori.ai/ui';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 // Helpers / Utils
 import { getTranslation } from '../../helpers/translations';
 import ChatResumeDrawer from './ChatResumeDrawer';
@@ -440,6 +441,7 @@ const ChatHistoryDrawer = ({
   userLang,
   isMultilanguageEnabled = false,
 }: Props) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const { t } = useTranslation();
   const { add } = useAlertManager();
   const { getUserChatLogsByTokenPaged } = apiClient.chatLogs;
@@ -1136,6 +1138,7 @@ const ChatHistoryDrawer = ({
 
   return (
     <Drawer
+      container={surfaceEl ?? undefined}
       className="memori-chat-history-drawer"
       open={open}
       onClose={onClose}

package/src/components/CompletionProviderStatus/CompletionProviderStatus.tsx

@@ -33,17 +33,21 @@ const PROVIDER_CONFIGS: Record<string, ProviderConfig> = {
     statusPage: 'https://status.mistral-data.com/',
     apiComponentName: ['Mistral'],
   },
+  // Use status.claude.com directly: status.anthropic.com 302-redirects and
+  // browsers block the redirected response (missing CORS on the redirect).
   Anthropic: {
-    statusUrl: 'https://status.anthropic.com/api/v2/summary.json',
-    statusPage: 'https://status.anthropic.com/',
-    apiComponentName: ['api.anthropic.com'],
+    statusUrl: 'https://status.claude.com/api/v2/summary.json',
+    statusPage: 'https://status.claude.com/',
+    apiComponentName: [
+      'Claude API (api.anthropic.com)',
+      'api.anthropic.com',
+    ],
   },
 };
 
 // Modified to handle fetch errors, different component names, and check incidents
 const fetchProviderStatus = async (config: ProviderConfig): Promise<Status> => {
   try {
-    // Use cross-fetch instead of native fetch
     const response = await fetch(config.statusUrl);
     if (!response.ok) {
       console.warn(`Status API returned ${response.status}`);

package/src/components/ContentPreviewModal/ContentPreviewModal.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { Modal } from '@memori.ai/ui';
 import cx from 'classnames';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 
 export interface ContentPreviewModalProps {
   open: boolean;
@@ -25,10 +26,12 @@ const ContentPreviewModal: FC<ContentPreviewModalProps> = ({
   children,
   className,
 }) => {
+  const surfaceEl = useWidgetSurfaceEl();
   const width = 'min(90vw, 800px)';
 
   return (
     <Modal
+      container={surfaceEl ?? undefined}
       open={open}
       onClose={() => onClose()}
       width={width}

package/src/components/DateSelector/DateSelector.stories.tsx

@@ -25,14 +25,23 @@ const Template: Story<Props> = args => (
 // https://storybook.js.org/docs/react/workflows/unit-testing
 export const Default = Template.bind({});
 Default.args = {
-  defaultDate: new Date(Date.now()),
+  defaultDate: '1990-06-15',
+  minAge: 18,
+  onChange: console.log,
+  disabled: false,
+};
+
+export const MinAge14 = Template.bind({});
+MinAge14.args = {
+  minAge: 14,
   onChange: console.log,
   disabled: false,
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
-  defaultDate: new Date(Date.now()),
+  defaultDate: '1990-06-15',
+  minAge: 18,
   onChange: () => {},
   disabled: true,
 };

package/src/components/DateSelector/DateSelector.tsx

@@ -5,16 +5,23 @@ import { useTranslation } from 'react-i18next';
 export interface Props {
   defaultDate?: string | Date;
   disabled?: boolean;
+  /** Minimum age; latest selectable birth date is today minus this many years. */
+  minAge?: number;
   onChange: (date: DateTime | undefined) => void;
 }
 
 const DateSelector = memo(
-  ({ defaultDate, onChange, disabled = false }: Props) => {
+  ({ defaultDate, onChange, disabled = false, minAge = 18 }: Props) => {
     const { t } = useTranslation();
 
-    // Calculate constraints for birth date (18 years ago to 1900)
-    const maxDate = useMemo(() => DateTime.now().minus({ years: 18 }), []);
-    const minDate = useMemo(() => DateTime.fromObject({ year: 1900, month: 1, day: 1 }), []);
+    const maxDate = useMemo(
+      () => DateTime.now().minus({ years: minAge }).startOf('day'),
+      [minAge]
+    );
+    const minDate = useMemo(
+      () => DateTime.fromObject({ year: 1900, month: 1, day: 1 }),
+      []
+    );
 
     // State for individual fields as strings to allow empty values
     const [day, setDay] = useState<string>('');
@@ -54,10 +61,22 @@ const DateSelector = memo(
       return () => window.removeEventListener('resize', checkMobile);
     }, []);
 
+    // Avoid re-running when parent passes an unstable onChange (inline arrow).
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const lastEmittedRef = useRef<string | null | undefined>(undefined);
+
     // Validate and propagate changes
     useEffect(() => {
+      const emit = (next: DateTime | undefined) => {
+        const key = next?.isValid ? next.toISODate() : null;
+        if (key === lastEmittedRef.current) return;
+        lastEmittedRef.current = key;
+        onChangeRef.current(next);
+      };
+
       if (!day || !month || !year) {
-        onChange(undefined);
+        emit(undefined);
         return;
       }
 
@@ -66,7 +85,7 @@ const DateSelector = memo(
       const y = parseInt(year);
 
       if (isNaN(d) || isNaN(m) || isNaN(y)) {
-        onChange(undefined);
+        emit(undefined);
         return;
       }
 
@@ -75,11 +94,11 @@ const DateSelector = memo(
       // Basic validation: check if it's a valid date (e.g. not Feb 30)
       // and within range.
       if (newDate.isValid && newDate >= minDate && newDate <= maxDate) {
-        onChange(newDate);
+        emit(newDate);
       } else {
-        onChange(undefined);
+        emit(undefined);
       }
-    }, [day, month, year, onChange, minDate, maxDate]);
+    }, [day, month, year, minDate, maxDate]);
 
     // Handle mobile native input change
     const handleMobileChange = (e: ChangeEvent<HTMLInputElement>) => {

package/src/components/ExpertsDrawer/ExpertsDrawer.tsx

@@ -3,6 +3,7 @@ import {
   Tenant,
 } from '@memori.ai/memori-api-client/dist/types';
 import { Drawer } from '@memori.ai/ui';
+import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
 import { useTranslation } from 'react-i18next';
 import { getResourceUrl } from '../../helpers/media';
 
@@ -24,9 +25,11 @@ const ExpertsDrawer = ({
   onClose,
 }: Props) => {
   const { t } = useTranslation();
+  const surfaceEl = useWidgetSurfaceEl();
 
   return (
     <Drawer
+      container={surfaceEl ?? undefined}
       open={open}
       onClose={onClose}
       className="memori--experts-drawer"

package/src/components/FilePreview/FilePreview.tsx

@@ -3,8 +3,13 @@ import { File, X } from 'lucide-react';
 import { Button } from '@memori.ai/ui';
 import ContentPreviewModal from '../ContentPreviewModal';
 import Snippet from '../Snippet/Snippet';
-import { stripHTML, stripDocumentAttachmentTags } from '../../helpers/utils';
-import { getFileExtensionFromMime } from '../MediaWidget/MediaItemWidget.utils';
+import {
+  stripHTML,
+  stripDocumentAttachmentTags,
+  isOfficeNativeFilename,
+  getDocumentAttachmentAssetUrl,
+} from '../../helpers/utils';
+import { getDocumentBadgeLabel } from '../MediaWidget/MediaItemWidget.utils';
 import { useTranslation } from 'react-i18next';
 
 type FilePreviewProps = {
@@ -60,6 +65,15 @@ const FilePreview = ({
         return 'CSV';
       case 'html':
         return 'HTML';
+      case 'doc':
+      case 'docx':
+      case 'dotx':
+        return 'Word';
+      case 'xls':
+      case 'xltx':
+        return 'Excel';
+      case 'potx':
+        return 'PowerPoint';
       case 'jpg':
       case 'jpeg':
         return 'JPEG';
@@ -111,9 +125,7 @@ const FilePreview = ({
     if (isHtmlFile(file)) {
       let htmlContent = content;
       if (htmlContent.includes('<') || htmlContent.includes('"')) {
-        const div = document.createElement('div');
-        div.innerHTML = htmlContent;
-        htmlContent = div.textContent || div.innerText || htmlContent;
+        htmlContent = stripHTML(htmlContent) || htmlContent;
       }
       htmlContent = stripDocumentAttachmentTags(htmlContent);
       return htmlContent;
@@ -169,7 +181,16 @@ const FilePreview = ({
                 <button
                   type="button"
                   className="memori--preview-item-trigger"
-                  onClick={() => setSelectedFile(file)}
+                  onClick={() => {
+                    if (isOfficeNativeFilename(file.name || '')) {
+                      const url = getDocumentAttachmentAssetUrl(file);
+                      if (url) {
+                        window.open(url, '_blank', 'noopener,noreferrer');
+                      }
+                    } else {
+                      setSelectedFile(file);
+                    }
+                  }}
                   aria-label={file.name}
                 >
                   {isImageContent(file.content, file.type) ? (
@@ -184,7 +205,7 @@ const FilePreview = ({
                     <span className="memori--preview-filename">{file.name}</span>
                     <span className="memori--preview-filetype">
                       {file.mimeType
-                        ? getFileExtensionFromMime(file.mimeType)
+                        ? getDocumentBadgeLabel(file.mimeType, file.name)
                         : getFileType(file.name, file.type)}
                     </span>
                   </div>

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
@@ -316,6 +320,7 @@ const KnownFacts = ({
         />
 
         <Modal
+          container={surfaceEl ?? undefined}
           className="memori-known-facts-modal"
           open={deleteModalVisibleFor !== undefined}
           closable

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