currently what's happening is, for the first question, I see a message s

src/components/chatbot/chatbot.tsx

@@ -29,6 +29,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
   const scrollAreaRef = useRef<HTMLDivElement>(null);
   const { toast } = useToast();
   const messageIdCounter = useRef(0);
+  const isInitialQuestionRef = useRef(true);
 
   const addMessage = (message: Omit<ChatMessageType, 'id' | 'timestamp'>) => {
     messageIdCounter.current += 1;
@@ -39,6 +40,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
   const fetchNewMCQ = async () => {
     if (!imageDataUri) {
       addMessage({ sender: 'ai', type: 'error', text: "Image data is not available to generate questions." });
+      setIsLoading(false);
       return;
     }
     setIsLoading(true);
@@ -48,9 +50,17 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
     setIncorrectAttempts([]);
 
     try {
-      const mcqData = await generateMCQ({ imageDataUri });
-      setCurrentMCQ(mcqData);
-      addMessage({ sender: 'ai', type: 'mcq', mcq: mcqData });
+      const mcqResult = await generateMCQ({ imageDataUri });
+      
+      let questionText = mcqResult.mcq;
+      if (isInitialQuestionRef.current) {
+        questionText = `Okay, let's start with ${journeyTitle}! ${mcqResult.mcq}`;
+        isInitialQuestionRef.current = false; 
+      }
+
+      const mcqDataForMessage = { ...mcqResult, mcq: questionText };
+      setCurrentMCQ(mcqDataForMessage);
+      addMessage({ sender: 'ai', type: 'mcq', mcq: mcqDataForMessage });
       setIsAwaitingAnswer(true);
     } catch (error) {
       console.error("Error generating MCQ:", error);
@@ -67,12 +77,9 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
   };
 
   useEffect(() => {
-    setMessages([]);
-    addMessage({
-      sender: 'ai',
-      type: 'text',
-      text: `Okay let's start with ${journeyTitle}!`,
-    });
+    setMessages([]); 
+    isInitialQuestionRef.current = true; 
+    
     if (imageDataUri) {
       fetchNewMCQ();
     } else {
@@ -82,7 +89,8 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
   }, [imageDataUri, journeyTitle]);
 
    useEffect(() => {
-    if (imageDataUri && messages.length > 0 && messages[messages.length-1].text === "Preparing your journey...") {
+    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
@@ -98,7 +106,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
   const handleOptionSelect = async (option: string, isCorrect: boolean) => {
     if (!currentMCQ) return;
 
-    setIsAwaitingAnswer(false); // User has submitted an answer
+    setIsAwaitingAnswer(false); 
 
     addMessage({
       sender: 'user',
@@ -107,8 +115,8 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
     });
 
     if (isCorrect) {
-      addMessage({ sender: 'ai', type: 'feedback', text: "That's correct! Well done.", isCorrect: true });
       setIsLoading(true);
+      addMessage({ sender: 'ai', type: 'feedback', text: "That's correct! Well done.", isCorrect: true });
       try {
         const explanationResult = await explainCorrectAnswer({
           question: currentMCQ.mcq,
@@ -122,7 +130,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
         addMessage({ sender: 'ai', type: 'error', text: `Sorry, I couldn't provide an explanation for that. ${errorMsg}` });
       }
       setHasAnsweredCorrectly(true);
-      setIncorrectAttempts([]); // Clear attempts on correct answer
+      setIncorrectAttempts([]); 
       setIsLoading(false);
     } else {
       const updatedIncorrectAttempts = [...incorrectAttempts, option];
@@ -130,12 +138,11 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
       setIsLoading(true);
 
       if (updatedIncorrectAttempts.length >= currentMCQ.options.length - 1) {
-        // All incorrect options have been tried
         addMessage({
           sender: 'ai',
           type: 'feedback',
           text: `It looks like you've tried the other options. The correct answer is "${currentMCQ.correctAnswer}".`,
-          isCorrect: true, // Marking as 'correct' flow for styling purposes of feedback
+          isCorrect: true, 
         });
         try {
           const explanationResult = await explainCorrectAnswer({
@@ -150,9 +157,8 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
           addMessage({ sender: 'ai', type: 'error', text: `Sorry, I couldn't provide an explanation for that. ${errorMsg}` });
         }
         setHasAnsweredCorrectly(true);
-        setIncorrectAttempts([]); // Clear attempts as the question is resolved
+        setIncorrectAttempts([]); 
       } else {
-        // Still more options to try
         try {
           const explanationResult = await explainIncorrectAnswer({
             question: currentMCQ.mcq,
@@ -161,15 +167,15 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
             correctAnswer: currentMCQ.correctAnswer,
           });
           addMessage({ sender: 'ai', type: 'feedback', text: explanationResult.explanation, isCorrect: false });
-          addMessage({ sender: 'ai', type: 'mcq', mcq: currentMCQ }); // 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);
           const errorMsg = error instanceof Error ? error.message : "An unknown error occurred";
           addMessage({ sender: 'ai', type: 'error', text: `Sorry, I couldn't explain that. ${errorMsg}` });
           addMessage({ sender: 'ai', type: 'feedback', text: "That's not quite right. Try again!", isCorrect: false });
-          addMessage({ sender: 'ai', type: 'mcq', mcq: currentMCQ }); // If explanation fetch fails, still re-post MCQ
+          addMessage({ sender: 'ai', type: 'mcq', mcq: currentMCQ }); 
         }
-        setIsAwaitingAnswer(true); // Allow another answer on the re-posted MCQ
+        setIsAwaitingAnswer(true); 
       }
       setIsLoading(false);
     }
@@ -190,7 +196,6 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
               msg.mcq.mcq === currentMCQ.mcq &&
               JSON.stringify(msg.mcq.options) === JSON.stringify(currentMCQ.options);
             
-            // Find the index of the last message that is the current active MCQ
             const lastInstanceOfCurrentMCQIndex = messages.findLastIndex(
               (m) =>
                 m.type === 'mcq' &&
@@ -200,9 +205,6 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
                 JSON.stringify(m.mcq.options) === JSON.stringify(currentMCQ.options)
             );
 
-            // This specific message should be interactive if it's the current MCQ,
-            // it's the *last* instance of that MCQ in the chat,
-            // and we are awaiting an answer for it and it hasn't been correctly answered yet.
             const shouldThisMessageBeInteractive =
               isThisMessageTheCurrentMCQ &&
               index === lastInstanceOfCurrentMCQIndex &&
@@ -213,11 +215,11 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
               <ChatMessage
                 key={msg.id}
                 message={msg}
-                activeMCQ={currentMCQ} // Pass currentMCQ to know its structure
+                activeMCQ={currentMCQ} 
                 isAwaitingActiveMCQAnswer={shouldThisMessageBeInteractive}
                 onOptionSelectActiveMCQ={handleOptionSelect}
                 incorrectAttemptsForMCQ={
-                  isThisMessageTheCurrentMCQ && // Only pass attempts for the current, active MCQ instance
+                  isThisMessageTheCurrentMCQ && 
                   index === lastInstanceOfCurrentMCQIndex 
                   ? incorrectAttempts
                   : []
@@ -261,3 +263,4 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
     </div>
   );
 }
+