Spaces:

Docfile
/

Chatm

Running

App Files Files Community

Docfile commited on about 1 month ago

Commit

b728b86

verified ·

1 Parent(s): 10ad7a5

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +62 -589

templates/index.html CHANGED Viewed

@@ -3,606 +3,79 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Assistant IA</title>
-    <!-- Using Tailwind via CDN -->
-    <script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
-    <!-- Using Marked.js via CDN -->
-    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <style>
-        :root {
-            --primary-blue: #1E40AF; /* blue-800 */
-            --light-blue: #EFF6FF; /* blue-50 */
-            --accent-blue: #3B82F6; /* blue-500 */
-            --text-dark: #111827; /* gray-900 */
-            --text-light: #4B5563; /* gray-600 */
-            --bg-user: #2563EB; /* blue-600 */
-            --bg-assistant: #FFFFFF;
-            --border-color: #E5E7EB; /* gray-200 */
-        }
-        body {
-            background: linear-gradient(135deg, var(--light-blue) 0%, #ffffff 100%);
-            min-height: 100vh;
-            font-family: 'Inter', sans-serif; /* Consider adding Inter font via Google Fonts */
-        }
-        /* Enhanced Glass Effect */
-        .glass-effect {
-            background: rgba(255, 255, 255, 0.8); /* Slightly less transparent */
-            backdrop-filter: blur(12px) saturate(180%); /* Increased blur and saturation */
-            -webkit-backdrop-filter: blur(12px) saturate(180%);
-            border: 1px solid rgba(230, 230, 230, 0.3); /* Softer border */
-            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); /* Softer shadow */
-        }
-        /* Message Styling */
-        .message-container {
-            display: flex;
-            margin-bottom: 1rem;
-            opacity: 0;
-            transform: translateY(10px);
-            animation: fadeIn 0.5s ease forwards;
-        }
-        @keyframes fadeIn {
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-        .message-bubble {
-            max-width: 75%;
-            padding: 0.75rem 1rem; /* 12px 16px */
-            border-radius: 1rem; /* large */
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-            word-wrap: break-word; /* Ensure long words break */
-            overflow-wrap: break-word; /* Modern standard */
-        }
-        .message-container.user {
-            justify-content: flex-end;
-        }
-        .message-container.assistant {
-            justify-content: flex-start;
-        }
-        .message-bubble.user {
-            background-color: var(--bg-user);
-            color: white;
-            border-bottom-right-radius: 0.25rem; /* small */
-        }
-        .message-bubble.assistant {
-            background-color: var(--bg-assistant);
-            color: var(--text-dark);
-            border: 1px solid var(--border-color);
-            border-bottom-left-radius: 0.25rem; /* small */
-        }
-        /* Styling for code blocks generated by marked.js */
-        .message-bubble pre {
-            background-color: #f3f4f6; /* gray-100 */
-            color: #1f2937; /* gray-800 */
-            padding: 1em;
-            border-radius: 0.5rem; /* md */
-            overflow-x: auto;
-            font-family: 'Courier New', Courier, monospace;
-            font-size: 0.9em;
-            margin: 0.5em 0;
-        }
-        .message-bubble code:not(pre code) { /* Inline code */
-             background-color: #e5e7eb; /* gray-200 */
-             padding: 0.2em 0.4em;
-             border-radius: 0.25rem;
-             font-size: 0.9em;
-        }
-        .message-bubble ul, .message-bubble ol {
-            padding-left: 1.5rem;
-            margin-top: 0.5rem;
-            margin-bottom: 0.5rem;
-        }
-        .message-bubble li > p { /* Prevent extra margins inside list items */
-             margin-bottom: 0.25rem;
-        }
-        .message-bubble blockquote {
-             border-left: 4px solid var(--accent-blue);
-             padding-left: 1rem;
-             margin-left: 0;
-             color: var(--text-light);
-             font-style: italic;
-        }
-        /* Quick Actions */
-        .quick-action {
-            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-blue) 100%);
-            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-            color: white;
-            font-weight: 500;
-        }
-        .quick-action:hover {
-            transform: translateY(-3px) scale(1.03);
-            box-shadow: 0 6px 15px rgba(59, 130, 246, 0.35);
-        }
-        .quick-action:active {
-            transform: translateY(-1px) scale(0.98);
-            box-shadow: 0 3px 8px rgba(59, 130, 246, 0.25);
-        }
-        .quick-action svg {
-            transition: transform 0.2s ease-in-out;
-        }
-        .quick-action:hover svg {
-             transform: rotate(-5deg) scale(1.1);
-        }
-        /* Input Area */
-        .custom-input {
-            border: 2px solid var(--border-color);
-            transition: all 0.3s ease;
-            color: var(--text-dark);
-            padding-right: 3rem; /* Space for potential icons inside input */
-        }
-        .custom-input::placeholder {
-            color: #9ca3af; /* gray-400 */
-        }
-        .custom-input:focus {
-            border-color: var(--accent-blue);
-            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
-            outline: none;
-        }
-        /* Send Button */
-        #sendButton {
-             /* Inherits quick-action styles */
-             min-width: 80px; /* Ensure button doesn't shrink too much */
-        }
-        /* Loading Spinner */
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        .loading-spinner {
-            border: 4px solid rgba(59, 130, 246, 0.2); /* Lighter border */
-            border-top-color: var(--accent-blue); /* Spinner color */
-            animation: spin 1s linear infinite;
-        }
-        #loadingOverlay {
-             transition: opacity 0.3s ease-in-out;
-        }
-        /* File Upload Preview */
-        .file-upload-area {
-            background: rgba(59, 130, 246, 0.05);
-            border: 2px dashed var(--accent-blue);
-            transition: all 0.3s ease;
-        }
-        .file-upload-area:hover {
-            background: rgba(59, 130, 246, 0.1);
-            border-color: var(--primary-blue);
-        }
-        #fileName {
-            font-size: 0.9rem;
-            font-style: italic;
-        }
-        /* Scrollbar */
-        #chatMessages::-webkit-scrollbar {
-            width: 8px;
-        }
-        #chatMessages::-webkit-scrollbar-track {
-            background: var(--light-blue);
-            border-radius: 10px;
-        }
-        #chatMessages::-webkit-scrollbar-thumb {
-            background-color: var(--accent-blue);
-            border-radius: 10px;
-            border: 2px solid var(--light-blue);
-        }
-        #chatMessages {
-            scrollbar-width: thin;
-            scrollbar-color: var(--accent-blue) var(--light-blue);
-        }
     </style>
 </head>
