Add initial HTML, CSS, and JavaScript files for PDF Insight Beta application

static/css/styles.css

@@ -0,0 +1,715 @@
+/* Base styles */
+:root {
+    --primary-color: #2563eb;
+    --primary-light: #3b82f6;
+    --primary-dark: #1d4ed8;
+    --secondary-color: #10b981;
+    --background-color: #f3f4f6;
+    --sidebar-color: #ffffff;
+    --text-color: #1f2937;
+    --text-light: #6b7280;
+    --border-color: #e5e7eb;
+    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --border-radius: 8px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+    color: var(--text-color);
+    background-color: var(--background-color);
+    line-height: 1.5;
+}
+
+.hidden {
+    display: none !important;
+}
+
+/* App container layout */
+.app-container {
+    display: grid;
+    grid-template-columns: 260px 1fr 300px;
+    height: 100vh;
+    overflow: hidden;
+}
+
+/* Sidebar styles */
+.sidebar {
+    background-color: var(--sidebar-color);
+    border-right: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+}
+
+.logo-container {
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.logo-container h1 {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary-color);
+}
+
+.beta {
+    background-color: rgba(37, 99, 235, 0.1);
+    color: var(--primary-color);
+    font-size: 0.7rem;
+    padding: 0.1rem 0.4rem;
+    border-radius: 4px;
+    vertical-align: super;
+    font-weight: 600;
+}
+
+.upload-container {
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.upload-box {
+    border: 2px dashed var(--border-color);
+    border-radius: var(--border-radius);
+    padding: 2rem 1rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.upload-box:hover {
+    border-color: var(--primary-light);
+    background-color: rgba(59, 130, 246, 0.05);
+}
+
+.upload-box .upload-icon {
+    font-size: 2rem;
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+}
+
+.upload-box p {
+    color: var(--text-light);
+    font-weight: 500;
+}
+
+.model-selection {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.model-selection label {
+    font-weight: 500;
+    color: var(--text-light);
+}
+
+.model-selection select {
+    padding: 0.75rem;
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+    background-color: white;
+    width: 100%;
+    font-size: 0.9rem;
+    outline: none;
+}
+
+.session-info {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--border-color);
+}
+
+.file-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    overflow: hidden;
+}
+
+.file-info i {
+    color: var(--primary-color);
+}
+
+.file-info span {
+    font-size: 0.9rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.btn-clear, .btn-new {
+    padding: 0.75rem;
+    border-radius: var(--border-radius);
+    border: none;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    width: 100%;
+}
+
+.btn-clear {
+    background-color: rgba(239, 68, 68, 0.1);
+    color: #ef4444;
+}
+
+.btn-clear:hover {
+    background-color: rgba(239, 68, 68, 0.2);
+}
+
+.btn-new {
+    background-color: rgba(37, 99, 235, 0.1);
+    color: var(--primary-color);
+}
+
+.btn-new:hover {
+    background-color: rgba(37, 99, 235, 0.2);
+}
+
+/* Main content area */
+.main-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+.welcome-screen {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 2rem;
+    text-align: center;
+}
+
+.welcome-header {
+    margin-bottom: 3rem;
+}
+
+.welcome-header h1 {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.welcome-header p {
+    color: var(--text-light);
+    font-size: 1.2rem;
+}
+
+.features {
+    display: flex;
+    gap: 2rem;
+    margin-bottom: 3rem;
+}
+
+.feature {
+    background: white;
+    border-radius: var(--border-radius);
+    padding: 2rem;
+    box-shadow: var(--shadow);
+    width: 250px;
+    transition: transform 0.3s ease;
+}
+
+.feature:hover {
+    transform: translateY(-5px);
+}
+
+.feature i {
+    font-size: 2rem;
+    color: var(--primary-color);
+    margin-bottom: 1rem;
+}
+
+.feature h3 {
+    margin-bottom: 0.5rem;
+}
+
+.feature p {
+    color: var(--text-light);
+    font-size: 0.9rem;
+}
+
+.get-started {
+    margin-top: 2rem;
+}
+
+.btn-primary {
+    background-color: var(--primary-color);
+    color: white;
+    padding: 1rem 2rem;
+    border-radius: var(--border-radius);
+    border: none;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    font-size: 1rem;
+}
+
+.btn-primary:hover {
+    background-color: var(--primary-dark);
+}
+
+/* Chat container */
+.chat-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+}
+
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.system-message {
+    background-color: rgba(37, 99, 235, 0.05);
+    padding: 1rem;
+    border-radius: var(--border-radius);
+    border-left: 4px solid var(--primary-color);
+}
+
+.system-message p {
+    color: var(--text-color);
+    font-size: 0.9rem;
+}
+
+.message {
+    display: flex;
+    flex-direction: column;
+    max-width: 85%;
+}
+
+.user-message {
+    align-self: flex-end;
+    background-color: var(--primary-color);
+    color: white;
+    padding: 1rem;
+    border-radius: var(--border-radius);
+    border-bottom-right-radius: 0;
+}
+
+.assistant-message {
+    align-self: flex-start;
+    background-color: white;
+    padding: 1rem;
+    border-radius: var(--border-radius);
+    border-bottom-left-radius: 0;
+    box-shadow: var(--shadow);
+}
+
+.message-timestamp {
+    font-size: 0.75rem;
+    color: var(--text-light);
+    margin-top: 0.25rem;
+}
+
+.user-message .message-timestamp {
+    align-self: flex-end;
+}
+
+.assistant-message .message-timestamp {
+    align-self: flex-start;
+}
+
+.chat-input-container {
+    padding: 1rem;
+    border-top: 1px solid var(--border-color);
+    background-color: white;
+}
+
+.search-toggle {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+    padding-left: 0.5rem;
+}
+
+.search-toggle label {
+    font-size: 0.9rem;
+    color: var(--text-light);
+    cursor: pointer;
+}
+
+.chat-input-box {
+    display: flex;
+    gap: 0.75rem;
+    align-items: flex-end;
+}
+
+#chat-input {
+    flex: 1;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    padding: 0.75rem;
+    resize: none;
+    min-height: 60px;
+    max-height: 120px;
+    outline: none;
+    font-family: inherit;
+    font-size: 0.95rem;
+    line-height: 1.5;
+}
+
+#chat-input:focus {
+    border-color: var(--primary-light);
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
+}
+
+#send-button {
+    padding: 0.75rem 1rem;
+    border-radius: var(--border-radius);
+    border: none;
+    background-color: var(--primary-color);
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+#send-button:disabled {
+    background-color: #d1d5db;
+    cursor: not-allowed;
+}
+
+#send-button:not(:disabled):hover {
+    background-color: var(--primary-dark);
+}
+
+/* Context sidebar */
+.context-sidebar {
+    background-color: white;
+    border-left: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    transition: transform 0.3s ease;
+}
+
+.context-sidebar.collapsed {
+    transform: translateX(290px);
+}
+
+.context-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.context-header h3 {
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.btn-toggle {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--text-light);
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: background-color 0.2s;
+}
+
+.btn-toggle:hover {
+    background-color: var(--border-color);
+}
+
+.context-content {
+    padding: 1rem;
+    overflow-y: auto;
+    flex: 1;
+}
+
+.context-item {
+    margin-bottom: 1.5rem;
+    background-color: #f9fafb;
+    border-radius: var(--border-radius);
+    padding: 1rem;
+    border-left: 3px solid var(--primary-light);
+}
+
+.context-item:last-child {
+    margin-bottom: 0;
+}
+
+.context-score {
+    display: block;
+    font-size: 0.8rem;
+    color: var(--text-light);
+    margin-bottom: 0.5rem;
+}
+
+.context-text {
+    font-size: 0.9rem;
+    line-height: 1.5;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.no-context {
+    color: var(--text-light);
+    font-style: italic;
+    text-align: center;
+    padding: 2rem 0;
+}
+
+/* Loading overlay */
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    border: 5px solid rgba(255, 255, 255, 0.3);
+    border-top-color: var(--primary-color);
+    animation: spin 1s linear infinite;
+}
+
+#loading-text {
+    margin-top: 1rem;
+    color: white;
+    font-weight: 500;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+/* Message styling with Markdown support */
+.message-content {
+    width: 100%;
+    word-break: break-word;
+}
+
+.message-content pre {
+    background: #f4f5f7;
+    border-radius: 5px;
+    padding: 0.75rem;
+    overflow-x: auto;
+    margin: 0.5rem 0;
+}
+
+.message-content code {
+    font-family: 'JetBrains Mono', monospace;
+    font-size: 0.9rem;
+    padding: 0.2rem 0.4rem;
+    background: #f1f1f1;
+    border-radius: 3px;
+}
+
+.message-content pre code {
+    background: transparent;
+    padding: 0;
+    white-space: pre;
+    color: #333;
+    line-height: 1.5;
+}
+
+.message-content p {
+    margin-bottom: 0.75rem;
+}
+
+.message-content p:last-child {
+    margin-bottom: 0;
+}
+
+.message-content ul, .message-content ol {
+    margin-left: 1.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.message-content h1, .message-content h2, .message-content h3,
+.message-content h4, .message-content h5, .message-content h6 {
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+}
+
+.message-content blockquote {
+    border-left: 4px solid #ddd;
+    padding-left: 1rem;
+    margin-left: 0.5rem;
+    color: #555;
+}
+
+.message-content a {
+    color: var(--primary-color);
+    text-decoration: underline;
+}
+
+.message-content table {
+    border-collapse: collapse;
+    width: 100%;
+    margin: 0.5rem 0;
+}
+
+.message-content table th,
+.message-content table td {
+    border: 1px solid #ddd;
+    padding: 0.5rem;
+    text-align: left;
+}
+
+.message-content table th {
+    background-color: #f7f7f7;
+}
+
+/* Improved Responsive design */
+@media (max-width: 1024px) {
+    .app-container {
+        grid-template-columns: 260px 1fr 0;
+    }
+    
+    .context-sidebar {
+        position: fixed;
+        top: 0;
+        right: 0;
+        width: 300px;
+        height: 100vh;
+        z-index: 100;
+        transform: translateX(100%);
+    }
+    
+    .context-sidebar:not(.collapsed) {
+        transform: translateX(0);
+    }
+    
+    .message {
+        max-width: 90%;
+    }
+}
+
+@media (max-width: 768px) {
+    .app-container {
+        grid-template-columns: 1fr;
+    }
+    
+    .sidebar {
+        position: fixed;
+        left: 0;
+        top: 0;
+        height: 100vh;
+        width: 260px;
+        z-index: 100;
+        transform: translateX(-100%);
+    }
+    
+    .sidebar.show {
+        transform: translateX(0);
+    }
+    
+    .menu-toggle {
+        display: flex;
+        position: fixed;
+        top: 1rem;
+        left: 1rem;
+        z-index: 101;
+    }
+    
+    .main-content {
+        padding-top: 60px; /* Add spacing for the menu button */
+    }
+    
+    .features {
+        flex-direction: column;
+        gap: 1rem;
+    }
+    
+    .feature {
+        width: 100%;
+    }
+    
+    .message {
+        max-width: 95%;
+    }
+    
+    .welcome-header h1 {
+        font-size: 2rem;
+    }
+    
+    .welcome-header p {
+        font-size: 1rem;
+    }
+    
+    .chat-messages {
+        padding: 1rem;
+    }
+    
+    .chat-input-box {
+        flex-direction: column;
+    }
+    
+    #send-button {
+        align-self: flex-end;
+    }
+}
+
+@media (max-width: 480px) {
+    .message {
+        max-width: 100%;
+    }
+    
+    .user-message, .assistant-message {
+        padding: 0.75rem;
+    }
+    
+    .welcome-header h1 {
+        font-size: 1.5rem;
+    }
+    
+    .features {
+        padding: 0 0.5rem;
+    }
+    
+    .feature {
+        padding: 1.5rem 1rem;
+    }
+}

