Update templates/index.html

templates/index.html

@@ -12,30 +12,27 @@
   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤖</text></svg>">
 
   <style>
-    /* Styles généraux */
     html, body {
-      min-height: 100vh; /* Assure que le body prend toute la hauteur */
+      min-height: 100vh;
       margin: 0;
       padding: 0;
     }
     body {
       display: flex;
-      flex-direction: column; /* Empile les enfants verticalement */
+      flex-direction: column;
       font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     }
     #chat-container {
       display: flex;
-      flex-direction: column; /* Empile les zones de message et d'input */
-      flex-grow: 1; /* Permet au conteneur de grandir pour remplir l'espace */
-      min-height: 0; /* Nécessaire pour que flex-grow fonctionne correctement dans un conteneur flex */
+      flex-direction: column;
+      flex-grow: 1;
+      min-height: 0;
     }
     #chat-messages {
-      flex-grow: 1; /* Permet à la zone de message de grandir */
-      overflow-y: auto; /* Ajoute une barre de défilement si nécessaire */
-      min-height: 0; /* Nécessaire pour le défilement correct */
+      flex-grow: 1;
+      overflow-y: auto;
+      min-height: 0;
     }
-
-    /* Barre de défilement personnalisée */
     ::-webkit-scrollbar {
       width: 8px;
     }
@@ -50,23 +47,22 @@
     ::-webkit-scrollbar-thumb:hover {
       background: #7a7a7a;
     }
-
-    /* Styles pour le rendu Markdown (Prose) */
-    #chat-messages .prose code:not(pre code) { /* Inline code */
-      background-color: #e5e7eb; /* gray-200 */
+    /* Styles pour le rendu Markdown dans le chat */
+    #chat-messages .prose code:not(pre code) {
+      background-color: #e5e7eb;
       padding: 0.2em 0.4em;
       font-size: 85%;
       border-radius: 4px;
       font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     }
-    #chat-messages .prose pre { /* Code block */
-      background-color: #f3f4f6; /* gray-100 */
+    #chat-messages .prose pre {
+      background-color: #f3f4f6;
       padding: 0.8em 1em;
       border-radius: 6px;
-      overflow-x: auto; /* Horizontal scroll for long code lines */
-      font-size: 0.875rem; /* text-sm */
+      overflow-x: auto;
+      font-size: 0.875rem;
     }
-    #chat-messages .prose pre code { /* Code inside block */
+    #chat-messages .prose pre code {
       background-color: transparent;
       padding: 0;
       font-size: inherit;
@@ -74,43 +70,39 @@
       color: inherit;
     }
     #chat-messages .prose blockquote {
-      border-left-color: #9ca3af; /* gray-400 */
-      color: #4b5563; /* gray-600 */
+      border-left-color: #9ca3af;
+      color: #4b5563;
     }
     #chat-messages .prose strong {
-      color: #1f2937; /* gray-800 */
+      color: #1f2937;
     }
     #chat-messages .prose a {
-      color: #2563eb; /* blue-600 */
+      color: #2563eb;
       text-decoration: underline;
-      text-decoration-color: #93c5fd; /* blue-300 */
+      text-decoration-color: #93c5fd;
       transition: color 0.2s ease;
     }
     #chat-messages .prose a:hover {
-      color: #1d4ed8; /* blue-700 */
-      text-decoration-color: #60a5fa; /* blue-400 */
+      color: #1d4ed8;
+      text-decoration-color: #60a5fa;
     }
-
-    /* Indicateur de chargement */
     #history-loading {
       padding: 20px;
       text-align: center;
-      color: #6b7280; /* gray-500 */
+      color: #6b7280;
       font-style: italic;
     }
-
     /* Zone de prévisualisation des images */
     #file-preview {
       margin-top: 8px;
     }
     #file-preview img {
-      max-width: 100%; /* Empêche l'image de dépasser */
-      max-height: 150px; /* Limite la hauteur */
-      border: 1px solid #ddd; /* gray-300 */
+      max-width: 100%;
+      max-height: 150px;
+      border: 1px solid #ddd;
       border-radius: 4px;
       padding: 4px;
     }
-
     /* Bouton de copie (positionné en haut à droite de la bulle de réponse) */
     .copy-btn {
       position: absolute;
@@ -121,15 +113,10 @@
       border-radius: 4px;
       padding: 2px 4px;
       cursor: pointer;
-      font-size: 0.75rem; /* text-xs */
-      display: none; /* Caché par défaut */
-      color: #374151; /* gray-700 */
-      transition: background-color 0.2s ease;
-    }
-    .copy-btn:hover {
-        background: rgba(230, 230, 230, 0.9);
+      font-size: 0.75rem;
+      display: none;
     }
