same thing is happening. I see that the first message appears which has

src/components/chatbot/chatbot.tsx

@@ -37,65 +37,74 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
     setMessages(prev => [...prev, { ...message, id: newId, timestamp: new Date() }]);
   }, []);
 
-  const fetchNewMCQ = useCallback(async () => {
-    if (!imageDataUri) {
-      addMessage({ sender: 'ai', type: 'error', text: "Image data is not available to generate questions." });
-      setIsLoading(false);
-      return;
-    }
-    setIsLoading(true);
-    // Important: Don't reset currentMCQ or isAwaitingAnswer here if this function is also used for "Next Question"
-    // The initial reset is handled by the useEffect. For "Next Question", specific states are managed by handleOptionSelect.
-
-    try {
-      const mcqResult = await generateMCQ({ imageDataUri });
-      
-      let questionText = mcqResult.mcq;
-      let finalMCQData = { ...mcqResult };
-
-      if (isInitialQuestionRef.current) {
-        questionText = `Okay, let's start with ${journeyTitle}! ${mcqResult.mcq}`;
-        isInitialQuestionRef.current = false; // Set to false after using it for the first question
-      }
-      finalMCQData.mcq = questionText;
-
-      setCurrentMCQ(finalMCQData);
-      addMessage({ sender: 'ai', type: 'mcq', mcq: finalMCQData });
-      setIsAwaitingAnswer(true); // Always true for a newly fetched question
-    } catch (error) {
-      console.error("Error generating MCQ:", error);
-      const errorMessage = error instanceof Error ? error.message : "An unknown error occurred.";
-      addMessage({ sender: 'ai', type: 'error', text: `Failed to generate question: ${errorMessage}` });
-      toast({
-        title: "Error",
-        description: `Could not generate a new question. ${errorMessage}`,
-        variant: "destructive",
-      });
-    } finally {
-      setIsLoading(false);
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [imageDataUri, journeyTitle, addMessage]); // isInitialQuestionRef is a ref, not needed in deps if mutated correctly
 
   useEffect(() => {
-    // Full reset for a new journey or when image data changes initially
+    let ignore = false; // Flag to ignore results from stale effects
+
+    // Reset states for a new journey or when imageDataUri/journeyTitle changes
     setMessages([]);
-    setCurrentMCQ(null); 
-    setIsLoading(false); 
+    setCurrentMCQ(null);
+    setIsLoading(false);
     setIsAwaitingAnswer(false);
     setHasAnsweredCorrectly(false);
     setIncorrectAttempts([]);
-    isInitialQuestionRef.current = true; // Reset flag for prepending intro
+    isInitialQuestionRef.current = true; // Reset for the new journey context
 
-    if (imageDataUri) {
-      fetchNewMCQ();
-    } else {
-      // If image data is not ready, show a placeholder.
-      // The effect will re-run when imageDataUri becomes available because it's in the dependency array.
-      addMessage({ sender: 'ai', type: 'text', text: "Preparing your journey..." });
-    }
+    const performInitialFetch = async () => {
+      if (!imageDataUri) {
+        if (!ignore) {
+          addMessage({ sender: 'ai', type: 'text', text: "Preparing your journey..." });
+        }
+        return;
+      }
+
+      if (!ignore) setIsLoading(true);
+
+      try {
+        const mcqResult = await generateMCQ({ imageDataUri });
+
+        if (ignore) return; 
+
+        let finalMCQData = { ...mcqResult };
+        let greetingWasPrepared = false;
+        if (isInitialQuestionRef.current) {
+          finalMCQData.mcq = `Okay, let's start with ${journeyTitle}! ${mcqResult.mcq}`;
+          greetingWasPrepared = true;
+        }
+        
+        if (ignore) return; 
+
+        if (greetingWasPrepared) {
+          isInitialQuestionRef.current = false; 
+        }
+
+        setCurrentMCQ(finalMCQData);
+        addMessage({ sender: 'ai', type: 'mcq', mcq: finalMCQData });
+        setIsAwaitingAnswer(true);
+
+      } catch (error) {
+        if (ignore) return;
+        console.error("Error generating initial MCQ:", error);
+        const errorMessage = error instanceof Error ? error.message : "An unknown error occurred.";
+        addMessage({ sender: 'ai', type: 'error', text: `Failed to generate initial question: ${errorMessage}` });
+        toast({
+          title: "Error",
+          description: `Could not generate the first question. ${errorMessage}`,
+          variant: "destructive",
+        });
+      } finally {
+        if (!ignore) setIsLoading(false);
+      }
+    };
+
+    performInitialFetch();
+
+    return () => {
+      ignore = true; 
+    };
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [imageDataUri, journeyTitle, fetchNewMCQ]); // fetchNewMCQ is memoized
+  }, [imageDataUri, journeyTitle, addMessage, toast]);
+
 
   useEffect(() => {
     if (scrollAreaRef.current) {
@@ -115,7 +124,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
     });
 
     if (isCorrect) {
-      setIsLoading(true); // Start loading before fetching explanation
+      setIsLoading(true); 
       addMessage({ sender: 'ai', type: 'feedback', text: "That's correct! Well done.", isCorrect: true });
       try {
         const explanationResult = await explainCorrectAnswer({
@@ -131,11 +140,11 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
       }
       setHasAnsweredCorrectly(true);
       setIncorrectAttempts([]); 
-      setIsLoading(false); // Stop loading after explanation
+      setIsLoading(false); 
     } else {
       const updatedIncorrectAttempts = [...incorrectAttempts, option];
       setIncorrectAttempts(updatedIncorrectAttempts);
-      setIsLoading(true); // Start loading before fetching explanation
+      setIsLoading(true); 
 
       if (updatedIncorrectAttempts.length >= currentMCQ.options.length - 1) {
         addMessage({
@@ -156,8 +165,8 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
           const errorMsg = error instanceof Error ? error.message : "An unknown error occurred";
           addMessage({ sender: 'ai', type: 'error', text: `Sorry, I couldn't provide an explanation for that. ${errorMsg}` });
         }
-        setHasAnsweredCorrectly(true); // Mark as correctly handled
-        setIncorrectAttempts([]); // Clear attempts for next question
+        setHasAnsweredCorrectly(true); 
+        setIncorrectAttempts([]); 
       } else {
         try {
           const explanationResult = await explainIncorrectAnswer({
@@ -167,7 +176,6 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
             correctAnswer: currentMCQ.correctAnswer,
           });
           addMessage({ sender: 'ai', type: 'feedback', text: explanationResult.explanation, isCorrect: false });
-          // Re-post the same MCQ for another attempt
           addMessage({ sender: 'ai', type: 'mcq', mcq: currentMCQ }); 
         } catch (error) {
           console.error("Error fetching explanation for incorrect answer:", error);
@@ -176,18 +184,41 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
           addMessage({ sender: 'ai', type: 'feedback', text: "That's not quite right. Try again!", isCorrect: false });
           addMessage({ sender: 'ai', type: 'mcq', mcq: currentMCQ }); 
         }
-        setIsAwaitingAnswer(true); // Allow answering the re-posted MCQ
+        setIsAwaitingAnswer(true); 
       }
-      setIsLoading(false); // Stop loading after handling incorrect answer
+      setIsLoading(false); 
     }
   };
 
-  const handleNextQuestionClick = () => {
+  const handleNextQuestionClick = async () => {
     setIsAwaitingAnswer(false);
     setHasAnsweredCorrectly(false);
-    setCurrentMCQ(null); // Clear current MCQ before fetching new one
+    setCurrentMCQ(null); 
     setIncorrectAttempts([]);
-    fetchNewMCQ();
+    
+    if (!imageDataUri) {
+      addMessage({ sender: 'ai', type: 'error', text: "Image data is not available to generate new questions." });
+      return;
+    }
+    setIsLoading(true);
+    try {
+      // isInitialQuestionRef should be false here, so no greeting prepended
+      const mcqResult = await generateMCQ({ imageDataUri });
+      setCurrentMCQ(mcqResult);
+      addMessage({ sender: 'ai', type: 'mcq', mcq: mcqResult });
+      setIsAwaitingAnswer(true);
+    } catch (error) {
+      console.error("Error generating next MCQ:", error);
+      const errorMessage = error instanceof Error ? error.message : "An unknown error occurred.";
+      addMessage({ sender: 'ai', type: 'error', text: `Failed to generate new question: ${errorMessage}` });
+      toast({
+        title: "Error",
+        description: `Could not generate a new question. ${errorMessage}`,
+        variant: "destructive",
+      });
+    } finally {
+      setIsLoading(false);
+    }
   };
 
 
@@ -203,10 +234,9 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
               msg.type === 'mcq' &&
               msg.mcq &&
               currentMCQ &&
-              msg.mcq.mcq === currentMCQ.mcq && // Compare by the question text itself
+              msg.mcq.mcq === currentMCQ.mcq &&
               JSON.stringify(msg.mcq.options) === JSON.stringify(currentMCQ.options);
             
-            // Find the index of the last message in the array that is the current active MCQ
             const lastInstanceOfCurrentMCQIndex = messages.findLastIndex(
               (m) =>
                 m.type === 'mcq' &&
@@ -216,11 +246,9 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
                 JSON.stringify(m.mcq.options) === JSON.stringify(currentMCQ.options)
             );
 
-            // Options should be interactive only for the last instance of the current MCQ,
-            // and only if we are awaiting an answer and it hasn't been answered correctly yet.
             const shouldThisMessageBeInteractive =
               isThisMessageTheCurrentMCQ &&
-              index === lastInstanceOfCurrentMCQIndex && // Ensure this is the LATEST instance
+              index === lastInstanceOfCurrentMCQIndex && 
               isAwaitingAnswer && 
               !hasAnsweredCorrectly;
 
@@ -232,10 +260,9 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
                 isAwaitingActiveMCQAnswer={shouldThisMessageBeInteractive}
                 onOptionSelectActiveMCQ={handleOptionSelect}
                 incorrectAttemptsForMCQ={
-                  // Pass incorrect attempts only to the latest, interactive instance
                   shouldThisMessageBeInteractive
                   ? incorrectAttempts
-                  : [] // Otherwise, no attempts should be highlighted for past/non-interactive MCQs
+                  : [] 
                 }
               />
             );
@@ -269,7 +296,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
          {!imageDataUri && !isLoading && (
           <p className="text-center text-sm text-muted-foreground">Loading image, please wait...</p>
         )}
-         {!currentMCQ && !isLoading && imageDataUri && messages.length === 0 && ( // Condition for when image is loaded but first question not yet.
+         {!currentMCQ && !isLoading && imageDataUri && messages.length === 0 && ( 
            <p className="text-center text-sm text-muted-foreground">Loading first question...</p>
          )}
           {!currentMCQ && !isLoading && imageDataUri && messages.length > 0 && messages[messages.length -1]?.type === 'error' && (
@@ -279,4 +306,4 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
     </div>
   );
 }
-    
+