on the chat screen, when a user gives a wrong answer, don't say what the

src/ai/dev.ts

@@ -2,4 +2,5 @@ import { config } from 'dotenv';
 config();
 
 import '@/ai/flows/summarize-image.ts';
-import '@/ai/flows/generate-mcq.ts';
+import '@/ai/flows/generate-mcq.ts';
+import '@/ai/flows/explain-incorrect-answer-flow.ts';

src/ai/flows/explain-incorrect-answer-flow.ts

@@ -0,0 +1,62 @@
+
+'use server';
+/**
+ * @fileOverview Provides an explanation for why a selected MCQ answer is incorrect.
+ *
+ * - explainIncorrectAnswer - A function that generates an explanation for an incorrect MCQ answer.
+ * - ExplainIncorrectAnswerInput - The input type for the explainIncorrectAnswer function.
+ * - ExplainIncorrectAnswerOutput - The return type for the explainIncorrectAnswer function.
+ */
+
+import {ai} from '@/ai/genkit';
+import {z} from 'genkit';
+
+const ExplainIncorrectAnswerInputSchema = z.object({
+  question: z.string().describe('The multiple-choice question that was asked.'),
+  options: z.array(z.string()).describe('All the options provided for the question.'),
+  selectedAnswer: z.string().describe('The answer incorrectly selected by the user.'),
+  correctAnswer: z.string().describe('The actual correct answer to the question.'),
+});
+export type ExplainIncorrectAnswerInput = z.infer<typeof ExplainIncorrectAnswerInputSchema>;
+
+const ExplainIncorrectAnswerOutputSchema = z.object({
+  explanation: z.string().describe('The explanation of why the selected answer is incorrect.'),
+});
+export type ExplainIncorrectAnswerOutput = z.infer<typeof ExplainIncorrectAnswerOutputSchema>;
+
+export async function explainIncorrectAnswer(input: ExplainIncorrectAnswerInput): Promise<ExplainIncorrectAnswerOutput> {
+  return explainIncorrectAnswerFlow(input);
+}
+
+const prompt = ai.definePrompt({
+  name: 'explainIncorrectAnswerPrompt',
+  input: {schema: ExplainIncorrectAnswerInputSchema},
+  output: {schema: ExplainIncorrectAnswerOutputSchema},
+  prompt: `You are an expert educator. A student was asked the following multiple-choice question:
+Question: "{{question}}"
+Options:
+{{#each options}}
+- {{this}}
+{{/each}}
+The student incorrectly chose: "{{selectedAnswer}}".
+The correct answer is "{{correctAnswer}}".
+
+Explain concisely why "{{selectedAnswer}}" is not the correct choice for the question.
+Focus only on the incorrectness of the chosen option.
+Do NOT reveal what the correct answer is in your explanation.
+Your explanation should be helpful for the student to learn from their mistake and try again.
+For example, if the question is "What is the capital of France?" with options "Paris, London, Berlin, Rome", the correct answer is "Paris", and the student chose "London", you should explain why London is not the capital of France (e.g., "London is the capital of the United Kingdom, not France."), without stating that "The correct answer is Paris."
+`,
+});
+
+const explainIncorrectAnswerFlow = ai.defineFlow(
+  {
+    name: 'explainIncorrectAnswerFlow',
+    inputSchema: ExplainIncorrectAnswerInputSchema,
+    outputSchema: ExplainIncorrectAnswerOutputSchema,
+  },
+  async input => {
+    const {output} = await prompt(input);
+    return output!;
+  }
+);

src/components/chatbot/chat-message.tsx

@@ -4,7 +4,7 @@
 import type { ChatMessage as ChatMessageType } from '@/types';
 import { cn } from '@/lib/utils';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Bot, User, AlertTriangle, CheckCircle, XCircle } from 'lucide-react';
+import { Bot, User, AlertTriangle, CheckCircle, Info } from 'lucide-react'; // Using Info or AlertTriangle for explanation
 import { Card, CardContent } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { MCQOptions } from './mcq-options';
@@ -27,13 +27,13 @@ export function ChatMessage({
   const Icon = isUser ? User : Bot;
   const avatarFallback = isUser ? 'U' : 'AI';
 
-  const isCurrentActiveMCQ = 
+  // Determine if this message is the currently active MCQ being interacted with
+  const isCurrentActiveMCQMessage = 
     message.type === 'mcq' && 
     message.mcq &&
     activeMCQ && 
-    message.mcq.mcq === activeMCQ.mcq && // Compare question text for uniqueness
-    message.mcq.options.join(',') === activeMCQ.options.join(','); // Compare options for uniqueness
-
+    message.mcq.mcq === activeMCQ.mcq && // Compare question text
+    JSON.stringify(message.mcq.options) === JSON.stringify(activeMCQ.options); // Compare options
 
   return (
     <div
@@ -65,12 +65,13 @@ export function ChatMessage({
                   {String.fromCharCode(65 + index)}. {option}
                 </Badge>
               ))}
-              {isCurrentActiveMCQ && onOptionSelectActiveMCQ && (
-                <div className="mt-3"> {/* Added margin top for spacing */}
+              {/* Render options if this message is the active MCQ and we are awaiting an answer for it */}
+              {isCurrentActiveMCQMessage && onOptionSelectActiveMCQ && (
+                <div className="mt-3">
                   <MCQOptions
                     mcq={message.mcq}
                     onOptionSelect={onOptionSelectActiveMCQ}
-                    disabled={!isAwaitingActiveMCQAnswer}
+                    disabled={!isAwaitingActiveMCQAnswer} // Controls interactability
                   />
                 </div>
               )}
@@ -78,19 +79,21 @@ export function ChatMessage({
           )}
           {message.type === 'text' && message.text && <p>{message.text}</p>}
           {message.type === 'feedback' && message.text && (
-            <div className="flex items-center">
+            <div className="flex items-start"> {/* items-start for better alignment with multi-line text */}
               {message.isCorrect ? (
-                <CheckCircle className="mr-2 h-5 w-5 text-green-500" />
+                <CheckCircle className="mr-2 h-5 w-5 shrink-0 text-green-500 mt-0.5" />
               ) : (
-                <XCircle className="mr-2 h-5 w-5 text-destructive" />
+                // Using Info icon for explanations, or AlertTriangle for a slightly stronger visual cue for "incorrect"
+                <Info className="mr-2 h-5 w-5 shrink-0 text-blue-500 mt-0.5" /> 
+                // <AlertTriangle className="mr-2 h-5 w-5 shrink-0 text-orange-500 mt-0.5" />
               )}
-              <p>{message.text}</p>
+              <p className="flex-1">{message.text}</p>
             </div>
           )}
           {message.type === 'error' && message.text && (
-            <div className="flex items-center text-destructive">
-              <AlertTriangle className="mr-2 h-5 w-5" />
-              <p>{message.text}</p>
+            <div className="flex items-start text-destructive">
+              <AlertTriangle className="mr-2 h-5 w-5 shrink-0 mt-0.5" />
+              <p className="flex-1">{message.text}</p>
             </div>
           )}
           {message.type === 'user' && message.text && (

src/components/chatbot/chatbot.tsx

@@ -7,10 +7,11 @@ import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Skeleton } from '@/components/ui/skeleton';
 import { generateMCQ, type GenerateMCQOutput } from '@/ai/flows/generate-mcq';
+import { explainIncorrectAnswer } from '@/ai/flows/explain-incorrect-answer-flow';
 import type { ChatMessage as ChatMessageType } from '@/types';
 import { ChatMessage } from './chat-message';
 import { useToast } from '@/hooks/use-toast';
-import { Send } from 'lucide-react';
+import { Send, RotateCcw } from 'lucide-react';
 
 interface ChatbotProps {
   imageDataUri: string | null;
@@ -22,6 +23,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
   const [currentMCQ, setCurrentMCQ] = useState<GenerateMCQOutput | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [isAwaitingAnswer, setIsAwaitingAnswer] = useState(false);
+  const [hasAnsweredCorrectly, setHasAnsweredCorrectly] = useState(false);
   const scrollAreaRef = useRef<HTMLDivElement>(null);
   const { toast } = useToast();
 
@@ -36,6 +38,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
     }
     setIsLoading(true);
     setIsAwaitingAnswer(false);
+    setHasAnsweredCorrectly(false);
     setCurrentMCQ(null); 
 
     try {
@@ -58,7 +61,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
   };
 
   useEffect(() => {
-    setMessages([]); // Clear previous messages on new journey/image
+    setMessages([]); 
     addMessage({
       sender: 'ai',
       type: 'text',
@@ -73,12 +76,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
   }, [imageDataUri, journeyTitle]);
 
    useEffect(() => {
-    // This effect ensures that if imageDataUri loads after the initial "Preparing..." message,
-    // we fetch the first MCQ.
     if (imageDataUri && messages.length > 0 && messages[messages.length-1].text === "Preparing your journey...") {
-      // Find the "Preparing..." message and replace it or just fetch MCQ
-      // For simplicity, let's assume the last message was "Preparing..." and then fetch.
-      // A more robust way might involve checking the exact content of the last AI message.
       fetchNewMCQ();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -91,8 +89,10 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
     }
   }, [messages]);
 
-  const handleOptionSelect = (option: string, isCorrect: boolean) => {
-    setIsAwaitingAnswer(false); 
+  const handleOptionSelect = async (option: string, isCorrect: boolean) => {
+    if (!currentMCQ) return;
+
+    setIsAwaitingAnswer(false); // Disable options while processing
 
     addMessage({
       sender: 'user',
@@ -102,16 +102,28 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
 
     if (isCorrect) {
       addMessage({ sender: 'ai', type: 'feedback', text: "That's correct! Well done.", isCorrect: true });
+      setHasAnsweredCorrectly(true);
     } else {
-      addMessage({
-        sender: 'ai',
-        type: 'feedback',
-        text: `Not quite. The correct answer was: ${currentMCQ?.correctAnswer}`,
-        isCorrect: false,
-      });
+      setIsLoading(true);
+      try {
+        const explanationResult = await explainIncorrectAnswer({
+          question: currentMCQ.mcq,
+          options: currentMCQ.options,
+          selectedAnswer: option,
+          correctAnswer: currentMCQ.correctAnswer,
+        });
+        addMessage({ sender: 'ai', type: 'feedback', text: explanationResult.explanation, isCorrect: false });
+      } catch (error) {
+        console.error("Error fetching explanation:", 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}` });
+        // Fallback to simpler incorrect message if explanation fails
+        addMessage({ sender: 'ai', type: 'feedback', text: "That's not quite right. Try again!", isCorrect: false });
+      }
+      setHasAnsweredCorrectly(false); // Ensure it's false
+      setIsAwaitingAnswer(true); // Re-enable options for the same MCQ
+      setIsLoading(false);
     }
-    
-    // Do not automatically fetch next question here. User will click "Next Question" button.
   };
   
   return (
@@ -125,12 +137,12 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
             <ChatMessage 
               key={msg.id} 
               message={msg}
-              activeMCQ={currentMCQ}
-              isAwaitingActiveMCQAnswer={isAwaitingAnswer}
+              activeMCQ={currentMCQ} // Pass currentMCQ to determine if this message is the active one
+              isAwaitingActiveMCQAnswer={msg.type === 'mcq' && isAwaitingAnswer && !hasAnsweredCorrectly} // Options active if it's an MCQ, awaiting answer, and not yet correct
               onOptionSelectActiveMCQ={handleOptionSelect}
             />
           ))}
-          {isLoading && !currentMCQ && (
+          {isLoading && !currentMCQ && messages[messages.length -1]?.type !== 'feedback' && ( // Show loading skeleton only if not loading an explanation
             <div className="flex items-start space-x-3">
                <Skeleton className="h-8 w-8 rounded-full" />
                <div className="space-y-2">
@@ -144,14 +156,24 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
       <div className="border-t bg-background/80 p-4">
         {isLoading && <p className="text-center text-sm text-muted-foreground">AI is thinking...</p>}
         
-        {!isLoading && !isAwaitingAnswer && messages.length > 0 && (
-           <Button onClick={fetchNewMCQ} className="w-full" variant="ghost" disabled={isLoading}>
-            {currentMCQ ? 'Next Question' : 'Start Questions'} <Send className="ml-2 h-4 w-4" />
+        {!isLoading && currentMCQ && hasAnsweredCorrectly && (
+           <Button onClick={fetchNewMCQ} className="w-full" variant="default" disabled={isLoading}>
+            Next Question <Send className="ml-2 h-4 w-4" />
           </Button>
         )}
+
+        {!isLoading && currentMCQ && !hasAnsweredCorrectly && isAwaitingAnswer && (
+            <p className="text-center text-sm text-muted-foreground">
+              Please choose an answer from the options above.
+            </p>
+        )}
+
          {!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' && (
+           <p className="text-center text-sm text-muted-foreground">Loading first question...</p>
+         )}
       </div>
     </div>
   );

src/components/chatbot/mcq-options.tsx

@@ -1,9 +1,10 @@
+
 "use client";
 
 import type { GenerateMCQOutput } from '@/ai/flows/generate-mcq';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 interface MCQOptionsProps {
   mcq: GenerateMCQOutput;
@@ -14,20 +15,28 @@ interface MCQOptionsProps {
 export function MCQOptions({ mcq, onOptionSelect, disabled }: MCQOptionsProps) {
   const [selectedOption, setSelectedOption] = useState<string | null>(null);
 
+  // Reset selectedOption when the options become enabled again (for retries)
+  useEffect(() => {
+    if (!disabled) {
+      setSelectedOption(null);
+    }
+  }, [disabled]);
+
   const handleSelect = (option: string) => {
-    if (disabled || selectedOption) return; // Prevent selection if already disabled or an option is selected
+    // Prevent selection if already disabled (isAwaitingAnswer=false) or an option is already visually selected for this attempt
+    if (disabled || selectedOption) return; 
 
-    setSelectedOption(option);
+    setSelectedOption(option); // Visually mark selection for this attempt
     const isCorrect = option === mcq.correctAnswer;
-    onOptionSelect(option, isCorrect);
+    onOptionSelect(option, isCorrect); // Parent handles disabling/enabling for next state
   };
 
   return (
     <div className="mt-4 space-y-2">
       {mcq.options.map((option, index) => {
-        const isSelected = selectedOption === option;
-        const isCorrectSelection = isSelected && option === mcq.correctAnswer;
-        const isIncorrectSelection = isSelected && option !== mcq.correctAnswer;
+        const isCurrentlySelectedVisual = selectedOption === option;
+        // Visual feedback for correct/incorrect is handled by AI's response message, not here.
+        // These buttons are just for selection.
 
         return (
           <Button
@@ -35,14 +44,13 @@ export function MCQOptions({ mcq, onOptionSelect, disabled }: MCQOptionsProps) {
             variant="outline"
             className={cn(
               'w-full justify-start text-left h-auto py-2.5 px-4 whitespace-normal',
-              isSelected && 'font-semibold',
-              isCorrectSelection && 'bg-green-100 border-green-500 text-green-700 hover:bg-green-200',
-              isIncorrectSelection && 'bg-red-100 border-red-500 text-red-700 hover:bg-red-200',
-              (disabled || selectedOption) && !isSelected && 'opacity-60 cursor-not-allowed'
+              isCurrentlySelectedVisual && 'font-semibold bg-accent/50', // Highlight current visual selection
+              disabled && !isCurrentlySelectedVisual && 'opacity-60 cursor-not-allowed', // Dim unselected options if disabled
+              disabled && isCurrentlySelectedVisual && 'opacity-80 cursor-not-allowed' // Slightly less dim for the one that was just clicked
             )}
             onClick={() => handleSelect(option)}
-            disabled={disabled || !!selectedOption}
-            aria-pressed={isSelected}
+            disabled={disabled || (selectedOption !== null && selectedOption !== option)} // Disable other buttons once one is selected for this attempt
+            aria-pressed={isCurrentlySelectedVisual}
           >
             <span className="mr-2 font-medium">{String.fromCharCode(65 + index)}.</span>
             {option}