Merge branch 'dev' into main

backend/app.py

@@ -1,13 +1,14 @@
 from fastapi import FastAPI, File, UploadFile, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
-from fastapi.responses import FileResponse
+from fastapi.responses import FileResponse, StreamingResponse
 import os
 import tempfile
 from dotenv import load_dotenv
 from pydantic import BaseModel
 from typing import Optional, List
 import anthropic
+import json
 
 # Load environment variables
 load_dotenv()
@@ -34,14 +35,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 +171,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 +263,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 +276,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}
 
@@ -279,6 +316,269 @@ async def upload_pdf(file: UploadFile = File(...)):
         print(f"❌ Error uploading PDF: {e}")
         raise HTTPException(status_code=500, detail=f"PDF upload error: {str(e)}")
 
+@app.post("/api/chat/stream")
+async def chat_stream(request: ChatRequest):
+    """Streaming chat endpoint for continuous conversation"""
+    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
+    October 23, 2020
+
+    ## 1 Magnetfeld und Hysterese
+    Zu Beginn des Versuchs haben wir mit Hilfe des Teslameters die Magnetfeldstärke B an der Position der Cd-Lampe bei verschiedenen Spulenströmen gemessen (siehe Messwerte in Tabelle 1 im Laborbuch). In Figure 1 sind die gemessenen Feldstärken als Funktion der Stromstärke aufgetragen.
+
+    Anhand der Fehlerbalken und der praktisch identischen Überlagerung der beiden linearen Fitgeraden für auf- und absteigende Stromstärken, wird deutlich, dass **keine Hystereseeffekte vorliegen**. Der lineare Fit wurde hierbei nur auf die Stromstärken bis einschl. 10A angewandt, da für größere Stromstärken das Magnetfeld nicht in direktem proportionalen Zusammenhang ansteigt. Dies ist mit Sättigungseffekten der Magnetisierung des Eisenkerns der verwendeten Spule zu erklären.
+
+    *Figure 1: Messung des Magnetfelds als Funktion der Stromstärke*
+
+    ## 2 Qualitative Beobachtung des Zeeman Effekts
+    Mit Hilfe der CMOS Kamera wurde das Spektrum des emittierten Lichts der Cadmiumlampe unter Verwendung des Lummer Gehercke Interferometers beobachtet. Die Beobachtungen wurden in longitudinaler und transversaler Richtung zum Magnetfeld durchgeführt.
+
+    ### 2.1 Longitudinale Richtung:
+    **ohne Filter:**
+    Es sind deutlich zwei Linien pro Ordnung zu erkennen. Dies sind die σ+ und σ' Linien. Die π Linie ist in longitudinaler Richtung nicht zu beobachten
+
+    **mit λ/4-Plättchen und Polarisationsfilter:**
+    Von der Cadmiumlampe aus betrachtet wird zuerst ein λ/4-Plättchen und danach ein Polarisationsfilter in den Strahlengang gebracht. Je nach Ausrichtung der Filter zueinander wird nun eine der beiden Linien ausgeblendet.
+
+    **-45° Winkel:**
+    Stehen λ/4-Plättchen und Polarisationsfilter zueinander im −45° Winkel, wird das zirkular polarisierte Licht der σ¯ Linie um 45° verschoben linear polarisiert und somit vom Polarisationsfilter abgeschirmt. Folglich ist in dieser Konstellation nur die linke der beiden σ Linien zu beobachten.
+
+    **+45° Winkel:**
+    Stehen λ/4-Plättchen und Polarisationsfilter zueinander im +45° Winkel, ist nach analogem Prinzip wie zuvor nur die rechte Linie auf dem Kamerabild zu beobachten.
+
+    *Figure 2: Bilder der CMOS Kamera in longitudinaler Richtung mit a) λ/4-Plättchen und Polarisationsfilter im −45° Winkel, b) ohne Filter und c) Filter im +45° Winkel*
+
+    ### 2.2 Transversale Richtung:
+    **ohne Filter:**
+    Es sind deutlich drei Linien pro Ordnung zu erkennen. Dies sind die σ⁺, π und σ⁻ Linien.
+
+    **mit Polarisationsfilter horizontal (in B-Feld Richtung):**
+    Die beiden σ-Linien sind vollständig ausgeblendet. Die π- Linie ist deutlich sichtbar.
+
+    **mit Polarisationsfilter vertikal (90° zu B-Feld Richtung):**
+    Die beiden σ-Linien sind klar sichtbar. Die π-Linie ist ausgeblendet.
+
+    *Figure 3: Bilder der CMOS Kamera in vertikaler Richtung mit a) keinem Filter, b) Polarisationsfilter horizontal und c) Polarisationsfilter vertikal*
+
+    Wie in Figure 3 gut zu erkennen ist, sind die ausgeblendeten Linien in beiden Konfigurationen weiterhin leicht sichtbar. Dies ist auf das nicht perfekt homogene Magnetfeld am Ort der Ca-Lampe zurückzuführen. Das Licht ist also nicht perfekt zirkular bzw. in B-Feld Richtung polarisiert, weshalb ein vollständiges Ausblenden im Experiment nicht zu beobachten ist.
+
+    ## 3 Spektroskopie des Zeemaneffekts
+
+    ### 3.1 Bestimmen des Zeemanshifts
+    Die Messdaten bei verschiedene Stromstärken wurden jeweils in einem Plot dargestellt. Um für den Fit möglichst saubere Messkurven des Spektrums zu verwenden, wurde die Messreihe bei I = 8A nicht in die Datenauswertung einbezogen, da die Aufspaltung der Cadmiumlinie nur schwer zu beobachten war. Das gleich gilt für die 8. Interferenzodnung, die nicht berücksichtigt wurde. Für die Datenauswertung fließen also die Nullte bis 7. Ordnung jeweils bei 9 bis 13 Ampere ein.
+    Als Funktion um die Messdaten zu fitten wurde ein Pseudo-Voigt-Profil verwendet. Die drei Kurven einer Ordnung wurden hierbei gemeinsam mit der Summe dreier Pseudo-Voigt-Profile gefittet. In Figure 4 sind exemplarisch anhand der Daten für I = 12A die Messdaten und der abschnittsweise Fit zu erkennen.
+
+    *Figure 4: Messdaten und Voigt-Fit bei Spulenstrom I = 12A*
+
+    Anhand der Fitparameter wird die Position der σ und π Linien bestimmt. Die Fehler der Fitparameter sind extrem klein (≈ 0,1px) und eigenen sich nicht als realistische Fehler für unsere weitere Rechnung. Als minimalen Fehler nehmen wir daher die Auflösung der Kamera an (1px) und skalieren alle Fehler so, dass der kleineste Fehler exakt 1px beträgt. Die anderen Fehler sind dann entsprechend linear skaliert größer. Dies berücksichtigt die unterschiedliche Qualität der Fits auf unterschiedliche Interferenz-Ordnungen, bringt die Fehler aber in einen experimentell realistischen Bereich.
+    Für die Berechnung des Zeemanshifts müssen die Verzerrungseffekte der Lummer-Gehrcke-Platte beachtet werden. Hierfür wird die Position der π-Linien gegen der Interferenzordnung k der entsprechenden Linie aufgetragen. Der funktionelle Zusammenhang dieser beiden Größen wird durch eine quadratische Funktion k = f(a) approximiert:
+
+    k = f(a) = ba² + ca + d (1)
+
+    Wir verwenden hier eine Taylor-Näherung für eine in der Realität deutlich kompliziertere Funktion. Dies ist aber, wie in Figure 5 gut ersichtlich, für unsere Zwecke weitaus ausreichend.
+    Die beiden σ-Linien können auf den quadratischen Fit f(a) projiziert werden, wodurch wir die jeweilige (nicht mehr ganzzahligen) Ordnung der σ-Linien erhalten. In Figure 5 ist (wieder exemplarisch für I = 12A) die optische Verzerrung der Platte aufgetragen.
+
+    *Figure 5: Verzerrungseffekte der Lummer-Gehrcke-Platte bei I = 12A*
+
+    Die Differenz zur ganzzahligen Ordnung der zugehörigen π-Linie ergibt δk. Für eine (kleine) Wellenlängenverschiebung δλ gilt:
+
+    δλ = δk / Δk * λ² / (2d * sqrt(n² − 1)) (2)
+
+    Für den Abstand Δk zweier Ordnungen gilt Δk = 1. Für die Wellenlänge λ der betrachten Linie verwenden wir den in Part 2 bestimmten Wert von λ = (643, 842 ± 0, 007)nm.
+    Wir kennen nun die Wellenlänge des Zeemanshift für jede von uns betrachtete Linie. Mit dem Zusammenhang zwischen Wellenlänge und Energie E = hc/λ lässt sich nun die Energieverschiebung der Linine bestimmen. Wir nehmen an, dass die Wellenlängenverschiebung δλ klein gegenüber der absoluten Wellenlänge λ ist, und erhalten daher für die Energieverschiebung δE in guter Näherung:
+
+    δE = (hc/λ²) * δλ (3)
+
+    Abschließend nehmen wir den Durchschnitt aller Werte δE für eine Stromstärke I.
+
+    ### 3.2 Bestimmen des Bohrschen Magnetons μB
+    Für die Energieverschiebung beim Zeemaneffekt gilt:
+
+    δE = μB · ml · B (4)
+
+    Da es sich bei der betrachteten Cadmiumlinie um einen ¹D₂ → ¹P₁ Übergang handelt gilt hier ml = ±1. Somit folgt für das Bohrsche Magneton μB als Funktion des Spulenstroms I:
+
+    μB(I) = δE(I) / B(I) (5)
+
+    Die Magnetfeldstärke B(I) wurde hier anhand der Messwerte aus Teil 1 des Experiments bestimmt.
+    Wir erhalten für jeden Spulenstrom I einen experimentell bestimmten Wert des Bohrschen Magnetons μB. Unsere Ergebnisse sind in Figure 6 graphisch dargestellt.
+
+    *Figure 6: Experimentell bestimmte Werte für das Bohrsche Magneton bei unterschiedlichen Spulenströmen I*
+
+    Für den experimentellen Mittelwert erhalten wir:
+    μB,exp = (10, 1 ± 0.8) · 10⁻²⁴ J/T
+
+    Der Literaturwert beträgt:
+    μB,lit = 9, 27400949 · 10⁻²⁴ J/T
+
+    Unsere experimentell ermittelte Wert weicht also um 1,2 Sigma vom Literaturwert ab. Die Abweichung ist folglich nicht signifikant.
+
+    ### 3.3 Kritische Betrachtung der Ergebnisse
+    Erfreulicherweise scheint unsere experimentelle Methode keine signifikante Abweichung zwischen Literaturwert und experimentellem Wert des Bohrschen Magnetons zu ergeben. Wir befinden uns mit unserem Wert im niedrigen 2-Sigma-Intervall. Dennoch ist kritisch anzumerken, dass wir einen vergleichsweise großen realtiven Fehler auf unser Messergebnis von 7,1% erhalten. Das bedeutet, unsere Abweichung ist zwar nicht sigifikant, dennoch weicht unser experimenteller Wert um knapp 10% vom Literaturwert ab. Der verwendete experimentelle Aufbau ist folglich nur bedingt für eine exakte Bestimmung des Bohrschen Magnetons geeigent.
+
+    Die beiden dominierenden Fehlerquellen sind zum einen die Bestimmung des Magnetfeldes B am Ort der Cadmium Lampe (Inhomogenitäten, exakte Platzierung der Lampe) und zum anderen die Wahl der Fehler der Positionen der π- und σ -Linien im Spektrum.
+    Zum Vergleich: Legt man den Fehler prinzipiell für alle Linien auf 1px, also die maximale Auflösung der Kamera, fest und verzichtet auf eine Skalierung der Fehler, beträgt die Abweichung des exp. Werts zum Literaturwert schon 2,8 Sigma. Wählt man analog für den Fehler der Linien 2px, da beispielsweise ein Maximum auch exakt zwischen zwei Pixelreihen liegen kann, liegt die Abweichung bei 1,4 Sigma.
+
+    ## 4 Quantitative Betrachtung des Spektrums
+
+    ### 4.1 Wellenlänge rote Cd-Linie
+
+    *Figure 7: Neonspektrum*
+
+    Zunächst wird der Untergrund von den Messdaten abgezogen, um Störungen durch Rauschen oder Sondereffekte wie kosmische Strahlung oder Umgebungsquellen zu eliminieren. Sollten sich in den Spektren negative Werte befinden, ist dies auf zufällige Unterschiede im Rauschen zurückzuführen. Anhand bekannter Linien des Neonspektrums werden den Pixeln nun Wellenlängen zugeordnet. Hierfür wurde der Bereich des Neonspektrums aufgenommen, in dem sich auch die rote Linie des Cadmiumspektrums befindet. In 7 sieht man das Neonspektrum und die Peaks, an die jeweils ein Voigt-Profil gelegt wurde. Jetzt kann man den identifizierten Linien ihre jeweilige Wellenlänge zuordnen und einen polynomiellen Zusammenhang finden. Wir haben uns für eine Gerade entschieden, die wie in Figure 8 zu sehen gut zu den Daten passt.
+    Schließlich wird ein Voigt-Profil an die gemessene rote Cd-Linie gelegt, wie in Figure 9 gezeigt. Umrechnung anhand der Kalibrierung führt auf einen Wert von λcd = (643,842 ± 0,007)nm. Dies befindet sich im 1σ-Bereich des Literaturwertes von λlit = 643, 84695nm. Der Fehler ist Ergebnis der Gauß'schen Fehlerfortpflanzung.
+
+    *Figure 8: Kalibrationsgerade*
+
+    ### 4.2 Kritische Betrachtung der Ergebnisse
+    Messwert und theoretische Vorhersage für die bestimmte Linie stimmen innerhalb statistischer Schwankungen überein. Dies ist umso interessanter, wenn man die Unsicherheit des Messergebnisses betrachtet, die kleiner als 0,002% ist. Der absolute Fehler ist, wenn man die Steigung der Kalibrationsgeraden betrachtet, kleiner als 1px. Er besteht ausschließlich aus Abweichungen der numerischen Fits. Berücksichtigt man Ungenauigkeiten des CMOS Sensors oder die Möglichkeit, dass je nach Lage des Messwerts auch eine Abweichung um weniger als 1px eine größere Messwertschwankung verursachen kann, da die Pixel nur diskrete Werte messen können, liegt eine nachträgliche Anpassung nahe. Skaliert man die Unsicherheit auf 1px, liegt der Fehler des Messwerts bei 0,012nm. Damit ist der relative Fehler weiterhin kleiner 0,005%.
+
+    Zur hohen Genauigkeit trägt vor allem das gute Messverfahren bei. Spektrometer und Datenaufnahme per Computer lassen wenig Raum für Abweichungen. Wie die Daten zeigen, haben wir dabei eine Quelle für einen möglichen großen systematischen Fehler umgangen: Die Kamera wurde auf das Spektrometer nur locker aufgesteckt. Hätte sich deren Position zwischen Neon- und Cadmiummmessung z.B. durch Erschütterung des Labortisches verändert, hätte die Energiekalibrierung nicht mehr zur Messung der Cadmiumlinie gepasst.
+
+    Abbildung 6 zeigt unerwartetes Verhalten. Obwohl der Magnet ausgeschaltet war, sind drei Maxima zu sehen, deren Flanken sehr steil abfallen. Vergleicht man mit den Messungen im Magnetfeld, ähneln sich die Strukturen. Möglich ist, dass die Eisenkernspule, in der sich die Lampe während der Messung befand eine Restmagnetisierung aufwies, die eine Aufspaltung herbeigeführt hat.
+
+    *Figure 9: Cadmium rote Linie*
+    """
+    # 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).
+
+        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.
+
+        ---
+        Current Chunk:
+        {current_chunk}
+        ---
+        Full Document for Context:
+        {document}
+        ---
+
+        Your interaction must follow this specific conversational flow:
+
+    1.  **Greeting and Contextualization:**
+        *   Begin with a friendly greeting.
+        *   First, briefly explain what this chunk is about in simple terms.
+        *   Then, place this chunk within the larger context of the paper. Explain its purpose in the overall argument. For instance: "Here, the authors are presenting the core observation that the rest of the paper will attempt to explain," or "This section lays the theoretical groundwork for the experiment they describe later."
+
+    2.  **Socratic Questioning (The 3-Question Rule):**
+        *   Your main task is to test and deepen the user's understanding through a series of exactly three questions about the current chunk.
+        *   **First Question:** Ask a single, open-ended question that probes the user's intuitive grasp of the chunk's most important concept. The question must align with the user's goal (e.g., "In simple terms, what did the researchers actually observe here?" or "Why was it necessary for them to design the experiment in this specific way?"). **Always ask only one question at a time.**
+        *   **If the user answers correctly:** Affirm their understanding (e.g., "Exactly," "That's a great way to put it") and immediately ask a *second, deeper question*. This question should build upon their correct answer, asking for more detail or to consider the implications.
+        *   **If the user answers the second question correctly:** Again, affirm their response and ask a *third, even more probing question*. This final question should challenge them to think about the "why" or the broader significance of the information.
+        *   **If the user answers incorrectly at any point:** Gently correct the misunderstanding. Provide a clear, intuitive explanation, always connecting it to the experimental observations and the "why." After your explanation, re-ask the question in a slightly different way to ensure they now understand, then continue the 3-question sequence.
+
+    3.  **Moving On:**
+        *   After the user has successfully answered all three questions, congratulate them on their solid understanding.
+        *   Conclude by explicitly giving them the choice to continue or stay. Say something like: "Excellent, it seems you have a very solid grasp of this part. Shall we move on to the next section, or is there anything here you'd like to explore further?"
+
+    **Important Behaviors:**
+    *   **Language:** The entire conversation must be in English, as indicated by the user's goal.
+    *   **Focus:** Always prioritize intuitive, conceptual, and experimental understanding over formal, mathematical details.
+    *   **Pacing:** The flow is dictated by the user's successful answers. Move from one question to the next smoothly.
+    *   **Structure:** Importantly, maintain a clear and logical flow in the conversation. Never loose track of the objective.
+    *   **Markdown:** Output markdown if you think it is useful. Break your response into reasonable sections.
+    Begin the conversation.
+    """
+
+    anthropic_api_key = os.environ.get("ANTHROPIC_API_KEY")
+    if not anthropic_api_key:
+        return {"role": "assistant", "content": "I'm sorry, but the chat service is not configured. Please check the API key configuration."}
+
+
+    client = anthropic.Anthropic(api_key=anthropic_api_key)
+
+    if not request.messages:
+        # No conversation yet — assistant should speak first
+        anthropic_messages = [
+            {"role": "user", "content": "Please start the conversation based on the provided context."}
+        ]
+    else:
+        anthropic_messages = [
+            {"role": msg.role, "content": msg.content}
+            for msg in request.messages
+            if msg.role in ["user", "assistant"]
+        ]
+        print(anthropic_messages)
+        # For transitions, add a dummy user message to trigger Claude response
+        if not any(msg["role"] == "user" for msg in anthropic_messages):
+            if is_transition:
+                anthropic_messages.append({"role": "user", "content": "Please continue to the next section."})
+            else:
+                def generate_error():
+                    yield f"data: {json.dumps({'error': 'I did not receive your message. Could you please ask again?'})}\n\n"
+                return StreamingResponse(
+                    media_type="text/event-stream", 
+                    content=generate_error(),
+                    headers={"Cache-Control": "no-cache", 
+                             "Connection": "keep-alive", 
+                             "Access-Control-Allow-Origin": "*"},
+                )
+
+    def generate():
+        try:
+            with client.messages.stream(
+                model="claude-sonnet-4-20250514",
+                max_tokens=10000,
+                system=system_prompt,  # system prompt here
+                messages=anthropic_messages,
+            ) as stream:
+                for text in stream.text_stream:
+                    print(f"Raw text chunk: {repr(text)}")
+                    yield f"data: {json.dumps(text)}\n\n"
+                yield f"data: {json.dumps({'done': True})}\n\n"
+        except Exception as e:
+            yield f"data: {json.dumps({'error': str(e)})}\n\n"
+
+    return StreamingResponse(
+        media_type="text/event_stream", 
+        content=generate(),
+        headers={"Cache-Control": "no-cache", 
+                 "Connection": "keep-alive", 
+                 "Access-Control-Allow-Origin": "*"},
+    )
+
+
 # Mount static files for production deployment
 frontend_path = os.path.join(os.path.dirname(__file__), "..", "frontend")
 assets_path = os.path.join(frontend_path, "assets")

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,47 @@
+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="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50">
+            <div className="bg-white/90 backdrop-blur-sm rounded-xl shadow-lg border border-gray-200 p-6 max-w-sm text-center">
+                {/* Loading spinner */}
+                <div className="relative mb-4">
+                    <div className="w-8 h-8 border-3 border-blue-200 rounded-full animate-spin border-t-blue-600 mx-auto"></div>
+                </div>
+
+                {/* Main message */}
+                <h3 className="text-sm font-medium text-gray-900 mb-3">
+                    {message}
+                </h3>
+                <p key={currentTipIndex} className="text-xs text-gray-600 animate-fade-in leading-relaxed">
+                    {tips[currentTipIndex]}
+                </p>
+            </div>
+        </div>
+    );
+};
+
+export default ChunkLoadingTips;

