@memori.ai/memori-react 9.0.0-alpha.20 → 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/MediaPreviewModal.test.tsx

@@ -259,9 +259,8 @@ describe('MediaPreviewModal', () => {
       render(
         <MediaPreviewModal medium={medium} onClose={onClose} />
       );
-      const closeWrapper = document.querySelector('.memori-modal__close');
-      expect(closeWrapper).toBeInTheDocument();
-      const closeButton = closeWrapper?.querySelector('button');
+      const closeButton = document.querySelector('.memori-modal__close');
+      expect(closeButton).toBeInTheDocument();
       if (closeButton) {
         fireEvent.click(closeButton);
         expect(onClose).toHaveBeenCalled();

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/ArtifactActions.tsx

@@ -4,16 +4,12 @@
  * Following the project's component patterns and design system
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import cx from 'classnames';
 import { Button, Dropdown } from '@memori.ai/ui';
 import { ArtifactData } from '../../types/artifact.types';
 import {
-  Download,
   Link as LinkIcon,
-  Maximize,
-  Minimize,
   Printer,
   MoreVertical,
 } from 'lucide-react';
@@ -186,7 +182,7 @@ const ArtifactActions: React.FC<{
           loading={loading}
           className="memori-artifact-action-btn"
         />
-       {isMobile && (
+        {isMobile && (
           <Dropdown className="memori-copy-menu-wrapper">
             <Dropdown.Trigger
               showChevron={false}
@@ -202,33 +198,23 @@ const ArtifactActions: React.FC<{
                 </Button>
               )}
             />
-            <Dropdown.Menu className="memori-copy-dropdown" style={{ minWidth: '200px' }}>
-              <div className="memori-copy-dropdown-list">
-                <Button
-                  onClick={handlePrint}
-                  disabled={loading}
-                  className="memori-artifact-action-btn memori-artifact-action-btn--print"
-                  variant="ghost"
-                  icon={<Printer className="memori-artifact-action-icon" />}
-                  title={t('artifact.print') || 'Print'}
-                >
-                  <span className="memori-artifact-action-text">
-                    {t('artifact.print') || 'Print'}
-                  </span>
-                </Button>
-                <Button
-                  onClick={handleOpenExternal}
-                  disabled={loading}
-                  className="memori-artifact-action-btn memori-artifact-action-btn--external"
-                  variant="ghost"
-                  icon={<LinkIcon className="memori-artifact-action-icon" />}
-                  title={t('artifact.external') || 'External'}
-                >
-                  <span className="memori-artifact-action-text">
-                    {t('artifact.external') || 'External'}
-                  </span>
-                </Button>
-              </div>
+            <Dropdown.Menu placement="bottom" align="end" sideOffset={8}>
+              <Dropdown.Item
+                onClick={handlePrint}
+                disabled={loading}
+                icon={<Printer />}
+                label={t('artifact.print') || 'Print'}
+              >
+                {t('artifact.print') || 'Print'}
+              </Dropdown.Item>
+              <Dropdown.Item
+                onClick={handleOpenExternal}
+                disabled={loading}
+                icon={<LinkIcon />}
+                label={t('artifact.external') || 'External'}
+              >
+                {t('artifact.external') || 'External'}
+              </Dropdown.Item>
             </Dropdown.Menu>
           </Dropdown>
         )}

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/components/CopyButtonWithDropdown.tsx

@@ -1,14 +1,13 @@
 /**
  * CopyButtonWithDropdown - Main component with dropdown menu
- * Similar to Claude's copy system with format-specific options using headless-ui
+ * Similar to Claude's copy system with format-specific options
  */
 /* eslint-disable react/prop-types -- props validated by CopyButtonWithDropdownProps (TypeScript) */
 
-import React, { useRef, useEffect, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import cx from 'classnames';
 import { CopyButtonWithDropdownProps, CopyFormat } from '../types';
 import { useCopyArtifact } from '../hooks/useCopyArtifact';
-import CopyMenuItem from './CopyMenuItem';
 import { Button, Dropdown } from '@memori.ai/ui';
 import {
   Copy,
@@ -22,8 +21,20 @@ import {
 import { useTranslation } from 'react-i18next';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
-import { ArtifactData } from '../../../types/artifact.types';
 
+const getCopyActionIcon = (action: CopyFormat['action']) => {
+  switch (action) {
+    case 'pdf':
+    case 'download':
+      return <Download />;
+    case 'print':
+      return <Printer />;
+    case 'link':
+      return <LinkIcon />;
+    default:
+      return <Copy />;
+  }
+};
 
 const CopyButtonWithDropdown: React.FC<CopyButtonWithDropdownProps> = ({
   artifact,
@@ -412,47 +423,35 @@ const CopyButtonWithDropdown: React.FC<CopyButtonWithDropdownProps> = ({
                 </Button>
               )}
             />
-            <Dropdown.Menu className="memori-copy-dropdown">
-              <div className="memori-copy-dropdown-content">
-                <div className="memori-copy-dropdown-list">
-                  {formats.map(format => (
-                    <Dropdown.Item key={format.id}>
-                      <CopyMenuItem
-                        format={format}
-                        onClick={handleFormatSelect}
-                        loading={copyState.loading}
-                        active={false}
-                      />
-                    </Dropdown.Item>
-                  ))}
-                  <Dropdown.Item>
-                    <CopyMenuItem
-                      format={{
-                        id: 'external',
-                        label: t('artifact.external') || 'External',
-                        action: 'link',
-                        mimeType: artifact.mimeType,
-                      }}
-                      onClick={handleOpenExternal}
-                      loading={copyState.loading}
-                      active={false}
-                    />
-                  </Dropdown.Item>
-                  <Dropdown.Item>
-                    <CopyMenuItem
-                      format={{
-                        id: 'print',
-                        label: t('artifact.print') || 'Print',
-                        action: 'print',
-                        mimeType: artifact.mimeType,
-                      }}
-                      onClick={handlePrint}
-                      loading={copyState.loading}
-                      active={false}
-                    />
-                  </Dropdown.Item>
-                </div>
-              </div>
+            <Dropdown.Menu placement="bottom" align="end" sideOffset={8}>
+              {formats.map(format => (
+                <Dropdown.Item
+                  key={format.id}
+                  onClick={() => handleFormatSelect(format)}
+                  disabled={copyState.loading}
+                  icon={getCopyActionIcon(format.action)}
+                  label={format.label}
+                >
+                  {format.label}
+                </Dropdown.Item>
+              ))}
+              <Dropdown.Separator />
+              <Dropdown.Item
+                onClick={handleOpenExternal}
+                disabled={copyState.loading}
+                icon={getCopyActionIcon('link')}
+                label={t('artifact.external') || 'External'}
+              >
+                {t('artifact.external') || 'External'}
+              </Dropdown.Item>
+              <Dropdown.Item
+                onClick={handlePrint}
+                disabled={copyState.loading}
+                icon={getCopyActionIcon('print')}
+                label={t('artifact.print') || 'Print'}
+              >
+                {t('artifact.print') || 'Print'}
+              </Dropdown.Item>
             </Dropdown.Menu>
           </Dropdown>
         )}

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);
 }
 
@@ -175,7 +175,7 @@
 /* Copy Menu Wrapper */
 .memori-copy-menu-wrapper {
     position: relative;
-    z-index: 10001;
+    z-index: 10;
     display: inline-block;
 }
 
@@ -183,96 +183,6 @@
     gap: var(--memori-spacing-sm);
 }
 
-/* Copy Dropdown */
-.memori-copy-dropdown {
-    position: absolute;
-    z-index: 10001;
-    top: 100%;
-    right: 0;
-    /* left: 0; */
-    overflow: hidden;
-    min-width: 280px;
-    max-width: 320px;
-    border: 1px solid var(--memori-copy-border);
-    border: var(--memori-border) solid var(--memori-border-color);
-    border-radius: 0.5rem;
-    margin-top: var(--memori-spacing-xs);
-    background: var(--memori-secondary-background);
-    box-shadow: var(--memori-copy-shadow);
-}
-
-/* Responsive positioning */
-@media (max-width: 640px) {
-    .memori-copy-dropdown {
-        right: 0;
-        left: auto;
-        min-width: 260px;
-        max-width: calc(100vw - var(--memori-spacing-xl));
-    }
-}
-
-/* Headless UI Transition Classes */
-.memori-copy-dropdown-enter {
-    transition: all 0.15s ease-out;
-}
-
-.memori-copy-dropdown-enter-from {
-    opacity: 0;
-    transform: translateY(-8px) scale(0.95);
-}
-
-.memori-copy-dropdown-enter-to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-}
-
-.memori-copy-dropdown-leave {
-    transition: all 0.1s ease-in;
-}
-
-.memori-copy-dropdown-leave-from {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-}
-
-.memori-copy-dropdown-leave-to {
-    opacity: 0;
-    transform: translateY(-8px) scale(0.95);
-}
-
-.memori-copy-dropdown-content {
-    padding: var(--memori-spacing-sm) 0;
-}
-
-.memori-copy-dropdown-header {
-    padding: var(--memori-spacing-sm) var(--memori-spacing-md) var(--memori-spacing-xs);
-    border-bottom: 1px solid var(--memori-copy-border);
-    margin-bottom: var(--memori-spacing-xs);
-}
-
-.memori-copy-dropdown-title {
-    color: var(--memori-text-color);
-    font-size: 0.75rem;
-    font-weight: var(--memori-text-weight-semibold);
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-}
-
-.memori-copy-dropdown-list {
-    max-height: 300px;
-    overflow-y: auto;
-}
-
-.memori-copy-dropdown-empty {
-    padding: var(--memori-spacing-md);
-    text-align: center;
-}
-
-.memori-copy-dropdown-empty-text {
-    color: var(--memori-text-color);
-    font-size: var(--memori-text-size-small);
-}
-
 /* Copy Menu Item */
 .memori-copy-menu-item {
     position: relative;
@@ -441,11 +351,6 @@
 
 /* Responsive Design */
 @media (max-width: 640px) {
-    .memori-copy-dropdown {
-        min-width: 260px;
-        max-width: calc(100vw - var(--memori-spacing-xl));
-    }
-
     .memori-copy-toast {
         right: var(--memori-spacing-md);
         left: var(--memori-spacing-md);
@@ -468,7 +373,6 @@
 /* Print Media Queries */
 @media print {
     .memori-copy-button-wrapper,
-    .memori-copy-dropdown,
     .memori-copy-toast {
         display: none !important;
     }
@@ -480,10 +384,6 @@
         border-width: 2px;
     }
 
-    .memori-copy-dropdown {
-        border-width: 2px;
-    }
-
     .memori-copy-menu-item:hover:not(:disabled) {
         background: var(--memori-copy-surface-pressed);
         color: var(--memori-text-color);
@@ -494,7 +394,6 @@
 @media (prefers-reduced-motion: reduce) {
     .memori-copy-button,
     .memori-copy-menu-item,
-    .memori-copy-dropdown,
     .memori-copy-toast {
         transition: none;
     }
@@ -504,10 +403,6 @@
         animation: none;
     }
 
-    .memori-copy-dropdown {
-        animation: none;
-    }
-
     .memori-copy-toast {
         animation: none;
     }