Chatm2

Sleeping

App Files Files Community

Docfile commited on Sep 17

Commit

0a3c1c2

verified ·

1 Parent(s): 2482b18

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +154 -150

templates/index.html CHANGED Viewed

@@ -3,184 +3,147 @@
 <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>
@@ -192,7 +155,7 @@
         let currentFile = null;
         let conversationId = 'session_' + Date.now();
-        // Configuration de marked pour le rendu markdown
         marked.setOptions({
             breaks: true,
             gfm: true
@@ -200,7 +163,7 @@
         function autoResize(textarea) {
             textarea.style.height = 'auto';
-            textarea.style.height = Math.min(textarea.scrollHeight, 128) + 'px';
         }
         function handleKeyDown(event) {
@@ -228,8 +191,8 @@
                     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');
@@ -265,14 +228,16 @@
             }
             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
             };
@@ -294,7 +259,10 @@
                 const decoder = new TextDecoder();
                 let buffer = '';
                 let messageElement = null;
-                let contentBuffer = '';
                 function processStream() {
                     return reader.read().then(({ done, value }) => {
@@ -312,24 +280,33 @@
                                     const data = JSON.parse(line.substring(6));
                                     if (data.type === 'text') {
                                         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;
@@ -345,6 +322,7 @@
             })
             .catch(error => {
                 typingIndicator.classList.add('hidden');
                 messageInput.disabled = false;
                 sendButton.disabled = false;
                 showError('Erreur: ' + error.message);
@@ -357,11 +335,12 @@
             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);
@@ -369,23 +348,48 @@
             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;
@@ -401,8 +405,8 @@
                 .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>
                         `;
                         conversationId = 'session_' + Date.now();

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Assistant - Flat Black & White</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"></script>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
     <script>
         tailwind.config = {
+            darkMode: 'class',
             theme: {
                 extend: {
                     colors: {
+                        'dark-bg': '#121212',
+                        'dark-card': '#1e1e1e',
+                        'dark-elevated': '#2c2c2c',
+                        'dark-border': '#333',
+                        'dark-text': '#f1f1f1',
+                        'dark-muted': '#aaa'
                     }
                 }
             }
         }
     </script>
     <style>
+        /* Configuration Marked pour le markdown */
+        .markdown-content {
+            @apply text-dark-text leading-relaxed;
         }
+        .markdown-content h1, .markdown-content h2, .markdown-content h3 {
+            @apply font-bold mb-2 mt-4;
         }
+        .markdown-content h1 { @apply text-xl; }
+        .markdown-content h2 { @apply text-lg; }
+        .markdown-content h3 { @apply text-base; }
+        .markdown-content p { @apply mb-2; }
+        .markdown-content ul, .markdown-content ol {
+            @apply ml-4 mb-2;
         }
+        .markdown-content li { @apply mb-1; }
+        .markdown-content code {
+            @apply bg-gray-700 px-2 py-1 rounded text-sm font-mono;
         }
+        .markdown-content pre {
+            @apply bg-gray-800 p-4 rounded-lg overflow-x-auto mb-4;
+        }
+        .markdown-content pre code {
+            @apply bg-transparent p-0;
         }
+        .markdown-content blockquote {
+            @apply border-l-4 border-gray-600 pl-4 italic text-gray-300 mb-4;
+        }
+        .markdown-content strong { @apply font-semibold; }
+        .markdown-content em { @apply italic; }
+        .markdown-content a {
+            @apply text-blue-400 hover:text-blue-300 underline;
         }
+        /* Animations et styles personnalisés */
+        @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); }
         }
+        .animate-typing { animation: typing 1.4s infinite ease-in-out; }
+        .animate-fade-in { animation: fadeIn 0.3s ease; }
+        /* Scrollbar personnalisée */
+        .custom-scrollbar::-webkit-scrollbar { width: 8px; }
+        .custom-scrollbar::-webkit-scrollbar-track { background: #1e1e1e; }
+        .custom-scrollbar::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #777; }
+        /* Style pour les pensées déroulantes */
+        .thoughts-toggle:checked + .thoughts-content {
+            max-height: 1000px;
+            opacity: 1;
         }
+        .thoughts-content {
+            max-height: 0;
+            opacity: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease, opacity 0.3s ease;
         }
     </style>
 </head>
+<body class="bg-dark-bg text-dark-text 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-card flex flex-col overflow-hidden md:rounded-xl md:border md:border-dark-border">
         <!-- Header -->
+        <div class="bg-dark-card text-white p-5 text-center border-b border-dark-border flex-shrink-0">
+            <h1 class="text-xl font-semibold mb-1">Mariam AI Assistant</h1>
+            <p class="text-sm text-dark-muted">❤️</p>
+            <div class="flex justify-center items-center gap-5 mt-4">
+                <div class="flex items-center gap-3 text-sm text-gray-300">
+                    <span>Réflexion Mode:</span>
+                    <label class="relative inline-block w-12 h-7">
+                        <input type="checkbox" id="thinkingToggle" checked class="opacity-0 w-0 h-0">
+                        <span class="absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-600 transition-all duration-200 rounded-full before:absolute before:content-[''] before:h-5 before:w-5 before:left-1 before:bottom-1 before:bg-white before:transition-all before:duration-200 before:rounded-full checked:bg-gray-500 checked:before:translate-x-5"></span>
+                    </label>
                 </div>
+                <button class="bg-transparent border border-gray-600 text-gray-300 px-4 py-2 rounded-full text-sm hover:bg-gray-700 transition-colors" onclick="resetConversation()">
+                    🔄 Reset
+                </button>
             </div>
         </div>
         <!-- Messages -->
+        <div class="flex-1 overflow-y-auto p-4 md:p-6 flex flex-col gap-4 custom-scrollbar" id="messages">
+            <div class="max-w-[85%] p-4 rounded-2xl bg-dark-elevated text-gray-200 self-start rounded-bl-sm animate-fade-in">
+                <div class="markdown-content">👋 Bonjour, sur quoi allons-nous travailler aujourd'hui ?</div>
             </div>
         </div>
         <!-- Typing Indicator -->
+        <div class="px-4 md:px-6 pb-2 hidden items-center gap-2 text-gray-500 text-sm italic" id="typingIndicator">
             <span>L'assistant réfléchit</span>
             <div class="flex gap-1">
+                <span class="w-2 h-2 rounded-full bg-gray-600 animate-typing"></span>
+                <span class="w-2 h-2 rounded-full bg-gray-600 animate-typing" style="animation-delay: 0.2s;"></span>
+                <span class="w-2 h-2 rounded-full bg-gray-600 animate-typing" style="animation-delay: 0.4s;"></span>
             </div>
         </div>
         <!-- Input Container -->
+        <div class="p-4 md:p-6 bg-dark-card border-t border-dark-border flex-shrink-0">
+            <div class="mb-3 p-3 bg-dark-elevated rounded-lg text-sm hidden" id="filePreview"></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-gray-700 text-white h-12 w-12 rounded-full hover:bg-gray-600 transition-colors flex-shrink-0 flex items-center justify-center text-xl" onclick="document.getElementById('fileInput').click()" title="Joindre un fichier">
                     📎
                 </button>
                 <div class="flex-1 relative">
                     <textarea
                         id="messageInput"
+                        class="w-full min-h-[48px] p-3 pr-14 border border-gray-600 rounded-3xl text-base resize-none outline-none transition-colors bg-dark-elevated text-dark-text placeholder-gray-500 focus:border-gray-500"
                         placeholder="Tapez votre message ici..."
                         rows="1"
                         onkeydown="handleKeyDown(event)"
                         oninput="autoResize(this)"
                     ></textarea>
+                    <button class="absolute right-1 top-1/2 transform -translate-y-1/2 bg-gray-700 hover:bg-gray-600 disabled:bg-gray-800 disabled:text-gray-600 border-none rounded-full w-10 h-10 text-white cursor-pointer transition-colors flex items-center justify-center text-lg" id="sendButton" onclick="sendMessage()" title="Envoyer">
                         ➤
                     </button>
                 </div>
         let currentFile = null;
         let conversationId = 'session_' + Date.now();
+        // Configuration de marked pour le markdown
         marked.setOptions({
             breaks: true,
             gfm: true
         function autoResize(textarea) {
             textarea.style.height = 'auto';
+            textarea.style.height = Math.min(textarea.scrollHeight, 150) + 'px';
         }
         function handleKeyDown(event) {
                     currentFile = data;
                     filePreview.innerHTML = `
                         <div class="flex justify-between items-center">
+                            <span class="text-gray-300">📎 ${data.filename}</span>
+                            <button onclick="removeFile()" class="bg-gray-600 hover:bg-gray-500 text-white px-3 py-1 rounded transition-colors">✕</button>
                         </div>
                     `;
                     filePreview.classList.remove('hidden');
             }
             typingIndicator.classList.remove('hidden');
+            typingIndicator.classList.add('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
             };
                 const decoder = new TextDecoder();
                 let buffer = '';
                 let messageElement = null;
+                let thoughtsElement = null;
+                let thoughtsContainer = null;
+                let messageContent = '';
+                let thoughtsContent = '';
                 function processStream() {
                     return reader.read().then(({ done, value }) => {
                                     const data = JSON.parse(line.substring(6));
                                     if (data.type === 'text') {
+                                        messageContent += data.content;
                                         if (!messageElement) {
                                             messageElement = addMessage('assistant', '');
                                         }
                                         // Rendu markdown en temps réel
+                                        const markdownHtml = marked.parse(messageContent);
+                                        messageElement.querySelector('.markdown-content').innerHTML = markdownHtml;
+                                    } else if (data.type === 'thought' && thinkingEnabled) {
+                                        thoughtsContent += data.content;
+                                        if (!thoughtsContainer) {
+                                            thoughtsContainer = addThoughtsContainer();
+                                        }
+                                        // Rendu markdown des pensées
+                                        const thoughtsHtml = marked.parse(thoughtsContent);
+                                        thoughtsContainer.querySelector('.thoughts-content .markdown-content').innerHTML = thoughtsHtml;
                                     } else if (data.type === 'error') {
                                         showError(data.content);
                                     } else if (data.type === 'end') {
                                         typingIndicator.classList.add('hidden');
+                                        typingIndicator.classList.remove('flex');
                                         messageInput.disabled = false;
                                         sendButton.disabled = false;
                                         messageInput.focus();
                                         removeFile();
                                         return;
                                     }
                                     const messagesContainer = document.getElementById('messages');
                                     messagesContainer.scrollTop = messagesContainer.scrollHeight;
             })
             .catch(error => {
                 typingIndicator.classList.add('hidden');
+                typingIndicator.classList.remove('flex');
                 messageInput.disabled = false;
                 sendButton.disabled = false;
                 showError('Erreur: ' + error.message);
             const messageDiv = document.createElement('div');
             if (role === 'user') {
+                messageDiv.className = 'max-w-[85%] p-4 rounded-2xl bg-gray-600 text-gray-100 self-end rounded-br-sm animate-fade-in';
+                const markdownHtml = marked.parse(content);
+                messageDiv.innerHTML = `<div class="markdown-content">${markdownHtml}</div>`;
             } else {
+                messageDiv.className = 'max-w-[85%] p-4 rounded-2xl bg-dark-elevated text-gray-200 self-start rounded-bl-sm animate-fade-in';
+                messageDiv.innerHTML = `<div class="markdown-content">${content}</div>`;
             }
             messagesContainer.appendChild(messageDiv);
             return messageDiv;
         }
+        function addThoughtsContainer() {
+            const messagesContainer = document.getElementById('messages');
+            const thoughtsDiv = document.createElement('div');
+            thoughtsDiv.className = 'bg-gray-800 border-l-4 border-gray-600 rounded-lg p-4 mb-2 max-w-[90%] self-start';
+            thoughtsDiv.innerHTML = `
+                <div class="flex items-center justify-between cursor-pointer" onclick="toggleThoughts(this)">
+                    <div class="flex items-center gap-2 font-medium text-gray-300">
+                        <span>🧠</span>
+                        <span>Réflexion de l'assistant</span>
+                    </div>
+                    <svg class="w-5 h-5 text-gray-400 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                    </svg>
+                </div>
+                <input type="checkbox" class="thoughts-toggle hidden">
+                <div class="thoughts-content mt-3 text-sm text-gray-400 italic">
+                    <div class="markdown-content"></div>
+                </div>
+            `;
+            messagesContainer.appendChild(thoughtsDiv);
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+            return thoughtsDiv;
         }
+        function toggleThoughts(element) {
+            const container = element.parentElement;
+            const checkbox = container.querySelector('.thoughts-toggle');
+            const arrow = element.querySelector('svg');
+            checkbox.checked = !checkbox.checked;
+            if (checkbox.checked) {
+                arrow.style.transform = 'rotate(180deg)';
+            } else {
+                arrow.style.transform = 'rotate(0deg)';
+            }
         }
         function showError(message) {
             const messagesContainer = document.getElementById('messages');
             const errorDiv = document.createElement('div');
+            errorDiv.className = 'bg-red-900 text-red-200 border-l-4 border-red-600 p-4 rounded-lg mb-2';
             errorDiv.textContent = message;
             messagesContainer.appendChild(errorDiv);
             messagesContainer.scrollTop = messagesContainer.scrollHeight;
                 .then(response => {
                     if (response.ok) {
                         document.getElementById('messages').innerHTML = `
+                            <div class="max-w-[85%] p-4 rounded-2xl bg-dark-elevated text-gray-200 self-start rounded-bl-sm animate-fade-in">
+                                <div class="markdown-content">👋 Conversation réinitialisée ! Comment puis-je vous aider ?</div>
                             </div>
                         `;
                         conversationId = 'session_' + Date.now();