Add file upload RAG: app.js + style.css

static/app.js

@@ -13,7 +13,8 @@
         phase: 0,
         history: [],      // {role, content}
         timestamps: [],   // epoch ms for every message (user & assistant alternating)
-        analysisResult: null
+        analysisResult: null,
+        uploadedDocs: []  // filenames uploaded this session
     };
 
     var PHASE_NAMES = [
@@ -35,6 +36,7 @@
 
     var modeBadge   = document.getElementById("mode-badge");
     var topicBadge  = document.getElementById("topic-badge");
+    var docsBadge   = document.getElementById("docs-badge");
     var phaseDots   = document.getElementById("phase-dots");
     var phaseLabels = document.getElementById("phase-labels");
     var messagesEl  = document.getElementById("messages");
@@ -52,6 +54,12 @@
     var btnExport   = document.getElementById("btn-export");
     var btnNewSession = document.getElementById("btn-new-session");
 
+    // Upload refs
+    var uploadZone  = document.getElementById("upload-zone");
+    var fileInput   = document.getElementById("file-input");
+    var uploadList  = document.getElementById("upload-list");
+    var uploadStatus = document.getElementById("upload-status");
+
     /* ===== Screen navigation ===== */
     function showScreen(screen) {
         setupScreen.classList.remove("active");
@@ -99,6 +107,133 @@
         if (on) messagesEl.scrollTop = messagesEl.scrollHeight;
     }
 
+    /* ===== File Upload ===== */
+
+    function formatFileSize(bytes) {
+        if (bytes < 1024) return bytes + " o";
+        if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " Ko";
+        return (bytes / (1024 * 1024)).toFixed(1) + " Mo";
+    }
+
+    function renderUploadList() {
+        uploadList.innerHTML = "";
+        state.uploadedDocs.forEach(function (doc) {
+            var item = document.createElement("div");
+            item.className = "upload-item";
+
+            var icon = doc.filename.toLowerCase().endsWith(".pdf") ? "PDF" :
+                       doc.filename.toLowerCase().endsWith(".pptx") ? "PPT" :
+                       doc.filename.toLowerCase().endsWith(".ppt") ? "PPT" : "TXT";
+
+            item.innerHTML =
+                '<span class="upload-item-icon">' + icon + '</span>' +
+                '<span class="upload-item-name">' + doc.filename + '</span>' +
+                '<span class="upload-item-chunks">' + doc.chunks + ' chunks</span>' +
+                '<button class="upload-item-delete" data-filename="' + doc.filename + '">X</button>';
+            uploadList.appendChild(item);
+        });
+
+        // Bind delete buttons
+        uploadList.querySelectorAll(".upload-item-delete").forEach(function (btn) {
+            btn.addEventListener("click", function () {
+                deleteDoc(btn.dataset.filename);
+            });
+        });
+    }
+
+    function uploadFiles(fileList) {
+        if (!fileList || fileList.length === 0) return;
+
+        var formData = new FormData();
+        for (var i = 0; i < fileList.length; i++) {
+            formData.append("files", fileList[i]);
+        }
+
+        uploadStatus.textContent = "Upload en cours...";
+        uploadStatus.className = "upload-status uploading";
+        uploadZone.classList.add("uploading");
+
+        fetch("/api/upload", {
+            method: "POST",
+            body: formData
+        })
+        .then(function (res) { return res.json(); })
+        .then(function (data) {
+            uploadZone.classList.remove("uploading");
+            var ok = 0;
+            var errors = [];
+
+            (data.results || []).forEach(function (r) {
+                if (r.status === "ok") {
+                    ok++;
+                    state.uploadedDocs.push({ filename: r.filename, chunks: r.chunks });
+                } else {
+                    errors.push(r.filename + ": " + (r.message || "erreur"));
+                }
+            });
+
+            (data.skipped || []).forEach(function (s) {
+                errors.push(s.filename + ": " + s.reason);
+            });
+
+            if (ok > 0 && errors.length === 0) {
+                uploadStatus.textContent = ok + " fichier(s) ajoute(s) au corpus";
+                uploadStatus.className = "upload-status success";
+            } else if (ok > 0 && errors.length > 0) {
+                uploadStatus.textContent = ok + " OK, " + errors.length + " erreur(s): " + errors.join("; ");
+                uploadStatus.className = "upload-status warning";
+            } else {
+                uploadStatus.textContent = "Erreur: " + errors.join("; ");
+                uploadStatus.className = "upload-status error";
+            }
+
+            renderUploadList();
+        })
+        .catch(function () {
+            uploadZone.classList.remove("uploading");
+            uploadStatus.textContent = "Erreur de connexion. Reessaye.";
+            uploadStatus.className = "upload-status error";
+        });
+    }
+
+    function deleteDoc(filename) {
+        fetch("/api/documents/" + encodeURIComponent(filename), { method: "DELETE" })
+        .then(function (res) { return res.json(); })
+        .then(function () {
+            state.uploadedDocs = state.uploadedDocs.filter(function (d) {
+                return d.filename !== filename;
+            });
+            renderUploadList();
+            uploadStatus.textContent = filename + " supprime";
+            uploadStatus.className = "upload-status success";
+        });
+    }
+
+    // Upload zone events
+    uploadZone.addEventListener("click", function () {
+        fileInput.click();
+    });
+
+    fileInput.addEventListener("change", function () {
+        uploadFiles(fileInput.files);
+        fileInput.value = "";
+    });
+
+    uploadZone.addEventListener("dragover", function (e) {
+        e.preventDefault();
+        uploadZone.classList.add("dragover");
+    });
+
+    uploadZone.addEventListener("dragleave", function () {
+        uploadZone.classList.remove("dragover");
+    });
+
+    uploadZone.addEventListener("drop", function (e) {
+        e.preventDefault();
+        uploadZone.classList.remove("dragover");
+        uploadFiles(e.dataTransfer.files);
+    });
+
     /* ===== API calls ===== */
     function sendMessage(text) {
         state.history.push({ role: "user", content: text });
@@ -117,7 +252,7 @@
                 mode: state.mode,
                 topic: state.topic,
                 phase: state.phase,
-                history: state.history.slice(0, -1) // send history before this message
+                history: state.history.slice(0, -1)
             })
         })
         .then(function (res) { return res.json(); })
