Update templates/index.html

templates/index.html

@@ -12,27 +12,30 @@
   <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;
+      min-height: 100vh; /* Assure que le body prend toute la hauteur */
       margin: 0;
       padding: 0;
     }
     body {
       display: flex;
-      flex-direction: column;
+      flex-direction: column; /* Empile les enfants verticalement */
       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;
-      flex-grow: 1;
-      min-height: 0;
+      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 */
     }
     #chat-messages {
-      flex-grow: 1;
-      overflow-y: auto;
-      min-height: 0;
+      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 */
     }
+
+    /* Barre de défilement personnalisée */
     ::-webkit-scrollbar {
       width: 8px;
     }
@@ -47,22 +50,23 @@
     ::-webkit-scrollbar-thumb:hover {
       background: #7a7a7a;
     }
-    /* Styles pour le rendu Markdown dans le chat */
-    #chat-messages .prose code:not(pre code) {
-      background-color: #e5e7eb;
+
+    /* Styles pour le rendu Markdown (Prose) */
+    #chat-messages .prose code:not(pre code) { /* Inline code */
+      background-color: #e5e7eb; /* gray-200 */
       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 {
-      background-color: #f3f4f6;
+    #chat-messages .prose pre { /* Code block */
+      background-color: #f3f4f6; /* gray-100 */
       padding: 0.8em 1em;
       border-radius: 6px;
-      overflow-x: auto;
-      font-size: 0.875rem;
+      overflow-x: auto; /* Horizontal scroll for long code lines */
+      font-size: 0.875rem; /* text-sm */
     }
-    #chat-messages .prose pre code {
+    #chat-messages .prose pre code { /* Code inside block */
       background-color: transparent;
       padding: 0;
       font-size: inherit;
@@ -70,39 +74,43 @@
       color: inherit;
     }
     #chat-messages .prose blockquote {
-      border-left-color: #9ca3af;
-      color: #4b5563;
+      border-left-color: #9ca3af; /* gray-400 */
+      color: #4b5563; /* gray-600 */
     }
     #chat-messages .prose strong {
-      color: #1f2937;
+      color: #1f2937; /* gray-800 */
     }
     #chat-messages .prose a {
-      color: #2563eb;
+      color: #2563eb; /* blue-600 */
       text-decoration: underline;
-      text-decoration-color: #93c5fd;
+      text-decoration-color: #93c5fd; /* blue-300 */
       transition: color 0.2s ease;
     }
     #chat-messages .prose a:hover {
-      color: #1d4ed8;
-      text-decoration-color: #60a5fa;
+      color: #1d4ed8; /* blue-700 */
+      text-decoration-color: #60a5fa; /* blue-400 */
     }
+
+    /* Indicateur de chargement */
     #history-loading {
       padding: 20px;
       text-align: center;
-      color: #6b7280;
+      color: #6b7280; /* gray-500 */
       font-style: italic;
     }
+
     /* Zone de prévisualisation des images */
     #file-preview {
       margin-top: 8px;
     }
     #file-preview img {
-      max-width: 100%;
-      max-height: 150px;
-      border: 1px solid #ddd;
+      max-width: 100%; /* Empêche l'image de dépasser */
+      max-height: 150px; /* Limite la hauteur */
+      border: 1px solid #ddd; /* gray-300 */
       border-radius: 4px;
       padding: 4px;
     }
+
     /* Bouton de copie (positionné en haut à droite de la bulle de réponse) */
     .copy-btn {
       position: absolute;
@@ -113,10 +121,15 @@
       border-radius: 4px;
       padding: 2px 4px;
       cursor: pointer;
-      font-size: 0.75rem;
-      display: none;
+      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);
     }
-    /* Afficher le bouton au survol de la bulle */
+    /* Afficher le bouton au survol de la bulle parente */
     .message-wrapper:hover .copy-btn {
       display: block;
     }
@@ -135,26 +148,23 @@
 
   <!-- 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>
-      <div id="loading-indicator" class="text-center text-gray-500 italic py-4" style="display: none;">
+      <!-- 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 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>Mariam réfléchit...</span>
+           <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 -->
         </div>
-      </div>
+       </div>
     </div>
 
     <!-- Zone d'erreur -->
@@ -163,50 +173,58 @@
       <p id="error-text">Le message d'erreur détaillé ira ici.</p>
     </div>
 
-    <!-- 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">
+    <!-- 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 -->
       <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-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>
-
+        <!-- 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) -->
         <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, 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 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>
-          <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>
+          <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>
           </button>
         </div>
       </div>
