Add all code

README.md

@@ -1,11 +1,24 @@
 ---
-title: CA Foundation
+title: CA Study Assistant
 emoji: 📚
 colorFrom: blue
-colorTo: green
+colorTo: purple
 sdk: docker
-pinned: false
-license: mit
+app_port: 80
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# CA Study Assistant
+
+This is a full-stack AI-powered study assistant for Chartered Accountant students.
+
+- **Frontend**: React
+- **Backend**: FastAPI
+- **Deployment**: Docker on Hugging Face Spaces
+
+## How it Works
+
+The application is containerized using Docker and orchestrated with Docker Compose.
+
+- The **frontend** is a React app served by Nginx.
+- The **backend** is a FastAPI server running with Uvicorn.
+- Nginx acts as a reverse proxy, forwarding API requests from the frontend to the backend. 

backend/CONVERSATION_HISTORY_SYSTEM.md

@@ -0,0 +1,249 @@
+# Conversation History Management System
+
+## Overview
+The conversation history system has been upgraded from a basic memory-only implementation to a comprehensive, persistent storage solution using localStorage with advanced features.
+
+## 🔄 **Previous Implementation (Memory Only)**
+```javascript
+// ❌ OLD - Lost on page refresh
+const [conversations, setConversations] = useState([]);
+```
+
+## ✅ **New Implementation (Persistent Storage)**
+
+### 1. **Core Storage Utility** (`utils/conversationStorage.js`)
+A comprehensive utility class that handles all conversation persistence:
+
+```javascript
+import ConversationStorage from './utils/conversationStorage';
+
+// Load conversations from localStorage
+const conversations = ConversationStorage.loadConversations();
+
+// Save conversations to localStorage
+ConversationStorage.saveConversations(conversations);
+```
+
+### 2. **Enhanced Conversation Structure**
+```javascript
+{
+  id: "timestamp_based_id",
+  title: "Conversation Title",
+  messages: [
+    {
+      id: "message_id",
+      role: "user" | "assistant",
+      content: "message content",
+      timestamp: Date
+    }
+  ],
+  createdAt: Date,
+  updatedAt: Date  // ✅ NEW - Track when conversation was last modified
+}
+```
+
+### 3. **Automatic Persistence**
+- **Load on App Start**: Conversations are automatically loaded from localStorage
+- **Save on Changes**: All conversation updates are automatically saved
+- **No Manual Intervention**: Everything happens transparently
+
+## 🚀 **Key Features**
+
+### ✅ **Persistent Storage**
+- Conversations survive page refreshes
+- Conversations persist across browser sessions
+- Automatic loading on app startup
+
+### ✅ **Conversation Management**
+- **Create**: New conversations are automatically saved
+- **Update**: Message additions and title changes are saved
+- **Delete**: Conversations can be permanently removed
+- **Search**: Full-text search across all conversations
+
+### ✅ **Storage Optimization**
+- **Quota Management**: Handles localStorage size limits
+- **Conversation Limits**: Maximum 50 conversations (configurable)
+- **Automatic Cleanup**: Reduces storage when quota exceeded
+
+### ✅ **Import/Export**
+- **Export**: Download all conversations as JSON
+- **Import**: Upload and merge conversation files
+- **Backup**: Easy backup and restore functionality
+
+### ✅ **Statistics & Monitoring**
+- **Storage Usage**: Track localStorage consumption
+- **Conversation Count**: Monitor total conversations
+- **Message Count**: Track total messages across all conversations
+
+## 🛠 **Implementation Details**
+
+### App.js Integration
+```javascript
+// Load conversations on app start
+useEffect(() => {
+  const savedConversations = ConversationStorage.loadConversations();
+  if (savedConversations.length > 0) {
+    setConversations(savedConversations);
+    setChatStarted(true);
+    setActiveConversationId(savedConversations[0].id);
+  }
+}, []);
+
+// Enhanced conversation management
+const updateConversations = (updatedConversations) => {
+  setConversations(updatedConversations);
+  ConversationStorage.saveConversations(updatedConversations);
+};
+```
+
+### ChatInterface.js Integration
+```javascript
+// Conversations are automatically saved when updated
+setConversations(prev => prev.map(conv => 
+  conv.id === conversationId 
+    ? { ...conv, messages: [...conv.messages, newMessage] }
+    : conv
+));
+```
+
+### Sidebar.js Integration
+```javascript
+// Delete conversations with confirmation
+const handleDelete = (conversationId) => {
+  if (window.confirm('Are you sure you want to delete this conversation?')) {
+    onDeleteConversation(conversationId);
+  }
+};
+```
+
+## 📊 **Storage Management**
+
+### Local Storage Structure
+```
+Key: "ca_study_conversations"
+Value: JSON array of conversation objects
+```
+
+### Storage Limits
+- **Maximum Conversations**: 50 (prevents localStorage overflow)
+- **Auto-Reduction**: Reduces to 25 conversations if quota exceeded
+- **Size Monitoring**: Tracks storage usage in KB
+
+### Error Handling
+- **JSON Parse Errors**: Gracefully handles corrupted data
+- **Storage Quota**: Automatic handling of localStorage limits
+- **Network Issues**: Offline-first design
+
+## 🔧 **Advanced Features**
+
+### 1. **Search Functionality**
+```javascript
+// Search conversations by title or content
+const results = ConversationStorage.searchConversations("accounting");
+```
+
+### 2. **Export Conversations**
+```javascript
+// Download all conversations as JSON file
+ConversationStorage.exportConversations();
+```
+
+### 3. **Import Conversations**
+```javascript
+// Import conversations from file
+const result = await ConversationStorage.importConversations(file);
+console.log(`Imported ${result.count} conversations`);
+```
+
+### 4. **Storage Statistics**
+```javascript
+// Get detailed storage information
+const stats = ConversationStorage.getStatistics();
+// Returns: { totalConversations, totalMessages, storageSize, ... }
+```
+
+## 🔐 **Data Security & Privacy**
+
+### Client-Side Storage
+- **No Server Storage**: All data stays in user's browser
+- **Privacy First**: No conversation data sent to servers
+- **User Control**: Users can export/delete their own data
+
+### Data Format
+- **JSON Structure**: Human-readable format
+- **Portable**: Easy to migrate between devices
+- **Versionable**: Future-proof with version tracking
+
+## 🎯 **User Experience Improvements**
+
+### Before (Memory Only)
+❌ Lost conversations on page refresh  
+❌ No conversation history  
+❌ No persistent sessions  
+❌ No conversation management  
+
+### After (Persistent Storage)
+✅ Conversations survive page refreshes  
+✅ Full conversation history  
+✅ Persistent user sessions  
+✅ Advanced conversation management  
+✅ Search and filter capabilities  
+✅ Export/import functionality  
+✅ Storage monitoring and optimization  
+
+## 🚀 **Future Enhancements**
+
+### Planned Features
+1. **Cloud Sync**: Optional cloud storage integration
+2. **User Authentication**: Multi-device synchronization
+3. **Advanced Search**: Semantic search within conversations
+4. **Tags/Categories**: Organize conversations by topics
+5. **Shared Conversations**: Share conversations with others
+6. **Analytics**: Conversation usage analytics
+
+### Backend Integration (Optional)
+```javascript
+// Future: Optional backend storage
+const backendStorage = new BackendConversationStorage();
+await backendStorage.syncConversations(localConversations);
+```
+
+## 📋 **Migration Guide**
+
+### For Existing Users
+1. **Automatic Migration**: Existing conversations will be migrated to new format
+2. **No Data Loss**: All existing conversations preserved
+3. **Enhanced Features**: Immediate access to new capabilities
+
+### For New Users
+1. **Automatic Setup**: No configuration required
+2. **Immediate Persistence**: Conversations saved from first use
+3. **Full Feature Access**: All features available immediately
+
+## 🔧 **Troubleshooting**
+
+### Common Issues
+1. **Storage Quota Exceeded**: Automatically handled with conversation reduction
+2. **Corrupted Data**: Graceful fallback to empty conversation list
+3. **Import Errors**: Validation and error reporting for file imports
+
+### Debug Information
+```javascript
+// Check storage status
+const stats = ConversationStorage.getStatistics();
+console.log('Storage Stats:', stats);
+
+// Clear all conversations (emergency)
+ConversationStorage.clearAllConversations();
+```
+
+## ✅ **Conclusion**
+
+The conversation history system has been completely upgraded to provide:
+- **Persistent Storage**: No more lost conversations
+- **Advanced Management**: Full CRUD operations
+- **User Control**: Export/import capabilities
+- **Performance**: Optimized for large conversation histories
+- **Reliability**: Robust error handling and data protection
+
+This system provides a professional-grade conversation management experience while maintaining simplicity and user privacy. 

backend/Dockerfile

@@ -0,0 +1,19 @@
+FROM python:3.9-slim
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy the requirements file and install dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the backend application code
+COPY . .
+
+# Expose the port the app runs on
+EXPOSE 8000
+
+# Command to run the application
+# We use app_v2:app because your main FastAPI instance is in the app_v2.py file.
+# --host 0.0.0.0 makes the app accessible from outside the container.
+CMD ["uvicorn", "app_v2:app", "--host", "0.0.0.0", "--port", "8000"] 

backend/Qdrant.py

@@ -0,0 +1,88 @@
+import os
+from qdrant_client import QdrantClient, models
+from qdrant_client.models import PayloadSchemaType
+import logging
+from dotenv import load_dotenv
+
+# Configure logging
+logger = logging.getLogger(__name__)
+
+load_dotenv()
+
+# Configuration
+# QDRANT_URL = "https://cc102304-2c06-4d51-9dee-d436f4413549.us-west-1-0.aws.cloud.qdrant.io"
+# QDRANT_API_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhY2Nlc3MiOiJtIn0.cHs27o6erIf1BQHCdTxE4L4qZg4vCdrp51oNNNghjWM"
+QDRANT_API_KEY = os.getenv("QDRANT_API_KEY")
+QDRANT_URL = os.getenv("QDRANT_URL")
+
+class QdrantManager:
+    def __init__(self):
+        self.qdrant_client = QdrantClient(
+            url=QDRANT_URL,
+            api_key=QDRANT_API_KEY,
+        )
+        print("Connected to Qdrant")
+
+    def get_or_create_company_collection(self, collection_name: str) -> str:
+        """
+        Get or create a collection for a company.
+        
+        Args:
+            collection_name: Name of the collection
+            
+        Returns:
+            str: Collection name
+            
+        Raises:
+            ValueError: If collection creation fails
+        """
+        try:
+
+            print(f"Creating new collection: {collection_name}")
+
+            # Vector size for text-embedding-3-small is 1536
+            vector_size = 1536
+            
+            # Create collection with vector configuration
+            self.qdrant_client.create_collection(
+                collection_name=collection_name,
+                vectors_config=models.VectorParams(
+                    size=vector_size,
+                    distance=models.Distance.COSINE
+                ),
+                hnsw_config=models.HnswConfigDiff(
+                    payload_m=16,
+                    m=0,
+                ),
+            )
+            
+            # Create payload indices
+            payload_indices = {
+                "document_id": PayloadSchemaType.KEYWORD,
+                "content": PayloadSchemaType.TEXT
+            }
+            
+            for field_name, schema_type in payload_indices.items():
+                self.qdrant_client.create_payload_index(
+                    collection_name=collection_name,
+                    field_name=field_name,
+                    field_schema=schema_type
+                )
+                    
+            print(f"Successfully created collection: {collection_name}")
+            return collection_name
+            
+        except Exception as e:
+            error_msg = f"Failed to create collection {collection_name}: {str(e)}"
+            logger.error(error_msg, exc_info=True)
+            raise ValueError(error_msg) from e
+
+# Example usage
+if __name__ == "__main__":
+    try:
+        qdrant_manager = QdrantManager()
+        collection_name = "ca-documents"
+        result = qdrant_manager.get_or_create_company_collection(collection_name)
+        print(f"Collection name: {result}")
+    except Exception as e:
+        print(f"Error: {e}")

backend/SETUP_OFFLINE.md

@@ -0,0 +1,68 @@
+# Offline Mode Setup Guide
+
+## Problem
+The application fails to start with network connectivity errors when trying to download the sentence transformer model from Hugging Face.
+
+## Error Message
+```
+Failed to resolve 'huggingface.co' ([Errno 11001] getaddrinfo failed)
+```
+
+## Solutions
+
+### Option 1: Download Model When You Have Internet Access
+1. When you have internet access, run the download script:
+   ```bash
+   cd backend
+   python download_model.py
+   ```
+
+2. This will download and cache the model locally for offline use.
+
+### Option 2: Manual Download
+If you have internet access on another machine:
+
+1. On a machine with internet access, run:
+   ```python
+   from sentence_transformers import SentenceTransformer
+   model = SentenceTransformer('all-MiniLM-L6-v2')
+   ```
+
+2. Copy the cached model from:
+   - Windows: `C:\Users\{username}\.cache\huggingface\transformers\`
+   - Linux/Mac: `~/.cache/huggingface/transformers/`
+
+3. Place it in the same location on your offline machine.
+
+### Option 3: Force Offline Mode
+If you believe the model is already cached, you can force offline mode by setting environment variables:
+
+```bash
+set TRANSFORMERS_OFFLINE=1
+set HF_HUB_OFFLINE=1
+python backend_api.py
+```
+
+### Option 4: Network Troubleshooting
+If you should have internet access:
+
+1. Check your internet connection
+2. If behind a corporate firewall, ensure `huggingface.co` is accessible
+3. Try accessing `https://huggingface.co` in your browser
+4. Contact your IT department if needed
+
+## Verification
+After setting up offline mode, you can verify the model is working by running:
+```bash
+python download_model.py
+```
+
+This will check if the model is cached and available for offline use.
+
+## Technical Details
+The sentence transformer model "all-MiniLM-L6-v2" is approximately 80MB and is used for generating embeddings from text for the vector search functionality.
+
+The application has been modified to:
+1. Try loading the model normally first
+2. Fall back to offline mode if network fails
+3. Provide clear error messages with solutions 

backend/STREAMING_ANALYSIS.md

