Add streaming

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()
@@ -315,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/components/ChunkLoadingTips.jsx

@@ -25,19 +25,21 @@ const ChunkLoadingTips = ({ message = "Preparing your document..." }) => {
     }, []);
 
     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>
+        <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-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>
+                {/* 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>
     );
 };

frontend/src/components/ChunkPanel.jsx

@@ -33,10 +33,143 @@ const ChunkPanel = ({
     // Only for initial chunk (0) and when not transitioning
     useEffect(() => {
         if (documentData && showChat && !hasChunkMessages(currentChunkIndex) && currentChunkIndex === 0 && !isTransitioning) {
-            generateGreeting();
+            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');
+
+        if (!lastAssistantInChunk) {
+            console.warn("No assistant message found for current chunk — adding new one.");
+            addMessageToChunk({ role: 'assistant', content: delta }, currentChunkIndex);
+            return;
+        }
+
+        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);
+        }
+    };
+
     const generateGreeting = async () => {
         setIsLoading(true);
         if (setWaitingForFirstResponse) {
@@ -79,6 +212,123 @@ const ChunkPanel = ({
         }
     };
 
+    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, chunkIndex: currentChunkIndex };
         addMessageToChunk(userMessage, currentChunkIndex);
@@ -195,25 +445,17 @@ const ChunkPanel = ({
 
             </div>
 
-            {/* Chat Interface - Only shown when showChat is true and not transitioning */}
-            {showChat && !isLoading && !isTransitioning && (
+            {/* Chat Interface - Always shown when showChat is true */}
+            {showChat && (
+                <div className="relative flex-1 overflow-hidden">
                     <SimpleChat
                         messages={getGlobalChatHistory()}
                         currentChunkIndex={currentChunkIndex}
                         canEdit={canEditChunk(currentChunkIndex)}
-                        onSend={handleSend}
+                        onSend={handleSendStreaming}
                         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..." />
+                </div>
             )}
         </>
     );

frontend/src/components/SimpleChat.jsx

@@ -1,15 +1,14 @@
-import { useState, useEffect, useRef } 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, currentChunkIndex, canEdit, onSend, isLoading }) => {
   const [input, setInput] = useState('');
-  const messagesEndRef = useRef(null);
-  const currentChunkStartRef = useRef(null);
+  const containerRef = useRef(null);
+  const anchorRef = useRef(null); // <- will be a tiny zero-height anchor BEFORE the bubble
 
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -18,28 +17,107 @@ const SimpleChat = ({ messages, currentChunkIndex, canEdit, onSend, isLoading })
     setInput('');
   };
 
-  // Scroll to current chunk's first message when chunk changes
+  // 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 (currentChunkStartRef.current) {
-      currentChunkStartRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    if (anchorIndex !== -1) {
+      scrollAfterLayout();
+    } else if (containerRef.current) {
+      requestAnimationFrame(() => containerRef.current.scrollTo({ top: 0, behavior: 'smooth' }));
     }
-  }, [currentChunkIndex]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentChunkIndex, anchorIndex]);
 
-  // Find the first message of the current chunk
-  const currentChunkFirstMessageIndex = messages.findIndex(msg => msg.chunkIndex === currentChunkIndex);
+  // 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">
+    <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 isFirstOfCurrentChunk = idx === currentChunkFirstMessageIndex;
-          
+          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
               key={idx}
-              ref={isFirstOfCurrentChunk ? currentChunkStartRef : null}
               className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
             >
               <div
@@ -50,44 +128,44 @@ const SimpleChat = ({ messages, currentChunkIndex, canEdit, onSend, isLoading })
                 }`}
               >
                 <ReactMarkdown
-                    remarkPlugins={[remarkMath]}
-                    rehypePlugins={[rehypeRaw, rehypeKatex]}
-                    components={getChatMarkdownComponents()}
-                  >
-                    {message.content}
-                  </ReactMarkdown>
+                  remarkPlugins={[remarkMath]}
+                  rehypePlugins={[rehypeRaw, rehypeKatex]}
+                  components={getChatMarkdownComponents()}
+                >
+                  {message.content}
+                </ReactMarkdown>
               </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={canEdit ? "Type your message..." : "This chunk is completed - navigation only"}
+            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"
           />