-<body class="text-gray-800">
-    <div class="container mx-auto px-4 py-8 max-w-4xl"> <!-- Centered & Max Width -->
-        <!-- Header -->
-        <header class="glass-effect rounded-2xl p-4 md:p-6 mb-6 flex flex-col sm:flex-row justify-between items-center">
-            <div class="flex items-center space-x-3 mb-4 sm:mb-0">
-                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-blue-600 to-blue-800 flex items-center justify-center shadow-md">
-                    <svg class="w-7 h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
-                    </svg>
-                </div>
-                <div>
-                    <h1 class="text-xl md:text-2xl font-bold text-blue-900">Assistant IA</h1>
-                    <p class="text-sm text-green-600 font-medium">En ligne</p>
-                </div>
-            </div>
-            <div class="flex items-center space-x-3">
-                <label class="flex items-center space-x-2 text-sm text-blue-900 cursor-pointer hover:text-blue-700">
-                    <input type="checkbox" id="webSearchToggle" class="form-checkbox h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
-                    <span>Recherche web</span>
-                </label>
-                <button id="clearChatButton" title="Effacer la conversation" class="bg-red-500 hover:bg-red-600 text-white px-3 py-2 rounded-lg transition-colors duration-200 text-sm font-medium flex items-center space-x-1">
-                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
-                    <span>Effacer</span>
-                </button>
-            </div>
-        </header>
-        <!-- Quick Actions (Optional: Keep or remove based on preference) -->
-        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3 mb-6">
-             <!-- Example Quick Action Button -->
-            <button data-prompt="Effectuez une recherche sur " class="quick-action p-3 rounded-xl flex flex-col sm:flex-row items-center justify-center space-y-1 sm:space-y-0 sm:space-x-2 text-xs sm:text-sm">
-                <svg class="w-5 h-5 mb-1 sm:mb-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
-                <span>Recherche</span>
-            </button>
-             <button data-prompt="Donnez-moi des idées sur " class="quick-action p-3 rounded-xl flex flex-col sm:flex-row items-center justify-center space-y-1 sm:space-y-0 sm:space-x-2 text-xs sm:text-sm">
-                <svg class="w-5 h-5 mb-1 sm:mb-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
-                <span>Brainstorm</span>
-            </button>
-            <button data-prompt="Analysez les données suivantes : " class="quick-action p-3 rounded-xl flex flex-col sm:flex-row items-center justify-center space-y-1 sm:space-y-0 sm:space-x-2 text-xs sm:text-sm">
-                <svg class="w-5 h-5 mb-1 sm:mb-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/></svg>
-                <span>Analyse</span>
-            </button>
-             <button data-prompt="Créez une image de " class="quick-action p-3 rounded-xl flex flex-col sm:flex-row items-center justify-center space-y-1 sm:space-y-0 sm:space-x-2 text-xs sm:text-sm">
-                <svg class="w-5 h-5 mb-1 sm:mb-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
-                <span>Images</span>
-            </button>
-            <button data-prompt="Écrivez du code pour " class="quick-action p-3 rounded-xl flex flex-col sm:flex-row items-center justify-center space-y-1 sm:space-y-0 sm:space-x-2 text-xs sm:text-sm">
-                <svg class="w-5 h-5 mb-1 sm:mb-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
-                <span>Code</span>
-            </button>
-        </div>
-        <!-- Chat Messages -->
-        <div id="chatMessages" class="glass-effect rounded-2xl p-4 md:p-6 mb-6 h-[50vh] md:h-[60vh] overflow-y-auto space-y-4">
-            <!-- Messages Rendered by Server (Jinja2) -->
-            {% for message in messages %}
-                <div class="message-container {{ message.role }}"> {# Use role for class #}
-                    <div class="message-bubble {{ message.role }}">
-                         {# Use marked.parse and sanitize output #}
-                         {{ message.content | safe }} {# Assume backend sends sanitized HTML or use JS #}
-                    </div>
-                </div>
-            {% endfor %}
-            <!-- New messages will be appended here by JavaScript -->
-        </div>
-        <!-- Input Area -->
-        <div class="glass-effect rounded-2xl p-4 md:p-6">
-            <!-- File Upload Area -->
-            <div class="mb-4">
-                <input type="file" id="fileUpload" class="hidden" accept=".jpg,.jpeg,.png,.gif,.webp,.heic,.heif,.pdf,.txt,.mp3,.wav,.ogg,.mp4,.mov,.avi">
-                <label for="fileUpload" class="file-upload-area p-4 rounded-xl flex flex-col items-center justify-center cursor-pointer hover:bg-blue-50 text-center">
-                    <svg class="w-8 h-8 text-blue-500 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
-                    </svg>
-                    <span id="fileName" class="text-blue-600 text-sm">Cliquez ou déposez un fichier ici (Max 100Mo)</span>
-                     <span id="uploadStatus" class="text-xs text-gray-500 mt-1"></span>
                 </label>
             </div>
-            <!-- Text Input & Send Button -->
-            <div class="flex items-center space-x-3">
-                <div class="relative flex-grow">
-                    <textarea id="messageInput"
-                        class="custom-input w-full rounded-xl px-4 py-3 pr-12 text-sm md:text-base resize-none border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
-                        placeholder="Écrivez votre message... (Shift+Enter pour nouvelle ligne)"
-                        rows="1"
-                        style="min-height: 48px; max-height: 150px;"
-                        oninput="this.style.height = 'auto'; this.style.height = (this.scrollHeight) + 'px';"
-                    ></textarea>
-                </div>
-                <button id="sendButton" title="Envoyer le message" class="quick-action px-4 py-3 rounded-xl flex items-center justify-center self-end transition-transform duration-150 ease-in-out">
-                     <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
-                     <span class="sr-only">Envoyer</span>
-                </button>
             </div>
         </div>
-        <footer class="text-center mt-6 text-xs text-gray-500">
-             Propulsé par Gemini | Conçu par Youssouf
-        </footer>
-    </div>
-    <!-- Loading Overlay -->
-    <div id="loadingOverlay" class="fixed inset-0 bg-white bg-opacity-75 backdrop-filter backdrop-blur-sm hidden items-center justify-center z-50" style="display: none;">
-        <div class="loading-spinner w-16 h-16 rounded-full"></div>
-        <span id="loadingText" class="ml-4 text-blue-800 font-medium">Chargement...</span>
-    </div>
-    <script>
-        const messageInput = document.getElementById('messageInput');
-        const chatMessages = document.getElementById('chatMessages');
-        const webSearchToggle = document.getElementById('webSearchToggle');
-        const fileUpload = document.getElementById('fileUpload');
-        const fileNameLabel = document.getElementById('fileName');
-        const uploadStatusLabel = document.getElementById('uploadStatus');
-        const loadingOverlay = document.getElementById('loadingOverlay');
-        const loadingText = document.getElementById('loadingText');
-        const sendButton = document.getElementById('sendButton');
-        const clearChatButton = document.getElementById('clearChatButton');
-        let currentFileName = null; // Track uploaded file name
-        // --- Utility Functions ---
-        function showLoading(text = "Chargement...") {
-            loadingText.textContent = text;
-            loadingOverlay.style.display = 'flex'; // Use style.display
-            loadingOverlay.style.opacity = 1;
-        }
-        function hideLoading() {
-             // Add a small delay for smoother transition if needed
-            loadingOverlay.style.opacity = 0;
-            setTimeout(() => {
-               loadingOverlay.style.display = 'none';
-            }, 300); // Match CSS transition duration
-        }
-        function sanitizeHTML(str) {
-            // Basic sanitizer (consider a more robust library like DOMPurify for production)
-            const temp = document.createElement('div');
-            temp.textContent = str;
-            return temp.innerHTML;
-        }
-        function addMessage(content, role = 'assistant') {
-            const messageContainer = document.createElement('div');
-            messageContainer.className = `message-container ${role}`; // 'user' or 'assistant'
-            const messageBubble = document.createElement('div');
-            messageBubble.className = `message-bubble ${role}`;
-            // Use marked.parse for Markdown rendering
-            // Ensure marked is loaded before this script runs
-            if (typeof marked === 'undefined') {
-                 console.error("Marked.js library is not loaded.");
-                 messageBubble.textContent = content; // Fallback to plain text
-            } else {
-                 // Basic sanitization - FOR PRODUCTION, USE A ROBUST LIBRARY (e.g., DOMPurify)
-                 // marked.parse might return HTML, ensure it's safe before inserting
-                 const rawHtml = marked.parse(content);
-                 // Simple placeholder for sanitization concept:
-                 // const sanitizedHtml = yourSanitizationFunction(rawHtml);
-                 // For now, we'll trust the backend/marked output for this example, but BE CAREFUL.
-                 messageBubble.innerHTML = rawHtml; // Potentially unsafe if content isn't trusted
-            }
-            messageContainer.appendChild(messageBubble);
-            chatMessages.appendChild(messageContainer);
-            // Smooth scroll to the bottom
-            chatMessages.scrollTo({ top: chatMessages.scrollHeight, behavior: 'smooth' });
-        }
-        // --- Event Listeners ---
-        sendButton.addEventListener('click', sendMessage);
-        messageInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault(); // Prevent default Enter behavior (new line)
-                sendMessage();
-            }
-        });
-        clearChatButton.addEventListener('click', clearChat);
-        fileUpload.addEventListener('change', handleFileUpload);
-        document.querySelectorAll('.quick-action[data-prompt]').forEach(button => {
-            button.addEventListener('click', () => {
-                const promptText = button.getAttribute('data-prompt');
-                messageInput.value = promptText;
-                messageInput.focus();
-                // Auto-resize textarea after setting value
-                messageInput.style.height = 'auto';
-                messageInput.style.height = (messageInput.scrollHeight) + 'px';
-                // Optional: Place cursor at the end
-                messageInput.setSelectionRange(promptText.length, promptText.length);
-            });
-        });
-        // --- Core Functions ---
-        async function sendMessage() {
-            const messageText = messageInput.value.trim();
-            if (!messageText && !currentFileName) { // Don't send empty messages unless a file is context
-                 console.log("Empty message, not sending.");
-                 return;
-            }
-            // Add user message optimistically to UI
-            // Use the raw text, backend response will be formatted
-            addMessage(sanitizeHTML(messageText), 'user');
-            const userMessageToSend = messageText; // Keep the original text for sending
-            messageInput.value = ''; // Clear input
-            messageInput.style.height = '48px'; // Reset textarea height
-            showLoading("Envoi en cours...");
-            try {
-                const response = await fetch('/send_message', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Accept': 'application/json' // Explicitly accept JSON
-                    },
-                    body: JSON.stringify({
-                        message: userMessageToSend,
-                        web_search: webSearchToggle.checked
-                        // File info is now handled server-side via session
-                    })
-                });
-                 hideLoading(); // Hide loading indicator once response headers are received
-                if (!response.ok) {
-                     // Try to get error message from JSON response body
-                     let errorMsg = `Erreur HTTP: ${response.status}`;
-                     try {
-                          const errorData = await response.json();
-                          errorMsg = `Erreur: ${errorData.error || response.statusText}`;
-                     } catch (jsonError) {
-                           // If response is not JSON, use statusText
-                          console.warn("Could not parse error response as JSON:", jsonError);
-                     }
-                     addMessage(errorMsg, 'assistant'); // Display error in chat
-                     console.error("Send message error:", errorMsg);
-                     return; // Stop processing on error
-                }
-                const data = await response.json();
-                if (data.error) {
-                    addMessage(`Erreur: ${sanitizeHTML(data.error)}`, 'assistant');
-                } else if (data.response) {
-                    addMessage(data.response, 'assistant'); // Add AI response (already Markdown processed if backend does it, or process here)
-                     // If files were processed, reset the file indicator?
-                     // Decide based on whether files persist across messages
-                     // resetFileUploadUI(); // Uncomment if needed
-                } else {
-                     addMessage("Réponse inattendue du serveur.", 'assistant');
-                }
-            } catch (error) {
-                hideLoading();
-                console.error('Erreur lors de l\'envoi du message:', error);
-                addMessage(`Erreur de connexion ou de traitement: ${sanitizeHTML(error.message)}`, 'assistant');
-            }
-        }
-        async function handleFileUpload(event) {
-            const file = event.target.files[0];
-            if (!file) return;
-            // Basic validation (optional: add more checks like type if needed)
-            const maxSize = 100 * 1024 * 1024; // 100MB
-            if (file.size > maxSize) {
-                uploadStatusLabel.textContent = `Fichier trop volumineux (Max ${maxSize / 1024 / 1024}Mo).`;
-                uploadStatusLabel.style.color = 'red';
-                fileUpload.value = ''; // Clear the file input
-                return;
-            }
-            fileNameLabel.textContent = `Fichier sélectionné : ${file.name}`;
-            uploadStatusLabel.textContent = 'Upload en cours...';
-            uploadStatusLabel.style.color = 'gray';
-            showLoading("Téléversement du fichier...");
-            const formData = new FormData();
-            formData.append('file', file);
-            try {
-                const response = await fetch('/upload', {
-                    method: 'POST',
-                    body: formData
-                    // No 'Content-Type' header needed, browser sets it for FormData
-                });
-                hideLoading();
-                const data = await response.json();
-                if (!response.ok || data.error) {
-                    const errorMsg = data.error || `Erreur HTTP ${response.status}`;
-                    uploadStatusLabel.textContent = `Échec: ${sanitizeHTML(errorMsg)}`;
-                    uploadStatusLabel.style.color = 'red';
-                    fileNameLabel.textContent = 'Cliquez ou déposez un fichier ici (Max 100Mo)'; // Reset label
-                    fileUpload.value = ''; // Clear the file input
-                    currentFileName = null;
-                    console.error("File upload error:", errorMsg);
-                } else if (data.success) {
-                    uploadStatusLabel.textContent = 'Prêt à être envoyé avec votre message.';
-                    uploadStatusLabel.style.color = 'green';
-                    currentFileName = data.filename; // Store filename indicating success
-                    // Optionally add a message to chat confirming upload?
-                    // addMessage(`Fichier "${sanitizeHTML(data.filename)}" prêt.`, 'system'); // Example system message
-                } else {
-                     uploadStatusLabel.textContent = 'Réponse serveur inattendue.';
-                     uploadStatusLabel.style.color = 'red';
-                     currentFileName = null;
-                }
-            } catch (error) {
-                hideLoading();
-                console.error('Erreur lors de l\'upload:', error);
-                uploadStatusLabel.textContent = `Erreur: ${sanitizeHTML(error.message)}`;
-                uploadStatusLabel.style.color = 'red';
-                fileNameLabel.textContent = 'Cliquez ou déposez un fichier ici (Max 100Mo)'; // Reset label
-                fileUpload.value = ''; // Clear the file input
-                currentFileName = null;
-            }
-        }
-        async function clearChat() {
-             if (!confirm("Êtes-vous sûr de vouloir effacer toute la conversation et les fichiers uploadés ?")) {
-                 return;
-            }
-            showLoading("Effacement...");
-            try {
-                const response = await fetch('/clear_chat', { method: 'POST' });
-                hideLoading();
-                if (!response.ok) {
-                     throw new Error(`Erreur serveur: ${response.status}`);
-                }
-                const data = await response.json();
-                if (data.success) {
-                    chatMessages.innerHTML = ''; // Clear messages on frontend
-                    resetFileUploadUI();
-                    messageInput.value = ''; // Clear input field
-                     messageInput.style.height = '48px'; // Reset textarea height
-                    console.log("Chat cleared successfully.");
-                     // Optionally add a confirmation message
-                     // addMessage("Conversation effacée.", "system");
-                } else {
-                    throw new Error("Le serveur n'a pas confirmé l'effacement.");
-                }
-            } catch (error) {
-                hideLoading();
-                console.error('Erreur lors de l\'effacement:', error);
-                // Maybe display error in a non-chat way (e.g., alert or status bar)
-                alert(`Erreur lors de l'effacement : ${error.message}`);
-            }
-        }
-        function resetFileUploadUI() {
-             fileNameLabel.textContent = 'Cliquez ou déposez un fichier ici (Max 100Mo)';
-             uploadStatusLabel.textContent = '';
-             fileUpload.value = ''; // Clear the actual file input
-             currentFileName = null;
-        }
-        // --- Initial Setup ---
-        // Scroll to bottom on initial load (after server-rendered messages)
-        window.addEventListener('load', () => {
-            chatMessages.scrollTop = chatMessages.scrollHeight;
-             // Initial resize check for text area in case of cached content
-            messageInput.style.height = 'auto';
-            messageInput.style.height = (messageInput.scrollHeight) + 'px';
-            messageInput.focus(); // Focus input on load
-             // Initial rendering of messages from server uses Jinja template.
-             // We need to apply marked AFTER the page loads to the server-rendered content.
-             document.querySelectorAll('.message-bubble').forEach(bubble => {
-                 // Re-parse content that came from the server template if it wasn't pre-rendered as HTML
-                 // This assumes the server sent raw markdown in message.content
-                 // If the server sends pre-rendered HTML via `| safe`, this step might not be needed
-                 // or could cause double-rendering issues. Adjust based on backend output.
-                 // Let's assume backend sends raw markdown for consistency with JS added messages:
-                 if (typeof marked !== 'undefined') {
-                      const currentContent = bubble.innerHTML; // Get the raw content from template
-                      bubble.innerHTML = marked.parse(currentContent); // Parse and replace
-                 }
-             });
-        });
-         // Optional: Add online/offline status indicators
-         window.addEventListener('offline', () => addMessage('⚠️ Vous êtes hors ligne. Vérifiez votre connexion.', 'system'));
-         window.addEventListener('online', () => addMessage('✅ Vous êtes de nouveau en ligne.', 'system'));
-    </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mariam AI!</title>
     <style>
