@memori.ai/memori-react 8.4.0 → 8.4.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 
 
+## [8.4.2](https://github.com/memori-ai/memori-react/compare/v8.4.1...v8.4.2) (2025-09-12)
+
+
+### Changes
+
+* adjust chat layout styles for improved responsiveness and height calculations ([1e71c3b](https://github.com/memori-ai/memori-react/commit/1e71c3bc0e8aab5e448d28c9f9e1887c3a25769b))
+* remove OTP-related functionality from LoginDrawer ([880f51d](https://github.com/memori-ai/memori-react/commit/880f51d1f989821c263738709625dd58daf719c3))
+
+## [8.4.1](https://github.com/memori-ai/memori-react/compare/v8.4.0...v8.4.1) (2025-09-11)
+
+
+### Features
+
+* enhance OTP login form with username input, validation, and loading states ([833bcf3](https://github.com/memori-ai/memori-react/commit/833bcf35d873ebcfeb3ec8634425b5ec381a881e))
+* implement OTP login functionality in LoginDrawer ([b378ed3](https://github.com/memori-ai/memori-react/commit/b378ed3c8c2821cbd1ae858cb406f8273967fd50))
+
 ## [8.4.0](https://github.com/memori-ai/memori-react/compare/v8.4.0-rc.9...v8.4.0) (2025-09-11)
 
 

package/dist/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/dist/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/dist/components/MemoriWidget/MemoriWidget.js

@@ -159,7 +159,7 @@ let audioContext;
 let memoriPassword;
 let speakerMuted = false;
 let userToken;
-const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenantID, memoriLang, multilingual, integration, layout, customLayout, showShare, preview = false, embed = false, showCopyButton = true, showTranslationOriginal = false, showInputs = true, showDates = false, showContextPerLine = false, showSettings, showTypingText = false, showClear = false, showLogin = false, showUpload, showOnlyLastMessages, showChatHistory, showReasoning, height = '100vh', secret, baseUrl = 'https://aisuru.com', apiURL = 'https://backend-staging.memori.ai', engineURL = 'https://engine-staging.memori.ai', initialContextVars, initialQuestion, ttsProvider, ogImage, sessionID: initialSessionID, tenant, personification, authToken, enableAudio, defaultSpeakerActive = true, disableTextEnteredEvents = false, onStateChange, additionalInfo, additionalSettings, customMediaRenderer, userAvatar, useMathFormatting = false, autoStart = false, applyVarsToRoot = false, showFunctionCache = false, }) => {
+const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenantID, memoriLang, multilingual, integration, layout, customLayout, showShare, preview = false, embed = false, showCopyButton = true, showTranslationOriginal = false, showInputs = true, showDates = false, showContextPerLine = false, showSettings, showTypingText = false, showClear = false, showLogin = false, showUpload, showOnlyLastMessages, showChatHistory, showReasoning, height = '100vh', secret, baseUrl = 'https://aisuru-staging.aclambda.online', apiURL = 'https://backend-staging.memori.ai', engineURL = 'https://engine-staging.memori.ai', initialContextVars, initialQuestion, ttsProvider, ogImage, sessionID: initialSessionID, tenant, personification, authToken, enableAudio, defaultSpeakerActive = true, disableTextEnteredEvents = false, onStateChange, additionalInfo, additionalSettings, customMediaRenderer, userAvatar, useMathFormatting = false, autoStart = false, applyVarsToRoot = false, showFunctionCache = false, }) => {
     var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
     const { t, i18n } = (0, react_i18next_1.useTranslation)();
     const [isClient, setIsClient] = (0, react_1.useState)(false);