@memori.ai/memori-react 9.0.0-alpha.4 → 9.0.0-alpha.6

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/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/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/Header/ChatConsumptionDropdown.tsx

@@ -285,7 +285,11 @@ const ChatConsumptionDropdown: React.FC<ChatConsumptionDropdownProps> = ({
       {...triggerButtonProps}
       variant={triggerVariant}
       shape="default"
-      className="memori-header--button memori-header--button--sustainability"
+      className={cx(
+        'memori-header--button memori-header--button--sustainability',
+        open && 'memori-button--active',
+        triggerButtonProps.className
+      )}
       aria-label={triggerLabel}
       title={triggerLabel}
       icon={

package/src/components/Header/Header.css

@@ -630,7 +630,8 @@
     text-align: left;
 }
 
-.memori-dropdown--auth-row:hover {
+.memori-dropdown--auth-row:hover,
+.memori-dropdown--auth-row--active {
     background: color-mix(in srgb, var(--memori-text-color, #111827) 7%, transparent);
 }
 

package/src/components/Header/Header.tsx

@@ -935,6 +935,7 @@ const Header: React.FC<Props> = ({
                       className={cx(
                         'memori-dropdown--auth-row',
                         'memori-dropdown--auth-row--navigable',
+                        open && 'memori-dropdown--auth-row--active',
                         triggerProps.className
                       )}
                     >

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