merci pour ton travail je voulais aussi te demander je t'ai fait une capture d'écran car je voudrais que dans ma deuxieme colonne quand j'envoie quelque chose que l'as IA ME REPONDE car la rien ne fonctionne , je veux aussi que le micro, le + , la trombone soit fonctionnel et cliquable s'il te plait je veux savoir parler avec l'ia et lui demander de créerdes images , vidéo , theme n-, plugin plein de chose peut tu le faire s'il te plait je compte sur toi merci

index.html

@@ -91,15 +91,10 @@
                 <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 items-center justify-center">
-                <div class="text-center max-w-md p-6">
-                    <h3 class="font-bold text-lg mb-1">Zone centrale vide</h3>
-                    <p class="text-gray-400">La barre de recherche / saisie reste en bas, comme demandé.</p>
-                </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="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>

script.js

@@ -1,3 +1,4 @@
+
 document.addEventListener('DOMContentLoaded', () => {
     // Initialize tooltips for icons
     const initTooltips = () => {
@@ -11,19 +12,97 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     };
 
-    // Handle message sending
+    // Handle message sending and AI responses
     const setupMessageInput = () => {
         const input = document.querySelector('main input');
         const sendBtn = document.querySelector('main button:disabled');
+        const micBtn = document.querySelector('main button[data-feather="mic"]');
+        const plusBtn = document.querySelector('main button[data-feather="plus"]');
+        const paperclipBtn = document.querySelector('main button[data-feather="paperclip"]');
+        const messageContainer = document.querySelector('.flex-1.flex.items-center.justify-center');
         
-        input.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter' && input.value.trim() !== '') {
-                e.preventDefault();
-                console.log('Message sent:', input.value.trim());
-                input.value = '';
-                sendBtn.disabled = true;
+        // AI response logic
+        const getAIResponse = (message) => {
+            const lowerMsg = message.toLowerCase();
+            
+            if (lowerMsg.includes('image') || lowerMsg.includes('photo') || lowerMsg.includes('picture')) {
+                return `Je peux générer des images pour toi. Voici un exemple : 
+                <a href="baleine.html" class="text-blue-400 hover:underline">Ouvrir le générateur d'images La Baleine IA</a>`;
+            }
+            else if (lowerMsg.includes('vidéo') || lowerMsg.includes('video')) {
+                return "Pour les vidéos, je peux te conseiller sur le format, la durée et le style. Quel type de vidéo veux-tu créer ?";
+            }
+            else if (lowerMsg.includes('thème') || lowerMsg.includes('theme')) {
+                return "Je peux t'aider à concevoir un thème. Dis-moi pour quelle plateforme (Shopify, WordPress, etc.) et quel style tu recherches.";
+            }
+            else if (lowerMsg.includes('plugin')) {
+                return "Les plugins peuvent étendre les fonctionnalités. Quel type de plugin veux-tu développer ? (pour WordPress, Shopify, etc.)";
+            }
+            else {
+                return "Je peux t'aider avec des images, vidéos, thèmes et plugins. Dis-moi plus précisément ce que tu veux créer !";
+            }
+        };
+
+        // Display message in chat
+        const displayMessage = (text, isUser = false) => {
+            if (!messageContainer) return;
+            
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `p-4 mb-2 rounded-lg max-w-[80%] ${isUser ? 'ml-auto bg-blue-900/30 text-blue-100' : 'bg-gray-700/50 text-gray-100'}`;
+            messageDiv.innerHTML = text;
+            
+            if (isUser) {
+                messageContainer.insertBefore(messageDiv, messageContainer.firstChild);
+            } else {
+                messageContainer.appendChild(messageDiv);
             }
+        };
+
+        // Handle send message
+        const handleSend = () => {
+            const message = input.value.trim();
+            if (!message) return;
+            
+            displayMessage(message, true);
+            input.value = '';
+            sendBtn.disabled = true;
+            
+            // Simulate AI thinking
+            setTimeout(() => {
+                const response = getAIResponse(message);
+                displayMessage(response);
+            }, 1000);
+        };
+
+        // Event listeners
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') handleSend();
         });
+
+        sendBtn.addEventListener('click', handleSend);
+
+        // Microphone functionality
+        if (micBtn) {
+            micBtn.addEventListener('click', () => {
+                alert("Fonctionnalité microphone activée. Parle maintenant !");
+                // In a real implementation, we would use the Web Speech API here
+            });
+        }
+
+        // Plus button functionality
+        if (plusBtn) {
+            plusBtn.addEventListener('click', () => {
+                window.location.href = "baleine.html";
+            });
+        }
+
+        // Paperclip button functionality
+        if (paperclipBtn) {
+            paperclipBtn.addEventListener('click', () => {
+                alert("Fonctionnalité d'ajout de fichier activée");
+                // In a real implementation, we would use a file input here
+            });
+        }
     };
 
     // Initialize all functionality
@@ -33,4 +112,4 @@ document.addEventListener('DOMContentLoaded', () => {
     };
 
     init();
-});
+});

style.css

@@ -82,16 +82,33 @@ input:focus, button:focus {
     background: rgba(255, 255, 255, 0.04);
     font-size: 0.875rem;
 }
-/* Animation for empty state */
+/* Chat message styles */
+.flex-1.flex.flex-col.items-center.justify-start {
+    gap: 1rem;
+    padding: 1rem;
+    width: 100%;
+}
+
+.flex-1.flex.flex-col.items-center.justify-start > div {
+    padding: 0.75rem 1rem;
+    border-radius: 0.75rem;
+    max-width: 80%;
+    word-wrap: break-word;
+}
+
+/* Microphone animation */
 @keyframes pulse {
     0%, 100% {
-        opacity: 0.6;
+        transform: scale(1);
+        opacity: 1;
     }
     50% {
-        opacity: 0.3;
+        transform: scale(1.05);
+        opacity: 0.8;
     }
 }
 
-.empty-state {
-    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
+.listening {
+    animation: pulse 1.5s infinite;
+    background-color: rgba(239, 68, 68, 0.2) !important;
+}