Spaces:
Runtime error
Runtime error
File size: 3,721 Bytes
a5778f2 | 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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Customer Service - Talk to Agent</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div class="container">
<header>
<h1>Customer Service Chat</h1>
<div class="status-indicator">
<div id="status-dot" class="status-dot"></div>
<span id="status-text">Checking connection...</span>
</div>
</header>
<div class="main-content">
<!-- Agent Info Panel -->
<div class="agent-panel">
<h3>Customer Service Agent</h3>
<div class="agent-info">
<p><strong>AI Agent:</strong> <span id="configured-model">{{ configured_model or 'Loading...' }}</span></p>
<p><strong>Status:</strong> <span id="agent-status">Connecting...</span></p>
<p class="agent-description">Your AI-powered customer service assistant is ready to help with product questions, technical support, and general inquiries.</p>
</div>
</div>
<!-- Chat Interface -->
<div class="chat-container">
<div class="chat-header">
<h3>Chat</h3>
<button id="clear-chat" class="clear-btn" title="Clear conversation">Clear</button>
</div>
<div id="chat-messages" class="chat-messages">
<div class="welcome-message">
<h4>Welcome to Customer Service!</h4>
<p>Hello! I'm your AI customer service assistant. How can I help you today?</p>
<ul>
<li>Ask questions about products and services</li>
<li>Get technical support and troubleshooting help</li>
<li>Your conversation history will be preserved</li>
<li>I can escalate complex issues to human agents</li>
</ul>
</div>
</div>
<div class="chat-input-container">
<div class="input-group">
<textarea
id="message-input"
placeholder="Type your message here..."
rows="3"
disabled
></textarea>
<button id="send-btn" disabled>
<span class="send-icon">➤</span>
Send
</button>
<button type="button" id="end-conversation-button" class="action-button end-conversation" title="End Conversation & Save Summary">
End Chat
</button>
</div>
<div class="input-info">
<span id="char-count">0 characters</span>
<span class="divider">•</span>
<span>Press Ctrl+Enter to send</span>
</div>
</div>
</div>
</div>
<!-- Loading overlay -->
<div id="loading-overlay" class="loading-overlay hidden">
<div class="loading-spinner">
<div class="spinner"></div>
<p>Thinking...</p>
</div>
</div>
</div>
<script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>
|