static/index.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PDF Insight Beta</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="css/styles.css">
+    <!-- Add Highlight.js for code syntax highlighting -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+    <!-- Add Marked.js for Markdown rendering -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+</head>
+<body>
+    <div class="app-container">
+        <!-- Mobile menu toggle button -->
+        <button id="menu-toggle" class="menu-toggle hidden">
+            <i class="fas fa-bars"></i>
+        </button>
+        
+        <!-- Sidebar -->
+        <div class="sidebar">
+            <div class="logo-container">
+                <h1>PDF Insight <span class="beta">Beta</span></h1>
+            </div>
+            <div class="upload-container">
+                <div class="upload-box" id="upload-box">
+                    <i class="fas fa-file-pdf upload-icon"></i>
+                    <p>Upload PDF Document</p>
+                    <input type="file" id="pdf-upload" accept=".pdf,.txt" hidden>
+                </div>
+                <div class="model-selection">
+                    <label for="model-select">Select Model:</label>
+                    <select id="model-select">
+                        <option value="meta-llama/llama-4-scout-17b-16e-instruct">Llama 4 Scout 17B</option>
+                        <option value="llama-3.1-8b-instant">Llama 3.1 8B Instant</option>
+                        <option value="llama-3.3-70b-versatile">Llama 3.3 70B Versatile</option>
+                    </select>
+                </div>
+                <div class="session-info hidden" id="session-info">
+                    <div class="file-info">
+                        <i class="fas fa-file-pdf"></i>
+                        <span id="current-file-name">No file loaded</span>
+                    </div>
+                    <button id="clear-history" class="btn-clear">Clear History</button>
+                    <button id="new-chat" class="btn-new">New Document</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Main Content -->
+        <div class="main-content">
+            <!-- Welcome Screen -->
+            <div class="welcome-screen" id="welcome-screen">
+                <div class="welcome-header">
+                    <h1>Welcome to PDF Insight Beta</h1>
+                    <p>Upload a PDF document and start asking questions about it</p>
+                </div>
+                <div class="features">
+                    <div class="feature">
+                        <i class="fas fa-file-pdf"></i>
+                        <h3>PDF Processing</h3>
+                        <p>Upload any PDF document for instant analysis</p>
+                    </div>
+                    <div class="feature">
+                        <i class="fas fa-robot"></i>
+                        <h3>Agentic RAG</h3>
+                        <p>Advanced retrieval augmented generation for accurate answers</p>
+                    </div>
+                    <div class="feature">
+                        <i class="fas fa-search"></i>
+                        <h3>Web Search Integration</h3>
+                        <p>Verify document information with internet search capabilities</p>
+                    </div>
+                </div>
+                <div class="get-started">
+                    <button id="get-started-btn" class="btn-primary">Get Started</button>
+                </div>
+            </div>
+
+            <!-- Chat Interface -->
+            <div class="chat-container hidden" id="chat-container">
+                <div class="chat-messages" id="chat-messages">
+                    <div class="system-message">
+                        <p>Upload successful! You can now ask questions about the document.</p>
+                    </div>
+                </div>
+                <div class="chat-input-container">
+                    <div class="search-toggle">
+                        <input type="checkbox" id="search-toggle">
+                        <label for="search-toggle">Use web search</label>
+                    </div>
+                    <div class="chat-input-box">
+                        <textarea id="chat-input" placeholder="Ask a question about the document..."></textarea>
+                        <button id="send-button" disabled>
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Context Sidebar -->
+        <div class="context-sidebar" id="context-sidebar">
+            <div class="context-header">
+                <h3>Context Used</h3>
+                <button id="toggle-context" class="btn-toggle">
+                    <i class="fas fa-angle-right"></i>
+                </button>
+            </div>
+            <div class="context-content" id="context-content">
+                <p class="no-context">No context available yet. Ask a question first.</p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Loading Overlay -->
+    <div class="loading-overlay hidden" id="loading-overlay">
+        <div class="spinner"></div>
+        <p id="loading-text">Processing Document...</p>
+    </div>
+
+    <script src="js/app.js"></script>
+</body>
+</html>

