Update templates/index.html

templates/index.html

@@ -186,23 +186,66 @@
     .message-bubble:hover .copy-btn {
       opacity: 1;
     }
+    /* START: CSS for multi-file preview */
     .file-preview {
-      max-width: 300px;
-      margin: 0.5rem auto;
-      position: relative;
-      overflow: hidden;
-      border-radius: 0.5rem;
-      transition: transform 0.2s ease;
+        max-height: 200px; /* Adjusted max-height for multi previews */
+        overflow-y: auto;
+        scrollbar-width: thin;
+        padding: 0.5rem; /* Add some padding */
+        background-color: rgba(243, 244, 246, 0.5); /* Light background */
+        border-radius: 0.5rem;
+        margin-top: 0.5rem;
     }
-    .file-preview:hover {
-      transform: scale(1.02);
+    .dark .file-preview {
+        background-color: rgba(30, 41, 59, 0.5); /* Darker background for dark mode */
     }
-    .file-preview img {
-      width: 100%;
-      height: auto;
-      display: block;
-      object-fit: cover;
+
+    .file-preview-item {
+      background-color: rgba(255, 255, 255, 0.7);
+      transition: all 0.2s ease-in-out;
+      margin-bottom: 0.5rem;
+      padding: 0.5rem;
+      border: 1px solid #e5e7eb;
+      border-radius: 0.375rem;
+      display: flex;
+      align-items: center;
+    }
+
+    .dark .file-preview-item {
+      background-color: rgba(51, 65, 85, 0.5);
+      border-color: rgba(71, 85, 105, 0.5);
+    }
+
+    .file-preview-item:hover {
+      background-color: rgba(255, 255, 255, 1);
+    }
+
+    .dark .file-preview-item:hover {
+      background-color: rgba(51, 65, 85, 0.8);
+    }
+
+    #file-preview::-webkit-scrollbar {
+      width: 5px;
     }
+
+    #file-preview::-webkit-scrollbar-thumb {
+      background-color: rgba(156, 163, 175, 0.5);
+      border-radius: 3px;
+    }
+
+    #file-preview::-webkit-scrollbar-track {
+      background-color: rgba(229, 231, 235, 0.3);
+    }
+
+    .dark #file-preview::-webkit-scrollbar-thumb {
+      background-color: rgba(75, 85, 99, 0.5);
+    }
+
+    .dark #file-preview::-webkit-scrollbar-track {
+      background-color: rgba(31, 41, 55, 0.3);
+    }
+    /* END: CSS for multi-file preview */
+
     .chip {
       display: inline-flex;
       align-items: center;
@@ -416,6 +459,17 @@
       #send-button i {
         font-size: 0.9rem;
       }
