Chatm2

Sleeping

App Files Files Community

Docfile commited on Apr 4

Commit

0b3c9ac

verified ·

1 Parent(s): a9ea92e

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +187 -538

templates/index.html CHANGED Viewed

@@ -1,32 +1,20 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Mariam AI</title>
   <!-- Tailwind CSS via CDN -->
   <script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
   <!-- Font Awesome pour les icônes -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <!-- Google Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
   <!-- Favicon (Emoji amélioré) -->
   <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>">
   <script>
-    // Configuration avancée de Tailwind
     tailwind.config = {
       darkMode: 'class',
       theme: {
@@ -89,53 +77,28 @@
       }
     }
   </script>
   <style>
-    /* Base styles */
     html {
       scroll-behavior: smooth;
     }
     body {
       font-family: 'Inter', sans-serif;
       transition: background-color 0.3s ease, color 0.3s ease;
     }
-    /* Layout */
     .chat-layout {
       min-height: calc(100vh - 64px);
       display: grid;
       grid-template-rows: 1fr auto;
     }
-    /* Scrollbar styling */
-    ::-webkit-scrollbar {
-      width: 5px;
-      height: 5px;
-    }
-    ::-webkit-scrollbar-track {
-      background: transparent;
-    }
     ::-webkit-scrollbar-thumb {
       background: #cbd5e1;
       border-radius: 5px;
     }
