Virtual Assistant - Copy this React, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Virtual Assistant</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #container { background-color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); padding: 20px; width: 300px; text-align: center; } #output { background-color: #e6e6e6; border: 1px solid #ccc; border-radius: 5px; height: 150px; margin-bottom: 10px; overflow-y: auto; padding: 10px; text-align: left; } #input { width: calc(100% - 22px); padding: 10px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 10px; } button { background-color: #0078d4; color: white; border: none; border-radius: 5px; padding: 10px; cursor: pointer; } button:hover { background-color: #005a9e; } </style> </head> <body> <div id="container"> <h2>Virtual Assistant</h2> <div id="output"></div> <input type="text" id="input" placeholder="Type your message..." /> <button onclick="sendMessage()">Send</button> </div> <script> function sendMessage() { const input = document.getElementById('input').value; fetch('/ask', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: input }) }) .then(response => response.json()) .then(data => { document.getElementById('output').innerHTML += `<p><strong>You:</strong> ${input}</p>`; document.getElementById('output').innerHTML += `<p><strong>Assistant:</strong> ${data.response}</p>`; document.getElementById('input').value = ''; }) .catch(error => console.error('Error:', error)); } </script> </body> </html>
