Implement chunk loading tips, and autoscrolling to conversation regarding a specific chunk

backend/app.py

@@ -34,14 +34,21 @@ class ChatMessage(BaseModel):
 
 class ChatRequest(BaseModel):
     messages: List[ChatMessage]
-    chunk: Optional[str] = None
+    chunk: Optional[str] = None  # Legacy support
+    currentChunk: Optional[str] = None
+    nextChunk: Optional[str] = None
+    action: Optional[str] = None  # 'skip', 'understood', or None
     document: Optional[str] = None
 
 @app.post("/api/chat")
 async def chat_endpoint(request: ChatRequest):
-    print(f"💬 Received chat with {len(request.messages)} messages")
-    # Use provided chunk and document, or fallback to hardcoded content
-    chunk = request.chunk or "No specific chunk provided"
+    print(f"💬 Received chat with {len(request.messages)} messages, action: {request.action}")
+    
+    # Use new format if available, otherwise fall back to legacy
+    current_chunk = request.currentChunk or request.chunk or "No specific chunk provided"
+    next_chunk = request.nextChunk or ""
+    action = request.action
+    
     document = request.document or """
     # Auswertung Versuch F44: Zeeman Effekt
     Dominic Holst, Moritz Pfau
@@ -163,25 +170,54 @@ async def chat_endpoint(request: ChatRequest):
 
     *Figure 9: Cadmium rote Linie*
     """
-    # Create system prompt for research paper tutor
-    system_prompt = f"""
-    You are PaperMentor, an expert academic tutor. Your purpose is to guide a user to a deep, phenomenological understanding of an academic paper.
+    # Create system prompt for research paper tutor with transition support
+    is_transition = action in ['skip', 'understood']
+    
+    if is_transition:
+        system_prompt = f"""
+        You are PaperMentor, an expert academic tutor guiding the user through a continuous learning journey of an academic paper.
+
+        The user has just {action} the previous section and is transitioning to a new topic. This is part of a continuous conversation where you maintain context and adapt based on the user's actions.
+
+        User's Action: {action}
+        
+        Previous Section:
+        {current_chunk}
+        
+        New Section to Introduce:
+        {next_chunk}
+        
+        Full Document for Context:
+        {document}
+        
+        Your response should:
+        1. **Acknowledge the transition**: Briefly reference their choice to {action} the previous section
+        2. **Provide smooth continuity**: Connect the previous section to this new one naturally
+        3. **Introduce the new section**: Present the new topic with enthusiasm and context
+        4. **Adapt your approach**: If they skipped, perhaps adjust to be more engaging. If they understood, acknowledge their progress
+        5. **Begin new exploration**: Start the 3-question sequence for this new section
+        
+        Maintain the same conversational style and focus on phenomenological understanding.
+        """
+    else:
+        system_prompt = f"""
+        You are PaperMentor, an expert academic tutor. Your purpose is to guide a user to a deep, phenomenological understanding of an academic paper.
 
-    The user's primary goal is to: "phänomenologisch verstehen, was passiert, was beobachtet wurde und warum das so ist, mit wenig Fokus auf Formeln, sondern Fokus auf intuitivem Verständnis und dem experimentellen Ansatz." (phenomenologically understand what is happening, what was observed, and why, with little focus on formulas but a strong focus on intuitive understanding and the experimental approach).
+        The user's primary goal is to: "phänomenologisch verstehen, was passiert, was beobachtet wurde und warum das so ist, mit wenig Fokus auf Formeln, sondern Fokus auf intuitivem Verständnis und dem experimentellen Ansatz." (phenomenologically understand what is happening, what was observed, and why, with little focus on formulas but a strong focus on intuitive understanding and the experimental approach).
 
-    Your entire interaction must be guided by this goal.
+        Your entire interaction must be guided by this goal.
 
-    You will be given a specific chunk of the paper to discuss, as well as the full document for context.
+        You will be given a specific chunk of the paper to discuss, as well as the full document for context.
 
-    ---
-    Current Chunk:
-    {chunk}
-    ---
-    Full Document for Context:
-    {document}
-    ---
+        ---
+        Current Chunk:
+        {current_chunk}
+        ---
+        Full Document for Context:
+        {document}
+        ---
 
