Full translation + fix bugs

static/script.js

@@ -91,8 +91,8 @@ class DocumentSearchChatBot {
             this.displayResults();
             
         } catch (error) {
-            console.error('Erreur lors de la recherche:', error);
-            this.showError('Erreur lors de la recherche. Veuillez réessayer.');
+            console.error('Error on search:', error);
+            this.showError(`Error on search. Please try again. : ${error}`);
         } finally {
             this.hideLoading();
         }
@@ -103,7 +103,7 @@ class DocumentSearchChatBot {
         const resultsSection = document.getElementById('results-section');
         
         if (this.searchResults.length === 0) {
-            resultsContainer.innerHTML = '<p class="no-results">Aucun résultat trouvé.</p>';
+            resultsContainer.innerHTML = '<p class="no-results">No results has been found.</p>';
             resultsSection.classList.remove('hidden');
             return;
         }
@@ -123,6 +123,13 @@ class DocumentSearchChatBot {
         this.updateChatButtonState();
     }
 
+    escapeHtml(str) {
+        if (!str) return '';
+        const div = document.createElement('div');
+        div.textContent = str;
+        return div.innerHTML;
+    }
+
     createResultCard(result, index) {
         const card = document.createElement('div');
         card.className = 'result-card';
@@ -131,18 +138,18 @@ class DocumentSearchChatBot {
         card.innerHTML = `
     <div class="card-header">
         <div class="card-info">
-            <div class="card-id">ID: ${result.id}</div>
-            <div class="card-title">${result.title}</div>
-            <div class="card-section">${result.section}</div>
+            <div class="card-id">ID: ${this.escapeHtml(result.id)}</div>
+            <div class="card-title">${this.escapeHtml(result.title)}</div>
+            <div class="card-section">${this.escapeHtml(result.section)}</div>
         </div>
-        <div class="similarity-score">${result.similarity}%</div>
+        <div class="similarity-score">${this.escapeHtml(result.similarity)}%</div>
     </div>
     <div class="card-actions">
-        <button class="view-btn" data-id="${result.id}" data-section="${result.section}" data-content="${result.content}">
+        <button class="view-btn" data-id="${this.escapeHtml(result.id)}" data-section="${this.escapeHtml(result.section)}" data-content="${this.escapeHtml(result.content)}">
             <span class="material-icons">visibility</span>
             Voir le contenu
         </button>
-        <input type="checkbox" class="select-checkbox" onchange="app.toggleDocumentSelection(${index})">
+        <input type="checkbox" class="select-checkbox" onchange="app.toggleDocumentSelection(${this.escapeHtml(index)})">
     </div>
 `;
 
@@ -215,7 +222,7 @@ class DocumentSearchChatBot {
         document.getElementById('chat-section').classList.remove('hidden');
 
         // Ajouter un message de bienvenue
-        this.addChatMessage('bot', `Bonjour ! Je suis prêt à répondre à vos questions sur les ${this.selectedDocuments.size} document(s) sélectionné(s). Que souhaitez-vous savoir ?`);
+        this.addChatMessage('bot', `Hello ! I'm ready to answer to all of your questions regarding the ${this.selectedDocuments.size} selected section(s) of different specifications. What do you want to know ?`);
     }
 
     backToSearch() {
@@ -267,8 +274,8 @@ class DocumentSearchChatBot {
             this.chatHistory.push({"role": "assistant", "content": data.response})
             
         } catch (error) {
-            console.error('Erreur lors de l\'envoi du message:', error);
-            this.addChatMessage('bot', 'Désolé, une erreur s\'est produite. Veuillez réessayer.');
+            console.error('Error on sending message:', error);
+            this.addChatMessage('bot', `Sorry, an error has occurred. Please try again. : ${error}`);
         } finally {
             submitBtn.disabled = false;
         }

static/styles.css

@@ -307,7 +307,7 @@ body {
     border-radius: 8px;
     padding: 30px;
     box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    height: 600px;
+    height: 75vh;
     display: flex;
     flex-direction: column;
 }
@@ -337,6 +337,7 @@ body {
     flex: 1;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
 }
 
 .chat-messages {

templates/index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document Search ChatBot</title>
+    <title>RAGnarok | Chat with the specs</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
@@ -16,27 +16,27 @@
         <header class="header">
             <div class="logo">
                 <span class="material-icons">search</span>
-                <h1>Document Search</h1>
+                <h1>RAGnarok - Chat with the specs</h1>
             </div>
         </header>
 
         <!-- Search Section -->
         <section id="search-section" class="search-section">
             <div class="search-container">
-                <h2>Rechercher des documents techniques</h2>
+                <h2>Search specifications</h2>
                 <form id="search-form" class="search-form">
                     <div class="input-group">
                         <input type="text" id="keyword" placeholder="Entrez vos mots-clés..." required>
                         <span class="material-icons">search</span>
                     </div>
                     <div class="threshold-group">
-                        <label for="threshold">Seuil de similarité :</label>
+                        <label for="threshold">Similarity Threshold :</label>
                         <input type="range" id="threshold" min="0" max="100" step="1" value="70">
                         <span id="threshold-value"></span>
                     </div>
                     <button type="submit" class="search-btn">
                         <span class="material-icons">search</span>
-                        Rechercher
+                        Search
                     </button>
                 </form>
             </div>
@@ -45,15 +45,15 @@
         <!-- Results Section -->
         <section id="results-section" class="results-section hidden">
             <div class="results-header">
-                <h3>Résultats de recherche</h3>
+                <h3>Search result</h3>
                 <div class="selection-controls">
                     <button id="select-all" class="control-btn">
                         <span class="material-icons">select_all</span>
-                        Tout sélectionner
+                        Select All
                     </button>
                     <button id="unselect-all" class="control-btn">
                         <span class="material-icons">deselect</span>
-                        Tout désélectionner
+                        Unselect All
                     </button>
                 </div>
             </div>
@@ -61,7 +61,7 @@
             <div class="chat-launch">
                 <button id="start-chat" class="chat-btn" disabled>
                     <span class="material-icons">chat</span>
-                    Démarrer le ChatBot
+                    Unleash the RAGnarok !
                 </button>
             </div>
         </section>
@@ -72,16 +72,16 @@
                 <h3>ChatBot Assistant</h3>
                 <button id="back-to-search" class="back-btn">
                     <span class="material-icons">arrow_back</span>
-                    Retour à la recherche
+                    Return to search
                 </button>
             </div>
             <div class="chat-container">
                 <div id="chat-messages" class="chat-messages"></div>
                 <form id="chat-form" class="chat-form">
                     <div class="chat-input-group">
-                        <input type="text" id="chat-input" placeholder="Posez votre question..." required>
+                        <input type="text" id="chat-input" placeholder="Enter your query here ..." required>
                         <select id="model-select">
-                            <option value="gemini-2.5-flash-preview-05-20">Gemini 2.5 Flash Preview</option>
+                            <option value="gemini-2.5-flash">Gemini 2.5 Flash</option>
                             <option value="gemini-2.0-flash">Gemini 2.0 Flash</option>
                             <option value="gemma-3-27b-it">Gemma 3</option>
                             <option value="gemma-3n-e4b-it">Gemma 3n</option>
@@ -111,7 +111,7 @@
     <!-- Loading overlay -->
     <div id="loading" class="loading hidden">
         <div class="spinner"></div>
-        <p>Recherche en cours...</p>
+        <p>Searching ...</p>
     </div>
 
     <script src="/static/script.js"></script>