Remove chunk texts and add button to understand and skip in the upper right corner to save vertical space.

frontend/src/components/ChunkPanel.jsx

@@ -9,41 +9,31 @@ import React, { useState, useEffect } from 'react';
 const ChunkPanel = ({
     documentData,
     currentChunkIndex,
-    chunkExpanded,
-    setChunkExpanded,
-    chunkStates,
-    skipChunk,
-    markChunkUnderstood,
-    startInteractiveLesson,
     showChat,
-    setShowChat,
-    setChunkAsInteractive,
     updateChunkChatHistory,
-    getCurrentChunkChatHistory
+    getCurrentChunkChatHistory,
+    setWaitingForFirstResponse,
+    markChunkUnderstood,
+    skipChunk
 }) => {
 
     const chatMarkdownComponents = getChatMarkdownComponents();
     const [isLoading, setIsLoading] = useState(false);
-    const currentChunk = documentData?.chunks?.[currentChunkIndex] ?? null;
-    const chunkText = currentChunk?.text || '';
-
 
-
-    // Generate greeting when chat opens and no messages
+    // Generate greeting only when navigating to a chunk that has no chat history
     useEffect(() => {
-        if (showChat && (getCurrentChunkChatHistory()?.length ?? 0) === 0)  {
+        const hasNoMessages = (getCurrentChunkChatHistory()?.length ?? 0) === 0;
+        
+        if (documentData && showChat && hasNoMessages) {
             generateGreeting();
         }
-    }, [showChat]);
-    const handleChatToggle = () => {
-        if (!showChat) {
-            setChunkAsInteractive();
-        }
-        setShowChat(!showChat);
-    };
+    }, [currentChunkIndex]); // Only trigger on chunk navigation
 
     const generateGreeting = async () => {
         setIsLoading(true);
+        if (setWaitingForFirstResponse) {
+            setWaitingForFirstResponse(true);
+        }
         try {
             const response = await fetch('/api/chat', {
                 method: 'POST',
@@ -73,6 +63,9 @@ const ChunkPanel = ({
             ]);
         } finally {
             setIsLoading(false);
+            if (setWaitingForFirstResponse) {
+                setWaitingForFirstResponse(false);
+            }
         }
     };
 
@@ -112,12 +105,7 @@ 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="px-6 py-4 flex-shrink-0 bg-white rounded-t-lg border-b border-gray-200 z-10 flex items-center justify-between">
                         <div className="font-semibold text-gray-900 text-left flex-1">
                             <ReactMarkdown
                                 remarkPlugins={[remarkMath]}
@@ -130,114 +118,61 @@ const ChunkPanel = ({
                                 {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}
-                            >
-                                {documentData.chunks[currentChunkIndex].text}
-                            </ReactMarkdown>
-                        </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-red-100 hover:bg-red-200 text-red-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 */}
             {showChat && (
-                <div className="flex-1 flex flex-col min-h-0 bg-white rounded-lg m-2 shadow-lg">
                     <SimpleChat
                         messages={getCurrentChunkChatHistory()}
                         onSend={handleSend}
                         isLoading={isLoading}
                     />
-                </div>
             )}
         </>
     );

frontend/src/components/DocumentProcessor.jsx

@@ -15,6 +15,8 @@ import ChunkPanel from './ChunkPanel';
 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 {
@@ -88,7 +90,7 @@ function DocumentProcessor() {
         );
     }
 
-    if (processing) {
+    if (processing || waitingForFirstResponse) {
         return <LoadingAnimation uploadProgress={uploadProgress} />;
     }
 
@@ -163,17 +165,12 @@ function DocumentProcessor() {
                     <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}
+                        setWaitingForFirstResponse={setWaitingForFirstResponse}
+                        markChunkUnderstood={markChunkUnderstood}
+                        skipChunk={skipChunk}
                     />
                 </div>
             </div>

frontend/src/hooks/useChunkNavigation.js

@@ -5,7 +5,7 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
     const [currentChunkIndex, setCurrentChunkIndex] = useState(0);
     const [chunkExpanded, setChunkExpanded] = useState(true);
     const [chunkChatHistories, setChunkChatHistories] = useState({});
-    const [showChat, setShowChat] = useState(false);
+    const [showChat, setShowChat] = useState(true);
 
     const goToNextChunk = () => {
         if (documentData && currentChunkIndex < documentData.chunks.length - 1) {
@@ -14,7 +14,6 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
             }
             setCurrentChunkIndex(currentChunkIndex + 1);
             setChunkExpanded(true);
-            setShowChat(false);
         }
     };
 
@@ -25,7 +24,6 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
             }
             setCurrentChunkIndex(currentChunkIndex - 1);
             setChunkExpanded(true);
-            setShowChat(false);
         }
     };
 
@@ -42,7 +40,6 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
                     }
                     setCurrentChunkIndex(currentChunkIndex + 1);
                     setChunkExpanded(true);
-                    setShowChat(false);
                 }, 100); // Small delay to allow state update to complete
             }
             
@@ -66,7 +63,6 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
                     }
                     setCurrentChunkIndex(currentChunkIndex + 1);
                     setChunkExpanded(true);
-                    setShowChat(false);
                 }, 100); // Small delay to allow state update to complete
             }
             

frontend/src/main.jsx

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