-      <!-- Zone de prévisualisation des images -->
-      <div id="file-preview"></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 -->
     </div>
 
-    <!-- Formulaire d'entrée du message -->
+    <!-- Formulaire d'entrée du message principal -->
     <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 votre question à Mariam..." 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 une question (optionnel si fichier/lien)..." 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">
-          <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>
+          <!-- 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>
         </button>
       </div>
     </form>
@@ -215,10 +233,12 @@
   <!-- 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');
@@ -231,307 +251,388 @@
       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(() => {
+        setTimeout(() => { // Léger délai pour laisser le temps au DOM de se mettre à jour
           chatMessages.scrollTop = chatMessages.scrollHeight;
         }, 50);
       }
 
-      let advancedToggleCooldownEndTime = 0; // Timestamp when cooldown ends
-      const COOLDOWN_DURATION = 60 * 1000; // 60 seconds in milliseconds
-
-      function showLoading(show) {
+      // Affiche ou cache l'indicateur de chargement principal
+      function showLoading(show, isMediaOrYoutube = false) {
         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);
+          chatMessages.appendChild(loadingIndicator); // Déplace l'indicateur à la fin
           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;
-        // Don't disable advanced toggle during loading, only during cooldown
+        youtubeUrlInput.disabled = show; // Désactive aussi l'input YouTube
+        // Ne pas désactiver les toggles pendant le chargement normal
       }
 
+      // Affiche un message d'erreur
       function displayError(message) {
         errorTextP.textContent = message || "Une erreur inconnue est survenue.";
-        errorMessageDiv.style.display = 'flex';
+        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.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';
-        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();
-        }
+         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();
+         }
       }
 
+      // Démarre le minuteur pour le cooldown du raisonnement avancé
       function startAdvancedCooldownTimer() {
-        advancedToggle.disabled = true; // Disable toggle during cooldown
+        advancedToggle.disabled = true; // Désactive le toggle
         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;
-                advancedToggleCooldownEndTime = 0; // Reset cooldown end time
+                advancedToggle.disabled = false; // Réactive le toggle
+                advancedToggleCooldownEndTime = 0;
             } 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);
-        updateTimer(); // Initial call to display immediately
+        const intervalId = setInterval(updateTimer, 1000); // Met à jour toutes les secondes
+        updateTimer(); // Appel initial pour afficher immédiatement
       }
 
+      // Charge l'historique de chat depuis le serveur
       async function loadChatHistory() {
-        historyLoadingIndicator.style.display = 'block';
+        historyLoadingIndicator.style.display = 'block'; // Affiche le chargement de l'historique
         try {
           const response = await fetch(API_HISTORY_ENDPOINT);
           if (!response.ok) {
-            let errorMsg = `Erreur serveur (${response.status})`;
-            try {
-              const errData = await response.json();
-              errorMsg = errData.error || errorMsg;
-            } catch (e) { }
-            throw new Error(errorMsg);
+             let errorMsg = `Erreur serveur (${response.status})`;
+             try { errorMsg = (await response.json()).error || errorMsg; } catch(e){}
+             throw new Error(errorMsg);
           }
           const data = await response.json();
           if (data.success && Array.isArray(data.history)) {
-            chatMessages.innerHTML = '';
-            chatMessages.appendChild(loadingIndicator);
-            loadingIndicator.style.display = 'none';
+            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é
+
             if (data.history.length === 0) {
-              addMessageToChat('assistant', "Bonjour ! Comment puis-je vous aider aujourd'hui ?");
+              // Message d'accueil si l'historique est vide
+              addMessageToChat('assistant', "Bonjour ! Posez une question, joignez un fichier/vidéo ou collez un lien YouTube.");
             } else {
+              // Ajoute chaque message de l'historique
               data.history.forEach(message => {
-                const isAssistantHtml = message.role === 'assistant';
-                addMessageToChat(message.role, message.text, isAssistantHtml);
-              });
+                 const isAssistantHtml = message.role === 'assistant'; // Les messages de l'assistant sont en HTML
+                 addMessageToChat(message.role, message.text, isAssistantHtml);
+               });
             }
-            scrollToBottom();
+            scrollToBottom(); // Fait défiler vers le bas après avoir chargé l'historique
           } 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 {
-          if (historyLoadingIndicator.parentNode === chatMessages) {
-            historyLoadingIndicator.remove();
-          }
-          promptInput.focus();
+           // 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
         }
       }
 
+      // Réinitialise l'input de fichier et la prévisualisation
       function clearFileInput() {
-        fileUpload.value = '';
-        fileNameSpan.textContent = '';
-        fileNameSpan.title = '';
-        clearFileButton.style.display = 'none';
-        filePreview.innerHTML = '';
+        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
       }
 