@@ -0,0 +1,178 @@
+# Streaming Implementation Analysis
+
+## Overview
+This document analyzes the streaming implementation across the backend and frontend components of the CA Study Assistant application.
+
+## ✅ Backend Implementation Analysis
+
+### 1. RAG Streaming Function (`rag.py`)
+- **Status**: ✅ **GOOD** - Recently updated with latest API
+- **Implementation**: 
+  ```python
+  for chunk in self.client.models.generate_content_stream(
+      model='gemini-2.5-flash',
+      contents=prompt
+  ):
+      yield chunk.text
+  ```
+- **✅ Improvements Made**:
+  - Updated to use `generate_content_stream` instead of deprecated method
+  - Uses `gemini-2.5-flash` model (latest)
+  - Proper error handling with try-catch
+
+### 2. FastAPI Streaming Endpoint (`backend_api.py`)
+- **Status**: ✅ **IMPROVED** - Enhanced with better error handling
+- **Implementation**:
+  ```python
+  @app.post("/api/ask_stream")
+  async def ask_question_stream(request: QuestionRequest):
+      async def event_generator():
+          for chunk in rag_system.ask_question_stream(request.question):
+              if chunk:  # Only yield non-empty chunks
+                  yield chunk
+      return StreamingResponse(event_generator(), media_type="text/plain")
+  ```
+- **✅ Improvements Made**:
+  - Added null/empty chunk filtering
+  - Enhanced error handling in generator
+  - Proper async generator implementation
+
+## ✅ Frontend Implementation Analysis
+
+### 1. API Service (`services/api.js`)
+- **Status**: ✅ **IMPROVED** - Enhanced with better error handling
+- **Implementation**:
+  ```javascript
+  export const sendMessageStream = async (message, onChunk) => {
+      const response = await fetch(`${API_BASE_URL}/ask_stream`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ question: message }),
+      });
+      
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      
+      while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          const chunk = decoder.decode(value, { stream: true });
+          if (chunk) onChunk(chunk);
+      }
+  };
+  ```
+- **✅ Improvements Made**:
+  - Added HTTP status code checking
+  - Added reader.releaseLock() for proper cleanup
+  - Enhanced error handling
+  - Added null chunk filtering
+
+### 2. Chat Interface (`components/ChatInterface.js`)
+- **Status**: ✅ **GOOD** - Proper real-time UI updates
+- **Implementation**:
+  ```javascript
+  await sendMessageStream(message.trim(), (chunk) => {
+      fullResponse += chunk;
+      setConversations(prev => prev.map(conv =>
+          conv.id === conversationId ? {
+              ...conv,
+              messages: conv.messages.map(msg =>
+                  msg.id === assistantMessageId
+                      ? { ...msg, content: fullResponse }
+                      : msg
+              ),
+          } : conv
+      ));
+  });
+  ```
+- **✅ Features**:
+  - Real-time message updates
+  - Proper loading states
+  - Error handling with toast notifications
+  - Typing indicators during streaming
+
+## 🔧 Additional Improvements Made
+
+### 1. Error Handling Enhancement
+- **Backend**: Added comprehensive error handling in streaming generator
+- **Frontend**: Added HTTP status checking and proper resource cleanup
+- **Both**: Added null/empty chunk filtering
+
+### 2. Testing Infrastructure
+- **Created**: `test_streaming.py` - Comprehensive test suite for streaming
+- **Features**: 
+  - API connection testing
+  - Streaming functionality testing
+  - Error handling verification
+  - Performance metrics
+
+### 3. Documentation
+- **Created**: `STREAMING_ANALYSIS.md` - This comprehensive analysis
+- **Updated**: Inline code comments for better maintainability
+
+## 🚀 How to Test the Implementation
+
+### 1. Test API Connection
+```bash
+cd backend
+python test_streaming.py
+```
+
+### 2. Test Full Application
+```bash
+# Terminal 1 - Backend
+cd backend
+python backend_api.py
+
+# Terminal 2 - Frontend
+cd frontend
+npm start
+```
+
+### 3. Test Streaming Manually
+1. Open the application in browser
+2. Ask a question
+3. Observe real-time streaming response
+4. Check browser dev tools for any errors
+
+## 📊 Performance Characteristics
+
+### Backend
+- **Latency**: Low - streams immediately as chunks arrive from Gemini
+- **Memory**: Efficient - no buffering, direct streaming
+- **Error Recovery**: Graceful - continues streaming even if some chunks fail
+
+### Frontend
+- **UI Responsiveness**: Excellent - real-time updates without blocking
+- **Memory Usage**: Low - processes chunks as they arrive
+- **Error Handling**: Comprehensive - proper cleanup and user feedback
+
+## 🎯 API Compatibility
+
+### Google Generative AI API
+- **✅ Model**: `gemini-2.5-flash` (latest)
+- **✅ Method**: `generate_content_stream` (current)
+- **✅ Parameters**: `model` and `contents` (correct format)
+
+### FastAPI Streaming
+- **✅ Response Type**: `StreamingResponse` (correct)
+- **✅ Media Type**: `text/plain` (compatible with frontend)
+- **✅ Async Generator**: Proper async/await implementation
+
+### Frontend Fetch API
+- **✅ ReadableStream**: Proper stream handling
+- **✅ TextDecoder**: Correct UTF-8 decoding
+- **✅ Resource Management**: Proper cleanup
+
+## ✅ Conclusion
+
+The streaming implementation is **WORKING CORRECTLY** and has been enhanced with:
+
+1. **Latest API compatibility** - Uses gemini-2.5-flash with correct method
+2. **Robust error handling** - Comprehensive error management
+3. **Performance optimizations** - Efficient streaming without buffering
+4. **Proper resource management** - No memory leaks or resource issues
+5. **Real-time UI updates** - Smooth user experience
+6. **Comprehensive testing** - Test suite for validation
+
+The implementation follows best practices and should provide a smooth, responsive chat experience with real-time streaming responses. 

backend/app_v2.py

@@ -0,0 +1,130 @@
+import gradio as gr
+from rag import RAG  # Assuming your rag.py is in the same directory
+import os
+import time
+
+# --- Configuration ---
+GOOGLE_API_KEY = os.getenv("GOOGLE_API_KEY")
+if not GOOGLE_API_KEY:
+    raise ValueError("GOOGLE_API_KEY environment variable not set. Please set it before running the app.")
+
+COLLECTION_NAME = os.getenv("COLLECTION_NAME", "ca_documents")
+
+# --- Initialize RAG System ---
+try:
+    rag = RAG(GOOGLE_API_KEY, COLLECTION_NAME)
+except Exception as e:
+    print(f"Fatal Error initializing RAG system: {e}")
+    raise
+
+# --- Initial Chat State ---
+welcome_message = {
+    "role": "assistant",
+    "content": """
+👋 **Welcome to your CA Study Assistant!**
+"""
+}
+initial_chat_history = [welcome_message]
+
+# --- Core Functions ---
+def upload_file(file):
+    if file is None:
+        return """<div class="message-bubble error">
+            <p><strong>⚠️ Please select a file.</strong></p>
+            <p>Supported formats: PDF, DOCX, TXT.</p>
+        </div>"""
+    try:
+        start_time = time.time()
+        file_path = file.name
+        success = rag.upload_document(file_path)
+        duration = time.time() - start_time
+        if success:
+            return f"""<div class=\"message-bubble success\">
+                <p><strong>✅ Success!</strong></p>
+                <p><em>{os.path.basename(file_path)}</em> uploaded.</p>
+                <p><small>Processed in {duration:.2f}s</small></p>
+            </div>"""
+        else:
+            return f"""<div class=\"message-bubble error\"><p><strong>❌ Upload Failed.</strong></p><p>Please ensure <em>{os.path.basename(file_path)}</em> is a valid file.</p></div>"""
+    except Exception as e:
+        return f"""<div class=\"message-bubble error\"><p><strong>❌ An Error Occurred</strong></p><p><small>{str(e)}</small></p></div>"""
+
+def chat_with_docs(message: str, history: list):
+    if not message or not message.strip():
+        return "", history
+    history.append({"role": "user", "content": message})
+    answer = rag.ask_question(message)
+    history.append({"role": "assistant", "content": answer})
+    return "", history
+
+def clear_chat():
+    return initial_chat_history, ""
+
+# --- Load Custom CSS ---
+with open("style.css") as f:
+    css = f.read()
+
+# --- Gradio App Layout ---
+with gr.Blocks(css=css, title="CA Study Assistant", theme=gr.themes.Base(), mode="auto") as app:
+    with gr.Column(elem_id="app-container"):
+
+        gr.HTML("""
+            <div id="header">
+                <h1>CA Study Assistant</h1>
+                <p>The smartest way to study your materials.</p>
+            </div>
+        """)
+
+        with gr.Tabs(elem_classes="tab-nav"):
+            with gr.TabItem("💬 Ask Questions", id="chat_tab"):
+                chatbot = gr.Chatbot(
+                    value=initial_chat_history,
+                    elem_id="chat-history",
+                    show_label=False,
+                    type="messages",
+                    bubble_full_width=False,
+                )
+                with gr.Row(elem_id="chat-input-container"):
+                    with gr.Column(scale=10):
+                        chat_input = gr.Textbox(
+                            placeholder="Ask anything about your documents...",
+                            show_label=False, elem_id="chat-input", lines=1, max_lines=5,
+                        )
+                    with gr.Column(scale=1, min_width=60):
+                        send_btn = gr.Button('➤', elem_id="send-btn")
+                clear_btn = gr.Button("🗑️ Clear", elem_id="clear-btn")
+                clear_btn.click(fn=clear_chat, outputs=[chatbot, chat_input])
+
+            with gr.TabItem("📚 Upload Documents", id="upload_tab"):
+                with gr.Column(elem_id="upload-area"):
+                    gr.HTML("""
+                        <div id="upload-icon">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
+                        </div>
+                        <h3>Upload Your Study Materials</h3>
+                        <p>Drag & drop or click below to select a file.</p>
+                        <div style="margin-top: 0.5rem;">
+                            <span style="background:#c7d2fe;color:#5046e5;padding:0.3rem 0.75rem;border-radius:999px;margin-right:0.5rem;">PDF</span>
+                            <span style="background:#c7d2fe;color:#5046e5;padding:0.3rem 0.75rem;border-radius:999px;margin-right:0.5rem;">DOCX</span>
+                            <span style="background:#c7d2fe;color:#5046e5;padding:0.3rem 0.75rem;border-radius:999px;">TXT</span>
+                        </div>
+                    """)
+                    upload_input = gr.File(
+                        label="", file_count="single", file_types=[".pdf", ".docx", ".txt"],
+                        type="filepath",
+                    )
+                    upload_output = gr.HTML(elem_id="upload-output")
+
+    upload_input.upload(
+        fn=upload_file, inputs=[upload_input], outputs=[upload_output],
+        api_name="upload_document"
+    )
+    send_btn.click(
+        fn=chat_with_docs, inputs=[chat_input, chatbot], outputs=[chat_input, chatbot],
+    )
+    chat_input.submit(
+        fn=chat_with_docs, inputs=[chat_input, chatbot], outputs=[chat_input, chatbot],
+    )
+
+if __name__ == "__main__":
+    app.launch(share=True, debug=True)

backend/backend_api.py

