Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <title>Support Chatbot</title> | |
| <link rel="stylesheet" href="/static/styles.css"> | |
| </head> | |
| <body> | |
| <div class="chat-container"> | |
| <h2>🧠 Customer Support Chatbot</h2> | |
| <div class="chat-box"> | |
| {% for entry in chat_history %} | |
| <div class="{{ 'user' if entry.sender == 'User' else 'bot' }}"> | |
| <strong>{{ entry.sender }}:</strong> {{ entry.message }} | |
| </div> | |
| {% endfor %} | |
| </div> | |
| <form method="post" action="/chat"> | |
| <input type="text" name="message" placeholder="Type your question..." required> | |
| <button type="submit">Send</button> | |
| </form> | |
| {% if entities %} | |
| <div class="entities"> | |
| <h4>🔍 Detected Entities:</h4> | |
| <ul> | |
| {% for text, label in entities %} | |
| <li>{{ label }}: <em>{{ text }}</em></li> | |
| {% endfor %} | |
| </ul> | |
| </div> | |
| {% endif %} | |
| <div class="examples"> | |
| <ul> | |
| <li data-query="My HP DeskJet 3755 printer is malfunctioning when printing wirelessly. Can you help?">My HP DeskJet 3755 printer is malfunctioning when printing wirelessly. Can you help?</li> | |
| <li data-query="I've noticed discrepancies in my Microsoft Office 365 billing statement. Please assist.">I've noticed discrepancies in my Microsoft Office 365 billing statement. Please assist.</li> | |
| <li data-query="We're experiencing intermittent server failures affecting stability. Need immediate consultation.">We're experiencing intermittent server failures affecting stability. Need immediate consultation.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <script> | |
| document.querySelectorAll('.examples li').forEach(item => { | |
| item.addEventListener('click', () => { | |
| document.querySelector('input[name="message"]').value = item.getAttribute('data-query'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |