I still see a toast message only. not the summary screen. Also, the subt

src/app/journey/[journeyId]/page.tsx

@@ -50,50 +50,66 @@ export default function JourneyPage() {
         setJourney(currentJourney);
         setError(null);
       } else {
-        setError("Journey not found. Please select a valid journey.");
+        setError("Journey not found. Please select a valid journey from the selection page.");
         setJourney(null);
-        toast({
-          title: "Error",
-          description: "Journey not found.",
-          variant: "destructive",
-        });
+        // No toast here, error will be displayed on page
       }
     } else {
-      setError("No journey ID provided.");
-       toast({
-          title: "Error",
-          description: "No journey ID in URL.",
-          variant: "destructive",
-        });
+      setError("No journey ID provided in the URL. Please navigate from the selection page.");
+       // No toast here, error will be displayed on page
     }
-  }, [journeyId, toast]);
+  }, [journeyId]);
 
   useEffect(() => {
+    let isMounted = true;
     if (journey?.imageUrl) {
-      setIsLoadingJourney(true); 
+      setIsLoadingJourney(true);
       imageToDataUri(journey.imageUrl)
         .then(uri => {
-          setImageDataUri(uri);
-          if (!uri) {
-            setError("Failed to load journey image for AI interaction.");
-            toast({
-              title: "Image Load Error",
-              description: "Could not load image data for AI features. Some functionalities might be limited.",
-              variant: "destructive",
-            });
+          if (isMounted) {
+            setImageDataUri(uri);
+            if (!uri) {
+              setError(prev => prev || "Failed to load journey image for AI interaction. Some features may be unavailable.");
+              toast({
+                title: "Image Load Error",
+                description: "Could not load image data for AI features. Chat and summary might be limited.",
+                variant: "destructive",
+              });
+            }
           }
         })
-        .finally(() => setIsLoadingJourney(false));
+        .catch(() => {
+           if (isMounted) {
+            setError(prev => prev || "Error processing journey image. Some features may be unavailable.");
+             toast({
+                title: "Image Processing Error",
+                description: "Could not process image data. Chat and summary might be limited.",
+                variant: "destructive",
+              });
+           }
+        })
+        .finally(() => {
+          if (isMounted) {
+            setIsLoadingJourney(false);
+          }
+        });
     } else if (journey && !journey.imageUrl) {
-      setError("Journey image is missing.");
+      setError(prev => prev || "The selected journey is missing its primary image. AI features cannot be initialized.");
       toast({
-          title: "Missing Image",
-          description: "The selected journey does not have an image.",
+          title: "Missing Journey Image",
+          description: "This journey has no image, so AI chat and summary are unavailable.",
           variant: "destructive",
       });
       setIsLoadingJourney(false);
+    } else if (!journey && !journeyId) { // Handles case where journeyId itself is missing from start
+        setIsLoadingJourney(false); // Stop loading if no journeyId to begin with
     }
-  }, [journey, toast]);
+
+
+    return () => {
+      isMounted = false;
+    };
+  }, [journey, toast, journeyId]);
 
 
   const handleNavigateToSummary = useCallback(() => {
@@ -108,32 +124,47 @@ export default function JourneyPage() {
     router.push(`/journey/${journeyId}/summary`);
   }, [journeyId, router, toast]);
 
-
-  if (error) {
-    return (
+  if (!journeyId) { // Early exit if journeyId is not in URL
+     return (
       <div className="flex min-h-screen flex-col">
         <AppHeader showBackButton backHref="/select-journey" />
         <main className="container mx-auto flex flex-1 items-center justify-center p-4">
           <Alert variant="destructive" className="max-w-md">
             <AlertTriangle className="h-4 w-4" />
-            <AlertTitle>Error</AlertTitle>
-            <AlertDescription>{error}</AlertDescription>
+            <AlertTitle>Error: Missing Journey</AlertTitle>
+            <AlertDescription>No journey ID was provided. Please return to the selection page and choose a journey.</AlertDescription>
           </Alert>
         </main>
       </div>
     );
   }
 
-  if (!journey && !isLoadingJourney && !error) { 
-     return (
+
+  if (isLoadingJourney && !journey && !error) { // Initial loading state for journey itself
+    return (
       <div className="flex min-h-screen flex-col">
-        <AppHeader showBackButton backHref="/select-journey" />
+        <AppHeader showBackButton backHref="/select-journey" title="Loading Journey..." />
         <main className="container mx-auto flex flex-1 items-center justify-center p-4">
           <Loader2 className="h-12 w-12 animate-spin text-primary" />
         </main>
       </div>
     );
   }
+
+  if (error && !journey?.imageUrl) { // Display error if journey loading failed or image is missing preventing essential functions
+    return (
+      <div className="flex min-h-screen flex-col">
+        <AppHeader showBackButton backHref="/select-journey" title="Journey Error"/>
+        <main className="container mx-auto flex flex-1 items-center justify-center p-4">
+          <Alert variant="destructive" className="max-w-lg">
+            <AlertTriangle className="h-4 w-4" />
+            <AlertTitle>Error Loading Journey</AlertTitle>
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        </main>
+      </div>
+    );
+  }
   
   const journeyTitle = journey?.title || 'Loading Journey...';
 
@@ -168,18 +199,20 @@ export default function JourneyPage() {
               <div className="flex h-full w-full flex-col items-center justify-center p-4 text-center">
                  <AlertTriangle className="h-16 w-16 text-destructive mb-4" />
                  <p className="text-destructive-foreground font-semibold">Image Not Available</p>
-                 <p className="text-sm text-muted-foreground">The image for this journey could not be displayed.</p>
+                 <p className="text-sm text-muted-foreground">
+                   {error && error.includes("Failed to load journey image") ? error : "The image for this journey could not be displayed."}
+                 </p>
               </div>
             )}
           </div>
           
           <div className="h-full overflow-y-auto">
-            {isLoadingJourney && !imageDataUri && journey?.imageUrl && ( 
+            {(isLoadingJourney && !imageDataUri && journey?.imageUrl) ? ( 
                 <div className="flex h-full flex-col items-center justify-center rounded-lg border bg-card p-4 shadow-xl">
                     <Loader2 className="h-12 w-12 animate-spin text-primary mb-4" />
                     <p className="text-muted-foreground">Preparing AI interactions...</p>
                 </div>
-            )}
+            ) : null}
             {!isLoadingJourney && imageDataUri && journey && (
               <Chatbot 
                 imageDataUri={imageDataUri} 
@@ -187,11 +220,16 @@ export default function JourneyPage() {
                 journeyId={journeyId}
               />
             )}
-            {((!isLoadingJourney && !imageDataUri && journey) || (!journey?.imageUrl && !isLoadingJourney)) && ( 
+            {/* Case: Journey loaded, but image data URI failed or no image URL, and not actively loading image anymore */}
+            { !isLoadingJourney && !imageDataUri && journey && (
                <div className="flex h-full flex-col items-center justify-center rounded-lg border bg-card p-4 shadow-xl text-center">
                     <AlertTriangle className="h-12 w-12 text-destructive mb-4" />
                     <p className="font-semibold text-destructive">AI Features Unavailable</p>
-                    <p className="text-sm text-muted-foreground">Could not load image data required for AI chat and summary.</p>
+                    <p className="text-sm text-muted-foreground">
+                        {error && (error.includes("Failed to load") || error.includes("missing")) 
+                         ? error
+                         : "Could not load image data required for AI chat. Please check the journey image."}
+                    </p>
                 </div>
             )}
           </div>

src/app/journey/[journeyId]/summary/page.tsx

@@ -39,120 +39,152 @@ export default function SummaryPage() {
   const [journey, setJourney] = useState<Journey | null>(null);
   const [imageDataUri, setImageDataUri] = useState<string | null>(null);
   const [summary, setSummary] = useState<string | null>(null);
-  const [isLoadingJourney, setIsLoadingJourney] = useState(true);
-  const [isLoadingSummary, setIsLoadingSummary] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  
+  const [isLoadingJourneyData, setIsLoadingJourneyData] = useState(true); // For journey object and image data URI
+  const [isLoadingSummary, setIsLoadingSummary] = useState(false); // Specifically for AI summary generation
+  
+  const [pageError, setPageError] = useState<string | null>(null); // For critical errors displayed on page
   const { toast } = useToast();
 
   useEffect(() => {
-    if (journeyId) {
-      const currentJourney = getJourneyById(journeyId);
-      if (currentJourney) {
-        setJourney(currentJourney);
-        setError(null);
-      } else {
-        setError("Journey not found. Please select a valid journey.");
-        setJourney(null);
-        toast({
-          title: "Error",
-          description: "Journey not found.",
-          variant: "destructive",
-        });
-        router.replace('/select-journey'); // Redirect if journey is invalid
+    let isMounted = true;
+    setIsLoadingJourneyData(true);
+    setPageError(null); // Reset page error on new journeyId
+
+    if (!journeyId) {
+      if (isMounted) {
+        setPageError("No journey ID provided. Please select a journey.");
+        setIsLoadingJourneyData(false);
+        // router.replace('/select-journey'); // Consider redirecting
       }
-    } else {
-      setError("No journey ID provided.");
-      toast({
-        title: "Error",
-        description: "No journey ID in URL.",
-        variant: "destructive",
-      });
-      router.replace('/select-journey'); // Redirect if no ID
+      return;
     }
-  }, [journeyId, toast, router]);
 
-  useEffect(() => {
-    if (journey?.imageUrl) {
-      setIsLoadingJourney(true);
-      imageToDataUri(journey.imageUrl)
-        .then(uri => {
-          setImageDataUri(uri);
-          if (!uri) {
-            setError(prev => prev || "Failed to load journey image for summary."); // Keep existing error if one is already set
-            toast({
-              title: "Image Load Error",
-              description: "Could not load image data for summary. The summary might not be available.",
-              variant: "destructive",
-            });
+    const currentJourney = getJourneyById(journeyId);
+    if (!currentJourney) {
+      if (isMounted) {
+        setPageError(`Journey with ID "${journeyId}" not found. Please select a valid journey.`);
+        setIsLoadingJourneyData(false);
+        // router.replace('/select-journey'); // Consider redirecting
+      }
+      return;
+    }
+    
+    if (isMounted) setJourney(currentJourney);
+
+    if (!currentJourney.imageUrl) {
+      if (isMounted) {
+        setPageError("The selected journey is missing an image. A summary cannot be generated without an image.");
+        setImageDataUri(null); // Ensure imageDataUri is null
+        setIsLoadingJourneyData(false);
+      }
+      return;
+    }
+
+    imageToDataUri(currentJourney.imageUrl)
+      .then(uri => {
+        if (isMounted) {
+          if (uri) {
+            setImageDataUri(uri);
+          } else {
+            setPageError("Failed to load and process the journey image. The summary cannot be generated.");
+            setImageDataUri(null);
           }
-        })
-        .finally(() => setIsLoadingJourney(false));
-    } else if (journey && !journey.imageUrl) {
-      setError(prev => prev || "Journey image is missing. Summary cannot be generated.");
-      toast({
-        title: "Missing Image",
-        description: "The selected journey does not have an image, so a summary cannot be generated.",
-        variant: "destructive",
+        }
+      })
+      .catch(() => {
+        if (isMounted) {
+          setPageError("An error occurred while converting the image. The summary cannot be generated.");
+          setImageDataUri(null);
+        }
+      })
+      .finally(() => {
+        if (isMounted) setIsLoadingJourneyData(false);
       });
-      setIsLoadingJourney(false);
-    }
-  }, [journey, toast]);
+      
+    return () => { isMounted = false; };
+  }, [journeyId, router]);
 
   useEffect(() => {
-    if (imageDataUri && !summary && !isLoadingSummary && !error) { // Fetch summary only if image is available, summary isn't fetched, not already loading, and no prior critical error
+    let isMounted = true;
+    // Fetch summary only if:
+    // 1. Journey data and imageDataUri are loaded (isLoadingJourneyData is false)
+    // 2. imageDataUri is actually available
+    // 3. No critical pageError exists
+    // 4. Summary hasn't been fetched yet (summary is null)
+    // 5. Not currently loading a summary
+    if (!isLoadingJourneyData && imageDataUri && !pageError && !summary && !isLoadingSummary) {
       const fetchSummary = async () => {
+        if (!isMounted) return;
         setIsLoadingSummary(true);
         try {
-          const result = await summarizeImage({ imageDataUri });
-          setSummary(result.summary);
+          // imageDataUri is confirmed non-null by the if condition
+          const result = await summarizeImage({ imageDataUri: imageDataUri! });
+          if (isMounted) {
+            if (result && result.summary) {
+              setSummary(result.summary);
+            } else {
+              // This case handles if AI returns unexpected structure
+              setSummary("Failed to generate summary: The AI response was not in the expected format.");
+              toast({
+                title: "Summary Generation Issue",
+                description: "The AI did not provide a summary in the expected format. Please try again later.",
+                variant: "destructive",
+              });
+            }
+          }
         } catch (fetchError) {
           console.error('Error generating summary:', fetchError);
-          const errorMessage = fetchError instanceof Error ? fetchError.message : "An unknown error occurred.";
-          setSummary(`Failed to generate summary: ${errorMessage}`); // Show error in summary area
-          toast({
-            title: "Summary Generation Error",
-            description: `Could not generate summary. ${errorMessage}`,
-            variant: "destructive",
-          });
+          const errorMessage = fetchError instanceof Error ? fetchError.message : "An unknown error occurred during summary generation.";
+          if (isMounted) {
+            setSummary(`Failed to generate summary: ${errorMessage}`); // Show error in summary area
+            toast({
+              title: "Summary Generation Error",
+              description: `Could not generate summary. ${errorMessage}`,
+              variant: "destructive",
+            });
+          }
         } finally {
-          setIsLoadingSummary(false);
+          if (isMounted) setIsLoadingSummary(false);
         }
       };
       fetchSummary();
     }
-  }, [imageDataUri, summary, isLoadingSummary, toast, error]);
+    return () => { isMounted = false; };
+  }, [isLoadingJourneyData, imageDataUri, pageError, summary, isLoadingSummary, toast]);
 
 
-  if (isLoadingJourney && !journey) { // Initial loading state for journey data
-    return (
+  // Display for critical page errors (journey not found, no ID, image missing/failed to load)
+  if (!isLoadingJourneyData && pageError) {
+     return (
       <div className="flex min-h-screen flex-col">
-        <AppHeader showBackButton backHref={journeyId ? `/journey/${journeyId}` : "/select-journey"} title="Loading Summary..." />
+        <AppHeader showBackButton backHref={journeyId ? `/journey/${journeyId}` : "/select-journey"} title="Summary Error" />
         <main className="container mx-auto flex flex-1 items-center justify-center p-4">
-          <Loader2 className="h-12 w-12 animate-spin text-primary" />
+          <Alert variant="destructive" className="max-w-md">
+            <AlertTriangle className="h-4 w-4" />
+            <AlertTitle>Unable to Load Summary</AlertTitle>
+            <AlertDescription>{pageError}</AlertDescription>
+          </Alert>
         </main>
       </div>
     );
   }
-  
-  if (error && !journey) { // Critical error like journey not found
-     return (
+
+  // Display for initial loading of journey data and image
+  if (isLoadingJourneyData) {
+    return (
       <div className="flex min-h-screen flex-col">
-        <AppHeader showBackButton backHref="/select-journey" title="Error" />
+        <AppHeader showBackButton backHref={journeyId ? `/journey/${journeyId}` : "/select-journey"} title="Loading Summary Data..." />
         <main className="container mx-auto flex flex-1 items-center justify-center p-4">
-          <Alert variant="destructive" className="max-w-md">
-            <AlertTriangle className="h-4 w-4" />
-            <AlertTitle>Error</AlertTitle>
-            <AlertDescription>{error}</AlertDescription>
-          </Alert>
+          <Loader2 className="h-12 w-12 animate-spin text-primary" />
         </main>
       </div>
     );
   }
-
+  
   const pageTitle = journey ? `Summary: ${journey.title}` : 'Summary Report';
   const backNavigation = journeyId ? `/journey/${journeyId}` : '/select-journey';
 
-
   return (
     <div className="flex h-screen flex-col">
       <AppHeader
@@ -164,14 +196,9 @@ export default function SummaryPage() {
         <div className="grid h-full grid-cols-1 gap-2 md:grid-cols-2 md:gap-4">
           {/* Left Column: Image */}
           <div className="relative h-full w-full overflow-hidden rounded-lg shadow-lg bg-muted">
-            {isLoadingJourney && journey?.imageUrl ? (
-              <div className="flex h-full w-full flex-col items-center justify-center">
-                 <Loader2 className="h-16 w-16 animate-spin text-primary mb-4" />
-                 <p className="text-muted-foreground">Loading image for {journey?.title || 'journey'}...</p>
-              </div>
-            ) : journey?.imageUrl && imageDataUri ? (
+            {journey?.imageUrl && imageDataUri ? (
               <Image
-                src={journey.imageUrl}
+                src={journey.imageUrl} /* Use original URL for display if data URI conversion was just for AI */
                 alt={journey.title}
                 layout="fill"
                 objectFit="cover"
@@ -183,7 +210,9 @@ export default function SummaryPage() {
               <div className="flex h-full w-full flex-col items-center justify-center p-4 text-center">
                  <AlertTriangle className="h-16 w-16 text-destructive mb-4" />
                  <p className="text-destructive-foreground font-semibold">Image Not Available</p>
-                 <p className="text-sm text-muted-foreground">The image for this journey could not be displayed.</p>
+                 <p className="text-sm text-muted-foreground">
+                    {pageError || "The image for this journey could not be displayed."}
+                 </p>
               </div>
             )}
           </div>
@@ -202,35 +231,39 @@ export default function SummaryPage() {
                 <Skeleton className="h-5 w-full rounded-md" />
               </div>
             )}
-            {!isLoadingSummary && summary && (
+            {!isLoadingSummary && summary && !summary.startsWith("Failed to generate summary:") && (
               <div className="prose prose-sm dark:prose-invert max-w-none whitespace-pre-wrap font-body">
                 {summary}
               </div>
             )}
-            {!isLoadingSummary && !summary && imageDataUri && !error && ( // Waiting for summary, image is ready
+            {/* Displaying error message from summary state if summary generation failed */}
+            {!isLoadingSummary && summary && summary.startsWith("Failed to generate summary:") && (
+                 <Alert variant="destructive">
+                    <AlertTriangle className="h-4 w-4" />
+                    <AlertTitle>Summary Generation Failed</AlertTitle>
+                    <AlertDescription>{summary}</AlertDescription>
+                </Alert>
+            )}
+            {/* Message if summary cannot be generated due to earlier pageError (e.g., no image) */}
+            {!isLoadingSummary && !summary && pageError && (
+                 <Alert variant="destructive">
+                    <AlertTriangle className="h-4 w-4" />
+                    <AlertTitle>Summary Unavailable</AlertTitle>
+                    <AlertDescription>{pageError}</AlertDescription>
+                </Alert>
+            )}
+             {/* Fallback for when summary is null, not loading, and no specific page error for summary generation */}
+            {!isLoadingSummary && !summary && !pageError && imageDataUri && (
                <div className="flex flex-col items-center justify-center py-10 text-muted-foreground">
                   <Loader2 className="h-8 w-8 animate-spin mb-2 text-primary" />
-                  <p>Generating summary insights...</p>
+                  <p>Preparing summary insights...</p> {/* Should transition to loading or result */}
               </div>
             )}
-            {!imageDataUri && !isLoadingJourney && ( // Image data failed to load or no image URL
+            {!imageDataUri && !isLoadingJourneyData && !pageError && ( // Case where image is confirmed unavailable, not loading, and no other critical error
               <div className="py-10 text-center text-muted-foreground">
                 <AlertTriangle className="h-8 w-8 text-destructive mx-auto mb-2" />
                 <p className="font-semibold text-destructive">Summary Unavailable</p>
-                <p>Image data is not available, so a summary cannot be generated.</p>
-              </div>
-            )}
-             {error && !summary && !isLoadingSummary && ( // An error occurred that prevented summary generation
-              <div className="py-10 text-center">
-                <Alert variant="destructive">
-                    <AlertTriangle className="h-4 w-4" />
-                    <AlertTitle>Summary Error</AlertTitle>
-                    <AlertDescription>
-                        {error.includes("Journey image is missing") || error.includes("Failed to load journey image") 
-                         ? error 
-                         : "Could not generate summary at this time."}
-                    </AlertDescription>
-                </Alert>
+                <p>Image data is not available, so a summary cannot be generated for this journey.</p>
               </div>
             )}
           </div>

src/components/chatbot/chatbot.tsx

@@ -13,21 +13,21 @@ import { explainCorrectAnswer } from '@/ai/flows/explain-correct-answer-flow';
 import type { ChatMessage as ChatMessageType, ActiveMCQ } from '@/types';
 import { ChatMessage } from './chat-message';
 import { useToast } from '@/hooks/use-toast';
-import { Send, FileText } from 'lucide-react';
+import { Send, FileText, Loader2 } from 'lucide-react';
 
 const MAX_QUESTIONS = 5;
 
 interface ChatbotProps {
   imageDataUri: string | null;
   journeyTitle: string;
-  journeyId: string; // Added to navigate to summary page
+  journeyId: string;
 }
 
 export function Chatbot({ imageDataUri, journeyTitle, journeyId }: ChatbotProps) {
   const router = useRouter();
   const [messages, setMessages] = useState<ChatMessageType[]>([]);
   const [currentMCQ, setCurrentMCQ] = useState<ActiveMCQ | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false); // General loading for AI responses
   const [isAwaitingAnswer, setIsAwaitingAnswer] = useState(false);
   const [hasAnsweredCorrectly, setHasAnsweredCorrectly] = useState(false);
   const [incorrectAttempts, setIncorrectAttempts] = useState<string[]>([]);
@@ -58,10 +58,12 @@ export function Chatbot({ imageDataUri, journeyTitle, journeyId }: ChatbotProps)
     isInitialQuestionRef.current = true;
     messageIdCounter.current = 0;
 
-
     const performInitialFetch = async () => {
       if (!imageDataUri) {
-        if (!ignore && messages.length === 0) { 
+        // This case should ideally be handled by parent not rendering Chatbot,
+        // or showing a "waiting for image" state if Chatbot is rendered before URI is ready.
+        if (!ignore && messages.length === 0) {
+          // Add a temporary "preparing" message if no URI yet, but this will be cleared.
           addMessage({ sender: 'ai', type: 'text', text: "Preparing your journey..." });
         }
         return;
@@ -70,13 +72,18 @@ export function Chatbot({ imageDataUri, journeyTitle, journeyId }: ChatbotProps)
       if (!ignore) setIsLoading(true);
 
       try {
+        // Clear any "Preparing..." message before fetching the actual question
+        if (messages.length === 1 && messages[0].text === "Preparing your journey...") {
+            setMessages([]);
+        }
+
         const mcqResult = await generateMCQ({ imageDataUri });
 
         if (ignore) return;
 
         let activeMcqData: ActiveMCQ = {
           ...mcqResult,
-          originalQuestionTextForFlow: mcqResult.mcq, 
+          originalQuestionTextForFlow: mcqResult.mcq,
         };
         
         if (isInitialQuestionRef.current) {
@@ -105,18 +112,19 @@ export function Chatbot({ imageDataUri, journeyTitle, journeyId }: ChatbotProps)
       }
     };
     
+    // Trigger initial fetch if imageDataUri is present.
+    // If imageDataUri is not present initially, this effect will re-run when it becomes available.
     if (imageDataUri) {
-        // Clear "Preparing..." message if it exists, then fetch
-        if (messages.length === 1 && messages[0].text === "Preparing your journey...") {
-            setMessages([]); // Clear it before fetching
-        }
         performInitialFetch();
-    } else if (messages.length === 0) { // Only add "Preparing..." if no image and no messages yet
+    } else if (messages.length === 0) { 
+        // If there's no image URI and no messages, show "Preparing..."
+        // This typically means the parent component is still loading the image.
         addMessage({ sender: 'ai', type: 'text', text: "Preparing your journey..." });
     }
 
+
     return () => {
-      ignore = true;
+      ignore = true; // Cleanup to prevent state updates on unmounted component
     };
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [imageDataUri, journeyTitle]); // addMessage is memoized
@@ -131,11 +139,11 @@ export function Chatbot({ imageDataUri, journeyTitle, journeyId }: ChatbotProps)
   const handleOptionSelect = async (option: string, isCorrect: boolean) => {
     if (!currentMCQ) return;
 
-    setIsAwaitingAnswer(false);
+    setIsAwaitingAnswer(false); // User has made a selection
 
     addMessage({
       sender: 'user',
-      type: 'user',
+      type: 'user', // This type indicates it's the user's selected option text
       text: option,
     });
 
@@ -156,12 +164,13 @@ export function Chatbot({ imageDataUri, journeyTitle, journeyId }: ChatbotProps)
         const errorMsg = error instanceof Error ? error.message : "An unknown error occurred";
         combinedMessage += ` (Sorry, I couldn't provide an explanation for that: ${errorMsg})`;
       }
+
       addMessage({ sender: 'ai', type: 'feedback', text: combinedMessage, isCorrect: true });
       setHasAnsweredCorrectly(true);
       setIncorrectAttempts([]);
       const newQuestionCount = questionCount + 1;
       setQuestionCount(newQuestionCount);
-      if (newQuestionCount >= MAX_QUESTIONS) {
+       if (newQuestionCount >= MAX_QUESTIONS) {
         addMessage({ sender: 'ai', type: 'text', text: "You've completed all 5 questions! Please proceed to the summary report." });
       }
 
@@ -169,9 +178,11 @@ export function Chatbot({ imageDataUri, journeyTitle, journeyId }: ChatbotProps)
       const updatedIncorrectAttempts = [...incorrectAttempts, option];
       setIncorrectAttempts(updatedIncorrectAttempts);
 
-      if (updatedIncorrectAttempts.length >= currentMCQ.options.length - 1) { // All incorrect options exhausted
+      // Check if all incorrect options have been exhausted
+      if (updatedIncorrectAttempts.length >= currentMCQ.options.length - 1) {
         let combinedText = "";
         try {
+          // Explain why the *last chosen* option was incorrect
           const incorrectExplanationResult = await explainIncorrectAnswer({
             question: questionForAI,
             options: currentMCQ.options,
@@ -181,13 +192,14 @@ export function Chatbot({ imageDataUri, journeyTitle, journeyId }: ChatbotProps)
           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}) `;
+           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 {
+          // Explain why the actual correct answer is correct
           const correctExplanationResult = await explainCorrectAnswer({
             question: questionForAI,
             options: currentMCQ.options,
@@ -202,7 +214,7 @@ export function Chatbot({ imageDataUri, journeyTitle, journeyId }: ChatbotProps)
 
         addMessage({
           sender: 'ai',
-          type: 'feedback',
+          type: 'feedback', // This will be handled by ChatMessage to not show options
           text: combinedText.trim(),
           isCorrect: true, // Mark as 'correct' flow-wise to enable next question/summary
         });
@@ -236,7 +248,6 @@ export function Chatbot({ imageDataUri, journeyTitle, journeyId }: ChatbotProps)
         } catch (error) {
           console.error("Error fetching explanation for incorrect answer:", error);
           const errorMsg = error instanceof Error ? error.message : "An unknown error occurred";
-          // Fallback if explanation fails - still re-prompt
           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,
@@ -253,21 +264,20 @@ export function Chatbot({ imageDataUri, journeyTitle, journeyId }: ChatbotProps)
 
   const handleNextQuestionClick = async () => {
     if (questionCount >= MAX_QUESTIONS) {
-      // This case should ideally be handled by the summary button appearing
-      // but as a fallback, prevent fetching more questions.
       addMessage({ sender: 'ai', type: 'text', text: "You've completed all the questions! Please proceed to the summary." });
       setIsLoading(false);
-      setHasAnsweredCorrectly(true); // Keep UI consistent for summary button
+      setHasAnsweredCorrectly(true);
       return;
     }
 
-    setIsAwaitingAnswer(false); // Reset for the new question
+    setIsAwaitingAnswer(false); 
     setHasAnsweredCorrectly(false);
-    setCurrentMCQ(null); // Clear current MCQ to show loading for next
-    setIncorrectAttempts([]); // Clear attempts for the new question
+    setCurrentMCQ(null); 
+    setIncorrectAttempts([]); 
     
     if (!imageDataUri) {
       addMessage({ sender: 'ai', type: 'error', text: "Image data is not available to generate new questions." });
+      toast({ title: "Error", description: "Cannot fetch new question: Image data missing.", variant: "destructive" });
       return;
     }
     setIsLoading(true);
@@ -275,7 +285,7 @@ export function Chatbot({ imageDataUri, journeyTitle, journeyId }: ChatbotProps)
       const mcqResult = await generateMCQ({ imageDataUri });
       const nextMCQData: ActiveMCQ = {
         ...mcqResult,
-        originalQuestionTextForFlow: mcqResult.mcq, // Store the original question
+        originalQuestionTextForFlow: mcqResult.mcq, 
       };
       setCurrentMCQ(nextMCQData);
       addMessage({ sender: 'ai', type: 'mcq', mcq: nextMCQData });
@@ -289,6 +299,7 @@ export function Chatbot({ imageDataUri, journeyTitle, journeyId }: ChatbotProps)
         description: `Could not generate a new question. ${errorMessage}`,
         variant: "destructive",
       });
+      // Potentially allow user to try again or go to summary if multiple errors occur
     } finally {
       setIsLoading(false);
     }
@@ -307,15 +318,11 @@ export function Chatbot({ imageDataUri, journeyTitle, journeyId }: ChatbotProps)
       <ScrollArea className="flex-1 p-4" ref={scrollAreaRef}>
         <div className="space-y-4">
           {messages.map((msg) => {
-            // Determine if this message is the currently active MCQ
              const isLastMessageTheActiveMCQ =
               msg.type === 'mcq' &&
               currentMCQ &&
-              // Compare based on the unique ID of the message object
               msg.id === messages.findLast(m => m.type === 'mcq' && m.mcq?.mcq === currentMCQ.mcq && JSON.stringify(m.mcq?.options) === JSON.stringify(currentMCQ.options))?.id;
 
-            // Options should be interactive only for the last instance of the currentMCQ
-            // and if we are awaiting an answer and it hasn't been correctly answered yet.
             const shouldThisMessageBeInteractive =
               isLastMessageTheActiveMCQ &&
               isAwaitingAnswer &&
@@ -323,21 +330,20 @@ export function Chatbot({ imageDataUri, journeyTitle, journeyId }: ChatbotProps)
             
             return (
               <ChatMessage
-                key={msg.id} // Unique key for React list
+                key={msg.id}
                 message={msg}
                 activeMCQ={currentMCQ} 
                 isAwaitingActiveMCQAnswer={shouldThisMessageBeInteractive}
                 onOptionSelectActiveMCQ={handleOptionSelect}
                 incorrectAttemptsForMCQ={
-                  shouldThisMessageBeInteractive // Pass incorrect attempts only to the interactive MCQ
+                  shouldThisMessageBeInteractive
                   ? incorrectAttempts
-                  : [] // Otherwise, pass empty array to prevent visual glitches on old messages
+                  : [] 
                 }
               />
             );
           })}
-          {/* Skeleton for initial loading or when fetching next question before currentMCQ is set */}
-          {isLoading && !currentMCQ && messages[messages.length -1]?.type !== 'feedback' && ( // Avoid skeleton if last msg was feedback for resolved q
+          {isLoading && !currentMCQ && messages[messages.length -1]?.type !== 'feedback' && (
             <div className="flex items-start space-x-3">
                <Skeleton className="h-8 w-8 rounded-full" />
                <div className="space-y-2">
@@ -349,7 +355,12 @@ export function Chatbot({ imageDataUri, journeyTitle, journeyId }: ChatbotProps)
         </div>
       </ScrollArea>
       <div className="border-t bg-background/80 p-4">
-        {isLoading && <p className="text-center text-sm text-muted-foreground">AI is thinking...</p>}
+        {isLoading && (
+            <div className="flex items-center justify-center text-sm text-muted-foreground">
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                AI is thinking...
+            </div>
+        )}
 
         {!isLoading && questionCount >= MAX_QUESTIONS && hasAnsweredCorrectly && (
           <Button onClick={handleGoToSummary} className="w-full" variant="default">
@@ -362,25 +373,21 @@ export function Chatbot({ imageDataUri, journeyTitle, journeyId }: ChatbotProps)
             Next Question <Send className="ml-2 h-4 w-4" />
           </Button>
         )}
-
-        {/* Message when awaiting answer for a current MCQ */}
+        
         {!isLoading && currentMCQ && !hasAnsweredCorrectly && isAwaitingAnswer && (
             <p className="text-center text-sm text-muted-foreground">
               Please choose an answer from the options above.
             </p>
         )}
 
-        {/* Message for initial loading of journey/image */}
-         {!imageDataUri && !isLoading && messages.length > 0 && messages[messages.length -1]?.text === "Preparing your journey..." &&(
+        {!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>
         )}
-         {/* Message for initial question load (image ready, no messages yet or error) */}
          {!currentMCQ && !isLoading && imageDataUri && messages.length === 0 && ( 
            <p className="text-center text-sm text-muted-foreground">Loading first question...</p>
          )}
-          {/* Message if initial question load failed */}
           {!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>
+             <p className="text-center text-sm text-destructive">Could not load question. Try refreshing the page or selecting another journey.</p>
          )}
       </div>
     </div>

src/components/journey/summary-report-dialog.tsx

@@ -1,2 +1,4 @@
-// This file is no longer needed and will be deleted.
-// The summary report is now a dedicated page: /src/app/journey/[journeyId]/summary/page.tsx
+
+// This file is no longer needed as the summary report is a dedicated page.
+// This file can be deleted from the project.
+// The build system should prune unreferenced files.