@@ -0,0 +1,310 @@
+from fastapi import FastAPI, File, UploadFile, HTTPException, Request
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse, JSONResponse, StreamingResponse
+from pydantic import BaseModel
+import os
+import tempfile
+import uvicorn
+from typing import List, Optional
+import logging
+from contextlib import asynccontextmanager
+
+# Import your existing RAG system
+from rag import RAG
+from vector_store import VectorStore
+
+# Configure logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# Pydantic models
+class QuestionRequest(BaseModel):
+    question: str
+
+class QuestionResponse(BaseModel):
+    answer: str
+    sources: Optional[List[str]] = []
+
+class SearchRequest(BaseModel):
+    query: str
+    limit: Optional[int] = 5
+
+class StatusResponse(BaseModel):
+    status: str
+    message: str
+    version: str
+
+# Global variables
+rag_system = None
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    # Startup
+    global rag_system
+    try:
+        # Initialize RAG system
+        google_api_key = os.getenv("GOOGLE_API_KEY")
+        if not google_api_key:
+            raise ValueError("GOOGLE_API_KEY environment variable not set")
+        
+        collection_name = os.getenv("COLLECTION_NAME", "ca_documents")
+        rag_system = RAG(google_api_key, collection_name)
+        logger.info("RAG system initialized successfully")
+        
+    except Exception as e:
+        logger.error(f"Failed to initialize RAG system: {e}")
+        raise
+    
+    yield
+    
+    # Shutdown
+    logger.info("Shutting down...")
+
+# Create FastAPI app
+app = FastAPI(
+    title="CA Study Assistant API",
+    description="Backend API for the CA Study Assistant RAG system",
+    version="2.0.0",
+    lifespan=lifespan
+)
+
+# CORS middleware
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Health check endpoint
+@app.get("/health")
+async def health_check():
+    return {"status": "healthy", "message": "CA Study Assistant API is running"}
+
+# API Routes
+# @app.post("/api/ask", response_model=QuestionResponse)
+# async def ask_question(request: QuestionRequest):
+#     """
+#     Ask a question to the RAG system
+#     """
+#     try:
+#         if not rag_system:
+#             raise HTTPException(status_code=500, detail="RAG system not initialized")
+        
+#         logger.info(f"Processing question: {request.question[:100]}...")
+#         answer = rag_system.ask_question(request.question)
+        
+#         # Extract sources from the answer if they exist
+#         sources = []
+#         if "Sources:" in answer:
+#             parts = answer.split("Sources:")
+#             if len(parts) > 1:
+#                 answer = parts[0].strip()
+#                 sources_text = parts[1].strip()
+#                 sources = [s.strip() for s in sources_text.split(",") if s.strip()]
+        
+#         return QuestionResponse(answer=answer, sources=sources)
+        
+#     except Exception as e:
+#         logger.error(f"Error processing question: {e}")
+#         raise HTTPException(status_code=500, detail=f"Error processing question: {str(e)}")
+
+@app.post("/api/ask_stream")
+async def ask_question_stream(request: QuestionRequest):
+    """
+    Ask a question to the RAG system and get a streaming response
+    """
+    try:
+        if not rag_system:
+            raise HTTPException(status_code=500, detail="RAG system not initialized")
+        
+        logger.info(f"Processing streaming question: {request.question[:100]}...")
+        
+        async def event_generator():
+            try:
+                for chunk in rag_system.ask_question_stream(request.question):
+                    if chunk:  # Only yield non-empty chunks
+                        yield chunk
+            except Exception as e:
+                logger.error(f"Error during stream generation: {e}")
+                # This part may not be sent if the connection is already closed.
+                yield f"Error generating answer: {str(e)}"
+
+        return StreamingResponse(event_generator(), media_type="text/plain")
+        
+    except Exception as e:
+        logger.error(f"Error processing streaming question: {e}")
+        raise HTTPException(status_code=500, detail=f"Error processing streaming question: {str(e)}")
+
+@app.post("/api/upload")
+async def upload_document(file: UploadFile = File(...)):
+    """
+    Upload a document to the RAG system
+    """
+    try:
+        if not rag_system:
+            raise HTTPException(status_code=500, detail="RAG system not initialized")
+        
+        # Validate file type
+        allowed_extensions = ['.pdf', '.docx', '.txt']
+        file_extension = os.path.splitext(file.filename)[1].lower()
+        
+        if file_extension not in allowed_extensions:
+            raise HTTPException(
+                status_code=400, 
+                detail=f"Unsupported file type. Allowed types: {', '.join(allowed_extensions)}"
+            )
+        
+        # Create temporary file
+        with tempfile.NamedTemporaryFile(delete=False, suffix=file_extension) as temp_file:
+            content = await file.read()
+            temp_file.write(content)
+            temp_file_path = temp_file.name
+        
+        try:
+            # Process the uploaded file
+            logger.info(f"Processing uploaded file: {file.filename}")
+            success = rag_system.upload_document(temp_file_path)
+            
+            if success:
+                return {
+                    "status": "success",
+                    "message": f"File '{file.filename}' uploaded and processed successfully",
+                    "filename": file.filename,
+                    "size": len(content)
+                }
+            else:
+                raise HTTPException(status_code=500, detail="Failed to process uploaded file")
+                
+        finally:
+            # Clean up temporary file
+            if os.path.exists(temp_file_path):
+                os.unlink(temp_file_path)
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Error uploading document: {e}")
+        raise HTTPException(status_code=500, detail=f"Error uploading document: {str(e)}")
+
+@app.post("/api/search")
+async def search_documents(request: SearchRequest):
+    """
+    Search for similar documents
+    """
+    try:
+        if not rag_system:
+            raise HTTPException(status_code=500, detail="RAG system not initialized")
+        
+        results = rag_system.vector_store.search_similar(request.query, limit=request.limit)
+        
+        return {
+            "status": "success",
+            "results": results,
+            "count": len(results)
+        }
+        
+    except Exception as e:
+        logger.error(f"Error searching documents: {e}")
+        raise HTTPException(status_code=500, detail=f"Error searching documents: {str(e)}")
+
+@app.get("/api/status", response_model=StatusResponse)
+async def get_status():
+    """
+    Get system status
+    """
+    try:
+        status = "healthy" if rag_system else "unhealthy"
+        message = "RAG system is operational" if rag_system else "RAG system not initialized"
+        
+        return StatusResponse(
+            status=status,
+            message=message,
+            version="2.0.0"
+        )
+        
+    except Exception as e:
+        logger.error(f"Error getting status: {e}")
+        raise HTTPException(status_code=500, detail=f"Error getting status: {str(e)}")
+
+@app.get("/api/collection/info")
+async def get_collection_info():
+    """
+    Get information about the vector collection
+    """
+    try:
+        if not rag_system:
+            raise HTTPException(status_code=500, detail="RAG system not initialized")
+        
+        info = rag_system.vector_store.get_collection_info()
+        return {
+            "status": "success",
+            "collection_info": info
+        }
+        
+    except Exception as e:
+        logger.error(f"Error getting collection info: {e}")
+        raise HTTPException(status_code=500, detail=f"Error getting collection info: {str(e)}")
+
+frontend_build_path = "../frontend/build"
+if os.path.exists(frontend_build_path):
+    app.mount("/static", StaticFiles(directory=f"{frontend_build_path}/static"), name="static")
+    
+    @app.get("/{full_path:path}")
+    async def serve_react_app(request: Request, full_path: str):
+        """
+        Serve React app for all non-API routes
+        """
+        # If it's an API route, let FastAPI handle it
+        if full_path.startswith("api/"):
+            raise HTTPException(status_code=404, detail="API endpoint not found")
+        
+        # For static files (images, etc.)
+        if "." in full_path:
+            file_path = f"{frontend_build_path}/{full_path}"
+            if os.path.exists(file_path):
+                return FileResponse(file_path)
+            else:
+                raise HTTPException(status_code=404, detail="File not found")
+        
+        # For all other routes, serve index.html (React Router will handle it)
+        return FileResponse(f"{frontend_build_path}/index.html")
+
+# Error handlers
+@app.exception_handler(404)
+async def not_found_handler(request: Request, exc: HTTPException):
+    if request.url.path.startswith("/api/"):
+        return JSONResponse(
+            status_code=404,
+            content={"detail": "API endpoint not found"}
+        )
+    
+    # For non-API routes, serve React app
+    if os.path.exists(f"{frontend_build_path}/index.html"):
+        return FileResponse(f"{frontend_build_path}/index.html")
+    else:
+        return JSONResponse(
+            status_code=404,
+            content={"detail": "React app not built. Run 'npm run build' in the frontend directory."}
+        )
+
+@app.exception_handler(500)
+async def internal_error_handler(request: Request, exc: Exception):
+    logger.error(f"Internal server error: {exc}")
+    return JSONResponse(
+        status_code=500,
+        content={"detail": "Internal server error"}
+    )
+
+if __name__ == "__main__":
+    # Get port from environment or default to 8000
+    port = int(os.getenv("PORT", 8000))
+    uvicorn.run(
+        "backend_api:app",
+        host="0.0.0.0",
+        port=port,
+        reload=True,
+        log_level="info"
+    ) 

backend/download_model.py

@@ -0,0 +1,66 @@
+#!/usr/bin/env python3
+"""
+Download the sentence transformer model for offline use.
+Run this script when you have internet access to cache the model locally.
+"""
+
+import os
+import sys
+from sentence_transformers import SentenceTransformer
+
+def download_model():
+    """Download and cache the sentence transformer model."""
+    try:
+        print("Downloading sentence transformer model 'all-MiniLM-L6-v2'...")
+        print("This may take a few minutes on first run...")
+        
+        # This will download and cache the model
+        model = SentenceTransformer("all-MiniLM-L6-v2")
+        
+        # Test that it works
+        test_text = "This is a test sentence."
+        embedding = model.encode([test_text])
+        
+        print(f"✓ Model downloaded successfully!")
+        print(f"✓ Model tested successfully!")
+        print(f"✓ Embedding dimension: {len(embedding[0])}")
+        print(f"✓ Model cache location: {model.cache_folder}")
+        
+        return True
+        
+    except Exception as e:
+        print(f"✗ Failed to download model: {e}")
+        return False
+
+def check_model_exists():
+    """Check if the model is already cached."""
+    try:
+        # Try to load from cache
+        import os
+        os.environ['TRANSFORMERS_OFFLINE'] = '1'
+        os.environ['HF_HUB_OFFLINE'] = '1'
+        
+        model = SentenceTransformer("all-MiniLM-L6-v2")
+        print("✓ Model is already cached and available for offline use!")
+        return True
+        
+    except Exception:
+        print("✗ Model is not cached or not available for offline use")
+        return False
+
+if __name__ == "__main__":
+    print("Sentence Transformer Model Downloader")
+    print("=" * 40)
+    
+    # Check if model already exists
+    if check_model_exists():
+        print("\nModel is already available. No download needed.")
+        sys.exit(0)
+    
+    # Download the model
+    print("\nDownloading model...")
+    if download_model():
+        print("\n✓ Setup complete! You can now run the application offline.")
+    else:
+        print("\n✗ Download failed. Please check your internet connection.")
+        sys.exit(1) 

backend/rag.py

@@ -0,0 +1,198 @@
+from google import genai
+from vector_store import VectorStore
+import PyPDF2
+from docx import Document
+from typing import List
+import os
+from langchain_text_splitters import RecursiveCharacterTextSplitter
+
+class RAG:
+    def __init__(self, google_api_key: str, collection_name: str = "ca_documents"):
+        # Setup Gemini
+        # The client gets the API key from the environment variable `GOOGLE_API_KEY`
+        # or from the `api_key` argument.
+        self.client = genai.Client(api_key=google_api_key)
+        
+        # Setup Vector Store (Qdrant configuration is handled via environment variables)
+        self.vector_store = VectorStore(collection_name)
+        
+        # Setup Text Splitter
+        self.text_splitter = RecursiveCharacterTextSplitter(
+            chunk_size=1000,
+            chunk_overlap=200,
+            length_function=len,
+            separators=["\n\n", "\n", ". ", " ", ""]
+        )
+
+    def process_pdf(self, file_path: str) -> List[str]:
+        """Extract text from PDF and split into chunks using RecursiveTextSplitter"""
+        full_text = ""
+        with open(file_path, 'rb') as file:
+            pdf_reader = PyPDF2.PdfReader(file)
+            for page in pdf_reader.pages:
+                text = page.extract_text()
+                if text.strip():
+                    full_text += text + "\n"
+        
+        # Use RecursiveCharacterTextSplitter for better chunking
+        chunks = self.text_splitter.split_text(full_text)
+        return [chunk.strip() for chunk in chunks if chunk.strip()]
+    
+    def process_docx(self, file_path: str) -> List[str]:
+        """Extract text from DOCX and split into chunks using RecursiveTextSplitter"""
+        doc = Document(file_path)
+        full_text = "\n".join([paragraph.text for paragraph in doc.paragraphs])
+        
+        # Use RecursiveCharacterTextSplitter for better chunking
+        chunks = self.text_splitter.split_text(full_text)
+        return [chunk.strip() for chunk in chunks if chunk.strip()]
+    
+    def upload_document(self, file_path: str) -> bool:
+        """Upload and process document"""
+        try:
+            filename = os.path.basename(file_path)
+            
+            if file_path.endswith('.pdf'):
+                chunks = self.process_pdf(file_path)
+            elif file_path.endswith('.docx'):
+                chunks = self.process_docx(file_path)
+            elif file_path.endswith('.txt'):
+                with open(file_path, 'r', encoding='utf-8') as f:
+                    full_text = f.read()
+                chunks = self.text_splitter.split_text(full_text)
+                chunks = [chunk.strip() for chunk in chunks if chunk.strip()]
+            else:
+                print("Unsupported file format")
+                return False
+            
+            # Store chunks in Qdrant
+            for i, chunk in enumerate(chunks):
+                self.vector_store.add_document(
+                    text=chunk,
+                    metadata={"source": filename, "chunk_id": i}
+                )
+            
+            print(f"Uploaded {len(chunks)} chunks from {filename}")
+            return True
+            
+        except Exception as e:
+            print(f"Error uploading document: {e}")
+            return False
+    
+
+    def is_casual_conversation(self, question: str) -> bool:
+        """Determine if the question is casual conversation vs CA-specific query"""
+        
+        question_lower = question.lower().strip()
+        
+        # Pure casual greetings (exact matches or very short)
+        pure_casual = [
+            'hello', 'hi', 'hey', 'good morning', 'good afternoon', 'good evening',
+            'how are you', 'what\'s up', 'greetings', 'thanks', 'thank you',
+            'bye', 'goodbye', 'see you', 'nice to meet you', 'who are you',
+            'what can you do', 'help me', 'what is your name', 'introduce yourself',
+            'how do you work', 'what are you', 'can you help me'
+        ]
+        
+        # Check for exact matches first
+        if question_lower in pure_casual:
+            return True
+        
+        # Check if it's a very short greeting (≤ 4 words) without technical terms
+        words = question_lower.split()
+        if len(words) <= 4:
+            # Technical/question indicators
+            technical_indicators = [
+                'what', 'how', 'why', 'when', 'where', 'explain', 'define', 'calculate',
+                'accounting', 'audit', 'tax', 'finance', 'depreciation', 'balance', 'sheet',
+                'profit', 'loss', 'asset', 'liability', 'equity', 'revenue', 'expense',
+                'journal', 'ledger', 'trial', 'cash', 'flow', 'ratio', 'analysis'
+            ]
+            
+            # If no technical indicators and contains casual words, it's casual
+            has_casual = any(casual in question_lower for casual in ['hello', 'hi', 'hey', 'thanks', 'bye'])
+            has_technical = any(tech in question_lower for tech in technical_indicators)
+            
+            if has_casual and not has_technical:
+                return True
+        
+        # Check for greetings followed by actual questions
+        # Pattern: "hello, what is..." or "hi there, how do..."
+        greeting_patterns = [
+            r'^(hello|hi|hey|good morning|good afternoon|good evening),?\s+(what|how|why|when|where|explain|define|tell|can you)',
+            r'^(hello|hi|hey)\s+(there|everyone)?,?\s+(what|how|why|when|where|explain|define|tell|can you)'
+        ]
+        
+        import re
+        for pattern in greeting_patterns:
+            if re.search(pattern, question_lower):
+                return False  # It's a question with greeting prefix, not pure casual
+        
+        return False
+
+    def ask_question_stream(self, question: str):
+        """Ask a question and get a streaming answer"""
+        try:
+            # 1. Check if this is casual conversation
+            if self.is_casual_conversation(question):
+                # Respond as a friendly CA assistant for casual conversation
+                casual_prompt = f"""You are a friendly CA (Chartered Accountant) study assistant. The user said: "{question}"
+
+Respond naturally and warmly as a CA study assistant. Be helpful and mention that you can help with CA studies, accounting concepts, financial topics, etc. Keep it brief but friendly."""
+
+                for chunk in self.client.models.generate_content_stream(
+                    model='gemini-2.5-flash',
+                    contents=casual_prompt
+                ):
+                    yield chunk.text
+                return
+
+            # 2. For CA-specific questions, search for similar documents
+            similar_docs = self.vector_store.search_similar(question, limit=3)
+
+            if similar_docs and len(similar_docs) > 0:
+                # 3. Create context from similar documents
+                context = "\n\n".join([doc["text"] for doc in similar_docs])
+
+                # 4. Create prompt for Gemini with context
+                prompt = f"""You are a CA study assistant. Based on the following context from uploaded documents, answer the question.
+
+Context:
+{context}
+
+Question: {question}
+
+Please provide a detailed answer based on the context above. If you need more specific information, suggest what documents might be helpful."""
+
+            else:
+                # 5. No documents found, but still be helpful
+                prompt = f"""You are a CA (Chartered Accountant) study assistant. The user asked: "{question}"
+
+Even though no specific study materials have been uploaded yet, provide a helpful answer based on your knowledge of CA studies, accounting, finance, taxation, and auditing. Be informative and suggest that uploading relevant study materials would help provide more specific and detailed answers.
+
+Question: {question}"""
+
+            # 6. Get answer from Gemini
+            for chunk in self.client.models.generate_content_stream(
+                model='gemini-2.5-flash',
+                contents=prompt
+            ):
+                yield chunk.text
+
+        except Exception as e:
+            yield f"Error generating answer: {e}"
+
+# Simple usage example
+if __name__ == "__main__":
+    # Initialize
+    rag = RAG(
+        google_api_key="your_google_api_key",
+        collection_name="ca_documents"
+    )
+    
+    # Upload documents
+    # rag.upload_document("path/to/your/ca_document.pdf")
+    
+    # Ask questions
+    # answer = rag.ask_question("What is depreciation?")
+    # print(answer) 