-    /* Afficher le bouton au survol de la bulle parente */
+    /* Afficher le bouton au survol de la bulle */
     .message-wrapper:hover .copy-btn {
       display: block;
     }
@@ -148,23 +135,26 @@
 
   <!-- Conteneur Principal du Chat -->
   <div id="chat-container" class="max-w-4xl w-full mx-auto bg-white shadow-xl rounded-b-lg flex flex-col flex-grow">
-
     <!-- Zone d'affichage des messages -->
     <div id="chat-messages" class="flex-grow overflow-y-auto p-4 sm:p-6 space-y-4 scroll-smooth">
-      <!-- Indicateur de chargement initial de l'historique -->
       <div id="history-loading">
         <div class="flex justify-center items-center space-x-2">
-          <svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> </svg>
+          <svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
           <span>Chargement de l'historique...</span>
         </div>
       </div>
-      <!-- Indicateur de chargement pendant la réponse de l'IA -->
-       <div id="loading-indicator" class="text-center text-gray-500 italic py-4" style="display: none;">
+      <div id="loading-indicator" class="text-center text-gray-500 italic py-4" style="display: none;">
         <div class="flex justify-center items-center space-x-2">
-           <svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> </svg>
-           <span id="loading-text">Mariam réfléchit...</span> <!-- Texte dynamique -->
+          <svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          <span>Mariam réfléchit...</span>
         </div>
-       </div>
+      </div>
     </div>
 
     <!-- Zone d'erreur -->
@@ -173,58 +163,50 @@
       <p id="error-text">Le message d'erreur détaillé ira ici.</p>
     </div>
 
-    <!-- Barre d'options, d'upload et YouTube -->
-    <div class="bg-gray-50 border-t border-gray-200 px-4 py-2 flex-shrink-0 space-y-2">
-      <!-- Ligne 1 : Toggles & Upload Fichier -->
+    <!-- Barre d'options, d'upload et de prévisualisation -->
+    <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">
-        <!-- Groupe de Toggles (Gauche) -->
-        <div class="flex items-center space-x-4">
-           <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-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> <!-- Version courte pour mobile -->
-           </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 Pro - recommandé pour vidéo, peut avoir un cooldown)">
-             <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> <!-- Version courte pour mobile -->
-             <span id="advanced-cooldown-timer" class="text-xs text-gray-500 ml-1" style="display: none;"></span> <!-- Indicateur cooldown -->
-           </label>
-        </div>
-        <!-- Upload Fichier (Droite) -->
+        <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-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-600 hover:text-blue-700 font-medium flex items-center" title="Joindre un fichier (txt, pdf, img, vidéo)">
-            <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>
-            <span class="hidden sm:inline">Fichier/Vidéo</span>
-            <input type="file" id="file_upload" name="file" class="hidden" accept=".txt,.pdf,.png,.jpg,.jpeg,.mp4,.mov,.avi,.mkv,.webm,image/*,video/*"> <!-- Input caché -->
+          <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>
+            <span class="hidden sm:inline">Fichier</span>
+            <input type="file" id="file_upload" name="file" class="hidden" accept=".txt,.pdf,.png,.jpg,.jpeg">
           </label>
-          <span id="file-name" class="text-gray-500 text-xs truncate max-w-[150px]" title=""></span> <!-- Nom du fichier -->
-          <button id="clear-file" class="text-red-500 hover:text-red-700 text-xs p-0.5 rounded focus:outline-none focus:ring-1 focus:ring-red-400" title="Retirer le fichier" style="display: none;"> <!-- Bouton pour retirer -->
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg>
+          <span id="file-name" class="text-gray-500 text-xs truncate max-w-[150px]" title=""></span>
+          <button id="clear-file" class="text-red-500 hover:text-red-700 text-xs p-0.5 rounded focus:outline-none focus:ring-1 focus:ring-red-400" title="Retirer le fichier" style="display: none;">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
           </button>
         </div>
       </div>
-
-      <!-- Ligne 2 : Input URL YouTube -->
-      <div class="flex items-center space-x-2">
-         <label for="youtube_url_input" class="text-sm font-medium text-gray-700 whitespace-nowrap">Lien YouTube:</label>
-         <input type="url" id="youtube_url_input" name="youtube_url" class="flex-grow form-input px-3 py-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent text-sm" placeholder="Collez l'URL de la vidéo YouTube ici...">
-      </div>
-
-      <!-- Notes & Prévisualisation -->
-      <p id="video-processing-note" class="text-xs text-gray-500 text-center mt-1" style="display: none;">
-         Note: Le traitement des vidéos (upload ou YouTube) peut prendre plusieurs minutes.
-       </p>
-      <div id="file-preview"></div> <!-- Zone pour prévisualiser les images -->
+      <!-- Zone de prévisualisation des images -->
+      <div id="file-preview"></div>
     </div>
 
