Chatm2

Sleeping

App Files Files Community

Docfile commited on Sep 17

Commit

2482b18

verified ·

1 Parent(s): 92666fa

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +177 -379

templates/index.html CHANGED Viewed

@@ -3,371 +3,184 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title> AI Assistant - Flat Black & White</title>
-    <style>
-        /* --- RESET ET CONFIGURATION GLOBALE --- */
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        html {
-            scroll-behavior: smooth;
-        }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-            background-color: #121212; /* Fond sombre principal */
-            color: #f1f1f1; /* Couleur de texte par défaut */
-            min-height: 100vh;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            padding: 0; /* Pas de padding sur le body pour le mobile */
-        }
-        /* --- CONTENEUR PRINCIPAL DU CHAT --- */
-        .chat-container {
-            width: 100%;
-            max-width: 800px;
-            height: 100vh; /* Prend toute la hauteur par défaut (mobile-first) */
-            background-color: #1e1e1e; /* Fond du conteneur légèrement plus clair */
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-        }
-        /* --- EN-TÊTE --- */
-        .header {
-            background-color: #1e1e1e;
-            color: #ffffff;
-            padding: 20px;
-            text-align: center;
-            border-bottom: 1px solid #333; /* Séparateur plat */
-            flex-shrink: 0;
-        }
-        .header h1 {
-            font-size: 22px;
-            font-weight: 600;
-            margin-bottom: 5px;
         }
-        .header p {
-            font-size: 14px;
-            color: #aaa;
         }
-        .controls {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 20px;
-            margin-top: 15px;
         }
-        .thinking-toggle {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            font-size: 14px;
-            color: #ccc;
         }
-        .switch {
-            position: relative;
-            display: inline-block;
-            width: 50px;
-            height: 28px;
         }
-        .switch input { opacity: 0; width: 0; height: 0; }
-        .slider {
-            position: absolute;
-            cursor: pointer;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: #444;
-            transition: .2s;
-            border-radius: 28px;
-        }
-        .slider:before {
-            position: absolute;
-            content: "";
-            height: 20px;
-            width: 20px;
-            left: 4px;
-            bottom: 4px;
-            background-color: #f1f1f1;
-            transition: .2s;
-            border-radius: 50%;
         }