backend/requirements.txt

@@ -0,0 +1,12 @@
+google-genai
+qdrant-client
+sentence-transformers
+PyPDF2
+python-docx
+python-dotenv
+langchain-text-splitters
+fastapi
+uvicorn[standard]
+python-multipart
+gradio
+pycryptodome

backend/vector_store.py

@@ -0,0 +1,297 @@
+from qdrant_client import QdrantClient, models
+from qdrant_client.models import PointStruct, PayloadSchemaType
+from sentence_transformers import SentenceTransformer
+import uuid
+import os
+import logging
+from typing import List, Dict, Any
+from dotenv import load_dotenv
+
+# Load environment variables
+load_dotenv()
+
+# Configure logging
+logger = logging.getLogger(__name__)
+
+class VectorStore:
+    def __init__(self, collection_name: str = "ca_documents"):
+        self.collection_name = collection_name
+        
+        # Get Qdrant configuration from environment variables
+        qdrant_url = os.getenv("QDRANT_URL")
+        qdrant_api_key = os.getenv("QDRANT_API_KEY")
+        
+        if not qdrant_url or not qdrant_api_key:
+            raise ValueError("QDRANT_URL and QDRANT_API_KEY environment variables are required")
+        
+        # Connect to Qdrant cluster with API key
+        self.client = QdrantClient(
+            url=qdrant_url,
+            api_key=qdrant_api_key,
+        )
+        print("Connected to Qdrant")
+        
+        # Initialize embedding model with offline support
+        self.embedding_model = self._initialize_embedding_model()
+        
+        # Create collection with proper indices
+        self._create_collection_if_not_exists()
+    
+    def _initialize_embedding_model(self):
+        """Initialize the embedding model with offline support"""
+        try:
+            # Try to load the model normally first
+            print("Attempting to load sentence transformer model...")
+            model = SentenceTransformer("all-MiniLM-L6-v2")
+            print("Successfully loaded sentence transformer model")
+            return model
+            
+        except Exception as e:
+            print(f"Failed to load model online: {e}")
+            print("Attempting to load model in offline mode...")
+            
+            try:
+                # Try to load from cache with offline mode
+                import os
+                os.environ['TRANSFORMERS_OFFLINE'] = '1'
+                os.environ['HF_HUB_OFFLINE'] = '1'
+                
+                model = SentenceTransformer("all-MiniLM-L6-v2", cache_folder=None)
+                print("Successfully loaded model in offline mode")
+                return model
+                
+            except Exception as offline_error:
+                print(f"Failed to load model in offline mode: {offline_error}")
+                
+                # Try to find a local cache directory
+                try:
+                    import transformers
+                    cache_dir = os.path.join(os.path.expanduser("~"), ".cache", "huggingface", "transformers")
+                    if os.path.exists(cache_dir):
+                        print(f"Looking for cached model in: {cache_dir}")
+                        
+                        # Try to load from specific cache directory
+                        model = SentenceTransformer("all-MiniLM-L6-v2", cache_folder=cache_dir)
+                        print("Successfully loaded model from cache")
+                        return model
+                        
+                except Exception as cache_error:
+                    print(f"Failed to load from cache: {cache_error}")
+                
+                # If all else fails, provide instructions
+                error_msg = """
+                Failed to initialize sentence transformer model. This is likely due to network connectivity issues.
+                
+                Solutions:
+                1. Check your internet connection
+                2. If behind a corporate firewall, ensure huggingface.co is accessible
+                3. Pre-download the model when you have internet access by running:
+                   python -c "from sentence_transformers import SentenceTransformer; SentenceTransformer('all-MiniLM-L6-v2')"
+                4. Or manually download the model and place it in your cache directory
+                
+                For now, the application will not work without the embedding model.
+                """
+                
+                print(error_msg)
+                raise RuntimeError(f"Cannot initialize embedding model: {str(e)}")
+    
+    def _create_collection_if_not_exists(self) -> bool:
+        """
+        Create collection with proper payload indices if it doesn't exist.
+        
+        Returns:
+            bool: True if collection exists or was created successfully
+        """
+        try:
+            # Check if collection exists
+            collections = self.client.get_collections()
+            collection_names = [col.name for col in collections.collections]
+            
+            if self.collection_name in collection_names:
+                print(f"Collection '{self.collection_name}' already exists")
+                return True
+            
+            print(f"Creating new collection: {self.collection_name}")
+            
+            # Vector size for all-MiniLM-L6-v2 is 384
+            vector_size = 1
+            
+            # Create collection with vector configuration
+            self.client.create_collection(
+                collection_name=self.collection_name,
+                vectors_config=models.VectorParams(
+                    size=vector_size,
+                    distance=models.Distance.COSINE
+                ),
+                hnsw_config=models.HnswConfigDiff(
+                    payload_m=16,
+                    m=0,
+                ),
+            )
+            
+            # Create payload indices
+            payload_indices = {
+                "document_id": PayloadSchemaType.KEYWORD,
+                "content": PayloadSchemaType.TEXT
+            }
+            
+            for field_name, schema_type in payload_indices.items():
+                self.client.create_payload_index(
+                    collection_name=self.collection_name,
+                    field_name=field_name,
+                    field_schema=schema_type
+                )
+            
+            print(f"Successfully created collection: {self.collection_name}")
+            return True
+            
+        except Exception as e:
+            error_msg = f"Failed to create collection {self.collection_name}: {str(e)}"
+            logger.error(error_msg, exc_info=True)
+            print(error_msg)
+            return False
+    
+    def add_document(self, text: str, metadata: Dict = None) -> bool:
+        """Add a document to the collection"""
+        try:
+            # Generate embedding
+            embedding = self.embedding_model.encode([text])[0]
+            
+            # Generate document ID
+            document_id = str(uuid.uuid4())
+            
+            # Create payload with indexed fields
+            payload = {
+                "document_id": document_id,  # KEYWORD index
+                "content": text,             # TEXT index - stores the actual text content
+            }
+            
+            # Add metadata fields if provided
+            if metadata:
+                payload.update(metadata)
+            
+            # Create point
+            point = PointStruct(
+                id=document_id,
+                vector=embedding.tolist(),
+                payload=payload
+            )
+            
+            # Store in Qdrant
+            self.client.upsert(
+                collection_name=self.collection_name,
+                points=[point]
+            )
+            
+            return True
+        except Exception as e:
+            print(f"Error adding document: {e}")
+            return False
+    
+    def search_similar(self, query: str, limit: int = 5) -> List[Dict]:
+        """Search for similar documents"""
+        try:
+            # Generate query embedding
+            query_embedding = self.embedding_model.encode([query])[0]
+            
+            # Search in Qdrant
+            results = self.client.search(
+                collection_name=self.collection_name,
+                query_vector=query_embedding.tolist(),
+                limit=limit
+            )
+            
+            # Return results
+            return [
+                {
+                    "text": hit.payload["content"],  # Use content field
+                    "document_id": hit.payload.get("document_id"),
+                    "score": hit.score,
+                    # Include any additional metadata fields
+                    **{k: v for k, v in hit.payload.items() if k not in ["content", "document_id"]}
+                }
+                for hit in results
+            ]
+            
+        except Exception as e:
+            print(f"Error searching: {e}")
+            return []
+    
+    def search_by_document_id(self, document_id: str) -> Dict:
+        """Search for a specific document by its ID using the indexed field"""
+        try:
+            # Use scroll to find document by document_id
+            results = self.client.scroll(
+                collection_name=self.collection_name,
+                scroll_filter=models.Filter(
+                    must=[
+                        models.FieldCondition(
+                            key="document_id",
+                            match=models.MatchValue(value=document_id)
+                        )
+                    ]
+                ),
+                limit=1
+            )
+            
+            if results[0]:  # results is a tuple (points, next_page_offset)
+                hit = results[0][0]  # Get first point
+                return {
+                    "text": hit.payload["content"],  # Use content field
+                    "document_id": hit.payload.get("document_id"),
+                    # Include any additional metadata fields
+                    **{k: v for k, v in hit.payload.items() if k not in ["content", "document_id"]}
+                }
+            else:
+                return None
+                
+        except Exception as e:
+            print(f"Error searching by document ID: {e}")
+            return None
+    
+    def search_by_content(self, content_query: str, limit: int = 5) -> List[Dict]:
+        """Search for documents by content using the TEXT index"""
+        try:
+            # Use scroll with text search filter
+            results = self.client.scroll(
+                collection_name=self.collection_name,
+                scroll_filter=models.Filter(
+                    must=[
+                        models.FieldCondition(
+                            key="content",
+                            match=models.MatchText(text=content_query)
+                        )
+                    ]
+                ),
+                limit=limit
+            )
+            
+            # Return results
+            return [
+                {
+                    "text": hit.payload["content"],  # Use content field
+                    "document_id": hit.payload.get("document_id"),
+                    # Include any additional metadata fields
+                    **{k: v for k, v in hit.payload.items() if k not in ["content", "document_id"]}
+                }
+                for hit in results[0]  # results[0] contains the points
+            ]
+            
+        except Exception as e:
+            print(f"Error searching by content: {e}")
+            return []
+    
+    def get_collection_info(self) -> Dict:
+        """Get information about the collection"""
+        try:
+            collection_info = self.client.get_collection(self.collection_name)
+            return {
+                "name": collection_info.config.name,
+                "vector_size": collection_info.config.params.vectors.size,
+                "distance": collection_info.config.params.vectors.distance,
+                "points_count": collection_info.points_count,
+                "indexed_only": collection_info.config.params.vectors.on_disk
+            }
+        except Exception as e:
+            print(f"Error getting collection info: {e}")
+            return {} 

docker-compose.yml

@@ -0,0 +1,22 @@
+version: '3.8'
+
+services:
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    image: ca-study-assistant-backend
+    container_name: backend-container
+    restart: unless-stopped
+
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    image: ca-study-assistant-frontend
+    container_name: frontend-container
+    ports:
+      - "80:80" # Expose port 80 to the host (Hugging Face Spaces)
+    restart: unless-stopped
+    depends_on:
+      - backend # Ensures the backend starts before the frontend 

frontend/Dockerfile

@@ -0,0 +1,34 @@
+# Stage 1: Build the React application
+FROM node:18-alpine AS build
+
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package.json package-lock.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application source code
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Stage 2: Serve the application with Nginx
+FROM nginx:1.23-alpine
+
+# Copy the build output from the build stage
+COPY --from=build /app/build /usr/share/nginx/html
+
+# Remove the default Nginx configuration
+RUN rm /etc/nginx/conf.d/default.conf
+
+# Copy our custom Nginx configuration
+COPY nginx.conf /etc/nginx/conf.d
+
+# Expose port 80
+EXPOSE 80
+
+# Start Nginx
+CMD ["nginx", "-g", "daemon off;"] 

frontend/nginx.conf

@@ -0,0 +1,29 @@
+server {
+    listen 80;
+
+    # Root directory for the React app
+    root /usr/share/nginx/html;
+    index index.html index.htm;
+
+    # Handle client-side routing for React
+    location / {
+        try_files $uri /index.html;
+    }
+
+    # Proxy API requests to the backend service
+    # Any request to http://<your-space-url>/api/...
+    # will be forwarded to http://backend:8000/...
+    location /api {
+        proxy_pass http://backend:8000; # 'backend' is the service name in docker-compose.yml
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    # Optional: Improve performance with caching for static assets
+    location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg)$ {
+        expires 1y;
+        add_header Cache-Control "public";
+    }
+} 

frontend/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "ca-study-assistant-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@headlessui/react": "^1.7.17",
+    "@heroicons/react": "^2.0.18",
+    "@tailwindcss/typography": "^0.5.10",
+    "axios": "^1.6.2",
+    "framer-motion": "^10.16.16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-hot-toast": "^2.4.1",
+    "react-markdown": "^9.0.1",
+    "react-scripts": "5.0.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "remark-gfm": "^4.0.0",
+    "uuid": "^9.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@types/uuid": "^9.0.7",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "typescript": "^4.9.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "proxy": "http://localhost:8000"
+} 

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+} 

frontend/public/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="CA Study Assistant - AI-powered study companion for Chartered Accountant exam preparation" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    
+    <!-- Preconnect to fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    
+    <title>CA Study Assistant</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html> 

frontend/public/manifest.json

@@ -0,0 +1,8 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+} 

frontend/src/App.js