+        body { font-family: sans-serif; margin: 20px; background-color: #f0f2f6; }
+        .chat-container { max-width: 800px; margin: auto; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); display: flex; flex-direction: column; height: 85vh; }
+        .chat-header { background-color: #4CAF50; color: white; padding: 15px; text-align: center; border-top-left-radius: 8px; border-top-right-radius: 8px; }
+        .chat-messages { flex-grow: 1; overflow-y: auto; padding: 20px; border-bottom: 1px solid #ddd; }
+        .message { margin-bottom: 15px; padding: 10px 15px; border-radius: 15px; max-width: 80%; word-wrap: break-word; }
+        .message.user { background-color: #DCF8C6; align-self: flex-end; margin-left: auto; border-bottom-right-radius: 0; }
+        .message.assistant { background-color: #f1f1f1; align-self: flex-start; border-bottom-left-radius: 0; white-space: pre-wrap; /* Respecte les sauts de ligne et espaces */ }
+        .message strong { font-weight: bold; display: block; margin-bottom: 5px; }
+        .chat-input { display: flex; padding: 15px; border-top: 1px solid #ddd; background-color: #f8f9fa; }
+        .chat-input input[type="text"] { flex-grow: 1; padding: 10px; border: 1px solid #ccc; border-radius: 20px; margin-right: 10px; }
+        .chat-input button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 20px; cursor: pointer; }
+        .chat-input button:hover { background-color: #45a049; }
+        .settings { padding: 15px; border-top: 1px solid #ddd; background-color: #f8f9fa; font-size: 0.9em; display: flex; justify-content: space-between; align-items: center; }
+        .settings label { margin-right: 10px;}
+        .error { color: red; text-align: center; padding: 10px; }
+        .spinner { text-align: center; padding: 10px; color: #555; font-style: italic;}
     </style>
 </head>
+<body>
+<div class="chat-container">
+    <div class="chat-header">
+        <h1>Mariam AI!</h1>
+    </div>
+    <div class="chat-messages" id="chat-messages">
+        {% for message in chat_history %}
+            <div class="message {{ message.role }}">
+                <strong>{{ message.role|capitalize }}</strong>
+                {{ message.text }}
+            </div>
+        {% endfor %}
+        <!-- Zone pour afficher "Recherche web en cours..." -->
+        {% if processing_message and web_search_active %}
+            <div class="spinner">Recherche web en cours...</div>
+        {% endif %}
+         <!-- Zone pour afficher "Génération de la réponse..." -->
+        {% if processing_message %}
+            <div class="spinner">Génération de la réponse...</div>
+        {% endif %}
+    </div>
+    {% if error %}
+        <div class="error">{{ error }}</div>
+    {% endif %}
+    <form method="POST" action="{{ url_for('chat') }}" enctype="multipart/form-data">
+        <div class="settings">
+            <div>
+                 <label for="web_search_toggle">
+                    <input type="checkbox" id="web_search_toggle" name="web_search" value="true" {% if web_search_active %}checked{% endif %}>
+                    Activer la recherche web
                 </label>
             </div>
+             <div>
+                <label for="file_upload">Uploader (jpg, png, pdf, txt):</label>
+                <input type="file" id="file_upload" name="file" accept=".jpg,.jpeg,.png,.pdf,.txt"> <!-- Limiter les types ici -->
             </div>
         </div>
+        <div class="chat-input">
+            <input type="text" name="prompt" placeholder="Posez votre question..." required autofocus>
+            <button type="submit">Envoyer</button>
+        </div>
+    </form>
+</div>
+<script>
+    // Scroll vers le bas automatiquement
+    const chatMessages = document.getElementById('chat-messages');
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+</script>
 </body>
 </html>