-        input:checked + .slider { background-color: #777; }
-        input:checked + .slider:before { transform: translateX(22px); }
-        .btn-reset {
-            background: transparent;
-            border: 1px solid #555;
-            color: #ccc;
-            padding: 8px 16px;
-            border-radius: 20px;
-            cursor: pointer;
-            font-size: 14px;
-            transition: background-color 0.2s ease;
         }
-        .btn-reset:hover { background-color: #333; }
-        /* --- ZONE DES MESSAGES --- */
-        .messages {
-            flex: 1;
-            overflow-y: auto;
-            padding: 20px 15px;
-            display: flex;
-            flex-direction: column;
-            gap: 15px;
         }
-        .message {
-            max-width: 85%;
-            padding: 12px 18px;
-            border-radius: 18px;
-            font-size: 16px;
-            line-height: 1.5;
             animation: fadeIn 0.3s ease;
         }
-        .message.user {
-            background-color: #3a3a3a; /* Couleur message utilisateur */
-            color: #f1f1f1;
-            align-self: flex-end;
-            border-bottom-right-radius: 4px;
-        }
-        .message.assistant {
-            background-color: #2c2c2c; /* Couleur message assistant */
-            color: #e0e0e0;
-            align-self: flex-start;
-            border-bottom-left-radius: 4px;
-        }
-        .message ul { margin-top: 10px; padding-left: 20px; }
-        .thoughts {
-            background: #252525;
-            color: #aaa;
-            border-left: 3px solid #666; /* Indicateur visuel plat */
-            margin: 10px 0;
-            padding: 15px;
-            border-radius: 8px;
-            font-style: italic;
-            font-size: 14px;
-        }
-        .thoughts-header {
             font-weight: 600;
-            margin-bottom: 8px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            color: #ccc;
-        }
-        /* --- ZONE DE SAISIE --- */
-        .input-container {
-            padding: 15px;
-            background-color: #1e1e1e;
-            border-top: 1px solid #333;
-            flex-shrink: 0;
-        }
-        .input-row { display: flex; gap: 10px; align-items: flex-end; }
-        .input-wrapper { flex: 1; position: relative; }
-        .message-input {
-            width: 100%;
-            min-height: 48px;
-            padding: 12px 55px 12px 20px;
-            border: 1px solid #444;
-            border-radius: 24px;
-            font-size: 16px;
-            resize: none;
-            outline: none;
-            transition: border-color 0.2s ease;
-            font-family: inherit;
-            background-color: #2c2c2c;
-            color: #f1f1f1;
-        }
-        .message-input::placeholder { color: #777; }
-        .message-input:focus { border-color: #888; }
-        .send-button {
-            position: absolute;
-            right: 4px;
-            top: 50%;
-            transform: translateY(-50%);
-            background-color: #333;
-            border: none;
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-            color: #f1f1f1;
-            cursor: pointer;
-            transition: background-color 0.2s ease;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 20px; /* Taille de l'icône */
         }
-        .send-button:hover:not(:disabled) { background-color: #444; }
-        .send-button:disabled { background: #252525; color: #555; cursor: not-allowed; }
-        .file-input { display: none; }
-        .file-button {
             background: #333;
-            border: none;
-            color: #f1f1f1;
-            height: 48px;
-            width: 48px;
-            border-radius: 50%;
-            cursor: pointer;
-            font-size: 20px; /* Taille de l'icône */
-            transition: background-color 0.2s ease;
-            flex-shrink: 0;
         }
-        .file-button:hover { background-color: #444; }
-        .file-preview {
-            margin-bottom: 10px;
-            padding: 10px;
-            background: #2c2c2c;
-            border-radius: 10px;
-            font-size: 14px;
-            display: none;
         }
-        /* --- INDICATEURS ET NOTIFICATIONS --- */
-        .typing-indicator {
-            display: none;
-            align-items: center;
-            gap: 8px;
-            color: #999;
             font-style: italic;
-            padding: 0 15px 10px;
-        }
-        .typing-dots span {
-            width: 8px; height: 8px; border-radius: 50%;
-            background: #666;
-            animation: typing 1.4s infinite ease-in-out;
-        }
-        .typing-dots span:nth-child(1) { animation-delay: 0s; }
-        .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
-        .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
-        .error {
-            background: #4d1c20; color: #ffacb6;
-            border-left: 3px solid #e53935;
-            padding: 15px; border-radius: 8px; margin: 10px 0;
-        }
-        .success {
-            background: #1a4331; color: #a6f1c4;
-            border-left: 3px solid #2e7d32;
-            padding: 15px; border-radius: 8px; margin: 10px 0;
-        }
-        /* --- STYLE DE LA SCROLLBAR (THÈME SOMBRE) --- */
-        .messages::-webkit-scrollbar { width: 8px; }
-        .messages::-webkit-scrollbar-track { background: #1e1e1e; }
-        .messages::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
-        .messages::-webkit-scrollbar-thumb:hover { background: #777; }
-        /* --- ANIMATIONS --- */
-        @keyframes typing {
-            0%, 60%, 100% { transform: scale(0.8); opacity: 0.5; }
-            30% { transform: scale(1.2); opacity: 1; }
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        /* --- RESPONSIVE DESIGN (pour les écrans plus larges) --- */
-        @media (min-width: 768px) {
-            body {
-                padding: 20px; /* Ajoute de l'espace autour sur grand écran */
-            }
-            .chat-container {
-                height: 90vh; /* Hauteur limitée sur grand écran */
-                border-radius: 12px;
-                border: 1px solid #333;
-            }
         }
     </style>
 </head>
-<body>
-    <div class="chat-container">
-        <div class="header">
-            <h1>Mariam AI Assistant</h1>
-            <p>❤️</p>
-            <div class="controls">
-                <div class="thinking-toggle">
-                    <span>réflexion Mode:</span>
-                    <label class="switch">
-                        <input type="checkbox" id="thinkingToggle" checked>
-                        <span class="slider"></span>
-                    </label>
                 </div>
-                <button class="btn-reset" onclick="resetConversation()">
-                    🔄 Reset
-                </button>
             </div>
         </div>
-        <div class="messages" id="messages">
-             <div class="message assistant">
-                <div>👋 bonjour, sur quoi allons nous travailler aujourdhui ?</div>
-                 </div>
         </div>
-        <div class="typing-indicator" id="typingIndicator">
             <span>L'assistant réfléchit</span>
-            <div class="typing-dots">
-                <span></span>
-                <span></span>
-                <span></span>
             </div>
         </div>
-        <div class="input-container">
-            <div class="file-preview" id="filePreview"></div>
-            <div class="input-row">
-                <input type="file" id="fileInput" class="file-input" accept="image/*,video/*,.pdf,.txt,.csv,.json" onchange="handleFileSelect(event)">
-                <button class="file-button" onclick="document.getElementById('fileInput').click()" title="Joindre un fichier">
                     📎
                 </button>
-                <div class="input-wrapper">
                     <textarea
                         id="messageInput"
-                        class="message-input"
                         placeholder="Tapez votre message ici..."
                         rows="1"
                         onkeydown="handleKeyDown(event)"
                         oninput="autoResize(this)"
                     ></textarea>
-                    <button class="send-button" id="sendButton" onclick="sendMessage()" title="Envoyer">
                         ➤
                     </button>
                 </div>
@@ -375,14 +188,19 @@
         </div>
     </div>
-    <!-- SCRIPT ORIGINAL ET FONCTIONNEL -->
     <script>
         let currentFile = null;
         let conversationId = 'session_' + Date.now();
         function autoResize(textarea) {
             textarea.style.height = 'auto';
-            textarea.style.height = Math.min(textarea.scrollHeight, 150) + 'px';
         }
         function handleKeyDown(event) {
@@ -409,12 +227,12 @@
                 if (data.success) {
                     currentFile = data;
                     filePreview.innerHTML = `
-                        <div style="display: flex; justify-content: space-between; align-items: center;">
                             <span>📎 ${data.filename}</span>
-                            <button onclick="removeFile()" style="background: #555; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer;">✕</button>
                         </div>
                     `;
-                    filePreview.style.display = 'block';
                 } else {
                     showError('Erreur lors du téléchargement: ' + data.error);
                 }
@@ -426,7 +244,7 @@
         function removeFile() {
             currentFile = null;
-            document.getElementById('filePreview').style.display = 'none';
             document.getElementById('fileInput').value = '';
         }
@@ -446,16 +264,15 @@
                 addMessage('user', message);
             }
-            typingIndicator.style.display = 'flex';
             messageInput.value = '';
             autoResize(messageInput);
-            const thinkingEnabled = document.getElementById('thinkingToggle').checked;
             const endpoint = currentFile ? '/chat_with_file' : '/chat';
             const payload = {
                 message: message || 'Analyse ce fichier',
-                thinking_enabled: thinkingEnabled,
                 conversation_id: conversationId
             };
@@ -477,12 +294,11 @@
                 const decoder = new TextDecoder();
                 let buffer = '';
                 let messageElement = null;
-                let thoughtsElement = null;
                 function processStream() {
                     return reader.read().then(({ done, value }) => {
                         if (done) {
-                            // La fin du stream est gérée par le message 'end'
                             return;
                         }
@@ -499,24 +315,21 @@
                                         if (!messageElement) {
                                             messageElement = addMessage('assistant', '');
                                         }
-                                        messageElement.innerHTML += formatChunk(data.content);
-                                    } else if (data.type === 'thought' && thinkingEnabled) {
-                                        if (!thoughtsElement) {
-                                            thoughtsElement = addThoughts('');
-                                            thoughtsElement.innerHTML = `<div class="thoughts-header">🧠 Réflexion de l'assistant:</div><div class="thought-content"></div>`;
-                                        }
-                                        thoughtsElement.querySelector('.thought-content').innerHTML += formatChunk(data.content);
                                     } else if (data.type === 'error') {
                                         showError(data.content);
                                     } else if (data.type === 'end') {
-                                        typingIndicator.style.display = 'none';
                                         messageInput.disabled = false;
                                         sendButton.disabled = false;
                                         messageInput.focus();
                                         removeFile();
-                                        return; // Fin du traitement du stream
                                     }
-                                    // Scroll vers le bas à chaque nouveau chunk
                                     const messagesContainer = document.getElementById('messages');
                                     messagesContainer.scrollTop = messagesContainer.scrollHeight;
@@ -531,7 +344,7 @@
                 return processStream();
             })
             .catch(error => {
-                typingIndicator.style.display = 'none';
                 messageInput.disabled = false;
                 sendButton.disabled = false;
                 showError('Erreur: ' + error.message);
@@ -542,52 +355,37 @@
         function addMessage(role, content) {
             const messagesContainer = document.getElementById('messages');
             const messageDiv = document.createElement('div');
-            messageDiv.className = `message ${role}`;
-            messageDiv.innerHTML = formatMessage(content);
             messagesContainer.appendChild(messageDiv);
             messagesContainer.scrollTop = messagesContainer.scrollHeight;
             return messageDiv;
         }
-        function addThoughts(content) {
-            const messagesContainer = document.getElementById('messages');
-            const thoughtsDiv = document.createElement('div');
-            thoughtsDiv.className = 'thoughts';
-            thoughtsDiv.innerHTML = content;
-            messagesContainer.appendChild(thoughtsDiv);
-            messagesContainer.scrollTop = messagesContainer.scrollHeight;
-            return thoughtsDiv;
         }
         function escapeHtml(unsafe) {
             return unsafe
-                 .replace(/&/g, "&amp;")
-                 .replace(/</g, "&lt;")
-                 .replace(/>/g, "&gt;")
-                 .replace(/"/g, "&quot;")
-                 .replace(/'/g, "&#039;");
-        }
-        function formatChunk(chunk) {
-            // Pour le streaming, on échappe le HTML et on remplace juste les sauts de ligne
-            return escapeHtml(chunk).replace(/\n/g, '<br>');
         }
-        function formatMessage(content) {
-            // Cette fonction est utilisée pour le message initial de l'utilisateur
-            // Elle peut gérer plus de markdown car elle traite le message en une seule fois
-            return escapeHtml(content)
-                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-                .replace(/\*(.*?)\*/g, '<em>$1</em>')
-                .replace(/`(.*?)`/g, '<code style="background: #444; padding: 2px 5px; border-radius: 4px; font-family: monospace;">$1</code>')
-                .replace(/\n/g, '<br>');
-        }
         function showError(message) {
             const messagesContainer = document.getElementById('messages');
             const errorDiv = document.createElement('div');
-            errorDiv.className = 'error';
             errorDiv.textContent = message;
             messagesContainer.appendChild(errorDiv);
             messagesContainer.scrollTop = messagesContainer.scrollHeight;
@@ -603,7 +401,7 @@
                 .then(response => {
                     if (response.ok) {
                         document.getElementById('messages').innerHTML = `
-                            <div class="message assistant">
                                 <div>👋 Conversation réinitialisée ! Comment puis-je vous aider ?</div>
                             </div>
                         `;

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mariam AI Assistant</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/5.1.1/marked.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/DOMPurify/3.0.3/purify.min.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'dark': {
+                            100: '#f1f1f1',
+                            200: '#e0e0e0',
+                            300: '#ccc',
+                            400: '#999',
+                            500: '#777',
+                            600: '#555',
+                            700: '#444',
+                            800: '#333',
+                            900: '#2c2c2c',
+                            950: '#1e1e1e'
+                        }
+                    }
+                }
+            }
         }
+    </script>
+    <style>
+        /* Custom scrollbar styles */
+        .custom-scrollbar::-webkit-scrollbar {
+            width: 6px;
         }
+        .custom-scrollbar::-webkit-scrollbar-track {
+            background: #1e1e1e;
         }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+            background: #555;
+            border-radius: 3px;
         }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+            background: #777;
         }
+        /* Animation for typing dots */
+        @keyframes typing {
+            0%, 60%, 100% {
+                transform: scale(0.8);
+                opacity: 0.5;
+            }
+            30% {
+                transform: scale(1.2);
+                opacity: 1;
+            }
         }
+        .typing-dot:nth-child(1) { animation-delay: 0s; }
+        .typing-dot:nth-child(2) { animation-delay: 0.2s; }
+        .typing-dot:nth-child(3) { animation-delay: 0.4s; }
+        .typing-dot {
+            animation: typing 1.4s infinite ease-in-out;
         }
+        /* Fade in animation */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
         }
+        .fade-in {
             animation: fadeIn 0.3s ease;
         }
+        /* Markdown styles */
+        .markdown-content h1, .markdown-content h2, .markdown-content h3 {
+            margin: 1em 0 0.5em 0;
             font-weight: 600;
         }
+        .markdown-content h1 { font-size: 1.5em; }
+        .markdown-content h2 { font-size: 1.3em; }
+        .markdown-content h3 { font-size: 1.1em; }
+        .markdown-content p { margin: 0.5em 0; }
+        .markdown-content ul, .markdown-content ol {
+            margin: 0.5em 0;
+            padding-left: 1.5em;
+        }
+        .markdown-content li { margin: 0.2em 0; }
+        .markdown-content code {
+            background: #444;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-family: 'Courier New', monospace;
+            font-size: 0.9em;
+        }
+        .markdown-content pre {
             background: #333;
+            padding: 1em;
+            border-radius: 8px;
+            margin: 1em 0;
+            overflow-x: auto;
         }
+        .markdown-content pre code {
+            background: none;
+            padding: 0;
         }
+        .markdown-content blockquote {
+            border-left: 3px solid #666;
+            padding-left: 1em;
+            margin: 1em 0;
+            color: #ccc;
             font-style: italic;
         }
     </style>
 </head>
+<body class="bg-gray-900 text-gray-100 min-h-screen flex justify-center items-center p-0 md:p-5">
+    <div class="w-full max-w-4xl h-screen md:h-[90vh] bg-dark-950 flex flex-col md:rounded-xl md:border md:border-dark-800 overflow-hidden">
+        <!-- Header -->
+        <div class="bg-dark-950 px-6 py-5 border-b border-dark-800 flex-shrink-0">
+            <div class="text-center">
+                <h1 class="text-xl font-semibold mb-1">Mariam AI Assistant</h1>
+                <p class="text-sm text-dark-300">❤️</p>
+                <div class="flex justify-center items-center mt-4">
+                    <button
+                        class="bg-transparent border border-dark-600 text-dark-300 px-4 py-2 rounded-full text-sm hover:bg-dark-800 transition-colors duration-200"
+                        onclick="resetConversation()"
+                    >
+                        🔄 Reset
+                    </button>
                 </div>
             </div>
         </div>
+        <!-- Messages -->
+        <div id="messages" class="flex-1 overflow-y-auto px-4 py-5 space-y-4 custom-scrollbar">
+            <div class="max-w-[85%] bg-dark-900 text-dark-200 p-4 rounded-2xl rounded-bl-sm fade-in">
+                <div>👋 Bonjour, sur quoi allons-nous travailler aujourd'hui ?</div>
+            </div>
         </div>
+        <!-- Typing Indicator -->
+        <div id="typingIndicator" class="hidden px-4 pb-3 flex items-center gap-3 text-dark-400 italic">
             <span>L'assistant réfléchit</span>
+            <div class="flex gap-1">
+                <span class="w-2 h-2 bg-dark-600 rounded-full typing-dot"></span>
+                <span class="w-2 h-2 bg-dark-600 rounded-full typing-dot"></span>
+                <span class="w-2 h-2 bg-dark-600 rounded-full typing-dot"></span>
             </div>
         </div>
+        <!-- Input Container -->
+        <div class="bg-dark-950 p-4 border-t border-dark-800 flex-shrink-0">
+            <div id="filePreview" class="hidden mb-3 p-3 bg-dark-900 rounded-lg text-sm"></div>
+            <div class="flex gap-3 items-end">
+                <input
+                    type="file"
+                    id="fileInput"
+                    class="hidden"
+                    accept="image/*,video/*,.pdf,.txt,.csv,.json"
+                    onchange="handleFileSelect(event)"
+                >
+                <button
+                    class="bg-dark-800 hover:bg-dark-700 text-gray-100 h-12 w-12 rounded-full flex items-center justify-center text-xl transition-colors duration-200 flex-shrink-0"
+                    onclick="document.getElementById('fileInput').click()"
+                    title="Joindre un fichier"
+                >
                     📎
                 </button>
+                <div class="flex-1 relative">
                     <textarea
                         id="messageInput"
+                        class="w-full min-h-[48px] max-h-32 px-5 py-3 pr-14 bg-dark-900 text-gray-100 border border-dark-700 rounded-full resize-none outline-none focus:border-dark-500 transition-colors duration-200 placeholder-dark-400"
                         placeholder="Tapez votre message ici..."
                         rows="1"
                         onkeydown="handleKeyDown(event)"
                         oninput="autoResize(this)"
                     ></textarea>
+                    <button
+                        id="sendButton"
+                        class="absolute right-1 top-1/2 -translate-y-1/2 bg-dark-800 hover:bg-dark-700 disabled:bg-dark-900 disabled:text-dark-600 text-gray-100 w-10 h-10 rounded-full flex items-center justify-center text-lg transition-colors duration-200"
+                        onclick="sendMessage()"
+                        title="Envoyer"
+                    >
                         ➤
                     </button>
                 </div>
         </div>
     </div>
     <script>
         let currentFile = null;
         let conversationId = 'session_' + Date.now();
+        // Configuration de marked pour le rendu markdown
+        marked.setOptions({
+            breaks: true,
+            gfm: true
+        });
         function autoResize(textarea) {
             textarea.style.height = 'auto';
+            textarea.style.height = Math.min(textarea.scrollHeight, 128) + 'px';
         }
         function handleKeyDown(event) {
                 if (data.success) {
                     currentFile = data;
                     filePreview.innerHTML = `
+                        <div class="flex justify-between items-center">
                             <span>📎 ${data.filename}</span>
+                            <button onclick="removeFile()" class="bg-dark-600 hover:bg-dark-500 text-white px-3 py-1 rounded text-sm transition-colors duration-200">✕</button>
                         </div>
                     `;
+                    filePreview.classList.remove('hidden');
                 } else {
                     showError('Erreur lors du téléchargement: ' + data.error);
                 }
         function removeFile() {
             currentFile = null;
+            document.getElementById('filePreview').classList.add('hidden');
             document.getElementById('fileInput').value = '';
         }
                 addMessage('user', message);
             }
+            typingIndicator.classList.remove('hidden');
             messageInput.value = '';
             autoResize(messageInput);
             const endpoint = currentFile ? '/chat_with_file' : '/chat';
             const payload = {
                 message: message || 'Analyse ce fichier',
+                thinking_enabled: false, // Désactivé pour une meilleure UX
                 conversation_id: conversationId
             };
                 const decoder = new TextDecoder();
                 let buffer = '';
                 let messageElement = null;
+                let contentBuffer = '';
                 function processStream() {
                     return reader.read().then(({ done, value }) => {
                         if (done) {
                             return;
                         }
                                         if (!messageElement) {
                                             messageElement = addMessage('assistant', '');
                                         }
+                                        contentBuffer += data.content;
+                                        // Rendu markdown en temps réel
+                                        const htmlContent = DOMPurify.sanitize(marked.parse(contentBuffer));
+                                        messageElement.innerHTML = `<div class="markdown-content">${htmlContent}</div>`;
                                     } else if (data.type === 'error') {
                                         showError(data.content);
                                     } else if (data.type === 'end') {
+                                        typingIndicator.classList.add('hidden');
                                         messageInput.disabled = false;
                                         sendButton.disabled = false;
                                         messageInput.focus();
                                         removeFile();
+                                        return;
                                     }
+                                    // Scroll vers le bas
                                     const messagesContainer = document.getElementById('messages');
                                     messagesContainer.scrollTop = messagesContainer.scrollHeight;
                 return processStream();
             })
             .catch(error => {
+                typingIndicator.classList.add('hidden');
                 messageInput.disabled = false;
                 sendButton.disabled = false;
                 showError('Erreur: ' + error.message);
         function addMessage(role, content) {
             const messagesContainer = document.getElementById('messages');
             const messageDiv = document.createElement('div');
+            if (role === 'user') {
+                messageDiv.className = 'max-w-[85%] bg-dark-700 text-gray-100 p-4 rounded-2xl rounded-br-sm ml-auto fade-in';
+                messageDiv.innerHTML = formatUserMessage(content);
+            } else {
+                messageDiv.className = 'max-w-[85%] bg-dark-900 text-dark-200 p-4 rounded-2xl rounded-bl-sm fade-in';
+                messageDiv.innerHTML = content || '<div class="markdown-content"></div>';
+            }
             messagesContainer.appendChild(messageDiv);
             messagesContainer.scrollTop = messagesContainer.scrollHeight;
             return messageDiv;
         }
+        function formatUserMessage(content) {
+            return escapeHtml(content).replace(/\n/g, '<br>');
         }
         function escapeHtml(unsafe) {
             return unsafe
+                .replace(/&/g, "&amp;")
+                .replace(/</g, "&lt;")
+                .replace(/>/g, "&gt;")
+                .replace(/"/g, "&quot;")
+                .replace(/'/g, "&#039;");
         }
         function showError(message) {
             const messagesContainer = document.getElementById('messages');
             const errorDiv = document.createElement('div');
+            errorDiv.className = 'bg-red-900/50 text-red-200 border-l-4 border-red-500 p-4 rounded-lg fade-in';
             errorDiv.textContent = message;
             messagesContainer.appendChild(errorDiv);
             messagesContainer.scrollTop = messagesContainer.scrollHeight;
                 .then(response => {
                     if (response.ok) {
                         document.getElementById('messages').innerHTML = `
+                            <div class="max-w-[85%] bg-dark-900 text-dark-200 p-4 rounded-2xl rounded-bl-sm fade-in">
                                 <div>👋 Conversation réinitialisée ! Comment puis-je vous aider ?</div>
                             </div>
                         `;