frontend/src/components/ChunkPanel.jsx

@@ -2,84 +2,336 @@ 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,
-    chunkExpanded,
-    setChunkExpanded,
-    chunkStates,
-    skipChunk,
-    markChunkUnderstood,
-    startInteractiveLesson,
     showChat,
-    setShowChat,
-    setChunkAsInteractive,
-    updateChunkChatHistory,
-    getCurrentChunkChatHistory
+    isTransitioning,
+    updateGlobalChatHistory,
+    getGlobalChatHistory,
+    addMessageToChunk,
+    getCurrentChunkMessages,
+    hasChunkMessages,
+    isChunkCompleted,
+    canEditChunk,
+    setWaitingForFirstResponse,
+    markChunkUnderstood,
+    skipChunk,
+    goToPrevChunk
 }) => {
 
     const chatMarkdownComponents = getChatMarkdownComponents();
+    const titleMarkdownComponents = getTitleMarkdownComponents();
     const [isLoading, setIsLoading] = useState(false);
-    const currentChunk = documentData?.chunks?.[currentChunkIndex] ?? null;
-    const chunkText = currentChunk?.text || '';
 
+    // Generate greeting for chunks that don't have messages yet
+    // Only for initial chunk (0) and when not transitioning
+    useEffect(() => {
+        if (documentData && showChat && !hasChunkMessages(currentChunkIndex) && currentChunkIndex === 0 && !isTransitioning) {
+            generateGreetingStreaming();
+        }
+    }, [currentChunkIndex, documentData, showChat, isTransitioning]);
+
+    const updateLastAssistantMessage = (delta) => {
+        const allMessages = getGlobalChatHistory();
 
+        const currentChunkMessages = allMessages.filter(msg => msg.chunkIndex === currentChunkIndex);
+        const lastAssistantInChunk = [...currentChunkMessages].reverse().find(msg => msg.role === 'assistant');
 
-    // Generate greeting when chat opens and no messages
-    useEffect(() => {
-        if (showChat && (getCurrentChunkChatHistory()?.length ?? 0) === 0)  {
-            generateGreeting();
+        if (!lastAssistantInChunk) {
+            console.warn("No assistant message found for current chunk — adding new one.");
+            addMessageToChunk({ role: 'assistant', content: delta }, currentChunkIndex);
+            return;
         }
-    }, [showChat]);
-    const handleChatToggle = () => {
-        if (!showChat) {
-            setChunkAsInteractive();
+
+        const updatedMessages = allMessages.map(msg => {
+            if (msg === lastAssistantInChunk) {
+                return { ...msg, content: msg.content + (typeof delta === "string" ? delta : delta?.content || "") };
+            }
+            return msg;
+        });
+
+        updateGlobalChatHistory(updatedMessages);
+    };
+
+    const generateGreetingStreaming = async () => {
+        setIsLoading(true);
+        try {
+            const response = await fetch('/api/chat/stream', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    messages: [],
+                    currentChunk: documentData?.chunks?.[currentChunkIndex]?.text || '',
+                    document: documentData ? JSON.stringify(documentData) : ''
+                })
+            });
+
+            const reader = response.body.getReader();
+            let shouldStop = false;
+
+            // Local snapshot to avoid stale reads
+            let localMessages = getGlobalChatHistory();
+            const createTempId = () => `assistant_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+            let assistantId = null;
+
+            // SSE read buffer
+            let sseBuffer = '';
+
+            // Streaming smoothness buffer
+            let textBuffer = '';
+            let frameScheduled = false;
+
+            const flushBuffer = (isFinal = false) => {
+                if (!assistantId) return;
+
+                const lastMsg = localMessages[localMessages.length - 1];
+                if (lastMsg.id === assistantId) {
+                    // Append buffered text
+                    lastMsg.content += textBuffer;
+                    textBuffer = '';
+                }
+                updateGlobalChatHistory([...localMessages]);
+            };
+
+            const scheduleFlush = () => {
+                if (!frameScheduled) {
+                    frameScheduled = true;
+                    requestAnimationFrame(() => {
+                        flushBuffer();
+                        frameScheduled = false;
+                    });
+                }
+            };
+
+            while (!shouldStop) {
+                const { done, value } = await reader.read();
+                if (done) break;
+
+                sseBuffer += new TextDecoder().decode(value);
+                const parts = sseBuffer.split('\n\n');
+                sseBuffer = parts.pop(); // keep last partial
+
+                for (const part of parts) {
+                    if (!part.startsWith('data:')) continue;
+                    const jsonStr = part.slice(5).trim();
+                    if (!jsonStr) continue;
+
+                    let parsed;
+                    try {
+                        parsed = JSON.parse(jsonStr);
+                    } catch (err) {
+                        console.warn('Could not JSON.parse stream chunk', jsonStr);
+                        continue;
+                    }
+
+                    if (parsed.error) { 
+                        console.error('streaming error', parsed.error); 
+                        shouldStop = true; 
+                        break; 
+                    }
+                    if (parsed.done) { 
+                        shouldStop = true; 
+                        flushBuffer(true); // final flush, remove cursor
+                        break; 
+                    }
+
+                    const delta = typeof parsed === 'string' ? parsed : parsed?.content ?? '';
+
+                    if (!assistantId) {
+                        assistantId = createTempId();
+                        localMessages.push({
+                            id: assistantId,
+                            role: 'assistant',
+                            content: delta,
+                            chunkIndex: currentChunkIndex
+                        });
+                    } else {
+                        textBuffer += delta;
+                    }
+
+                    // Schedule smooth UI update
+                    scheduleFlush();
+                }
+            }
+        } catch (error) {
+            console.error(error);
+            addMessageToChunk(
+                { role: 'assistant', content: 'Sorry, something went wrong. Please try again.' },
+                currentChunkIndex
+            );
+        } finally {
+            setIsLoading(false);
         }
-        setShowChat(!showChat);
     };
 
     const generateGreeting = async () => {
         setIsLoading(true);
+        if (setWaitingForFirstResponse) {
+            setWaitingForFirstResponse(true);
+        }
         try {
             const response = await fetch('/api/chat', {
                 method: 'POST',
                 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) {
+                setWaitingForFirstResponse(false);
+            }
+        }
+    };
+
+    const handleSendStreaming = async (text) => {
+        const userMessage = { role: 'user', content: text, chunkIndex: currentChunkIndex };
+        addMessageToChunk(userMessage, currentChunkIndex);
+        setIsLoading(true);
+
+        try {
+            // Get the updated messages after adding the user message
+            const updatedMessages = [...getGlobalChatHistory(), userMessage];
+            
+            const response = await fetch('/api/chat/stream', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    messages: updatedMessages,
+                    currentChunk: documentData?.chunks?.[currentChunkIndex]?.text || '',
+                    document: documentData ? JSON.stringify(documentData) : ''
+                })
+            });
+
+            const reader = await response.body.getReader();
+
+            let shouldStop = false;
+
+            // Local snapshot to avoid stale reads - include the user message we just added
+            let localMessages = updatedMessages;
+            const createTempId = () => `assistant_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+            let assistantId = null;
+
+            // SSE read buffer
+            let sseBuffer = '';
+
+            // Streaming smoothness buffer
+            let textBuffer = '';
+            let frameScheduled = false;
+
+            const flushBuffer = (isFinal = false) => {
+                if (!assistantId) return;
+
+                const lastMsg = localMessages[localMessages.length - 1];
+                if (lastMsg.id === assistantId) {
+                    // Append buffered text
+                    lastMsg.content += textBuffer;
+                    textBuffer = '';
+                }
+                updateGlobalChatHistory([...localMessages]);
+            };
+
+            const scheduleFlush = () => {
+                if (!frameScheduled) {
+                    frameScheduled = true;
+                    requestAnimationFrame(() => {
+                        flushBuffer();
+                        frameScheduled = false;
+                    });
                 }
-            ]);
+            };
+            while (!shouldStop) {
+                const { done, value } = await reader.read();
+                if (done) break;
+
+                sseBuffer += new TextDecoder().decode(value);
+                const parts = sseBuffer.split('\n\n');
+                sseBuffer = parts.pop(); // keep last partial
+
+                for (const part of parts) {
+                    if (!part.startsWith('data:')) continue;
+                    const jsonStr = part.slice(5).trim();
+                    if (!jsonStr) continue;
+
+                    let parsed;
+                    try {
+                        parsed = JSON.parse(jsonStr);
+                    } catch (err) {
+                        console.warn('Could not JSON.parse stream chunk', jsonStr);
+                        continue;
+                    }
+
+                    if (parsed.error) { 
+                        console.error('streaming error', parsed.error); 
+                        shouldStop = true; 
+                        break; 
+                    }
+                    if (parsed.done) { 
+                        shouldStop = true; 
+                        flushBuffer(true); // final flush, remove cursor
+                        break; 
+                    }
+
+                    const delta = typeof parsed === 'string' ? parsed : parsed?.content ?? '';
+
+                    if (!assistantId) {
+                        assistantId = createTempId();
+                        localMessages.push({
+                            id: assistantId,
+                            role: 'assistant',
+                            content: delta,
+                            chunkIndex: currentChunkIndex
+                        });
+                    } else {
+                        textBuffer += delta;
+                    }
+
+                    // Schedule smooth UI update
+                    scheduleFlush();
+                }
+            }
+        } catch (error) {
+            console.error(error);
+            addMessageToChunk(
+                { role: 'assistant', content: 'Sorry, something went wrong. Please try again.' },
+                currentChunkIndex
+            );
         } finally {
             setIsLoading(false);
         }
     };
 
     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 {
@@ -87,23 +339,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);
         }
