Update index.html

index.html

@@ -5,6 +5,78 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Farmers Training</title>
   <style>
+    /* Chat Interface Styles */
+    .chat-container {
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+      width: 300px;
+      height: 400px;
+      background: white;
+      border-radius: 10px;
+      box-shadow: 0 0 10px rgba(0,0,0,0.1);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      z-index: 1000;
+    }
+    
+    .chat-header {
+      background: #2e7d32;
+      color: white;
+      padding: 10px;
+      font-weight: bold;
+    }
+    
+    .chat-messages {
+      flex-grow: 1;
+      overflow-y: auto;
+      padding: 10px;
+    }
+    
+    .chat-message {
+      margin-bottom: 10px;
+      padding: 8px 12px;
+      border-radius: 15px;
+      max-width: 80%;
+    }
+    
+    .user-message {
+      background: #e3f2fd;
+      margin-left: auto;
+    }
+    
+    .bot-message {
+      background: #f5f5f5;
+    }
+    
+    .chat-input {
+      display: flex;
+      padding: 10px;
+      border-top: 1px solid #eee;
+    }
+    
+    .chat-input input {
+      flex-grow: 1;
+      padding: 8px;
+      border: 1px solid #ddd;
+      border-radius: 20px;
+      margin-right: 8px;
+    }
+    
+    .chat-input button {
+      background: #2e7d32;
+      color: white;
+      border: none;
+      padding: 8px 15px;
+      border-radius: 20px;
+      cursor: pointer;
+    }
+    
+    .chat-input button:hover {
+      background: #1b5e20;
+    }
+
     /* Global Styles */
     * {
       margin: 0;
@@ -229,10 +301,24 @@
     </div>
   </main>
 
+  <!-- Chat Interface -->
+  <div class="chat-container">
+    <div class="chat-header">Farming Assistant</div>
+    <div class="chat-messages" id="chatMessages"></div>
+    <div class="chat-input">
+      <input type="text" placeholder="Ask about farming..." id="chatInput">
+      <button onclick="sendMessage()">Send</button>
+    </div>
+  </div>
+
+  <script src="chatbot.js"></script>
   <script>
     const searchInput = document.querySelector('.search-container input[type="text"]');
     const cards = document.querySelectorAll('.card');
+    const chatInput = document.getElementById('chatInput');
+    const chatMessages = document.getElementById('chatMessages');
 
+    // Search functionality
     searchInput.addEventListener('input', function() {
       const searchTerm = searchInput.value.toLowerCase();
       cards.forEach(card => {
@@ -245,6 +331,50 @@
         }
       });
     });
+
+    // Chat functionality
+    function addMessage(message, isUser) {
+      const messageDiv = document.createElement('div');
+      messageDiv.className = `chat-message ${isUser ? 'user-message' : 'bot-message'}`;
+      messageDiv.textContent = message;
+      chatMessages.appendChild(messageDiv);
+      chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+
+    function displayRecommendations(recommendations) {
+      recommendations.forEach(video => {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'chat-message bot-message';
+        messageDiv.innerHTML = `<strong><a href="${video.url}" target="_blank">${video.title}</a></strong><br>${video.description}`;
+        chatMessages.appendChild(messageDiv);
+      });
+      chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+
+    function sendMessage() {
+      const message = chatInput.value.trim();
+      if (message) {
+        addMessage(message, true);
+        chatbot.addToHistory(message, true);
+        
+        const response = chatbot.processInput(message);
+        addMessage(response.message, false);
+        chatbot.addToHistory(response.message, false);
+        
+        if (response.recommendations.length > 0) {
+          displayRecommendations(response.recommendations);
+        }
+        
+        chatInput.value = '';
+      }
+    }
+
+    // Handle Enter key
+    chatInput.addEventListener('keypress', function(e) {
+      if (e.key === 'Enter') {
+        sendMessage();
+      }
+    });
   </script>
 
 </body>