@memori.ai/memori-react 8.45.5 → 8.45.6

package/esm/components/LoginModal/LoginModal.css

@@ -0,0 +1,270 @@
+/* Login gate modal — content-sized, radii: control 12 / box 20 / modal 28 */
+
+.memori--login-modal.memori-modal,
+.memori--login-modal {
+    --memori-login-modal-radius: var(--memori-radius-overlay, 1.75rem);
+    --memori-login-control-radius: var(--memori-radius-control, 0.75rem);
+    --memori-login-box-radius: var(--memori-radius-surface, 1.25rem);
+}
+
+.memori--login-modal--content,
+.memori--login-modal .memori-modal__popup {
+    max-width: min(420px, calc(100vw - 2rem));
+    padding: 1.5rem 1.5rem 1.25rem;
+    border-radius: var(--memori-login-modal-radius) !important;
+}
+
+.memori--login-modal .memori-modal__content {
+    overflow: visible;
+}
+
+.memori--login-modal--missing.memori--login-modal .memori-modal__popup {
+    display: flex;
+    max-width: min(480px, calc(100vw - 2rem));
+    max-height: min(90vh, 40rem);
+    flex-direction: column;
+}
+
+.memori--login-modal--missing .memori-modal__content {
+    display: flex;
+    overflow: hidden;
+    min-height: 0;
+    max-height: none;
+    flex: 1 1 auto;
+    flex-direction: column;
+}
+
+.memori--login-modal--title,
+.memori--login-modal .memori-modal__title {
+    margin: 0;
+    color: var(--memori-text-color, #1a1a2e);
+    font-size: 1.625rem;
+    font-weight: var(--memori-text-weight-bold, 700);
+    line-height: 1.25;
+    text-align: left;
+}
+
+.memori--login-modal--step {
+    display: flex;
+    flex-direction: column;
+    margin-top: 0.25rem;
+    gap: 1rem;
+}
+
+.memori--login-modal--benefit,
+.memori--login-modal--sent-copy,
+.memori--login-modal--footnote,
+.memori--login-modal--resend {
+    margin: 0;
+    color: color-mix(in oklch, var(--memori-text-color, #1a1a2e), transparent 35%);
+    font-size: 0.9375rem;
+    line-height: 1.45;
+}
+
+.memori--login-modal--footnote,
+.memori--login-modal--resend {
+    font-size: 0.8125rem;
+    text-align: center;
+}
+
+.memori--login-modal--email-row {
+    margin: -0.35rem 0 0;
+    color: var(--memori-text-color, #1a1a2e);
+    font-size: 0.9375rem;
+    line-height: 1.4;
+}
+
+.memori--login-modal--email-value {
+    font-weight: var(--memori-text-weight-bold, 700);
+    overflow-wrap: anywhere;
+}
+
+.memori--login-modal--edit-link {
+    padding: 0;
+    border: none;
+    margin: 0;
+    background: none;
+    color: var(--memori-primary, #6b2d5c);
+    cursor: pointer;
+    font: inherit;
+    font-weight: var(--memori-text-weight-semibold, 600);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+}
+
+.memori--login-modal--edit-link:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+}
+
+.memori--login-modal .memori-field.memori--login-modal--field {
+    display: flex;
+    width: calc(100% - 0.75rem);
+    max-width: calc(100% - 0.75rem);
+    box-sizing: border-box;
+    flex-direction: column;
+    margin-right: auto;
+    margin-left: auto;
+    gap: 0.375rem;
+}
+
+.memori--login-modal--email-input,
+.memori--login-modal--form input {
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: var(--memori-login-control-radius) !important;
+}
+
+.memori--login-modal--email-input.error,
+.memori--login-modal--otp-digit.error {
+    border-color: var(--memori-error, #ef4444) !important;
+}
+
+.memori--login-modal .memori-button.memori--login-modal--primary {
+    width: calc(100% - 0.75rem);
+    max-width: calc(100% - 0.75rem);
+    min-height: 2.75rem;
+    box-sizing: border-box;
+    border-radius: var(--memori-login-control-radius) !important;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.memori--login-modal--otp-fieldset {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+    border: none;
+    margin: 0;
+    gap: 0.5rem;
+}
+
+.memori--login-modal--otp-label {
+    padding: 0;
+    color: var(--memori-text-color, #1a1a2e);
+    font-size: 0.875rem;
+    font-weight: var(--memori-text-weight-semibold, 600);
+}
+
+.memori--login-modal--otp-digits {
+    display: grid;
+    width: 100%;
+    max-width: 16rem;
+    gap: 0.625rem;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.memori--login-modal--otp-digit {
+    width: 100%;
+    height: 3.25rem;
+    border-radius: var(--memori-login-box-radius) !important;
+    font-size: 1.375rem;
+    font-weight: var(--memori-text-weight-bold, 700);
+    text-align: center;
+}
+
+.memori--login-modal--otp-digit.active,
+.memori--login-modal--otp-digit:focus {
+    border-color: var(--memori-primary, #6b2d5c) !important;
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--memori-primary, #6b2d5c), transparent 84%);
+    outline: none;
+}
+
+.memori--login-modal--inline-error {
+    margin: 0;
+    color: var(--memori-error, #b91c1c);
+    font-size: 0.875rem;
+    line-height: 1.35;
+}
+
+.memori--login-modal--missing-data {
+    display: flex;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.memori--login-modal--missing-helper {
+    margin: 0;
+    color: color-mix(in oklch, var(--memori-text-color, #1a1a2e), transparent 30%);
+    font-size: 0.9375rem;
+    line-height: 1.45;
+}
+
+form.memori--login-modal--form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+form.memori--login-modal--form--missing {
+    min-height: 0;
+    flex: 1 1 auto;
+    gap: 0;
+}
+
+.memori--login-modal--form-body {
+    display: flex;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    padding: 0.25rem 0.375rem 0.75rem;
+    gap: 0.875rem;
+    -webkit-overflow-scrolling: touch;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.memori--login-modal--form-footer {
+    flex-shrink: 0;
+    padding: 0.75rem 0.375rem 0.125rem;
+}
+
+.memori--login-modal--consent-block {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.memori-login-modal--consent {
+    width: 100%;
+    margin: 0;
+}
+
+.memori--login-modal--consent-note {
+    margin: 0;
+    color: color-mix(in oklch, var(--memori-text-color, #1a1a2e), transparent 35%);
+    font-size: 0.8125rem;
+    line-height: 1.45;
+}
+
+.memori--login-modal--deep-thought {
+    padding: 0.625rem 0.75rem;
+    border-radius: var(--memori-login-box-radius);
+    background: color-mix(in oklch, var(--memori-text-color, #1a1a2e), transparent 96%);
+}
+
+@media (max-width: 480px) {
+    .memori--login-modal--content,
+    .memori--login-modal .memori-modal__popup {
+        padding: 1.25rem 1rem 1rem;
+    }
+
+    .memori--login-modal--title,
+    .memori--login-modal .memori-modal__title {
+        font-size: 1.5rem;
+    }
+
+    .memori--login-modal--otp-digits {
+        max-width: 100%;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .memori--login-modal * {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+    }
+}

package/esm/components/MemoriWidget/MemoriWidget.js

@@ -36,6 +36,7 @@ import { getErrori18nKey } from '../../helpers/error';
 import { getCredits } from '../../helpers/credits';
 import { sanitizeText } from '../../helpers/sanitizer';
 import { useTTS } from '../../helpers/tts/useTTS';
+import { SpeechRequestError, speechErrorI18nKey, } from '../../helpers/speech/speechRequest';
 import ChatHistoryDrawer from '../ChatHistoryDrawer/ChatHistory';
 import { useSTT } from '../../helpers/stt/useSTT';
 import { useNats } from '../../helpers/nats/useNats';
@@ -716,7 +717,12 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
         }
         return voice;
     };
-    const [sessionId, setSessionId] = useState(initialSessionID);
+    const [sessionId, setSessionIdState] = useState(initialSessionID);
+    const sessionIdRef = useRef(initialSessionID);
+    const setSessionId = (id) => {
+        sessionIdRef.current = id;
+        setSessionIdState(id);
+    };
     const [currentDialogState, _setCurrentDialogState] = useState();
     const setCurrentDialogState = (state) => {
         var _a, _b;
@@ -1121,20 +1127,44 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
             provider: ttsProvider,
             voice: getTTSVoice(userLang || ((_b = (_a = memori.culture) === null || _a === void 0 ? void 0 : _a.split('-')) === null || _b === void 0 ? void 0 : _b[0]) || 'EN', ttsProvider, memori.voiceType),
             tenant: tenantID,
+            sessionId,
+            sessionIdRef,
             region: 'westeurope',
             voiceType: memori.voiceType,
             layout: selectedLayout,
         });
-    }, [ttsProvider, userLang, memori.culture, memori.voiceType, selectedLayout]);
+    }, [
+        ttsProvider,
+        userLang,
+        memori.culture,
+        memori.voiceType,
+        selectedLayout,
+        tenantID,
+        sessionId,
+        sessionIdRef,
+    ]);
     const sttConfig = useMemo(() => ({
         provider: ttsProvider,
         language: getCultureCodeByLanguage(userLang),
         tenant: tenantID,
-    }), [ttsProvider, userLang]);
+        sessionId,
+        sessionIdRef,
+    }), [ttsProvider, userLang, tenantID, sessionId, sessionIdRef]);
+    const reportSpeechError = useCallback((error) => {
+        const key = speechErrorI18nKey(error);
+        const message = key ? String(t(key)) : error.message;
+        if (error instanceof SpeechRequestError &&
+            error.code === 'rate_limited') {
+            toast(message);
+            return;
+        }
+        toast.error(message);
+    }, [t]);
     const { speak: ttsSpeak, stop: ttsStop, isPlaying: isPlayingAudio, speakerMuted, toggleMute, hasUserActivatedSpeak, setHasUserActivatedSpeak, } = useTTS(ttsConfig, {
         apiUrl: `${baseUrl}/api/tts`,
         continuousSpeech: continuousSpeech,
         preview: preview,
+        onError: reportSpeechError,
     }, autoStart, defaultEnableAudio, (_w = defaultSpeakerActive !== null && defaultSpeakerActive !== void 0 ? defaultSpeakerActive : integrationConfig === null || integrationConfig === void 0 ? void 0 : integrationConfig.defaultSpeakerActive) !== null && _w !== void 0 ? _w : true);
     const shouldPlayAudio = (text) => {
         const currentSpeakerMuted = getLocalConfig('muteSpeaker', !defaultEnableAudio);
@@ -1160,6 +1190,7 @@ const MemoriWidget = ({ memori, memoriConfigs, ownerUserID, ownerUserName, tenan
     };
     const { isListening, startRecording, stopRecording, } = useSTT(sttConfig, processSpeechAndSendMessage, {
         apiUrl: `${baseUrl}/api/stt`,
+        onError: reportSpeechError,
     }, defaultEnableAudio);
     const handleSpeak = async (text) => {
         if (!shouldPlayAudio(text)) {