| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Customer Service Chatbot</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/htmx.org@1.9.6"></script> |
| <style> |
| .chat-container { |
| height: 70vh; |
| overflow-y: auto; |
| scroll-behavior: smooth; |
| } |
| .user-message { |
| background-color: #3b82f6; |
| color: white; |
| border-radius: 1rem 1rem 0 1rem; |
| } |
| .bot-message { |
| background-color: #f3f4f6; |
| color: #111827; |
| border-radius: 1rem 1rem 1rem 0; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 min-h-screen flex flex-col"> |
| <header class="bg-blue-600 text-white p-4 shadow-md"> |
| <div class="container mx-auto"> |
| <h1 class="text-2xl font-bold">Customer Service Chatbot</h1> |
| <p class="text-blue-100">Ask me about shipping and returns</p> |
| </div> |
| </header> |
|
|
| <main class="flex-grow container mx-auto p-4 flex flex-col"> |
| <div class="chat-container bg-white rounded-lg shadow-md p-4 mb-4 flex flex-col space-y-4" id="chat-messages"> |
| <div class="bot-message p-3 max-w-xs sm:max-w-md md:max-w-lg lg:max-w-xl"> |
| <p>Hello! I'm your customer service assistant. How can I help you with shipping or returns today?</p> |
| </div> |
| </div> |
|
|
| <form class="flex gap-2" hx-post="/ask" hx-target="#chat-messages" hx-swap="beforeend"> |
| <input |
| type="text" |
| name="question" |
| placeholder="Ask about shipping or returns..." |
| class="flex-grow p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" |
| required |
| > |
| <button |
| type="submit" |
| class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition" |
| > |
| Send |
| </button> |
| </form> |
| </main> |
|
|
| <footer class="bg-gray-800 text-white p-4"> |
| <div class="container mx-auto text-center"> |
| <p>Customer Service Chatbot © 2023</p> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.body.addEventListener('htmx:afterSwap', function(evt) { |
| const chatContainer = document.getElementById('chat-messages'); |
| chatContainer.scrollTop = chatContainer.scrollHeight; |
| }); |
| </script> |
| </body> |
| </html> |
