the same that's correct well done message should show the rationale as w

src/components/chatbot/chatbot.tsx

@@ -41,17 +41,20 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
   useEffect(() => {
     let ignore = false;
 
+    // Comprehensive reset for new journey/image
     setMessages([]);
     setCurrentMCQ(null);
     setIsLoading(false);
     setIsAwaitingAnswer(false);
     setHasAnsweredCorrectly(false);
     setIncorrectAttempts([]);
-    isInitialQuestionRef.current = true; // Reset for new journey
+    isInitialQuestionRef.current = true;
+    messageIdCounter.current = 0;
+
 
     const performInitialFetch = async () => {
       if (!imageDataUri) {
-        if (!ignore) {
+        if (!ignore && messages.length === 0) { // Only add if no messages and not ignoring
           addMessage({ sender: 'ai', type: 'text', text: "Preparing your journey..." });
         }
         return;
@@ -66,7 +69,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
 
         let activeMcqData: ActiveMCQ = {
           ...mcqResult,
-          originalQuestionTextForFlow: mcqResult.mcq,
+          originalQuestionTextForFlow: mcqResult.mcq, // Store original question text
         };
         
         if (isInitialQuestionRef.current) {
@@ -95,16 +98,14 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
       }
     };
     
-    // 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..." });
+        // If there's an existing "Preparing..." message, clear it before fetching
+        if (messages.length === 1 && messages[0].text === "Preparing your journey...") {
+            setMessages([]);
         }
+        performInitialFetch();
+    } else if (messages.length === 0) { // Only add "Preparing..." if no messages exist
+        addMessage({ sender: 'ai', type: 'text', text: "Preparing your journey..." });
     }
 
 
@@ -112,7 +113,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
       ignore = true;
     };
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [imageDataUri, journeyTitle, addMessage, toast]); // addMessage and toast are stable
+  }, [imageDataUri, journeyTitle]); // addMessage and toast are stable, so not needed in deps
 
 
   useEffect(() => {
@@ -136,19 +137,20 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
     const questionForAI = currentMCQ.originalQuestionTextForFlow || currentMCQ.mcq;
 
     if (isCorrect) {
-      addMessage({ sender: 'ai', type: 'feedback', text: "That's correct! Well done.", isCorrect: true });
+      let combinedMessage = "That's correct! Well done.";
       try {
         const explanationResult = await explainCorrectAnswer({
           question: questionForAI,
           options: currentMCQ.options,
           correctAnswer: currentMCQ.correctAnswer,
         });
-        addMessage({ sender: 'ai', type: 'feedback', text: explanationResult.explanation, isCorrect: true });
+        combinedMessage += ` ${explanationResult.explanation}`;
       } catch (error) {
         console.error("Error fetching correct answer explanation:", 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}` });
+        combinedMessage += ` (Sorry, I couldn't provide an explanation for that: ${errorMsg})`;
       }
+      addMessage({ sender: 'ai', type: 'feedback', text: combinedMessage, isCorrect: true });
       setHasAnsweredCorrectly(true);
       setIncorrectAttempts([]);
     } else { // Incorrect answer
@@ -162,7 +164,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
           const incorrectExplanationResult = await explainIncorrectAnswer({
             question: questionForAI,
             options: currentMCQ.options,
-            selectedAnswer: option, // The last incorrect option chosen by the user
+            selectedAnswer: option, 
             correctAnswer: currentMCQ.correctAnswer,
           });
           combinedText += `That's not quite right. ${incorrectExplanationResult.explanation} `;
@@ -191,7 +193,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
           sender: 'ai',
           type: 'feedback',
           text: combinedText.trim(),
-          isCorrect: true, // Mark as correct to enable "Next Question"
+          isCorrect: true, 
         });
         setHasAnsweredCorrectly(true);
         setIncorrectAttempts([]);
@@ -207,21 +209,25 @@ 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, // Carries over options, correctAnswer, originalQuestionTextForFlow
-            mcq: repromptText, // This is the new display text for the question part of the message
+            ...currentMCQ, 
+            mcq: repromptText, 
           };
           
           addMessage({ sender: 'ai', type: 'mcq', mcq: repromptMCQData });
-          setCurrentMCQ(repromptMCQData); // Update currentMCQ to the reprompt version with new text
+          setCurrentMCQ(repromptMCQData); 
           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 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);
+          const fallbackRepromptText = `That's not quite right. (Sorry, I couldn't explain that: ${errorMsg}) Please try another option from the question above.`;
+          const fallbackMCQData: ActiveMCQ = {
+            ...currentMCQ,
+            mcq: fallbackRepromptText,
+          };
+          addMessage({ sender: 'ai', type: 'mcq', mcq: fallbackMCQData });
+          setCurrentMCQ(fallbackMCQData);
+          setIsAwaitingAnswer(true);
         }
       }
     }
@@ -231,7 +237,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
   const handleNextQuestionClick = async () => {
     setIsAwaitingAnswer(false);
     setHasAnsweredCorrectly(false);
-    setCurrentMCQ(null); // Clear currentMCQ before fetching a new one
+    setCurrentMCQ(null); 
     setIncorrectAttempts([]);
     
     if (!imageDataUri) {
@@ -243,7 +249,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
       const mcqResult = await generateMCQ({ imageDataUri });
       const nextMCQData: ActiveMCQ = {
         ...mcqResult,
-        originalQuestionTextForFlow: mcqResult.mcq, // Store original question
+        originalQuestionTextForFlow: mcqResult.mcq, 
       };
       setCurrentMCQ(nextMCQData);
       addMessage({ sender: 'ai', type: 'mcq', mcq: nextMCQData });
@@ -271,19 +277,14 @@ 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 && // Match the display text
+              msg.mcq.mcq === currentMCQ.mcq && 
               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' &&
@@ -294,9 +295,6 @@ 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 && 
@@ -307,11 +305,11 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
               <ChatMessage
                 key={msg.id}
                 message={msg}
-                activeMCQ={currentMCQ} // Pass currentMCQ from chatbot state
+                activeMCQ={currentMCQ} 
                 isAwaitingActiveMCQAnswer={shouldThisMessageBeInteractive}
                 onOptionSelectActiveMCQ={handleOptionSelect}
                 incorrectAttemptsForMCQ={
-                  shouldThisMessageBeInteractive // Only pass attempts for the currently interactive MCQ
+                  shouldThisMessageBeInteractive 
                   ? incorrectAttempts
                   : [] 
                 }
@@ -319,7 +317,6 @@ 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">
@@ -339,22 +336,18 @@ 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>
         )}
 
-         {/* 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>
          )}