@memori.ai/memori-react 9.0.0-alpha.2 → 9.0.0-alpha.21

package/src/components/ChatInputs/ChatInputs.tsx

@@ -6,6 +6,7 @@ import { Button, Tooltip } from '@memori.ai/ui';
 import { useAlertManager } from '@memori.ai/ui';
 import { Send, Mic } from 'lucide-react';
 import MicrophoneButton from '../MicrophoneButton/MicrophoneButton';
+import IconButton from '../IconButton/IconButton';
 import cx from 'classnames';
 import UploadButton from '../UploadButton/UploadButton';
 import FilePreview from '../FilePreview/FilePreview';
@@ -35,6 +36,7 @@ export interface Props {
   isTyping?: boolean;
   sessionID?: string;
   memoriID?: string;
+  baseUrl?: string;
   client?: ReturnType<typeof memoriApiClient>;
   onTextareaExpanded?: (expanded: boolean) => void;
   /** Override total document payload limit (character count). */
@@ -51,6 +53,8 @@ export interface Props {
   pasteAsCardCharThreshold?: number;
   /** When false, hides the AI disclaimer below the input (e.g. pre-start / start panel). */
   showAiGeneratedNote?: boolean;
+  /** Optional branding node rendered in the footer row next to the disclaimer. */
+  footerBrand?: React.ReactNode;
 }
 
 const ChatInputs: React.FC<Props> = ({
@@ -72,6 +76,7 @@ const ChatInputs: React.FC<Props> = ({
   sessionID,
   authToken,
   memoriID,
+  baseUrl,
   client,
   onTextareaExpanded,
   maxTotalMessagePayload,
@@ -81,6 +86,7 @@ const ChatInputs: React.FC<Props> = ({
   pasteAsCardLineThreshold,
   pasteAsCardCharThreshold,
   showAiGeneratedNote = true,
+  footerBrand,
 }) => {
   const { t } = useTranslation();
   const alertManager = useAlertManager();
@@ -368,6 +374,7 @@ ${text}
               removeFile={removeFile}
               showAnonymousRetentionNotice={!authToken}
               uploadingCount={uploadingCount}
+              maxDocumentsPerMessage={maxDocumentsPerMessage}
             />
           </div>
         )}
@@ -380,6 +387,7 @@ ${text}
                   authToken={authToken}
                   client={client}
                   sessionID={sessionID}
+                  baseUrl={baseUrl}
                   isMediaAccepted={dialogState?.acceptsMedia || false}
                   setDocumentPreviewFiles={setDocumentPreviewFiles}
                   documentPreviewFiles={documentPreviewFiles}
@@ -413,11 +421,10 @@ ${text}
           <div className="memori-chat-inputs--trailing">
             <div className="memori-chat-inputs--trailing-inner">
               {showMicrophone && microphoneMode === 'CONTINUOUS' && (
-                <button
+                <IconButton
                   type="button"
-                  className={cx('memori-chat-inputs--mic-btn', {
-                    'memori-chat-inputs--mic-btn--listening': listening,
-                  })}
+                  className="memori-chat-inputs--mic-btn"
+                  recording={!!listening}
                   title={
                     listening
                       ? t('write_and_speak.micButtonPopoverListening') ||
@@ -442,9 +449,9 @@ ${text}
                       : t('write_and_speak.micButtonPopover') ||
                         'Start listening'
                   }
-                >
-                  <Mic className="icon" aria-hidden />
-                </button>
+                  aria-pressed={!!listening}
+                  icon={<Mic className="icon" aria-hidden />}
+                />
               )}
               {showMicrophone && microphoneMode === 'HOLD_TO_TALK' && (
                 <MicrophoneButton
@@ -498,10 +505,17 @@ ${text}
           </div>
         </div>
       </fieldset>
-      {showAiGeneratedNote && (
-        <p className="memori-chat-inputs--ai-note">
-          {t('aiGeneratedNote', { defaultValue: 'Generato da AI' })}
-        </p>
+      {(showAiGeneratedNote || footerBrand) && (
+        <div className="memori-conversation-footer">
+          {showAiGeneratedNote ? (
+            <p className="memori-chat-inputs--ai-note">
+              {t('aiGeneratedNote', { defaultValue: 'Generato da AI' })}
+            </p>
+          ) : (
+            <span className="memori-chat-inputs--ai-note" aria-hidden />
+          )}
+          {footerBrand}
+        </div>
       )}
     </div>
   );

package/src/components/ChatTextArea/ChatTextArea.css

@@ -89,57 +89,50 @@
 
 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;
+    -ms-overflow-style: none; /* IE/Edge */
     overflow-y: auto;
     resize: none;
-    scrollbar-width: thin;
+    scrollbar-width: none; /* Firefox */
     transition: height 0.2s ease-in-out;
 }
 
 /* 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 */
+/* Hide vertical scrollbar (scroll still works) */
 textarea.memori-chat-textarea--input::-webkit-scrollbar {
-    width: 6px;
-}
-
-textarea.memori-chat-textarea--input::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb {
-    border-radius: var(--memori-radius-box);
-    background: rgba(0, 0, 0, 0.2);
-}
-
-textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb:hover {
-    background: rgba(0, 0, 0, 0.3);
+    display: none;
+    width: 0;
 }
 
 /* Responsive adjustments for textarea input */
 @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 */
     }
 }
 
@@ -191,19 +184,30 @@ button.memori-chat-textarea--expand-button:focus {
 
 [data-theme='dark'] textarea.memori-chat-textarea--input {
     color: var(--memori-text-color, rgba(255, 255, 255, 0.92));
-    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
 }
 
 [data-theme='dark'] textarea.memori-chat-textarea--input::placeholder {
     color: var(--memori-text-color-muted, rgba(255, 255, 255, 0.5));
 }
 
-[data-theme='dark'] textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.25);
+/* 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; */
 }
 
-[data-theme='dark'] textarea.memori-chat-textarea--input::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.4);
+.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'] button.memori-chat-textarea--expand-button {

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.css

@@ -32,12 +32,18 @@
 }
 
 .memori-modal__viewport.memori-content-preview-modal .memori-modal__title {
+    overflow: hidden;
+    min-width: 0;
+    max-width: 100%;
     padding: 1rem 1.25rem 0.75rem;
+    padding-right: calc(var(--memori-icon-button-size, 40px) + 1.5rem);
     border-bottom: 1px solid var(--memori-content-preview-border, rgba(0, 0, 0, 0.06));
     color: var(--memori-text-color);
     font-size: var(--memori-text-size-base);
     font-weight: var(--memori-text-weight-semibold);
     letter-spacing: -0.01em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .memori-modal__viewport.memori-content-preview-modal .memori-modal__close {
@@ -45,28 +51,6 @@
     right: 0.75rem;
 }
 
-.memori-modal__viewport.memori-content-preview-modal .memori-modal__close button {
-    border-radius: var(--memori-radius-box);
-    background: var(--memori-content-preview-close-bg, rgba(0, 0, 0, 0.05));
-    color: var(--memori-text-color, #111827);
-    transition: background 0.2s ease, transform 0.15s ease;
-}
-
-.memori-modal__viewport.memori-content-preview-modal .memori-modal__close button svg {
-    color: currentColor;
-}
-
-.memori-modal__viewport.memori-content-preview-modal .memori-modal__close button:hover {
-    background: var(--memori-content-preview-close-hover, rgba(0, 0, 0, 0.1));
-    transform: scale(1.05);
-}
-
-[data-theme='dark'] .memori-modal__viewport.memori-content-preview-modal .memori-modal__close button,
-.memori-widget[data-theme='dark'] .memori-modal__viewport.memori-content-preview-modal .memori-modal__close button {
-    background: color-mix(in srgb, var(--memori-main-background, #111) 85%, white);
-    color: var(--memori-text-color, #fff);
-}
-
 .memori-content-preview-modal--body--image {
     display: flex;
     align-items: center;

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.css

@@ -40,10 +40,11 @@
 
 .memori--date-selector__mobile-input {
     width: 100%;
+    min-width: 0;
     max-width: 100%;
     min-height: var(--memori-spacing-3xl);
     box-sizing: border-box;
-    padding: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs)) var(--memori-spacing-lg);
+    padding: var(--memori-spacing-sm) var(--memori-spacing-md);
     border: 1px solid #e5e7eb;
     border-radius: var(--memori-radius-box);
     -webkit-appearance: none;
@@ -52,9 +53,31 @@
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
     color: var(--memori-text-color);
     font-size: var(--memori-text-size-base);
+    line-height: 1.375;
     transition: all 0.2s ease;
 }
 
+.memori--date-selector__mobile-input::-webkit-datetime-edit,
+.memori--date-selector__mobile-input::-webkit-datetime-edit-fields-wrapper {
+    display: inline-flex;
+    min-height: 1.375em;
+    align-items: center;
+    padding: 0;
+}
+
+.memori--date-selector__mobile-input::-webkit-date-and-time-value {
+    min-height: 1.375em;
+    text-align: left;
+}
+
+.memori--date-selector__mobile-input::-webkit-calendar-picker-indicator {
+    width: 1.25em;
+    height: 1.25em;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+}
+
 .memori--date-selector__mobile-input:focus {
     border-color: var(--memori-primary);
     box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
@@ -150,7 +173,7 @@
     }
 
     .memori--date-selector__mobile-input {
-        min-height: 44px;
+        min-height: var(--memori-spacing-3xl);
         font-size: var(--memori-text-size-base); /* Prevents zoom on iOS */
     }
 }

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.css

@@ -1,6 +1,7 @@
 /* Updated FilePreview Styles */
 
 .memori--preview-container {
+    position: relative;
     z-index: 10;
     overflow: hidden;
     width: 100%;
@@ -12,6 +13,46 @@
     transition: all 0.3s ease;
 }
 
+.memori--preview-list {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    padding: 0.875rem;
+    padding-bottom: 0.625rem;
+    gap: 8px;
+    -webkit-overflow-scrolling: touch;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-x: contain;
+    scrollbar-color: hsla(var(--border-300) / 35%) transparent;
+    scrollbar-width: thin;
+    touch-action: pan-x;
+}
+
+.memori--document-count {
+    position: absolute;
+    z-index: 5;
+    top: 8px;
+    right: 8px;
+    padding: calc(var(--memori-spacing-xs) / 4) calc(var(--memori-spacing-xs) + 2px);
+    border-radius: var(--memori-radius-box);
+    color: var(--memori-text-color);
+    font-size: 12px;
+    font-weight: bold;
+}
+
+.memori--document-count-full {
+    background-color: #fa5252;
+}
+
+.memori--preview-container:has(.memori--document-count) .memori--preview-list {
+    padding-right: 2.75rem;
+}
+
 .memori--preview-container.slide-down {
     animation: slide-down 0.3s ease;
 }
@@ -106,26 +147,6 @@
     margin: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs)) 0;
 }
 
-.memori--preview-list {
-    display: flex;
-    width: 100%;
-    min-width: 0;
-    max-width: 100%;
-    box-sizing: border-box;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    padding: 0.875rem;
-    padding-bottom: 0.625rem;
-    gap: 8px;
-    -webkit-overflow-scrolling: touch;
-    overflow-x: auto;
-    overflow-y: hidden;
-    overscroll-behavior-x: contain;
-    scrollbar-color: hsla(var(--border-300) / 35%) transparent;
-    scrollbar-width: thin;
-    touch-action: pan-x;
-}
-
 .memori--preview-item {
     position: relative;
     display: flex;
@@ -164,7 +185,7 @@
     height: 20px;
     flex-shrink: 0;
     color: var(--memori-text-color);
-    fill: #868e96;
+    fill: #fff;
 }
 
 .memori--preview-thumbnail {

package/src/components/FilePreview/FilePreview.stories.tsx

@@ -23,7 +23,6 @@ const meta: Meta = {
 
 type Props = {
   onUpload: (text: string) => void;
-  convertapiToken: string;
 };
 
 export default meta;
@@ -55,12 +54,10 @@ const Template: Story<Props> = args => {
 export const Default = Template.bind({});
 Default.args = {
   onUpload: () => {},
-  convertapiToken: '',
 };
 
 export const Disabled = Template.bind({});
 Disabled.args = {
   onUpload: () => {},
-  convertapiToken: '',
   disabled: true,
 };