Update index.html

index.html

@@ -46,6 +46,113 @@
         }
 
         body {
+          <!-- Chat Bot Interface -->
+<div class="fixed bottom-4 right-4 z-50">
+  <div id="chat-container" class="hidden w-80 bg-bg-card rounded-lg shadow-xl border border-border dark:border-gray-700">
+    <div class="p-4 border-b border-border dark:border-gray-700">
+      <h3 class="font-semibold text-text">Mindset Coach</h3>
+    </div>
+    <div id="chat-messages" class="h-64 overflow-y-auto p-4 space-y-4 text-sm"></div>
+    <div class="p-4 border-t border-border dark:border-gray-700">
+      <div class="flex gap-2">
+        <input id="user-input" type="text" placeholder="Ask about emotional control..." 
+              class="flex-1 p-2 border border-border rounded-lg bg-bg text-text
+                     focus:outline-none focus:ring-2 focus:ring-primary">
+        <button id="send-btn" class="btn btn-primary px-4 py-2">
+          <i class="fas fa-paper-plane"></i>
+        </button>
+      </div>
+      <p class="text-xs mt-2 text-text-light">Powered by Gemini AI</p>
+    </div>
+  </div>
+  <button id="chat-toggle" 
+         class="w-12 h-12 bg-primary text-white rounded-full shadow-lg 
+                hover:bg-primary-dark transition-transform transform hover:scale-110">
+    <i class="fas fa-comment-dots text-lg"></i>
+  </button>
+</div>
+
+<!-- Add this to your existing script -->
+<script>
+// Chat functionality
+document.getElementById('chat-toggle').addEventListener('click', () => {
+  document.getElementById('chat-container').classList.toggle('hidden');
+});
+
+document.getElementById('send-btn').addEventListener('click', async () => {
+  const userInput = document.getElementById('user-input');
+  const message = userInput.value.trim();
+  if (!message) return;
+
+  // Add user message
+  addMessage(message, 'user');
+  userInput.value = '';
+
+  try {
+    // Add loading state
+    const loadingId = addMessage('Analyzing...', 'bot', true);
+
+    // Get page content context
+    const pageContent = document.body.innerText.substring(0, 2000);
+
+    // Call your Hugging Face API endpoint
+    const response = await fetch('/api/chat', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        message: message,
+        context: `Help users with mindset techniques from this content: ${pageContent}`
+      })
+    });
+
+    const data = await response.json();
+    const botResponse = data.candidates[0].content.parts[0].text;
+    
+    // Update loading message
+    updateMessage(loadingId, botResponse, 'bot');
+    
+  } catch (error) {
+    console.error('Error:', error);
+    updateMessage(loadingId, 'Sorry, I need to practice more mindfulness. Try again later.', 'bot');
+  }
+});
+
+// Helper functions
+let messageCount = 0;
+
+function addMessage(text, sender, isLoading = false) {
+  const id = `msg-${messageCount++}`;
+  const messagesDiv = document.getElementById('chat-messages');
+  messagesDiv.innerHTML += `
+    <div id="${id}" class="flex ${sender === 'user' ? 'justify-end' : 'justify-start'}">
+      <div class="max-w-[85%] p-3 rounded-lg ${
+        sender === 'user' 
+          ? 'bg-primary text-white' 
+          : 'bg-bg-alt text-text border border-border'
+      }">
+        ${text}${isLoading ? ' <i class="fas fa-spinner fa-spin"></i>' : ''}
+      </div>
+    </div>
+  `;
+  messagesDiv.scrollTop = messagesDiv.scrollHeight;
+  return id;
+}
+
+function updateMessage(id, newText, sender) {
+  const messageDiv = document.getElementById(id);
+  if (messageDiv) {
+    messageDiv.innerHTML = `
+      <div class="max-w-[85%] p-3 rounded-lg ${
+        sender === 'user' 
+          ? 'bg-primary text-white' 
+          : 'bg-bg-alt text-text border border-border'
+      }">
+        ${newText}
+      </div>
+    `;
+  }
+}
+</script>
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
             color: var(--text);
             line-height: 1.6;