Add Markdown compability

static/script.js

@@ -89,7 +89,7 @@ class DocumentSearchChatBot {
             const data = await response.json();
             this.searchResults = data.results || [];
             this.displayResults();
-            
+
         } catch (error) {
             console.error('Error on search:', error);
             this.showError(`Error on search. Please try again. : ${error}`);
@@ -101,7 +101,7 @@ class DocumentSearchChatBot {
     displayResults() {
         const resultsContainer = document.getElementById('results-container');
         const resultsSection = document.getElementById('results-section');
-        
+
         if (this.searchResults.length === 0) {
             resultsContainer.innerHTML = '<p class="no-results">No results has been found.</p>';
             resultsSection.classList.remove('hidden');
@@ -109,7 +109,7 @@ class DocumentSearchChatBot {
         }
 
         resultsContainer.innerHTML = '';
-        
+
         this.searchResults.forEach((result, index) => {
             const card = this.createResultCard(result, index);
             resultsContainer.appendChild(card);
@@ -159,7 +159,7 @@ class DocumentSearchChatBot {
     toggleDocumentSelection(index) {
         const card = document.querySelector(`[data-index="${index}"]`);
         const checkbox = card.querySelector('.select-checkbox');
-        
+
         if (checkbox.checked) {
             this.selectedDocuments.add(index);
             card.classList.add('selected');
@@ -167,7 +167,7 @@ class DocumentSearchChatBot {
             this.selectedDocuments.delete(index);
             card.classList.remove('selected');
         }
-        
+
         this.updateChatButtonState();
     }
 
@@ -208,14 +208,17 @@ class DocumentSearchChatBot {
     }
 
     startChat() {
-        
+
         if (this.selectedDocuments.size === 0) return;
 
         const selectedDocs = Array.from(this.selectedDocuments).map(index => {
             const doc = this.searchResults[index];
             return `(${doc.id} ${doc.title} ${doc.section} ${doc.content || ""})`
         }).join("\n");
-        this.chatHistory = [{"role": "system", "content": `You are a helpful AI assistant. You will answer any questions related to the following specifications: ${selectedDocs}`}];
+        this.chatHistory = [{
+            "role": "system",
+            "content": `You are a helpful AI assistant. You will answer any questions related to the following specifications: ${selectedDocs}`
+        }];
 
         document.getElementById('search-section').classList.add('hidden');
         document.getElementById('results-section').classList.add('hidden');
@@ -229,7 +232,7 @@ class DocumentSearchChatBot {
         document.getElementById('chat-section').classList.add('hidden');
         document.getElementById('search-section').classList.remove('hidden');
         document.getElementById('results-section').classList.remove('hidden');
-        
+
         // Vider les messages du chat
         document.getElementById('chat-messages').innerHTML = '';
     }
@@ -245,7 +248,10 @@ class DocumentSearchChatBot {
         this.addChatMessage('user', message);
         input.value = '';
 
-        this.chatHistory.push({"role": "user", "content": message});
+        this.chatHistory.push({
+            "role": "user",
+            "content": message
+        });
 
         // Désactiver le formulaire pendant l'envoi
         const form = document.getElementById('chat-form');
@@ -265,14 +271,20 @@ class DocumentSearchChatBot {
             });
 
             if (!response.ok) {
-                this.chatHistory.push({"role": "assistant", "content": `HTTP error! status: ${response.status}`})
+                this.chatHistory.push({
+                    "role": "assistant",
+                    "content": `HTTP error! status: ${response.status}`
+                })
                 throw new Error(`HTTP error! status: ${response.status}`);
             }
 
             const data = await response.json();
             this.addChatMessage('bot', data.response);
-            this.chatHistory.push({"role": "assistant", "content": data.response})
-            
+            this.chatHistory.push({
+                "role": "assistant",
+                "content": data.response
+            })
+
         } catch (error) {
             console.error('Error on sending message:', error);
             this.addChatMessage('bot', `Sorry, an error has occurred. Please try again. : ${error}`);
@@ -285,7 +297,23 @@ class DocumentSearchChatBot {
         const messagesContainer = document.getElementById('chat-messages');
         const messageDiv = document.createElement('div');
         messageDiv.className = `message ${sender}`;
-        messageDiv.textContent = message;
+
+        try {
+            // Vérifier si marked est disponible
+            if (typeof marked !== 'undefined' && marked.parse) {
+                messageDiv.innerHTML = marked.parse(message);
+            } else if (typeof marked !== 'undefined' && marked.marked) {
+                // Pour les versions plus anciennes
+                messageDiv.innerHTML = marked.marked(message);
+            } else {
+                console.error('Marked library not loaded properly');
+                messageDiv.textContent = message; // Fallback
+            }
+        } catch (error) {
+            console.error('Markdown parsing error:', error);
+            messageDiv.textContent = message; // Fallback en cas d'erreur
+        }
+
         messagesContainer.appendChild(messageDiv);
         messagesContainer.scrollTop = messagesContainer.scrollHeight;
     }

templates/index.html

@@ -9,6 +9,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="/static/styles.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/15.0.12/marked.min.js"></script>
 </head>
 <body>
     <div class="container">
@@ -114,6 +115,6 @@
         <p>Searching ...</p>
     </div>
 
-    <script src="/static/script.js"></script>
+    <script type="module" src="/static/script.js"></script>
 </body>
 </html>