no, i still get 2 messages. first gives the greeting then a question, th

src/components/chatbot/chatbot.tsx

@@ -2,7 +2,7 @@
 "use client";
 
 import type { ChangeEvent } from 'react';
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -31,37 +31,37 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
   const messageIdCounter = useRef(0);
   const isInitialQuestionRef = useRef(true);
 
-  const addMessage = (message: Omit<ChatMessageType, 'id' | 'timestamp'>) => {
+  const addMessage = useCallback((message: Omit<ChatMessageType, 'id' | 'timestamp'>) => {
     messageIdCounter.current += 1;
     const newId = `${Date.now()}-${messageIdCounter.current}`;
     setMessages(prev => [...prev, { ...message, id: newId, timestamp: new Date() }]);
-  };
+  }, []);
 
-  const fetchNewMCQ = async () => {
+  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);
-    setIsAwaitingAnswer(false);
-    setHasAnsweredCorrectly(false);
-    setCurrentMCQ(null);
-    setIncorrectAttempts([]);
+    // 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; 
+        isInitialQuestionRef.current = false; // Set to false after using it for the first question
       }
+      finalMCQData.mcq = questionText;
 
-      const mcqDataForMessage = { ...mcqResult, mcq: questionText };
-      setCurrentMCQ(mcqDataForMessage);
-      addMessage({ sender: 'ai', type: 'mcq', mcq: mcqDataForMessage });
-      setIsAwaitingAnswer(true);
+      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.";
@@ -74,28 +74,28 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
     } 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(() => {
-    setMessages([]); 
-    isInitialQuestionRef.current = true; 
-    
+    // Full reset for a new journey or when image data changes initially
+    setMessages([]);
+    setCurrentMCQ(null); 
+    setIsLoading(false); 
+    setIsAwaitingAnswer(false);
+    setHasAnsweredCorrectly(false);
+    setIncorrectAttempts([]);
+    isInitialQuestionRef.current = true; // Reset flag for prepending intro
+
     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..." });
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [imageDataUri, journeyTitle]);
-
-   useEffect(() => {
-    if (imageDataUri && messages.length === 1 && messages[0].type === 'text' && messages[0].text === "Preparing your journey...") {
-      setMessages([]); 
-      fetchNewMCQ();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [imageDataUri, messages]);
-
+  }, [imageDataUri, journeyTitle, fetchNewMCQ]); // fetchNewMCQ is memoized
 
   useEffect(() => {
     if (scrollAreaRef.current) {
@@ -115,7 +115,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
     });
 
     if (isCorrect) {
-      setIsLoading(true);
+      setIsLoading(true); // Start loading before fetching explanation
       addMessage({ sender: 'ai', type: 'feedback', text: "That's correct! Well done.", isCorrect: true });
       try {
         const explanationResult = await explainCorrectAnswer({
@@ -131,11 +131,11 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
       }
       setHasAnsweredCorrectly(true);
       setIncorrectAttempts([]); 
-      setIsLoading(false);
+      setIsLoading(false); // Stop loading after explanation
     } else {
       const updatedIncorrectAttempts = [...incorrectAttempts, option];
       setIncorrectAttempts(updatedIncorrectAttempts);
-      setIsLoading(true);
+      setIsLoading(true); // Start loading before fetching explanation
 
       if (updatedIncorrectAttempts.length >= currentMCQ.options.length - 1) {
         addMessage({
@@ -156,8 +156,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);
-        setIncorrectAttempts([]); 
+        setHasAnsweredCorrectly(true); // Mark as correctly handled
+        setIncorrectAttempts([]); // Clear attempts for next question
       } else {
         try {
           const explanationResult = await explainIncorrectAnswer({
@@ -167,6 +167,7 @@ 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);
@@ -175,12 +176,21 @@ 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); 
+        setIsAwaitingAnswer(true); // Allow answering the re-posted MCQ
       }
-      setIsLoading(false);
+      setIsLoading(false); // Stop loading after handling incorrect answer
     }
   };
 
+  const handleNextQuestionClick = () => {
+    setIsAwaitingAnswer(false);
+    setHasAnsweredCorrectly(false);
+    setCurrentMCQ(null); // Clear current MCQ before fetching new one
+    setIncorrectAttempts([]);
+    fetchNewMCQ();
+  };
+
+
   return (
     <div className="flex h-full flex-col rounded-lg border bg-card shadow-xl">
       <div className="border-b p-4">
@@ -193,9 +203,10 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
               msg.type === 'mcq' &&
               msg.mcq &&
               currentMCQ &&
-              msg.mcq.mcq === currentMCQ.mcq &&
+              msg.mcq.mcq === currentMCQ.mcq && // Compare by the question text itself
               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' &&
@@ -205,9 +216,11 @@ 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 &&
+              index === lastInstanceOfCurrentMCQIndex && // Ensure this is the LATEST instance
               isAwaitingAnswer && 
               !hasAnsweredCorrectly;
 
@@ -219,10 +232,10 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
                 isAwaitingActiveMCQAnswer={shouldThisMessageBeInteractive}
                 onOptionSelectActiveMCQ={handleOptionSelect}
                 incorrectAttemptsForMCQ={
-                  isThisMessageTheCurrentMCQ && 
-                  index === lastInstanceOfCurrentMCQIndex 
+                  // Pass incorrect attempts only to the latest, interactive instance
+                  shouldThisMessageBeInteractive
                   ? incorrectAttempts
-                  : []
+                  : [] // Otherwise, no attempts should be highlighted for past/non-interactive MCQs
                 }
               />
             );
@@ -242,7 +255,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
         {isLoading && <p className="text-center text-sm text-muted-foreground">AI is thinking...</p>}
 
         {!isLoading && currentMCQ && hasAnsweredCorrectly && (
-           <Button onClick={fetchNewMCQ} className="w-full" variant="default" disabled={isLoading}>
+           <Button onClick={handleNextQuestionClick} className="w-full" variant="default" disabled={isLoading}>
             Next Question <Send className="ml-2 h-4 w-4" />
           </Button>
         )}
@@ -256,11 +269,14 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
          {!imageDataUri && !isLoading && (
           <p className="text-center text-sm text-muted-foreground">Loading image, please wait...</p>
         )}
-         {!currentMCQ && !isLoading && messages.length > 0 && messages[messages.length -1]?.type !== 'error' && messages[messages.length -1]?.type !== 'text' && (
+         {!currentMCQ && !isLoading && imageDataUri && messages.length === 0 && ( // Condition for when image is loaded but first question not yet.
            <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' && (
+             <p className="text-center text-sm text-destructive-foreground">Could not load question. Try refreshing.</p>
+         )}
       </div>
     </div>
   );
 }
-
+