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

package/src/components/LoginDrawer/LoginDrawer.tsx

@@ -9,6 +9,7 @@ import {
   createAlertOptions,
   Card,
   Form,
+  Field,
 } from '@memori.ai/ui';
 import { useTranslation } from 'react-i18next';
 import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
@@ -107,9 +108,9 @@ const LoginDrawer = ({
   // OTP timer effect
   useEffect(() => {
     let interval: NodeJS.Timeout;
-    if (otpTimer && otpTimer > 0) {
+    if (otpTimer != null && otpTimer > 0) {
       interval = setInterval(() => {
-        setOtpTimer(prev => (prev && prev > 0 ? prev - 1 : 0));
+        setOtpTimer(prev => (prev != null && prev > 0 ? prev - 1 : 0));
       }, 1000);
     }
     return () => {
@@ -117,6 +118,14 @@ const LoginDrawer = ({
     };
   }, [otpTimer]);
 
+  useEffect(() => {
+    if (otpTimer !== 0) return;
+    setOtpTimer(null);
+    if (!otpSuccess) {
+      setOtpError(t('login.otpExpired'));
+    }
+  }, [otpTimer, otpSuccess, t]);
+
   useEffect(() => {
     const mediaQuery = window.matchMedia('(max-width: 768px)');
     const onChange = () => setIsMobileViewport(mediaQuery.matches);
@@ -459,34 +468,34 @@ const LoginDrawer = ({
             onSubmit={updateMissingData}
           >
             {needsMissingData.birthDate && (
-              <>
-                <label htmlFor="#birthDate">
+              <Field.Root className="memori--login-drawer--field">
+                <Field.Label htmlFor="birthDate">
                   {t('login.birthDate')}
-                  <Input
-                    id="birthDate"
-                    name="birthDate"
-                    type={
-                      isMobileViewport && !birthDate && !isBirthDateFocused
-                        ? 'text'
-                        : 'date'
-                    }
-                    required
-                    onChange={e => setBirthDate(e.target.value)}
-                    value={birthDate}
-                    placeholder={
-                      isMobileViewport
-                        ? t('login.birthDatePlaceholder') || 'DD/MM/YYYY'
-                        : undefined
-                    }
-                    onFocus={() => setIsBirthDateFocused(true)}
-                    onBlur={() => setIsBirthDateFocused(false)}
-                    autoComplete="bday"
-                  />
-                </label>
-                <p>
-                  <small>{t('login.birthDateHelper')}</small>
-                </p>
-              </>
+                </Field.Label>
+                <Input
+                  id="birthDate"
+                  name="birthDate"
+                  type={
+                    isMobileViewport && !birthDate && !isBirthDateFocused
+                      ? 'text'
+                      : 'date'
+                  }
+                  required
+                  onChange={e => setBirthDate(e.target.value)}
+                  value={birthDate}
+                  placeholder={
+                    isMobileViewport
+                      ? t('login.birthDatePlaceholder') || 'DD/MM/YYYY'
+                      : undefined
+                  }
+                  onFocus={() => setIsBirthDateFocused(true)}
+                  onBlur={() => setIsBirthDateFocused(false)}
+                  autoComplete="bday"
+                />
+                <Field.Description>
+                  {t('login.birthDateHelper')}
+                </Field.Description>
+              </Field.Root>
             )}
 
             {needsMissingData?.tnCAndPPAccepted && (
@@ -638,7 +647,7 @@ const LoginDrawer = ({
               </div>
             )}
 
-            {otpTimer && otpTimer > 0 && !otpSuccess && (
+            {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>
@@ -666,7 +675,7 @@ const LoginDrawer = ({
                   disabled={
                     loading ||
                     isResending ||
-                    (otpTimer && otpTimer > 0) ||
+                    (otpTimer != null && otpTimer > 0) ||
                     !otpEmail
                   }
                   loading={isResending}
@@ -706,13 +715,15 @@ const LoginDrawer = ({
               {t('login.otpEmailDescription')}
             </p>
             <div className={cx('memori--login-drawer--otp-form', { loading })}>
-              <label
-                htmlFor="otp-email"
-                className="memori--login-drawer--otp-label"
-              >
-                <span className="memori--login-drawer--otp-label-text">
-                  {t('login.email')}
-                </span>
+              <Field.Root className="memori--login-drawer--otp-field">
+                <Field.Label
+                  htmlFor="otp-email"
+                  className="memori--login-drawer--otp-label"
+                >
+                  <span className="memori--login-drawer--otp-label-text">
+                    {t('login.email')}
+                  </span>
+                </Field.Label>
                 <div className="memori--login-drawer--otp-input-container">
                   <Input
                     id="otp-email"
@@ -743,7 +754,8 @@ const LoginDrawer = ({
                     </div>
                   )}
                 </div>
-              </label>
+                {otpError ? <Field.Error>{otpError}</Field.Error> : null}
+              </Field.Root>
             </div>
 
             <div className="memori--login-drawer--otp-actions memori--login-drawer--otp-actions-primary">

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

@@ -6,7 +6,7 @@ import MediaItemWidget, { Props } from './MediaItemWidget';
 import './MediaItemWidget.css';
 
 const meta: Meta = {
-  title: 'Media Widget/Media',
+  title: 'Internals/Media',
   component: MediaItemWidget,
   argTypes: {
     translateTo: {
@@ -55,20 +55,6 @@ Default.args = {
       content:
         'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf',
     },
-    {
-      mediumID: '95226d7e-7bae-465e-8b80-995587bb5974',
-      mimeType: 'video/mp4',
-      title: 'Video',
-      url: 'https://www.w3schools.com/html/mov_bbb.mp4',
-      content: 'https://www.w3schools.com/html/mov_bbb.mp4',
-    },
-    {
-      mediumID: '95226d7e-7bae-465e-8b80-995587bb5975',
-      mimeType: 'audio/mpeg',
-      title: 'Audio',
-      url: 'https://www.w3schools.com/html/horse.mp3',
-      content: 'https://www.w3schools.com/html/horse.mp3',
-    },
     {
       mediumID: '95226d7e-7bae-465e-8b80-995587bb5976',
       mimeType: 'application/msword',

package/src/components/MediaWidget/MediaWidget.stories.tsx

@@ -10,7 +10,7 @@ import {
 import './MediaWidget.css';
 
 const meta: Meta = {
-  title: 'Media Widget/Wrapper',
+  title: 'Internals/Media Wrapper',
   component: MediaWidget,
   argTypes: {
     hints: {
@@ -153,50 +153,6 @@ AllMediaTypes.args = {
       title: 'GIF Image',
       url: 'https://picsum.photos/300/200?random=4',
     },
-    // Videos
-    {
-      mediumID: 'video-mp4-1',
-      mimeType: 'video/mp4',
-      title: 'MP4 Video',
-      url: 'https://www.w3schools.com/html/mov_bbb.mp4',
-    },
-    {
-      mediumID: 'video-quicktime-1',
-      mimeType: 'video/quicktime',
-      title: 'QuickTime Video',
-      url: 'https://www.w3schools.com/html/mov_bbb.mp4',
-    },
-    {
-      mediumID: 'video-avi-1',
-      mimeType: 'video/avi',
-      title: 'AVI Video',
-      url: 'https://www.w3schools.com/html/mov_bbb.mp4',
-    },
-    {
-      mediumID: 'video-mpeg-1',
-      mimeType: 'video/mpeg',
-      title: 'MPEG Video',
-      url: 'https://www.w3schools.com/html/mov_bbb.mp4',
-    },
-    // Audio
-    {
-      mediumID: 'audio-mpeg-1',
-      mimeType: 'audio/mpeg',
-      title: 'MPEG Audio',
-      url: 'https://www.w3schools.com/html/horse.mp3',
-    },
-    {
-      mediumID: 'audio-mpeg3-1',
-      mimeType: 'audio/mpeg3',
-      title: 'MPEG3 Audio',
-      url: 'https://www.w3schools.com/html/horse.mp3',
-    },
-    {
-      mediumID: 'audio-wav-1',
-      mimeType: 'audio/wav',
-      title: 'WAV Audio',
-      url: 'https://www.w3schools.com/html/horse.mp3',
-    },
     // Documents
     {
       mediumID: 'doc-pdf-1',

package/src/components/MemoriArtifactSystem/components/ArtifactActions/CopyButton.stories.tsx

@@ -10,7 +10,7 @@ import CopyButtonTest from './test/CopyButtonTest';
 
 
 const meta: Meta<typeof CopyButtonTest> = {
-  title: 'Artifact System/CopyButtonTest',
+  title: 'Internals/CopyButtonTest',
   component: CopyButtonTest,
   parameters: {
     layout: 'fullscreen',

package/src/components/MemoriArtifactSystem/components/ArtifactActions/styles.css

@@ -68,14 +68,14 @@
 }
 
 .memori-copy-button--success {
-    border-color: var(--memori-success-color);
-    background: color-mix(in oklch, var(--memori-main-background) 82%, var(--memori-success-color) 18%);
+    border-color: var(--memori-success);
+    background: color-mix(in oklch, var(--memori-main-background) 82%, var(--memori-success) 18%);
     color: var(--memori-text-color);
 }
 
 .memori-copy-button--error {
-    border-color: var(--memori-error-color);
-    background: color-mix(in oklch, var(--memori-main-background) 84%, var(--memori-error-color) 16%);
+    border-color: var(--memori-error);
+    background: color-mix(in oklch, var(--memori-main-background) 84%, var(--memori-error) 16%);
     color: var(--memori-text-color);
 }
 

package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.css

@@ -21,7 +21,7 @@
  * Split-panel width for ArtifactDrawer.
  * Must stay in sync with HiddenChat's sidebar shift (`right: 55%`).
  * @memori.ai/ui Drawer uses `--memori-modal-size-*` (not the legacy
- * `--memori-drawer--width-*` tokens), and size="md" maps to `--memori-modal-size-md`.
+ * size="md" maps to `--memori-modal-size-md`.
  */
 .memori-drawer--right.memori-drawer--size-md.memori-artifact-panel-drawer {
     --memori-modal-size-md: 55%;
@@ -640,8 +640,31 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
 }
 
 .memori-artifact-drawer--close-icon {
-    width: 18px;
-    height: 18px;
+    width: 16px;
+    height: 16px;
+}
+
+/* Keep close control the same size as other artifact header icons,
+   including Chat stories that do not wrap in .memori-widget. */
+.memori-artifact-drawer--close.memori-icon-button.memori-button {
+    display: inline-flex;
+    width: 2.5rem;
+    min-width: 2.5rem;
+    height: 2.5rem;
+    min-height: 2.5rem;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+}
+
+.memori-artifact-drawer--close .memori-icon-close,
+.memori-artifact-drawer--close svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    fill: none;
+    stroke: currentColor;
 }
 
 /* Content */
@@ -714,8 +737,8 @@ body:has(.memori-artifact-panel-drawer-fullscreen) .memori-drawer__backdrop,
 }
 
 .memori-widget .memori-artifact-drawer--close .memori-icon-close {
-    width: 1.125rem;
-    height: 1.125rem;
+    width: 16px;
+    height: 16px;
     fill: none;
     stroke: currentColor;
 }

package/src/components/MemoriArtifactSystem/components/ArtifactDrawer/ArtifactDrawer.tsx

@@ -270,9 +270,8 @@ const ArtifactDrawer: React.FC<{
                 aria-label={t('artifact.close') || 'Close'}
                 title={t('artifact.close') || 'Close'}
                 className="memori-artifact-drawer--close"
-              >
-                <X className="memori-icon-close" aria-hidden />
-              </IconButton>
+                icon={<X className="memori-icon-close" aria-hidden />}
+              />
             )}
           </>
         )}
@@ -400,9 +399,8 @@ const ArtifactDrawer: React.FC<{
                 aria-label={t('artifact.close') || 'Close'}
                 title={t('artifact.close') || 'Close'}
                 className="memori-artifact-drawer--close"
-              >
-                <X className="memori-icon-close" aria-hidden />
-              </IconButton>
+                icon={<X className="memori-icon-close" aria-hidden />}
+              />
             </div>
           </>
         )}

package/src/components/MemoriArtifactSystem/components/ArtifactHandler/ArtifactHandler.tsx

@@ -562,7 +562,7 @@ const ArtifactHandler: React.FC<ArtifactHandlerProps> = ({
           className="memori-artifact-handler memori-artifact-handler--failed"
           style={{
             opacity: 0.85,
-            border: '1px dashed var(--memori-danger, #ef4444)',
+            border: '1px dashed var(--memori-error, #ef4444)',
             cursor: 'default',
           }}
           role="status"

package/src/components/MemoriArtifactSystem/utils/ArtifactAPI.test.tsx

@@ -275,35 +275,39 @@ describe('ArtifactAPIBridge', () => {
     expect(window.MemoriArtifactAPI).toBeUndefined();
   });
 
-  it('should handle different mime types with correct titles', async () => {
-    renderWithProviders(
-      <MemoriWidget memori={mockMemori} tenantID="test-tenant-id" />
-    );
-
-    const testCases = [
-      { mimeType: 'html', expectedTitle: 'HTML Document' },
-      { mimeType: 'markdown', expectedTitle: 'Markdown Document' },
-      { mimeType: 'javascript', expectedTitle: 'JavaScript Code' },
-      { mimeType: 'python', expectedTitle: 'Python Code' },
-      { mimeType: 'json', expectedTitle: 'JSON Data' },
-      { mimeType: 'css', expectedTitle: 'CSS Stylesheet' },
-      { mimeType: 'typescript', expectedTitle: 'TypeScript Code' },
-      { mimeType: 'xml', expectedTitle: 'XML Document' },
-      { mimeType: 'svg', expectedTitle: 'SVG Image' },
-      { mimeType: 'unknown', expectedTitle: 'Document' },
-    ];
-
-    for (const testCase of testCases) {
-      window.MemoriArtifactAPI!.createAndOpenArtifact(
-        'test content',
-        testCase.mimeType
+  it(
+    'should handle different mime types with correct titles',
+    async () => {
+      renderWithProviders(
+        <MemoriWidget memori={mockMemori} tenantID="test-tenant-id" />
       );
 
-      await waitFor(() => {
-        const state = window.MemoriArtifactAPI!.getState();
-        expect(state.currentArtifact?.title).toBe(testCase.expectedTitle);
-      });
-    }
-  });
+      const testCases = [
+        { mimeType: 'html', expectedTitle: 'HTML Document' },
+        { mimeType: 'markdown', expectedTitle: 'Markdown Document' },
+        { mimeType: 'javascript', expectedTitle: 'JavaScript Code' },
+        { mimeType: 'python', expectedTitle: 'Python Code' },
+        { mimeType: 'json', expectedTitle: 'JSON Data' },
+        { mimeType: 'css', expectedTitle: 'CSS Stylesheet' },
+        { mimeType: 'typescript', expectedTitle: 'TypeScript Code' },
+        { mimeType: 'xml', expectedTitle: 'XML Document' },
+        { mimeType: 'svg', expectedTitle: 'SVG Image' },
+        { mimeType: 'unknown', expectedTitle: 'Document' },
+      ];
+
+      for (const testCase of testCases) {
+        window.MemoriArtifactAPI!.createAndOpenArtifact(
+          'test content',
+          testCase.mimeType
+        );
+
+        await waitFor(() => {
+          const state = window.MemoriArtifactAPI!.getState();
+          expect(state.currentArtifact?.title).toBe(testCase.expectedTitle);
+        });
+      }
+    },
+    15000
+  );
 });
 

package/src/components/MemoriWidget/MemoriUIProvider.contract.test.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import { render, screen, waitFor } from '../../testUtils';
+import {
+  MemoriUIProvider,
+  useMemoriTheme,
+  usePortalContainer,
+} from '@memori.ai/ui';
+
+function Probe() {
+  const portal = usePortalContainer();
+  const theme = useMemoriTheme();
+  return (
+    <div
+      data-testid="probe"
+      data-portal-is-root={
+        portal instanceof HTMLElement &&
+        portal.getAttribute('data-memori-probe-root') === '1'
+          ? 'yes'
+          : 'no'
+      }
+      data-theme-context={theme}
+    />
+  );
+}
+
+function Harness({ theme }: { theme: 'light' | 'dark' }) {
+  const [root, setRoot] = useState<HTMLDivElement | null>(null);
+  return (
+    <div
+      ref={setRoot}
+      data-theme={theme}
+      data-memori-probe-root="1"
+      data-testid="widget-root"
+    >
+      <MemoriUIProvider container={root} theme={theme}>
+        <Probe />
+      </MemoriUIProvider>
+    </div>
+  );
+}
+
+describe('MemoriUIProvider embed contract', () => {
+  it('keeps portal target on the widget root and theme in sync with data-theme', async () => {
+    render(<Harness theme="dark" />);
+
+    const root = screen.getByTestId('widget-root');
+    expect(root).toHaveAttribute('data-theme', 'dark');
+
+    await waitFor(() => {
+      const probe = screen.getByTestId('probe');
+      expect(probe).toHaveAttribute('data-portal-is-root', 'yes');
+      expect(probe).toHaveAttribute('data-theme-context', 'dark');
+    });
+  });
+});