-    <!-- Formulaire d'entrée du message principal -->
+    <!-- Formulaire d'entrée du message -->
     <form id="chat-form" class="bg-gray-100 p-3 sm:p-4 border-t border-gray-200 rounded-b-lg flex-shrink-0">
       <div class="flex items-center space-x-2 sm:space-x-3">
-        <input type="text" id="prompt" name="prompt" class="flex-grow form-input px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 shadow-sm text-sm sm:text-base" placeholder="Posez une question (optionnel si fichier/lien)..." autocomplete="off">
+        <input type="text" id="prompt" name="prompt" class="flex-grow form-input px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 shadow-sm text-sm sm:text-base" placeholder="Posez votre question à Mariam..." autocomplete="off">
         <button type="submit" id="send-button" title="Envoyer le message" class="bg-blue-500 hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold p-2 rounded-full transition duration-200 flex items-center justify-center shadow-md w-10 h-10 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
-          <!-- Icône d'envoi -->
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" /> </svg>
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
+          </svg>
         </button>
       </div>
     </form>
@@ -233,12 +215,10 @@
   <!-- Script JavaScript pour l'interaction -->
   <script>
     document.addEventListener('DOMContentLoaded', () => {
-      // --- Références aux éléments DOM ---
       const chatForm = document.getElementById('chat-form');
       const promptInput = document.getElementById('prompt');
       const chatMessages = document.getElementById('chat-messages');
       const loadingIndicator = document.getElementById('loading-indicator');
-      const loadingText = document.getElementById('loading-text');
       const historyLoadingIndicator = document.getElementById('history-loading');
       const errorMessageDiv = document.getElementById('error-message');
       const errorTextP = document.getElementById('error-text');
@@ -251,388 +231,307 @@
       const clearForm = document.getElementById('clear-form');
       const advancedToggle = document.getElementById('advanced_reasoning_toggle');
       const advancedCooldownTimerSpan = document.getElementById('advanced-cooldown-timer');
-      const videoProcessingNote = document.getElementById('video-processing-note');
-      const youtubeUrlInput = document.getElementById('youtube_url_input'); // Input YouTube
 
-      // --- Constantes & État ---
       const API_CHAT_ENDPOINT = '/api/chat';
       const API_HISTORY_ENDPOINT = '/api/history';
       const CLEAR_ENDPOINT = '/clear';
-      let advancedToggleCooldownEndTime = 0; // Timestamp de fin du cooldown
-      const COOLDOWN_DURATION = 60 * 1000; // 60 secondes en millisecondes
-
-      // --- Fonctions Utilitaires ---
 
-      // Fait défiler la zone de chat vers le bas
       function scrollToBottom() {
-        setTimeout(() => { // Léger délai pour laisser le temps au DOM de se mettre à jour
+        setTimeout(() => {
           chatMessages.scrollTop = chatMessages.scrollHeight;
         }, 50);
       }
 
-      // Affiche ou cache l'indicateur de chargement principal
-      function showLoading(show, isMediaOrYoutube = false) {
+      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) {
-          loadingText.textContent = isMediaOrYoutube
-             ? "Traitement média en cours..." // Texte si fichier ou URL YT
-             : "Mariam réfléchit...";      // Texte par défaut
           loadingIndicator.style.display = 'block';
-          chatMessages.appendChild(loadingIndicator); // Déplace l'indicateur à la fin
+          chatMessages.appendChild(loadingIndicator);
           scrollToBottom();
         } else if (!show && currentlyLoading) {
           loadingIndicator.style.display = 'none';
-          loadingText.textContent = "Mariam réfléchit..."; // Réinitialise le texte
         }
-        // Désactive les éléments pendant le chargement
         sendButton.disabled = show;
         promptInput.disabled = show;
         fileUpload.disabled = show;
         clearFileButton.disabled = show;
-        youtubeUrlInput.disabled = show; // Désactive aussi l'input YouTube
-        // Ne pas désactiver les toggles pendant le chargement normal
+        // Don't disable advanced toggle during loading, only during cooldown
       }
 
-      // Affiche un message d'erreur
       function displayError(message) {
         errorTextP.textContent = message || "Une erreur inconnue est survenue.";
-        errorMessageDiv.style.display = 'flex'; // Utilise flex pour aligner l'icône et le texte si nécessaire
-        // Fait défiler pour voir l'erreur
+        errorMessageDiv.style.display = 'flex';
         errorMessageDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
       }
 
-      // Ajoute un message (utilisateur ou assistant) à la zone de chat
       function addMessageToChat(role, text, isHtml = false) {
-         errorMessageDiv.style.display = 'none'; // Cache l'erreur précédente
-         const messageWrapper = document.createElement('div');
-         messageWrapper.classList.add('message-wrapper', 'flex', role === 'user' ? 'justify-end' : 'justify-start', 'mb-4');
-
-         const bubbleDiv = document.createElement('div');
-         bubbleDiv.classList.add('p-3', 'rounded-lg', 'max-w-[85%]', 'sm:max-w-[75%]', 'shadow-md', 'relative'); // `relative` pour le bouton copier
-
-         if (role === 'user') {
-           // Style pour les messages utilisateur
-           bubbleDiv.classList.add('bg-blue-500', 'text-white', 'rounded-br-none');
-           const paragraph = document.createElement('p');
-           // `break-words` pour couper les mots longs, `whitespace-pre-wrap` pour conserver les sauts de ligne de l'utilisateur
-           paragraph.classList.add('text-sm', 'sm:text-base', 'break-words', 'whitespace-pre-wrap');
-           paragraph.textContent = text;
-           bubbleDiv.appendChild(paragraph);
-         } else {
-           // Style pour les messages de l'assistant
-           bubbleDiv.classList.add('bg-gray-100', 'text-gray-800', 'rounded-bl-none', 'border', 'border-gray-200');
-           // Conteneur pour le contenu formaté en Markdown/HTML
-           const proseDiv = document.createElement('div');
-           proseDiv.classList.add('prose', 'prose-sm', 'sm:prose-base', 'max-w-none', 'text-gray-800', 'prose-headings:font-semibold', 'prose-headings:text-gray-800', 'prose-a:text-blue-600', 'prose-a:no-underline', 'hover:prose-a:underline', 'prose-strong:text-gray-800', 'prose-code:text-red-600', 'prose-code:font-mono', 'prose-blockquote:text-gray-600', 'break-words');
-           if (isHtml) {
-             proseDiv.innerHTML = text; // Injecte le HTML si fourni
-           } else {
-             proseDiv.textContent = text; // Sinon, texte brut
-           }
-           bubbleDiv.appendChild(proseDiv);
-
-           // Ajout du bouton de copie
-           const copyBtn = document.createElement('button');
-           copyBtn.textContent = 'Copier';
-           copyBtn.classList.add('copy-btn');
-           copyBtn.title = "Copier la réponse";
-           copyBtn.addEventListener('click', (e) => {
-               e.stopPropagation(); // Empêche le clic de se propager
-               e.preventDefault();
-               // Copie le texte brut (innerText) même si c'est du HTML
-               let textToCopy = proseDiv.innerText || text; // Fallback au texte original
-               navigator.clipboard.writeText(textToCopy)
-                 .then(() => {
-                   copyBtn.textContent = 'Copié'; // Confirmation visuelle
-                   setTimeout(() => { copyBtn.textContent = 'Copier'; }, 2000); // Revient à l'état initial après 2s
-                 })
-                 .catch(err => {
-                   console.error('Erreur lors de la copie :', err);
-                   // Optionnel : Afficher une petite erreur près du bouton
-                 });
-           });
-           bubbleDiv.appendChild(copyBtn);
-         }
-
-         messageWrapper.appendChild(bubbleDiv);
-         // Insère le nouveau message AVANT l'indicateur de chargement s'il est visible
-         if (loadingIndicator.parentNode === chatMessages) {
-            chatMessages.insertBefore(messageWrapper, loadingIndicator);
-         } else {
-            chatMessages.appendChild(messageWrapper); // Sinon, ajoute à la fin
-         }
-
-         // Ne fait défiler que si l'historique n'est pas en cours de chargement (pour éviter les sauts)
-         if (historyLoadingIndicator.style.display === 'none') {
-           scrollToBottom();
-         }
+        errorMessageDiv.style.display = 'none';
+        const messageWrapper = document.createElement('div');
+        messageWrapper.classList.add('message-wrapper', 'flex', role === 'user' ? 'justify-end' : 'justify-start', 'mb-4');
+
+        const bubbleDiv = document.createElement('div');
+        bubbleDiv.classList.add('p-3', 'rounded-lg', 'max-w-[85%]', 'sm:max-w-[75%]', 'shadow-md', 'relative');
+
+        if (role === 'user') {
+          bubbleDiv.classList.add('bg-blue-500', 'text-white', 'rounded-br-none');
+          const paragraph = document.createElement('p');
+          paragraph.classList.add('text-sm', 'sm:text-base', 'break-words');
+          paragraph.textContent = text;
+          bubbleDiv.appendChild(paragraph);
+        } else {
+          bubbleDiv.classList.add('bg-gray-100', 'text-gray-800', 'rounded-bl-none', 'border', 'border-gray-200');
+          const proseDiv = document.createElement('div');
+          proseDiv.classList.add('prose', 'prose-sm', 'sm:prose-base', 'max-w-none', 'text-gray-800', 'prose-headings:font-semibold', 'prose-headings:text-gray-800', 'prose-a:text-blue-600', 'prose-a:no-underline', 'hover:prose-a:underline', 'prose-strong:text-gray-800', 'prose-code:text-red-600', 'prose-code:font-mono', 'prose-blockquote:text-gray-600', 'break-words');
+          if (isHtml) {
+            proseDiv.innerHTML = text;
+          } else {
+            proseDiv.textContent = text;
+          }
+          bubbleDiv.appendChild(proseDiv);
+
+          // Ajout du bouton de copie
+          const copyBtn = document.createElement('button');
+          copyBtn.textContent = 'Copier';
+          copyBtn.classList.add('copy-btn');
+          copyBtn.title = "Copier la réponse";
+          copyBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            // Copier le texte sans le bouton
+            let textToCopy = '';
+            if (isHtml) {
+              textToCopy = proseDiv.innerText;
+            } else {
+              textToCopy = text;
+            }
+            navigator.clipboard.writeText(textToCopy)
+              .then(() => {
+                copyBtn.textContent = 'Copié';
+                setTimeout(() => {
+                  copyBtn.textContent = 'Copier';
+                }, 2000);
+              })
+              .catch(err => {
+                console.error('Erreur lors de la copie :', err);
+              });
+          });
+          bubbleDiv.appendChild(copyBtn);
+        }
+
+        messageWrapper.appendChild(bubbleDiv);
+        chatMessages.insertBefore(messageWrapper, loadingIndicator);
+        if (historyLoadingIndicator.parentNode !== chatMessages) {
+          scrollToBottom();
+        }
       }
 
-      // Démarre le minuteur pour le cooldown du raisonnement avancé
       function startAdvancedCooldownTimer() {
-        advancedToggle.disabled = true; // Désactive le toggle
+        advancedToggle.disabled = true; // Disable toggle during cooldown
         advancedToggleCooldownEndTime = Date.now() + COOLDOWN_DURATION;
 
         const updateTimer = () => {
             const now = Date.now();
             if (now >= advancedToggleCooldownEndTime) {
-                // Fin du cooldown
                 clearInterval(intervalId);
                 advancedCooldownTimerSpan.style.display = 'none';
-                advancedToggle.disabled = false; // Réactive le toggle
-                advancedToggleCooldownEndTime = 0;
+                advancedToggle.disabled = false;
+                advancedToggleCooldownEndTime = 0; // Reset cooldown end time
             } else {
-                // Met à jour le temps restant
                 const remainingSeconds = Math.ceil((advancedToggleCooldownEndTime - now) / 1000);
                 advancedCooldownTimerSpan.textContent = `(${remainingSeconds}s)`;
                 advancedCooldownTimerSpan.style.display = 'inline';
             }
         };
 
-        const intervalId = setInterval(updateTimer, 1000); // Met à jour toutes les secondes
-        updateTimer(); // Appel initial pour afficher immédiatement
+        const intervalId = setInterval(updateTimer, 1000);
+        updateTimer(); // Initial call to display immediately
       }
 
-      // Charge l'historique de chat depuis le serveur
       async function loadChatHistory() {
-        historyLoadingIndicator.style.display = 'block'; // Affiche le chargement de l'historique
+        historyLoadingIndicator.style.display = 'block';
         try {
           const response = await fetch(API_HISTORY_ENDPOINT);
           if (!response.ok) {
-             let errorMsg = `Erreur serveur (${response.status})`;
-             try { errorMsg = (await response.json()).error || errorMsg; } catch(e){}
-             throw new Error(errorMsg);
+            let errorMsg = `Erreur serveur (${response.status})`;
+            try {
+              const errData = await response.json();
+              errorMsg = errData.error || errorMsg;
+            } catch (e) { }
+            throw new Error(errorMsg);
           }
           const data = await response.json();
           if (data.success && Array.isArray(data.history)) {
-            chatMessages.innerHTML = ''; // Vide la zone de chat avant d'ajouter l'historique
-            chatMessages.appendChild(loadingIndicator); // Ré-ajoute le template de chargement (caché)
-            loadingIndicator.style.display = 'none'; // S'assure qu'il est caché
-
+            chatMessages.innerHTML = '';
+            chatMessages.appendChild(loadingIndicator);
+            loadingIndicator.style.display = 'none';
             if (data.history.length === 0) {
-              // Message d'accueil si l'historique est vide
-              addMessageToChat('assistant', "Bonjour ! Posez une question, joignez un fichier/vidéo ou collez un lien YouTube.");
+              addMessageToChat('assistant', "Bonjour ! Comment puis-je vous aider aujourd'hui ?");
             } else {
-              // Ajoute chaque message de l'historique
               data.history.forEach(message => {
-                 const isAssistantHtml = message.role === 'assistant'; // Les messages de l'assistant sont en HTML
-                 addMessageToChat(message.role, message.text, isAssistantHtml);
-               });
+                const isAssistantHtml = message.role === 'assistant';
+                addMessageToChat(message.role, message.text, isAssistantHtml);
+              });
             }
-            scrollToBottom(); // Fait défiler vers le bas après avoir chargé l'historique
+            scrollToBottom();
           } else {
             throw new Error(data.error || "Format de réponse de l'historique invalide.");
           }
         } catch (error) {
-          // En cas d'erreur de chargement, vide quand même et affiche l'erreur
           chatMessages.innerHTML = '';
           chatMessages.appendChild(loadingIndicator);
           loadingIndicator.style.display = 'none';
           displayError(`Impossible de charger l'historique: ${error.message}`);
         } finally {
-           // Supprime définitivement l'indicateur de chargement de l'historique
-           const histLoadingElement = document.getElementById('history-loading');
-           if (histLoadingElement) { histLoadingElement.remove(); }
-           promptInput.focus(); // Met le focus sur l'input principal
+          if (historyLoadingIndicator.parentNode === chatMessages) {
+            historyLoadingIndicator.remove();
+          }
+          promptInput.focus();
         }
       }
 
