je veux que ma deuxieme colonne soit un chat IA

index.html

@@ -91,30 +91,29 @@
                 <span class="text-xs px-3 py-1 rounded-full bg-gray-800 border border-gray-700 text-gray-400">Projet</span>
                 <span class="text-xs px-3 py-1 rounded-full bg-gray-800 border border-gray-700 text-gray-400">/</span>
             </div>
-            <div class="flex-1 flex flex-col items-center justify-start p-4 overflow-y-auto">
-                <!-- Messages will appear here -->
-            </div>
-<div class="p-3 border-t border-gray-700 bg-gray-850">
-                <div class="flex items-center gap-2 p-2 rounded-xl bg-gray-800 border border-gray-700">
-                    <button class="p-2 rounded-lg hover:bg-gray-700 text-gray-400 hover:text-gray-200">
-                        <i data-feather="plus" class="w-5 h-5"></i>
-                    </button>
-                    <button class="p-2 rounded-lg hover:bg-gray-700 text-gray-400 hover:text-gray-200">
-                        <i data-feather="paperclip" class="w-5 h-5"></i>
-                    </button>
-                    
-                    <input type="text" placeholder="Rechercher / écrire..." 
-                           class="flex-1 bg-transparent px-3 py-2 focus:outline-none text-sm">
-                    
-                    <button class="p-2 rounded-lg hover:bg-gray-700 text-gray-400 hover:text-gray-200">
-                        <i data-feather="mic" class="w-5 h-5"></i>
-                    </button>
-                    <button class="p-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white disabled:opacity-50" disabled>
-                        <i data-feather="send" class="w-5 h-5"></i>
-                    </button>
+            <div class="flex-1 flex flex-col p-4 overflow-y-auto" id="chatContainer">
+                <div class="flex-1 overflow-y-auto p-2 flex flex-col gap-3" id="chatMessages">
+                    <div class="msg bg-gray-700/50 border border-gray-700 p-3 rounded-xl max-w-[80%]">
+                        Bonjour 👋 Je suis votre assistant IA. Comment puis-je vous aider avec votre projet aujourd'hui ?
+                    </div>
                 </div>
-            </div>
-        </main>
+                <div class="p-3 border-t border-gray-700 bg-gray-850">
+                    <div class="flex items-center gap-2 p-2 rounded-xl bg-gray-800 border border-gray-700">
+                        <button id="chatMicBtn" class="p-2 rounded-lg hover:bg-gray-700 text-gray-400 hover:text-gray-200">
+                            <i data-feather="mic" class="w-5 h-5"></i>
+                        </button>
+                        <input id="chatInput" placeholder="Écrivez votre message..." 
+                               class="flex-1 bg-transparent px-3 py-2 focus:outline-none text-sm">
+                        <button id="chatSendBtn" class="p-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white">
+                            <i data-feather="send" class="w-5 h-5"></i>
+                        </button>
+                    </div>
+                    <div class="text-xs text-gray-500 mt-2 flex justify-between">
+                        <span id="chatStatus">Prêt</span>
+                        <span>Assistant IA v1.0</span>
+                    </div>
+                </div>
+</main>
 
         <!-- Preview Panel -->
         <aside class="w-96 bg-gray-800 border-l border-gray-700 flex flex-col">
@@ -154,18 +153,9 @@
             </div>
         </aside>
     </div>
-
     <script>
         feather.replace();
         
-        // Simple interaction for the message input
-        const messageInput = document.querySelector('main input');
-        const sendButton = document.querySelector('main button:disabled');
-        
-        messageInput.addEventListener('input', () => {
-            sendButton.disabled = messageInput.value.trim() === '';
-        });
-        
         // Navigation items active state
         const navItems = document.querySelectorAll('nav a');
         navItems.forEach(item => {
@@ -174,6 +164,66 @@
                 item.classList.add('bg-blue-900/30', 'border-blue-800/50', 'text-blue-200');
             });
         });
+
+        // Chat functionality
+        const chatMessages = document.getElementById('chatMessages');
+        const chatInput = document.getElementById('chatInput');
+        const chatSendBtn = document.getElementById('chatSendBtn');
+        const chatMicBtn = document.getElementById('chatMicBtn');
+        const chatStatus = document.getElementById('chatStatus');
+
+        function addChatMessage(text, isUser = false) {
+            const msgDiv = document.createElement('div');
+            msgDiv.className = `msg ${isUser ? 
+                'ml-auto bg-blue-900/10 border-blue-800/50' : 
+                'bg-gray-700/50 border-gray-700'} p-3 rounded-xl max-w-[80%]`;
+            msgDiv.textContent = text;
+            chatMessages.appendChild(msgDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+
+        function getAIResponse(userText) {
+            const t = userText.toLowerCase();
+            if (t.includes('bonjour') || t.includes('salut')) {
+                return "Bonjour ! Comment puis-je vous aider avec votre projet de codage aujourd'hui ?";
+            }
+            if (t.includes('projet') || t.includes('commencer')) {
+                return "Pour commencer un nouveau projet, vous pouvez :\n1. Cliquer sur le bouton '+' dans la barre latérale\n2. Choisir un type de projet\n3. Donner un nom à votre projet";
+            }
+            if (t.includes('aide') || t.includes('problème')) {
+                return "Je peux vous aider à résoudre des problèmes de code. Décrivez-moi l'erreur ou ce que vous essayez d'accomplir.";
+            }
+            if (t.includes('image') || t.includes('baleine')) {
+                return "Pour générer des images, vous pouvez utiliser La Baleine IA disponible dans le menu de gauche.";
+            }
+            return "Je peux vous aider avec :\n- Projets de codage\n- Génération d'images\n- Résolution de problèmes\n- Conseils techniques\nDites-moi plus précisément ce dont vous avez besoin !";
+        }
+
+        function handleChatSend() {
+            const message = chatInput.value.trim();
+            if (!message) return;
+            
+            addChatMessage(message, true);
+            chatInput.value = '';
+            
+            setTimeout(() => {
+                const response = getAIResponse(message);
+                addChatMessage(response);
+            }, 800);
+        }
+
+        chatSendBtn.addEventListener('click', handleChatSend);
+        chatInput.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') handleChatSend();
+        });
+
+        // Microphone functionality (simplified)
+        chatMicBtn.addEventListener('click', () => {
+            chatStatus.textContent = 'Micro: non implémenté';
+            setTimeout(() => {
+                chatStatus.textContent = 'Prêt';
+            }, 2000);
+        });
     </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>

style.css

@@ -83,19 +83,29 @@ input:focus, button:focus {
     font-size: 0.875rem;
 }
 /* Chat message styles */
-.flex-1.flex.flex-col.items-center.justify-start {
-    gap: 1rem;
+#chatMessages {
+    flex: 1;
+    overflow-y: auto;
     padding: 1rem;
-    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
 }
 
-.flex-1.flex.flex-col.items-center.justify-start > div {
+.msg {
+    word-break: break-word;
+    white-space: pre-wrap;
     padding: 0.75rem 1rem;
     border-radius: 0.75rem;
     max-width: 80%;
-    word-wrap: break-word;
+    border: 1px solid;
 }
 
+#chatContainer {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
 /* Microphone animation */
 @keyframes pulse {
     0%, 100% {