@@ -0,0 +1,218 @@
+import React, { useState, useEffect } from 'react';
+import { Toaster } from 'react-hot-toast';
+import ChatInterface from './components/ChatInterface';
+import Sidebar from './components/Sidebar';
+import WelcomeScreen from './components/WelcomeScreen';
+import { SunIcon, MoonIcon, HomeIcon } from '@heroicons/react/24/outline';
+import ConversationStorage from './utils/conversationStorage';
+
+function App() {
+  const [darkMode, setDarkMode] = useState(false);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [chatStarted, setChatStarted] = useState(false);
+  const [conversations, setConversations] = useState([]);
+  const [activeConversationId, setActiveConversationId] = useState(null);
+
+  useEffect(() => {
+    // Check for saved theme preference or default to light mode
+    const savedTheme = localStorage.getItem('theme');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    
+    if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
+      setDarkMode(true);
+      document.documentElement.classList.add('dark');
+    }
+
+    // Load conversations from localStorage
+    const savedConversations = ConversationStorage.loadConversations();
+    if (savedConversations.length > 0) {
+      setConversations(savedConversations);
+      setChatStarted(true);
+      // Set the most recent conversation as active
+      setActiveConversationId(savedConversations[0].id);
+    }
+  }, []);
+
+  const toggleDarkMode = () => {
+    setDarkMode(!darkMode);
+    if (darkMode) {
+      document.documentElement.classList.remove('dark');
+      localStorage.setItem('theme', 'light');
+    } else {
+      document.documentElement.classList.add('dark');
+      localStorage.setItem('theme', 'dark');
+    }
+  };
+
+  const startNewChat = () => {
+    const newConversation = {
+      id: Date.now().toString(),
+      title: 'New Conversation',
+      messages: [],
+      createdAt: new Date(),
+      updatedAt: new Date(),
+    };
+    
+    // Save to localStorage
+    ConversationStorage.addConversation(newConversation);
+    
+    setConversations(prev => [newConversation, ...prev]);
+    setActiveConversationId(newConversation.id);
+    setChatStarted(true);
+    setSidebarOpen(false);
+  };
+
+  const deleteConversation = (conversationId) => {
+    // Delete from localStorage
+    ConversationStorage.deleteConversation(conversationId);
+    
+    setConversations(prev => prev.filter(conv => conv.id !== conversationId));
+    
+    // If the deleted conversation was active, switch to another one
+    if (activeConversationId === conversationId) {
+      const remainingConversations = conversations.filter(conv => conv.id !== conversationId);
+      if (remainingConversations.length > 0) {
+        setActiveConversationId(remainingConversations[0].id);
+      } else {
+        setActiveConversationId(null);
+        setChatStarted(false);
+      }
+    }
+  };
+
+  const updateConversations = (updatedConversations) => {
+    setConversations(updatedConversations);
+    // Save to localStorage
+    ConversationStorage.saveConversations(updatedConversations);
+  };
+
+  const handleFirstMessage = (message) => {
+    if (!chatStarted) {
+      startNewChat();
+    }
+  };
+
+  const goBackToHome = () => {
+    setActiveConversationId(null);
+    setChatStarted(false);
+    setSidebarOpen(false);
+  };
+
+  return (
+    <div className={`min-h-screen transition-colors duration-200 ${
+      darkMode 
+        ? 'bg-gray-900 text-white' 
+        : 'bg-gray-50 text-gray-900'
+    }`}>
+      {/* Header */}
+      <header className={`fixed top-0 left-0 right-0 z-50 ${
+        darkMode 
+          ? 'bg-gray-800/95 border-gray-700' 
+          : 'bg-white/95 border-gray-200'
+      } backdrop-blur-sm border-b`}>
+        <div className="flex items-center justify-between px-4 py-3">
+          <div className="flex items-center space-x-4">
+            <button
+              onClick={() => setSidebarOpen(!sidebarOpen)}
+              className={`p-2 rounded-lg transition-colors ${
+                darkMode
+                  ? 'hover:bg-gray-700 text-gray-300'
+                  : 'hover:bg-gray-100 text-gray-600'
+              }`}
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+              </svg>
+            </button>
+            
+            <button
+              onClick={goBackToHome}
+              className="text-lg font-semibold gradient-text hover:opacity-80 transition-opacity"
+            >
+              CA Study Assistant
+            </button>
+          </div>
+
+          <div className="flex items-center space-x-2">
+            {chatStarted && (
+              <button
+                onClick={goBackToHome}
+                className={`p-2 rounded-lg transition-colors ${
+                  darkMode
+                    ? 'hover:bg-gray-700 text-gray-300'
+                    : 'hover:bg-gray-100 text-gray-600'
+                }`}
+                title="Back to Home"
+              >
+                <HomeIcon className="w-5 h-5" />
+              </button>
+            )}
+            
+            <button
+              onClick={toggleDarkMode}
+              className={`p-2 rounded-lg transition-colors ${
+                darkMode
+                  ? 'hover:bg-gray-700 text-gray-300'
+                  : 'hover:bg-gray-100 text-gray-600'
+              }`}
+            >
+              {darkMode ? (
+                <SunIcon className="w-5 h-5" />
+              ) : (
+                <MoonIcon className="w-5 h-5" />
+              )}
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* Sidebar */}
+      <Sidebar
+        open={sidebarOpen}
+        onClose={() => setSidebarOpen(false)}
+        conversations={conversations}
+        activeConversationId={activeConversationId}
+        onConversationSelect={setActiveConversationId}
+        onNewChat={startNewChat}
+        onDeleteConversation={deleteConversation}
+        onBackToHome={goBackToHome}
+        darkMode={darkMode}
+      />
+
+      {/* Main Content */}
+      <main className={`transition-all duration-200 ${
+        sidebarOpen ? 'md:ml-64' : 'ml-0'
+      } pt-16`}>
+        {chatStarted ? (
+          <ChatInterface
+            conversationId={activeConversationId}
+            conversations={conversations}
+            setConversations={updateConversations}
+            darkMode={darkMode}
+          />
+        ) : (
+          <WelcomeScreen
+            onStartChat={handleFirstMessage}
+            onNewChat={startNewChat}
+            darkMode={darkMode}
+          />
+        )}
+      </main>
+
+      {/* Toast notifications */}
+      <Toaster
+        position="top-right"
+        toastOptions={{
+          duration: 4000,
+          style: {
+            background: darkMode ? '#374151' : '#ffffff',
+            color: darkMode ? '#f9fafb' : '#111827',
+            border: darkMode ? '1px solid #4b5563' : '1px solid #e5e7eb',
+          },
+        }}
+      />
+    </div>
+  );
+}
+
+export default App; 

frontend/src/components/ChatInterface.js

@@ -0,0 +1,408 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { PaperAirplaneIcon, StopIcon } from '@heroicons/react/24/solid';
+import MessageBubble from './MessageBubble';
+import TypingIndicator from './TypingIndicator';
+import FileUploader from './FileUploader';
+import { sendMessage, sendMessageStream } from '../services/api';
+import toast from 'react-hot-toast';
+
+const ChatInterface = ({ conversationId, conversations, setConversations, darkMode }) => {
+  const [message, setMessage] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [showFileUploader, setShowFileUploader] = useState(false);
+  const messagesEndRef = useRef(null);
+  const textareaRef = useRef(null);
+
+  const currentConversation = conversations.find(conv => conv.id === conversationId);
+  const messages = currentConversation?.messages || [];
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!message.trim() || isLoading) return;
+
+    const userMessage = {
+      id: Date.now().toString(),
+      role: 'user',
+      content: message.trim(),
+      timestamp: new Date(),
+    };
+
+    // Add user message immediately
+    setConversations(prev => prev.map(conv => 
+      conv.id === conversationId 
+        ? { 
+            ...conv, 
+            messages: [...conv.messages, userMessage],
+            title: conv.messages.length === 0 ? message.slice(0, 50) + '...' : conv.title
+          }
+        : conv
+    ));
+
+    setMessage('');
+    setIsLoading(true);
+    const assistantMessageId = (Date.now() + 1).toString();
+
+    try {
+      let fullResponse = '';
+
+      // Add a placeholder for the assistant's message
+      setConversations(prev => prev.map(conv =>
+        conv.id === conversationId
+          ? { ...conv, messages: [...conv.messages, { id: assistantMessageId, role: 'assistant', content: '', timestamp: new Date() }] }
+          : conv
+      ));
+
+      await sendMessageStream(message.trim(), (chunk) => {
+        fullResponse += chunk;
+        setConversations(prev => prev.map(conv =>
+          conv.id === conversationId
+            ? {
+                ...conv,
+                messages: conv.messages.map(msg =>
+                  msg.id === assistantMessageId
+                    ? { ...msg, content: fullResponse }
+                    : msg
+                ),
+              }
+            : conv
+        ));
+      });
+
+    } catch (error) {
+      toast.error('Failed to send message. Please try again.');
+      console.error('Error sending message:', error);
+      // Optional: remove placeholder on error
+      setConversations(prev => prev.map(conv =>
+        conv.id === conversationId
+          ? { ...conv, messages: conv.messages.filter(msg => msg.id !== assistantMessageId) }
+          : conv
+      ));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  const adjustTextareaHeight = () => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = 'auto';
+      textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
+    }
+  };
+
+  useEffect(() => {
+    adjustTextareaHeight();
+  }, [message]);
+
+  return (
+    <div className="flex flex-col h-screen">
+      {/* Messages Container */}
+      <div className="flex-1 overflow-y-auto px-4 py-6">
+        <div className="max-w-3xl mx-auto">
+          {/* Empty State */}
+          {messages.length === 0 && !isLoading && (
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6 }}
+              className="flex flex-col items-center justify-center min-h-[60vh] text-center"
+            >
+              {/* CA Assistant Avatar */}
+              <motion.div
+                initial={{ scale: 0.8 }}
+                animate={{ scale: 1 }}
+                transition={{ duration: 0.5, delay: 0.2 }}
+                className={`w-20 h-20 rounded-full flex items-center justify-center mb-6 ${
+                  darkMode 
+                    ? 'bg-gradient-to-br from-primary-600 to-purple-600' 
+                    : 'bg-gradient-to-br from-primary-500 to-purple-500'
+                } shadow-lg`}
+              >
+                <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
+                    d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                </svg>
+              </motion.div>
+
+              {/* Welcome Message */}
+              <motion.h2 
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 0.4 }}
+                className="text-2xl md:text-3xl font-bold mb-3 gradient-text"
+              >
+                Hello! I'm your CA Study Assistant
+              </motion.h2>
+              
+              <motion.p 
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 0.5 }}
+                className={`text-lg mb-8 ${darkMode ? 'text-gray-300' : 'text-gray-600'}`}
+              >
+                I'm here to help you with accounting, finance, taxation, and auditing concepts. 
+                Ask me anything or upload your study materials!
+              </motion.p>
+
+              {/* Quick Start Suggestions */}
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.6 }}
+                className="w-full max-w-2xl"
+              >
+                <h3 className={`text-sm font-semibold mb-4 ${
+                  darkMode ? 'text-gray-400' : 'text-gray-500'
+                }`}>
+                  Try asking me about:
+                </h3>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  {[
+                    { icon: "📊", text: "Financial statement analysis", query: "Explain financial statement analysis" },
+                    { icon: "💰", text: "Depreciation methods", query: "What are different depreciation methods?" },
+                    { icon: "🏦", text: "Working capital management", query: "Explain working capital management" },
+                    { icon: "📈", text: "Ratio analysis", query: "How to perform ratio analysis?" },
+                    { icon: "📋", text: "Auditing procedures", query: "What are key auditing procedures?" },
+                    { icon: "💼", text: "Tax planning strategies", query: "Explain tax planning strategies" }
+                  ].map((suggestion, index) => (
+                    <motion.button
+                      key={index}
+                      initial={{ opacity: 0, x: -20 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      transition={{ delay: 0.7 + index * 0.1 }}
+                      whileHover={{ scale: 1.02, y: -2 }}
+                      whileTap={{ scale: 0.98 }}
+                      onClick={() => setMessage(suggestion.query)}
+                      className={`flex items-center p-4 rounded-xl text-left transition-all ${
+                        darkMode
+                          ? 'bg-gray-800 hover:bg-gray-700 border-gray-700 text-gray-300'
+                          : 'bg-gray-50 hover:bg-gray-100 border-gray-200 text-gray-700'
+                      } border hover:border-primary-300 hover:shadow-md`}
+                    >
+                      <span className="text-2xl mr-3">{suggestion.icon}</span>
+                      <span className="font-medium">{suggestion.text}</span>
+                    </motion.button>
+                  ))}
+                </div>
+              </motion.div>
+
+              {/* Upload Reminder */}
+              <motion.div
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ delay: 1.2 }}
+                className={`mt-8 p-4 rounded-xl ${
+                  darkMode 
+                    ? 'bg-primary-900/20 border-primary-700/30' 
+                    : 'bg-primary-50 border-primary-200'
+                } border`}
+              >
+                <div className="flex items-center justify-center">
+                  <svg className={`w-5 h-5 mr-2 ${
+                    darkMode ? 'text-primary-400' : 'text-primary-600'
+                  }`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
+                      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                  </svg>
+                  <span className={`text-sm ${
+                    darkMode ? 'text-primary-300' : 'text-primary-700'
+                  }`}>
+                    💡 Upload your study materials for more specific and detailed answers
+                  </span>
+                </div>
+              </motion.div>
+            </motion.div>
+          )}
+
+          {/* Messages */}
+          <AnimatePresence>
+            {messages.map((msg, index) => (
+              <MessageBubble
+                key={msg.id}
+                message={msg}
+                darkMode={darkMode}
+                isLast={index === messages.length - 1}
+              />
+            ))}
+          </AnimatePresence>
+
+          {isLoading && <TypingIndicator darkMode={darkMode} />}
+          
+          <div ref={messagesEndRef} />
+        </div>
+      </div>
+
+      {/* File Uploader Modal */}
+      <AnimatePresence>
+        {showFileUploader && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
+            onClick={() => setShowFileUploader(false)}
+          >
+            <motion.div
+              initial={{ scale: 0.9, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              exit={{ scale: 0.9, opacity: 0 }}
+              onClick={(e) => e.stopPropagation()}
+              className={`max-w-md w-full p-6 rounded-2xl ${
+                darkMode ? 'bg-gray-800' : 'bg-white'
+              } shadow-2xl`}
+            >
+              <h3 className="text-lg font-semibold mb-4">Upload Document</h3>
+              <FileUploader darkMode={darkMode} onClose={() => setShowFileUploader(false)} />
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Input Area */}
+      <div className={`border-t ${
+        darkMode ? 'border-gray-700/50 bg-gray-900/95' : 'border-gray-200/50 bg-white/95'
+      } backdrop-blur-sm p-6`}>
+        <div className="max-w-3xl mx-auto">
+          <form onSubmit={handleSubmit} className="relative">
+            {/* Enhanced Input Container */}
+            <div className={`relative overflow-hidden rounded-2xl border-2 transition-all duration-300 ${
+              darkMode 
+                ? 'bg-gradient-to-br from-gray-800 to-gray-900 border-gray-600 focus-within:border-primary-500 focus-within:from-gray-700 focus-within:to-gray-800' 
+                : 'bg-gradient-to-br from-white to-gray-50 border-gray-300 focus-within:border-primary-500 focus-within:from-blue-50 focus-within:to-white'
+            } focus-within:ring-4 focus-within:ring-primary-500/20 shadow-xl hover:shadow-2xl focus-within:shadow-2xl`}>
+              
+              {/* Subtle Inner Glow */}
+              <div className={`absolute inset-0 opacity-0 focus-within:opacity-100 transition-opacity duration-300 ${
+                darkMode 
+                  ? 'bg-gradient-to-br from-primary-900/20 to-purple-900/20' 
+                  : 'bg-gradient-to-br from-primary-50/50 to-purple-50/50'
+              }`} />
+              
+              {/* Input Content */}
+              <div className="relative flex items-end space-x-4 p-4">
+                {/* File Upload Button */}
+                <motion.button
+                  type="button"
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                  onClick={() => setShowFileUploader(true)}
+                  className={`flex-shrink-0 p-3 rounded-xl transition-all duration-200 ${
+                    darkMode
+                      ? 'hover:bg-gray-700/70 text-gray-400 hover:text-primary-400 hover:shadow-lg'
+                      : 'hover:bg-gray-100/70 text-gray-500 hover:text-primary-600 hover:shadow-md'
+                  } relative group backdrop-blur-sm`}
+                  title="Upload document"
+                >
+                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 
+                      d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
+                  </svg>
+                  
+                  {/* Enhanced Tooltip */}
+                  <div className={`absolute -top-14 left-1/2 transform -translate-x-1/2 px-3 py-2 rounded-lg text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-all duration-200 ${
+                    darkMode ? 'bg-gray-800 text-white shadow-xl border border-gray-700' : 'bg-gray-900 text-white shadow-xl'
+                  }`}>
+                    Upload documents
+                    <div className={`absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent ${
+                      darkMode ? 'border-t-gray-800' : 'border-t-gray-900'
+                    }`} />
+                  </div>
+                </motion.button>
+
+                {/* Enhanced Text Input */}
+                <div className="flex-1 relative">
+                  <textarea
+                    ref={textareaRef}
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    placeholder={messages.length === 0 ? "Hi! Ask me about accounting, finance, taxation, or upload your study materials..." : "Ask a follow-up question..."}
+                    className={`w-full resize-none border-none outline-none bg-transparent py-3 px-2 text-base leading-relaxed ${
+                      darkMode ? 'text-white placeholder-gray-400' : 'text-gray-900 placeholder-gray-500'
+                    } placeholder:text-sm placeholder:leading-relaxed`}
+                    rows={1}
+                    disabled={isLoading}
+                    style={{ 
+                      minHeight: '24px',
+                      maxHeight: '120px',
+                      lineHeight: '1.5'
+                    }}
+                  />
+                  
+                  {/* Input Focus Indicator */}
+                  <div className={`absolute left-0 bottom-0 h-0.5 w-0 bg-gradient-to-r from-primary-500 to-purple-500 transition-all duration-300 ${
+                    message.trim() ? 'w-full' : 'group-focus-within:w-full'
+                  }`} />
+                </div>
+
+                {/* Enhanced Send Button */}
+                <motion.button
+                  type="submit"
+                  disabled={!message.trim() || isLoading}
+                  whileHover={message.trim() && !isLoading ? { scale: 1.05 } : {}}
+                  whileTap={message.trim() && !isLoading ? { scale: 0.95 } : {}}
+                  className={`flex-shrink-0 p-3 rounded-xl transition-all duration-200 relative group ${
+                    message.trim() && !isLoading
+                      ? 'bg-gradient-to-r from-primary-600 to-primary-700 hover:from-primary-700 hover:to-primary-800 text-white shadow-lg hover:shadow-xl'
+                      : darkMode
+                        ? 'bg-gray-600/50 text-gray-400 hover:bg-gray-600/70'
+                        : 'bg-gray-300/50 text-gray-500 hover:bg-gray-300/70'
+                  } disabled:cursor-not-allowed`}
+                  title={isLoading ? "Stop generation" : "Send message"}
+                >
+                  {isLoading ? (
+                    <div className="relative">
+                      <StopIcon className="w-5 h-5" />
+                      <div className="absolute inset-0 border-2 border-white border-t-transparent rounded-full animate-spin opacity-50"></div>
+                    </div>
+                  ) : (
+                    <PaperAirplaneIcon className="w-5 h-5" />
+                  )}
+                  
+                  {/* Enhanced Send Button Glow Effect */}
+                  {message.trim() && !isLoading && (
+                    <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-primary-600 to-primary-700 opacity-0 group-hover:opacity-30 transition-opacity duration-200 blur-lg -z-10"></div>
+                  )}
+                </motion.button>
+              </div>
+              
+              {/* Bottom Border Accent */}
+              <div className={`absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-to-r from-transparent via-primary-500 to-transparent opacity-0 focus-within:opacity-100 transition-opacity duration-300`} />
+            </div>
+          </form>
+
+          {/* Footer Text */}
+          <motion.p 
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.3 }}
+            className={`text-xs text-center mt-3 ${
+              darkMode ? 'text-gray-500' : 'text-gray-400'
+            }`}
+          >
+            ⚡ Powered by AI • CA Study Assistant can make mistakes. Consider checking important information.
+          </motion.p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatInterface; 

