@memori.ai/memori-react 9.0.0-alpha.23 → 9.0.0-alpha.25

package/src/components/LoginDrawer/LoginDrawer.tsx

@@ -12,7 +12,6 @@ import {
   Field,
 } 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';
@@ -52,7 +51,6 @@ 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';
@@ -77,6 +75,9 @@ const LoginDrawer = ({
   const [showOtpForm, setShowOtpForm] = useState(true);
   const [showOtpCodeForm, setShowOtpCodeForm] = useState(false);
   const [otpTimer, setOtpTimer] = useState<number | null>(null);
+  const [otpResendCooldown, setOtpResendCooldown] = useState<number | null>(
+    null
+  );
   const [otpSent, setOtpSent] = useState(false);
   const [avatar, setAvatar] = useState<Blob | null>(null);
   const [isResending, setIsResending] = useState(false);
@@ -105,7 +106,7 @@ const LoginDrawer = ({
       : ({} as any)
   );
 
-  // OTP timer effect
+  // OTP validity timer (5 minutes, matches backend)
   useEffect(() => {
     let interval: NodeJS.Timeout;
     if (otpTimer != null && otpTimer > 0) {
@@ -126,6 +127,27 @@ const LoginDrawer = ({
     }
   }, [otpTimer, otpSuccess, t]);
 
+  // Resend cooldown (60s), independent from OTP validity
+  useEffect(() => {
+    let interval: NodeJS.Timeout;
+    if (otpResendCooldown != null && otpResendCooldown > 0) {
+      interval = setInterval(() => {
+        setOtpResendCooldown(prev =>
+          prev != null && prev > 0 ? prev - 1 : 0
+        );
+      }, 1000);
+    }
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [otpResendCooldown]);
+
+  useEffect(() => {
+    if (otpResendCooldown === 0) {
+      setOtpResendCooldown(null);
+    }
+  }, [otpResendCooldown]);
+
   useEffect(() => {
     const mediaQuery = window.matchMedia('(max-width: 768px)');
     const onChange = () => setIsMobileViewport(mediaQuery.matches);
@@ -257,8 +279,24 @@ const LoginDrawer = ({
           setOtpError(t('login.otpNotFound'));
         } else if (response.resultCode === -108) {
           setOtpError(t('login.otpExpired'));
+          setOtpTimer(null);
+          setOtpResendCooldown(null);
         } else if (response.resultCode === -109) {
-          setOtpError(t('login.otpMissing'));
+          // Wrong code on 1st/2nd attempt — allow retry
+          setOtpError(t('login.otpInvalid'));
+          setOtpCode('');
+          setOtpFocusedIndex(0);
+          window.setTimeout(() => {
+            otpInputRefs.current[0]?.focus();
+          }, 50);
+        } else if (response.resultCode === -110) {
+          // 3rd wrong attempt — OTP invalidated, need a new LoginWithOTP
+          setOtpError(t('login.otpAttemptsExceeded'));
+          setOtpCode('');
+          setOtpTimer(null);
+          setOtpResendCooldown(null);
+          setShowOtpCodeForm(false);
+          setOtpSent(false);
         } else {
           setOtpError(response.resultMessage || t('login.otpInvalid'));
         }
@@ -392,9 +430,16 @@ const LoginDrawer = ({
     }
   };
 
-  // Start OTP timer
+  const formatOtpTimer = (seconds: number) => {
+    const m = Math.floor(seconds / 60);
+    const s = seconds % 60;
+    return `${m}:${s.toString().padStart(2, '0')}`;
+  };
+
+  // Start OTP validity (5 min) + resend cooldown (60s)
   const startOtpTimer = () => {
-    setOtpTimer(60);
+    setOtpTimer(300);
+    setOtpResendCooldown(60);
   };
 
   const updateMissingData = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -447,7 +492,6 @@ const LoginDrawer = ({
 
   return (
     <Drawer
-      container={surfaceEl ?? undefined}
       open={open}
       onClose={onClose}
       className={cx('memori--login-drawer', {
@@ -500,49 +544,47 @@ const LoginDrawer = ({
 
             {needsMissingData?.tnCAndPPAccepted && (
               <>
-                <label className="memori-checkbox">
-                  <span className="memori-checkbox--input-wrapper">
-                    <Checkbox
-                      name="tnCAndPPAccepted"
-                      checked={tnCAndPPAccepted}
-                      onChange={checked => setTnCAndPPAccepted(checked)}
-                    />
-                  </span>
-                  <span className="memori-checkbox--text">
-                    {t('login.privacyLabel')}{' '}
-                    <a
-                      href={`https://memori.ai/${lang}/privacy_and_cookie`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {t('login.privacyAndCookiePolicy')}
-                    </a>{' '}
-                    {t('login.and')}{' '}
-                    <a
-                      href={`https://memori.ai/${lang}/tos`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {t('login.termsOfService')}
-                    </a>
-                  </span>
-                </label>
-
-                <label className="memori-checkbox">
-                  <span className="memori-checkbox--input-wrapper">
-                    <Checkbox
-                      name="pAndCUAccepted"
-                      checked={pAndCUAccepted}
-                      onChange={checked => setPAndCUAccepted(checked)}
-                    />
-                  </span>
-                  <span className="memori-checkbox--text">
-                    {t('login.pAndCUAccepted')}{' '}
-                    <small>
-                      <em>({t('login.optional')})</em>
-                    </small>
-                  </span>
-                </label>
+                <Checkbox
+                  name="tnCAndPPAccepted"
+                  className="memori-login-drawer--consent"
+                  checked={tnCAndPPAccepted}
+                  onChange={checked => setTnCAndPPAccepted(checked)}
+                  label={
+                    <>
+                      {t('login.privacyLabel')}{' '}
+                      <a
+                        href={`https://memori.ai/${lang}/privacy_and_cookie`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {t('login.privacyAndCookiePolicy')}
+                      </a>{' '}
+                      {t('login.and')}{' '}
+                      <a
+                        href={`https://memori.ai/${lang}/tos`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {t('login.termsOfService')}
+                      </a>
+                    </>
+                  }
+                />
+
+                <Checkbox
+                  name="pAndCUAccepted"
+                  className="memori-login-drawer--consent"
+                  checked={pAndCUAccepted}
+                  onChange={checked => setPAndCUAccepted(checked)}
+                  label={
+                    <>
+                      {t('login.pAndCUAccepted')}{' '}
+                      <small>
+                        <em>({t('login.optional')})</em>
+                      </small>
+                    </>
+                  }
+                />
                 <p>
                   <small>{t('login.goToAccountToChangeYourPreferences')}</small>
                 </p>
@@ -649,8 +691,9 @@ const LoginDrawer = ({
 
             {otpTimer != null && otpTimer > 0 && !otpSuccess && (
               <div className="memori--login-drawer--otp-timer">
-                {/* <span className="memori--login-drawer--otp-timer-icon">⏱️</span> */}
-                <span>{t('login.otpTimer', { seconds: otpTimer })}</span>
+                <span>
+                  {t('login.otpTimer', { time: formatOtpTimer(otpTimer) })}
+                </span>
               </div>
             )}
 
@@ -675,13 +718,17 @@ const LoginDrawer = ({
                   disabled={
                     loading ||
                     isResending ||
-                    (otpTimer != null && otpTimer > 0) ||
+                    (otpResendCooldown != null && otpResendCooldown > 0) ||
                     !otpEmail
                   }
                   loading={isResending}
                   icon={<RefreshCcwIcon className="icon" />}
                 >
-                  {isResending ? t('login.resending') : t('login.resendOtp')}
+                  {isResending
+                    ? t('login.resending')
+                    : otpResendCooldown != null && otpResendCooldown > 0
+                    ? t('login.resendOtpIn', { seconds: otpResendCooldown })
+                    : t('login.resendOtp')}
                 </Button>
               </div>
             )}

package/src/components/LoginDrawer/__snapshots__/LoginDrawer.test.tsx.snap

@@ -15,9 +15,7 @@ exports[`renders LoginDrawer closed unchanged 1`] = `
 `;
 
 exports[`renders LoginDrawer logged in unchanged 1`] = `
-<div
-  data-base-ui-inert=""
->
+<div>
   <div
     aria-atomic="false"
     aria-label="Notifications"
@@ -31,9 +29,7 @@ exports[`renders LoginDrawer logged in unchanged 1`] = `
 `;
 
 exports[`renders LoginDrawer logged with missing data unchanged 1`] = `
-<div
-  data-base-ui-inert=""
->
+<div>
   <div
     aria-atomic="false"
     aria-label="Notifications"
@@ -47,9 +43,7 @@ exports[`renders LoginDrawer logged with missing data unchanged 1`] = `
 `;
 
 exports[`renders LoginDrawer on change password unchanged 1`] = `
-<div
-  data-base-ui-inert=""
->
+<div>
   <div
     aria-atomic="false"
     aria-label="Notifications"
@@ -63,9 +57,7 @@ exports[`renders LoginDrawer on change password unchanged 1`] = `
 `;
 
 exports[`renders LoginDrawer on signup unchanged 1`] = `
-<div
-  data-base-ui-inert=""
->
+<div>
   <div
     aria-atomic="false"
     aria-label="Notifications"
@@ -79,9 +71,7 @@ exports[`renders LoginDrawer on signup unchanged 1`] = `
 `;
 
 exports[`renders LoginDrawer on signup waiting for otp unchanged 1`] = `
-<div
-  data-base-ui-inert=""
->
+<div>
   <div
     aria-atomic="false"
     aria-label="Notifications"
@@ -95,9 +85,7 @@ exports[`renders LoginDrawer on signup waiting for otp unchanged 1`] = `
 `;
 
 exports[`renders LoginDrawer open unchanged 1`] = `
-<div
-  data-base-ui-inert=""
->
+<div>
   <div
     aria-atomic="false"
     aria-label="Notifications"
@@ -111,9 +99,7 @@ exports[`renders LoginDrawer open unchanged 1`] = `
 `;
 
 exports[`renders LoginDrawer unlogged unchanged 1`] = `
-<div
-  data-base-ui-inert=""
->
+<div>
   <div
     aria-atomic="false"
     aria-label="Notifications"
@@ -127,9 +113,7 @@ exports[`renders LoginDrawer unlogged unchanged 1`] = `
 `;
 
 exports[`renders LoginDrawer with OTP form and error unchanged 1`] = `
-<div
-  data-base-ui-inert=""
->
+<div>
   <div
     aria-atomic="false"
     aria-label="Notifications"
@@ -143,9 +127,7 @@ exports[`renders LoginDrawer with OTP form and error unchanged 1`] = `
 `;
 
 exports[`renders LoginDrawer with OTP form and timer unchanged 1`] = `
-<div
-  data-base-ui-inert=""
->
+<div>
   <div
     aria-atomic="false"
     aria-label="Notifications"
@@ -159,9 +141,7 @@ exports[`renders LoginDrawer with OTP form and timer unchanged 1`] = `
 `;
 
 exports[`renders LoginDrawer with OTP form loading unchanged 1`] = `
-<div
-  data-base-ui-inert=""
->
+<div>
   <div
     aria-atomic="false"
     aria-label="Notifications"
@@ -175,9 +155,7 @@ exports[`renders LoginDrawer with OTP form loading unchanged 1`] = `
 `;
 
 exports[`renders LoginDrawer with OTP form unchanged 1`] = `
-<div
-  data-base-ui-inert=""
->
+<div>
   <div
     aria-atomic="false"
     aria-label="Notifications"

package/src/components/MediaWidget/MediaItemWidget.css

@@ -6,66 +6,74 @@
     gap: var(--memori-spacing-sm);
 }
 
-/* Single image: Single column, centered, full width */
-.memori-media-items--grid.memori-media-items--single {
-    grid-template-rows: 1fr;
-    justify-items: center;
-}
-
-.memori-media-items--grid.memori-media-items--single .memori-media-item,
-.memori-media-item--link .memori-media-item--image {
-    width: 100%;
-    width: 120px;
+/*
+ * Image galleries must use a real CSS grid with reserved tile size.
+ * Previously few/many set grid-template-* on a flex container, so tiles
+ * sized to intrinsic screenshots and caused Safari scroll jumps / blanking.
+ */
+.memori-media-items--grid.memori-media-items--single,
+.memori-media-items--grid.memori-media-items--few,
+.memori-media-items--grid.memori-media-items--many {
+    display: grid;
+    min-width: 0;
     max-width: 100%;
-    height: 120px;
-    padding: 0;
+    align-content: start;
+    justify-content: start;
 }
 
-.memori-media-item--link .memori-media-item--image > div {
-    height: 100%;
+/* Single image: one reserved tile */
+.memori-media-items--grid.memori-media-items--single {
+    grid-template-columns: 120px;
+    justify-items: stretch;
 }
 
-/* 2-4 images: Maximum 2 columns, responsive */
+/* 2-4 images: two columns of reserved tiles */
 .memori-media-items--grid.memori-media-items--few {
-    max-width: 100%;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-template-columns: repeat(2, 120px);
 }
 
-/* Limit to 2 columns for 2-4 images on tablet and desktop */
-@media (min-width: 641px) {
-    .memori-media-items--grid.memori-media-items--few {
-        grid-template-columns: repeat(2, minmax(200px, 1fr));
-    }
-}
-
-/* 5+ images: Maximum 3 columns on desktop */
+/* 5+ images: two columns by default, three on wide viewports */
 .memori-media-items--grid.memori-media-items--many {
-    max-width: 100%;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    grid-template-columns: repeat(2, 120px);
 }
 
-/* Limit to 3 columns for 5+ images on desktop */
 @media (min-width: 1025px) {
     .memori-media-items--grid.memori-media-items--many {
-        grid-template-columns: repeat(3, minmax(200px, 1fr));
+        grid-template-columns: repeat(3, 120px);
     }
 }
 
-/* Allineamento media per messaggi dell'utente */
+.memori-media-items--grid.memori-media-items--single .memori-media-item,
+.memori-media-items--grid.memori-media-items--few .memori-media-item,
+.memori-media-items--grid.memori-media-items--many .memori-media-item,
+.memori-media-item--link .memori-media-item--image {
+    width: 120px;
+    min-width: 0;
+    max-width: 120px;
+    height: 120px;
+    min-height: 120px;
+    box-sizing: border-box;
+    padding: 0;
+}
+
+.memori-media-item--link .memori-media-item--image > div {
+    height: 100%;
+}
+
+/* User media: keep chronological order; avoid direction:rtl (Safari scroll bugs) */
 .memori-media-items--grid.memori-media-items--user {
     max-width: 90%;
-    margin: 0 auto;
-    /* margin-right: var(--memori-spacing-lg); */
-    margin-left: calc(var(--memori-spacing-3xl) + var(--memori-spacing-sm));
-    direction: rtl;
+    justify-content: end;
+    margin-block: 0;
+    margin-inline-end: 0;
+    margin-inline-start: auto;
 }
 
-/* Allineamento media per messaggi dell'agente */
+/* Agent media: start-aligned */
 .memori-media-items--grid.memori-media-items--agent {
-    margin: 0 auto;
-    /* margin-right: var(--memori-spacing-sm); */
-    /* margin-left: calc(var(--memori-spacing-3xl) + var(--memori-spacing-sm)); */
-    direction: ltr;
+    justify-content: start;
+    margin-block: 0;
+    margin-inline: 0;
 }
 
 .memori-media-item--card {
@@ -91,6 +99,8 @@
 
 .memori-media-item--image .memori-card {
     overflow: hidden;
+    width: 100%;
+    height: 100%;
     border: 1px solid #e5e7eb;
     border-radius: var(--memori-radius-box);
     margin: 0;
@@ -130,8 +140,10 @@
     border-radius: var(--memori-radius-box);
 }
 
-/* Single image: max-height 400px */
-.memori-media-items--single .memori-media-item--figure {
+/* Reserved tile for all image gallery sizes (prevents load-time layout shift) */
+.memori-media-items--single .memori-media-item--figure,
+.memori-media-items--few .memori-media-item--figure,
+.memori-media-items--many .memori-media-item--figure {
     min-height: 120px;
     max-height: 120px;
     background-color: var(--memori-secondary-background);
@@ -152,6 +164,15 @@
     object-position: center;
 }
 
+.memori-media-items--single .memori-media-item--figure img,
+.memori-media-items--few .memori-media-item--figure img,
+.memori-media-items--many .memori-media-item--figure img {
+    width: 100%;
+    height: 100%;
+    max-height: none;
+    object-fit: cover;
+}
+
 .memori-media-item--figure-caption {
     display: -webkit-box;
     overflow: hidden;
@@ -730,39 +751,34 @@ div.memori-media-item--link:focus-visible {
 }
 
 /* Responsive design */
-/* Mobile (≤640px): Force single column layout */
+/* Mobile (≤640px): stack image tiles in one column, keep reserved 120px size */
 @media (max-width: 640px) {
     .memori-media-items--grid {
         padding: 0.75rem;
         gap: var(--memori-spacing-sm);
-        grid-template-columns: 1fr !important;
     }
 
     .memori-media-items--grid.memori-media-items--single,
     .memori-media-items--grid.memori-media-items--few,
     .memori-media-items--grid.memori-media-items--many {
-        grid-template-columns: 1fr !important;
+        grid-template-columns: 120px;
     }
 }
 
-/* Tablet (641px-1024px): 2 columns max, min 250px per column */
+/* Tablet (641px-1024px): two reserved tiles */
 @media (min-width: 641px) and (max-width: 1024px) {
-    .memori-media-items--grid.memori-media-items--few {
-        max-width: 100%;
-        grid-template-columns: repeat(2, minmax(250px, 1fr));
-    }
-
+    .memori-media-items--grid.memori-media-items--few,
     .memori-media-items--grid.memori-media-items--many {
         max-width: 100%;
-        grid-template-columns: repeat(2, minmax(250px, 1fr));
+        grid-template-columns: repeat(2, 120px);
     }
 }
 
-/* Desktop (>1024px): 3 columns max for 5+ images */
+/* Desktop (>1024px): three tiles for 5+ images */
 @media (min-width: 1025px) {
     .memori-media-items--grid.memori-media-items--many {
         max-width: 100%;
-        grid-template-columns: repeat(3, minmax(200px, 1fr));
+        grid-template-columns: repeat(3, 120px);
     }
 }
 
@@ -839,7 +855,7 @@ a.memori-media-item--document-link {
     padding: calc(var(--memori-spacing-sm) + var(--memori-spacing-xs));
     border: 1px solid var(--memori-border-color);
     border-radius: var(--memori-radius-box);
-    background: color-mix(in oklch, var(--memori-main-background) 38%, transparent);
+    background: var(--memori-secondary-background);
     cursor: pointer;
     transition: box-shadow 0.2s ease;
 }
@@ -901,14 +917,18 @@ a.memori-media-item--document-link {
     text-transform: uppercase;
 }
 
-/* Document items in grid: compact, full width */
+/* Document tiles in grid: fill the reserved 120px cell */
 .memori-media-items--grid .memori-media-item--document-link {
+    display: block;
     width: 100%;
+    height: 100%;
 }
 
 .memori-media-items--grid .memori-media-item--document {
-    min-width: 120px;
-    max-width: 120px;
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+    height: 100%;
     min-height: 120px;
     box-sizing: border-box;
     background-color: var(--memori-secondary-background);

package/src/components/MediaWidget/MediaItemWidget.test.tsx

@@ -196,6 +196,39 @@ it('renders PDF as document card with title and PDF badge', () => {
   expect(container.querySelector('.memori-media-item--document-link')).toBeInTheDocument();
 });
 
+it('lays out multiple document cards in the few-tile grid (not one per row)', () => {
+  const docs: (Medium & { type?: string })[] = [
+    {
+      mediumID: 'doc-a',
+      mimeType: 'application/pdf',
+      title: 'A.pdf',
+      url: 'https://example.com/a.pdf',
+      type: 'document',
+    },
+    {
+      mediumID: 'doc-b',
+      mimeType: 'application/pdf',
+      title: 'B.pdf',
+      url: 'https://example.com/b.pdf',
+      type: 'document',
+    },
+    {
+      mediumID: 'doc-c',
+      mimeType: 'application/pdf',
+      title: 'C.pdf',
+      url: 'https://example.com/c.pdf',
+      type: 'document',
+    },
+  ];
+  const { container } = render(
+    <MediaItemWidget items={docs} sessionID={sessionID} />
+  );
+  expect(
+    container.querySelector('.memori-media-items--grid.memori-media-items--few')
+  ).toBeInTheDocument();
+  expect(container.querySelectorAll('.memori-media-item')).toHaveLength(3);
+});
+
 it('renders HTML link as document card with Link badge when url present', () => {
   const linkItem: Medium & { type?: string } = {
     mediumID: 'link-1',

package/src/components/MediaWidget/MediaItemWidget.tsx

@@ -44,7 +44,6 @@ import {
   getImageDisplaySource,
   FALLBACK_IMAGE_BASE64,
   TEXT_FILE_EXTENSIONS,
-  IMAGE_MIME_TYPES,
 } from './MediaItemWidget.utils';
 import { DocumentCard } from './DocumentCard';
 import { MediaPreviewModal } from './MediaPreviewModal';
@@ -846,14 +845,9 @@ const MediaItemWidget: React.FC<Props> = ({
     [media]
   );
 
-  // How many images are present for determining layout
-  const imageCount = useMemo(
-    () =>
-      nonCodeDisplayMedia.filter(m =>
-        (IMAGE_MIME_TYPES as readonly string[]).includes(m.mimeType)
-      ).length,
-    [nonCodeDisplayMedia]
-  );
+  // Tile count drives Claude-like row/column grid for images AND documents.
+  // (Previously only imageCount was used, so file cards stayed in a flex column.)
+  const tileCount = nonCodeDisplayMedia.length;
 
   // Media "card open"/preview modal: pass the clicked item so the correct one opens
   // (avoids wrong image when multiple items share the same mediumID)
@@ -888,9 +882,9 @@ const MediaItemWidget: React.FC<Props> = ({
           className={cx('memori-media-items--grid memori-chat-scroll-item', {
             'memori-media-items--user': fromUser,
             'memori-media-items--agent': !fromUser,
-            'memori-media-items--single': imageCount === 1,
-            'memori-media-items--few': imageCount >= 2 && imageCount <= 4,
-            'memori-media-items--many': imageCount >= 5,
+            'memori-media-items--single': tileCount === 1,
+            'memori-media-items--few': tileCount >= 2 && tileCount <= 4,
+            'memori-media-items--many': tileCount >= 5,
           })}
         >
           {nonCodeDisplayMedia.map((item, index) => (

package/src/components/MediaWidget/__snapshots__/MediaItemWidget.test.tsx.snap

@@ -80,6 +80,7 @@ exports[`renders MediaItemWidget unchanged with css snippet to show 1`] = `
                               class="memori-button__icon"
                             >
                               <svg
+                                aria-hidden="true"
                                 class="lucide lucide-copy"
                                 fill="none"
                                 height="24"
@@ -317,6 +318,7 @@ exports[`renders MediaItemWidget unchanged with js snippet to show 1`] = `
                               class="memori-button__icon"
                             >
                               <svg
+                                aria-hidden="true"
                                 class="lucide lucide-copy"
                                 fill="none"
                                 height="24"