@memori.ai/memori-react 8.6.6 → 8.7.0

package/src/components/ui/Dropdown.css

@@ -0,0 +1,173 @@
+.memori-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.memori-dropdown--trigger {
+  cursor: pointer;
+}
+
+.memori-dropdown--content {
+  position: absolute;
+  z-index: 10001;
+  overflow: hidden;
+  min-width: 280px;
+  max-width: 320px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+  animation: dropdownFadeIn 0.2s ease-out;
+  background: white;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+@keyframes dropdownFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Placement variants */
+.memori-dropdown--content--bottom-right {
+  top: 100%;
+  right: 0;
+  margin-top: 8px;
+}
+
+.memori-dropdown--content--bottom-left {
+  top: 100%;
+  left: 0;
+  margin-top: 8px;
+}
+
+.memori-dropdown--content--top-right {
+  right: 0;
+  bottom: 100%;
+  margin-bottom: 8px;
+}
+
+.memori-dropdown--content--top-left {
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 8px;
+}
+
+/* User profile dropdown specific styles */
+.memori-dropdown--user-profile {
+  padding: 16px;
+  /* border-bottom: 1px solid #f1f5f9; */
+}
+
+.memori-dropdown--user-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.memori-dropdown--avatar {
+  width: 48px;
+  height: 48px;
+  border: 2px solid #e2e8f0;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.memori-dropdown--avatar-placeholder {
+  display: flex;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #e2e8f0;
+  border-radius: 50%;
+  background: var(--memori-primary);
+  color: white;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.memori-dropdown--user-details {
+  min-width: 0;
+  flex: 1;
+}
+
+.memori-dropdown--user-name {
+  overflow: hidden;
+  margin: 0;
+  color: #1e293b;
+  font-size: 14px;
+  font-weight: 600;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.memori-dropdown--user-email {
+  overflow: hidden;
+  margin: 2px 0 0 0;
+  color: #64748b;
+  font-size: 12px;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.memori-dropdown--user-badge {
+  border-radius: 12px;
+  margin-top: 6px;
+  color: rgb(119, 119, 119);
+  font-size: 11px;
+  font-weight: 500;
+  text-align: start;
+}
+
+.memori-dropdown--actions {
+  padding: 8px 0;
+}
+
+.memori-dropdown--action-button {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: 12px 16px;
+  border: none;
+  background: none;
+  color: #374151;
+  cursor: pointer;
+  font-size: 14px;
+  gap: 8px;
+  text-align: left;
+  transition: background-color 0.2s ease;
+}
+
+.memori-dropdown--action-button:hover {
+  background: #f8fafc;
+}
+
+.memori-dropdown--action-button--logout {
+  border-top: 1px solid #f1f5f9;
+  margin-top: 4px;
+  color: #dc2626;
+}
+
+.memori-dropdown--action-button--logout:hover {
+  background: #fef2f2;
+}
+
+.memori-dropdown--action-icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .memori-dropdown--content {
+    min-width: 260px;
+    max-width: 280px;
+  }
+}

package/src/components/ui/Dropdown.tsx

@@ -0,0 +1,63 @@
+import React, { useRef, useEffect, useState } from 'react';
+import cx from 'classnames';
+
+export interface Props {
+  open?: boolean;
+  onClose?: () => void;
+  children?: React.ReactNode;
+  className?: string;
+  trigger?: React.ReactNode;
+  placement?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+}
+
+const Dropdown: React.FC<Props> = ({
+  open = false,
+  onClose,
+  children,
+  className,
+  trigger,
+  placement = 'bottom-right',
+}) => {
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(open);
+
+  useEffect(() => {
+    setIsOpen(open);
+  }, [open]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+        onClose?.();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, onClose]);
+
+  const handleTriggerClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className={cx('memori-dropdown', className)} ref={dropdownRef}>
+      <div className="memori-dropdown--trigger" onClick={handleTriggerClick}>
+        {trigger}
+      </div>
+      {isOpen && (
+        <div className={cx('memori-dropdown--content', `memori-dropdown--content--${placement}`)}>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Dropdown;

package/src/helpers/error.ts

@@ -50,6 +50,9 @@ const errors = {
   SESSION_NOT_FOUND: -101,
   SESSION_IS_NOT_ADMINISTRATIVE: -102,
   SESSION_EXPIRED: -103,
+  SESSION_OTP_NOT_FOUND: -107,
+  SESSION_OTP_EXPIRED: -108,
+  SESSION_MISSING_TEMPORARY_TOKEN: -109,
 
   MEMORI_MISSING_CONFIGURATION: -201,
   MEMORI_CONFIGURATION_NOT_FOUND: -202,

package/src/helpers/stt/useSTT.ts

@@ -83,13 +83,11 @@ async function convertToWav(audioBlob: Blob): Promise<Blob> {
         
         resolve(wavBlob);
       } catch (error) {
-        console.error('Error converting audio to WAV:', error);
         reject(error);
       }
     };
     
     fileReader.onerror = () => {
-      console.error('Failed to read audio file');
       reject(new Error('Failed to read audio file'));
     };
     
@@ -232,15 +230,10 @@ export function useSTT(
             backgroundNoiseRef.current = 0;
             audioActivityHistoryRef.current = [];
             
-          } else {
-            console.warn('🎤 [INIT] AudioContext not supported in this browser');
           }
         } catch (err) {
           // Silence detection initialization failed but we can continue
-          console.error('🎤 [INIT] Silence detection initialization failed:', err);
         }
-      } else {
-        console.log('🎤 [INIT] Continuous recording disabled, skipping silence detection setup');
       }
 
       // Format selection based on provider with Safari compatibility
@@ -316,8 +309,6 @@ export function useSTT(
             if (options.onTranscriptionComplete) {
               options.onTranscriptionComplete(result);
             }
-          } else {
-            console.log('No meaningful text transcribed, skipping message processing');
           }
 
           setRecordingState('idle');
@@ -510,13 +501,10 @@ export function useSTT(
    * Start recording audio
    */
   const startRecording = useCallback(async (): Promise<void> => {
-    console.log('🎤 [START] Starting recording...');
-    console.log('🎤 [START] Mounted:', isMountedRef.current, 'Muted:', microphoneMuted, 'State:', recordingState);
     
     // Prevent immediate restart after stopping (cooldown period)
     const timeSinceLastStop = Date.now() - lastStopTimeRef.current;
     if (timeSinceLastStop < 1000) { // 1 second cooldown
-      console.log('🎤 [START] Too soon after last stop, waiting...', timeSinceLastStop + 'ms');
       return;
     }
     
@@ -524,35 +512,28 @@ export function useSTT(
       microphoneMuted ||
       recordingState === 'recording'
     ) {
-      console.log('🎤 [START] Cannot start recording - conditions not met');
       return;
     }
 
     if (!hasUserActivatedRecord) {
-      console.log('🎤 [START] Setting user activated record flag');
       setHasUserActivatedRecord(true);
     }
 
     try {
       setError(null);
       setRecordingState('recording');
-      console.log('🎤 [START] Recording state set to recording');
 
       // Initialize recording if needed
       if (!mediaRecorderRef.current) {
-        console.log('🎤 [START] MediaRecorder not initialized, initializing...');
         const initialized = await initializeRecording();
         if (!initialized) {
-          console.error('🎤 [START] Failed to initialize recording');
           return;
         }
-        console.log('🎤 [START] Recording initialized successfully');
       }
 
       // Reset chunks and start recording
       chunksRef.current = [];
       isRecordingRef.current = true;
-      console.log('🎤 [START] Reset chunks and set recording flag');
 
       if (
         mediaRecorderRef.current &&
@@ -564,27 +545,17 @@ export function useSTT(
         const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
         const timeslice = isSafari ? 500 : 100; // 500ms for Safari, 100ms for others
         
-        console.log(`🎤 [START] Starting MediaRecorder with ${timeslice}ms timeslice (Safari: ${isSafari})`);
-        console.log('🎤 [START] Continuous recording enabled:', options.continuousRecording);
-        
         mediaRecorderRef.current.start(timeslice);
         setIsListening(true);
-        console.log('🎤 [START] MediaRecorder started, listening state set to true');
         
         // Start silence detection if continuous recording is enabled
         if (options.continuousRecording) {
-          console.log('🎤 [START] Starting silence detection for continuous recording');
           startSilenceDetection();
-        } else {
-          console.log('🎤 [START] Continuous recording disabled, skipping silence detection');
         }
-      } else {
-        console.log('🎤 [START] MediaRecorder not available or not inactive, state:', mediaRecorderRef.current?.state);
       }
     } catch (err) {
       const errorMsg =
         err instanceof Error ? err : new Error('Failed to start recording');
-      console.error('🎤 [START] Error starting recording:', errorMsg);
       setError(errorMsg);
       setRecordingState('error');
       isRecordingRef.current = false;
@@ -606,16 +577,11 @@ export function useSTT(
    * Stop recording audio
    */
   const stopRecording = useCallback((): void => {
-    console.log('🛑 [STOP] Stop recording called');
-    console.log('🛑 [STOP] isRecordingRef:', isRecordingRef.current, 'continuousRecording:', options.continuousRecording);
-    
     if (!isRecordingRef.current) {
-      console.log('🛑 [STOP] Not currently recording, ignoring stop request');
       return;
     }
 
     try {
-      console.log('🛑 [STOP] Setting listening to false');
       setIsListening(false);
       
       // Record the stop time for cooldown
@@ -623,27 +589,18 @@ export function useSTT(
       
       // Stop silence detection only if continuous recording was enabled
       if (options.continuousRecording) {
-        console.log('🛑 [STOP] Stopping silence detection for continuous recording');
         stopSilenceDetection();
-      } else {
-        console.log('🛑 [STOP] Continuous recording disabled, skipping silence detection stop');
       }
 
       if (
         mediaRecorderRef.current &&
         mediaRecorderRef.current.state === 'recording'
       ) {
-        console.log('🛑 [STOP] Stopping MediaRecorder');
         mediaRecorderRef.current.stop();
-      } else {
-        console.log('🛑 [STOP] MediaRecorder not available or not recording, state:', mediaRecorderRef.current?.state);
       }
-      
-      console.log('🛑 [STOP] Recording stop completed');
     } catch (err) {
       const errorMsg =
         err instanceof Error ? err : new Error('Failed to stop recording');
-      console.error('🛑 [STOP] Error stopping recording:', errorMsg);
       setError(errorMsg);
       setRecordingState('error');
       isRecordingRef.current = false;
@@ -658,16 +615,10 @@ export function useSTT(
    * Toggle recording state
    */
   const toggleRecording = useCallback(async (): Promise<void> => {
-    console.log('🔄 [TOGGLE] Toggle recording called, current state:', recordingState);
-    
     if (recordingState === 'recording') {
-      console.log('🔄 [TOGGLE] Currently recording, stopping...');
       stopRecording();
     } else if (recordingState === 'idle') {
-      console.log('🔄 [TOGGLE] Currently idle, starting recording...');
       await startRecording();
-    } else {
-      console.log('🔄 [TOGGLE] Cannot toggle from state:', recordingState);
     }
   }, [recordingState, startRecording, stopRecording]);
 
@@ -712,7 +663,7 @@ export function useSTT(
           audioContextRef.current.close();
         }
       } catch (error) {
-        console.warn('Error closing AudioContext:', error);
+        // Ignore AudioContext close errors
       }
       audioContextRef.current = null;
     }

package/src/helpers/tts/useTTS.ts

@@ -73,6 +73,7 @@ export function useTTS(
   const isSpeakingRef = useRef<boolean>(false);
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const isMountedRef = useRef<boolean>(true);
+  const currentChunkAudioRef = useRef<HTMLAudioElement | null>(null);
   const apiUrl = options.apiUrl || '/api/tts';
 
   // Load viseme data into the queue
@@ -88,7 +89,6 @@ export function useTTS(
         visemeLoadedRef.current = true;
         return true;
       } else {
-        console.warn('[useTTS] No viseme data available');
         return false;
       }
     },
@@ -98,9 +98,6 @@ export function useTTS(
   // Create audio wrapper for viseme processing
   const createAudioWrapper = useCallback(() => {
     if (!audioRef.current) {
-      console.warn(
-        '[useTTS] Cannot create audio wrapper: audio element is null'
-      );
       return null;
     }
 
@@ -159,7 +156,6 @@ export function useTTS(
    * Performs a complete cleanup of audio and viseme resources
    */
   const cleanup = useCallback(() => {
-    console.log('[useTTS] Cleaning up');
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = null;
@@ -177,6 +173,11 @@ export function useTTS(
       audioRef.current = null;
     }
 
+    // Clear chunk audio reference
+    if (currentChunkAudioRef.current) {
+      currentChunkAudioRef.current = null;
+    }
+
     visemeLoadedRef.current = false;
     // Don't reset isSpeakingRef here - let the speak function manage it
   }, [stopProcessing]);
@@ -185,20 +186,23 @@ export function useTTS(
    * Stops audio playback and cleans up
    */
   const stop = useCallback((): void => {
-    console.log('[useTTS] Stopping audio playback');
-
+    // Stop the main audio element
     if (audioRef.current) {
       audioRef.current.pause();
       audioRef.current.currentTime = 0;
     }
 
+    // Stop the current chunk audio element if it exists
+    if (currentChunkAudioRef.current) {
+      currentChunkAudioRef.current.pause();
+      currentChunkAudioRef.current.currentTime = 0;
+      currentChunkAudioRef.current = null;
+    }
+
     setIsPlaying(false);
     cleanup();
-
-    // Only reset speaking flag after cleanup
     isSpeakingRef.current = false;
 
-    // Dispatch custom event to notify MemoriWidget that audio has ended
     const e = new CustomEvent('MemoriAudioEnded');
     document.dispatchEvent(e);
   }, [cleanup]);
@@ -276,6 +280,9 @@ const speakChunk = useCallback(async (chunkText: string): Promise<void> => {
     // Crea un nuovo Audio element per riprodurre il chunk corrente
     const audio = new Audio(audioUrl);
     
+    // Track the current chunk audio element
+    currentChunkAudioRef.current = audio;
+    
     return new Promise<void>((resolve, reject) => {
       // Quando l'audio è pronto per essere riprodotto
       audio.oncanplaythrough = async () => {
@@ -297,12 +304,20 @@ const speakChunk = useCallback(async (chunkText: string): Promise<void> => {
       // Quando l'audio termina di riprodurre
       audio.onended = () => {
         URL.revokeObjectURL(audioUrl);
+        // Clear the current chunk audio reference
+        if (currentChunkAudioRef.current === audio) {
+          currentChunkAudioRef.current = null;
+        }
         // Risolve la Promise quando l'audio termina di riprodurre
         resolve();
       };
 
       audio.onerror = () => {
         URL.revokeObjectURL(audioUrl);
+        // Clear the current chunk audio reference
+        if (currentChunkAudioRef.current === audio) {
+          currentChunkAudioRef.current = null;
+        }
         // Rifiuta la Promise se l'audio fallisce
         reject(new Error('Audio playback failed'));
       };
@@ -326,12 +341,16 @@ const speak = useCallback(
       return;
     }
 
-    // If speaker is muted, completely disable TTS functionality
-    if (speakerMuted) {
-      console.log('[useTTS] TTS disabled - speaker is muted');
-      emitEndSpeakEvent();
-      return;
+  // If speaker is muted, completely disable TTS functionality
+  if (speakerMuted) {
+    // Still set hasUserActivatedSpeak to true when audio is disabled
+    // so the chat can start properly
+    if (!hasUserActivatedSpeak) {
+      setHasUserActivatedSpeak(true);
     }
+    emitEndSpeakEvent();
+    return;
+  }
 
     // Stop any existing playback first (before checking/setting speaking flag)
     if (isPlaying) {
@@ -356,7 +375,6 @@ const speak = useCallback(
 
       // CHUNKING LOGIC: Dividi il testo in chunk se necessario
       const chunks = createChunks(text, 800);
-      console.log(`[useTTS] Processing ${chunks.length} chunks for text length: ${text.length}`);
 
       // Riproduci tutti i chunk in sequenza
       // Il loop itera su ogni chunk di testo che deve essere riprodotto
@@ -366,7 +384,6 @@ const speak = useCallback(
           break; // Interrompe il loop se il componente viene smontato
         }
         
-        console.log(`[useTTS] Playing chunk ${i + 1}/${chunks.length}`);
         // Attende che il chunk corrente venga riprodotto prima di passare al successivo
         await speakChunk(chunks[i]);
         
@@ -388,7 +405,6 @@ const speak = useCallback(
       document.dispatchEvent(e);
       
     } catch (err) {
-      console.error('[useTTS] Error during speech synthesis:', err);
       setIsPlaying(false);
       isSpeakingRef.current = false;
       

package/src/index.stories.tsx

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

package/src/index.test.tsx

@@ -129,3 +129,20 @@ it('renders client with whiteListedDomains on not allowed domains', () => {
   );
   expect(container).toMatchSnapshot();
 });
+
+it('renders client with audio disabled', () => {
+  const { container } = render(
+    <Memori
+      memoriID={memori.memoriID}
+      ownerUserID={memori.ownerUserID}
+      tenantID={tenant.tenantID}
+      integration={{
+        ...integration,
+        customData: JSON.stringify({}),
+      }}
+      enableAudio={false}
+      autoStart={true}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/locales/en.json

@@ -332,6 +332,33 @@
     "otpInvalid": "Invalid verification code",
     "otpError": "Error validating code. Please try again.",
     "otpSuccess": "Login successful!",
+    "otpEmailTitle": "Enter your email",
+    "otpEmailDescription": "Enter your email address to receive a verification code",
+    "otpCodeDescription": "Enter the 4-digit code sent to {{email}}",
+    "emailPlaceholder": "Enter your email",
+    "sendOtp": "Send code",
+    "resendOtp": "Resend code",
+    "resending": "Resending...",
+    "backToEmail": "Back to email",
+    "otpSent": "Verification code sent!",
+    "otpResent": "Code resent successfully!",
+    "otpSendError": "Error sending code. Please try again.",
+    "emailRequired": "Email required",
+    "emailInvalid": "Please enter a valid email address",
+    "otpNotFound": "Verification code not found",
+    "otpExpired": "Verification code has expired",
+    "otpMissing": "Verification code is required",
+    "otpSuccessMessage": "Verification successful! Redirecting...",
+    "otpSuccessDescription": "Your account has been verified successfully. You will be redirected shortly.",
+    "otpHelp": "Enter the 4-digit code from your email",
+    "emailHelp": "We'll send you a verification code",
+    "userFetchError": "Error loading user data. Please try again.",
+    "otpStep1Title": "Enter Email",
+    "otpStep2Title": "Check Email",
+    "otpStep3Title": "Enter Code",
+    "featureFast": "Fast",
+    "featureSecure": "Secure",
+    "featureMobile": "Mobile",
     "password": "Password",
     "newPassword": "New password",
     "confirmPassword": "Confirm Password",
@@ -360,7 +387,24 @@
     "termsOfService": "Terms of Service",
     "pAndCUAccepted": "I accept the terms of service about Deep Thought",
     "editAccount": "Edit account",
-    "save": "Save"
+    "save": "Save",
+    "welcomeUser": "Welcome User",
+    "verified": "Verified",
+    "premiumUser": "Premium",
+    "quickActions": "Quick Actions",
+    "editProfile": "Edit Profile",
+    "notifications": "Notifications",
+    "help": "Help",
+    "logoutConfirm": "Are you sure you want to logout?",
+    "comingSoon": "Coming soon!",
+    "accountOverview": "Account Overview",
+    "notSet": "Not set",
+    "accepted": "Accepted",
+    "pending": "Pending",
+    "termsStatus": "Terms Status",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "advancedFeatures": "Advanced Features"
   },
   "chatLogs": {
     "anyMessage": "Any message",
@@ -439,6 +483,9 @@
     "SESSION_NOT_FOUND": "Session not found",
     "SESSION_IS_NOT_ADMINISTRATIVE": "Non-administrative session",
     "SESSION_EXPIRED": "Session expired",
+    "SESSION_OTP_NOT_FOUND": "Verification code not found",
+    "SESSION_OTP_EXPIRED": "Verification code has expired",
+    "SESSION_MISSING_TEMPORARY_TOKEN": "Verification code is required",
 
     "MEMORI_MISSING_CONFIGURATION": "Agent: missing configuration",
     "MEMORI_CONFIGURATION_NOT_FOUND": "Agent: configuration not found",