provid eclick evnt correclty

index.html

@@ -138,31 +138,89 @@
     </div>
 
     <script>
-        // Theme Toggle
-        const themeToggle = document.getElementById('themeToggle');
-        themeToggle.addEventListener('click', () => {
+        // Initialize event handlers
+        function initializeEventHandlers() {
+            // Theme Toggle
+            const themeToggle = document.getElementById('themeToggle');
+            themeToggle.addEventListener('click', handleThemeToggle);
+
+            // Chat functionality
+            const chatMessages = document.getElementById('chatMessages');
+            const userInput = document.getElementById('userInput');
+            const sendButton = document.getElementById('sendButton');
+            const quickPrompts = document.querySelectorAll('.quick-prompt');
+
+            // Send message when Enter is pressed
+            userInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    handleSendMessage();
+                }
+            });
+
+            // Send button click handler
+            sendButton.addEventListener('click', handleSendMessage);
+
+            // Quick prompt buttons
+            quickPrompts.forEach(button => {
+                button.addEventListener('click', (e) => {
+                    e.preventDefault();
+                    userInput.value = button.textContent.trim();
+                    handleSendMessage();
+                });
+            });
+
+            // Settings button click handler
+            const settingsButton = document.querySelector('button[aria-label="settings"]');
+            if (settingsButton) {
+                settingsButton.addEventListener('click', handleSettingsClick);
+            }
+        }
+
+        function handleThemeToggle() {
             document.documentElement.classList.toggle('dark');
-            const icon = themeToggle.querySelector('i');
+            const themeIcon = document.querySelector('#themeToggle i');
+            
             if (document.documentElement.classList.contains('dark')) {
-                feather.icons['moon'].toSvg().then(svg => icon.outerHTML = svg);
+                themeIcon.outerHTML = feather.icons.sun.toSvg();
             } else {
-                feather.icons['sun'].toSvg().then(svg => icon.outerHTML = svg);
+                themeIcon.outerHTML = feather.icons.moon.toSvg();
             }
-        });
+        }
+
+        function handleSettingsClick() {
+            console.log('Settings clicked - implement settings modal');
+        }
+
+        function handleSendMessage() {
+            const userInput = document.getElementById('userInput');
+            const message = userInput.value.trim();
+            
+            if (!message) return;
 
-        // Chat functionality
-        const chatMessages = document.getElementById('chatMessages');
-        const userInput = document.getElementById('userInput');
-        const sendButton = document.getElementById('sendButton');
-        const quickPrompts = document.querySelectorAll('.quick-prompt');
+            addUserMessage(message);
+            userInput.value = '';
+
+            const typingIndicator = addBotMessage('', true);
+            
+            // Simulate API delay
+            setTimeout(async () => {
+                const response = await getBotResponse(message.toLowerCase());
+                if (typingIndicator && typingIndicator.parentNode) {
+                    chatMessages.removeChild(typingIndicator);
+                }
+                addBotMessage(response);
+            }, 1000 + Math.random() * 2000);
+        }
 
         function addUserMessage(message) {
+            const chatMessages = document.getElementById('chatMessages');
             const messageDiv = document.createElement('div');
             messageDiv.className = 'chat-message user-message';
             messageDiv.innerHTML = `
                 <div class="flex items-start space-x-3 justify-end">
                     <div class="bg-gray-700 rounded-lg p-3 max-w-3xl">
-                        <p>${message}</p>
+                        <p>${escapeHtml(message)}</p>
                     </div>
                     <div class="bg-primary-500 p-2 rounded-full">
                         <i data-feather="user" class="w-5 h-5 text-white"></i>
@@ -170,16 +228,18 @@
                 </div>
             `;
             chatMessages.appendChild(messageDiv);
+            feather.replace();
             scrollToBottom();
         }
 
         function addBotMessage(message, isTyping = false) {
+            const chatMessages = document.getElementById('chatMessages');
             const messageDiv = document.createElement('div');
             messageDiv.className = 'chat-message bot-message';
             
             let messageContent = isTyping 
-                ? '<span class="typing-indicator"></span>'
-                : `<p>${message}</p>`;
+                ? '<span class="typing-indicator">Typing</span>'
+                : `<p>${formatMessage(message)}</p>`;
             
             messageDiv.innerHTML = `
                 <div class="flex items-start space-x-3">
@@ -192,67 +252,64 @@
                 </div>
             `;
             chatMessages.appendChild(messageDiv);
+            feather.replace();
             scrollToBottom();
             
-            if (isTyping) {
-                return messageDiv;
-            }
-            return null;
+            return isTyping ? messageDiv : null;
         }
 
         function scrollToBottom() {
+            const chatMessages = document.getElementById('chatMessages');
             chatMessages.scrollTop = chatMessages.scrollHeight;
         }
 
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        function formatMessage(message) {
+            return message
+                .replace(/\n/g, '<br>')
+                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+                .replace(/\*(.*?)\*/g, '<em>$1</em>')
+                .replace(/`(.*?)`/g, '<code class="bg-gray-600 px-1 rounded">$1</code>');
+        }
+
         // Simulate API call to Python backend
         async function getBotResponse(userMessage) {
-            // In a real app, this would call your Python backend API
-            // For demo purposes, we'll simulate responses
-            
             const responses = {
                 "hello": "Hello! How can I assist you with your AI/ML learning today?",
                 "hi": "Hi there! What AI concept would you like to explore?",
-                "explain backpropagation": "Backpropagation is the algorithm used to train neural networks. It works by:\n1. Forward pass: Compute predictions\n2. Calculate loss\n3. Backward pass: Compute gradients\n4. Update weights using gradient descent\n\nIt's called 'back' propagation because gradients flow backward through the network from output to input layers.",
-                "show python ml example": "Here's a simple linear regression example using scikit-learn:\n
-        // Send message when Enter is pressed
-        userInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter') {
-                sendMessage();
-            }
-        });
-
-        // Send button click handler
-        sendButton.addEventListener('click', sendMessage);
-
-        // Quick prompt buttons
-        quickPrompts.forEach(button => {
-            button.addEventListener('click', () => {
-                userInput.value = button.textContent;
-                sendMessage();
-            });
-        });
+                "explain backpropagation": "**Backpropagation** is the algorithm used to train neural networks. It works by:\n\n1. **Forward pass**: Compute predictions\n2. **Calculate loss**: Compare predictions with actual values\n3. **Backward pass**: Compute gradients\n4. **Update weights**: Using gradient descent\n\nIt's called 'back' propagation because gradients flow backward through the network from output to input layers.",
+                "show python ml example": "Here's a simple linear regression example using **scikit-learn**:\n\n```python\nfrom sklearn.linear_model import LinearRegression\nfrom sklearn.model_selection import train_test_split\nimport numpy as np\n\n# Sample data\nX = np.array([[1], [2], [3], [4], [5]])\ny = np.array([2, 4, 6, 8, 10])\n\n# Split data\nX_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2)\n\n# Create and train model\nmodel = LinearRegression()\nmodel.fit(X_train, y_train)\n\n# Make predictions\npredictions = model.predict(X_test)\n```",
+                "what's a gan": "**GANs (Generative Adversarial Networks)** consist of two neural networks:\n\n1. **Generator**: Creates fake data\n2. **Discriminator**: Distinguishes real from fake\n\nThey 'fight' each other in a zero-sum game, improving both networks. Used for generating realistic images, art, and data augmentation.",
+                "neural networks basics": "**Neural Networks** are computing systems inspired by biological neurons:\n\n• **Neurons**: Basic processing units\n• **Weights**: Connection strengths\n• **Biases**: Offset values\n• **Activation Functions**: Introduce non-linearity\n• **Layers**: Input, Hidden, Output\n• **Training**: Adjust weights using backpropagation",
+                "python pandas tips": "Here are some useful **pandas** tips:\n\n```python\n# Load data\ndf = pd.read_csv('data.csv')\n\n# Quick info\ndf.info()\ndf.describe()\n\n# Handle missing values\ndf.fillna(0, inplace=True)\n\n# Group by and aggregate\ndf.groupby('category').sum()\n\n# Efficient operations\ndf['new_col'] = df['col1'] + df['col2']\n```"
+            };
 
-        async function sendMessage() {
-            const message = userInput.value.trim();
-            if (!message) return;
+            // Check for exact matches first
+            if (responses[userMessage]) {
+                return responses[userMessage];
+            }
 
-            addUserMessage(message);
-            userInput.value = '';
+            // Check for partial matches
+            for (const [key, response] of Object.entries(responses)) {
+                if (userMessage.includes(key)) {
+                    return response;
+                }
+            }
 
-            const typingIndicator = addBotMessage('', true);
-            
-            // Simulate API delay
-            setTimeout(async () => {
-                const response = await getBotResponse(message);
-                chatMessages.removeChild(typingIndicator);
-                addBotMessage(response);
-            }, 1000 + Math.random() * 2000);
+            // Default response
+            return `I'd be happy to help with that! Could you be more specific about what aspect of AI/ML you're interested in? I can explain concepts like neural networks, provide Python code examples, or discuss algorithms like backpropagation.`;
         }
 
-        // Initialize Feather Icons
+        // Initialize when DOM is loaded
         document.addEventListener('DOMContentLoaded', () => {
             feather.replace();
+            initializeEventHandlers();
         });
-    </script>
+</script>
 </body>
 </html>