including streaming response and vibe coded star wars theme

backend/main.py

@@ -1,19 +1,20 @@
 from fastapi import FastAPI, File, UploadFile, HTTPException, BackgroundTasks
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
-from fastapi.responses import FileResponse
+from fastapi.responses import FileResponse, StreamingResponse
 from pydantic import BaseModel
 import uvicorn
 import os
 import tempfile
 import shutil
-from typing import List, Optional, Dict, Any
+from typing import List, Optional, Dict, Any, Iterator
 import pathlib
 import asyncio
 import logging
 import time
 import traceback
 import uuid
+import json
 
 # Configure logging
 logging.basicConfig(level=logging.INFO, 
@@ -256,7 +257,7 @@ async def upload_file(background_tasks: BackgroundTasks, file: UploadFile = File
         logger.error(traceback.format_exc())  # Log the full error traceback
         raise HTTPException(status_code=500, detail=f"Error processing file: {str(e)}")
 
-@app.post("/query/", response_model=QueryResponse)
+@app.post("/query/")
 async def process_query(request: QueryRequest):
     logger.info(f"Received query request for session: {request.session_id}")
     
@@ -285,18 +286,25 @@ async def process_query(request: QueryRequest):
         start_time = time.time()
         result = await session_data.arun_pipeline(request.query)
         
-        # In a streaming setup, we'd handle this differently
-        # For simplicity, we're collecting the entire response
-        response_text = ""
-        async for chunk in result["response"]:
-            response_text += chunk
-        
-        logger.info(f"Generated response of length: {len(response_text)} (took {time.time() - start_time:.2f}s)")
+        # Stream the response - this is key for the Star Wars effect
+        async def stream_response():
+            try:
+                async for chunk in result["response"]:
+                    # Add a small delay between chunks for dramatic effect
+                    await asyncio.sleep(0.01)
+                    # Stream each chunk as JSON with proper encoding
+                    yield chunk
+                
+                logger.info(f"Completed streaming response (took {time.time() - start_time:.2f}s)")
+            except Exception as e:
+                logger.error(f"Error in streaming: {str(e)}")
+                yield f"Error during streaming: {str(e)}"
         
-        return {
-            "response": response_text,
-            "session_id": request.session_id
-        }
+        # Return streaming response
+        return StreamingResponse(
+            stream_response(),
+            media_type="text/plain",
+        )
     
     except Exception as e:
         logger.error(f"Error processing query for session {request.session_id}: {str(e)}")

frontend/src/App.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { 
   ChakraProvider, 
   Box, 
@@ -121,7 +121,42 @@ axios.interceptors.response.use(
   }
 );
 
-function ChatMessage({ message, isUser }) {
+function ChatMessage({ message, isUser, isStreaming }) {
+  const [displayedText, setDisplayedText] = useState('');
+  const [charIndex, setCharIndex] = useState(0);
+  const messageRef = useRef(null);
+  
+  // Star Wars-style typewriter effect for streamed responses
+  useEffect(() => {
+    if (isUser || !isStreaming) {
+      setDisplayedText(message);
+      return;
+    }
+    
+    // Reset if message changes
+    if (charIndex === 0) {
+      setDisplayedText('');
+    }
+    
+    // Implement the typing effect with randomized speeds for Star Wars terminal feel
+    if (charIndex < message.length) {
+      const delay = Math.random() * 20 + 10; // Random delay between 10-30ms
+      const timer = setTimeout(() => {
+        setDisplayedText(prev => prev + message[charIndex]);
+        setCharIndex(prevIndex => prevIndex + 1);
+      }, delay);
+      
+      return () => clearTimeout(timer);
+    }
+  }, [message, charIndex, isUser, isStreaming]);
+  
+  // Auto-scroll to the bottom of the message as it streams
+  useEffect(() => {
+    if (isStreaming && messageRef.current) {
+      messageRef.current.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    }
+  }, [displayedText, isStreaming]);
+  
   return (
     <Box 
       bg={isUser ? 'rebel.500' : 'imperial.500'} 
@@ -133,11 +168,38 @@ function ChatMessage({ message, isUser }) {
       maxW="80%"
       boxShadow="0 0 5px"
       color={isUser ? 'dark.500' : 'light.500'}
+      ref={messageRef}
+      position="relative"
     >
       <Text fontWeight="bold" fontSize="sm" mb={1}>
         {isUser ? 'Rebel Commander' : 'Jedi Archives'}
       </Text>
-      <ReactMarkdown>{message}</ReactMarkdown>
+      {isStreaming && !isUser ? (
+        <Box position="relative">
+          <ReactMarkdown>{displayedText}</ReactMarkdown>
+          {charIndex < message.length && (
+            <Box 
+              as="span" 
+              display="inline-block"
+              w="10px"
+              h="16px"
+              bg="brand.500"
+              position="absolute"
+              ml="2px"
+              opacity={0.8}
+              animation="blink 1s step-end infinite"
+              sx={{
+                '@keyframes blink': {
+                  '0%, 100%': { opacity: 0 },
+                  '50%': { opacity: 1 }
+                }
+              }}
+            />
+          )}
+        </Box>
+      ) : (
+        <ReactMarkdown>{message}</ReactMarkdown>
+      )}
     </Box>
   );
 }
@@ -423,6 +485,7 @@ function App() {
   const [inputText, setInputText] = useState('');
   const [isProcessing, setIsProcessing] = useState(false);
   const [isDocProcessing, setIsDocProcessing] = useState(false);
+  const [streamingIndex, setStreamingIndex] = useState(-1); // Track which message is streaming
   const messagesEndRef = useRef(null);
   const toast = useToast();
   
@@ -442,23 +505,67 @@ function App() {
     
     const userMessage = inputText;
     setInputText('');
+    // Add user message right away
     setMessages(prev => [...prev, { text: userMessage, isUser: true }]);
+    
+    // Add empty response message that will be filled via streaming
+    const messageIndex = messages.length + 1; // +1 since we just added user message
+    setMessages(prev => [...prev, { text: '', isUser: false }]);
+    setStreamingIndex(messageIndex);
     setIsProcessing(true);
     
     try {
-      // Either use the API_URL or direct backend based on environment
       const queryUrl = `${API_URL}/query/`;
       console.log('Sending query to:', queryUrl);
       
-      const response = await axios.post(queryUrl, {
-        session_id: sessionId,
-        query: userMessage
+      // We need to handle the streaming response from the backend
+      const response = await fetch(queryUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          session_id: sessionId,
+          query: userMessage
+        })
       });
       
-      console.log('Query response:', response.data);
-      setMessages(prev => [...prev, { text: response.data.response, isUser: false }]);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      
+      // Get the response reader for streaming
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let accumulatedResponse = '';
+      
+      try {
+        // Process the stream as it comes in
+        while (true) {
+          const { value, done } = await reader.read();
+          
+          // If the stream is done, break out of the loop
+          if (done) break;
+          
+          // Decode the chunk and add it to our response
+          const chunk = decoder.decode(value, { stream: true });
+          accumulatedResponse += chunk;
+          
+          // Update the current message with the accumulated response
+          setMessages(prev => prev.map((msg, idx) => 
+            idx === messageIndex ? { ...msg, text: accumulatedResponse } : msg
+          ));
+        }
+      } catch (streamError) {
+        console.error('Stream processing error:', streamError);
+      } finally {
+        // We're done streaming, clean up
+        setStreamingIndex(-1);
+        setIsProcessing(false);
+      }
     } catch (error) {
       console.error('Error sending message:', error);
+      setStreamingIndex(-1);
       
       // Handle specific errors
       if (error.response?.status === 409) {
@@ -471,7 +578,7 @@ function App() {
           isClosable: true,
         });
         
-        setMessages(prev => [...prev, { 
+        setMessages(prev => [...prev.slice(0, -1), { 
           text: "The Jedi Council is still analyzing this document. Patience, young Padawan.", 
           isUser: false 
         }]);
@@ -485,12 +592,11 @@ function App() {
           isClosable: true,
         });
         
-        setMessages(prev => [...prev, { 
+        setMessages(prev => [...prev.slice(0, -1), { 
           text: "I find your lack of network connectivity disturbing. Please try again.", 
           isUser: false 
         }]);
       }
-    } finally {
       setIsProcessing(false);
     }
   };
@@ -568,6 +674,7 @@ function App() {
                         key={idx} 
                         message={msg.text} 
                         isUser={msg.isUser}
+                        isStreaming={idx === streamingIndex}
                       />
                     ))}
                     {isDocProcessing && (