-    Your interaction must follow this specific conversational flow:
+        Your interaction must follow this specific conversational flow:
 
     1.  **Greeting and Contextualization:**
         *   Begin with a friendly greeting.
@@ -226,8 +262,12 @@ async def chat_endpoint(request: ChatRequest):
                 for msg in request.messages
                 if msg.role in ["user", "assistant"]
             ]
+            # For transitions, add a dummy user message to trigger Claude response
             if not any(msg["role"] == "user" for msg in anthropic_messages):
-                return {"role": "assistant", "content": "I didn't receive your message. Could you please ask again?"}
+                if is_transition:
+                    anthropic_messages.append({"role": "user", "content": "Please continue to the next section."})
+                else:
+                    return {"role": "assistant", "content": "I didn't receive your message. Could you please ask again?"}
 
         print("🤖 Calling Claude for chat response...")
         response = client.messages.create(
@@ -235,13 +275,9 @@ async def chat_endpoint(request: ChatRequest):
             max_tokens=10000,
             system=system_prompt,  # system prompt here
             messages=anthropic_messages,
-            thinking={
-                "type": "enabled",
-                "budget_tokens": 5000
-            },
         )
 
-        response_text = response.content[1].text
+        response_text = response.content[0].text
         print(f"✅ Received response from Claude: {response_text[:100]}...")
         return {"role": "assistant", "content": response_text}
 

frontend/src/App.css

@@ -40,3 +40,18 @@
 .read-the-docs {
   color: #888;
 }
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.3s ease-out;
+}

frontend/src/components/ChunkLoadingTips.jsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+
+const tips = [
+    "You can always skip a chunk if it's not relevant to your learning goals.",
+    "Be sure to mark a chunk as understood when you've grasped the concept.",
+    "Ask the mentor to confirm your understanding before moving forward.",
+    "Don't hesitate to ask follow-up questions about complex topics.",
+    "Use the previous chunk button to review earlier concepts.",
+    "The mentor adapts explanations based on your questions and responses.",
+    "Take your time - there's no rush to complete chunks quickly.",
+    "Ask for examples when abstract concepts seem unclear.",
+    "Request connections between current and previous chunks when helpful.",
+    "The mentor can explain mathematical formulas step by step."
+];
+
+const ChunkLoadingTips = ({ message = "Preparing your document..." }) => {
+    const [currentTipIndex, setCurrentTipIndex] = useState(0);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setCurrentTipIndex((prev) => (prev + 1) % tips.length);
+        }, 4000); // Change tip every 4 seconds
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <div className="flex flex-col items-center justify-center h-full p-8 text-center">
+            {/* Loading spinner */}
+            <div className="relative mb-8">
+                <div className="w-12 h-12 border-4 border-blue-200 rounded-full animate-spin border-t-blue-600"></div>
+            </div>
+
+            {/* Main message */}
+            <h3 className="text-lg font-medium text-gray-900 mb-2">
+                {message}
+            </h3>
+            <span key={currentTipIndex} className="inline-block animate-fade-in text-gray-500">
+                                {tips[currentTipIndex]}
+                            </span>
+        </div>
+    );
+};
+
+export default ChunkLoadingTips;

frontend/src/components/ChunkPanel.jsx

@@ -2,32 +2,40 @@ import ReactMarkdown from 'react-markdown';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
-import { getChatMarkdownComponents } from '../utils/markdownComponents.jsx';
+import { getChatMarkdownComponents, getTitleMarkdownComponents } from '../utils/markdownComponents.jsx';
 import SimpleChat from './SimpleChat.jsx';
