@memori.ai/memori-react 8.4.1 → 8.5.0

package/src/components/LoginDrawer/LoginDrawer.tsx

@@ -20,7 +20,6 @@ export interface Props {
   onLogout: () => void;
   tenant: Tenant;
   apiClient: ReturnType<typeof memoriApiClient>;
-  baseURL?: string;
   __TEST__signup?: boolean;
   __TEST__needMissingData?: boolean;
   __TEST__waitingForOtp?: boolean;
@@ -36,7 +35,6 @@ const LoginDrawer = ({
   loginToken,
   tenant,
   apiClient,
-  baseURL,
   __TEST__signup = false,
   __TEST__needMissingData = false,
   __TEST__waitingForOtp = false,
@@ -52,13 +50,6 @@ const LoginDrawer = ({
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  // OTP-related state
-  const [otpCode, setOtpCode] = useState<string>('');
-  const [otpUserName, setOtpUserName] = useState<string>('');
-  const [otpError, setOtpError] = useState<string | null>(null);
-  const [showOtpForm, setShowOtpForm] = useState(false);
-  const [otpTimer, setOtpTimer] = useState<number | null>(null);
-
   const [showSignup, setShowSignup] = useState(__TEST__signup);
   const [userMustChangePwd, setUserMustChangePwd] = useState<User | undefined>(
     __TEST__changePwd
@@ -85,96 +76,6 @@ const LoginDrawer = ({
       : ({} as any)
   );
 
-  // OTP timer effect
-  useEffect(() => {
-    let interval: NodeJS.Timeout;
-    if (otpTimer && otpTimer > 0) {
-      interval = setInterval(() => {
-        setOtpTimer(prev => (prev && prev > 0 ? prev - 1 : 0));
-      }, 1000);
-    }
-    return () => {
-      if (interval) clearInterval(interval);
-    };
-  }, [otpTimer]);
-
-  // OTP validation function
-  const validateOtp = async (otp: string) => {
-    if (!otp || otp.length !== 4) {
-      setOtpError(t('login.otpInvalidFormat'));
-      return;
-    }
-
-    if (!otpUserName || otpUserName.trim().length === 0) {
-      setOtpError(t('login.userNameRequired'));
-      return;
-    }
-
-    setLoading(true);
-    setOtpError(null);
-
-    try {
-      const response = await fetch(`${baseURL}/api/validate-otp`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          otp: otp,
-          userName: otpUserName.trim(),
-        }),
-      });
-
-      const data = await response.json();
-
-      if (response.status == 200 && data.user && data.loginToken) {
-        toast.success(t('login.otpSuccess'));
-        setShowOtpForm(false);
-        setOtpCode('');
-        setOtpUserName('');
-
-        if (!data.user?.tnCAndPPAccepted || !data.user?.birthDate) {
-          setNeedsMissingData({
-            token: data.loginToken,
-            birthDate: !data.user.birthDate,
-            tnCAndPPAccepted: !data.user.tnCAndPPAccepted,
-          });
-        } else {
-          onLogin(data.user as User, data.loginToken);
-        }
-      } else {
-        setOtpError(data.resultMessage || t('login.otpInvalid'));
-      }
-    } catch (err) {
-      console.error('[OTP VALIDATION]', err);
-      setOtpError(t('login.otpError'));
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // Handle OTP input change
-  const handleOtpChange = (value: string) => {
-    const numericValue = value.replace(/\D/g, '').slice(0, 4);
-    setOtpCode(numericValue);
-    setOtpError(null);
-
-    if (numericValue.length === 4 && otpUserName.trim().length > 0) {
-      validateOtp(numericValue);
-    }
-  };
-
-  // Handle username input change
-  const handleUserNameChange = (value: string) => {
-    setOtpUserName(value);
-    setOtpError(null);
-  };
-
-  // Start OTP timer
-  const startOtpTimer = () => {
-    setOtpTimer(60);
-  };
-
   const login = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const form = e.currentTarget as HTMLFormElement;
@@ -578,135 +479,59 @@ const LoginDrawer = ({
         <SignupForm
           tenant={tenant}
           apiClient={apiClient}
-          onLogin={(_user: User, token: string) => {
-            // Force all signup users to go through missing data flow
-            // This ensures consistent user experience and data collection
-            setNeedsMissingData({
-              token: token,
-              birthDate: true, // Always require birth date for new users
-              tnCAndPPAccepted: true, // Always require terms acceptance for new users
-            });
-          }}
+          onLogin={onLogin}
           goToLogin={() => setShowSignup(false)}
           __TEST__waitingForOtp={__TEST__waitingForOtp}
         />
-      ) : showOtpForm ? (
+      ) : (
         <>
-          <div className="memori--login-drawer--otp-container">
-            <h3>{t('login.otpTitle')}</h3>
-            <p className="memori--login-drawer--otp-description">
-              {t('login.otpDescription')}
-            </p>
+          <form className="memori--login-drawer--form" onSubmit={login}>
+            <label htmlFor="#userNameOrEmail">
+              {t('login.userNameOrEmail')}
+              <input
+                id="userNameOrEmail"
+                name="userNameOrEmail"
+                required
+                autoComplete="email"
+                placeholder="Username/email"
+              />
+            </label>
 
-            <div className={cx('memori--login-drawer--otp-form', { loading })}>
-              <label htmlFor="otp-username">
-                <span>{t('login.userName')}</span>
-                <input
-                  id="otp-username"
-                  type="text"
-                  className="memori--login-drawer--otp-username-input"
-                  value={otpUserName}
-                  onChange={e => handleUserNameChange(e.target.value)}
-                  placeholder={t('login.userName') || 'Username'}
-                  required
-                  autoComplete="username"
-                  disabled={loading}
-                />
-              </label>
-
-              <label htmlFor="otp-code">
-                <span>{t('login.otpCode')}</span>
-                <input
-                  id="otp-code"
-                  type="text"
-                  className={cx('memori--login-drawer--otp-input', {
-                    success: otpCode.length === 4 && !otpError,
-                  })}
-                  value={otpCode}
-                  onChange={e => handleOtpChange(e.target.value)}
-                  placeholder="0000"
-                  maxLength={4}
-                  autoComplete="one-time-code"
-                  required
-                  disabled={loading}
-                />
-              </label>
-            </div>
-
-            {otpTimer && otpTimer > 0 && (
-              <p className="memori--login-drawer--otp-timer">
-                {t('login.otpTimer', { seconds: otpTimer })}
-              </p>
-            )}
+            <label htmlFor="#password">
+              Password
+              <input
+                id="password"
+                name="password"
+                type="password"
+                required
+                autoComplete="password"
+                placeholder="Password"
+              />
+            </label>
 
-            <div className="memori--login-drawer--otp-actions">
-              <Button
-                outlined
-                onClick={() => {
-                  setShowOtpForm(false);
-                  setOtpCode('');
-                  setOtpUserName('');
-                  setOtpError(null);
-                }}
-              >
-                {t('login.backToLogin')}
-              </Button>
-
-              <Button
-                primary
-                onClick={() => {
-                  window.open(
-                    'http://localhost:3000/it/account?t=account',
-                    '_blank'
-                  );
-                  startOtpTimer();
-                }}
-              >
-                {t('login.generateOtp')}
-              </Button>
-            </div>
-
-            {otpError && (
-              <p role="alert" className="memori--login-drawer--otp-error">
-                {otpError}
-              </p>
-            )}
-          </div>
-        </>
-      ) : (
-        <>
-          <div className="memori--login-drawer--welcome">
-            <h3>{t('login.welcomeTitle')}</h3>
-            <p className="memori--login-drawer--welcome-description">
-              {t('login.welcomeDescription')}
-            </p>
+            <Button htmlType="submit" primary loading={loading}>
+              {t('login.login')}
+            </Button>
 
-            <div className="memori--login-drawer--otp-info">
-              <div className="memori--login-drawer--otp-info-item">
-                <span className="memori--login-drawer--otp-info-number">1</span>
-                <span>{t('login.otpStep1')}</span>
-              </div>
-              <div className="memori--login-drawer--otp-info-item">
-                <span className="memori--login-drawer--otp-info-number">2</span>
-                <span>{t('login.otpStep2')}</span>
-              </div>
-              <div className="memori--login-drawer--otp-info-item">
-                <span className="memori--login-drawer--otp-info-number">3</span>
-                <span>{t('login.otpStep3')}</span>
+            {!tenant?.disableRegistration ? (
+              <p className="memori--login-drawer--signup">
+                {t('login.newUserSignUp')}{' '}
+                <Button outlined onClick={() => setShowSignup(true)}>
+                  {t('login.signUp')}
+                </Button>
+              </p>
+            ) : tenant.adminEmail ? (
+              <div className="memori--login-drawer--signup">
+                <p>{t('login.registrationDisabled')}</p>
+                <p>
+                  {t('login.contactAdmin')}:{' '}
+                  <a href={`mailto:${tenant.adminEmail}`}>
+                    {tenant.adminEmail}
+                  </a>
+                </p>
               </div>
-            </div>
-
-            <Button
-              primary
-              onClick={() => {
-                setShowOtpForm(true);
-                startOtpTimer();
-              }}
-              className="memori--login-drawer--start-otp-button"
-            >
-              {t('login.startOtpLogin')}
-            </Button>
-          </div>
+            ) : null}
+          </form>
 
           {error && (
             <p role="alert" className="memori--login-drawer--error">
@@ -719,4 +544,4 @@ const LoginDrawer = ({
   );
 };
 
-export default LoginDrawer;
+export default LoginDrawer;

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

@@ -91,10 +91,6 @@
     display: none;
   }
   
-  .memori-artifact-action-text {
-    display: none;
-  }
-  
   .memori-artifact-action-btn {
     min-width: 2.5rem;
     justify-content: center;

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

@@ -16,7 +16,7 @@ import FullscreenExit from '../../../icons/FullscreenExit';
 import PrintIcon from '../../../icons/Print';
 import { CopyButtonWithDropdown } from './';
 import { Menu, Transition } from '@headlessui/react';
-import MenuHorizontal from '../../../icons/MenuHorizontal';
+import MenuVertical from '../../../icons/MenuVertical';
 
 const ArtifactActions: React.FC<{
   artifact: ArtifactData;
@@ -25,6 +25,7 @@ const ArtifactActions: React.FC<{
   onPrint: () => void;
   onOpenExternal: () => void;
   loading: boolean;
+  isMobile?: boolean;
 }> = ({
   artifact,
   onCopy,
@@ -32,6 +33,7 @@ const ArtifactActions: React.FC<{
   onPrint,
   onOpenExternal,
   loading = false,
+  isMobile = false,
 }) => {
   const { t } = useTranslation();
 
@@ -183,19 +185,19 @@ const ArtifactActions: React.FC<{
           loading={loading}
           className="memori-artifact-action-btn"
         />
-        <Menu as="div" className="memori-copy-menu-wrapper">
+       {isMobile && <Menu as="div" className="memori-copy-menu-wrapper">
           <Menu.Button as="div" className="memori-copy-button-trigger">
             <Button
               disabled={loading}
               className={cx(
                 'memori-button',
-                'memori-button--circle',
+                'memori-button--more-options',
                 'memori-button--icon-only'
               )}
               ghost
               title="More copy options"
             >
-              <MenuHorizontal className="memori-artifact-action-icon" />
+              <MenuVertical className="memori-artifact-action-icon" />
             </Button>
           </Menu.Button>
 
@@ -239,7 +241,7 @@ const ArtifactActions: React.FC<{
               </div>
             </Menu.Items>
           </Transition>
-        </Menu>
+        </Menu>}
       </div>
     </div>
   );

package/src/components/MemoriArtifactSystem/components/ArtifactActions/components/CopyButtonWithDropdown.tsx

@@ -14,12 +14,16 @@ import Copy from '../../../../icons/Copy';
 import ChevronDown from '../../../../icons/ChevronDown';
 import ThumbUp from '../../../../icons/ThumbUp';
 import Alert from '../../../../icons/Alert';
+import { useTranslation } from 'react-i18next';
+import Link from '../../../../icons/Link';
+import PrintIcon from '../../../../icons/Print';
 
 const CopyButtonWithDropdown: React.FC<CopyButtonWithDropdownProps> = ({
   artifact,
   onCopy,
   onDownload,
   onPrint,
+  onOpenExternal,
   loading = false,
   className,
   disabled = false,
@@ -30,6 +34,7 @@ const CopyButtonWithDropdown: React.FC<CopyButtonWithDropdownProps> = ({
     onDownload,
     onPrint
   );
+  const { t } = useTranslation();
 
   /**
    * Handle format selection from dropdown
@@ -38,6 +43,34 @@ const CopyButtonWithDropdown: React.FC<CopyButtonWithDropdownProps> = ({
     await handleCopy(format);
   };
 
+  /**
+   * Get MIME type string for downloads
+   */
+  const getMimeTypeString = useCallback((mimeType: string): string => {
+    const mimeTypes: Record<string, string> = {
+      html: 'text/html',
+      json: 'application/json',
+      markdown: 'text/markdown',
+      css: 'text/css',
+      javascript: 'text/javascript',
+      typescript: 'text/typescript',
+      svg: 'image/svg+xml',
+      xml: 'text/xml',
+      text: 'text/plain',
+      python: 'text/x-python',
+      java: 'text/x-java',
+      cpp: 'text/x-c++',
+      csharp: 'text/x-csharp',
+      php: 'text/x-php',
+      ruby: 'text/x-ruby',
+      go: 'text/x-go',
+      rust: 'text/x-rust',
+      yaml: 'text/yaml',
+      sql: 'text/x-sql',
+    };
+    return mimeTypes[mimeType] || 'text/plain';
+  }, []);
+
   /**
    * Get button content based on state
    */
@@ -46,7 +79,9 @@ const CopyButtonWithDropdown: React.FC<CopyButtonWithDropdownProps> = ({
       return (
         <>
           <ThumbUp className="memori-copy-button-icon memori-copy-button-icon--success" />
-          <span className="memori-copy-button-text">Copied!</span>
+          <span className="memori-copy-button-text">
+            {t('artifact.copied') || 'Copied!'}
+          </span>
         </>
       );
     }
@@ -55,7 +90,9 @@ const CopyButtonWithDropdown: React.FC<CopyButtonWithDropdownProps> = ({
       return (
         <>
           <Alert className="memori-copy-button-icon memori-copy-button-icon--error" />
-          <span className="memori-copy-button-text">Error</span>
+          <span className="memori-copy-button-text">
+            {t('artifact.error') || 'Error'}
+          </span>
         </>
       );
     }
@@ -68,8 +105,8 @@ const CopyButtonWithDropdown: React.FC<CopyButtonWithDropdownProps> = ({
           </div>
           <span className="memori-copy-button-text">
             {copyState.activeFormat === 'pdf'
-              ? 'Generating PDF...'
-              : 'Copying...'}
+              ? t('artifact.generatingPdf') || 'Generating PDF...'
+              : t('artifact.copying') || 'Copying...'}
           </span>
         </>
       );
@@ -78,11 +115,94 @@ const CopyButtonWithDropdown: React.FC<CopyButtonWithDropdownProps> = ({
     return (
       <>
         <Copy className="memori-copy-button-icon" />
-        <span className="memori-copy-button-text">Copy</span>
+        <span className="memori-copy-button-text">
+          {t('artifact.copy') || 'Copy'}
+        </span>
       </>
     );
   };
 
+  /**
+   * Handle print action
+   */
+  const handlePrint = useCallback(() => {
+    try {
+      const printWindow = window.open('', '_blank');
+      if (!printWindow) {
+        alert('Popup blocked! Please enable popups to print the artifact.');
+        return;
+      }
+
+      let printContent: string;
+      if (artifact.mimeType === 'html') {
+        printContent = artifact.content;
+      } else {
+        printContent = `
+            <!DOCTYPE html>
+            <html>
+            <head>
+              <title>Artifact - ${artifact.mimeType.toUpperCase()}</title>
+              <style>
+                body { 
+                  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; 
+                  white-space: pre-wrap; 
+                  margin: 20px; 
+                  line-height: 1.4;
+                }
+                @media print { 
+                  body { margin: 0; } 
+                }
+              </style>
+            </head>
+            <body>${artifact.content
+              .replace(/</g, '&lt;')
+              .replace(/>/g, '&gt;')}</body>
+            </html>
+          `;
+      }
+
+      printWindow.document.write(printContent);
+      printWindow.document.close();
+
+      setTimeout(() => {
+        printWindow.print();
+        printWindow.close();
+      }, 500);
+
+      onPrint?.();
+    } catch (error) {
+      console.error('Print failed:', error);
+    }
+  }, [artifact, onPrint]);
+
+  /**
+   * Handle external open action
+   */
+  const handleOpenExternal = useCallback(() => {
+    try {
+      const mimeType = getMimeTypeString(artifact.mimeType);
+      const blob = new Blob([artifact.content], { type: mimeType });
+      const url = URL.createObjectURL(blob);
+
+      const externalWindow = window.open(url, '_blank');
+      if (!externalWindow) {
+        alert(
+          'Popup blocked! Please enable popups to open the artifact in a new window.'
+        );
+        return;
+      }
+
+      // Cleanup URL after a delay
+      setTimeout(() => {
+        URL.revokeObjectURL(url);
+      }, 60000);
+
+      onOpenExternal?.();
+    } catch (error) {
+      console.error('External open failed:', error);
+    }
+  }, [artifact, getMimeTypeString, onOpenExternal]);
+
   /**
    * Get button title/tooltip
    */
@@ -157,12 +277,6 @@ const CopyButtonWithDropdown: React.FC<CopyButtonWithDropdownProps> = ({
                 >
                   <Menu.Items className="memori-copy-dropdown">
                     <div className="memori-copy-dropdown-content">
-                      <div className="memori-copy-dropdown-header">
-                        <span className="memori-copy-dropdown-title">
-                          Copy as
-                        </span>
-                      </div>
-
                       <div className="memori-copy-dropdown-list">
                         {formats.map(format => (
                           <Menu.Item key={format.id}>
@@ -176,6 +290,29 @@ const CopyButtonWithDropdown: React.FC<CopyButtonWithDropdownProps> = ({
                             )}
                           </Menu.Item>
                         ))}
+                        <CopyMenuItem
+                          format={{
+                            id: 'external',
+                            label: t('artifact.external') || 'External',
+                            action: 'link',
+                            mimeType: artifact.mimeType,
+                          }}
+                          onClick={handleOpenExternal}
+                          loading={copyState.loading}
+                          active={false}
+                        />
+                        <CopyMenuItem
+                          format={{
+                            id: 'print',
+                            label: t('artifact.print') || 'Print',
+                            action: 'print',
+                            mimeType: artifact.mimeType,
+                          }}
+                          onClick={handlePrint}
+                          loading={copyState.loading}
+                          active={false}
+                        />
+
                       </div>
                     </div>
                   </Menu.Items>
@@ -185,7 +322,6 @@ const CopyButtonWithDropdown: React.FC<CopyButtonWithDropdownProps> = ({
           </Menu>
         )}
       </div>
-
     </div>
   );
 };

package/src/components/MemoriArtifactSystem/components/ArtifactActions/components/CopyMenuItem.tsx

@@ -9,6 +9,7 @@ import { CopyMenuItemProps } from '../types';
 import Copy from '../../../../icons/Copy';
 import Download from '../../../../icons/Download';
 import PrintIcon from '../../../../icons/Print';
+import Link from '../../../../icons/Link';
 
 const CopyMenuItem: React.FC<CopyMenuItemProps & { active?: boolean }> = ({
   format,
@@ -37,6 +38,8 @@ const CopyMenuItem: React.FC<CopyMenuItemProps & { active?: boolean }> = ({
         return <Download className="memori-copy-menu-item-icon" />;
       case 'print':
         return <PrintIcon className="memori-copy-menu-item-icon" />;
+      case 'link':
+        return <Link className="memori-copy-menu-item-icon" />;
       default:
         return <Copy className="memori-copy-menu-item-icon" />;
     }