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

package/src/components/ChatTextArea/ChatTextArea.css

@@ -89,16 +89,19 @@
 
 textarea.memori-chat-textarea--input {
     width: 100%;
+    min-width: 0;
     min-height: 36px;
     max-height: 208px;
     box-sizing: border-box;
-    /* padding: var(--memori-spacing-sm) 0; */
+    flex: 1;
+    padding: 8px 6px;
     border: none;
     background: transparent;
-    color: var(--memori-text-color, #000);
+    color: var(--memori-text-color, #1f1425);
     font-family: var(--memori-font-family);
-    font-size: var(--memori-text-size-base);
+    font-size: 14.5px;
     line-height: var(--memori-text-line-normal);
+    outline: none;
     overflow-y: auto;
     resize: none;
     scrollbar-width: thin;
@@ -107,7 +110,8 @@ textarea.memori-chat-textarea--input {
 
 /* Placeholder styling */
 textarea.memori-chat-textarea--input::placeholder {
-    color: var(--memori-text-color);
+    color: color-mix(in srgb, var(--memori-text-color) 55%, transparent);
+    opacity: 1;
 }
 
 /* Scrollbar styling */
@@ -132,14 +136,14 @@ textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb:hover {
 @media (max-width: 768px) {
     textarea.memori-chat-textarea--input {
         max-height: 200px;
-        font-size: var(--memori-text-size-base); /* Prevent zoom on iOS */
+        font-size: 14.5px; /* Prevent zoom on iOS */
     }
 }
 
 @media (max-width: 480px) {
     textarea.memori-chat-textarea--input {
         max-height: 150px;
-        font-size: var(--memori-text-size-base); /* Prevent zoom on iOS */
+        font-size: 14.5px; /* Prevent zoom on iOS */
     }
 }
 
@@ -198,6 +202,26 @@ button.memori-chat-textarea--expand-button:focus {
     color: var(--memori-text-color-muted, rgba(255, 255, 255, 0.5));
 }
 
+/* Layout-scoped dark pills: keep exact text/placeholder colors */
+.memori-widget.memori-layout-fullpage textarea.memori-chat-textarea--input,
+.memori-widget.memori-layout-hidden_chat textarea.memori-chat-textarea--input,
+.memori-widget.memori-layout-website_assistant textarea.memori-chat-textarea--input,
+[data-theme='dark'] .memori-widget.memori-layout-fullpage textarea.memori-chat-textarea--input,
+[data-theme='dark'] .memori-widget.memori-layout-hidden_chat textarea.memori-chat-textarea--input,
+[data-theme='dark'] .memori-widget.memori-layout-website_assistant textarea.memori-chat-textarea--input {
+    background: transparent;
+    /* color: #f2f0f4; */
+}
+
+.memori-widget.memori-layout-fullpage textarea.memori-chat-textarea--input::placeholder,
+.memori-widget.memori-layout-hidden_chat textarea.memori-chat-textarea--input::placeholder,
+.memori-widget.memori-layout-website_assistant textarea.memori-chat-textarea--input::placeholder,
+[data-theme='dark'] .memori-widget.memori-layout-fullpage textarea.memori-chat-textarea--input::placeholder,
+[data-theme='dark'] .memori-widget.memori-layout-hidden_chat textarea.memori-chat-textarea--input::placeholder,
+[data-theme='dark'] .memori-widget.memori-layout-website_assistant textarea.memori-chat-textarea--input::placeholder {
+    color: #7d7a86;
+}
+
 [data-theme='dark'] textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb {
     background: rgba(255, 255, 255, 0.25);
 }

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/CompletionProviderStatus/__snapshots__/CompletionProviderStatus.test.tsx.snap

@@ -3,10 +3,10 @@
 exports[`renders CompletionProviderStatus errored unchanged 1`] = `
 <div>
   <span
-    class="styles-module__root___-ALla memori--completion-provider-status--tooltip"
+    class="memori-tooltip memori--completion-provider-status--tooltip"
   >
     <span
-      class="styles-module__trigger___V2aIF"
+      class="memori-tooltip__trigger"
       id="base-ui-:r3:"
     >
       <svg
@@ -39,10 +39,10 @@ exports[`renders CompletionProviderStatus errored unchanged 1`] = `
 exports[`renders CompletionProviderStatus errored with provider specified unchanged 1`] = `
 <div>
   <span
-    class="styles-module__root___-ALla memori--completion-provider-status--tooltip"
+    class="memori-tooltip memori--completion-provider-status--tooltip"
   >
     <span
-      class="styles-module__trigger___V2aIF"
+      class="memori-tooltip__trigger"
       id="base-ui-:r5:"
     >
       <svg
@@ -75,10 +75,10 @@ exports[`renders CompletionProviderStatus errored with provider specified unchan
 exports[`renders CompletionProviderStatus unchanged 1`] = `
 <div>
   <span
-    class="styles-module__root___-ALla memori--completion-provider-status--tooltip"
+    class="memori-tooltip memori--completion-provider-status--tooltip"
   >
     <span
-      class="styles-module__trigger___V2aIF"
+      class="memori-tooltip__trigger"
       id="base-ui-:r1:"
     >
       <svg

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/FeedbackButtons/__snapshots__/FeedbackButtons.test.tsx.snap

@@ -6,10 +6,10 @@ exports[`renders FeedbackButtons unchanged 1`] = `
     class="memori-chat--feedback"
   >
     <span
-      class="styles-module__root___-ALla"
+      class="memori-tooltip"
     >
       <span
-        class="styles-module__trigger___V2aIF"
+        class="memori-tooltip__trigger"
         id="base-ui-:r1:"
       >
         <button

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import cx from 'classnames';
 import { Message } from '@memori.ai/memori-api-client/dist/types';
 import { useTranslation } from 'react-i18next';
@@ -28,7 +28,8 @@ export interface ChatConsumptionDropdownProps {
   menuAlign?: 'start' | 'center' | 'end';
   trigger?:
     | ((
-        props: React.ButtonHTMLAttributes<HTMLButtonElement>
+        props: React.ButtonHTMLAttributes<HTMLButtonElement>,
+        state: { open: boolean }
       ) => React.ReactElement)
     | React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement>>;
 }
@@ -263,6 +264,7 @@ const ChatConsumptionDropdown: React.FC<ChatConsumptionDropdownProps> = ({
   trigger,
 }) => {
   const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
 
   const hasConsumptionData = useMemo(
     () =>
@@ -283,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={
@@ -295,7 +301,8 @@ const ChatConsumptionDropdown: React.FC<ChatConsumptionDropdownProps> = ({
     triggerButtonProps: React.ButtonHTMLAttributes<HTMLButtonElement>
   ) => {
     if (!trigger) return renderDefaultTrigger(triggerButtonProps);
-    if (typeof trigger === 'function') return trigger(triggerButtonProps);
+    if (typeof trigger === 'function')
+      return trigger(triggerButtonProps, { open });
     if (
       !React.isValidElement<React.ButtonHTMLAttributes<HTMLButtonElement>>(
         trigger
@@ -323,7 +330,11 @@ const ChatConsumptionDropdown: React.FC<ChatConsumptionDropdownProps> = ({
   };
 
   return (
-    <Dropdown className="memori-header--dropdown">
+    <Dropdown
+      className="memori-header--dropdown"
+      open={open}
+      onOpenChange={setOpen}
+    >
       <Dropdown.Trigger
         showChevron={false}
         render={props => renderTrigger(props)}

package/src/components/Header/Header.css

@@ -570,10 +570,6 @@
     border-radius: 8px;
 }
 
-.memori-header--fullpage .memori-header--fullpage-labeled-trigger {
-    gap: 0.5rem;
-}
-
 .memori-header--auth-icon-controls {
     display: inline-flex;
     align-items: center;
@@ -587,10 +583,23 @@
     min-height: 38px;
     padding: 8px;
     border: 1px solid color-mix(in srgb, var(--memori-text-color, #111827) 16%, transparent);
-    /* border-radius: 8px; */
     background: transparent;
 }
 
+.memori-header--auth-icon-button:has(.memori-header--action-label) {
+    width: auto;
+    min-width: 38px;
+    gap: 0.35rem;
+    padding-inline: 10px;
+}
+
+.memori-header--action-label {
+    font-size: var(--memori-text-size-sm, 0.8125rem);
+    font-weight: var(--memori-text-weight-medium, 500);
+    line-height: 1.2;
+    white-space: nowrap;
+}
+
 .memori-header--auth-icon-button:hover {
     background: color-mix(in srgb, var(--memori-text-color, #111827) 8%, transparent);
 }
@@ -630,7 +639,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);
 }
 
@@ -723,10 +733,6 @@
     .memori-header.memori-header--fullpage .memori-button:not(.memori-button--icon-only) .memori-button__content {
         display: none !important;
     }
-
-    .memori-header.memori-header--fullpage .memori-header--fullpage-labeled-trigger {
-        gap: 0;
-    }
 }
 
 [data-theme='dark'] .memori-widget .memori-header--fullpage .memori-header--fullpage-divider,