@@ -112,130 +364,96 @@ const ChunkPanel = ({
     return (
         <>
             {/* Chunk Header */}
-            <div className="px-6 py-4 flex-shrink-0 bg-white rounded-t-lg border-b border-gray-200 z-10">
-                <div className="flex items-center justify-between">
-                    <button
-                        onClick={() => setChunkExpanded(!chunkExpanded)}
-                        className="flex items-center hover:bg-gray-50 py-2 px-3 rounded-lg transition-all -ml-3"
-                    >
-                        <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
-                                }}
-                            >
-                                {documentData?.chunks?.[currentChunkIndex]?.topic || "Loading..."}
-                            </ReactMarkdown>
-                        </div>
-                        <span className="text-gray-400 ml-3">
-                            {chunkExpanded ? '▲' : '▼'}
-                        </span>
-                    </button>
-
-                </div>
-
-                {/* Expandable Chunk Content */}
-                {chunkExpanded && documentData?.chunks?.[currentChunkIndex] && (
-                    <>
-                        <div className="prose prose-sm max-w-none">
-                            <ReactMarkdown
-                                remarkPlugins={[remarkMath]}
-                                rehypePlugins={[rehypeRaw, rehypeKatex]}
-                                components={chatMarkdownComponents}
+            <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="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].text}
-                            </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>
                         
-                        {/* Action Buttons */}
-                        <div className="flex items-center justify-center gap-4 mt-4 pt-4 border-gray-200">
-                            <button 
-                                onClick={skipChunk}
-                                className={`py-2 px-4 border rounded-lg transition-all text-sm ${
-                                    chunkStates[currentChunkIndex] === 'skipped'
-                                        ? 'bg-red-500 text-white border-red-500 hover:bg-red-600'
-                                        : 'bg-white hover:bg-gray-50 border-gray-300'
-                                }`}
-                            >
-                                Skip
-                            </button>
+                        <div className="flex items-center gap-2">
+                            {/* Skip Button */}
                             <button
-                                onClick={handleChatToggle}
-                                className={`py-2 px-4 border rounded-lg transition-all text-sm flex items-center gap-1 ${
-                                    chunkStates[currentChunkIndex] === 'interactive' 
-                                        ? 'bg-blue-500 text-white border-blue-500 hover:bg-blue-600' 
-                                        : 'bg-white hover:bg-gray-50 border-gray-300'
-                                }`}
+                                onClick={skipChunk}
+                                className="p-2 rounded-full bg-gray-100 hover:bg-gray-200 text-gray-600 transition-colors duration-200"
+                                title="Skip this chunk"
                             >
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
-                                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                                <svg 
+                                    className="w-5 h-5" 
+                                    fill="currentColor" 
+                                    viewBox="0 0 20 20"
+                                >
+                                    <path 
+                                        fillRule="evenodd" 
+                                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" 
+                                        clipRule="evenodd" 
+                                    />
+                                    <path 
+                                        fillRule="evenodd" 
+                                        d="M12.293 14.707a1 1 0 010-1.414L15.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" 
+                                        clipRule="evenodd" 
+                                    />
                                 </svg>
-                                Chat
                             </button>
-                            <button 
+                            
+                            {/* Understood Button */}
+                            <button
                                 onClick={markChunkUnderstood}
-                                className={`py-2 px-4 border rounded-lg transition-all text-sm ${
-                                    chunkStates[currentChunkIndex] === 'understood'
-                                        ? 'bg-green-500 text-white border-green-500 hover:bg-green-600'
-                                        : 'bg-white hover:bg-gray-50 border-gray-300'
-                                }`}
+                                className="p-2 rounded-full bg-green-100 hover:bg-green-200 text-green-600 transition-colors duration-200"
+                                title="Mark chunk as understood"
                             >
-                                Understood
+                                <svg 
+                                    className="w-5 h-5" 
+                                    fill="currentColor" 
+                                    viewBox="0 0 20 20"
+                                >
+                                    <path 
+                                        fillRule="evenodd" 
+                                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" 
+                                        clipRule="evenodd" 
+                                    />
+                                </svg>
                             </button>
                         </div>
-                    </>
-                )}
-                
-                {/* Show buttons even when chunk is collapsed */}
-                {!chunkExpanded && (
-                    <div className="flex items-center justify-center gap-4 mt-4 pt-4 border-t border-gray-200">
-                        <button 
-                            onClick={skipChunk}
-                            className={`py-2 px-4 border rounded-lg transition-all text-sm ${
-                                chunkStates[currentChunkIndex] === 'skipped'
-                                    ? 'bg-red-500 text-white border-red-500 hover:bg-red-600'
-                                    : 'bg-white hover:bg-gray-50 border-gray-300'
-                            }`}
-                        >
-                            Skip
-                        </button>
-                        <button 
-                            onClick={handleChatToggle}
-                            className={`py-2 px-4 border rounded-lg transition-all text-sm flex items-center gap-1 ${
-                                chunkStates[currentChunkIndex] === 'interactive' 
-                                    ? 'bg-blue-500 text-white border-blue-500 hover:bg-blue-600' 
-                                    : 'bg-white hover:bg-gray-50 border-gray-300'
-                            }`}
-                        >
-                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
-                                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-                            </svg>
-                            Chat
-                        </button>
-                        <button 
-                            onClick={markChunkUnderstood}
-                            className={`py-2 px-4 border rounded-lg transition-all text-sm ${
-                                chunkStates[currentChunkIndex] === 'understood'
-                                    ? 'bg-green-500 text-white border-green-500 hover:bg-green-600'
-                                    : 'bg-white hover:bg-gray-50 border-gray-300'
-                            }`}
-                        >
-                            Understood
-                        </button>
-                    </div>
-                )}
+
             </div>
 
-            {/* Chat Interface - Only shown when showChat is true */}
+            {/* Chat Interface - Always shown when showChat is true */}
             {showChat && (
-                <div className="flex-1 flex flex-col min-h-0 bg-white rounded-lg m-2 shadow-lg">
+                <div className="relative flex-1 overflow-hidden">
                     <SimpleChat
-                        messages={getCurrentChunkChatHistory()}
-                        onSend={handleSend}
-                        isLoading={isLoading}
+                        messages={getGlobalChatHistory()}
+                        currentChunkIndex={currentChunkIndex}
+                        canEdit={canEditChunk(currentChunkIndex)}
+                        onSend={handleSendStreaming}
+                        isLoading={isLoading || isTransitioning}
                     />
                 </div>
             )}

frontend/src/components/DocumentProcessor.jsx

@@ -9,12 +9,14 @@ 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
     const [pdfNavigation, setPdfNavigation] = useState(null);
+    // State for first LLM response loading
+    const [waitingForFirstResponse, setWaitingForFirstResponse] = useState(false);
     
     // Custom hooks
     const {
@@ -33,6 +35,7 @@ function DocumentProcessor() {
         currentChunkIndex,
         chunkExpanded,
         showChat,
+        isTransitioning,
         goToNextChunk,
         goToPrevChunk,
         skipChunk,
@@ -41,8 +44,13 @@ function DocumentProcessor() {
         setChunkExpanded,
         setShowChat,
         setChunkAsInteractive,
-        updateChunkChatHistory,
-        getCurrentChunkChatHistory
+        updateGlobalChatHistory,
+        getGlobalChatHistory,
+        addMessageToChunk,
+        getCurrentChunkMessages,
+        hasChunkMessages,
+        isChunkCompleted,
+        canEditChunk
     } = useChunkNavigation(documentData, null);
 
     const {
@@ -88,10 +96,6 @@ function DocumentProcessor() {
         );
     }
 
-    if (processing) {
-        return <LoadingAnimation uploadProgress={uploadProgress} />;
-    }
-
     if (!documentData) {
         return (
             <div className="h-screen bg-gray-50 flex items-center justify-center">
@@ -121,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 */}
@@ -148,32 +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}
-                        chunkExpanded={chunkExpanded}
-                        setChunkExpanded={setChunkExpanded}
-                        chunkStates={chunkStates}
-                        skipChunk={skipChunk}
-                        markChunkUnderstood={markChunkUnderstood}
-                        startInteractiveLesson={handleStartInteractiveLesson}
                         showChat={showChat}
-                        setShowChat={setShowChat}
-                        setChunkAsInteractive={setChunkAsInteractive}
-                        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,81 +1,177 @@
-import { useState } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 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';
 
-
-const SimpleChat = ({ messages, onSend, isLoading }) => {
+const SimpleChat = ({ messages, currentChunkIndex, canEdit, onSend, isLoading }) => {
   const [input, setInput] = useState('');
+  const containerRef = useRef(null);
+  const anchorRef = useRef(null); // <- will be a tiny zero-height anchor BEFORE the bubble
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    if (!input.trim() || isLoading) return;
+    if (!input.trim() || isLoading || !canEdit) return;
     onSend(input.trim());
     setInput('');
   };
 
+  // Determine the latest message index for this chunk (same as you had)
+  const { anchorIndex, firstInChunkIndex } = useMemo(() => {
+    let first = -1;
+    let last = -1;
+    for (let i = 0; i < messages.length; i++) {
+      if (messages[i].chunkIndex === currentChunkIndex) {
+        if (first === -1) first = i;
+        last = i;
+      }
+    }
+    return { anchorIndex: last !== -1 ? last : first, firstInChunkIndex: first };
+  }, [messages, currentChunkIndex]);
+
+  // Scroll by scrolling the ZERO-HEIGHT anchor into view AFTER layout commits.
+  const scrollAfterLayout = () => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (anchorRef.current) {
+          // Scroll the anchor to the top of the nearest scrollable ancestor (your container).
+          anchorRef.current.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
+        } else if (containerRef.current) {
+          // fallback: go to top
+          containerRef.current.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+      });
+    });
+  };
+
+  // When chunk changes, try to pin.
+  useEffect(() => {
+    if (anchorIndex !== -1) {
+      scrollAfterLayout();
+    } else if (containerRef.current) {
+      requestAnimationFrame(() => containerRef.current.scrollTo({ top: 0, behavior: 'smooth' }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentChunkIndex, anchorIndex]);
+
+  // New messages: pin the new anchor after layout
+  useEffect(() => {
+    if (anchorIndex !== -1) scrollAfterLayout();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [messages.length, anchorIndex]);
+
   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'}`}
-          >
+    <div className="flex flex-col h-full min-h-0">
+      <div
+        ref={containerRef}
+        className="flex-1 min-h-0 overflow-y-auto p-4 flex flex-col space-y-3"
+      >
+        {messages.map((message, idx) => {
+          const isCurrentChunk = message.chunkIndex === currentChunkIndex;
+          const isAnchor = idx === anchorIndex;
+
+          // Render a zero-height anchor just BEFORE the bubble for the anchor index.
+          if (isAnchor) {
+            return (
+              <div key={idx} className="flex flex-col">
+                {/* <-- ZERO-HEIGHT anchor: deterministic top-of-message alignment */}
+                <div ref={anchorRef} style={{ height: 0, margin: 0, padding: 0 }} />
+
+                <div className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+                  <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>
+
+                {isLoading && (
+                  <div className="flex justify-start mt-3">
+                    <div className="bg-gray-100 p-3 rounded-lg">
+                      <div className="flex space-x-1">
+                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
+                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
+                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {/* filler to push remaining whitespace below the pinned message */}
+                <div className="flex-1" />
+              </div>
+            );
+          }
+
+          // Non-anchor message: render normally
+          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}
+              className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
             >
-              <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">
-            <div className="bg-gray-100 p-3 rounded-lg">
-              <div className="flex space-x-1">
-                <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
-                <div
-                  className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
-                  style={{ animationDelay: '0.1s' }}
-                ></div>
-                <div
-                  className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"
-                  style={{ animationDelay: '0.2s' }}
-                ></div>
+        {/* if no messages in chunk yet, render typing+filler */}
+        {firstInChunkIndex === -1 && (
+          <div className="flex flex-col">
+            {isLoading && (
+              <div className="flex justify-start">
+                <div className="bg-gray-100 p-3 rounded-lg">
+                  <div className="flex space-x-1">
+                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
+                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.1s' }}></div>
+                    <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0.2s' }}></div>
+                  </div>
+                </div>
               </div>
-            </div>
+            )}
+            <div className="flex-1" />
           </div>
         )}
       </div>
 
-      {/* Input */}
+      {/* Input (unchanged) */}
       <form onSubmit={handleSubmit} className="p-4 border-t">
         <div className="flex space-x-2">
           <input
             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 [showChat, setShowChat] = useState(false);
+    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) {
@@ -14,7 +16,6 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
             }
             setCurrentChunkIndex(currentChunkIndex + 1);
             setChunkExpanded(true);
-            setShowChat(false);
         }
     };
 
@@ -25,56 +26,70 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
             }
             setCurrentChunkIndex(currentChunkIndex - 1);
             setChunkExpanded(true);
-            setShowChat(false);
         }
     };
 
-    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);
-                    setShowChat(false);
-                }, 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);
-                    setShowChat(false);
-                }, 100); // Small delay to allow state update to complete
-            }
-            
-            return {
-                ...prev,
-                [currentChunkIndex]: newState
-            };
-        });
+        return sendAutomatedMessage('understood');
     };
 
     const startInteractiveLesson = (startChunkLessonFn) => {
@@ -86,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 {
@@ -108,6 +138,7 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
         currentChunkIndex,
         chunkExpanded,
         showChat,
+        isTransitioning,
         goToNextChunk,
         goToPrevChunk,
         skipChunk,
@@ -116,7 +147,12 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
         setChunkExpanded,
         setShowChat,
         setChunkAsInteractive,
-        updateChunkChatHistory,
-        getCurrentChunkChatHistory
+        updateGlobalChatHistory,
+        getGlobalChatHistory,
+        addMessageToChunk,
+        getCurrentChunkMessages,
+        hasChunkMessages,
+        isChunkCompleted,
+        canEditChunk
     };
 };

frontend/src/main.jsx

@@ -4,7 +4,5 @@ import './index.css'
 import App from './App.jsx'
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
     <App />
-  </StrictMode>,
 )

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>
 });