+import ChunkLoadingTips from './ChunkLoadingTips.jsx';
 import React, { useState, useEffect } from 'react';
 
 const ChunkPanel = ({
     documentData,
     currentChunkIndex,
     showChat,
-    updateChunkChatHistory,
-    getCurrentChunkChatHistory,
+    isTransitioning,
+    updateGlobalChatHistory,
+    getGlobalChatHistory,
+    addMessageToChunk,
+    getCurrentChunkMessages,
+    hasChunkMessages,
+    isChunkCompleted,
+    canEditChunk,
     setWaitingForFirstResponse,
     markChunkUnderstood,
-    skipChunk
+    skipChunk,
+    goToPrevChunk
 }) => {
 
     const chatMarkdownComponents = getChatMarkdownComponents();
+    const titleMarkdownComponents = getTitleMarkdownComponents();
     const [isLoading, setIsLoading] = useState(false);
 
-    // Generate greeting only when navigating to a chunk that has no chat history
+    // Generate greeting for chunks that don't have messages yet
+    // Only for initial chunk (0) and when not transitioning
     useEffect(() => {
-        const hasNoMessages = (getCurrentChunkChatHistory()?.length ?? 0) === 0;
-        
-        if (documentData && showChat && hasNoMessages) {
+        if (documentData && showChat && !hasChunkMessages(currentChunkIndex) && currentChunkIndex === 0 && !isTransitioning) {
             generateGreeting();
         }
-    }, [currentChunkIndex]); // Only trigger on chunk navigation
+    }, [currentChunkIndex, documentData, showChat, isTransitioning]);
 
     const generateGreeting = async () => {
         setIsLoading(true);
@@ -40,27 +48,29 @@ const ChunkPanel = ({
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
                     messages: [],
-                    chunk: documentData?.chunks?.[currentChunkIndex]?.text || '',
+                    currentChunk: documentData?.chunks?.[currentChunkIndex]?.text || '',
                     document: documentData ? JSON.stringify(documentData) : ''
                 })
             });
 
             const data = await response.json();
 
