Add multiple chats

backend/app.py

@@ -272,7 +272,7 @@ async def chat_endpoint(request: ChatRequest):
 
         print("🤖 Calling Claude for chat response...")
         response = client.messages.create(
-            model="claude-sonnet-4-20250514",
+            model="claude-3-5-haiku-latest",
             max_tokens=10000,
             system=system_prompt,  # system prompt here
             messages=anthropic_messages,

frontend/src/components/ChunkPanel.jsx

@@ -5,37 +5,35 @@ import rehypeRaw from 'rehype-raw';
 import { getChatMarkdownComponents, getTitleMarkdownComponents } from '../utils/markdownComponents.jsx';
 import SimpleChat from './SimpleChat.jsx';
 import ChunkLoadingTips from './ChunkLoadingTips.jsx';
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
+import { createTextStreamResponse } from 'ai';
 
 const ChunkPanel = ({
     documentData,
     currentChunkIndex,
     showChat,
-    isTransitioning,
     updateGlobalChatHistory,
     getGlobalChatHistory,
     addMessageToChunk,
     getCurrentChunkMessages,
     hasChunkMessages,
-    isChunkCompleted,
-    canEditChunk,
-    setWaitingForFirstResponse,
     markChunkUnderstood,
     skipChunk,
-    goToPrevChunk
+    goToPrevChunk,
+    streamResponse,
+    isChunkLoading
 }) => {
 
     const chatMarkdownComponents = getChatMarkdownComponents();
     const titleMarkdownComponents = getTitleMarkdownComponents();
-    const [isLoading, setIsLoading] = useState(false);
 
     // 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) {
+        if (documentData && showChat && !hasChunkMessages(currentChunkIndex) && currentChunkIndex === 0) {
             generateGreetingStreaming();
         }
-    }, [currentChunkIndex, documentData, showChat, isTransitioning]);
+    }, [currentChunkIndex, documentData, showChat]);
 
     const updateLastAssistantMessage = (delta) => {
         const allMessages = getGlobalChatHistory();
@@ -60,306 +58,32 @@ const ChunkPanel = ({
     };
 
     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;
-                    }
+        const requestBody = JSON.stringify({
+            messages: [],
+            currentChunk: documentData?.chunks?.[currentChunkIndex]?.text || '',
+            document: documentData ? JSON.stringify(documentData) : ''
+        });
 
-                    // 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);
-        }
+        streamResponse(requestBody, false);
     };
 
-    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: [],
-                    currentChunk: documentData?.chunks?.[currentChunkIndex]?.text || '',
-                    document: documentData ? JSON.stringify(documentData) : ''
-                })
-            });
-
-            const data = await response.json();
-
-            addMessageToChunk(
-                {
-                    role: 'assistant',
-                    content: data.content || 'Hi! Welcome to your learning session. Let\'s explore this document together!'
-                },
-                currentChunkIndex
-            );
-        } catch (error) {
-            console.error('Error generating greeting:', error);
-            addMessageToChunk(
-                {
-                    role: 'assistant',
-                    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) : ''
-                })
-            });
+        // Build the messages array manually to include the user message immediately
+        const messagesWithUserMessage = [...getGlobalChatHistory(), userMessage];
 
-            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;
-                    }
+        const requestBody = JSON.stringify({
+            messages: messagesWithUserMessage,
+            currentChunk: documentData?.chunks?.[currentChunkIndex]?.text || '',
+            document: documentData ? JSON.stringify(documentData) : ''
+        });
 
-                    // 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);
-        }
+        streamResponse(requestBody, false);
     };
 
