Spaces:
Sleeping
Sleeping
File size: 1,995 Bytes
0df7243 66a72cc a6df2d4 0df7243 a6df2d4 0df7243 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<!DOCTYPE html>
<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>
|