-            updateChunkChatHistory([
+            addMessageToChunk(
                 {
                     role: 'assistant',
-                    content: data.content || 'Hi! Ask me anything about this section.'
-                }
-            ]);
+                    content: data.content || 'Hi! Welcome to your learning session. Let\'s explore this document together!'
+                },
+                currentChunkIndex
+            );
         } catch (error) {
             console.error('Error generating greeting:', error);
-            updateChunkChatHistory([
+            addMessageToChunk(
                 {
                     role: 'assistant',
-                    content: 'Hi! Ask me anything about this section.'
-                }
-            ]);
+                    content: 'Hi! Welcome to your learning session. Let\'s explore this document together!'
+                },
+                currentChunkIndex
+            );
         } finally {
             setIsLoading(false);
             if (setWaitingForFirstResponse) {
@@ -70,9 +80,8 @@ const ChunkPanel = ({
     };
 
     const handleSend = async (text) => {
-        const userMessage = { role: 'user', content: text };
-        const newMessages = [...getCurrentChunkChatHistory(), userMessage];
-        updateChunkChatHistory(newMessages);
+        const userMessage = { role: 'user', content: text, chunkIndex: currentChunkIndex };
+        addMessageToChunk(userMessage, currentChunkIndex);
         setIsLoading(true);
 
         try {
@@ -80,23 +89,23 @@ const ChunkPanel = ({
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
-                    messages: newMessages,
-                    chunk: documentData?.chunks?.[currentChunkIndex]?.text || '',
+                    messages: getGlobalChatHistory(),
+                    currentChunk: documentData?.chunks?.[currentChunkIndex]?.text || '',
                     document: documentData ? JSON.stringify(documentData) : ''
                 })
             });
 
             const data = await response.json();
-            updateChunkChatHistory([
-                ...newMessages,
-                { role: 'assistant', content: data.content || 'Sorry, no response received.' }
-            ]);
+            addMessageToChunk(
+                { role: 'assistant', content: data.content || 'Sorry, no response received.' },
+                currentChunkIndex
+            );
         } catch (error) {
             console.error('Error:', error);
-            updateChunkChatHistory([
-                ...newMessages,
-                { role: 'assistant', content: 'Sorry, something went wrong. Please try again.' }
-            ]);
+            addMessageToChunk(
+                { role: 'assistant', content: 'Sorry, something went wrong. Please try again.' },
+                currentChunkIndex
+            );
         } finally {
             setIsLoading(false);
         }
@@ -106,24 +115,44 @@ const ChunkPanel = ({
         <>
             {/* Chunk Header */}
             <div className="px-6 py-4 flex-shrink-0 bg-white rounded-t-lg border-b border-gray-200 z-10 flex items-center justify-between">
-                        <div className="font-semibold text-gray-900 text-left flex-1">
-                            <ReactMarkdown
-                                remarkPlugins={[remarkMath]}
-                                rehypePlugins={[rehypeRaw, rehypeKatex]}
-                                components={{
-                                    p: ({ children }) => <span>{children}</span>, // Render as inline span
-                                    ...chatMarkdownComponents
-                                }}
+                        <div className="flex items-center flex-1">
+                            {/* Previous Chunk Button */}
+                            <button
+                                onClick={goToPrevChunk}
+                                disabled={currentChunkIndex === 0}
+                                className="mr-3 p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-600 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+                                title="Go to previous chunk"
                             >
-                                {documentData?.chunks?.[currentChunkIndex]?.topic || "Loading..."}
-                            </ReactMarkdown>
+                                <svg 
+                                    className="w-5 h-5" 
+                                    fill="currentColor" 
+                                    viewBox="0 0 20 20"
+                                >
+                                    <path 
+                                        fillRule="evenodd" 
+                                        d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" 
+                                        clipRule="evenodd" 
+                                    />
+                                </svg>
+                            </button>
+                            
+                            {/* Chunk Title */}
+                            <div className="font-semibold text-xl text-gray-900 text-left">
+                                <ReactMarkdown
+                                    remarkPlugins={[remarkMath]}
+                                    rehypePlugins={[rehypeRaw, rehypeKatex]}
+                                    components={titleMarkdownComponents}
+                                >
+                                    {documentData?.chunks?.[currentChunkIndex]?.topic || "Loading..."}
+                                </ReactMarkdown>
+                            </div>
                         </div>
                         
                         <div className="flex items-center gap-2">
                             {/* Skip Button */}
                             <button
                                 onClick={skipChunk}
-                                className="p-2 rounded-full bg-red-100 hover:bg-red-200 text-red-600 transition-colors duration-200"
+                                className="p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-600 transition-colors duration-200"
                                 title="Skip this chunk"
                             >
                                 <svg 
@@ -166,14 +195,26 @@ const ChunkPanel = ({
 
             </div>
 
-            {/* Chat Interface - Only shown when showChat is true */}
-            {showChat && (
+            {/* Chat Interface - Only shown when showChat is true and not transitioning */}
+            {showChat && !isLoading && !isTransitioning && (
                     <SimpleChat
-                        messages={getCurrentChunkChatHistory()}
+                        messages={getGlobalChatHistory()}
+                        currentChunkIndex={currentChunkIndex}
+                        canEdit={canEditChunk(currentChunkIndex)}
                         onSend={handleSend}
-                        isLoading={isLoading}
+                        isLoading={isLoading || isTransitioning}
                     />
             )}
+
+            {/* Loading Tips - Shown when generating greeting */}
+            {showChat && isLoading && !hasChunkMessages(currentChunkIndex) && (
+                <ChunkLoadingTips message="Preparing your lesson..." />
+            )}
+
+            {/* Transition Loading - Shown when moving between chunks */}
+            {showChat && isTransitioning && (
+                <ChunkLoadingTips message="Transitioning to next topic..." />
+            )}
         </>
     );
 };

frontend/src/components/DocumentProcessor.jsx

@@ -9,8 +9,8 @@ import { usePanelResize } from '../hooks/usePanelResize';
 // Import components
 import LoadingAnimation from './LoadingAnimation';
 import DocumentViewer from './DocumentViewer';
-import ChunkNavigation from './ChunkNavigation';
 import ChunkPanel from './ChunkPanel';
+import ProgressBar from './ProgressBar';
 
 function DocumentProcessor() {
     // State for PDF navigation
@@ -35,6 +35,7 @@ function DocumentProcessor() {
         currentChunkIndex,
         chunkExpanded,
         showChat,
+        isTransitioning,
         goToNextChunk,
         goToPrevChunk,
         skipChunk,
@@ -43,8 +44,13 @@ function DocumentProcessor() {
         setChunkExpanded,
         setShowChat,
         setChunkAsInteractive,
-        updateChunkChatHistory,
-        getCurrentChunkChatHistory
+        updateGlobalChatHistory,
+        getGlobalChatHistory,
+        addMessageToChunk,
+        getCurrentChunkMessages,
+        hasChunkMessages,
+        isChunkCompleted,
+        canEditChunk
     } = useChunkNavigation(documentData, null);
 
     const {
@@ -90,10 +96,6 @@ function DocumentProcessor() {
         );
     }
 
-    if (processing || waitingForFirstResponse) {
-        return <LoadingAnimation uploadProgress={uploadProgress} />;
-    }
-
     if (!documentData) {
         return (
             <div className="h-screen bg-gray-50 flex items-center justify-center">
@@ -123,12 +125,17 @@ function DocumentProcessor() {
             style={{ cursor: isDragging ? 'col-resize' : 'default' }}
         >
             {/* Left Panel - Document */}
-            <div style={{ width: `${leftPanelWidth}%`, height: '100%' }}>
-                <DocumentViewer
-                    selectedFile={selectedFile}
-                    documentData={documentData}
-                    onPageChange={setPdfNavigation}
-                />
+            <div style={{ width: `${leftPanelWidth}%`, height: '100%' }} className="flex flex-col">
+
+                
+                {/* Document Viewer */}
+                <div className="flex-1 min-h-0">
+                    <DocumentViewer
+                        selectedFile={selectedFile}
+                        documentData={documentData}
+                        onPageChange={setPdfNavigation}
+                    />
+                </div>
             </div>
 
             {/* Resizable Divider */}
@@ -150,27 +157,33 @@ function DocumentProcessor() {
             <div 
                 className="flex flex-col"
                 style={{ width: `${100 - leftPanelWidth}%` }}
-            >
-                {/* Navigation Bar */}
-                <ChunkNavigation
-                    currentChunkIndex={currentChunkIndex}
-                    documentData={documentData}
-                    chunkStates={chunkStates}
-                    goToPrevChunk={goToPrevChunk}
-                    goToNextChunk={goToNextChunk}
-                />
-
+            >                {/* Progress Bar */}
+                <div className="mb-4 flex-shrink-0">
+                    <ProgressBar 
+                        currentChunkIndex={currentChunkIndex}
+                        totalChunks={documentData?.chunks?.length || 0}
+                        onChunkClick={null} // Start with linear progression only
+                    />
+                </div>
+                
                 {/* Chunk Panel */}
                 <div className="flex-1 flex flex-col min-h-0 bg-white rounded-lg shadow-sm">
                     <ChunkPanel
                         documentData={documentData}
                         currentChunkIndex={currentChunkIndex}
                         showChat={showChat}
-                        updateChunkChatHistory={updateChunkChatHistory}
-                        getCurrentChunkChatHistory={getCurrentChunkChatHistory}
+                        isTransitioning={isTransitioning}
+                        updateGlobalChatHistory={updateGlobalChatHistory}
+                        getGlobalChatHistory={getGlobalChatHistory}
+                        addMessageToChunk={addMessageToChunk}
+                        getCurrentChunkMessages={getCurrentChunkMessages}
+                        hasChunkMessages={hasChunkMessages}
+                        isChunkCompleted={isChunkCompleted}
+                        canEditChunk={canEditChunk}
                         setWaitingForFirstResponse={setWaitingForFirstResponse}
                         markChunkUnderstood={markChunkUnderstood}
                         skipChunk={skipChunk}
+                        goToPrevChunk={goToPrevChunk}
                     />
                 </div>
             </div>

frontend/src/components/ProgressBar.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+const ProgressBar = ({ 
+    currentChunkIndex, 
+    totalChunks, 
+    onChunkClick = null // Optional: allow clicking on progress bar segments
+}) => {
+    const progressPercentage = totalChunks > 0 ? ((currentChunkIndex) / totalChunks) * 100 : 0;
+    
+    return (
+        <div className="w-full">
+            {/* Progress Label */}
+            <div className="flex justify-between items-center mb-2">
+                <span className="text-sm font-medium text-gray-700">
+                    Progress: {Math.round(progressPercentage)}%
+                </span>
+                <span className="text-sm text-gray-500">
+                    {currentChunkIndex + 1} of {totalChunks} sections
+                </span>
+            </div>
+            
+            {/* Progress Bar */}
+            <div className="w-full bg-gray-200 rounded-lg h-3 overflow-hidden shadow-sm relative">
+                {/* Progress fill */}
+                <div 
+                    className="h-full bg-green-500 transition-all duration-500 ease-out rounded-lg"
+                    style={{ width: `${progressPercentage}%` }}
+                />
+                
+                {/* Optional: Clickable segments overlay */}
+                {onChunkClick && (
+                    <div className="absolute inset-0 flex">
+                        {Array.from({ length: totalChunks }, (_, index) => (
+                            <button
+                                key={index}
+                                onClick={() => onChunkClick(index)}
+                                className="flex-1 hover:bg-white hover:bg-opacity-20 transition-colors duration-200"
+                                title={`Go to chunk ${index + 1}`}
+                            />
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default ProgressBar;

frontend/src/components/SimpleChat.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
@@ -6,42 +6,60 @@ import rehypeRaw from 'rehype-raw';
 import { getChatMarkdownComponents } from '../utils/markdownComponents.jsx';
 
 
-const SimpleChat = ({ messages, onSend, isLoading }) => {
+const SimpleChat = ({ messages, currentChunkIndex, canEdit, onSend, isLoading }) => {
   const [input, setInput] = useState('');
+  const messagesEndRef = useRef(null);
+  const currentChunkStartRef = useRef(null);
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    if (!input.trim() || isLoading) return;
+    if (!input.trim() || isLoading || !canEdit) return;
     onSend(input.trim());
     setInput('');
   };
 
+  // Scroll to current chunk's first message when chunk changes
+  useEffect(() => {
+    if (currentChunkStartRef.current) {
+      currentChunkStartRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  }, [currentChunkIndex]);
+
+  // Find the first message of the current chunk
+  const currentChunkFirstMessageIndex = messages.findIndex(msg => msg.chunkIndex === currentChunkIndex);
+
   return (
     <div className="flex flex-col h-full">
       {/* Messages */}
       <div className="flex-1 overflow-y-auto p-4 space-y-3">
-        {messages.map((message, idx) => (
-          <div
-            key={idx}
-            className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
-          >
+        {messages.map((message, idx) => {
+          const isCurrentChunk = message.chunkIndex === currentChunkIndex;
+          const isFirstOfCurrentChunk = idx === currentChunkFirstMessageIndex;
+          
+          return (
             <div
-              className={`max-w-[90%] p-3 rounded-lg ${
-                message.role === 'user'
-                  ? 'bg-gray-100 text-white'
-                  : 'bg-white text-gray-900'
-              }`}
+              key={idx}
+              ref={isFirstOfCurrentChunk ? currentChunkStartRef : null}
+              className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
             >
-              <ReactMarkdown
-                  remarkPlugins={[remarkMath]}
-                  rehypePlugins={[rehypeRaw, rehypeKatex]}
-                  components={getChatMarkdownComponents()}
-                >
-                  {message.content}
-                </ReactMarkdown>
+              <div
+                className={`max-w-[90%] p-3 rounded-lg transition-opacity ${
+                  message.role === 'user'
+                    ? `bg-gray-100 text-white ${isCurrentChunk ? 'opacity-100' : 'opacity-40'}`
+                    : `bg-white text-gray-900 ${isCurrentChunk ? 'opacity-100' : 'opacity-40'}`
+                }`}
+              >
+                <ReactMarkdown
+                    remarkPlugins={[remarkMath]}
+                    rehypePlugins={[rehypeRaw, rehypeKatex]}
+                    components={getChatMarkdownComponents()}
+                  >
+                    {message.content}
+                  </ReactMarkdown>
+              </div>
             </div>
-          </div>
-        ))}
+          );
+        })}
 
         {isLoading && (
           <div className="flex justify-start">
@@ -69,13 +87,13 @@ const SimpleChat = ({ messages, onSend, isLoading }) => {
             type="text"
             value={input}
             onChange={(e) => setInput(e.target.value)}
-            placeholder="Type your message..."
-            disabled={isLoading}
-            className="flex-1 px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100"
+            placeholder={canEdit ? "Type your message..." : "This chunk is completed - navigation only"}
+            disabled={isLoading || !canEdit}
+            className="flex-1 px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 disabled:text-gray-500"
           />
           <button
             type="submit"
-            disabled={!input.trim() || isLoading}
+            disabled={!input.trim() || isLoading || !canEdit}
             className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed"
           >
             {isLoading ? '...' : 'Send'}

frontend/src/hooks/useChunkNavigation.js

@@ -4,8 +4,10 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
     const [chunkStates, setChunkStates] = useState({});
     const [currentChunkIndex, setCurrentChunkIndex] = useState(0);
     const [chunkExpanded, setChunkExpanded] = useState(true);
-    const [chunkChatHistories, setChunkChatHistories] = useState({});
+    const [globalChatHistory, setGlobalChatHistory] = useState([]);
     const [showChat, setShowChat] = useState(true);
+    const [isTransitioning, setIsTransitioning] = useState(false);
+    const [completedChunks, setCompletedChunks] = useState(new Set());
 
     const goToNextChunk = () => {
         if (documentData && currentChunkIndex < documentData.chunks.length - 1) {
@@ -27,50 +29,67 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
         }
     };
 
-    const skipChunk = () => {
-        setChunkStates(prev => {
-            const currentState = prev[currentChunkIndex];
-            const newState = currentState === 'skipped' ? undefined : 'skipped';
+    const sendAutomatedMessage = async (action) => {
+        if (!documentData || currentChunkIndex >= documentData.chunks.length - 1) return;
+        
+        setIsTransitioning(true);
+        const nextChunkIndex = currentChunkIndex + 1;
+        const nextChunk = documentData.chunks[nextChunkIndex];
+        
+        // Mark current chunk as completed
+        setCompletedChunks(prev => new Set(prev).add(currentChunkIndex));
+        
+        // Update chunk index immediately for UI feedback
+        setCurrentChunkIndex(nextChunkIndex);
+        setChunkExpanded(true);
+
+        // Check if we already have messages for this chunk
+        if (hasChunkMessages(nextChunkIndex)) {
+            // Don't generate new response, just navigate
+            setIsTransitioning(false);
+            return;
+        }
+
+        try {
+            const response = await fetch('/api/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    messages: globalChatHistory,
+                    currentChunk: documentData.chunks[currentChunkIndex]?.text || '',
+                    nextChunk: nextChunk.text,
+                    action: action,
+                    document: documentData ? JSON.stringify(documentData) : ''
+                })
+            });
+
+            const data = await response.json();
+            addMessageToChunk(
+                { role: 'assistant', content: data.content || 'Let\'s continue to the next section.' },
+                nextChunkIndex
+            );
             
-            // Auto-advance to next chunk if setting to skipped (not toggling off)
-            if (newState === 'skipped' && documentData && currentChunkIndex < documentData.chunks.length - 1) {
-                setTimeout(() => {
-                    if (clearTypingAnimation) {
-                        clearTypingAnimation();
-                    }
-                    setCurrentChunkIndex(currentChunkIndex + 1);
-                    setChunkExpanded(true);
-                }, 100); // Small delay to allow state update to complete
+            // Clear any animations after successful response
+            if (clearTypingAnimation) {
+                clearTypingAnimation();
             }
-            
-            return {
-                ...prev,
-                [currentChunkIndex]: newState
-            };
-        });
+        } catch (error) {
+            console.error('Error in automated transition:', error);
+            // Clear animations on error too
+            if (clearTypingAnimation) {
+                clearTypingAnimation();
+            }
+        } finally {
+            setIsTransitioning(false);
+        }
+    };
+
+    const skipChunk = () => {
+        return sendAutomatedMessage('skip');
     };
 
     const markChunkUnderstood = () => {
-        setChunkStates(prev => {
-            const currentState = prev[currentChunkIndex];
-            const newState = currentState === 'understood' ? undefined : 'understood';
-            
-            // Auto-advance to next chunk if setting to understood (not toggling off)
-            if (newState === 'understood' && documentData && currentChunkIndex < documentData.chunks.length - 1) {
-                setTimeout(() => {
-                    if (clearTypingAnimation) {
-                        clearTypingAnimation();
-                    }
-                    setCurrentChunkIndex(currentChunkIndex + 1);
-                    setChunkExpanded(true);
-                }, 100); // Small delay to allow state update to complete
-            }
-            
-            return {
-                ...prev,
-                [currentChunkIndex]: newState
-            };
-        });
+        return sendAutomatedMessage('understood');
     };
 
     const startInteractiveLesson = (startChunkLessonFn) => {
@@ -82,21 +101,36 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
     };
 
     const setChunkAsInteractive = () => {
-        setChunkStates(prev => ({
-            ...prev,
-            [currentChunkIndex]: 'interactive'
-        }));
+        // No longer tracking status - this is just for compatibility
     };
 
-    const updateChunkChatHistory = (messages) => {
-        setChunkChatHistories(prev => ({
-            ...prev,
-            [currentChunkIndex]: messages
-        }));
+    const updateGlobalChatHistory = (messages) => {
+        setGlobalChatHistory(messages);
+    };
+
+    const getGlobalChatHistory = () => {
+        return globalChatHistory;
+    };
+
+    const addMessageToChunk = (message, chunkIndex) => {
+        const messageWithChunk = { ...message, chunkIndex };
+        setGlobalChatHistory(prev => [...prev, messageWithChunk]);
+    };
+
+    const getCurrentChunkMessages = () => {
+        return globalChatHistory.filter(msg => msg.chunkIndex === currentChunkIndex);
+    };
+
+    const hasChunkMessages = (chunkIndex) => {
+        return globalChatHistory.some(msg => msg.chunkIndex === chunkIndex);
+    };
+
+    const isChunkCompleted = (chunkIndex) => {
+        return completedChunks.has(chunkIndex);
     };
 
-    const getCurrentChunkChatHistory = () => {
-        return chunkChatHistories[currentChunkIndex] || [];
+    const canEditChunk = (chunkIndex) => {
+        return chunkIndex === currentChunkIndex && !isChunkCompleted(chunkIndex);
     };
 
     return {
@@ -104,6 +138,7 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
         currentChunkIndex,
         chunkExpanded,
         showChat,
+        isTransitioning,
         goToNextChunk,
         goToPrevChunk,
         skipChunk,
@@ -112,7 +147,12 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
         setChunkExpanded,
         setShowChat,
         setChunkAsInteractive,
-        updateChunkChatHistory,
-        getCurrentChunkChatHistory
+        updateGlobalChatHistory,
+        getGlobalChatHistory,
+        addMessageToChunk,
+        getCurrentChunkMessages,
+        hasChunkMessages,
+        isChunkCompleted,
+        canEditChunk
     };
 };

frontend/src/utils/markdownComponents.jsx

@@ -1,11 +1,13 @@
+// Default markdown components for chat content
 export const getChatMarkdownComponents = () => ({
-    p: ({ children }) => <p className="mb-2 text-gray-800 leading-relaxed">{children}</p>,
+    p: ({ children }) => <p className="mb-3 text-gray-800 leading-relaxed">{children}</p>,
     h1: ({ children }) => <h1 className="text-xl font-bold mb-3 text-gray-900">{children}</h1>,
     h2: ({ children }) => <h2 className="text-lg font-bold mb-2 text-gray-900">{children}</h2>,
     h3: ({ children }) => <h3 className="text-base font-bold mb-2 text-gray-900">{children}</h3>,
     ul: ({ children }) => <ul className="mb-2 ml-4 list-disc">{children}</ul>,
     ol: ({ children }) => <ol className="mb-2 ml-4 list-decimal">{children}</ol>,
     li: ({ children }) => <li className="mb-1 text-gray-800">{children}</li>,
+    hr: () => <hr className="my-4 border-gray-300" />,
     strong: ({ children }) => <strong className="font-semibold text-gray-900">{children}</strong>,
     em: ({ children }) => <em className="italic">{children}</em>,
     code: ({ inline, children }) => 
@@ -19,4 +21,20 @@ export const getChatMarkdownComponents = () => ({
             {children}
         </blockquote>
     )
+});
+
+// Title-specific markdown components with no bottom margins
+export const getTitleMarkdownComponents = () => ({
+    p: ({ children }) => <span className="text-gray-900">{children}</span>,
+    h1: ({ children }) => <span className="text-xl font-bold text-gray-900">{children}</span>,
+    h2: ({ children }) => <span className="text-lg font-bold text-gray-900">{children}</span>,
+    h3: ({ children }) => <span className="text-base font-bold text-gray-900">{children}</span>,
+    strong: ({ children }) => <strong className="font-semibold text-gray-900">{children}</strong>,
+    em: ({ children }) => <em className="italic">{children}</em>,
+    code: ({ children }) => <code className="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono">{children}</code>,
+    // Convert block elements to inline for titles
+    ul: ({ children }) => <span>{children}</span>,
+    ol: ({ children }) => <span>{children}</span>,
+    li: ({ children }) => <span>{children} </span>,
+    blockquote: ({ children }) => <span className="italic text-gray-700">{children}</span>
 });