static/js/app.js

@@ -0,0 +1,504 @@
+// DOM Elements
+const uploadBox = document.getElementById('upload-box');
+const pdfUpload = document.getElementById('pdf-upload');
+const welcomeScreen = document.getElementById('welcome-screen');
+const chatContainer = document.getElementById('chat-container');
+const chatMessages = document.getElementById('chat-messages');
+const chatInput = document.getElementById('chat-input');
+const sendButton = document.getElementById('send-button');
+const searchToggle = document.getElementById('search-toggle');
+const modelSelect = document.getElementById('model-select');
+const sessionInfo = document.getElementById('session-info');
+const currentFileName = document.getElementById('current-file-name');
+const clearHistoryBtn = document.getElementById('clear-history');
+const newChatBtn = document.getElementById('new-chat');
+const loadingOverlay = document.getElementById('loading-overlay');
+const loadingText = document.getElementById('loading-text');
+const getStartedBtn = document.getElementById('get-started-btn');
+const contextContent = document.getElementById('context-content');
+const contextSidebar = document.getElementById('context-sidebar');
+const toggleContextBtn = document.getElementById('toggle-context');
+const menuToggle = document.getElementById('menu-toggle');
+const sidebar = document.querySelector('.sidebar');
+
+// App state
+let currentSessionId = null;
+let lastContextData = null;
+let isMobile = window.innerWidth <= 768;
+
+// Event listeners
+uploadBox.addEventListener('click', () => pdfUpload.click());
+pdfUpload.addEventListener('change', handleFileUpload);
+sendButton.addEventListener('click', sendMessage);
+chatInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+    }
+});
+chatInput.addEventListener('input', () => {
+    sendButton.disabled = chatInput.value.trim() === '';
+});
+clearHistoryBtn.addEventListener('click', clearChatHistory);
+newChatBtn.addEventListener('click', resetApp);
+getStartedBtn.addEventListener('click', () => {
+    uploadBox.click();
+});
+toggleContextBtn.addEventListener('click', toggleContextSidebar);
+
+// Mobile menu event listeners
+if (menuToggle) {
+    menuToggle.addEventListener('click', () => {
+        sidebar.classList.toggle('show');
+    });
+}
+
+// Handle window resize
+window.addEventListener('resize', () => {
+    const wasMobile = isMobile;
+    isMobile = window.innerWidth <= 768;
+    
+    // If we're transitioning between mobile/desktop
+    if (wasMobile !== isMobile) {
+        updateMobileUI();
+    }
+});
+
+// Initialize the app
+initializeApp();
+
+// Functions
+function initializeApp() {
+    updateMobileUI();
+    
+    // Check if we have a session in localStorage
+    const savedSession = localStorage.getItem('pdf_insight_session');
+    if (savedSession) {
+        try {
+            const session = JSON.parse(savedSession);
+            currentSessionId = session.id;
+            currentFileName.textContent = session.fileName;
+            
+            // Show chat interface
+            welcomeScreen.classList.add('hidden');
+            chatContainer.classList.remove('hidden');
+            sessionInfo.classList.remove('hidden');
+            
+            // Load chat history
+            fetchChatHistory();
+        } catch (e) {
+            console.error('Failed to load saved session:', e);
+            localStorage.removeItem('pdf_insight_session');
+        }
+    }
+}
+
+// Update UI based on mobile/desktop view
+function updateMobileUI() {
+    if (isMobile) {
+        if (menuToggle) menuToggle.classList.remove('hidden');
+        contextSidebar.classList.add('collapsed');
+    } else {
+        if (menuToggle) menuToggle.classList.add('hidden');
+        sidebar.classList.remove('show');
+    }
+}
+
+async function handleFileUpload(e) {
+    const file = e.target.files[0];
+    if (!file) return;
+    
+    try {
+        // Show loading overlay
+        showLoading('Processing Document...');
+        
+        const formData = new FormData();
+        formData.append('file', file);
+        formData.append('model_name', modelSelect.value);
+        
+        const response = await fetch('/upload-pdf', {
+            method: 'POST',
+            body: formData
+        });
+        
+        const data = await response.json();
+        
+        if (data.status === 'success') {
+            currentSessionId = data.session_id;
+            currentFileName.textContent = file.name;
+            
+            // Save session to localStorage
+            localStorage.setItem('pdf_insight_session', JSON.stringify({
+                id: currentSessionId,
+                fileName: file.name
+            }));
+            
+            // Show chat interface
+            welcomeScreen.classList.add('hidden');
+            chatContainer.classList.remove('hidden');
+            sessionInfo.classList.remove('hidden');
+            
+            // Reset chat history view
+            chatMessages.innerHTML = `
+                <div class="system-message">
+                    <p>Upload successful! You can now ask questions about "${file.name}".</p>
+                </div>
+            `;
+            
+            // Enable input
+            chatInput.disabled = false;
+            chatInput.placeholder = 'Ask a question about the document...';
+            
+            // Close sidebar on mobile after uploading
+            if (isMobile) {
+                sidebar.classList.remove('show');
+            }
+        } else {
+            // Enhanced error display
+            let errorDetails = '';
+            if (data.detail) {
+                errorDetails = data.detail;
+            }
+            if (data.type) {
+                errorDetails = `${data.type}: ${errorDetails}`;
+            }
+            
+            showError('Error: ' + (errorDetails || 'Failed to process document'));
+            
+            // Add a more detailed error in the chat area if we're already in chat mode
+            if (!welcomeScreen.classList.contains('hidden')) {
+                const errorMessageDiv = document.createElement('div');
+                errorMessageDiv.className = 'system-message error';
+                errorMessageDiv.innerHTML = `
+                    <p><strong>Error Processing Document</strong></p>
+                    <p>${errorDetails}</p>
+                    <p>Please make sure you have set up all required API keys in the .env file.</p>
+                `;
+                chatMessages.appendChild(errorMessageDiv);
+            }
+        }
+    } catch (error) {
+        console.error('Error uploading file:', error);
+        showError('Failed to upload document. Please try again.');
+    } finally {
+        hideLoading();
+    }
+}
+
+async function sendMessage() {
+    const query = chatInput.value.trim();
+    if (!query || !currentSessionId) return;
+    
+    // Disable input and show typing indicator
+    chatInput.disabled = true;
+    sendButton.disabled = true;
+    
+    // Add user message to chat
+    const userMessageElement = createMessageElement('user', query);
+    chatMessages.appendChild(userMessageElement);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+    
+    // Clear input
+    chatInput.value = '';
+    
+    try {
+        // Show loading state
+        const typingIndicator = createTypingIndicator();
+        chatMessages.appendChild(typingIndicator);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        
+        const response = await fetch('/chat', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                session_id: currentSessionId,
+                query: query,
+                use_search: searchToggle.checked,
+                model_name: modelSelect.value
+            })
+        });
+        
+        const data = await response.json();
+        
+        // Remove typing indicator
+        chatMessages.removeChild(typingIndicator);
+        
+        if (data.status === 'success') {
+            // Add assistant message
+            const assistantMessageElement = createMessageElement('assistant', data.answer);
+            chatMessages.appendChild(assistantMessageElement);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+            
+            // Apply syntax highlighting to code blocks
+            applyCodeHighlighting();
+            
+            // Update context sidebar
+            updateContextSidebar(data.context_used);
+            lastContextData = data.context_used;
+        } else {
+            showError('Failed to get response: ' + data.detail);
+        }
+    } catch (error) {
+        console.error('Error sending message:', error);
+        showError('Failed to get response. Please try again.');
+        
+        // Remove typing indicator if it exists
+        const indicator = document.querySelector('.typing-indicator');
+        if (indicator) {
+            chatMessages.removeChild(indicator);
+        }
+    } finally {
+        // Re-enable input
+        chatInput.disabled = false;
+        chatInput.focus();
+    }
+}
+
+async function fetchChatHistory() {
+    if (!currentSessionId) return;
+    
+    try {
+        showLoading('Loading chat history...');
+        
+        const response = await fetch('/chat-history', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                session_id: currentSessionId
+            })
+        });
+        
+        const data = await response.json();
+        
+        if (data.status === 'success' && data.history.length > 0) {
+            // Clear chat messages and add system message
+            chatMessages.innerHTML = `
+                <div class="system-message">
+                    <p>Continuing your conversation about "${currentFileName.textContent}".</p>
+                </div>
+            `;
+            
+            // Add all messages from history
+            data.history.forEach(item => {
+                const userMessage = createMessageElement('user', item.user);
+                const assistantMessage = createMessageElement('assistant', item.assistant);
+                chatMessages.appendChild(userMessage);
+                chatMessages.appendChild(assistantMessage);
+            });
+            
+            // Apply syntax highlighting to code blocks
+            applyCodeHighlighting();
+            
+            // Scroll to bottom
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+    } catch (error) {
+        console.error('Error fetching chat history:', error);
+        showError('Failed to load chat history.');
+    } finally {
+        hideLoading();
+    }
+}
+
+async function clearChatHistory() {
+    if (!currentSessionId) return;
+    
+    try {
+        showLoading('Clearing chat history...');
+        
+        const response = await fetch('/clear-history', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                session_id: currentSessionId
+            })
+        });
+        
+        const data = await response.json();
+        
+        if (data.status === 'success') {
+            // Reset chat messages
+            chatMessages.innerHTML = `
+                <div class="system-message">
+                    <p>Chat history cleared. You can continue asking questions about "${currentFileName.textContent}".</p>
+                </div>
+            `;
+            
+            // Reset context
+            contextContent.innerHTML = '<p class="no-context">No context available yet. Ask a question first.</p>';
+            lastContextData = null;
+        } else {
+            showError('Failed to clear chat history: ' + data.detail);
+        }
+    } catch (error) {
+        console.error('Error clearing chat history:', error);
+        showError('Failed to clear chat history.');
+    } finally {
+        hideLoading();
+    }
+}
+
+function resetApp() {
+    // Clear current session
+    currentSessionId = null;
+    lastContextData = null;
+    localStorage.removeItem('pdf_insight_session');
+    
+    // Reset UI
+    welcomeScreen.classList.remove('hidden');
+    chatContainer.classList.add('hidden');
+    sessionInfo.classList.add('hidden');
+    
+    // Reset file input
+    pdfUpload.value = '';
+    
+    // Reset chat messages
+    chatMessages.innerHTML = `
+        <div class="system-message">
+            <p>Upload successful! You can now ask questions about the document.</p>
+        </div>
+    `;
+    
+    // Reset context sidebar
+    contextContent.innerHTML = '<p class="no-context">No context available yet. Ask a question first.</p>';
+}
+
+function createMessageElement(type, content) {
+    const div = document.createElement('div');
+    div.className = `message ${type}-message`;
+    
+    // For user messages, just escape HTML
+    if (type === 'user') {
+        div.innerHTML = `
+            <div class="message-content">${escapeHTML(content)}</div>
+            <div class="message-timestamp">${formatTimestamp(new Date())}</div>
+        `;
+    } 
+    // For assistant messages, render with Markdown
+    else {
+        // Configure marked.js options
+        marked.setOptions({
+            breaks: true, // Add <br> on single line breaks
+            gfm: true,    // GitHub Flavored Markdown
+            sanitize: false // Allow HTML in the input
+        });
+        
+        // Process the content with marked
+        const renderedContent = marked.parse(content);
+        
+        div.innerHTML = `
+            <div class="message-content">${renderedContent}</div>
+            <div class="message-timestamp">${formatTimestamp(new Date())}</div>
+        `;
+    }
+    
+    return div;
+}
+
+function createTypingIndicator() {
+    const div = document.createElement('div');
+    div.className = 'message assistant-message typing-indicator';
+    div.innerHTML = `
+        <div class="typing-animation">
+            <span class="dot"></span>
+            <span class="dot"></span>
+            <span class="dot"></span>
+        </div>
+    `;
+    return div;
+}
+
+function updateContextSidebar(contextData) {
+    if (!contextData || contextData.length === 0) {
+        contextContent.innerHTML = '<p class="no-context">No context available for this response.</p>';
+        return;
+    }
+    
+    contextContent.innerHTML = '';
+    
+    contextData.forEach((item, index) => {
+        const contextItem = document.createElement('div');
+        contextItem.className = 'context-item';
+        
+        const score = Math.round((1 - item.score) * 100); // Convert distance to similarity score
+        
+        contextItem.innerHTML = `
+            <span class="context-score">Relevance: ${score}%</span>
+            <div class="context-text">${truncateText(item.text, 300)}</div>
+        `;
+        
+        contextContent.appendChild(contextItem);
+    });
+}
+
+function toggleContextSidebar() {
+    contextSidebar.classList.toggle('collapsed');
+    
+    // Update icon
+    const icon = toggleContextBtn.querySelector('i');
+    if (contextSidebar.classList.contains('collapsed')) {
+        icon.className = 'fas fa-angle-left';
+    } else {
+        icon.className = 'fas fa-angle-right';
+    }
+}
+
+function applyCodeHighlighting() {
+    // Find all code blocks in the assistant messages
+    document.querySelectorAll('.assistant-message pre code').forEach(block => {
+        hljs.highlightElement(block);
+    });
+}
+
+function showLoading(message) {
+    loadingText.textContent = message || 'Loading...';
+    loadingOverlay.classList.remove('hidden');
+}
+
+function hideLoading() {
+    loadingOverlay.classList.add('hidden');
+}
+
+function showError(message) {
+    // Add error message to chat
+    const errorDiv = document.createElement('div');
+    errorDiv.className = 'system-message error';
+    errorDiv.innerHTML = `<p>${message}</p>`;
+    
+    chatMessages.appendChild(errorDiv);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+    
+    // Also show an alert for critical errors
+    if (message.includes('API_KEY') || message.includes('environment variables')) {
+        alert('Configuration Error: ' + message);
+    }
+    
+    // Remove after 10 seconds
+    setTimeout(() => {
+        if (errorDiv.parentNode === chatMessages) {
+            chatMessages.removeChild(errorDiv);
+        }
+    }, 10000);
+}
+
+// Helper functions
+function formatTimestamp(date) {
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+}
+
+function truncateText(text, maxLength) {
+    if (text.length <= maxLength) return text;
+    return text.substring(0, maxLength) + '...';
+}
+
+function escapeHTML(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}