@@ -232,10 +367,13 @@
         state.history = [];
         state.timestamps = [];
         state.analysisResult = null;
+        state.uploadedDocs = [];
 
         topicInput.value = "";
         chatInput.value = "";
         messagesEl.querySelectorAll(".message").forEach(function (el) { el.remove(); });
+        uploadList.innerHTML = "";
+        uploadStatus.textContent = "";
 
         modeBtns.forEach(function (btn) {
             btn.classList.toggle("selected", btn.dataset.mode === "TUTOR");
@@ -245,9 +383,25 @@
         btnEnd.disabled = false;
         btnSend.disabled = false;
 
+        // Load existing documents
+        loadDocumentList();
+
         showScreen(setupScreen);
     }
 
+    /* ===== Load existing documents on page load ===== */
+    function loadDocumentList() {
+        fetch("/api/documents")
+        .then(function (res) { return res.json(); })
+        .then(function (data) {
+            state.uploadedDocs = (data.documents || []).map(function (d) {
+                return { filename: d.filename, chunks: "?" };
+            });
+            renderUploadList();
+        })
+        .catch(function () {});
+    }
+
     /* ===== Event listeners ===== */
 
     // Mode selection
@@ -273,6 +427,14 @@
         modeBadge.textContent = state.mode === "TUTOR" ? "Tuteur" : "Critique";
         topicBadge.textContent = topic;
 
+        // Show doc count badge
+        if (state.uploadedDocs.length > 0) {
+            docsBadge.textContent = state.uploadedDocs.length + " doc(s)";
+            docsBadge.style.display = "inline-block";
+        } else {
+            docsBadge.style.display = "none";
+        }
+
         renderPhaseIndicator();
         showScreen(chatScreen);
         chatInput.focus();
@@ -309,4 +471,7 @@
     // New session from analysis screen
     btnNewSession.addEventListener("click", resetSession);
 
+    // Load existing docs on startup
+    loadDocumentList();
+
 })();

static/style.css

@@ -127,6 +127,118 @@ body {
 .btn-primary:hover { opacity: 0.9; }
 .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
 
+/* ===== Upload Zone ===== */
+.upload-zone {
+    width: 100%;
+    border: 2px dashed var(--border);
+    border-radius: var(--radius);
+    padding: 28px 20px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s;
+    background: var(--bg-secondary);
+}
+
+.upload-zone:hover, .upload-zone.dragover {
+    border-color: var(--accent);
+    background: var(--bg-tertiary);
+}
+
+.upload-zone.uploading {
+    opacity: 0.6;
+    pointer-events: none;
+}
+
+.upload-icon {
+    font-size: 2rem;
+    color: var(--accent);
+    margin-bottom: 8px;
+    font-weight: 300;
+}
+
+.upload-text {
+    font-size: 0.92rem;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+}
+
+.upload-hint {
+    font-size: 0.78rem;
+    color: var(--text-secondary);
+}
+
+.upload-list {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.upload-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    font-size: 0.85rem;
+}
+
+.upload-item-icon {
+    background: var(--accent);
+    color: #fff;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 0.7rem;
+    font-weight: 700;
+    flex-shrink: 0;
+}
+
+.upload-item-name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.upload-item-chunks {
+    color: var(--text-secondary);
+    font-size: 0.78rem;
+    flex-shrink: 0;
+}
+
+.upload-item-delete {
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    border-radius: 4px;
+    cursor: pointer;
+    padding: 2px 8px;
+    font-size: 0.75rem;
+    transition: all 0.2s;
+}
+
+.upload-item-delete:hover {
+    border-color: var(--danger);
+    color: var(--danger);
+}
+
+.upload-status {
+    font-size: 0.82rem;
+    min-height: 1.2em;
+}
+
+.upload-status.success { color: var(--success); }
+.upload-status.warning { color: var(--warning); }
+.upload-status.error { color: var(--danger); }
+.upload-status.uploading { color: var(--accent-light); }
+
+.badge-docs {
+    background: var(--success);
+    color: #fff;
+}
+
 /* ===== Chat Screen ===== */
 #chat-screen {
     height: 100vh;