fix: risolti problemi con la chat vocale e messo il tutorial dopo il login

Author: Gabry848

src/components/BotChat/VoiceChatModal.tsx

@@ -249,6 +249,25 @@ const VoiceChatModal: React.FC<VoiceChatModalProps> = ({
   const stateTextOpacity = useRef(new Animated.Value(1)).current;
   const prevStateRef = useRef(state);
 
+  // Storico errori — persiste anche quando state cambia
+  const [errorLog, setErrorLog] = useState<string[]>([]);
+  const prevErrorRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (error && error !== prevErrorRef.current) {
+      prevErrorRef.current = error;
+      setErrorLog(prev => [...prev, error]);
+      console.log('[VoiceChatModal] Errore ricevuto:', error);
+    }
+  }, [error]);
+
+  // Reset log quando il modal si chiude
+  useEffect(() => {
+    if (!visible) {
+      setErrorLog([]);
+      prevErrorRef.current = null;
+    }
+  }, [visible]);
+
   // Gestione connessione
   const handleConnect = useCallback(async () => {
     if (!hasPermissions) {
@@ -287,9 +306,12 @@ const VoiceChatModal: React.FC<VoiceChatModalProps> = ({
     }
   }, [visible, state, handleConnect]);
 
-  // Cleanup quando il modal si chiude
+  // Cleanup quando il modal si chiude (solo dopo la prima apertura, non al mount iniziale)
+  const hasEverOpenedRef = useRef(false);
   useEffect(() => {
-    if (!visible) {
+    if (visible) {
+      hasEverOpenedRef.current = true;
+    } else if (hasEverOpenedRef.current) {
       disconnect();
     }
   }, [visible, disconnect]);
@@ -458,9 +480,15 @@ const VoiceChatModal: React.FC<VoiceChatModalProps> = ({
             </Animated.View>
           )}
 
-          {/* Errore */}
-          {state === 'error' && error && (
-            <Text style={styles.errorText}>{error}</Text>
+          {/* Log errori — sempre visibile quando presenti */}
+          {errorLog.length > 0 && (
+            <View style={styles.errorLog}>
+              {errorLog.map((msg, i) => (
+                <Text key={i} style={styles.errorLogText}>
+                  {'\u25CF'} {msg}
+                </Text>
+              ))}
+            </View>
           )}
         </View>
 
@@ -696,6 +724,21 @@ const styles = StyleSheet.create({
     textAlign: "center",
     paddingHorizontal: 24,
   },
+  errorLog: {
+    marginTop: 12,
+    width: "100%",
+    backgroundColor: "rgba(255, 69, 58, 0.07)",
+    borderRadius: 12,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    gap: 4,
+  },
+  errorLogText: {
+    fontSize: 12,
+    color: "#FF453A",
+    fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace",
+    lineHeight: 18,
+  },
 
   // Control bar
   controlBar: {

src/contexts/TutorialContext.tsx

@@ -16,6 +16,7 @@ export interface TutorialContextType {
   startTutorial: () => void;
   closeTutorial: () => void;
   skipTutorial: () => void;
+  triggerPostLoginTutorial: () => Promise<void>;
 }
 
 const TutorialContext = createContext<TutorialContextType | undefined>(
@@ -27,22 +28,18 @@ export const TutorialProvider: React.FC<{ children: React.ReactNode }> = ({
 }) => {
   const [isTutorialVisible, setIsTutorialVisible] = useState(false);
 
-  // Check if tutorial should auto-start on first launch
-  React.useEffect(() => {
-    const checkTutorialStatus = async () => {
-      try {
-        const status = await AsyncStorage.getItem(TUTORIAL_STORAGE_KEY);
-        const hasCompleted = status === "true" || status === "skipped";
+  // Mostra il tutorial solo dopo il login, se non è già stato completato
+  const triggerPostLoginTutorial = useCallback(async () => {
+    try {
+      const status = await AsyncStorage.getItem(TUTORIAL_STORAGE_KEY);
+      const hasCompleted = status === "true" || status === "skipped";
 
-        if (!hasCompleted) {
-          setIsTutorialVisible(true);
-        }
-      } catch (error) {
-        console.error("[TUTORIAL] Error checking tutorial status:", error);
+      if (!hasCompleted) {
+        setIsTutorialVisible(true);
       }
-    };
-
-    checkTutorialStatus();
+    } catch (error) {
+      console.error("[TUTORIAL] Error checking tutorial status:", error);
+    }
   }, []);
 
   const startTutorial = useCallback(() => {
@@ -77,6 +74,7 @@ export const TutorialProvider: React.FC<{ children: React.ReactNode }> = ({
         startTutorial,
         closeTutorial,
         skipTutorial,
+        triggerPostLoginTutorial,
       }}
     >
       {children}
@@ -98,6 +96,8 @@ export const useTutorialContext = () => {
         console.warn("[TUTORIAL] closeTutorial called but context not available"),
       skipTutorial: () =>
         console.warn("[TUTORIAL] skipTutorial called but context not available"),
+      triggerPostLoginTutorial: async () =>
+        console.warn("[TUTORIAL] triggerPostLoginTutorial called but context not available"),
     };
   }
   return context;

src/hooks/useVoiceChat.ts

@@ -106,9 +106,32 @@ export function useVoiceChat() {
   }, []);
 
   /**
-   * Callback per gestire i messaggi WebSocket
+   * Ref stabile per le callback WebSocket.
+   * Viene aggiornato ad ogni render in modo che VoiceBotWebSocket usi sempre
+   * le callback correnti, anche dopo chiusura e riapertura del modal.
+   * Questo risolve il problema "schermata statica ai numeri pari" causato da
+   * closure stale catturate in initialize() al primo render.
    */
-  const websocketCallbacks: VoiceChatCallbacks = {
+  const websocketCallbacksRef = useRef<VoiceChatCallbacks>({});
+
+  // Proxy stabile passato al costruttore VoiceBotWebSocket: delega sempre al ref corrente
+  const stableCallbacks = useRef<VoiceChatCallbacks>({
+    onConnectionOpen:       (...args) => websocketCallbacksRef.current.onConnectionOpen?.(...args),
+    onAuthenticationSuccess:(...args) => websocketCallbacksRef.current.onAuthenticationSuccess?.(...args),
+    onReady:                (...args) => websocketCallbacksRef.current.onReady?.(...args),
+    onAuthenticationFailed: (...args) => websocketCallbacksRef.current.onAuthenticationFailed?.(...args),
+    onConnectionClose:      (...args) => websocketCallbacksRef.current.onConnectionClose?.(...args),
+    onStatus:               (...args) => websocketCallbacksRef.current.onStatus?.(...args),
+    onAudioChunk:           (...args) => websocketCallbacksRef.current.onAudioChunk?.(...args),
+    onTranscript:           (...args) => websocketCallbacksRef.current.onTranscript?.(...args),
+    onToolCall:             (...args) => websocketCallbacksRef.current.onToolCall?.(...args),
+    onToolOutput:           (...args) => websocketCallbacksRef.current.onToolOutput?.(...args),
+    onDone:                 (...args) => websocketCallbacksRef.current.onDone?.(...args),
+    onError:                (...args) => websocketCallbacksRef.current.onError?.(...args),
+  }).current;
+
+  // Aggiorna il ref ad ogni render con le callback che chiudono su stato/ref correnti
+  websocketCallbacksRef.current = {
     onConnectionOpen: () => {
       if (!isMountedRef.current) return;
       setState('authenticating');
@@ -253,19 +276,26 @@ export function useVoiceChat() {
               isMutedRef.current = false;
 
               // Controlla se l'agente ha prodotto audio (risposta legittima) o era vuoto (ciclo spurio).
-              // I cicli spurii si verificano quando il server elabora audio residuo/rumore di avvio
-              // del microfono invece di vero parlato dell'utente (es. dopo chiamate MCP).
+              // Un ciclo agente senza audio indica una fase di pianificazione tool call:
+              // il modello ha deciso cosa fare ma non ha ancora parlato. Riavviare il mic
+              // in questo momento crea una finestra (~374ms) in cui il mic invia audio
+              // mentre il tool è in esecuzione → VAD trigge → risposta del secondo
+              // ciclo interrotta prima ancora di partire.
+              // Fix: al primo ciclo senza audio non riavviare il mic; il secondo ciclo
+              // (con audio) gestirà correttamente il riavvio.
               if (!agentHadAudioRef.current) {
                 consecutiveEmptyAgentsRef.current++;
               } else {
                 consecutiveEmptyAgentsRef.current = 0;
               }
 
-              // Se troppi cicli agente-vuoti consecutivi, non riavviare automaticamente.
-              // L'utente dovrà parlare manualmente (mic è già in stato 'ready').
-              if (consecutiveEmptyAgentsRef.current >= 3) {
+              // Non riavviare il mic se questo ciclo agente non ha prodotto audio.
+              // Copre sia i cicli di pianificazione tool (1 ciclo vuoto) sia eventuali
+              // cicli spurii multipli consecutivi.
+              if (consecutiveEmptyAgentsRef.current >= 1) {
                 consecutiveEmptyAgentsRef.current = 0;
-                // Non riavviare il mic: l'utente deve parlare esplicitamente
+                // Non riavviare il mic: l'agente sta ancora elaborando (tool call in corso).
+                // Il ciclo successivo con audio gestirà il riavvio.
                 break;
               }
 
@@ -456,7 +486,7 @@ export function useVoiceChat() {
 
       audioRecorderRef.current = new AudioRecorder();
       audioPlayerRef.current = new AudioPlayer();
-      websocketRef.current = new VoiceBotWebSocket(websocketCallbacks);
+      websocketRef.current = new VoiceBotWebSocket(stableCallbacks);
 
       // Pre-inizializza TrackPlayer per evitare ritardi al primo chunk audio.
       // Questo elimina la race condition dove audio_end/agent_end arrivano

src/navigation/index.tsx

@@ -55,6 +55,7 @@ import { useTranslation } from 'react-i18next';
 
 // Definizione del tipo per le route dello Stack principale
 export type RootStackParamList = {
+  WelcomeCarousel: undefined;
   Login: undefined;
   Register: undefined;
   EmailVerification: { email: string; username: string; password: string };
@@ -238,6 +239,7 @@ function AppStack() {
   const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(null);
   const [hasSeenWelcome, setHasSeenWelcome] = useState<boolean | null>(null);
   const [isLoading, setIsLoading] = useState(true); // Controlla lo stato di autenticazione all'avvio
+  const { triggerPostLoginTutorial } = useTutorialContext();
 
   // 🔔 Inizializza il sistema di notifiche quando l'utente è autenticato
   const { notification } = useNotifications();
@@ -336,6 +338,7 @@ function AppStack() {
   useEffect(() => {
     const handleLoginSuccess = () => {
       setIsAuthenticated(true);
+      triggerPostLoginTutorial();
     };
 
     const handleLogoutSuccess = () => {