-    .dark ::-webkit-scrollbar-thumb {
-      background: #475569;
-    }
-    ::-webkit-scrollbar-thumb:hover {
-      background: #94a3b8;
-    }
-    .dark ::-webkit-scrollbar-thumb:hover {
-      background: #64748b;
-    }
-    /* Message bubbles */
     .message-bubble {
       position: relative;
       max-width: 85%;
@@ -146,38 +109,30 @@
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
       transition: transform 0.2s ease, box-shadow 0.2s ease;
     }
     .message-bubble:hover {
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
     }
     .dark .message-bubble {
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
     }
     .dark .message-bubble:hover {
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3);
     }
     .user-message {
       border-bottom-right-radius: 0.125rem;
       align-self: flex-end;
       background: linear-gradient(to bottom right, #3b82f6, #2563eb);
       color: white;
     }
     .assistant-message {
       border-bottom-left-radius: 0.125rem;
       align-self: flex-start;
     }
     .dark .assistant-message {
       background-color: #1e293b;
       color: #e2e8f0;
       border-color: #334155;
     }
-    /* Message bubble arrow */
     .user-message::after {
       content: '';
       position: absolute;
@@ -188,7 +143,6 @@
       background: #2563eb;
       clip-path: polygon(0 0, 100% 0, 100% 100%);
     }
     .assistant-message::after {
       content: '';
       position: absolute;
@@ -199,38 +153,20 @@
       background: #f8fafc;
       clip-path: polygon(0 0, 100% 0, 0 100%);
     }
-    .dark .assistant-message::after {
-      background: #1e293b;
-    }
-    /* Animations */
     @keyframes message-fade-in {
-      from {
-        opacity: 0;
-        transform: translateY(10px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
     }
     @keyframes pulse-fade {
-      0%, 100% {
-        opacity: 0.5;
-      }
-      50% {
-        opacity: 1;
-      }
     }
     .typing-indicator {
       display: inline-flex;
       align-items: center;
       margin-left: 0.5rem;
     }
     .typing-dot {
       width: 0.5rem;
       height: 0.5rem;
@@ -239,30 +175,14 @@
       opacity: 0.7;
       margin: 0 0.1rem;
     }
-    .typing-dot:nth-child(1) {
-      animation: pulse-fade 1.2s 0s infinite;
-    }
-    .typing-dot:nth-child(2) {
-      animation: pulse-fade 1.2s 0.2s infinite;
-    }
-    .typing-dot:nth-child(3) {
-      animation: pulse-fade 1.2s 0.4s infinite;
-    }
-    /* Style spécifique pour le mode sombre */
     .dark body {
       background-color: #0f172a;
       color: #e2e8f0;
     }
-    /* Tooltip custom */
-    .tooltip {
-      position: relative;
-    }
     .tooltip .tooltip-text {
       visibility: hidden;
       width: max-content;
@@ -283,12 +203,7 @@
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       pointer-events: none;
     }
-    .dark .tooltip .tooltip-text {
-      background-color: #475569;
-      color: #f1f5f9;
-    }
     .tooltip .tooltip-text::after {
       content: "";
       position: absolute;
@@ -299,17 +214,8 @@
       border-style: solid;
       border-color: #1e293b transparent transparent transparent;
     }
-    .dark .tooltip .tooltip-text::after {
-      border-color: #475569 transparent transparent transparent;
-    }
-    .tooltip:hover .tooltip-text {
-      visibility: visible;
-      opacity: 1;
-    }
-    /* Bouton de copie */
     .copy-btn {
       position: absolute;
       top: 0.5rem;
@@ -318,12 +224,7 @@
       transition: opacity 0.2s ease, background-color 0.2s ease;
       z-index: 2;
     }
-    .message-bubble:hover .copy-btn {
-      opacity: 1;
-    }
-    /* File preview */
     .file-preview {
       max-width: 300px;
       margin: 0.5rem auto;
@@ -332,19 +233,13 @@
       border-radius: 0.5rem;
       transition: transform 0.2s ease;
     }
-    .file-preview:hover {
-      transform: scale(1.02);
-    }
     .file-preview img {
       width: 100%;
       height: auto;
       display: block;
       object-fit: cover;
     }
-    /* Chip style */
     .chip {
       display: inline-flex;
       align-items: center;
@@ -356,41 +251,22 @@
       color: #0369a1;
       transition: all 0.2s ease;
     }
-    .chip .chip-icon {
-      margin-right: 0.25rem;
-    }
     .chip .chip-close {
       margin-left: 0.25rem;
       cursor: pointer;
       opacity: 0.7;
       transition: opacity 0.2s ease;
     }
-    .chip .chip-close:hover {
-      opacity: 1;
-    }
-    .dark .chip {
-      background: #0c4a6e;
-      color: #7dd3fc;
-    }
-    /* Switch toggle style */
     .toggle-switch {
       position: relative;
       display: inline-block;
       width: 2.5rem;
       height: 1.25rem;
     }
-    .toggle-switch input {
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
     .toggle-slider {
       position: absolute;
       cursor: pointer;
@@ -402,7 +278,6 @@
       transition: .4s;
       border-radius: 1.25rem;
     }
     .toggle-slider:before {
       position: absolute;
       content: "";
@@ -414,50 +289,28 @@
       transition: .4s;
       border-radius: 50%;
     }
-    input:checked + .toggle-slider {
-      background-color: #0ea5e9;
-    }
-    input:focus + .toggle-slider {
-      box-shadow: 0 0 1px #0ea5e9;
-    }
-    input:checked + .toggle-slider:before {
-      transform: translateX(1.125rem);
-    }
-    .dark .toggle-slider {
-      background-color: #475569;
-    }
-    .dark input:checked + .toggle-slider {
-      background-color: #38bdf8;
-    }
-    /* Input styling */
     .chat-input {
       transition: all 0.3s ease;
       border-color: #e2e8f0;
     }
     .chat-input:focus {
       border-color: #38bdf8;
       box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
     }
     .dark .chat-input {
       background-color: #1e293b;
       color: #f1f5f9;
       border-color: #334155;
     }
     .dark .chat-input:focus {
       border-color: #38bdf8;
       box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
     }
-    /* Code block styling */
     pre {
       position: relative;
       background-color: #f8fafc;
@@ -466,18 +319,11 @@
       padding: 1.25rem 1rem;
       overflow-x: auto;
     }
-    .dark pre {
-      background-color: #1e293b;
-      color: #e2e8f0;
-    }
     code {
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.875rem;
     }
-    /* Code block copy button */
     .code-copy-btn {
       position: absolute;
       top: 0.5rem;
@@ -485,55 +331,41 @@
       opacity: 0;
       transition: opacity 0.2s ease;
     }
-    pre:hover .code-copy-btn {
-      opacity: 0.7;
-    }
-    pre:hover .code-copy-btn:hover {
-      opacity: 1;
-    }
   </style>
 </head>
 <body class="bg-gray-50 text-gray-900 antialiased">
   <!-- Header -->
   <header class="bg-gradient-to-r from-primary-600 to-primary-800 text-white py-3 px-4 shadow-md sticky top-0 z-10">
     <div class="max-w-4xl mx-auto flex justify-between items-center">
-      <!-- Logo & Title -->
       <div class="flex items-center space-x-2">
-        <span class="text-2xl">✨</span>
         <h1 class="text-xl font-bold">Mariam AI</h1>
       </div>
-<!-- Actions -->
-  <div class="flex items-center space-x-2 sm:space-x-4">
-    <!-- Thème sombre/clair -->
-    <button id="theme-toggle" class="p-2 rounded-full hover:bg-primary-700/50 transition-colors duration-200 tooltip" aria-label="Changer de thème">
-      <i class="fa-solid fa-moon dark:hidden"></i>
-      <i class="fa-solid fa-sun hidden dark:inline"></i>
-      <span class="tooltip-text">Mode clair/sombre</span>
-    </button>
-    <!-- Bouton d'effacement -->
-    <form action="/clear" method="POST" id="clear-form">
-      <button type="submit" class="flex items-center bg-red-500 hover:bg-red-600 text-white text-xs font-semibold py-1.5 px-3 rounded-full transition duration-200 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75 tooltip">
-        <i class="fa-solid fa-trash-can mr-1.5"></i>
-        <span class="hidden sm:inline">Effacer</span>
-        <span class="tooltip-text">Effacer la conversation</span>
-      </button>
-    </form>
-  </div>
-</div>
   </header>
   <!-- Main Container -->
   <main class="max-w-4xl mx-auto chat-layout">
-    <!-- Chat Messages Container -->
     <section id="chat-messages" class="flex flex-col space-y-6 p-4 overflow-y-auto">
-      <!-- Message de chargement de l'historique -->
       <div id="history-loading" class="text-center py-10">
         <div class="inline-flex items-center px-4 py-2 bg-primary-50 text-primary-700 rounded-lg dark:bg-primary-900/30 dark:text-primary-300">
           <svg class="animate-spin h-5 w-5 mr-3" viewBox="0 0 24 24">
@@ -543,133 +375,110 @@
           <span>Chargement de la conversation...</span>
         </div>
       </div>
-<!-- Indicateur de chargement pour les réponses -->
-  <div id="loading-indicator" class="flex items-start space-x-2 hidden">
-    <div class="w-8 h-8 rounded-full bg-primary-100 flex items-center justify-center dark:bg-primary-900/50">
-      <span class="text-lg">✨</span>
-    </div>
-    <div class="message-bubble assistant-message bg-secondary-50 text-secondary-900 border border-secondary-200 flex items-center">
-      <span>Mariam réfléchit</span>
-      <div class="typing-indicator">
-        <span class="typing-dot"></span>
-        <span class="typing-dot"></span>
-        <span class="typing-dot"></span>
       </div>
-    </div>
-  </div>
-</section>
-<!-- Bottom Container -->
-<div class="border-t border-gray-200 dark:border-gray-700">
-  <!-- Error Message -->
-  <div id="error-message" class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 dark:bg-red-900/30 dark:text-red-300 dark:border-red-600 hidden" role="alert">
-    <div class="flex">
-      <div class="flex-shrink-0">
-        <i class="fa-solid fa-circle-exclamation"></i>
       </div>
-      <div class="ml-3">
-        <p class="text-sm font-medium" id="error-text">Le message d'erreur détaillé ira ici.</p>
       </div>
-      <button class="ml-auto" id="dismiss-error">
-        <i class="fa-solid fa-xmark"></i>
-      </button>
-    </div>
-  </div>
-  <!-- Preview Area -->
-  <div id="preview-area" class="px-4 py-2 bg-gray-50 dark:bg-gray-800/50 hidden">
-    <!-- File Preview -->
-    <div id="file-preview" class="hidden"></div>
-  </div>
-  <!-- Options Bar -->
-  <div class="flex items-center justify-between px-4 py-2 bg-gray-100 dark:bg-gray-800/80 text-sm text-gray-600 dark:text-gray-300">
-    <!-- Options du chat -->
-    <div class="flex items-center space-x-4">
-      <!-- Web Search Toggle -->
-      <label class="flex items-center cursor-pointer tooltip">
-        <span class="mr-2 text-xs sm:text-sm font-medium">
-          <i class="fa-solid fa-globe mr-1.5"></i>
-          <span class="hidden sm:inline">Recherche Web</span>
-        </span>
-        <span class="toggle-switch">
-          <input type="checkbox" id="web_search_toggle" name="web_search" value="true">
-          <span class="toggle-slider"></span>
-        </span>
-        <span class="tooltip-text">Activer la recherche web pour Mariam</span>
-      </label>
-      <!-- Advanced Reasoning Toggle -->
-      <label class="flex items-center cursor-pointer tooltip">
-        <span class="mr-2 text-xs sm:text-sm font-medium text-accent-700 dark:text-accent-300">
-          <i class="fa-solid fa-brain mr-1.5"></i>
-          <span class="hidden sm:inline">Avancé</span>
-          <span id="advanced-cooldown-timer" class="text-xs ml-1 hidden"></span>
-        </span>
-        <span class="toggle-switch">
-          <input type="checkbox" id="advanced_reasoning_toggle" name="advanced_reasoning" value="true">
-          <span class="toggle-slider"></span>
-        </span>
-        <span class="tooltip-text">Activer le raisonnement avancé (1 fois/min)</span>
-      </label>
-    </div>
-    <!-- Upload Button -->
-    <div>
-      <label for="file_upload" class="cursor-pointer flex items-center text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 tooltip">
-        <i class="fa-solid fa-paperclip"></i>
-        <span class="ml-1.5 hidden sm:inline">Fichier</span>
-        <input type="file" id="file_upload" name="file" class="hidden" accept=".txt,.pdf,.png,.jpg,.jpeg">
-        <span class="tooltip-text">Joindre un fichier (txt, pdf, image)</span>
-      </label>
-      <!-- File Chip (apparaît quand un fichier est sélectionné) -->
-      <div id="file-chip" class="chip mt-2 hidden">
-        <i class="fa-solid fa-file chip-icon"></i>
-        <span id="file-name" class="truncate max-w-[120px]"></span>
-        <i id="clear-file" class="fa-solid fa-xmark chip-close"></i>
       </div>
     </div>
-  </div>
-  <!-- Chat Input Form -->
-  <form id="chat-form" class="p-3 sm:p-4 bg-white dark:bg-gray-900">
-    <div class="relative">
-      <input
-        type="text"
-        id="prompt"
-        name="prompt"
-        class="chat-input w-full pl-4 pr-12 py-3 rounded-full border focus:outline-none text-sm sm:text-base"
-        placeholder="Posez votre question à Mariam..."
-        autocomplete="off"
-      >
-      <button
-        type="submit"
-        id="send-button"
-        class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-300 text-white rounded-full p-2 transition focus:outline-none focus:ring-2 focus:ring-primary-400"
-        title="Envoyer le message"
-      >
-        <i class="fa-solid fa-paper-plane"></i>
-      </button>
-    </div>
-    <div class="text-xs text-center mt-2 text-gray-400 dark:text-gray-500">
-      Appuyez sur <kbd class="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded border border-gray-300 dark:border-gray-700">Entrée</kbd> pour envoyer • <kbd class="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded border border-gray-300 dark:border-gray-700">Shift+Entrée</kbd> pour une nouvelle ligne
-    </div>
-  </form>
-</div>
-IGNORE_WHEN_COPYING_START
-content_copy
-download
-Use code with caution.
-IGNORE_WHEN_COPYING_END
   </main>
   <!-- Scripts -->
   <script>
     document.addEventListener('DOMContentLoaded', () => {
-      // Elements
       const chatForm = document.getElementById('chat-form');
       const promptInput = document.getElementById('prompt');
       const chatMessages = document.getElementById('chat-messages');
@@ -690,29 +499,21 @@ IGNORE_WHEN_COPYING_END
       const advancedToggle = document.getElementById('advanced_reasoning_toggle');
       const advancedCooldownTimerSpan = document.getElementById('advanced-cooldown-timer');
       const themeToggleBtn = document.getElementById('theme-toggle');
-      // API endpoints
       const API_CHAT_ENDPOINT = '/api/chat';
       const API_HISTORY_ENDPOINT = '/api/history';
       const CLEAR_ENDPOINT = '/clear';
-      // Constantes
-      const COOLDOWN_DURATION = 60 * 1000; // 60 secondes
-      // Variables
       let advancedToggleCooldownEndTime = 0;
-      let isComposing = false; // Pour la composition (pour les langues qui utilisent IME)
-      // Thème
       function initializeTheme() {
-        // Vérifier les préférences locales ou systèmes
         if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
           document.documentElement.classList.add('dark');
         } else {
           document.documentElement.classList.remove('dark');
         }
       }
       function toggleTheme() {
         if (document.documentElement.classList.contains('dark')) {
           document.documentElement.classList.remove('dark');
@@ -722,21 +523,17 @@ IGNORE_WHEN_COPYING_END
           localStorage.theme = 'dark';
         }
       }
       themeToggleBtn.addEventListener('click', toggleTheme);
       initializeTheme();
-      // Fonction de défilement vers le bas
       function scrollToBottom(smooth = true) {
         setTimeout(() => {
-          chatMessages.scrollTo({
-            top: chatMessages.scrollHeight,
-            behavior: smooth ? 'smooth' : 'auto'
-          });
         }, 50);
       }
-      // Gestion du chargement
       function showLoading(show) {
         if (show) {
           loadingIndicator.classList.remove('hidden');
@@ -745,36 +542,27 @@ IGNORE_WHEN_COPYING_END
         } else {
           loadingIndicator.classList.add('hidden');
         }
         sendButton.disabled = show;
         promptInput.disabled = show;
         fileUpload.disabled = show;
         clearFileButton.disabled = show;
       }
-      // Gestion des erreurs
       function displayError(message) {
         errorTextP.textContent = message || "Une erreur inconnue est survenue.";
         errorMessageDiv.classList.remove('hidden');
         errorMessageDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
       }
-      // Fermer le message d'erreur
-      dismissErrorBtn.addEventListener('click', () => {
-        errorMessageDiv.classList.add('hidden');
-      });
-      // Ajouter un message au chat
       function addMessageToChat(role, content, isHtml = false) {
         errorMessageDiv.classList.add('hidden');
         const messageWrapper = document.createElement('div');
         messageWrapper.classList.add('flex', role === 'user' ? 'justify-end' : 'justify-start');
         let html = '';
         if (role === 'user') {
-          // Message utilisateur
           html = `
             <div class="flex items-start space-x-2 max-w-[85%]">
               <div class="message-bubble user-message">
@@ -783,7 +571,6 @@ IGNORE_WHEN_COPYING_END
             </div>
           `;
         } else {
-          // Message assistant
           html = `
             <div class="flex items-start space-x-2 max-w-[85%]">
               <div class="w-8 h-8 rounded-full bg-primary-100 flex items-center justify-center flex-shrink-0 dark:bg-primary-900/50">
@@ -800,70 +587,22 @@ IGNORE_WHEN_COPYING_END
             </div>
           `;
         }
         messageWrapper.innerHTML = html;
         chatMessages.insertBefore(messageWrapper, loadingIndicator);
-        // Activer les boutons de copie pour les blocs de code
-        const preTags = messageWrapper.querySelectorAll('pre');
-        preTags.forEach(pre => {
-          if (!pre.querySelector('.code-copy-btn')) {
-            const codeBtn = document.createElement('button');
-            codeBtn.className = 'code-copy-btn bg-white/90 dark:bg-gray-800/90 text-xs p-1 rounded text-gray-600 dark:text-gray-300';
-            codeBtn.innerHTML = '<i class="fa-regular fa-copy"></i>';
-            codeBtn.title = 'Copier le code';
-            codeBtn.addEventListener('click', () => {
-              const code = pre.querySelector('code')?.innerText || pre.innerText;
-              navigator.clipboard.writeText(code)
-                .then(() => {
-                  codeBtn.innerHTML = '<i class="fa-solid fa-check"></i>';
-                  setTimeout(() => {
-                    codeBtn.innerHTML = '<i class="fa-regular fa-copy"></i>';
-                  }, 2000);
-                });
-            });
-            pre.appendChild(codeBtn);
-          }
-        });
-        // Activer les boutons de copie pour les messages
-        const copyBtn = messageWrapper.querySelector('.copy-btn');
-        if (copyBtn) {
-          copyBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            e.preventDefault();
-            const textContent = messageWrapper.querySelector('.prose').innerText;
-            navigator.clipboard.writeText(textContent)
-              .then(() => {
-                copyBtn.innerHTML = '<i class="fa-solid fa-check mr-1"></i> Copié';
-                setTimeout(() => {
-                  copyBtn.innerHTML = '<i class="fa-regular fa-copy mr-1"></i> Copier';
-                }, 2000);
-              });
-          });
-        }
-        if (historyLoadingIndicator.parentNode !== chatMessages) {
-          scrollToBottom();
-        }
       }
-      // Échappement HTML pour éviter les injections XSS
       function escapeHtml(unsafe) {
-        return unsafe
-          .replace(/&/g, "&amp;")
-          .replace(/</g, "&lt;")
-          .replace(/>/g, "&gt;")
-          .replace(/"/g, "&quot;")
-          .replace(/'/g, "&#039;");
       }
       // Gestion du cooldown du mode avancé
       function startAdvancedCooldownTimer() {
         advancedToggle.disabled = true;
         advancedToggleCooldownEndTime = Date.now() + COOLDOWN_DURATION;
         const updateTimer = () => {
           const now = Date.now();
           if (now >= advancedToggleCooldownEndTime) {
@@ -877,46 +616,36 @@ IGNORE_WHEN_COPYING_END
             advancedCooldownTimerSpan.classList.remove('hidden');
           }
         };
         const intervalId = setInterval(updateTimer, 1000);
         updateTimer();
       }
-      // Chargement de l'historique de chat
       async function loadChatHistory() {
         historyLoadingIndicator.style.display = 'block';
         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);
           }
           const data = await response.json();
           if (data.success && Array.isArray(data.history)) {
-            // Vider le conteneur et préparer les nouvelles entrées
             chatMessages.innerHTML = '';
             chatMessages.appendChild(loadingIndicator);
             loadingIndicator.classList.add('hidden');
             if (data.history.length === 0) {
-              // Message d'accueil
               addMessageToChat('assistant', "Bonjour ! Je suis Mariam, votre assistant IA. Comment puis-je vous aider aujourd'hui ?", true);
             } else {
-              // Afficher l'historique
               data.history.forEach(message => {
                 const isAssistantHtml = message.role === 'assistant';
                 addMessageToChat(message.role, message.text, isAssistantHtml);
               });
             }
             scrollToBottom(false);
           } else {
-            throw new Error(data.error || "Format de réponse de l'historique invalide.");
           }
         } catch (error) {
           chatMessages.innerHTML = '';
@@ -928,7 +657,7 @@ IGNORE_WHEN_COPYING_END
           promptInput.focus();
         }
       }
       // Gestion des fichiers
       function clearFileInput() {
         fileUpload.value = '';
@@ -937,18 +666,13 @@ IGNORE_WHEN_COPYING_END
         previewArea.classList.add('hidden');
         filePreview.innerHTML = '';
       }
       fileUpload.addEventListener('change', () => {
         if (fileUpload.files.length > 0) {
           const file = fileUpload.files[0];
           const name = file.name;
-          // Mettre à jour le chip de fichier
           fileNameSpan.textContent = name;
           fileNameSpan.title = name;
           fileChip.classList.remove('hidden');
-          // Si c'est une image, créer une prévisualisation
           if (file.type.startsWith('image/')) {
             const reader = new FileReader();
             reader.onload = (e) => {
@@ -962,7 +686,6 @@ IGNORE_WHEN_COPYING_END
             };
             reader.readAsDataURL(file);
           } else {
-            // Afficher une icône pour les autres types de fichiers
             filePreview.innerHTML = `
               <div class="flex items-center justify-center py-4">
                 <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg text-center">
@@ -978,25 +701,18 @@ IGNORE_WHEN_COPYING_END
           clearFileInput();
         }
       });
-      // Obtenir l'icône en fonction du type de fichier
       function getFileIcon(fileType) {
         if (fileType.includes('pdf')) return 'fa-file-pdf';
         if (fileType.includes('text')) return 'fa-file-lines';
         return 'fa-file';
       }
-      // Formater la taille du fichier
       function formatFileSize(bytes) {
         if (bytes < 1024) return bytes + ' octets';
         if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' Ko';
         return (bytes / 1048576).toFixed(1) + ' Mo';
       }
-      clearFileButton.addEventListener('click', () => {
-        clearFileInput();
-      });
       // Soumission du formulaire
       chatForm.addEventListener('submit', async (e) => {
         e.preventDefault();
@@ -1004,16 +720,12 @@ IGNORE_WHEN_COPYING_END
         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.classList.add('hidden');
-        // Vérification du cooldown pour le mode avancé
         if (useAdvanced) {
           const now = Date.now();
           if (now < advancedToggleCooldownEndTime) {
@@ -1022,51 +734,29 @@ IGNORE_WHEN_COPYING_END
             return;
           }
         }
-        // Construire le message utilisateur
         let userMessageText = prompt;
         if (file && file.name) {
           userMessageText = prompt ? `${prompt}` : `[Fichier joint: ${file.name}]`;
         }
         addMessageToChat('user', userMessageText);
-        // Préparer les données
         const formData = new FormData();
         formData.append('prompt', prompt);
         formData.append('web_search', useWebSearch);
-        if (file) {
-          formData.append('file', file);
-        }
         formData.append('advanced_reasoning', useAdvanced);
-        // Afficher le chargement et nettoyer le formulaire
         showLoading(true);
         promptInput.value = '';
         clearFileInput();
-        // Réinitialiser les options
         advancedToggle.checked = false;
         if (useAdvanced) startAdvancedCooldownTimer();
         try {
-          const response = await fetch(API_CHAT_ENDPOINT, {
-            method: 'POST',
-            body: formData,
-          });
           const data = await response.json();
-          if (!response.ok) {
-            throw new Error(data.error || `Erreur serveur: ${response.status}`);
-          }
           if (data.success && data.message) {
             addMessageToChat('assistant', data.message, true);
           } else {
-            throw new Error(data.error || "Réponse invalide ou vide du serveur.");
           }
         } catch (error) {
           displayError(error.message);
@@ -1075,12 +765,10 @@ IGNORE_WHEN_COPYING_END
           promptInput.focus();
         }
       });
       // Effacement de la conversation
       clearForm.addEventListener('submit', async (e) => {
         e.preventDefault();
-        // Demander confirmation
         const confirmDialog = document.createElement('div');
         confirmDialog.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50';
         confirmDialog.innerHTML = `
@@ -1097,46 +785,32 @@ IGNORE_WHEN_COPYING_END
             </div>
           </div>
         `;
         document.body.appendChild(confirmDialog);
         document.body.classList.add('overflow-hidden');
-        // Gérer les boutons
         document.getElementById('cancel-clear').addEventListener('click', () => {
           document.body.removeChild(confirmDialog);
           document.body.classList.remove('overflow-hidden');
         });
         document.getElementById('confirm-clear').addEventListener('click', async () => {
           document.body.removeChild(confirmDialog);
           document.body.classList.remove('overflow-hidden');
           const originalButtonText = e.target.querySelector('button').innerHTML;
           e.target.querySelector('button').innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i>';
           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.classList.add('hidden');
               addMessageToChat('assistant', "Conversation effacée. Comment puis-je vous aider ?", true);
               errorMessageDiv.classList.add('hidden');
             } 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').innerHTML = originalButtonText;
             e.target.querySelector('button').disabled = false;
@@ -1144,51 +818,26 @@ IGNORE_WHEN_COPYING_END
           }
         });
       });
-      // Raccourcis clavier
       promptInput.addEventListener('keydown', (e) => {
-        // Ignorer pendant la composition IME
         if (isComposing) return;
-        // Shift+Enter pour nouvelle ligne, Enter pour envoyer
         if (e.key === 'Enter' && !e.shiftKey) {
           e.preventDefault();
-          if (!sendButton.disabled) {
-            chatForm.dispatchEvent(new Event('submit'));
-          }
         }
       });
-      // Support IME pour les langues asiatiques
-      promptInput.addEventListener('compositionstart', () => {
-        isComposing = true;
-      });
-      promptInput.addEventListener('compositionend', () => {
-        isComposing = false;
-      });
-      // Démarrer le chargement
       loadChatHistory();
-      // Activer l'ajustement automatique de la hauteur du textarea
-      const resizeInput = () => {
-        // Pour une implémentation future si on change l'input en textarea
-      };
-      // Vérifier les préréglages du navigateur pour le thème sombre
       const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
       prefersDarkScheme.addEventListener('change', (e) => {
-        if (!localStorage.theme) { // Seulement si l'utilisateur n'a pas explicitement choisi
-          if (e.matches) {
-            document.documentElement.classList.add('dark');
-          } else {
-            document.documentElement.classList.remove('dark');
-          }
         }
       });
     });
   </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Mariam AI</title>
   <!-- Tailwind CSS via CDN -->
   <script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
   <!-- Font Awesome pour les icônes -->
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <!-- Google Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
   <!-- Favicon (Emoji amélioré) -->
   <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>">
   <script>
     tailwind.config = {
       darkMode: 'class',
       theme: {
       }
     }
   </script>
   <style>
     html {
       scroll-behavior: smooth;
     }
     body {
       font-family: 'Inter', sans-serif;
       transition: background-color 0.3s ease, color 0.3s ease;
     }
     .chat-layout {
       min-height: calc(100vh - 64px);
       display: grid;
       grid-template-rows: 1fr auto;
     }
+    ::-webkit-scrollbar { width: 5px; height: 5px; }
+    ::-webkit-scrollbar-track { background: transparent; }
     ::-webkit-scrollbar-thumb {
       background: #cbd5e1;
       border-radius: 5px;
     }
+    .dark ::-webkit-scrollbar-thumb { background: #475569; }
+    ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+    .dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }
     .message-bubble {
       position: relative;
       max-width: 85%;
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
       transition: transform 0.2s ease, box-shadow 0.2s ease;
     }
     .message-bubble:hover {
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
     }
     .dark .message-bubble {
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
     }
     .dark .message-bubble:hover {
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.3);
     }
     .user-message {
       border-bottom-right-radius: 0.125rem;
       align-self: flex-end;
       background: linear-gradient(to bottom right, #3b82f6, #2563eb);
       color: white;
     }
     .assistant-message {
       border-bottom-left-radius: 0.125rem;
       align-self: flex-start;
     }
     .dark .assistant-message {
       background-color: #1e293b;
       color: #e2e8f0;
       border-color: #334155;
     }
     .user-message::after {
       content: '';
       position: absolute;
       background: #2563eb;
       clip-path: polygon(0 0, 100% 0, 100% 100%);
     }
     .assistant-message::after {
       content: '';
       position: absolute;
       background: #f8fafc;
       clip-path: polygon(0 0, 100% 0, 0 100%);
     }
+    .dark .assistant-message::after { background: #1e293b; }
     @keyframes message-fade-in {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
     }
     @keyframes pulse-fade {
+      0%, 100% { opacity: 0.5; }
+      50% { opacity: 1; }
     }
     .typing-indicator {
       display: inline-flex;
       align-items: center;
       margin-left: 0.5rem;
     }
     .typing-dot {
       width: 0.5rem;
       height: 0.5rem;
       opacity: 0.7;
       margin: 0 0.1rem;
     }
+    .typing-dot:nth-child(1) { animation: pulse-fade 1.2s 0s infinite; }
+    .typing-dot:nth-child(2) { animation: pulse-fade 1.2s 0.2s infinite; }
+    .typing-dot:nth-child(3) { animation: pulse-fade 1.2s 0.4s infinite; }
     .dark body {
       background-color: #0f172a;
       color: #e2e8f0;
     }
+    .tooltip { position: relative; }
     .tooltip .tooltip-text {
       visibility: hidden;
       width: max-content;
       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       pointer-events: none;
     }
+    .dark .tooltip .tooltip-text { background-color: #475569; color: #f1f5f9; }
     .tooltip .tooltip-text::after {
       content: "";
       position: absolute;
       border-style: solid;
       border-color: #1e293b transparent transparent transparent;
     }
+    .dark .tooltip .tooltip-text::after { border-color: #475569 transparent transparent transparent; }
+    .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; }
     .copy-btn {
       position: absolute;
       top: 0.5rem;
       transition: opacity 0.2s ease, background-color 0.2s ease;
       z-index: 2;
     }
+    .message-bubble:hover .copy-btn { opacity: 1; }
     .file-preview {
       max-width: 300px;
       margin: 0.5rem auto;
       border-radius: 0.5rem;
       transition: transform 0.2s ease;
     }
+    .file-preview:hover { transform: scale(1.02); }
     .file-preview img {
       width: 100%;
       height: auto;
       display: block;
       object-fit: cover;
     }
     .chip {
       display: inline-flex;
       align-items: center;
       color: #0369a1;
       transition: all 0.2s ease;
     }
+    .chip .chip-icon { margin-right: 0.25rem; }
     .chip .chip-close {
       margin-left: 0.25rem;
       cursor: pointer;
       opacity: 0.7;
       transition: opacity 0.2s ease;
     }
+    .chip .chip-close:hover { opacity: 1; }
+    .dark .chip { background: #0c4a6e; color: #7dd3fc; }
     .toggle-switch {
       position: relative;
       display: inline-block;
       width: 2.5rem;
       height: 1.25rem;
     }
+    .toggle-switch input { opacity: 0; width: 0; height: 0; }
     .toggle-slider {
       position: absolute;
       cursor: pointer;
       transition: .4s;
       border-radius: 1.25rem;
     }
     .toggle-slider:before {
       position: absolute;
       content: "";
       transition: .4s;
       border-radius: 50%;
     }
+    input:checked + .toggle-slider { background-color: #0ea5e9; }
+    input:focus + .toggle-slider { box-shadow: 0 0 1px #0ea5e9; }
+    input:checked + .toggle-slider:before { transform: translateX(1.125rem); }
+    .dark .toggle-slider { background-color: #475569; }
+    .dark input:checked + .toggle-slider { background-color: #38bdf8; }
     .chat-input {
       transition: all 0.3s ease;
       border-color: #e2e8f0;
     }
     .chat-input:focus {
       border-color: #38bdf8;
       box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
     }
     .dark .chat-input {
       background-color: #1e293b;
       color: #f1f5f9;
       border-color: #334155;
     }
     .dark .chat-input:focus {
       border-color: #38bdf8;
       box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
     }
     pre {
       position: relative;
       background-color: #f8fafc;
       padding: 1.25rem 1rem;
       overflow-x: auto;
     }
+    .dark pre { background-color: #1e293b; color: #e2e8f0; }
     code {
       font-family: 'JetBrains Mono', monospace;
       font-size: 0.875rem;
     }
     .code-copy-btn {
       position: absolute;
       top: 0.5rem;
       opacity: 0;
       transition: opacity 0.2s ease;
     }
+    pre:hover .code-copy-btn { opacity: 0.7; }
+    pre:hover .code-copy-btn:hover { opacity: 1; }
   </style>
 </head>
 <body class="bg-gray-50 text-gray-900 antialiased">
   <!-- Header -->
   <header class="bg-gradient-to-r from-primary-600 to-primary-800 text-white py-3 px-4 shadow-md sticky top-0 z-10">
     <div class="max-w-4xl mx-auto flex justify-between items-center">
+      <!-- Logo & Titre -->
       <div class="flex items-center space-x-2">
+        <img src="https://mariam-241.vercel.app/static/image/logoboma.png" alt="Logo Mariam AI" class="h-8 sm:h-10 object-contain">
         <h1 class="text-xl font-bold">Mariam AI</h1>
       </div>
+      <!-- Actions -->
+      <div class="flex items-center space-x-2 sm:space-x-4">
+        <button id="theme-toggle" class="p-2 rounded-full hover:bg-primary-700/50 transition-colors duration-200 tooltip" aria-label="Changer de thème">
+          <i class="fa-solid fa-moon dark:hidden"></i>
+          <i class="fa-solid fa-sun hidden dark:inline"></i>
+          <span class="tooltip-text">Mode clair/sombre</span>
+        </button>
+        <form action="/clear" method="POST" id="clear-form">
+          <button type="submit" class="flex items-center bg-red-500 hover:bg-red-600 text-white text-xs font-semibold py-1.5 px-3 rounded-full transition duration-200 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75 tooltip">
+            <i class="fa-solid fa-trash-can mr-1.5"></i>
+            <span class="hidden sm:inline">Effacer</span>
+            <span class="tooltip-text">Effacer la conversation</span>
+          </button>
+        </form>
+      </div>
+    </div>
   </header>
   <!-- Main Container -->
   <main class="max-w-4xl mx-auto chat-layout">
+    <!-- Conteneur des messages -->
     <section id="chat-messages" class="flex flex-col space-y-6 p-4 overflow-y-auto">
+      <!-- Chargement de l'historique -->
       <div id="history-loading" class="text-center py-10">
         <div class="inline-flex items-center px-4 py-2 bg-primary-50 text-primary-700 rounded-lg dark:bg-primary-900/30 dark:text-primary-300">
           <svg class="animate-spin h-5 w-5 mr-3" viewBox="0 0 24 24">
           <span>Chargement de la conversation...</span>
         </div>
       </div>
+      <!-- Indicateur de chargement pour les réponses -->
+      <div id="loading-indicator" class="flex items-start space-x-2 hidden">
+        <div class="w-8 h-8 rounded-full bg-primary-100 flex items-center justify-center dark:bg-primary-900/50">
+          <span class="text-lg">✨</span>
+        </div>
+        <div class="message-bubble assistant-message bg-secondary-50 text-secondary-900 border border-secondary-200 flex items-center">
+          <span>Mariam réfléchit</span>
+          <div class="typing-indicator">
+            <span class="typing-dot"></span>
+            <span class="typing-dot"></span>
+            <span class="typing-dot"></span>
+          </div>
+        </div>
       </div>
+    </section>
+    <!-- Conteneur du bas -->
+    <div class="border-t border-gray-200 dark:border-gray-700">
+      <!-- Zone d'erreur -->
+      <div id="error-message" class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 dark:bg-red-900/30 dark:text-red-300 dark:border-red-600 hidden" role="alert">
+        <div class="flex">
+          <div class="flex-shrink-0">
+            <i class="fa-solid fa-circle-exclamation"></i>
+          </div>
+          <div class="ml-3">
+            <p class="text-sm font-medium" id="error-text">Le message d'erreur détaillé ira ici.</p>
+          </div>
+          <button class="ml-auto" id="dismiss-error">
+            <i class="fa-solid fa-xmark"></i>
+          </button>
+        </div>
       </div>
+      <!-- Zone de prévisualisation -->
+      <div id="preview-area" class="px-4 py-2 bg-gray-50 dark:bg-gray-800/50 hidden">
+        <div id="file-preview" class="hidden"></div>
       </div>
+      <!-- Barre d'options -->
+      <div class="flex items-center justify-between px-4 py-2 bg-gray-100 dark:bg-gray-800/80 text-sm text-gray-600 dark:text-gray-300">
+        <div class="flex items-center space-x-4">
+          <label class="flex items-center cursor-pointer tooltip">
+            <span class="mr-2 text-xs sm:text-sm font-medium">
+              <i class="fa-solid fa-globe mr-1.5"></i>
+              <span class="hidden sm:inline">Recherche Web</span>
+            </span>
+            <span class="toggle-switch">
+              <input type="checkbox" id="web_search_toggle" name="web_search" value="true">
+              <span class="toggle-slider"></span>
+            </span>
+            <span class="tooltip-text">Activer la recherche web pour Mariam</span>
+          </label>
+          <label class="flex items-center cursor-pointer tooltip">
+            <span class="mr-2 text-xs sm:text-sm font-medium text-accent-700 dark:text-accent-300">
+              <i class="fa-solid fa-brain mr-1.5"></i>
+              <span class="hidden sm:inline">Avancé</span>
+              <span id="advanced-cooldown-timer" class="text-xs ml-1 hidden"></span>
+            </span>
+            <span class="toggle-switch">
+              <input type="checkbox" id="advanced_reasoning_toggle" name="advanced_reasoning" value="true">
+              <span class="toggle-slider"></span>
+            </span>
+            <span class="tooltip-text">Activer le raisonnement avancé (1 fois/min)</span>
+          </label>
+        </div>
+        <div>
+          <label for="file_upload" class="cursor-pointer flex items-center text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 tooltip">
+            <i class="fa-solid fa-paperclip"></i>
+            <span class="ml-1.5 hidden sm:inline">Fichier</span>
+            <input type="file" id="file_upload" name="file" class="hidden" accept=".txt,.pdf,.png,.jpg,.jpeg">
+            <span class="tooltip-text">Joindre un fichier (txt, pdf, image)</span>
+          </label>
+          <div id="file-chip" class="chip mt-2 hidden">
+            <i class="fa-solid fa-file chip-icon"></i>
+            <span id="file-name" class="truncate max-w-[120px]"></span>
+            <i id="clear-file" class="fa-solid fa-xmark chip-close"></i>
+          </div>
+        </div>
       </div>
+      <!-- Formulaire de chat -->
+      <form id="chat-form" class="p-3 sm:p-4 bg-white dark:bg-gray-900">
+        <div class="relative">
+          <input
+            type="text"
+            id="prompt"
+            name="prompt"
+            class="chat-input w-full pl-4 pr-12 py-3 rounded-full border focus:outline-none text-sm sm:text-base"
+            placeholder="Posez votre question à Mariam..."
+            autocomplete="off">
+          <button
+            type="submit"
+            id="send-button"
+            class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-300 text-white rounded-full p-2 transition focus:outline-none focus:ring-2 focus:ring-primary-400"
+            title="Envoyer le message">
+            <i class="fa-solid fa-paper-plane"></i>
+          </button>
+        </div>
+        <div class="text-xs text-center mt-2 text-gray-400 dark:text-gray-500">
+          Appuyez sur <kbd class="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded border border-gray-300 dark:border-gray-700">Entrée</kbd> pour envoyer • <kbd class="px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded border border-gray-300 dark:border-gray-700">Shift+Entrée</kbd> pour une nouvelle ligne
+        </div>
+      </form>
     </div>
   </main>
   <!-- Scripts -->
   <script>
     document.addEventListener('DOMContentLoaded', () => {
+      // Sélection des éléments et initialisation des variables
       const chatForm = document.getElementById('chat-form');
       const promptInput = document.getElementById('prompt');
       const chatMessages = document.getElementById('chat-messages');
       const advancedToggle = document.getElementById('advanced_reasoning_toggle');
       const advancedCooldownTimerSpan = document.getElementById('advanced-cooldown-timer');
       const themeToggleBtn = document.getElementById('theme-toggle');
       const API_CHAT_ENDPOINT = '/api/chat';
       const API_HISTORY_ENDPOINT = '/api/history';
       const CLEAR_ENDPOINT = '/clear';
+      const COOLDOWN_DURATION = 60 * 1000;
       let advancedToggleCooldownEndTime = 0;
+      let isComposing = false;
+      // Gestion du thème
       function initializeTheme() {
         if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
           document.documentElement.classList.add('dark');
         } else {
           document.documentElement.classList.remove('dark');
         }
       }
       function toggleTheme() {
         if (document.documentElement.classList.contains('dark')) {
           document.documentElement.classList.remove('dark');
           localStorage.theme = 'dark';
         }
       }
       themeToggleBtn.addEventListener('click', toggleTheme);
       initializeTheme();
+      // Défilement vers le bas
       function scrollToBottom(smooth = true) {
         setTimeout(() => {
+          chatMessages.scrollTo({ top: chatMessages.scrollHeight, behavior: smooth ? 'smooth' : 'auto' });
         }, 50);
       }
+      // Affichage du chargement
       function showLoading(show) {
         if (show) {
           loadingIndicator.classList.remove('hidden');
         } else {
           loadingIndicator.classList.add('hidden');
         }
         sendButton.disabled = show;
         promptInput.disabled = show;
         fileUpload.disabled = show;
         clearFileButton.disabled = show;
       }
+      // Affichage des erreurs
       function displayError(message) {
         errorTextP.textContent = message || "Une erreur inconnue est survenue.";
         errorMessageDiv.classList.remove('hidden');
         errorMessageDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
       }
+      dismissErrorBtn.addEventListener('click', () => { errorMessageDiv.classList.add('hidden'); });
+      // Ajout d'un message dans le chat
       function addMessageToChat(role, content, isHtml = false) {
         errorMessageDiv.classList.add('hidden');
         const messageWrapper = document.createElement('div');
         messageWrapper.classList.add('flex', role === 'user' ? 'justify-end' : 'justify-start');
         let html = '';
         if (role === 'user') {
           html = `
             <div class="flex items-start space-x-2 max-w-[85%]">
               <div class="message-bubble user-message">
             </div>
           `;
         } else {
           html = `
             <div class="flex items-start space-x-2 max-w-[85%]">
               <div class="w-8 h-8 rounded-full bg-primary-100 flex items-center justify-center flex-shrink-0 dark:bg-primary-900/50">
             </div>
           `;
         }
         messageWrapper.innerHTML = html;
         chatMessages.insertBefore(messageWrapper, loadingIndicator);
+        scrollToBottom();
       }
       function escapeHtml(unsafe) {
+        return unsafe.replace(/&/g, "&amp;")
+                     .replace(/</g, "&lt;")
+                     .replace(/>/g, "&gt;")
+                     .replace(/"/g, "&quot;")
+                     .replace(/'/g, "&#039;");
       }
       // Gestion du cooldown du mode avancé
       function startAdvancedCooldownTimer() {
         advancedToggle.disabled = true;
         advancedToggleCooldownEndTime = Date.now() + COOLDOWN_DURATION;
         const updateTimer = () => {
           const now = Date.now();
           if (now >= advancedToggleCooldownEndTime) {
             advancedCooldownTimerSpan.classList.remove('hidden');
           }
         };
         const intervalId = setInterval(updateTimer, 1000);
         updateTimer();
       }
+      // Chargement de l'historique du chat
       async function loadChatHistory() {
         historyLoadingIndicator.style.display = 'block';
         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);
           }
           const data = await response.json();
           if (data.success && Array.isArray(data.history)) {
             chatMessages.innerHTML = '';
             chatMessages.appendChild(loadingIndicator);
             loadingIndicator.classList.add('hidden');
             if (data.history.length === 0) {
               addMessageToChat('assistant', "Bonjour ! Je suis Mariam, votre assistant IA. Comment puis-je vous aider aujourd'hui ?", true);
             } else {
               data.history.forEach(message => {
                 const isAssistantHtml = message.role === 'assistant';
                 addMessageToChat(message.role, message.text, isAssistantHtml);
               });
             }
             scrollToBottom(false);
           } else {
+            throw new Error(data.error || "Format de réponse invalide.");
           }
         } catch (error) {
           chatMessages.innerHTML = '';
           promptInput.focus();
         }
       }
       // Gestion des fichiers
       function clearFileInput() {
         fileUpload.value = '';
         previewArea.classList.add('hidden');
         filePreview.innerHTML = '';
       }
       fileUpload.addEventListener('change', () => {
         if (fileUpload.files.length > 0) {
           const file = fileUpload.files[0];
           const name = file.name;
           fileNameSpan.textContent = name;
           fileNameSpan.title = name;
           fileChip.classList.remove('hidden');
           if (file.type.startsWith('image/')) {
             const reader = new FileReader();
             reader.onload = (e) => {
             };
             reader.readAsDataURL(file);
           } else {
             filePreview.innerHTML = `
               <div class="flex items-center justify-center py-4">
                 <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg text-center">
           clearFileInput();
         }
       });
       function getFileIcon(fileType) {
         if (fileType.includes('pdf')) return 'fa-file-pdf';
         if (fileType.includes('text')) return 'fa-file-lines';
         return 'fa-file';
       }
       function formatFileSize(bytes) {
         if (bytes < 1024) return bytes + ' octets';
         if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' Ko';
         return (bytes / 1048576).toFixed(1) + ' Mo';
       }
+      clearFileButton.addEventListener('click', clearFileInput);
       // Soumission du formulaire
       chatForm.addEventListener('submit', async (e) => {
         e.preventDefault();
         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.classList.add('hidden');
         if (useAdvanced) {
           const now = Date.now();
           if (now < advancedToggleCooldownEndTime) {
             return;
           }
         }
         let userMessageText = prompt;
         if (file && file.name) {
           userMessageText = prompt ? `${prompt}` : `[Fichier joint: ${file.name}]`;
         }
         addMessageToChat('user', userMessageText);
         const formData = new FormData();
         formData.append('prompt', prompt);
         formData.append('web_search', useWebSearch);
+        if (file) { formData.append('file', file); }
         formData.append('advanced_reasoning', useAdvanced);
         showLoading(true);
         promptInput.value = '';
         clearFileInput();
         advancedToggle.checked = false;
         if (useAdvanced) startAdvancedCooldownTimer();
         try {
+          const response = await fetch(API_CHAT_ENDPOINT, { method: 'POST', body: formData });
           const data = await response.json();
+          if (!response.ok) throw new Error(data.error || `Erreur serveur: ${response.status}`);
           if (data.success && data.message) {
             addMessageToChat('assistant', data.message, true);
           } else {
+            throw new Error(data.error || "Réponse invalide du serveur.");
           }
         } catch (error) {
           displayError(error.message);
           promptInput.focus();
         }
       });
       // Effacement de la conversation
       clearForm.addEventListener('submit', async (e) => {
         e.preventDefault();
         const confirmDialog = document.createElement('div');
         confirmDialog.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50';
         confirmDialog.innerHTML = `
             </div>
           </div>
         `;
         document.body.appendChild(confirmDialog);
         document.body.classList.add('overflow-hidden');
         document.getElementById('cancel-clear').addEventListener('click', () => {
           document.body.removeChild(confirmDialog);
           document.body.classList.remove('overflow-hidden');
         });
         document.getElementById('confirm-clear').addEventListener('click', async () => {
           document.body.removeChild(confirmDialog);
           document.body.classList.remove('overflow-hidden');
           const originalButtonText = e.target.querySelector('button').innerHTML;
           e.target.querySelector('button').innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i>';
           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.classList.add('hidden');
               addMessageToChat('assistant', "Conversation effacée. Comment puis-je vous aider ?", true);
               errorMessageDiv.classList.add('hidden');
             } else {
+              throw new Error(data.error || "Impossible d'effacer la conversation.");
             }
           } catch (error) {
+            displayError(`Erreur lors de l'effacement: ${error.message}`);
           } finally {
             e.target.querySelector('button').innerHTML = originalButtonText;
             e.target.querySelector('button').disabled = false;
           }
         });
       });
       promptInput.addEventListener('keydown', (e) => {
         if (isComposing) return;
         if (e.key === 'Enter' && !e.shiftKey) {
           e.preventDefault();
+          if (!sendButton.disabled) chatForm.dispatchEvent(new Event('submit'));
         }
       });
+      promptInput.addEventListener('compositionstart', () => { isComposing = true; });
+      promptInput.addEventListener('compositionend', () => { isComposing = false; });
       loadChatHistory();
       const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
       prefersDarkScheme.addEventListener('change', (e) => {
+        if (!localStorage.theme) {
+          if (e.matches) { document.documentElement.classList.add('dark'); }
+          else { document.documentElement.classList.remove('dark'); }
         }
       });
     });
   </script>
 </body>
+</html>