-      // Réinitialise l'input de fichier et la prévisualisation
       function clearFileInput() {
-        fileUpload.value = ''; // Vide la valeur de l'input file
-        fileNameSpan.textContent = ''; // Vide le nom affiché
-        fileNameSpan.title = ''; // Vide le title (tooltip)
-        clearFileButton.style.display = 'none'; // Cache le bouton de suppression
-        filePreview.innerHTML = ''; // Vide la zone de prévisualisation
-        videoProcessingNote.style.display = 'none'; // Cache la note sur le temps de traitement
+        fileUpload.value = '';
+        fileNameSpan.textContent = '';
+        fileNameSpan.title = '';
+        clearFileButton.style.display = 'none';
+        filePreview.innerHTML = '';
       }
 
-      // --- Écouteurs d'Événements ---
-
-      // Changement dans l'input de fichier
       fileUpload.addEventListener('change', () => {
         if (fileUpload.files.length > 0) {
           const file = fileUpload.files[0];
           const name = file.name;
-          // Affiche le nom du fichier (tronqué si trop long)
           fileNameSpan.textContent = name.length > 20 ? name.substring(0, 17) + '...' : name;
-          fileNameSpan.title = name; // Nom complet en tooltip
-          clearFileButton.style.display = 'inline-block'; // Affiche le bouton de suppression
-          filePreview.innerHTML = ''; // Vide la prévisualisation précédente
-          videoProcessingNote.style.display = 'none'; // Cache la note
-
-          // Efface l'input YouTube si un fichier est sélectionné (priorité au fichier)
-          youtubeUrlInput.value = '';
-
-          // Affiche une prévisualisation si c'est une image
+          fileNameSpan.title = name;
+          clearFileButton.style.display = 'inline-block';
+          // Si le fichier est une image, afficher la prévisualisation
           if (file.type.startsWith('image/')) {
             const reader = new FileReader();
-            reader.onload = (e) => { filePreview.innerHTML = `<img src="${e.target.result}" alt="Prévisualisation">`; };
+            reader.onload = (e) => {
+              filePreview.innerHTML = `<img src="${e.target.result}" alt="Prévisualisation de l'image">`;
+            };
             reader.readAsDataURL(file);
-          } else if (file.type.startsWith('video/')) {
-             // Affiche un texte simple pour les vidéos et la note sur le temps
-             filePreview.innerHTML = `<p class="text-xs text-gray-500 italic">Fichier vidéo sélectionné.</p>`;
-             videoProcessingNote.style.display = 'block';
+          } else {
+            filePreview.innerHTML = '';
           }
         } else {
-          // Si aucun fichier n'est sélectionné (ou annulé), réinitialise
           clearFileInput();
         }
       });
 
