Update templates/index.html

templates/index.html

@@ -167,12 +167,20 @@
     <div class="bg-gray-50 border-t border-gray-200 px-4 py-2 flex-shrink-0">
       <div class="flex items-center justify-between text-sm">
         <label for="web_search_toggle" class="flex items-center space-x-2 cursor-pointer text-gray-600 hover:text-gray-800 select-none" title="Activer/Désactiver la recherche web pour le prochain message">
-          <input type="checkbox" id="web_search_toggle" name="web_search" value="true" class="form-checkbox h-4 w-4 rounded text-blue-500 focus:ring-blue-400 focus:ring-offset-0 border-gray-300">
+          <input type="checkbox" id="web_search_toggle" name="web_search" value="true" class="form-checkbox h-4 w-4 rounded text-blue-600 focus:ring-blue-500 focus:ring-offset-0 border-gray-300">
           <span class="hidden sm:inline">Recherche Web</span>
           <span class="sm:hidden">Web</span>
         </label>
+
+        <label for="advanced_reasoning_toggle" class="flex items-center space-x-2 cursor-pointer text-purple-600 hover:text-purple-800 select-none" title="Utiliser le raisonnement avancé (Gemini 1.5 Pro - 1 fois/min)">
+          <input type="checkbox" id="advanced_reasoning_toggle" name="advanced_reasoning" value="true" class="form-checkbox h-4 w-4 rounded text-purple-600 focus:ring-purple-500 focus:ring-offset-0 border-gray-300">
+          <span class="hidden sm:inline">Raisonnement Avancé</span>
+          <span class="sm:hidden">Avancé</span>
+          <span id="advanced-cooldown-timer" class="text-xs text-gray-500 ml-1" style="display: none;"></span>
+        </label>
+
         <div class="flex items-center space-x-2">
-          <label for="file_upload" class="cursor-pointer text-blue-500 hover:text-blue-700 font-medium flex items-center" title="Joindre un fichier (txt, pdf, png, jpg)">
+          <label for="file_upload" class="cursor-pointer text-blue-600 hover:text-blue-700 font-medium flex items-center" title="Joindre un fichier (txt, pdf, png, jpg)">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
               <path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
             </svg>
@@ -221,6 +229,8 @@
       const filePreview = document.getElementById('file-preview');
       const sendButton = document.getElementById('send-button');
       const clearForm = document.getElementById('clear-form');
+      const advancedToggle = document.getElementById('advanced_reasoning_toggle');
+      const advancedCooldownTimerSpan = document.getElementById('advanced-cooldown-timer');
 
       const API_CHAT_ENDPOINT = '/api/chat';
       const API_HISTORY_ENDPOINT = '/api/history';
@@ -232,6 +242,9 @@
         }, 50);
       }
 
+      let advancedToggleCooldownEndTime = 0; // Timestamp when cooldown ends
+      const COOLDOWN_DURATION = 60 * 1000; // 60 seconds in milliseconds
+
       function showLoading(show) {
         const currentlyLoading = loadingIndicator.style.display !== 'none';
         if (show && !currentlyLoading) {
@@ -245,6 +258,7 @@
         promptInput.disabled = show;
         fileUpload.disabled = show;
         clearFileButton.disabled = show;
+        // Don't disable advanced toggle during loading, only during cooldown
       }
 
       function displayError(message) {
@@ -314,6 +328,28 @@
         }
       }
 
+      function startAdvancedCooldownTimer() {
+        advancedToggle.disabled = true; // Disable toggle during cooldown
+        advancedToggleCooldownEndTime = Date.now() + COOLDOWN_DURATION;
+
+        const updateTimer = () => {
+            const now = Date.now();
+            if (now >= advancedToggleCooldownEndTime) {
+                clearInterval(intervalId);
+                advancedCooldownTimerSpan.style.display = 'none';
+                advancedToggle.disabled = false;
+                advancedToggleCooldownEndTime = 0; // Reset cooldown end time
+            } else {
+                const remainingSeconds = Math.ceil((advancedToggleCooldownEndTime - now) / 1000);
+                advancedCooldownTimerSpan.textContent = `(${remainingSeconds}s)`;
+                advancedCooldownTimerSpan.style.display = 'inline';
+            }
+        };
+
+        const intervalId = setInterval(updateTimer, 1000);
+        updateTimer(); // Initial call to display immediately
+      }
+
       async function loadChatHistory() {
         historyLoadingIndicator.style.display = 'block';
         try {
@@ -395,14 +431,29 @@
         const prompt = promptInput.value.trim();
         const file = fileUpload.files[0];
         const useWebSearch = webSearchToggle.checked;
+        const useAdvanced = advancedToggle.checked;
+
         if (!prompt && !file) {
           displayError("Veuillez entrer un message ou sélectionner un fichier.");
           promptInput.focus();
           return;
         }
         errorMessageDiv.style.display = 'none';
+
+        // --- Cooldown Check for Advanced Reasoning ---
+        if (useAdvanced) {
+            const now = Date.now();
+            if (now < advancedToggleCooldownEndTime) {
+                const remainingSeconds = Math.ceil((advancedToggleCooldownEndTime - now) / 1000);
+                displayError(`Le raisonnement avancé est disponible dans ${remainingSeconds} seconde(s).`);
+                return; // Stop submission
+            }
+            // If check passes, cooldown will be started AFTER successful submission trigger
+        }
+        // --- End Cooldown Check ---
+
         let userMessageText = prompt;
-        if (file) {
+        if (file && file.name) {
           userMessageText = prompt ? `[${file.name}] ${prompt}` : `[${file.name}]`;
         }
         addMessageToChat('user', userMessageText);
@@ -410,11 +461,20 @@
         formData.append('prompt', prompt);
         formData.append('web_search', useWebSearch);
         if (file) {
-          formData.append('file', file);
+            formData.append('file', file);
         }
+        // Add the advanced reasoning flag
+        formData.append('advanced_reasoning', useAdvanced);
+
         showLoading(true);
         promptInput.value = '';
         clearFileInput();
+
+        // Reset toggles for next message (Web Search stays, Advanced resets and starts cooldown if used)
+        // webSearchToggle.checked = false; // Decide if you want this to reset
+        advancedToggle.checked = false; // Always reset advanced toggle
+        if (useAdvanced) startAdvancedCooldownTimer(); // Start cooldown *now* as we are sending the request
+
         try {
           const response = await fetch(API_CHAT_ENDPOINT, {
             method: 'POST',
@@ -431,6 +491,7 @@
           }
         } catch (error) {
           displayError(error.message);
+          if (useAdvanced) { /* Maybe revert cooldown if API fails? */ } // Optional: more complex error handling
         } finally {
           showLoading(false);
           promptInput.focus();
@@ -474,4 +535,4 @@
     });
   </script>
 </body>
-</html>
+</html>