the text that says, it looks like you've tried all other options should

src/components/chatbot/chatbot.tsx

@@ -39,7 +39,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
 
 
   useEffect(() => {
-    let ignore = false; 
+    let ignore = false;
 
     setMessages([]);
     setCurrentMCQ(null);
@@ -47,7 +47,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
     setIsAwaitingAnswer(false);
     setHasAnsweredCorrectly(false);
     setIncorrectAttempts([]);
-    isInitialQuestionRef.current = true;
+    isInitialQuestionRef.current = true; // Reset for new journey
 
     const performInitialFetch = async () => {
       if (!imageDataUri) {
@@ -66,7 +66,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
 
         let activeMcqData: ActiveMCQ = {
           ...mcqResult,
-          originalQuestionTextForFlow: mcqResult.mcq, 
+          originalQuestionTextForFlow: mcqResult.mcq,
         };
         
         if (isInitialQuestionRef.current) {
@@ -94,14 +94,25 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
         if (!ignore) setIsLoading(false);
       }
     };
+    
+    // If imageDataUri is present, fetch immediately.
+    // Otherwise, the effect will re-run when imageDataUri becomes available.
+    if (imageDataUri) {
+        performInitialFetch();
+    } else {
+        // Add a placeholder message if image data is not yet ready.
+        // This handles the case where journey page loads but imageToDataUri is still pending.
+        if (messages.length === 0) { // Only add if no messages exist
+            addMessage({ sender: 'ai', type: 'text', text: "Preparing your journey..." });
+        }
+    }
 
-    performInitialFetch();
 
     return () => {
       ignore = true;
     };
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [imageDataUri, journeyTitle, addMessage, toast]);
+  }, [imageDataUri, journeyTitle, addMessage, toast]); // addMessage and toast are stable
 
 
   useEffect(() => {
@@ -140,32 +151,52 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
       }
       setHasAnsweredCorrectly(true);
       setIncorrectAttempts([]);
-    } else {
+    } else { // Incorrect answer
       const updatedIncorrectAttempts = [...incorrectAttempts, option];
       setIncorrectAttempts(updatedIncorrectAttempts);
 
       if (updatedIncorrectAttempts.length >= currentMCQ.options.length - 1) {
-        addMessage({
-          sender: 'ai',
-          type: 'feedback',
-          text: `It looks like you've tried all other options. The correct answer is "${currentMCQ.correctAnswer}".`,
-          isCorrect: true,
-        });
+        // All incorrect options have been tried
+        let combinedText = "";
+        try {
+          const incorrectExplanationResult = await explainIncorrectAnswer({
+            question: questionForAI,
+            options: currentMCQ.options,
+            selectedAnswer: option, // The last incorrect option chosen by the user
+            correctAnswer: currentMCQ.correctAnswer,
+          });
+          combinedText += `That's not quite right. ${incorrectExplanationResult.explanation} `;
+        } catch (error) {
+          console.error("Error fetching explanation for the last incorrect answer:", error);
+          const errorMsg = error instanceof Error ? error.message : "An unknown error occurred";
+          combinedText += `That's not quite right. (Failed to get explanation for your choice: ${errorMsg}) `;
+        }
+        
+        combinedText += `The correct answer is "${currentMCQ.correctAnswer}". `;
+
         try {
-          const explanationResult = await explainCorrectAnswer({
+          const correctExplanationResult = await explainCorrectAnswer({
             question: questionForAI,
             options: currentMCQ.options,
             correctAnswer: currentMCQ.correctAnswer,
           });
-          addMessage({ sender: 'ai', type: 'feedback', text: explanationResult.explanation, isCorrect: true });
+          combinedText += correctExplanationResult.explanation;
         } catch (error) {
           console.error("Error fetching correct answer explanation after exhausting options:", error);
            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}` });
+           combinedText += `(Failed to get explanation for the correct answer: ${errorMsg})`;
         }
+
+        addMessage({
+          sender: 'ai',
+          type: 'feedback',
+          text: combinedText.trim(),
+          isCorrect: true, // Mark as correct to enable "Next Question"
+        });
         setHasAnsweredCorrectly(true);
         setIncorrectAttempts([]);
-      } else {
+
+      } else { // Still other options left to try
         try {
           const explanationResult = await explainIncorrectAnswer({
             question: questionForAI,
@@ -176,25 +207,21 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
           
           const repromptText = `That's not quite right. ${explanationResult.explanation} Would you like to try again?`;
           const repromptMCQData: ActiveMCQ = {
-            ...currentMCQ,
-            mcq: repromptText,
+            ...currentMCQ, // Carries over options, correctAnswer, originalQuestionTextForFlow
+            mcq: repromptText, // This is the new display text for the question part of the message
           };
           
           addMessage({ sender: 'ai', type: 'mcq', mcq: repromptMCQData });
-          setCurrentMCQ(repromptMCQData); // Update currentMCQ to the reprompt version
+          setCurrentMCQ(repromptMCQData); // Update currentMCQ to the reprompt version with new text
           setIsAwaitingAnswer(true);
 
         } catch (error) {
           console.error("Error fetching explanation for incorrect answer:", error);
           const errorMsg = error instanceof Error ? error.message : "An unknown error occurred";
           addMessage({ sender: 'ai', type: 'error', text: `Sorry, I couldn't explain that. ${errorMsg}. Please try another option from the question above.` });
-          // Fallback: re-enable options for the original currentMCQ if explanation fails
-          // We need to ensure the options are re-enabled for the *last presented* mcq
-          // This part is tricky if the explanation fails BEFORE the new message is added.
-          // For now, let's assume the error message is enough and user can try again on the current active mcq.
-          // To be safe, re-add the current (pre-error) mcq to re-enable its options
-           addMessage({ sender: 'ai', type: 'mcq', mcq: currentMCQ });
-           setIsAwaitingAnswer(true); // Re-enable options for the MCQ instance already in messages
+          // Fallback to re-activate the original MCQ if explanation fails during re-prompt
+           addMessage({ sender: 'ai', type: 'mcq', mcq: currentMCQ }); // Re-add currentMCQ to make its options active
+           setIsAwaitingAnswer(true);
         }
       }
     }
@@ -204,7 +231,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
   const handleNextQuestionClick = async () => {
     setIsAwaitingAnswer(false);
     setHasAnsweredCorrectly(false);
-    setCurrentMCQ(null);
+    setCurrentMCQ(null); // Clear currentMCQ before fetching a new one
     setIncorrectAttempts([]);
     
     if (!imageDataUri) {
@@ -216,7 +243,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
       const mcqResult = await generateMCQ({ imageDataUri });
       const nextMCQData: ActiveMCQ = {
         ...mcqResult,
-        originalQuestionTextForFlow: mcqResult.mcq,
+        originalQuestionTextForFlow: mcqResult.mcq, // Store original question
       };
       setCurrentMCQ(nextMCQData);
       addMessage({ sender: 'ai', type: 'mcq', mcq: nextMCQData });
@@ -244,14 +271,19 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
       <ScrollArea className="flex-1 p-4" ref={scrollAreaRef}>
         <div className="space-y-4">
           {messages.map((msg, index) => {
+            // Determine if this message instance is the *current* active MCQ
+            // whose options should be interactive. This relies on currentMCQ state having the
+            // updated mcq text for re-prompts.
             const isThisMessageTheCurrentMCQ =
               msg.type === 'mcq' &&
               msg.mcq &&
               currentMCQ &&
-              msg.mcq.mcq === currentMCQ.mcq && // This comparison should now work due to setCurrentMCQ(repromptMCQData)
+              msg.mcq.mcq === currentMCQ.mcq && // Match the display text
               JSON.stringify(msg.mcq.options) === JSON.stringify(currentMCQ.options) &&
               msg.mcq.correctAnswer === currentMCQ.correctAnswer;
             
+            // Find the index of the *last* occurrence of the currentMCQ in the messages array.
+            // This ensures only the latest re-prompt of a question is interactive.
             const lastInstanceOfCurrentMCQIndex = messages.findLastIndex(
               (m) =>
                 m.type === 'mcq' &&
@@ -262,6 +294,9 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
                 m.mcq.correctAnswer === currentMCQ.correctAnswer
             );
 
+            // Options should be interactive if this message is the current one,
+            // it's the last time this exact MCQ content appears, we're awaiting an answer,
+            // and it hasn't been answered correctly yet.
             const shouldThisMessageBeInteractive =
               isThisMessageTheCurrentMCQ &&
               index === lastInstanceOfCurrentMCQIndex && 
@@ -272,11 +307,11 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
               <ChatMessage
                 key={msg.id}
                 message={msg}
-                activeMCQ={currentMCQ} 
+                activeMCQ={currentMCQ} // Pass currentMCQ from chatbot state
                 isAwaitingActiveMCQAnswer={shouldThisMessageBeInteractive}
                 onOptionSelectActiveMCQ={handleOptionSelect}
                 incorrectAttemptsForMCQ={
-                  shouldThisMessageBeInteractive
+                  shouldThisMessageBeInteractive // Only pass attempts for the currently interactive MCQ
                   ? incorrectAttempts
                   : [] 
                 }
@@ -284,6 +319,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
             );
           })}
           {isLoading && !currentMCQ && messages[messages.length -1]?.type !== 'feedback' && (
+            // Skeleton for initial load or "Next Question" load before MCQ is ready
             <div className="flex items-start space-x-3">
                <Skeleton className="h-8 w-8 rounded-full" />
                <div className="space-y-2">
@@ -303,18 +339,22 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
           </Button>
         )}
 
+        {/* Show "Please choose an answer" only if an MCQ is present, not yet answered correctly, and we are awaiting an answer */}
         {!isLoading && currentMCQ && !hasAnsweredCorrectly && isAwaitingAnswer && (
             <p className="text-center text-sm text-muted-foreground">
               Please choose an answer from the options above.
             </p>
         )}
 
-         {!imageDataUri && !isLoading && (
+         {/* Initial state messages */}
+         {!imageDataUri && !isLoading && messages.length > 0 && messages[messages.length -1]?.text === "Preparing your journey..." &&(
           <p className="text-center text-sm text-muted-foreground">Loading image, please wait...</p>
         )}
          {!currentMCQ && !isLoading && imageDataUri && messages.length === 0 && ( 
+           // This covers the brief moment after image is loaded but before first MCQ is fetched by useEffect
            <p className="text-center text-sm text-muted-foreground">Loading first question...</p>
          )}
+          {/* Error state for loading question */}
           {!currentMCQ && !isLoading && imageDataUri && messages.length > 0 && messages[messages.length -1]?.type === 'error' && (
              <p className="text-center text-sm text-destructive">Could not load question. Try refreshing.</p>
          )}