+      // --- É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;
-          clearFileButton.style.display = 'inline-block';
-          // Si le fichier est une image, afficher la prévisualisation
+          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
           if (file.type.startsWith('image/')) {
             const reader = new FileReader();
-            reader.onload = (e) => {
-              filePreview.innerHTML = `<img src="${e.target.result}" alt="Prévisualisation de l'image">`;
-            };
+            reader.onload = (e) => { filePreview.innerHTML = `<img src="${e.target.result}" alt="Prévisualisation">`; };
             reader.readAsDataURL(file);
-          } else {
-            filePreview.innerHTML = '';
+          } 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 {
+          // 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();
+        e.preventDefault(); // Empêche la soumission classique du formulaire
+
+        // Récupère les valeurs des inputs et toggles
         const prompt = promptInput.value.trim();
         const file = fileUpload.files[0];
+        const youtubeUrl = youtubeUrlInput.value.trim();
         const useWebSearch = webSearchToggle.checked;
         const useAdvanced = advancedToggle.checked;
 
-        if (!prompt && !file) {
-          displayError("Veuillez entrer un message ou sélectionner un fichier.");
+        // 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.");
           promptInput.focus();
-          return;
+          return; // Arrête l'exécution si rien n'est fourni
         }
-        errorMessageDiv.style.display = 'none';
+        errorMessageDiv.style.display = 'none'; // Cache les erreurs précédentes
 
-        // --- Cooldown Check for Advanced Reasoning ---
+        // Vérifie le cooldown pour le raisonnement avancé
         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
+                 const remainingSeconds = Math.ceil((advancedToggleCooldownEndTime - now) / 1000);
+                 displayError(`Le raisonnement avancé est disponible dans ${remainingSeconds} seconde(s).`);
+                 return; // Arrête si en cooldown
             }
-            // If check passes, cooldown will be started AFTER successful submission trigger
+            // Si la vérification passe, le cooldown sera démarré APRÈS la soumission réussie
         }
-        // --- 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 && file.name) {
-          userMessageText = prompt ? `[${file.name}] ${prompt}` : `[${file.name}]`;
+        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}`;
         }
-        addMessageToChat('user', userMessageText);
+        addMessageToChat('user', userMessageText); // Ajoute le message utilisateur au chat
+
+        // Prépare les données à envoyer au serveur
         const formData = new FormData();
         formData.append('prompt', prompt);
         formData.append('web_search', useWebSearch);
         if (file) {
-            formData.append('file', file);
+            formData.append('file', file); // Ajoute le fichier s'il existe
         }
-        // Add the advanced reasoning flag
+        formData.append('youtube_url', youtubeUrl); // Ajoute l'URL YouTube (même si vide)
         formData.append('advanced_reasoning', useAdvanced);
 
-        showLoading(true);
+        // 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
         promptInput.value = '';
-        clearFileInput();
+        clearFileInput(); // Réinitialise aussi l'upload fichier
+        youtubeUrlInput.value = ''; // Réinitialise l'input YouTube
+        videoProcessingNote.style.display = 'none'; // Cache la note
 
-        // 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
+        // Réinitialise le toggle avancé et démarre le cooldown s'il a été utilisé
+        advancedToggle.checked = false;
+        if (useAdvanced) startAdvancedCooldownTimer();
 
+        // --- Appel API au backend ---
         try {
           const response = await fetch(API_CHAT_ENDPOINT, {
             method: 'POST',
-            body: formData,
+            body: formData, // Envoie les données du formulaire
           });
-          const data = await response.json();
+          const data = await response.json(); // Attend la réponse JSON
+
+          // Gère les erreurs HTTP ou les erreurs retournées par l'API
           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);
+            addMessageToChat('assistant', data.message, true); // Ajoute la réponse de l'assistant (HTML)
           } 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);
-          if (useAdvanced) { /* Maybe revert cooldown if API fails? */ } // Optional: more complex error handling
+          // Optionnel : Gérer l'annulation du cooldown en cas d'erreur API ?
         } finally {
+          // Cache l'indicateur de chargement dans tous les cas (succès ou erreur)
           showLoading(false);
-          promptInput.focus();
+          promptInput.focus(); // Remet le focus sur l'input principal
         }
       });
 
+      // 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 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.");
+         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();
             }
-          } 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();
-          }
-        }
+         }
       });
 
-      loadChatHistory();
+      // --- Chargement Initial ---
+      loadChatHistory(); // Charge l'historique au démarrage de la page
+
     });
   </script>
 </body>