Upload 9 files

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+b.png filter=lfs diff=lfs merge=lfs -text
+static/b.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,22 @@
+FROM python:3.10-slim
+
+WORKDIR /app
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+
+# Install dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application
+COPY . .
+
+# Create static directory
+RUN mkdir -p static
+
+# Set environment variables for HF Spaces
+ENV HOST=0.0.0.0
+ENV PORT=7860
+
+# Command to run the application
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

main.py

@@ -0,0 +1,164 @@
+import os
+import fitz  # PyMuPDF
+import uuid
+from fastapi import FastAPI, UploadFile, File, Form, Request
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import HTMLResponse, JSONResponse
+from pydantic import BaseModel
+from typing import List
+from dotenv import load_dotenv
+
+from langchain_text_splitters import RecursiveCharacterTextSplitter
+from langchain_community.vectorstores import Chroma
+from langchain_community.embeddings import HuggingFaceEmbeddings
+from langchain_core.documents import Document
+
+from anthropic import Anthropic
+
+# ---- Load API Keys ----
+load_dotenv()
+ANTHROPIC_API_KEY = os.getenv("ANTHROPIC_API_KEY")
+CLAUDE_MODEL = "claude-3-haiku-20240307"
+
+# ---- App Init ----
+app = FastAPI()
+app.add_middleware(CORSMiddleware, allow_origins=["*"], allow_methods=["*"], allow_headers=["*"])
+
+# Create static directory if it doesn't exist
+os.makedirs(os.path.join(os.path.dirname(__file__), "static"), exist_ok=True)
+
+# Mount static files directory
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+# ---- In-Memory Stores ----
+db_store = {}
+chat_store = {}
+general_chat_sessions = {}
+
+# ---- Utils ----
+
+def extract_text_from_pdf(file) -> str:
+    """Extracts text from the first page of a PDF."""
+    doc = fitz.open(stream=file.file.read(), filetype="pdf")
+    return doc[0].get_text()
+
+def build_vector_db(text: str, collection_name: str) -> Chroma:
+    """Chunks, embeds, and stores text in ChromaDB."""
+    splitter = RecursiveCharacterTextSplitter(chunk_size=500, chunk_overlap=50)
+    docs = splitter.create_documents([text])
+
+    # Using a standard model that should be available publicly
+    embeddings = HuggingFaceEmbeddings(model_name="all-MiniLM-L6-v2")
+    vectordb = Chroma.from_documents(docs, embeddings, collection_name=collection_name)
+    return vectordb
+
+def retrieve_context(vectordb: Chroma, query: str, k: int = 3) -> str:
+    """Fetches top-k similar chunks from the vector DB."""
+    docs = vectordb.similarity_search(query, k=k)
+    return "\n\n".join([d.page_content for d in docs])
+
+def create_session(is_pdf: bool = True) -> str:
+    """Creates a new unique session ID."""
+    sid = str(uuid.uuid4())
+    chat_store[sid] = []
+    
+    # Track if this is a general chat session (without PDF)
+    if not is_pdf:
+        general_chat_sessions[sid] = True
+    
+    return sid
+
+def append_chat(session_id: str, role: str, msg: str):
+    chat_store[session_id].append({"role": role, "text": msg})
+
+def get_chat(session_id: str):
+    return chat_store.get(session_id, [])
+
+def delete_session(session_id: str):
+    chat_store.pop(session_id, None)
+    db_store.pop(session_id, None)
+    general_chat_sessions.pop(session_id, None)
+
+# ---- API Routes ----
+
+@app.get("/", response_class=HTMLResponse)
+async def get_home():
+    with open(os.path.join(os.path.dirname(__file__), "static", "index.html")) as f:
+        return f.read()
+
+@app.post("/start-chat/")
+async def start_general_chat():
+    """Starts a general chat session without PDF."""
+    session_id = create_session(is_pdf=False)
+    return {"session_id": session_id, "message": "General chat session started."}
+        
+@app.post("/upload/")
+async def upload_pdf(file: UploadFile = File(...), current_session_id: str = Form(None)):
+    """Handles PDF upload and indexing with chat continuity."""
+    # Extract text from PDF
+    text = extract_text_from_pdf(file)
+    
+    # Handle session continuity
+    if current_session_id and current_session_id in chat_store:
+        # Continue with existing session
+        session_id = current_session_id
+        # Remove from general chat sessions if it was one
+        if session_id in general_chat_sessions:
+            general_chat_sessions.pop(session_id)
+    else:
+        # Create a new session
+        session_id = create_session()
+    
+    # Create and store the vector database
+    vectordb = build_vector_db(text, collection_name=session_id)
+    db_store[session_id] = vectordb
+    
+    return {"session_id": session_id, "message": "PDF indexed."}
+
+@app.post("/chat/")
+async def chat(session_id: str = Form(...), prompt: str = Form(...)):
+    """Handles user chat prompt, fetches relevant info, calls Claude."""
+    # Check if this is a general chat or PDF chat
+    is_general_chat = session_id in general_chat_sessions
+    is_pdf_chat = session_id in db_store
+    
+    if not is_general_chat and not is_pdf_chat:
+        return {"error": "Invalid session ID"}
+    
+    append_chat(session_id, "user", prompt)
+    
+    # Ensure we have an API key and initialize with proper parameters
+    if not ANTHROPIC_API_KEY:
+        return JSONResponse(status_code=500, content={"error": "Missing ANTHROPIC_API_KEY environment variable"})
+    
+    client = Anthropic(api_key=ANTHROPIC_API_KEY.strip())
+    
+    if is_general_chat:
+        # General chat without PDF context
+        response = client.messages.create(
+            model=CLAUDE_MODEL,
+            max_tokens=512,
+            temperature=0.5,
+            messages=[{"role": "user", "content": prompt}]
+        )
+    else:
+        # PDF-based chat with context
+        context = retrieve_context(db_store[session_id], prompt)
+        response = client.messages.create(
+            model=CLAUDE_MODEL,
+            max_tokens=512,
+            temperature=0.5,
+            messages=[{"role": "user", "content": f"Context:\n{context}\n\nQuestion:\n{prompt}"}]
+        )
+
+    answer = response.content[0].text
+    append_chat(session_id, "bot", answer)
+
+    return {"answer": answer, "chat_history": get_chat(session_id)}
+
+@app.post("/end/")
+async def end_chat(session_id: str = Form(...)):
+    """Ends session and deletes associated data."""
+    delete_session(session_id)
+    return {"message": "Session cleared."}