+      /* Smaller file previews on mobile */
+      .file-preview-item {
+          padding: 0.375rem;
+      }
+      .file-preview-item .w-12 { width: 2.5rem; }
+      .file-preview-item .h-12 { height: 2.5rem; }
+      .file-preview-item .w-10 { width: 2rem; }
+      .file-preview-item .h-10 { height: 2rem; }
+      .file-preview-item .text-xs { font-size: 0.7rem; }
+      .file-preview { max-height: 150px; }
+
     }
     /* Container pour le textarea et le bouton */
     .input-wrapper {
@@ -497,7 +551,7 @@
       </div>
       <!-- Zone de prévisualisation -->
       <div id="preview-area" class="px-4 py-2 bg-gray-50 dark:bg-gray-800/50 hidden">
-        <div id="file-preview" class="hidden"></div>
+        <div id="file-preview" class="hidden"></div> <!-- Container for multiple previews -->
       </div>
       <!-- Barre d'options -->
       <div class="flex items-center justify-between flex-wrap gap-y-2 px-4 py-2 bg-gray-100 dark:bg-gray-800/80 text-sm text-gray-600 dark:text-gray-300">
@@ -523,23 +577,22 @@
              <span class="tooltip-text">Raisonnement avancé (1 fois/min)</span>
            </label>
          </div>
+         <!-- START: Modified HTML for file input and chip -->
          <div class="flex items-center space-x-2">
-
-           
            <label for="file_upload" class="cursor-pointer flex items-center text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 tooltip">
-  <i class="fa-solid fa-paperclip"></i>
-  <span class="ml-1.5 hidden sm:inline">Fichiers</span>
-  <input type="file" id="file_upload" name="file[]" class="hidden" accept=".txt,.pdf,.png,.jpg,.jpeg" multiple>
-  <span class="tooltip-text">Joindre plusieurs fichiers (txt, pdf, image)</span>
-</label>
+             <i class="fa-solid fa-paperclip"></i>
+             <span class="ml-1.5 hidden sm:inline">Fichiers</span>
+             <input type="file" id="file_upload" name="file[]" class="hidden" accept=".txt,.pdf,.png,.jpg,.jpeg" multiple>
+             <span class="tooltip-text">Joindre plusieurs fichiers (txt, pdf, image)</span>
+           </label>
 
-           
            <div id="file-chip" class="chip hidden">
-             <i class="fa-solid fa-file chip-icon"></i>
+             <i class="fa-solid fa-files chip-icon"></i> <!-- Changed icon to fa-files -->
              <span id="file-name" class="truncate max-w-[100px] sm:max-w-[120px]"></span>
              <i id="clear-file" class="fa-solid fa-xmark chip-close"></i>
            </div>
          </div>
+         <!-- END: Modified HTML for file input and chip -->
       </div>
       <!-- Formulaire de chat -->
       <form id="chat-form" class="p-3 sm:p-4 bg-white dark:bg-gray-900">
@@ -604,6 +657,7 @@
       const MOBILE_BREAKPOINT = 640;
       let advancedToggleCooldownEndTime = 0;
       let isComposing = false;
+      const filesList = []; // Pour stocker les fichiers sélectionnés
 
       // Gestion du thème
       function initializeTheme() {
@@ -757,12 +811,13 @@
         scrollToBottom();
       }
       function escapeHtml(unsafe) {
+        if (typeof unsafe !== 'string') return '';
         return unsafe
-          .replace(/&/g, "&amp;")
-          .replace(/</g, "&lt;")
-          .replace(/>/g, "&gt;")
-          .replace(/"/g, "&quot;")
-          .replace(/'/g, "&#039;");
+          .replace(/&/g, "&")
+          .replace(/</g, "<")
+          .replace(/>/g, ">")
+          .replace(/"/g, """)
+          .replace(/'/g, "'");
       }
 
       // Gestion du cooldown pour le raisonnement avancé
@@ -829,55 +884,97 @@
         }
       }
 
-      // Gestion des fichiers
+      // START: Modified clearFileInput function
       function clearFileInput() {
-        fileUpload.value = '';
+        fileUpload.value = ''; // Clear the input element
         fileChip.classList.add('hidden');
         fileNameSpan.textContent = '';
         fileNameSpan.title = '';
-        filePreview.innerHTML = '';
+        filePreview.innerHTML = ''; // Clear previews
         filePreview.classList.add('hidden');
         previewArea.classList.add('hidden');
+        filesList.length = 0; // Vider la liste des fichiers
       }
+      // END: Modified clearFileInput function
+
+      // START: Replaced fileUpload event listener for multiple files
       fileUpload.addEventListener('change', () => {
         if (fileUpload.files.length > 0) {
-          const file = fileUpload.files[0];
-          const name = file.name;
-          fileNameSpan.textContent = name;
-          fileNameSpan.title = name;
-          fileChip.classList.remove('hidden');
+          // Vider les prévisualisations précédentes et la liste
           filePreview.innerHTML = '';
-          if (file.type.startsWith('image/')) {
-            const reader = new FileReader();
-            reader.onload = (e) => {
-              filePreview.innerHTML = `
-                <div class="file-preview">
-                  <img src="${e.target.result}" alt="Prévisualisation: ${escapeHtml(name)}">
+          fileChip.classList.add('hidden'); // Hide chip initially
+          filesList.length = 0;
+
+          // Mettre à jour la liste des fichiers
+          for (let i = 0; i < fileUpload.files.length; i++) {
+            filesList.push(fileUpload.files[i]);
+          }
+
+          // Afficher le nombre total de fichiers dans la puce
+          fileNameSpan.textContent = `${filesList.length} fichier${filesList.length > 1 ? 's' : ''}`;
+          fileNameSpan.title = filesList.map(f => f.name).join(', ');
+          fileChip.classList.remove('hidden');
+
+          // Créer des prévisualisations pour chaque fichier (jusqu'à un maximum raisonnable)
+          const maxPreviews = 5;
+          const filesToPreview = filesList.slice(0, maxPreviews);
+
+          filesToPreview.forEach(file => {
+            const previewItem = document.createElement('div');
+            // Added dark mode classes and adjusted structure
+            previewItem.className = 'file-preview-item mb-2 p-2 border rounded dark:border-gray-600 bg-white dark:bg-gray-700';
+
+            if (file.type.startsWith('image/')) {
+              const reader = new FileReader();
+              reader.onload = (e) => {
+                previewItem.innerHTML = `
+                  <div class="flex items-center w-full">
+                    <div class="w-12 h-12 flex-shrink-0 mr-2">
+                      <img src="${e.target.result}" alt="Aperçu" class="h-full w-full object-cover rounded">
+                    </div>
+                    <div class="overflow-hidden flex-grow">
+                      <p class="text-xs font-medium truncate text-gray-800 dark:text-gray-200">${escapeHtml(file.name)}</p>
+                      <p class="text-xs text-gray-500 dark:text-gray-400">${formatFileSize(file.size)}</p>
+                    </div>
+                  </div>`;
+                filePreview.appendChild(previewItem);
+              };
+              reader.onerror = () => {
+                previewItem.innerHTML = `<p class="text-red-500 dark:text-red-400 text-xs p-2">Erreur lecture image: ${escapeHtml(file.name)}</p>`;
+                filePreview.appendChild(previewItem);
+              };
+              reader.readAsDataURL(file);
+            } else {
+              previewItem.innerHTML = `
+                <div class="flex items-center w-full">
+                  <div class="w-10 h-10 flex-shrink-0 mr-2 bg-gray-100 dark:bg-gray-800 rounded flex items-center justify-center">
+                    <i class="fa-solid ${getFileIcon(file.type)} text-gray-500 dark:text-gray-400 text-lg"></i>
+                  </div>
+                  <div class="overflow-hidden flex-grow">
+                    <p class="text-xs font-medium truncate text-gray-800 dark:text-gray-200">${escapeHtml(file.name)}</p>
+                    <p class="text-xs text-gray-500 dark:text-gray-400">${formatFileSize(file.size)}</p>
+                  </div>
                 </div>`;
-              filePreview.classList.remove('hidden');
-              previewArea.classList.remove('hidden');
-            };
-            reader.onerror = () => {
-              filePreview.innerHTML = `<p class="text-red-500 text-xs text-center p-2">Erreur lecture image</p>`;
-              filePreview.classList.remove('hidden');
-              previewArea.classList.remove('hidden');
-            };
-            reader.readAsDataURL(file);
-          } else {
-            filePreview.innerHTML = `
-              <div class="flex items-center justify-center p-3">
-                <div class="bg-gray-100 dark:bg-gray-800 p-3 rounded-lg text-center">
-                  <i class="fa-solid ${getFileIcon(file.type)} text-3xl text-gray-500 dark:text-gray-400 mb-2"></i>
-                  <p class="text-xs text-gray-500 dark:text-gray-400">${formatFileSize(file.size)}</p>
-                </div>
-              </div>`;
-            filePreview.classList.remove('hidden');
-            previewArea.classList.remove('hidden');
+              filePreview.appendChild(previewItem);
+            }
+          });
+
+          // Afficher un message si d'autres fichiers ne sont pas prévisualisés
+          if (filesList.length > maxPreviews) {
+            const moreInfo = document.createElement('p');
+            moreInfo.className = 'text-xs text-gray-500 dark:text-gray-400 text-center mt-1 px-2';
+            moreInfo.textContent = `+ ${filesList.length - maxPreviews} autre${filesList.length - maxPreviews > 1 ? 's' : ''} fichier${filesList.length - maxPreviews > 1 ? 's' : ''}`;
+            filePreview.appendChild(moreInfo);
           }
+
+          filePreview.classList.remove('hidden');
+          previewArea.classList.remove('hidden');
         } else {
           clearFileInput();
         }
       });
+      // END: Replaced fileUpload event listener
+
       function getFileIcon(fileType) {
         if (!fileType) return 'fa-file';
         if (fileType.includes('pdf')) return 'fa-file-pdf';
@@ -905,14 +1002,16 @@
             setTimeout(() => adjustTextareaHeight(promptInput), 0);
           } else if (!isMobile && !e.shiftKey) {
             e.preventDefault();
-            if (!sendButton.disabled && (promptInput.value.trim() || fileUpload.files.length > 0)) {
+            // Modified condition to check filesList
+            if (!sendButton.disabled && (promptInput.value.trim() || filesList.length > 0)) {
               chatForm.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
             }
           } else if (e.shiftKey) {
             setTimeout(() => adjustTextareaHeight(promptInput), 0);
             if (isMobile) {
               e.preventDefault();
-              if (!sendButton.disabled && (promptInput.value.trim() || fileUpload.files.length > 0)) {
+              // Modified condition to check filesList
+              if (!sendButton.disabled && (promptInput.value.trim() || filesList.length > 0)) {
                 chatForm.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
               }
             }
@@ -926,19 +1025,23 @@
       });
       adjustTextareaHeight(promptInput);
 
-      // Soumission du formulaire
+      // START: Modified chatForm submit listener
       chatForm.addEventListener('submit', async (e) => {
         e.preventDefault();
         const prompt = promptInput.value.trim();
-        const file = fileUpload.files[0];
         const useWebSearch = webSearchToggle.checked;
         const useAdvanced = advancedToggle.checked;
+
         if (sendButton.disabled) return;
-        if (!prompt && !file) {
+        // Check against filesList instead of fileUpload.files
+        if (!prompt && filesList.length === 0) {
           promptInput.focus();
           return;
         }
+
         errorMessageDiv.classList.add('hidden');
+
+        // Vérification du cooldown pour le raisonnement avancé
         if (useAdvanced) {
           const now = Date.now();
           if (advancedToggleCooldownEndTime > 0 && now < advancedToggleCooldownEndTime) {
@@ -947,37 +1050,57 @@
             return;
           }
         }
+
+        // Création du message utilisateur avec potentiellement plusieurs fichiers
         let userMessageText = prompt;
-        if (file && file.name) {
-          userMessageText = prompt ? `${prompt}\n[Fichier: ${file.name}]` : `[Fichier joint: ${file.name}]`;
+        if (filesList.length > 0) {
+          const fileNames = filesList.map(f => f.name).join(', ');
+          const filesText = filesList.length === 1
+            ? `[Fichier joint: ${escapeHtml(fileNames)}]`
+            : `[${filesList.length} fichiers joints: ${escapeHtml(fileNames)}]`;
+
+          userMessageText = prompt ? `${prompt}\n${filesText}` : filesText;
         }
+
         addMessageToChat('user', userMessageText);
+
+        // Préparation des données à envoyer
         const formData = new FormData();
         formData.append('prompt', prompt);
         formData.append('web_search', useWebSearch);
         formData.append('advanced_reasoning', useAdvanced);
-        if (file) {
-          formData.append('file', file);
-        }
+
+        // Ajout de tous les fichiers au formData avec la clé 'file[]'
+        filesList.forEach(file => {
+          formData.append('file[]', file);
+        });
+
+        // Réinitialisation des champs et gestion des paramètres
         promptInput.value = '';
         adjustTextareaHeight(promptInput);
-        clearFileInput();
+        clearFileInput(); // Clears filesList as well now
+
         if (useAdvanced) {
           startAdvancedCooldownTimer();
           advancedToggle.checked = false;
         }
         webSearchToggle.checked = false;
         showLoading(true);
+
+        // Envoi de la requête et gestion de la réponse (aucun changement nécessaire ici)
         try {
           const response = await fetch(API_CHAT_ENDPOINT, { method: 'POST', body: formData });
           const data = await response.json();
           if (!response.ok) {
-            throw new Error(data.error || `Erreur serveur: ${response.status} ${response.statusText}`);
+             throw new Error(data.error || `Erreur serveur (${response.status}): ${response.statusText}`);
           }
           if (data.success && data.message) {
             addMessageToChat('assistant', data.message, true);
-          } else {
-            throw new Error(data.error || "Réponse invalide ou vide du serveur.");
+          } else if (data.error) {
+             throw new Error(data.error);
+          }
+          else {
+            throw new Error("Réponse invalide ou vide du serveur.");
           }
         } catch (error) {
           console.error("Chat Error:", error);
@@ -987,6 +1110,7 @@
           promptInput.focus();
         }
       });
+      // END: Modified chatForm submit listener
 
       // Effacement de la conversation
       clearForm.addEventListener('submit', async (e) => {
@@ -1021,7 +1145,7 @@
           clearButton.disabled = true;
           clearButton.innerHTML = '<i class="fa-solid fa-spinner fa-spin mr-1.5"></i><span class="hidden sm:inline">Effacement...</span>';
           try {
-            const response = await fetch(CLEAR_ENDPOINT, { 
+            const response = await fetch(CLEAR_ENDPOINT, {
               method: 'POST',
               headers: {
                 'X-Requested-With': 'XMLHttpRequest'
@@ -1033,6 +1157,7 @@
               messagesToRemove.forEach(el => el.remove());
               addMessageToChat('assistant', "Conversation effacée. Comment puis-je vous aider maintenant ?", true);
               errorMessageDiv.classList.add('hidden');
+              clearFileInput(); // Also clear any lingering file selections
             } else {
               throw new Error(data.error || "Impossible d'effacer la conversation.");
             }
@@ -1093,4 +1218,4 @@
     });
   </script>
 </body>
-</html>
+</html>