-      // Saisie dans l'input YouTube
-       youtubeUrlInput.addEventListener('input', () => {
-           if (youtubeUrlInput.value.trim() !== '') {
-               // Si l'utilisateur saisit une URL, efface l'input fichier (priorité à l'URL)
-               clearFileInput();
-               videoProcessingNote.style.display = 'block'; // Affiche la note pour les URL aussi
-           } else {
-               // Si l'input URL est vidé, cache la note
-               videoProcessingNote.style.display = 'none';
-           }
-       });
-
-      // Clic sur le bouton pour retirer le fichier
       clearFileButton.addEventListener('click', () => {
         clearFileInput();
       });
 
-      // Soumission du formulaire de chat principal
       chatForm.addEventListener('submit', async (e) => {
-        e.preventDefault(); // Empêche la soumission classique du formulaire
-
-        // Récupère les valeurs des inputs et toggles
+        e.preventDefault();
         const prompt = promptInput.value.trim();
         const file = fileUpload.files[0];
-        const youtubeUrl = youtubeUrlInput.value.trim();
         const useWebSearch = webSearchToggle.checked;
         const useAdvanced = advancedToggle.checked;
 
-        // Validation : il faut au moins un fichier, une URL YouTube ou un prompt texte
-        if (!file && !youtubeUrl && !prompt) {
-          displayError("Veuillez fournir un message, un fichier/vidéo ou un lien YouTube.");
+        if (!prompt && !file) {
+          displayError("Veuillez entrer un message ou sélectionner un fichier.");
           promptInput.focus();
-          return; // Arrête l'exécution si rien n'est fourni
+          return;
         }
-        errorMessageDiv.style.display = 'none'; // Cache les erreurs précédentes
+        errorMessageDiv.style.display = 'none';
 
-        // Vérifie le cooldown pour le raisonnement avancé
+        // --- 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; // Arrête si en cooldown
+                const remainingSeconds = Math.ceil((advancedToggleCooldownEndTime - now) / 1000);
+                displayError(`Le raisonnement avancé est disponible dans ${remainingSeconds} seconde(s).`);
+                return; // Stop submission
             }
-            // Si la vérification passe, le cooldown sera démarré APRÈS la soumission réussie
+            // If check passes, cooldown will be started AFTER successful submission trigger
         }
+        // --- End Cooldown Check ---
 
-        // Détermine si la requête concerne un média (fichier ou URL)
-        let isMediaInput = !!file || !!youtubeUrl;
-
-        // Construit le message à afficher pour l'utilisateur
         let userMessageText = prompt;
-        if (file) { // Priorité au fichier pour l'affichage
-            userMessageText = prompt ? `[${file.name}] ${prompt}` : `[${file.name}]`;
-        } else if (youtubeUrl) { // Sinon, URL YouTube
-            // Affiche "[YouTube]" suivi du prompt (si existe) et de l'URL sur une nouvelle ligne
-            userMessageText = `[YouTube]${prompt ? ` ${prompt}` : ''}\n${youtubeUrl}`;
+        if (file && file.name) {
+          userMessageText = prompt ? `[${file.name}] ${prompt}` : `[${file.name}]`;
         }
-        addMessageToChat('user', userMessageText); // Ajoute le message utilisateur au chat
-
-        // Prépare les données à envoyer au serveur
+        addMessageToChat('user', userMessageText);
         const formData = new FormData();
         formData.append('prompt', prompt);
         formData.append('web_search', useWebSearch);
         if (file) {
-            formData.append('file', file); // Ajoute le fichier s'il existe
+            formData.append('file', file);
         }
-        formData.append('youtube_url', youtubeUrl); // Ajoute l'URL YouTube (même si vide)
+        // Add the advanced reasoning flag
         formData.append('advanced_reasoning', useAdvanced);
 
-        // Affiche l'indicateur de chargement (avec texte spécifique si média)
-        showLoading(true, isMediaInput);
-        // Réinitialise les inputs après avoir récupéré leurs valeurs
+        showLoading(true);
         promptInput.value = '';
-        clearFileInput(); // Réinitialise aussi l'upload fichier
-        youtubeUrlInput.value = ''; // Réinitialise l'input YouTube
-        videoProcessingNote.style.display = 'none'; // Cache la note
+        clearFileInput();
 
-        // Réinitialise le toggle avancé et démarre le cooldown s'il a été utilisé
-        advancedToggle.checked = false;
-        if (useAdvanced) startAdvancedCooldownTimer();
+        // 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
 
-        // --- Appel API au backend ---
         try {
           const response = await fetch(API_CHAT_ENDPOINT, {
             method: 'POST',
-            body: formData, // Envoie les données du formulaire
+            body: formData,
           });
-          const data = await response.json(); // Attend la réponse JSON
-
-          // Gère les erreurs HTTP ou les erreurs retournées par l'API
+          const data = await response.json();
           if (!response.ok) {
             throw new Error(data.error || `Erreur serveur: ${response.status}`);
           }
-          // Si la réponse est OK et contient un message
           if (data.success && data.message) {
-            addMessageToChat('assistant', data.message, true); // Ajoute la réponse de l'assistant (HTML)
+            addMessageToChat('assistant', data.message, true);
           } else {
-            // Si la réponse est OK mais le format est incorrect
             throw new Error(data.error || "Réponse invalide ou vide du serveur.");
           }
         } catch (error) {
-          // Affiche l'erreur à l'utilisateur
           displayError(error.message);
-          // Optionnel : Gérer l'annulation du cooldown en cas d'erreur API ?
+          if (useAdvanced) { /* Maybe revert cooldown if API fails? */ } // Optional: more complex error handling
         } finally {
-          // Cache l'indicateur de chargement dans tous les cas (succès ou erreur)
           showLoading(false);
-          promptInput.focus(); // Remet le focus sur l'input principal
+          promptInput.focus();
         }
       });
 