requirements.txt

@@ -0,0 +1,13 @@
+fastapi
+uvicorn
+pymupdf
+langchain
+langchain-text-splitters
+langchain-community
+chromadb
+anthropic
+huggingface_hub
+sentence-transformers
+tqdm
+python-multipart
+python-dotenv

static/index.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RAG - PDF Chat</title>
+    <link rel="stylesheet" href="/static/styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+</head>
+<body>
+    <div class="container">
+        <!-- Full Width Chat Interface -->
+        <div class="chat-interface">
+            <div class="chat-header">
+                <div class="title-area">
+                    <h1>RAG</h1>
+                    <p class="tagline">Your PDF Assistant</p>
+                </div>
+                <div class="status" id="status">
+                    <span class="status-dot offline"></span>
+                    <span class="status-text">Starting chat...</span>
+                </div>
+            </div>
+
+            <div class="chat-container">
+                <div class="chat-messages" id="chat-messages">
+                    <div class="message bot-message">
+                        <div class="message-content">
+                            <p>Welcome ! I'm ready to chat. You can also upload a PDF to get context-aware answers.</p>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="pdf-indicator" id="pdf-info" style="display: none;">
+                    <i class="fas fa-file-pdf"></i>
+                    <span id="pdf-name">No file selected</span>
+                    <button id="new-pdf-btn" class="new-pdf-btn">
+                        <i class="fas fa-sync-alt"></i>
+                    </button>
+                </div>
+
+                <div class="chat-input-container">
+                    <div class="chat-actions">
+                        <div class="pdf-arrow" id="pdf-arrow">
+                            <i class="fas fa-arrow-down"></i>
+                        </div>
+                        <label for="pdf-upload" class="pdf-upload-btn" title="Upload PDF">
+                            <i class="fas fa-file-pdf"></i>
+                        </label>
+                        <input type="file" id="pdf-upload" accept=".pdf" hidden>
+                    </div>
+                    <textarea id="chat-input" placeholder="Type your message..." disabled></textarea>
+                    <button id="send-button" disabled>
+                        <i class="fas fa-paper-plane"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Notifications -->
+    <div class="notification-container" id="notification-container"></div>
+
+    <script src="/static/script.js"></script>
+</body>
+</html>

