@memori.ai/memori-react 8.4.0 → 8.4.2

package/src/components/LoginDrawer/LoginDrawer.css

@@ -40,6 +40,22 @@ p.memori--login-drawer--inline-error {
     text-align: center;
 }
 
+.memori--login-drawer--otp-form {
+    display: flex;
+    flex-direction: column;
+    padding: 0 1rem;
+    margin: 0 0 2rem;
+    gap: 1.5rem;
+}
+
+.memori--login-drawer--otp-form label {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    text-align: left;
+}
+
+
 .memori--login-drawer--form label:not(.memori-checkbox) {
     display: flex;
     flex-direction: column;
@@ -141,4 +157,290 @@ h3.memori--login-drawer--edit-account-title {
     font-size: 1.33rem;
     font-weight: 400;
     line-height: 1.2;
+}
+
+/* OTP Login Styles */
+.memori--login-drawer--welcome {
+    padding: 1rem 0.5rem;
+    text-align: center;
+}
+
+.memori--login-drawer--welcome h3 {
+    margin: 0 0 1rem;
+    color: var(--memori-text-color, #333);
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.memori--login-drawer--welcome-description {
+    margin: 0 0 2rem;
+    color: var(--memori-text-secondary, #666);
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+.memori--login-drawer--otp-info {
+    display: flex;
+    flex-direction: column;
+    margin: 0 0 2rem;
+    gap: 1rem;
+    text-align: left;
+}
+
+.memori--login-drawer--otp-info-item {
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+    border: 1px solid var(--memori-border-color, #e9ecef);
+    border-radius: 8px;
+    background: var(--memori-background-light, #f8f9fa);
+    gap: 1rem;
+}
+
+.memori--login-drawer--otp-info-number {
+    display: flex;
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: var(--memori-primary);
+    color: white;
+    font-size: 0.875rem;
+    font-weight: 600;
+}
+
+.memori--login-drawer--start-otp-button {
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+.memori--login-drawer--otp-container {
+    padding: 1rem 0.5rem;
+    text-align: center;
+}
+
+.memori--login-drawer--otp-container h3 {
+    margin: 0 0 1rem;
+    color: var(--memori-text-color, #333);
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.memori--login-drawer--otp-description {
+    margin: 0 0 2rem;
+    color: var(--memori-text-secondary, #666);
+    font-size: 1rem;
+    line-height: 1.5;
+}
+.memori--login-drawer--otp-form label span {
+    color: var(--memori-text-color, #333);
+    font-size: 0.875rem;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.memori--login-drawer--otp-username-input {
+    width: 95%;
+    height: 50px;
+    padding: 0 1rem;
+    border: 2px solid var(--memori-border-color, #e9ecef);
+    border-radius: 8px;
+    background: var(--memori-background, #fff);
+    font-size: 1rem;
+    font-weight: 500;
+    outline: none;
+    text-align: left;
+    transition: all 0.2s ease;
+}
+
+.memori--login-drawer--otp-username-input:focus {
+    border-color: var(--memori-primary);
+    box-shadow: 0 0 0 3px rgba(var(--memori-primary-rgb, 0, 123, 255), 0.1);
+    transform: translateY(-1px);
+}
+
+.memori--login-drawer--otp-username-input::placeholder {
+    color: var(--memori-text-muted, #999);
+    font-weight: 400;
+}
+
+.memori--login-drawer--otp-input {
+    width: 200px;
+    height: 60px;
+    border: 2px solid var(--memori-border-color, #e9ecef);
+    border-radius: 12px;
+    margin: 0 auto;
+    background: var(--memori-background, #fff);
+    font-size: 2rem;
+    font-weight: 600;
+    letter-spacing: 0.5rem;
+    outline: none;
+    text-align: center;
+    transition: all 0.2s ease;
+}
+
+.memori--login-drawer--otp-input:focus {
+    border-color: var(--memori-primary);
+    box-shadow: 0 0 0 3px rgba(var(--memori-primary-rgb, 0, 123, 255), 0.1);
+    transform: scale(1.02);
+}
+
+.memori--login-drawer--otp-input::placeholder {
+    color: var(--memori-text-muted, #999);
+    letter-spacing: 0.5rem;
+}
+
+.memori--login-drawer--otp-input:invalid {
+    border-color: var(--memori-error-color);
+    animation: shake 0.5s ease-in-out;
+}
+
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    25% { transform: translateX(-5px); }
+    75% { transform: translateX(5px); }
+}
+
+.memori--login-drawer--otp-username-input:invalid {
+    border-color: var(--memori-error-color);
+    animation: shake 0.5s ease-in-out;
+}
+
+.memori--login-drawer--otp-timer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--memori-warning-color, #ffc107);
+    border-radius: 8px;
+    margin: 0 0 1.5rem;
+    background: rgba(var(--memori-warning-color-rgb, 255, 193, 7), 0.1);
+    color: var(--memori-warning-color, #ffc107);
+    font-size: 0.875rem;
+    font-weight: 600;
+    gap: 0.5rem;
+}
+
+.memori--login-drawer--otp-timer::before {
+    content: "⏱️";
+    font-size: 1rem;
+}
+
+.memori--login-drawer--otp-actions {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1rem;
+}
+
+.memori--login-drawer--otp-actions .memori-button {
+    min-width: 120px;
+}
+
+.memori--login-drawer--otp-error {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.75rem 1rem;
+    border: 1px solid var(--memori-error-color);
+    border-radius: 8px;
+    margin: 1rem 0 0;
+    animation: slideIn 0.3s ease-out;
+    background: rgba(var(--memori-error-color-rgb, 220, 53, 69), 0.1);
+    color: var(--memori-error-color);
+    font-size: 0.875rem;
+    font-weight: 500;
+    gap: 0.5rem;
+    text-align: center;
+}
+
+.memori--login-drawer--otp-error::before {
+    content: "⚠️";
+    font-size: 1rem;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Loading state for OTP form */
+.memori--login-drawer--otp-form.loading {
+    opacity: 0.7;
+    pointer-events: none;
+}
+
+.memori--login-drawer--otp-form.loading .memori--login-drawer--otp-username-input,
+.memori--login-drawer--otp-form.loading .memori--login-drawer--otp-input {
+    background: var(--memori-background-light, #f8f9fa);
+    cursor: not-allowed;
+}
+
+/* Success state animation */
+@keyframes successPulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+
+.memori--login-drawer--otp-input.success {
+    border-color: var(--memori-success-color, #28a745);
+    animation: successPulse 0.6s ease-in-out;
+    background: rgba(var(--memori-success-color-rgb, 40, 167, 69), 0.1);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .memori--login-drawer--otp-form {
+        padding: 0 0.5rem;
+        gap: 1rem;
+    }
+    
+    .memori--login-drawer--otp-info {
+        gap: 0.75rem;
+    }
+    
+    .memori--login-drawer--otp-info-item {
+        padding: 0.75rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .memori--login-drawer--otp-input {
+        width: 160px;
+        height: 50px;
+        font-size: 1.5rem;
+        letter-spacing: 0.3rem;
+    }
+    
+    .memori--login-drawer--otp-username-input {
+        height: 45px;
+        font-size: 0.9rem;
+    }
+    
+    .memori--login-drawer--otp-actions {
+        flex-direction: column;
+        align-items: center;
+        gap: 0.75rem;
+    }
+    
+    .memori--login-drawer--otp-actions .memori-button {
+        width: 100%;
+        max-width: 200px;
+    }
+    
+    .memori--login-drawer--otp-timer,
+    .memori--login-drawer--otp-error {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.8rem;
+    }
 }

package/src/components/LoginDrawer/LoginDrawer.stories.tsx

@@ -76,3 +76,28 @@ LoggedIn.args = {
   user,
   loginToken: 'token',
 };
+
+export const OtpForm = Template.bind({});
+OtpForm.args = {
+  open: true,
+  // Note: OTP form is shown by default in the new implementation
+  // when user is not logged in and not in signup mode
+};
+
+export const OtpFormWithTimer = Template.bind({});
+OtpFormWithTimer.args = {
+  open: true,
+  // Timer will be shown when OTP form is active
+};
+
+export const OtpFormWithError = Template.bind({});
+OtpFormWithError.args = {
+  open: true,
+  // Error state would be shown during OTP validation
+};
+
+export const OtpFormLoading = Template.bind({});
+OtpFormLoading.args = {
+  open: true,
+  // Loading state would be shown during OTP validation
+};

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

@@ -131,3 +131,59 @@ it('renders LoginDrawer on change password unchanged', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+it('renders LoginDrawer with OTP form unchanged', () => {
+  const { container } = render(
+    <LoginDrawer
+      onClose={jest.fn()}
+      apiClient={memoriApiClient()}
+      tenant={tenant}
+      onLogin={jest.fn()}
+      onLogout={jest.fn()}
+      open
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders LoginDrawer with OTP form and timer unchanged', () => {
+  const { container } = render(
+    <LoginDrawer
+      onClose={jest.fn()}
+      apiClient={memoriApiClient()}
+      tenant={tenant}
+      onLogin={jest.fn()}
+      onLogout={jest.fn()}
+      open
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders LoginDrawer with OTP form and error unchanged', () => {
+  const { container } = render(
+    <LoginDrawer
+      onClose={jest.fn()}
+      apiClient={memoriApiClient()}
+      tenant={tenant}
+      onLogin={jest.fn()}
+      onLogout={jest.fn()}
+      open
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders LoginDrawer with OTP form loading unchanged', () => {
+  const { container } = render(
+    <LoginDrawer
+      onClose={jest.fn()}
+      apiClient={memoriApiClient()}
+      tenant={tenant}
+      onLogin={jest.fn()}
+      onLogout={jest.fn()}
+      open
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/LoginDrawer/LoginDrawer.tsx

@@ -544,4 +544,4 @@ const LoginDrawer = ({
   );
 };
 
-export default LoginDrawer;
+export default LoginDrawer;

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

@@ -57,3 +57,35 @@ exports[`renders LoginDrawer unlogged unchanged 1`] = `
   />
 </div>
 `;
+
+exports[`renders LoginDrawer with OTP form and error unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders LoginDrawer with OTP form and timer unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders LoginDrawer with OTP form loading unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;
+
+exports[`renders LoginDrawer with OTP form unchanged 1`] = `
+<div>
+  <div
+    style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px; display: none;"
+  />
+</div>
+`;

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

@@ -19,7 +19,7 @@
 
 /* Override drawer width for ArtifactDrawer */
 .memori-artifact-panel-drawer {
-    --memori-drawer--width-lg: 50%;
+    --memori-drawer--width-lg: 46%;
 }
 
 /* Main Drawer Container (Mobile Only) */

package/src/components/MemoriWidget/MemoriWidget.tsx

@@ -441,7 +441,7 @@ const MemoriWidget = ({
   showReasoning,
   height = '100vh',
   secret,
-  baseUrl = 'https://aisuru.com',
+  baseUrl = 'https://aisuru-staging.aclambda.online',
   apiURL = 'https://backend-staging.memori.ai',
   engineURL = 'https://engine-staging.memori.ai',
   initialContextVars,

package/src/components/layouts/chat.css

@@ -12,9 +12,6 @@
     flex-direction: column;
 }
 
-.memori-chat-layout--main, .memori-chat-layout--controls{
-    min-height: calc(100% - 25px);
-}
 
 .memori-chat-layout--header {
     text-align: right;
@@ -62,6 +59,8 @@
     z-index: 5;
     overflow: hidden;
     min-width: 0;
+    height: calc(100% - 50px);
+    max-height: calc(100% - 50px);
     flex: 1;
     transition: all 0.05s ease-in-out;
 }
@@ -134,6 +133,10 @@
     bottom: auto;
 }
 
+.memori-chat-layout--controls .memori-chat--wrapper {
+    height: calc(100% - 1rem);
+}
+
 @media (max-width: 870px) {
     .memori-chat-layout .memori--powered-by {
         top: 3.5rem;
@@ -149,9 +152,7 @@
 }
 
 
-.memori-chat-layout--controls .memori-chat--wrapper {
-    height: calc(75vh - 1rem);
-}
+
 
 .memori-chat-layout .memori-chat--content {
     padding: 0;

package/src/index.stories.tsx

@@ -408,5 +408,6 @@ Test.args = {
   layout: 'FULLPAGE',
   uiLang: 'EN',
   spokenLang: 'EN',
+  showLogin: true,
   integrationID: '2b37c25d-8cf9-456f-b9ee-2c27dc4d54fc',
 };

package/src/locales/de.json

@@ -240,6 +240,9 @@
     "logout": "Abmelden",
     "user": "Benutzer",
     "loggedDrawerTitle": "Hallo, {{name}}!",
+    "userNameRequired": "Benutzername erforderlich",
+    "userName": "Benutzername",
+    "userNamePlaceholder": "Geben Sie den Benutzernamen ein",
     "loginDrawerTitle": "Login",
     "signupDrawerTitle": "Melden Sie sich an",
     "newUserSignUp": "Neuer Benutzer?",
@@ -257,6 +260,20 @@
     "otpCode": "Bestätigungscode",
     "resendVerificationCode": "Code erneut senden",
     "resentVerificationCode": "Bestätigungscode gesendet! ",
+    "welcomeTitle": "Willkommen zurück",
+    "welcomeDescription": "Geben Sie Ihren 4-stelligen Bestätigungscode ein, um zu Ihrem Konto fortzufahren",
+    "otpTitle": "Bestätigungscode eingeben",
+    "otpDescription": "Geben Sie den 4-stelligen Code ein, den Sie in Ihrem Konto generiert haben",
+    "otpStep1": "Klicken Sie auf die Schaltfläche unten, um Ihr Konto zu öffnen",
+    "otpStep2": "Generieren Sie einen 4-stelligen Bestätigungscode (60 Sekunden gültig)",
+    "otpStep3": "Kehren Sie hierher zurück und geben Sie den Code ein",
+    "startOtpLogin": "Verifizierung starten",
+    "generateOtp": "Code generieren",
+    "otpTimer": "Code läuft in {{seconds}} Sekunden ab",
+    "otpInvalidFormat": "Bitte geben Sie einen gültigen 4-stelligen Code ein",
+    "otpInvalid": "Ungültiger Bestätigungscode",
+    "otpError": "Fehler bei der Code-Validierung. Bitte versuchen Sie es erneut.",
+    "otpSuccess": "Anmeldung erfolgreich!",
     "password": "Passwort",
     "newPassword": "Neues Passwort",
     "confirmPassword": "Passwort bestätigen",

package/src/locales/en.json

@@ -261,6 +261,9 @@
     "logout": "Logout",
     "user": "User",
     "loggedDrawerTitle": "Hi, {{name}}!",
+    "userNameRequired": "Username required",
+    "userName": "Username",
+    "userNamePlaceholder": "Enter username",
     "loginDrawerTitle": "Login",
     "signupDrawerTitle": "Sign up",
     "newUserSignUp": "New user?",
@@ -278,6 +281,20 @@
     "otpCode": "Verification code",
     "resendVerificationCode": "Resend code",
     "resentVerificationCode": "Confirmation code sent! Please check your email.",
+    "welcomeTitle": "Welcome back",
+    "welcomeDescription": "Enter your 4-digit verification code to continue to your account",
+    "otpTitle": "Enter verification code",
+    "otpDescription": "Enter the 4-digit code you generated in your account",
+    "otpStep1": "Click the button below to open your account",
+    "otpStep2": "Generate a 4-digit verification code (valid for 60 seconds)",
+    "otpStep3": "Return here and enter the code",
+    "startOtpLogin": "Start verification",
+    "generateOtp": "Generate code",
+    "otpTimer": "Code expires in {{seconds}} seconds",
+    "otpInvalidFormat": "Please enter a valid 4-digit code",
+    "otpInvalid": "Invalid verification code",
+    "otpError": "Error validating code. Please try again.",
+    "otpSuccess": "Login successful!",
     "password": "Password",
     "newPassword": "New password",
     "confirmPassword": "Confirm Password",

package/src/locales/es.json

@@ -241,6 +241,9 @@
     "user": "Usuario",
     "loggedDrawerTitle": "Hola, {{name}}!",
     "loginDrawerTitle": "Acceso",
+    "userNameRequired": "Nombre de usuario requerido",
+    "userName": "Nombre de usuario",
+    "userNamePlaceholder": "Ingrese el nombre de usuario",
     "signupDrawerTitle": "Inscribirse",
     "newUserSignUp": "¿Nuevo usuario?",
     "signUp": "¡Inscribirse!",
@@ -257,6 +260,20 @@
     "otpCode": "Código de verificación",
     "resendVerificationCode": "Reenviar código",
     "resentVerificationCode": "¡Código de confirmación enviado! ",
+    "welcomeTitle": "Bienvenido de nuevo",
+    "welcomeDescription": "Ingresa tu código de verificación de 4 dígitos para continuar a tu cuenta",
+    "otpTitle": "Ingresa el código de verificación",
+    "otpDescription": "Ingresa el código de 4 dígitos que generaste en tu cuenta",
+    "otpStep1": "Haz clic en el botón de abajo para abrir tu cuenta",
+    "otpStep2": "Genera un código de verificación de 4 dígitos (válido por 60 segundos)",
+    "otpStep3": "Regresa aquí e ingresa el código",
+    "startOtpLogin": "Iniciar verificación",
+    "generateOtp": "Generar código",
+    "otpTimer": "El código expira en {{seconds}} segundos",
+    "otpInvalidFormat": "Por favor ingresa un código válido de 4 dígitos",
+    "otpInvalid": "Código de verificación inválido",
+    "otpError": "Error al validar el código. Por favor intenta de nuevo.",
+    "otpSuccess": "¡Inicio de sesión exitoso!",
     "password": "Contraseña",
     "newPassword": "Nueva contraseña",
     "confirmPassword": "confirmar Contraseña",

package/src/locales/fr.json

@@ -249,6 +249,9 @@
     "logout": "Déconnexion",
     "user": "Utilisateur",
     "loggedDrawerTitle": "Salut, {{name}}!",
+    "userNameRequired": "Nom d'utilisateur requis",
+    "userName": "Nom d'utilisateur",
+    "userNamePlaceholder": "Inserisci le nom d'utilisateur",
     "loginDrawerTitle": "Se connecter",
     "signupDrawerTitle": "S'inscrire",
     "newUserSignUp": "Nouvel utilisateur ?",
@@ -266,6 +269,20 @@
     "otpCode": "Le code de vérification",
     "resendVerificationCode": "Renvoyer le code",
     "resentVerificationCode": "Code de confirmation envoyé ! ",
+    "welcomeTitle": "Bon retour",
+    "welcomeDescription": "Entrez votre code de vérification à 4 chiffres pour continuer vers votre compte",
+    "otpTitle": "Entrez le code de vérification",
+    "otpDescription": "Entrez le code à 4 chiffres que vous avez généré dans votre compte",
+    "otpStep1": "Cliquez sur le bouton ci-dessous pour ouvrir votre compte",
+    "otpStep2": "Générez un code de vérification à 4 chiffres (valide pendant 60 secondes)",
+    "otpStep3": "Revenez ici et entrez le code",
+    "startOtpLogin": "Commencer la vérification",
+    "generateOtp": "Générer le code",
+    "otpTimer": "Le code expire dans {{seconds}} secondes",
+    "otpInvalidFormat": "Veuillez entrer un code valide à 4 chiffres",
+    "otpInvalid": "Code de vérification invalide",
+    "otpError": "Erreur lors de la validation du code. Veuillez réessayer.",
+    "otpSuccess": "Connexion réussie !",
     "password": "Mot de passe",
     "newPassword": "Nouveau mot de passe",
     "confirmPassword": "Confirmez le mot de passe",

package/src/locales/it.json

@@ -260,6 +260,9 @@
   "login": {
     "login": "Accedi",
     "logout": "Esci",
+    "userNameRequired": "Il nome utente è obbligatorio",
+    "userName": "Nome utente",
+    "userNamePlaceholder": "Inserisci il nome utente",
     "user": "Utente",
     "loggedDrawerTitle": "Ciao, {{name}}!",
     "loginDrawerTitle": "Accedi",
@@ -279,6 +282,20 @@
     "otpCode": "Codice di verifica",
     "resendVerificationCode": "Invia di nuovo",
     "resentVerificationCode": "Codice di verifica inviato! Controlla la tua mail.",
+    "welcomeTitle": "Bentornato",
+    "welcomeDescription": "Inserisci il tuo codice di verifica a 4 cifre per continuare al tuo account",
+    "otpTitle": "Inserisci il codice di verifica",
+    "otpDescription": "Inserisci il codice a 4 cifre che hai generato nel tuo account",
+    "otpStep1": "Clicca il pulsante qui sotto per aprire il tuo account",
+    "otpStep2": "Genera un codice di verifica a 4 cifre (valido per 60 secondi)",
+    "otpStep3": "Torna qui e inserisci il codice",
+    "startOtpLogin": "Inizia verifica",
+    "generateOtp": "Genera codice",
+    "otpTimer": "Il codice scade tra {{seconds}} secondi",
+    "otpInvalidFormat": "Inserisci un codice valido a 4 cifre",
+    "otpInvalid": "Codice di verifica non valido",
+    "otpError": "Errore nella validazione del codice. Riprova.",
+    "otpSuccess": "Login effettuato con successo!",
     "password": "Password",
     "newPassword": "Nuova password",
     "confirmPassword": "Conferma la password",