frontend/src/components/FileUploader.js

@@ -0,0 +1,237 @@
+import React, { useCallback, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { motion, AnimatePresence } from 'framer-motion';
+import { 
+  CloudArrowUpIcon, 
+  DocumentIcon, 
+  CheckCircleIcon,
+  XCircleIcon,
+  XMarkIcon 
+} from '@heroicons/react/24/outline';
+import { uploadDocument } from '../services/api';
+import toast from 'react-hot-toast';
+
+const FileUploader = ({ darkMode, onClose }) => {
+  const [uploading, setUploading] = useState(false);
+  const [uploadedFiles, setUploadedFiles] = useState([]);
+
+  const onDrop = useCallback(async (acceptedFiles) => {
+    setUploading(true);
+    
+    for (const file of acceptedFiles) {
+      try {
+        const formData = new FormData();
+        formData.append('file', file);
+        
+        await uploadDocument(formData);
+        
+        setUploadedFiles(prev => [...prev, {
+          name: file.name,
+          size: file.size,
+          status: 'success'
+        }]);
+        
+        toast.success(`${file.name} uploaded successfully!`);
+      } catch (error) {
+        setUploadedFiles(prev => [...prev, {
+          name: file.name,
+          size: file.size,
+          status: 'error'
+        }]);
+        
+        toast.error(`Failed to upload ${file.name}`);
+      }
+    }
+    
+    setUploading(false);
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: {
+      'application/pdf': ['.pdf'],
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
+      'text/plain': ['.txt']
+    },
+    multiple: true
+  });
+
+  const formatFileSize = (bytes) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  const removeFile = (index) => {
+    setUploadedFiles(prev => prev.filter((_, i) => i !== index));
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Dropzone */}
+      <motion.div
+        {...getRootProps()}
+        whileHover={{ scale: 1.02 }}
+        whileTap={{ scale: 0.98 }}
+        className={`file-drop-zone border-2 border-dashed rounded-2xl p-8 text-center cursor-pointer transition-all ${
+          isDragActive
+            ? darkMode
+              ? 'border-primary-400 bg-primary-900/20'
+              : 'border-primary-500 bg-primary-50'
+            : darkMode
+              ? 'border-gray-600 hover:border-gray-500 bg-gray-800'
+              : 'border-gray-300 hover:border-gray-400 bg-gray-50'
+        }`}
+      >
+        <input {...getInputProps()} />
+        
+        <CloudArrowUpIcon className={`w-12 h-12 mx-auto mb-4 ${
+          isDragActive
+            ? darkMode ? 'text-primary-400' : 'text-primary-500'
+            : darkMode ? 'text-gray-400' : 'text-gray-500'
+        }`} />
+        
+        <h3 className={`text-lg font-semibold mb-2 ${
+          darkMode ? 'text-white' : 'text-gray-900'
+        }`}>
+          {isDragActive ? 'Drop files here' : 'Upload study materials'}
+        </h3>
+        
+        <p className={`mb-4 ${
+          darkMode ? 'text-gray-400' : 'text-gray-600'
+        }`}>
+          Drag & drop files here, or click to browse
+        </p>
+        
+        <div className="flex justify-center space-x-2">
+          <span className={`px-3 py-1 rounded-full text-xs font-medium ${
+            darkMode 
+              ? 'bg-blue-900/30 text-blue-400' 
+              : 'bg-blue-100 text-blue-700'
+          }`}>
+            PDF
+          </span>
+          <span className={`px-3 py-1 rounded-full text-xs font-medium ${
+            darkMode 
+              ? 'bg-green-900/30 text-green-400' 
+              : 'bg-green-100 text-green-700'
+          }`}>
+            DOCX
+          </span>
+          <span className={`px-3 py-1 rounded-full text-xs font-medium ${
+            darkMode 
+              ? 'bg-purple-900/30 text-purple-400' 
+              : 'bg-purple-100 text-purple-700'
+          }`}>
+            TXT
+          </span>
+        </div>
+      </motion.div>
+
+      {/* Upload Progress */}
+      {uploading && (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className={`p-4 rounded-lg ${
+            darkMode ? 'bg-gray-800' : 'bg-gray-100'
+          }`}
+        >
+          <div className="flex items-center space-x-3">
+            <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-primary-500"></div>
+            <span className={`${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>
+              Uploading files...
+            </span>
+          </div>
+        </motion.div>
+      )}
+
+      {/* Uploaded Files List */}
+      <AnimatePresence>
+        {uploadedFiles.length > 0 && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            className="space-y-2"
+          >
+            <h4 className={`font-medium ${
+              darkMode ? 'text-gray-300' : 'text-gray-700'
+            }`}>
+              Uploaded Files
+            </h4>
+            
+            {uploadedFiles.map((file, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                className={`flex items-center justify-between p-3 rounded-lg ${
+                  darkMode ? 'bg-gray-800' : 'bg-gray-100'
+                }`}
+              >
+                <div className="flex items-center space-x-3">
+                  <DocumentIcon className={`w-5 h-5 ${
+                    darkMode ? 'text-gray-400' : 'text-gray-500'
+                  }`} />
+                  
+                  <div>
+                    <p className={`text-sm font-medium ${
+                      darkMode ? 'text-white' : 'text-gray-900'
+                    }`}>
+                      {file.name}
+                    </p>
+                    <p className={`text-xs ${
+                      darkMode ? 'text-gray-500' : 'text-gray-400'
+                    }`}>
+                      {formatFileSize(file.size)}
+                    </p>
+                  </div>
+                </div>
+                
+                <div className="flex items-center space-x-2">
+                  {file.status === 'success' ? (
+                    <CheckCircleIcon className="w-5 h-5 text-green-500" />
+                  ) : (
+                    <XCircleIcon className="w-5 h-5 text-red-500" />
+                  )}
+                  
+                  <button
+                    onClick={() => removeFile(index)}
+                    className={`p-1 rounded transition-colors ${
+                      darkMode
+                        ? 'hover:bg-gray-700 text-gray-400'
+                        : 'hover:bg-gray-200 text-gray-500'
+                    }`}
+                  >
+                    <XMarkIcon className="w-4 h-4" />
+                  </button>
+                </div>
+              </motion.div>
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Close Button */}
+      {onClose && (
+        <div className="flex justify-end">
+          <button
+            onClick={onClose}
+            className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+              darkMode
+                ? 'bg-gray-700 hover:bg-gray-600 text-white'
+                : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
+            }`}
+          >
+            Close
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FileUploader; 

frontend/src/components/MessageBubble.js

@@ -0,0 +1,138 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { tomorrow, prism } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { UserIcon, AcademicCapIcon } from '@heroicons/react/24/solid';
+
+const MessageBubble = ({ message, darkMode, isLast }) => {
+  const isUser = message.role === 'user';
+  
+  const messageVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { 
+      opacity: 1, 
+      y: 0,
+      transition: {
+        duration: 0.3,
+        ease: "easeOut"
+      }
+    }
+  };
+
+  const formatTime = (timestamp) => {
+    return new Date(timestamp).toLocaleTimeString([], { 
+      hour: '2-digit', 
+      minute: '2-digit' 
+    });
+  };
+
+  return (
+    <motion.div
+      variants={messageVariants}
+      initial="hidden"
+      animate="visible"
+      className={`flex gap-4 mb-6 ${isUser ? 'justify-end' : 'justify-start'}`}
+    >
+      {!isUser && (
+        <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
+          darkMode ? 'bg-primary-600' : 'bg-primary-500'
+        }`}>
+          <AcademicCapIcon className="w-5 h-5 text-white" />
+        </div>
+      )}
+
+      <div className={`max-w-[80%] ${isUser ? 'order-first' : ''}`}>
+        <div className={`rounded-2xl px-4 py-3 ${
+          isUser
+            ? darkMode
+              ? 'bg-primary-600 text-white'
+              : 'bg-primary-500 text-white'
+            : darkMode
+              ? 'bg-gray-800 border border-gray-700'
+              : 'bg-white border border-gray-200 shadow-sm'
+        }`}>
+          {isUser ? (
+            <p className="whitespace-pre-wrap">{message.content}</p>
+          ) : (
+            <div className="message-content">
+              <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                components={{
+                  code({ node, inline, className, children, ...props }) {
+                    const match = /language-(\w+)/.exec(className || '');
+                    return !inline && match ? (
+                      <SyntaxHighlighter
+                        style={darkMode ? tomorrow : prism}
+                        language={match[1]}
+                        PreTag="div"
+                        {...props}
+                      >
+                        {String(children).replace(/\n$/, '')}
+                      </SyntaxHighlighter>
+                    ) : (
+                      <code className={className} {...props}>
+                        {children}
+                      </code>
+                    );
+                  },
+                  p: ({ children }) => <p className="mb-2 last:mb-0">{children}</p>,
+                  ul: ({ children }) => <ul className="list-disc list-inside mb-2">{children}</ul>,
+                  ol: ({ children }) => <ol className="list-decimal list-inside mb-2">{children}</ol>,
+                  li: ({ children }) => <li className="mb-1">{children}</li>,
+                  h1: ({ children }) => <h1 className="text-xl font-bold mb-2">{children}</h1>,
+                  h2: ({ children }) => <h2 className="text-lg font-semibold mb-2">{children}</h2>,
+                  h3: ({ children }) => <h3 className="text-md font-medium mb-2">{children}</h3>,
+                  blockquote: ({ children }) => (
+                    <blockquote className={`border-l-4 pl-4 italic my-2 ${
+                      darkMode ? 'border-gray-600 text-gray-300' : 'border-gray-300 text-gray-600'
+                    }`}>
+                      {children}
+                    </blockquote>
+                  ),
+                }}
+              >
+                {message.content}
+              </ReactMarkdown>
+            </div>
+          )}
+        </div>
+
+        {/* Timestamp and Sources */}
+        <div className={`text-xs mt-2 ${
+          darkMode ? 'text-gray-500' : 'text-gray-400'
+        } ${isUser ? 'text-right' : 'text-left'}`}>
+          <span>{formatTime(message.timestamp)}</span>
+          
+          {!isUser && message.sources && message.sources.length > 0 && (
+            <div className="mt-2">
+              <span className="font-medium">Sources: </span>
+              {message.sources.map((source, index) => (
+                <span key={index} className={`inline-block mr-2 px-2 py-1 rounded text-xs ${
+                  darkMode 
+                    ? 'bg-gray-700 text-gray-300' 
+                    : 'bg-gray-100 text-gray-600'
+                }`}>
+                  {source}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {isUser && (
+        <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
+          darkMode ? 'bg-gray-700' : 'bg-gray-300'
+        }`}>
+          <UserIcon className={`w-5 h-5 ${
+            darkMode ? 'text-gray-300' : 'text-gray-600'
+          }`} />
+        </div>
+      )}
+    </motion.div>
+  );
+};
+
+export default MessageBubble; 

frontend/src/components/Sidebar.js

@@ -0,0 +1,216 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { 
+  PlusIcon, 
+  XMarkIcon, 
+  ChatBubbleLeftIcon,
+  TrashIcon,
+  HomeIcon
+} from '@heroicons/react/24/outline';
+
+const Sidebar = ({ 
+  open, 
+  onClose, 
+  conversations, 
+  activeConversationId, 
+  onConversationSelect, 
+  onNewChat, 
+  onDeleteConversation,
+  onBackToHome,
+  darkMode 
+}) => {
+  const formatDate = (date) => {
+    const now = new Date();
+    const messageDate = new Date(date);
+    const diffTime = Math.abs(now - messageDate);
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+    if (diffDays === 1) return 'Today';
+    if (diffDays === 2) return 'Yesterday';
+    if (diffDays <= 7) return `${diffDays} days ago`;
+    return messageDate.toLocaleDateString();
+  };
+
+  const sidebarVariants = {
+    open: {
+      x: 0,
+      transition: {
+        type: "spring",
+        stiffness: 300,
+        damping: 30
+      }
+    },
+    closed: {
+      x: -280,
+      transition: {
+        type: "spring",
+        stiffness: 300,
+        damping: 30
+      }
+    }
+  };
+
+  const overlayVariants = {
+    open: { opacity: 1 },
+    closed: { opacity: 0 }
+  };
+
+  return (
+    <>
+      {/* Mobile Overlay */}
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            variants={overlayVariants}
+            initial="closed"
+            animate="open"
+            exit="closed"
+            className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"
+            onClick={onClose}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* Sidebar */}
+      <motion.aside
+        variants={sidebarVariants}
+        initial="closed"
+        animate={open ? "open" : "closed"}
+        className={`fixed left-0 top-16 h-[calc(100vh-4rem)] w-64 z-50 ${
+          darkMode 
+            ? 'bg-gray-900 border-gray-700' 
+            : 'bg-white border-gray-200'
+        } border-r shadow-lg flex flex-col`}
+      >
+        {/* Header */}
+        <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="font-semibold text-lg">Conversations</h2>
+            <button
+              onClick={onClose}
+              className={`p-1 rounded-lg transition-colors md:hidden ${
+                darkMode
+                  ? 'hover:bg-gray-800 text-gray-400'
+                  : 'hover:bg-gray-100 text-gray-500'
+              }`}
+            >
+              <XMarkIcon className="w-5 h-5" />
+            </button>
+          </div>
+
+          <div className="space-y-2">
+            <motion.button
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+              onClick={onNewChat}
+              className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+                darkMode
+                  ? 'bg-gray-800 hover:bg-gray-700 text-white border-gray-600'
+                  : 'bg-gray-50 hover:bg-gray-100 text-gray-900 border-gray-300'
+              } border`}
+            >
+              <PlusIcon className="w-4 h-4" />
+              <span className="font-medium">New Chat</span>
+            </motion.button>
+            
+            <motion.button
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+              onClick={onBackToHome}
+              className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${
+                darkMode
+                  ? 'bg-primary-600 hover:bg-primary-700 text-white'
+                  : 'bg-primary-50 hover:bg-primary-100 text-primary-900 border-primary-300'
+              } border`}
+            >
+              <HomeIcon className="w-4 h-4" />
+              <span className="font-medium">Back to Home</span>
+            </motion.button>
+          </div>
+        </div>
+
+        {/* Conversations List */}
+        <div className="flex-1 overflow-y-auto p-2">
+          {conversations.length === 0 ? (
+            <div className={`text-center py-8 ${
+              darkMode ? 'text-gray-500' : 'text-gray-400'
+            }`}>
+              <ChatBubbleLeftIcon className="w-12 h-12 mx-auto mb-3 opacity-50" />
+              <p className="text-sm">No conversations yet</p>
+              <p className="text-xs mt-1">Start a new chat to begin</p>
+            </div>
+          ) : (
+            <div className="space-y-1">
+              {conversations.map((conversation) => (
+                <motion.button
+                  key={conversation.id}
+                  whileHover={{ x: 4 }}
+                  onClick={() => {
+                    onConversationSelect(conversation.id);
+                    onClose();
+                  }}
+                  className={`w-full text-left p-3 rounded-lg transition-all group ${
+                    activeConversationId === conversation.id
+                      ? darkMode
+                        ? 'bg-primary-600 text-white'
+                        : 'bg-primary-50 text-primary-900 border-primary-200'
+                      : darkMode
+                        ? 'hover:bg-gray-800 text-gray-300'
+                        : 'hover:bg-gray-50 text-gray-700'
+                  }`}
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1 min-w-0">
+                      <p className="font-medium truncate text-sm">
+                        {conversation.title}
+                      </p>
+                      <p className={`text-xs mt-1 ${
+                        activeConversationId === conversation.id
+                          ? 'text-primary-200'
+                          : darkMode
+                            ? 'text-gray-500'
+                            : 'text-gray-500'
+                      }`}>
+                        {formatDate(conversation.createdAt)}
+                      </p>
+                    </div>
+                    
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        if (window.confirm('Are you sure you want to delete this conversation?')) {
+                          onDeleteConversation(conversation.id);
+                        }
+                      }}
+                      className={`opacity-0 group-hover:opacity-100 p-1 rounded transition-opacity ${
+                        darkMode
+                          ? 'hover:bg-gray-700 text-gray-400'
+                          : 'hover:bg-gray-200 text-gray-500'
+                      }`}
+                    >
+                      <TrashIcon className="w-4 h-4" />
+                    </button>
+                  </div>
+                </motion.button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className={`p-4 border-t ${
+          darkMode ? 'border-gray-700' : 'border-gray-200'
+        }`}>
+          <div className={`text-xs ${
+            darkMode ? 'text-gray-500' : 'text-gray-400'
+          }`}>
+            <p>CA Study Assistant v2.0</p>
+            <p className="mt-1">Powered by AI</p>
+          </div>
+        </div>
+      </motion.aside>
+    </>
+  );
+};
+
+export default Sidebar; 

frontend/src/components/TypingIndicator.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { AcademicCapIcon } from '@heroicons/react/24/solid';
+
+const TypingIndicator = ({ darkMode }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      className="flex gap-4 mb-6"
+    >
+      <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${
+        darkMode ? 'bg-primary-600' : 'bg-primary-500'
+      }`}>
+        <AcademicCapIcon className="w-5 h-5 text-white" />
+      </div>
+
+      <div className={`rounded-2xl px-4 py-3 ${
+        darkMode
+          ? 'bg-gray-800 border border-gray-700'
+          : 'bg-white border border-gray-200 shadow-sm'
+      }`}>
+        <div className="typing-indicator">
+          <div className={`dot ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}></div>
+          <div className={`dot ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}></div>
+          <div className={`dot ${darkMode ? 'text-gray-400' : 'text-gray-500'}`}></div>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default TypingIndicator; 

frontend/src/components/WelcomeScreen.js

@@ -0,0 +1,152 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import FileUploader from './FileUploader';
+import { 
+  DocumentTextIcon, 
+  ChatBubbleBottomCenterTextIcon,
+  LightBulbIcon,
+  AcademicCapIcon 
+} from '@heroicons/react/24/outline';
+
+const WelcomeScreen = ({ onStartChat, onNewChat, darkMode }) => {
+  const suggestions = [
+    "What is depreciation in accounting?",
+    "Explain the concept of working capital",
+    "What are the different types of financial statements?",
+    "How do you calculate return on investment?"
+  ];
+
+  const features = [
+    {
+      icon: DocumentTextIcon,
+      title: "Upload Documents",
+      description: "Upload PDFs, Word docs, and text files for instant analysis"
+    },
+    {
+      icon: ChatBubbleBottomCenterTextIcon,
+      title: "Ask Questions",
+      description: "Get detailed answers based on your uploaded study materials"
+    },
+    {
+      icon: LightBulbIcon,
+      title: "Smart Insights",
+      description: "AI-powered explanations tailored for CA exam preparation"
+    }
+  ];
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center p-4">
+      <div className="max-w-4xl w-full">
+        {/* Hero Section */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="text-center mb-12"
+        >
+          <div className="mb-6">
+            <AcademicCapIcon className={`w-16 h-16 mx-auto mb-4 ${
+              darkMode ? 'text-primary-400' : 'text-primary-600'
+            }`} />
+          </div>
+          
+          <h1 className="text-4xl md:text-6xl font-bold mb-6 gradient-text">
+            CA Study Assistant
+          </h1>
+          
+          <p className={`text-xl md:text-2xl mb-8 ${
+            darkMode ? 'text-gray-300' : 'text-gray-600'
+          }`}>
+            Upload your study materials and get instant, intelligent answers
+          </p>
+
+          <motion.button
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            onClick={onNewChat}
+            className="btn-primary px-8 py-4 rounded-xl text-lg font-semibold text-white shadow-lg"
+          >
+            Start New Conversation
+          </motion.button>
+        </motion.div>
+
+        {/* Features */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.2 }}
+          className="grid md:grid-cols-3 gap-6 mb-12"
+        >
+          {features.map((feature, index) => (
+            <motion.div
+              key={index}
+              whileHover={{ y: -5 }}
+              className={`p-6 rounded-2xl ${
+                darkMode 
+                  ? 'bg-gray-800 border-gray-700' 
+                  : 'bg-white border-gray-200'
+              } border shadow-lg`}
+            >
+              <feature.icon className={`w-8 h-8 mb-4 ${
+                darkMode ? 'text-primary-400' : 'text-primary-600'
+              }`} />
+              <h3 className="text-lg font-semibold mb-2">{feature.title}</h3>
+              <p className={`${
+                darkMode ? 'text-gray-400' : 'text-gray-600'
+              }`}>
+                {feature.description}
+              </p>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* File Upload Section */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.4 }}
+          className="mb-12"
+        >
+          <h2 className="text-2xl font-semibold text-center mb-6">
+            Upload Your Study Materials
+          </h2>
+          <FileUploader darkMode={darkMode} />
+        </motion.div>
+
+        {/* Suggestion Pills */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.6 }}
+          className="text-center"
+        >
+          <h3 className={`text-lg font-semibold mb-4 ${
+            darkMode ? 'text-gray-300' : 'text-gray-700'
+          }`}>
+            Try asking:
+          </h3>
+          
+          <div className="flex flex-wrap justify-center gap-3">
+            {suggestions.map((suggestion, index) => (
+              <motion.button
+                key={index}
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                onClick={() => onStartChat(suggestion)}
+                className={`px-4 py-2 rounded-full text-sm font-medium transition-colors ${
+                  darkMode
+                    ? 'bg-gray-800 hover:bg-gray-700 text-gray-300 border-gray-700'
+                    : 'bg-gray-100 hover:bg-gray-200 text-gray-700 border-gray-300'
+                } border`}
+              >
+                {suggestion}
+              </motion.button>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default WelcomeScreen; 

frontend/src/index.css

@@ -0,0 +1,279 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-gray-100 dark:bg-gray-800;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-gray-300 dark:bg-gray-600 rounded-full;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  @apply bg-gray-400 dark:bg-gray-500;
+}
+
+/* Loading dots animation */
+.typing-indicator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.typing-indicator .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: currentColor;
+  opacity: 0.4;
+  animation: typing-dot 1.4s infinite ease-in-out;
+}
+
+.typing-indicator .dot:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.typing-indicator .dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.typing-indicator .dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typing-dot {
+  0%, 60%, 100% {
+    opacity: 0.4;
+    transform: scale(1);
+  }
+  30% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+}
+
+/* Message bubble animations */
+.message-enter {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.message-enter-active {
+  opacity: 1;
+  transform: translateY(0);
+  transition: opacity 300ms ease-out, transform 300ms ease-out;
+}
+
+/* File upload hover effects */
+.file-drop-zone {
+  transition: all 0.2s ease-in-out;
+}
+
+.file-drop-zone:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
+}
+
+/* Gradient text */
+.gradient-text {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Glass morphism effect */
+.glass {
+  backdrop-filter: blur(16px) saturate(180%);
+  -webkit-backdrop-filter: blur(16px) saturate(180%);
+  background-color: rgba(255, 255, 255, 0.8);
+  border: 1px solid rgba(255, 255, 255, 0.125);
+}
+
+.glass.dark {
+  background-color: rgba(17, 24, 39, 0.8);
+  border: 1px solid rgba(75, 85, 99, 0.3);
+}
+
+/* Button hover effects */
+.btn-primary {
+  @apply bg-primary-600 hover:bg-primary-700 focus:ring-primary-500;
+  transition: all 0.2s ease-in-out;
+}
+
+.btn-primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+}
+
+/* Code syntax highlighting overrides */
+.prose pre {
+  @apply bg-gray-900 dark:bg-gray-950;
+}
+
+.prose code {
+  @apply bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 px-1 py-0.5 rounded text-sm;
+}
+
+/* Message content styling */
+.message-content {
+  @apply prose prose-sm max-w-none dark:prose-invert;
+}
+
+.message-content p:last-child {
+  margin-bottom: 0;
+}
+
+.message-content ul, .message-content ol {
+  @apply my-2;
+}
+
+.message-content li {
+  @apply my-1;
+}
+
+/* Enhanced Chat Input Styles */
+.chat-input-container {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
+  backdrop-filter: blur(10px);
+  border-radius: 16px;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.chat-input-container:focus-within {
+  transform: translateY(-1px);
+  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25);
+}
+
+.chat-input {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  font-weight: 400;
+  line-height: 1.6;
+  letter-spacing: 0.01em;
+}
+
+.chat-input::placeholder {
+  font-weight: 400;
+  opacity: 0.6;
+  transition: opacity 0.3s ease;
+}
+
+.chat-input:focus::placeholder {
+  opacity: 0.4;
+}
+
+/* Enhanced scrollbar for textarea */
+.chat-input::-webkit-scrollbar {
+  width: 4px;
+}
+
+.chat-input::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.chat-input::-webkit-scrollbar-thumb {
+  background: rgba(156, 163, 175, 0.5);
+  border-radius: 2px;
+}
+
+.chat-input::-webkit-scrollbar-thumb:hover {
+  background: rgba(156, 163, 175, 0.8);
+}
+
+/* Input focus indicator animation */
+.input-focus-indicator {
+  transform-origin: left;
+  animation: expand 0.3s ease-out;
+}
+
+@keyframes expand {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
+/* Enhanced button glow effect */
+.btn-glow {
+  position: relative;
+  overflow: visible;
+}
+
+.btn-glow::before {
+  content: '';
+  position: absolute;
+  inset: -2px;
+  border-radius: inherit;
+  background: linear-gradient(45deg, transparent, rgba(59, 130, 246, 0.3), transparent);
+  z-index: -1;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.btn-glow:hover::before {
+  opacity: 1;
+}
+
+/* Smooth transitions for dark mode */
+* {
+  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
+}
+
+/* Enhanced tooltip styling */
+.tooltip {
+  animation: tooltip-appear 0.2s ease-out;
+}
+
+@keyframes tooltip-appear {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+/* Floating effect for input container */
+.floating-input {
+  box-shadow: 
+    0 10px 25px -5px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.floating-input:hover {
+  box-shadow: 
+    0 20px 40px -12px rgba(0, 0, 0, 0.15),
+    0 8px 16px -4px rgba(0, 0, 0, 0.1);
+}
+
+.floating-input:focus-within {
+  box-shadow: 
+    0 25px 50px -12px rgba(59, 130, 246, 0.25),
+    0 10px 20px -5px rgba(0, 0, 0, 0.1);
+} 

frontend/src/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+); 

frontend/src/services/api.js

@@ -0,0 +1,203 @@
+import axios from 'axios';
+
+// Base URL for the API (will use proxy from package.json)
+const API_BASE_URL = process.env.REACT_APP_API_URL || '/api';
+
+// Create axios instance with default config
+const api = axios.create({
+  baseURL: API_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Request interceptor
+api.interceptors.request.use(
+  (config) => {
+    // Add auth token if available
+    const token = localStorage.getItem('auth_token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor
+api.interceptors.response.use(
+  (response) => {
+    return response.data;
+  },
+  (error) => {
+    // Handle common errors
+    if (error.response?.status === 401) {
+      // Handle unauthorized access
+      localStorage.removeItem('auth_token');
+      // Redirect to login if needed
+    }
+    
+    const errorMessage = error.response?.data?.message || error.message || 'An error occurred';
+    return Promise.reject(new Error(errorMessage));
+  }
+);
+
+// API Functions
+
+/**
+ * Send a message/question to the RAG system
+ */
+export const sendMessage = async (message) => {
+  try {
+    const response = await api.post('/ask', {
+      question: message,
+    });
+    
+    return response;
+  } catch (error) {
+    console.error('Error sending message:', error);
+    throw error;
+  }
+};
+
+/**
+ * Send a message/question to the RAG system and get a streaming response
+ */
+export const sendMessageStream = async (message, onChunk) => {
+  try {
+    const response = await fetch(`${API_BASE_URL}/ask_stream`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ question: message }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    if (!response.body) {
+      throw new Error("ReadableStream not yet supported in this browser.");
+    }
+
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+
+    try {
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+          break;
+        }
+        const chunk = decoder.decode(value, { stream: true });
+        if (chunk) {
+          onChunk(chunk);
+        }
+      }
+    } finally {
+      reader.releaseLock();
+    }
+  } catch (error) {
+    console.error('Error sending streaming message:', error);
+    throw error;
+  }
+};
+
+/**
+ * Upload a document to the system
+ */
+export const uploadDocument = async (formData) => {
+  try {
+    const response = await api.post('/upload', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+      // Upload progress callback
+      onUploadProgress: (progressEvent) => {
+        const percentCompleted = Math.round(
+          (progressEvent.loaded * 100) / progressEvent.total
+        );
+        console.log(`Upload progress: ${percentCompleted}%`);
+      },
+    });
+    
+    return response;
+  } catch (error) {
+    console.error('Error uploading document:', error);
+    throw error;
+  }
+};
+
+/**
+ * Get system status and information
+ */
+export const getSystemStatus = async () => {
+  try {
+    const response = await api.get('/status');
+    return response;
+  } catch (error) {
+    console.error('Error getting system status:', error);
+    throw error;
+  }
+};
+
+/**
+ * Get collection information
+ */
+export const getCollectionInfo = async () => {
+  try {
+    const response = await api.get('/collection/info');
+    return response;
+  } catch (error) {
+    console.error('Error getting collection info:', error);
+    throw error;
+  }
+};
+
+/**
+ * Delete a document from the collection
+ */
+export const deleteDocument = async (documentId) => {
+  try {
+    const response = await api.delete(`/documents/${documentId}`);
+    return response;
+  } catch (error) {
+    console.error('Error deleting document:', error);
+    throw error;
+  }
+};
+
+/**
+ * Search documents
+ */
+export const searchDocuments = async (query, limit = 5) => {
+  try {
+    const response = await api.post('/search', {
+      query,
+      limit,
+    });
+    
+    return response;
+  } catch (error) {
+    console.error('Error searching documents:', error);
+    throw error;
+  }
+};
+
+/**
+ * Health check endpoint
+ */
+export const healthCheck = async () => {
+  try {
+    const response = await api.get('/health');
+    return response;
+  } catch (error) {
+    console.error('Error checking health:', error);
+    throw error;
+  }
+};
+
+export default api; 

frontend/src/utils/conversationStorage.js

@@ -0,0 +1,227 @@
+/**
+ * Conversation Storage Utility
+ * Handles conversation persistence with localStorage
+ */
+
+const STORAGE_KEY = 'ca_study_conversations';
+const MAX_CONVERSATIONS = 50; // Limit to prevent localStorage overflow
+
+export class ConversationStorage {
+  
+  /**
+   * Load all conversations from localStorage
+   */
+  static loadConversations() {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (!stored) return [];
+      
+      const conversations = JSON.parse(stored);
+      
+      // Convert date strings back to Date objects
+      return conversations.map(conv => ({
+        ...conv,
+        createdAt: new Date(conv.createdAt),
+        messages: conv.messages.map(msg => ({
+          ...msg,
+          timestamp: new Date(msg.timestamp)
+        }))
+      }));
+    } catch (error) {
+      console.error('Error loading conversations:', error);
+      return [];
+    }
+  }
+
+  /**
+   * Save conversations to localStorage
+   */
+  static saveConversations(conversations) {
+    try {
+      // Limit the number of conversations to prevent localStorage overflow
+      const limitedConversations = conversations.slice(0, MAX_CONVERSATIONS);
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(limitedConversations));
+      return true;
+    } catch (error) {
+      console.error('Error saving conversations:', error);
+      // Handle localStorage quota exceeded
+      if (error.name === 'QuotaExceededError') {
+        // Try to save with fewer conversations
+        const reducedConversations = conversations.slice(0, 25);
+        try {
+          localStorage.setItem(STORAGE_KEY, JSON.stringify(reducedConversations));
+          return true;
+        } catch (retryError) {
+          console.error('Error saving reduced conversations:', retryError);
+        }
+      }
+      return false;
+    }
+  }
+
+  /**
+   * Add a new conversation
+   */
+  static addConversation(conversation) {
+    const conversations = this.loadConversations();
+    const newConversations = [conversation, ...conversations];
+    return this.saveConversations(newConversations);
+  }
+
+  /**
+   * Update an existing conversation
+   */
+  static updateConversation(conversationId, updates) {
+    const conversations = this.loadConversations();
+    const updatedConversations = conversations.map(conv => 
+      conv.id === conversationId ? { ...conv, ...updates } : conv
+    );
+    return this.saveConversations(updatedConversations);
+  }
+
+  /**
+   * Delete a conversation
+   */
+  static deleteConversation(conversationId) {
+    const conversations = this.loadConversations();
+    const filteredConversations = conversations.filter(conv => conv.id !== conversationId);
+    return this.saveConversations(filteredConversations);
+  }
+
+  /**
+   * Add a message to a conversation
+   */
+  static addMessage(conversationId, message) {
+    const conversations = this.loadConversations();
+    const updatedConversations = conversations.map(conv => {
+      if (conv.id === conversationId) {
+        return {
+          ...conv,
+          messages: [...conv.messages, message],
+          updatedAt: new Date()
+        };
+      }
+      return conv;
+    });
+    return this.saveConversations(updatedConversations);
+  }
+
+  /**
+   * Search conversations by title or content
+   */
+  static searchConversations(query) {
+    const conversations = this.loadConversations();
+    const lowercaseQuery = query.toLowerCase();
+    
+    return conversations.filter(conv => 
+      conv.title.toLowerCase().includes(lowercaseQuery) ||
+      conv.messages.some(msg => 
+        msg.content.toLowerCase().includes(lowercaseQuery)
+      )
+    );
+  }
+
+  /**
+   * Get conversation statistics
+   */
+  static getStatistics() {
+    const conversations = this.loadConversations();
+    const totalMessages = conversations.reduce((sum, conv) => sum + conv.messages.length, 0);
+    
+    return {
+      totalConversations: conversations.length,
+      totalMessages,
+      storageSize: this.getStorageSize(),
+      oldestConversation: conversations.length > 0 ? 
+        conversations[conversations.length - 1].createdAt : null,
+      newestConversation: conversations.length > 0 ? 
+        conversations[0].createdAt : null
+    };
+  }
+
+  /**
+   * Get storage size in KB
+   */
+  static getStorageSize() {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      return stored ? Math.round(new Blob([stored]).size / 1024) : 0;
+    } catch (error) {
+      return 0;
+    }
+  }
+
+  /**
+   * Export conversations as JSON
+   */
+  static exportConversations() {
+    const conversations = this.loadConversations();
+    const exportData = {
+      exportDate: new Date().toISOString(),
+      version: '1.0',
+      conversations
+    };
+    
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], { 
+      type: 'application/json' 
+    });
+    
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `ca_study_conversations_${new Date().toISOString().split('T')[0]}.json`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
+  /**
+   * Import conversations from JSON file
+   */
+  static importConversations(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        try {
+          const importData = JSON.parse(e.target.result);
+          
+          if (!importData.conversations || !Array.isArray(importData.conversations)) {
+            reject(new Error('Invalid conversation file format'));
+            return;
+          }
+          
+          const existingConversations = this.loadConversations();
+          const mergedConversations = [...importData.conversations, ...existingConversations];
+          
+          // Remove duplicates based on ID
+          const uniqueConversations = mergedConversations.filter((conv, index, self) =>
+            index === self.findIndex(c => c.id === conv.id)
+          );
+          
+          const success = this.saveConversations(uniqueConversations);
+          resolve({ success, count: importData.conversations.length });
+        } catch (error) {
+          reject(error);
+        }
+      };
+      reader.onerror = () => reject(new Error('Error reading file'));
+      reader.readAsText(file);
+    });
+  }
+
+  /**
+   * Clear all conversations
+   */
+  static clearAllConversations() {
+    try {
+      localStorage.removeItem(STORAGE_KEY);
+      return true;
+    } catch (error) {
+      console.error('Error clearing conversations:', error);
+      return false;
+    }
+  }
+}
+
+export default ConversationStorage; 

frontend/tailwind.config.js

@@ -0,0 +1,78 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',
+          950: '#082f49',
+        },
+        gray: {
+          50: '#f9fafb',
+          100: '#f3f4f6',
+          200: '#e5e7eb',
+          300: '#d1d5db',
+          400: '#9ca3af',
+          500: '#6b7280',
+          600: '#4b5563',
+          700: '#374151',
+          800: '#1f2937',
+          900: '#111827',
+          950: '#030712',
+        },
+        success: {
+          50: '#f0fdf4',
+          500: '#22c55e',
+          600: '#16a34a',
+        },
+        error: {
+          50: '#fef2f2',
+          500: '#ef4444',
+          600: '#dc2626',
+        }
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.5s ease-in-out',
+        'slide-up': 'slideUp 0.3s ease-out',
+        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'typing': 'typing 1.5s steps(20, end) infinite',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { transform: 'translateY(10px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        typing: {
+          '0%, 50%': { opacity: '1' },
+          '51%, 100%': { opacity: '0' },
+        }
+      },
+      backdropBlur: {
+        xs: '2px',
+      }
+    },
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
+}