-    const handleSend = async (text) => {
-        const userMessage = { role: 'user', content: text, chunkIndex: currentChunkIndex };
-        addMessageToChunk(userMessage, currentChunkIndex);
-        setIsLoading(true);
-
-        try {
-            const response = await fetch('/api/chat', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    messages: getGlobalChatHistory(),
-                    currentChunk: documentData?.chunks?.[currentChunkIndex]?.text || '',
-                    document: documentData ? JSON.stringify(documentData) : ''
-                })
-            });
-
-            const data = await response.json();
-            addMessageToChunk(
-                { role: 'assistant', content: data.content || 'Sorry, no response received.' },
-                currentChunkIndex
-            );
-        } catch (error) {
-            console.error('Error:', error);
-            addMessageToChunk(
-                { role: 'assistant', content: 'Sorry, something went wrong. Please try again.' },
-                currentChunkIndex
-            );
-        } finally {
-            setIsLoading(false);
-        }
-    };
 
     return (
         <>
@@ -449,11 +173,10 @@ const ChunkPanel = ({
             {showChat && (
                 <div className="relative flex-1 overflow-hidden">
                     <SimpleChat
-                        messages={getGlobalChatHistory()}
+                        messages={getCurrentChunkMessages()}
                         currentChunkIndex={currentChunkIndex}
-                        canEdit={canEditChunk(currentChunkIndex)}
                         onSend={handleSendStreaming}
-                        isLoading={isLoading || isTransitioning}
+                        isLoading={isChunkLoading(currentChunkIndex)}
                     />
                 </div>
             )}

frontend/src/components/DocumentProcessor.jsx

@@ -17,7 +17,6 @@ function DocumentProcessor() {
     const [pdfNavigation, setPdfNavigation] = useState(null);
     // State for first LLM response loading
     const [waitingForFirstResponse, setWaitingForFirstResponse] = useState(false);
-    
     // Custom hooks
     const {
         fileInputRef,
@@ -35,7 +34,6 @@ function DocumentProcessor() {
         currentChunkIndex,
         chunkExpanded,
         showChat,
-        isTransitioning,
         goToNextChunk,
         goToPrevChunk,
         skipChunk,
@@ -49,9 +47,9 @@ function DocumentProcessor() {
         addMessageToChunk,
         getCurrentChunkMessages,
         hasChunkMessages,
-        isChunkCompleted,
-        canEditChunk
-    } = useChunkNavigation(documentData, null);
+        isChunkLoading,
+        streamResponse
+    } = useChunkNavigation(documentData);
 
     const {
         leftPanelWidth,
@@ -138,7 +136,7 @@ function DocumentProcessor() {
                 </div>
             </div>
 
-            {/* Resizable Divider */}
+            {/* Resizable Divider */}   
             <div 
                 className="flex items-center justify-center cursor-col-resize group transition-all duration-200"
                 style={{ width: '8px' }}
@@ -172,18 +170,17 @@ function DocumentProcessor() {
                         documentData={documentData}
                         currentChunkIndex={currentChunkIndex}
                         showChat={showChat}
-                        isTransitioning={isTransitioning}
                         updateGlobalChatHistory={updateGlobalChatHistory}
                         getGlobalChatHistory={getGlobalChatHistory}
                         addMessageToChunk={addMessageToChunk}
                         getCurrentChunkMessages={getCurrentChunkMessages}
                         hasChunkMessages={hasChunkMessages}
-                        isChunkCompleted={isChunkCompleted}
-                        canEditChunk={canEditChunk}
                         setWaitingForFirstResponse={setWaitingForFirstResponse}
+                        isChunkLoading={isChunkLoading}
                         markChunkUnderstood={markChunkUnderstood}
                         skipChunk={skipChunk}
                         goToPrevChunk={goToPrevChunk}
+                        streamResponse={streamResponse}
                     />
                 </div>
             </div>

frontend/src/components/SimpleChat.jsx

@@ -5,30 +5,23 @@ import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
 import { getChatMarkdownComponents } from '../utils/markdownComponents.jsx';
 
-const SimpleChat = ({ messages, currentChunkIndex, canEdit, onSend, isLoading }) => {
+const SimpleChat = ({ messages, currentChunkIndex, 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 || !canEdit) return;
+    if (!input.trim() || isLoading ) return;
     onSend(input.trim());
     setInput('');
   };
 
-  // Determine the latest message index for this chunk (same as you had)
+  // Since messages are now filtered to current chunk only, use the last message for anchoring
   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]);
+    const lastIndex = messages.length > 0 ? messages.length - 1 : -1;
+    const firstIndex = messages.length > 0 ? 0 : -1;
+    return { anchorIndex: lastIndex, firstInChunkIndex: firstIndex };
+  }, [messages]);
 
   // Scroll by scrolling the ZERO-HEIGHT anchor into view AFTER layout commits.
   const scrollAfterLayout = () => {
@@ -68,7 +61,6 @@ const SimpleChat = ({ messages, currentChunkIndex, canEdit, onSend, isLoading })
         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.
@@ -80,10 +72,10 @@ const SimpleChat = ({ messages, currentChunkIndex, canEdit, onSend, isLoading })
 
                 <div className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}>
                   <div
-                    className={`max-w-[90%] p-3 rounded-lg transition-opacity ${
+                    className={`max-w-[90%] p-3 rounded-lg ${
                       message.role === 'user'
-                        ? `bg-gray-100 text-white ${isCurrentChunk ? 'opacity-100' : 'opacity-40'}`
-                        : `bg-white text-gray-900 ${isCurrentChunk ? 'opacity-100' : 'opacity-40'}`
+                        ? 'bg-gray-100 text-white'
+                        : 'bg-white text-gray-900'
                     }`}
                   >
                     <ReactMarkdown
@@ -121,11 +113,11 @@ const SimpleChat = ({ messages, currentChunkIndex, canEdit, onSend, isLoading })
               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'}`
-                }`}
+                className={`max-w-[90%] p-3 rounded-lg ${
+                            message.role === 'user'
+                              ? 'bg-gray-100 text-white'
+                              : 'bg-white text-gray-900'
+                          }`}
               >
                 <ReactMarkdown
                   remarkPlugins={[remarkMath]}
@@ -165,13 +157,13 @@ const SimpleChat = ({ messages, currentChunkIndex, canEdit, onSend, isLoading })
             type="text"
             value={input}
             onChange={(e) => setInput(e.target.value)}
-            placeholder={canEdit ? 'Type your message...' : 'This chunk is completed - navigation only'}
-            disabled={isLoading || !canEdit}
+            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 disabled:text-gray-500"
           />
           <button
             type="submit"
-            disabled={!input.trim() || isLoading || !canEdit}
+            disabled={!input.trim() || isLoading}
             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

@@ -1,19 +1,124 @@
 import { useState } from 'react';
 
-export const useChunkNavigation = (documentData, clearTypingAnimation) => {
+export const useChunkNavigation = (documentData) => {
     const [chunkStates, setChunkStates] = useState({});
     const [currentChunkIndex, setCurrentChunkIndex] = useState(0);
     const [chunkExpanded, setChunkExpanded] = useState(true);
     const [globalChatHistory, setGlobalChatHistory] = useState([]);
     const [showChat, setShowChat] = useState(true);
-    const [isTransitioning, setIsTransitioning] = useState(false);
-    const [completedChunks, setCompletedChunks] = useState(new Set());
+    const [loadingChunkIndex, setLoadingChunkIndex] = useState(null);
+
+    const streamResponse = async (requestBody, isAutomated, nextChunkIndex) => {
+        const targetChunkIndex = nextChunkIndex || currentChunkIndex;
+        setLoadingChunkIndex(targetChunkIndex);
+
+        try {
+            const response = await fetch('/api/chat/stream', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: requestBody
+            });
+            
+            const reader = await response.body.getReader()
+
+            let shouldStop = false;
+            const parsedBody = JSON.parse(requestBody);
+            let localMessages = [...parsedBody.messages];
+            
+            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: nextChunkIndex ? nextChunkIndex : 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 {
+            setLoadingChunkIndex(null);
+        }
+    };
 
     const goToNextChunk = () => {
         if (documentData && currentChunkIndex < documentData.chunks.length - 1) {
-            if (clearTypingAnimation) {
-                clearTypingAnimation();
-            }
             setCurrentChunkIndex(currentChunkIndex + 1);
             setChunkExpanded(true);
         }
@@ -21,9 +126,6 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
 
     const goToPrevChunk = () => {
         if (currentChunkIndex > 0) {
-            if (clearTypingAnimation) {
-                clearTypingAnimation();
-            }
             setCurrentChunkIndex(currentChunkIndex - 1);
             setChunkExpanded(true);
         }
@@ -31,57 +133,29 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
 
     const sendAutomatedMessage = async (action) => {
         if (!documentData || currentChunkIndex >= documentData.chunks.length - 1) return;
-        
-        setIsTransitioning(true);
         const nextChunkIndex = currentChunkIndex + 1;
+        setLoadingChunkIndex(nextChunkIndex);
         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);
+            setLoadingChunkIndex(null);
             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 requestBody = 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
-            );
-            
-            // Clear any animations after successful response
-            if (clearTypingAnimation) {
-                clearTypingAnimation();
-            }
-        } catch (error) {
-            console.error('Error in automated transition:', error);
-            // Clear animations on error too
-            if (clearTypingAnimation) {
-                clearTypingAnimation();
-            }
-        } finally {
-            setIsTransitioning(false);
-        }
+        streamResponse(requestBody, true, nextChunkIndex);
     };
 
     const skipChunk = () => {
@@ -125,12 +199,8 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
         return globalChatHistory.some(msg => msg.chunkIndex === chunkIndex);
     };
 
-    const isChunkCompleted = (chunkIndex) => {
-        return completedChunks.has(chunkIndex);
-    };
-
-    const canEditChunk = (chunkIndex) => {
-        return chunkIndex === currentChunkIndex && !isChunkCompleted(chunkIndex);
+    const isChunkLoading = (chunkIndex) => {
+        return loadingChunkIndex === chunkIndex;
     };
 
     return {
@@ -138,7 +208,6 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
         currentChunkIndex,
         chunkExpanded,
         showChat,
-        isTransitioning,
         goToNextChunk,
         goToPrevChunk,
         skipChunk,
@@ -152,7 +221,7 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
         addMessageToChunk,
         getCurrentChunkMessages,
         hasChunkMessages,
-        isChunkCompleted,
-        canEditChunk
+        isChunkLoading,
+        streamResponse
     };
 };