static/script.js

@@ -0,0 +1,380 @@
+// Global Variables
+let sessionId = null;
+let currentPdfName = '';
+
+// DOM Elements
+const chatMessages = document.getElementById('chat-messages');
+const chatInput = document.getElementById('chat-input');
+const sendButton = document.getElementById('send-button');
+const pdfUpload = document.getElementById('pdf-upload');
+const pdfInfo = document.getElementById('pdf-info');
+const pdfNameElement = document.getElementById('pdf-name');
+const newPdfButton = document.getElementById('new-pdf-btn');
+const status = document.getElementById('status');
+const notificationContainer = document.getElementById('notification-container');
+const chatContainer = document.querySelector('.chat-container');
+
+// Event Listeners
+document.addEventListener('DOMContentLoaded', () => {
+    // Start general chat automatically
+    startGeneralChat();
+    
+    // Add drop event to the entire chat container
+    chatContainer.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        chatContainer.classList.add('dragover');
+        showNotification('Ready', 'Drop PDF here to upload', 'info', 1500);
+    });
+
+    chatContainer.addEventListener('dragleave', () => {
+        chatContainer.classList.remove('dragover');
+    });
+
+    chatContainer.addEventListener('drop', (e) => {
+        e.preventDefault();
+        chatContainer.classList.remove('dragover');
+        
+        const files = e.dataTransfer.files;
+        if (files.length > 0 && files[0].type === 'application/pdf') {
+            handleFileUpload(files[0]);
+        } else {
+            showNotification('Error', 'Please upload a PDF file', 'error');
+        }
+    });
+    
+    // Add click handler for the PDF upload button in the chat
+    document.querySelector('.pdf-upload-btn').addEventListener('click', (e) => {
+        e.preventDefault();
+        // Hide the arrow when PDF button is clicked
+        const pdfArrow = document.getElementById('pdf-arrow');
+        if (pdfArrow) {
+            pdfArrow.style.display = 'none';
+        }
+        pdfUpload.click();
+    });
+
+    pdfUpload.addEventListener('change', (e) => {
+        e.preventDefault(); // Prevent form submission
+        if (e.target.files.length > 0) {
+            handleFileUpload(e.target.files[0]);
+        }
+        return false;
+    });
+
+    // Chat Input
+    chatInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            if (chatInput.value.trim() !== '') {
+                handleSendMessage();
+            }
+        }
+    });
+
+    sendButton.addEventListener('click', () => {
+        if (chatInput.value.trim() !== '') {
+            handleSendMessage();
+        }
+    });
+
+    // New PDF Upload
+    newPdfButton.addEventListener('click', () => {
+        resetChat();
+        showUploadInterface();
+    });
+});
+
+// Functions
+function handleFileUpload(file) {
+    // Prevent default behaviors
+    event?.preventDefault?.();
+    
+    // Update UI to show loading state
+    updateStatus('loading', 'Processing PDF...');
+    showNotification('Processing', 'Uploading and analyzing your PDF...', 'info');
+    
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('current_session_id', sessionId || ''); // Pass current session ID for continuity
+    currentPdfName = file.name;
+    
+    // Add PDF loaded class to chat container
+    document.querySelector('.chat-interface').classList.add('pdf-loaded');
+    
+    // Upload the file
+    fetch('/upload/', {
+        method: 'POST',
+        body: formData,
+        // Ensure we don't navigate away
+        redirect: 'follow',
+        mode: 'cors',
+        cache: 'no-cache'
+    })
+    .then(response => {
+        if (!response.ok) throw new Error('Failed to upload PDF');
+        return response.json();
+    })
+    .then(data => {
+        sessionId = data.session_id;
+        
+        // Update UI
+        updateStatus('online', 'PDF Loaded');
+        showPdfInfo();
+        enableChat();
+        showNotification('Success', 'PDF successfully processed! You can now chat about its content.', 'success');
+        
+        // Add system message to chat
+        addBotMessage('I\'ve analyzed your PDF and can now provide context-aware answers.');
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        updateStatus('offline', 'Upload Failed');
+        showNotification('Error', 'Failed to process PDF. Please try again.', 'error');
+    });
+}
+
+function handleSendMessage() {
+    const message = chatInput.value.trim();
+    if (message === '' || !sessionId) return;
+    
+    // Add user message to chat
+    addUserMessage(message);
+    
+    // Clear input
+    chatInput.value = '';
+    chatInput.style.height = 'auto';
+    
+    // Disable input while waiting for response
+    disableChat();
+    
+    // Add loading indicator
+    const loadingMsgId = addBotLoadingMessage();
+    
+    // Send message to API
+    const formData = new FormData();
+    formData.append('session_id', sessionId);
+    formData.append('prompt', message);
+    
+    fetch('/chat/', {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => {
+        if (!response.ok) throw new Error('Failed to get response');
+        return response.json();
+    })
+    .then(data => {
+        // Remove loading message
+        removeMessage(loadingMsgId);
+        
+        // Add bot response
+        addBotMessage(data.answer);
+        
+        // Enable input
+        enableChat();
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        removeMessage(loadingMsgId);
+        addBotMessage('Sorry, I encountered an error while processing your request. Please try again.');
+        enableChat();
+        showNotification('Error', 'Failed to get a response. Please try again.', 'error');
+    });
+}
+
+function addUserMessage(message) {
+    const messageElement = document.createElement('div');
+    messageElement.classList.add('message', 'user-message');
+    
+    const messageContent = document.createElement('div');
+    messageContent.classList.add('message-content');
+    
+    const messageText = document.createElement('p');
+    messageText.textContent = message;
+    
+    messageContent.appendChild(messageText);
+    messageElement.appendChild(messageContent);
+    chatMessages.appendChild(messageElement);
+    
+    scrollToBottom();
+}
+
+function addBotMessage(message) {
+    const messageElement = document.createElement('div');
+    messageElement.classList.add('message', 'bot-message');
+    
+    const messageContent = document.createElement('div');
+    messageContent.classList.add('message-content');
+    
+    const messageText = document.createElement('p');
+    messageText.textContent = message;
+    
+    messageContent.appendChild(messageText);
+    messageElement.appendChild(messageContent);
+    chatMessages.appendChild(messageElement);
+    
+    scrollToBottom();
+}
+
+function addBotLoadingMessage() {
+    const messageId = 'msg-' + Date.now();
+    
+    const messageElement = document.createElement('div');
+    messageElement.classList.add('message', 'bot-message');
+    messageElement.id = messageId;
+    
+    const messageContent = document.createElement('div');
+    messageContent.classList.add('message-content');
+    
+    const loadingSpinner = document.createElement('div');
+    loadingSpinner.classList.add('loading-spinner');
+    
+    messageContent.appendChild(loadingSpinner);
+    messageElement.appendChild(messageContent);
+    chatMessages.appendChild(messageElement);
+    
+    scrollToBottom();
+    
+    return messageId;
+}
+
+function removeMessage(messageId) {
+    const message = document.getElementById(messageId);
+    if (message) message.remove();
+}
+
+function scrollToBottom() {
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+function updateStatus(state, text) {
+    const statusDot = status.querySelector('.status-dot');
+    const statusText = status.querySelector('.status-text');
+    
+    statusDot.className = 'status-dot ' + state;
+    statusText.textContent = text;
+}
+
+function enableChat() {
+    chatInput.disabled = false;
+    sendButton.disabled = false;
+    chatInput.focus();
+}
+
+function disableChat() {
+    chatInput.disabled = true;
+    sendButton.disabled = true;
+}
+
+function resetChat() {
+    if (sessionId) {
+        // End the session on the server
+        const formData = new FormData();
+        formData.append('session_id', sessionId);
+        
+        fetch('/end/', {
+            method: 'POST',
+            body: formData
+        }).catch(error => console.error('Error ending session:', error));
+    }
+    
+    // Reset variables
+    sessionId = null;
+    currentPdfName = '';
+    
+    // Clear chat
+    chatMessages.innerHTML = '';
+    addBotMessage('Welcome to RAG! I\'m ready to chat. You can also upload a PDF to get context-aware answers.');
+    
+    // Start a new general chat automatically
+    startGeneralChat();
+}
+
+function showUploadInterface() {
+    uploadContainer.style.display = 'flex';
+    pdfInfo.style.display = 'none';
+}
+
+function startGeneralChat() {
+    // Update UI
+    updateStatus('online', 'Chat Ready');
+    
+    // Make API call to start a general chat session
+    fetch('/start-chat/', {
+        method: 'POST'
+    })
+    .then(response => {
+        if (!response.ok) throw new Error('Failed to start chat');
+        return response.json();
+    })
+    .then(data => {
+        sessionId = data.session_id;
+        enableChat();
+        // Show welcome message indicating PDF upload option
+        addBotMessage('I\'m ready to help! You can chat with me directly or upload a PDF using the paperclip icon for context-aware responses.');
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        showNotification('Error', 'Failed to start chat. Please try again.', 'error');
+    });
+}
+
+function showPdfInfo() {
+    // Truncate long filenames
+    const truncatedName = currentPdfName.length > 25 ? 
+        currentPdfName.substring(0, 22) + '...' : 
+        currentPdfName;
+    
+    pdfNameElement.textContent = truncatedName;
+    pdfInfo.style.display = 'flex';
+    
+    // Update status to show PDF is loaded
+    updateStatus('online', 'PDF loaded');
+        
+    // Add tooltip for full filename
+    pdfNameElement.title = currentPdfName;
+}
+
+function showNotification(title, message, type = 'info', duration = 5000) {
+    const notificationId = Date.now();
+        
+    const notification = document.createElement('div');
+    notification.classList.add('notification', type);
+    notification.id = `notification-${notificationId}`;
+        
+    const notificationTitle = document.createElement('h4');
+    notificationTitle.textContent = title;
+        
+    const notificationMessage = document.createElement('p');
+    notificationMessage.textContent = message;
+        
+    const closeButton = document.createElement('button');
+    closeButton.classList.add('close-notification');
+    closeButton.innerHTML = '×';
+    closeButton.addEventListener('click', () => {
+        closeNotification(notificationId);
+    });
+        
+    notification.appendChild(notificationTitle);
+    notification.appendChild(notificationMessage);
+    notification.appendChild(closeButton);
+        
+    notificationContainer.appendChild(notification);
+        
+    // Auto-close after specified duration
+    setTimeout(() => {
+        closeNotification(notificationId);
+    }, duration);
+        
+    return notificationId;
+}
+
+function closeNotification(id) {
+    const notification = document.getElementById(`notification-${id}`);
+    if (notification) {
+        notification.classList.add('notification-hide');
+        setTimeout(() => {
+            notification.remove();
+        }, 300);
+    }
+}

static/styles.css

@@ -0,0 +1,690 @@
+/* Global Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Inter', 'Söhne', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+}
+
+body {
+    background: url('/static/b.png?v=2');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+    height: 100vh;
+    overflow: hidden;
+    color: #333; /* Dark text instead of white */
+    line-height: 1.5;
+    font-size: 15px;
+    text-shadow: none; /* Removing text shadow */
+}
+
+.container {
+    height: 100vh;
+    background-color: transparent; /* No background */
+    overflow: hidden;
+    display: flex;
+    max-width: none; /* Full width */
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+/* Chat Interface Styles */
+.chat-interface {
+    width: 100%;
+    background-color: transparent;
+    color: #343541;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    position: relative;
+    padding: 0;
+    margin: 0;
+}
+
+.chat-header {
+    padding: 15px 20px;
+    border-bottom: none;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    z-index: 10;
+    position: relative;
+    border-radius: 0;
+    margin: 0;
+    width: 100%;
+    box-sizing: border-box;
+    border-top: 1px solid rgba(255, 255, 255, 0.5);
+    border-bottom: 1px solid rgba(225, 225, 225, 0.3);
+}
+
+.title-area {
+    display: flex;
+    align-items: center;
+}
+
+.title-area h1 {
+    font-size: 22px;
+    color: #111;
+    margin-right: 15px;
+    font-weight: 700;
+    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+    letter-spacing: -0.5px;
+}
+
+.tagline {
+    font-size: 14px;
+    color: #333;
+    font-weight: 500;
+}
+
+.notification-message {
+    font-size: 14px;
+    color: #6e6e80;
+    line-height: 1.4;
+}
+
+/* Chat Container */
+.chat-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+    max-width: 100%;
+    margin: 0;
+    width: 100%;
+    padding-bottom: 80px; /* Space for fixed input */
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 15px; /* Additional spacing after header */
+    border-top: none;
+}
+
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding-bottom: 80px; /* Space for input */
+    padding: 0 20px; /* Match the header's horizontal padding */
+    margin: 20px 0 0 0; /* Add top margin to move content down */
+    scroll-behavior: smooth;
+    background-color: transparent;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.message {
+    display: flex;
+    padding: 6px 0;
+    max-width: 100%;
+    width: 100%;
+    margin: 0;
+}
+
+.user-message {
+    background-color: transparent;
+    justify-content: flex-end; /* Position at right */
+}
+
+.user-message:hover {
+    background-color: rgba(255,255,255,0.25);
+}
+
+.bot-message {
+    background-color: transparent;
+    border: none;
+    display: flex;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    align-items: flex-start;
+    justify-content: flex-start;
+}
+
+.message-content {
+    padding: 12px 16px;
+    max-width: 800px;
+    margin: 0 auto;
+    width: 100%;
+    border-radius: 8px; /* More rectangular shape */
+}
+
+.user-message .message-content {
+    color: black;
+    background-color: #e1f5f0;
+    border-radius: 18px;
+    margin-right: 0;
+    margin-left: auto;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    width: auto;
+    max-width: 85%;
+    box-sizing: border-box;
+}
+
+.bot-message .message-content {
+    color: #343541;
+    background-color: #fff;
+    border-radius: 18px;
+    margin: 4px 10px 4px 0;
+    padding: 12px 16px;
+    width: auto;
+    max-width: 85%;
+    box-sizing: border-box;
+    border: 1px solid #e5e5e5;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.message p {
+    margin-bottom: 12px;
+}
+
+.message p:last-child {
+    margin-bottom: 0;
+}
+
+.chat-input-container {
+    padding: 10px 12px 15px;
+    border: none;
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    width: calc(100% - 40px);
+    z-index: 10;
+    margin-bottom: 15px;
+}
+
+.pdf-indicator {
+    display: flex;
+    align-items: center;
+    padding: 12px 16px;
+    background-color: rgba(255,255,255,0.25);
+    border: 1px solid rgba(16, 163, 127, 0.2);
+    color: #343541;
+}
+
+.chat-actions {
+display: flex;
+align-items: center;
+margin-right: 5px;
+position: relative;
+}
+
+/* Bouncing Arrow */
+.pdf-arrow {
+    position: absolute;
+    top: -50px;
+    left: 50%;
+    transform: translateX(-50%);
+    color: #10a37f;
+    font-size: 36px;
+    animation: bounce 1.5s infinite;
+    z-index: 10;
+}
+
+@keyframes bounce {
+0%, 20%, 50%, 80%, 100% {
+transform: translateX(-50%) translateY(0);
+}
+40% {
+transform: translateX(-50%) translateY(-20px);
+}
+60% {
+transform: translateX(-50%) translateY(-10px);
+}
+}
+
+.pdf-upload-btn {
+    cursor: pointer;
+    color: #6e6e80;
+    font-size: 26px;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    border-radius: 8px;
+    background-color: transparent;
+}
+
+.pdf-upload-btn:hover {
+    color: #202123;
+    background-color: rgba(0,0,0,0.05);
+}
+
+.pdf-loaded .pdf-upload-btn {
+    color: #10a37f;
+}
+
+#chat-input {
+    flex: 1;
+    padding: 10px 15px;
+    border: none;
+    outline: none;
+    font-size: 15px;
+    border-radius: 20px;
+    background-color: rgba(255,255,255,0.25);
+    backdrop-filter: blur(5px);
+    transition: all 0.3s ease;
+    width: calc(100% - 50px);
+    color: white;
+}
+
+#chat-input:focus {
+    border-color: rgba(16, 163, 127, 0.5);
+    box-shadow: 0 0 1px 2px rgba(16, 163, 127, 0.25);
+}
+
+#chat-input::placeholder {
+    color: #8e8ea0;
+}
+
+#send-button {
+    background-color: rgba(16, 163, 127, 0.7);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+    font-size: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin-left: 10px;
+    flex-shrink: 0;
+    backdrop-filter: blur(3px);
+}
+
+#send-button:hover {
+    background-color: #0e906f;
+}
+
+#send-button:disabled {
+    background-color: rgba(16, 163, 127, 0.5);
+    cursor: not-allowed;
+}
+
+#send-button:disabled::before {
+    display: none;
+}
+
+.new-pdf-btn {
+    margin-left: auto;
+    background: none;
+    border: none;
+    color: #10a37f;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.close-btn, .notification-close {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #8e8ea0;
+    transition: all 0.2s;
+    font-size: 14px;
+    padding: 4px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.close-btn:hover, .notification-close:hover {
+    color: #343541;
+    background-color: rgba(0,0,0,0.05);
+}
+
+/* Main Content Area */
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 30px;
+    background-color: transparent;
+    overflow-y: auto;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 30px;
+}
+
+.header h2 {
+    font-size: 24px;
+    color: #333;
+}
+
+.status {
+    display: flex;
+    align-items: center;
+    color: #8e8ea0;
+    font-size: 14px;
+    gap: 6px;
+}
+
+.loading-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: rgba(16, 163, 127, 0.5);
+    animation: dotPulse 1.5s infinite ease-in-out;
+}
+
+.loading {
+    background-color: #fbbf24;
+}
+
+.offline {
+    background-color: #f87171;
+}
+
+.online {
+    background-color: #10a37f;
+}
+
+/* Upload Container */
+.upload-container {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+}
+
+.upload-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    border: 2px dashed #ccc;
+    border-radius: 10px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    max-width: 500px;
+    background-color: transparent;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+}
+
+.upload-box:hover {
+    border-color: #e94560;
+    background-color: #fafafa;
+}
+
+.upload-box.dragover {
+    border-color: #e94560;
+    background-color: #fff7f8;
+}
+
+.upload-icon {
+    font-size: 48px;
+    margin-bottom: 20px;
+    color: #e94560;
+}
+
+.upload-box h3 {
+    margin-bottom: 10px;
+    color: #333;
+}
+
+.upload-btn {
+    margin-top: 15px;
+    padding: 10px 20px;
+    background-color: #e94560;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    display: inline-block;
+    transition: all 0.2s ease;
+}
+
+.upload-btn:hover {
+    background-color: #d13152;
+}
+
+/* Chat Options */
+.chat-options {
+    margin-top: 30px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.separator {
+    margin: 20px 0;
+    font-weight: 500;
+    color: #666;
+    position: relative;
+    text-align: center;
+    width: 100%;
+}
+
+.separator::before,
+.separator::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    width: 40%;
+    height: 1px;
+    background-color: #ddd;
+}
+
+.separator::before {
+    left: 0;
+}
+
+.separator::after {
+    right: 0;
+}
+
+.start-chat-btn {
+    padding: 12px 25px;
+    background-color: #0f3460;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    transition: all 0.2s ease;
+}
+
+.start-chat-btn:hover {
+    background-color: #0a2448;
+}
+
+/* PDF Info */
+.pdf-indicator {
+    display: flex;
+    align-items: center;
+    padding: 8px 16px;
+    background-color: transparent;
+    border-top: 1px solid rgba(0,0,0,0.1);
+    color: #343541;
+    font-size: 14px;
+    max-width: 800px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+.pdf-indicator i {
+    color: #10a37f;
+    margin-right: 10px;
+    font-size: 16px;
+}
+
+#pdf-name {
+    color: #343541;
+    font-size: 14px;
+    max-width: 300px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+}
+
+.loading-dots {
+    display: flex;
+    gap: 4px;
+    padding: 8px 0;
+}
+
+.new-pdf-btn {
+    margin-left: auto;
+    background: none;
+    border: none;
+    color: #10a37f;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Notifications */
+.notification-container {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.notification {
+    padding: 12px 15px;
+    margin: 15px 0;
+    border-radius: 8px;
+    background-color: transparent;
+    position: relative;
+    border-left: 3px solid;
+    font-size: 14px;
+    animation: fadeIn 0.3s ease;
+    font-weight: 500;
+    color: white;
+    text-shadow: 0px 0px 2px rgba(0,0,0,0.5);
+}
+
+.notification.success {
+    border-left: 4px solid #10a37f;
+    background-color: rgba(16, 163, 127, 0.05);
+}
+
+.notification.error {
+    border-left: 4px solid #f87171;
+    background-color: rgba(248, 113, 113, 0.05);
+}
+
+.notification.info {
+    border-left: 4px solid #60a5fa;
+    background-color: rgba(96, 165, 250, 0.05);
+}
+
+.notification.warning {
+    border-left: 4px solid #fbbf24;
+    background-color: rgba(251, 191, 36, 0.05);
+}
+
+.notification-icon {
+    font-size: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.notification-content {
+    flex: 1;
+}
+
+.notification-title {
+    font-weight: 600;
+    margin-bottom: 5px;
+    color: #202123;
+    font-size: 14px;
+}
+
+.notification-close {
+    cursor: pointer;
+    font-size: 16px;
+    color: #999;
+    transition: color 0.2s;
+}
+
+.notification-close:hover {
+    color: #343541;
+    background-color: rgba(0,0,0,0.05);
+}
+
+@keyframes slideIn {
+    0% {
+        transform: translateX(20px);
+        opacity: 0;
+    }
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes dotPulse {
+    0%, 100% {
+        transform: scale(0.7);
+        opacity: 0.5;
+    }
+    50% {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .container {
+        flex-direction: column;
+    }
+
+    .sidebar {
+        width: 100%;
+        height: 50%;
+    }
+
+    .main-content {
+        padding: 15px;
+    }
+}
+
+/* Loading animation */
+.loading-spinner {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border: 3px solid rgba(255,255,255,.3);
+    border-radius: 50%;
+    border-top-color: white;
+    animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}