-      // Soumission du formulaire pour effacer le chat
       clearForm.addEventListener('submit', async (e) => {
-         e.preventDefault();
-         if (confirm("Êtes-vous sûr de vouloir effacer toute la conversation ?")) {
-            const btn = e.target.querySelector('button');
-            const originalText = btn.textContent;
-            btn.textContent = '...'; // Indique le traitement
-            btn.disabled = true;
-            try {
-                // Envoie une requête POST pour effacer côté serveur
-                const response = await fetch(CLEAR_ENDPOINT, {
-                   method: 'POST',
-                   headers: { 'X-Requested-With': 'XMLHttpRequest' } // Pour identifier comme requête AJAX côté serveur si nécessaire
-                });
-                const data = await response.json();
-                if (response.ok && data.success) {
-                    // Si succès, vide le chat localement et affiche un message
-                    chatMessages.innerHTML = '';
-                    chatMessages.appendChild(loadingIndicator); // Ré-ajoute le template
-                    loadingIndicator.style.display = 'none';
-                    addMessageToChat('assistant', "Conversation effacée. Comment puis-je vous aider ?");
-                    errorMessageDiv.style.display = 'none'; // Cache les erreurs précédentes
-                } else {
-                    // Si erreur côté serveur
-                    throw new Error(data.error || "Impossible d'effacer côté serveur.");
-                }
-            } catch (error) {
-                // Affiche l'erreur si l'effacement échoue
-                displayError(`Erreur lors de l'effacement du chat: ${error.message}`);
-            } finally {
-                // Réactive le bouton dans tous les cas
-                btn.textContent = originalText;
-                btn.disabled = false;
-                promptInput.focus();
+        e.preventDefault();
+        if (confirm("Êtes-vous sûr de vouloir effacer toute la conversation ?")) {
+          const originalButtonText = e.target.querySelector('button').textContent;
+          e.target.querySelector('button').textContent = '...';
+          e.target.querySelector('button').disabled = true;
+          try {
+            const response = await fetch(CLEAR_ENDPOINT, {
+              method: 'POST',
+              headers: {
+                'X-Requested-With': 'XMLHttpRequest'
+              }
+            });
+            const data = await response.json();
+            if (response.ok && data.success) {
+              chatMessages.innerHTML = '';
+              chatMessages.appendChild(loadingIndicator);
+              loadingIndicator.style.display = 'none';
+              addMessageToChat('assistant', "Conversation effacée. Comment puis-je vous aider ?");
+              errorMessageDiv.style.display = 'none';
+            } else {
+              throw new Error(data.error || "Impossible d'effacer côté serveur.");
             }
-         }
+          } catch (error) {
+            displayError(`Erreur lors de l'effacement du chat: ${error.message}`);
+          } finally {
+            e.target.querySelector('button').textContent = originalButtonText;
+            e.target.querySelector('button').disabled = false;
+            promptInput.focus();
+          }
+        }
       });
 
-      // --- Chargement Initial ---
-      loadChatHistory(); // Charge l'historique au démarrage de la page
-
+      loadChatHistory();
     });
   </script>
 </body>