108 lines
4.4 KiB
HTML
108 lines
4.4 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>AI Chat</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; font-family: system-ui, sans-serif; background: #fff; }
|
|
.chat-container { display: flex; flex-direction: column; height: 100vh; }
|
|
.header { background: #065f46; color: #fff; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; }
|
|
.messages { flex: 1; overflow-y: auto; padding: 12px; background: #f9fafb; }
|
|
.message { margin-bottom: 12px; display: flex; }
|
|
.message.user { justify-content: flex-end; }
|
|
.message .bubble { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
|
|
.message.user .bubble { background: #065f46; color: #fff; border-bottom-right-radius: 4px; }
|
|
.message.assistant .bubble { background: #f0fdf4; border: 1px solid #d1fae5; border-bottom-left-radius: 4px; }
|
|
.message.assistant .bubble p { margin: 0; }
|
|
.input-area { display: flex; border-top: 1px solid #e5e7eb; padding: 8px; background: #fff; }
|
|
.input-area input { flex: 1; border: 1px solid #d1d5db; border-radius: 8px; padding: 10px 14px; font-size: 14px; outline: none; }
|
|
.input-area input:focus { border-color: #065f46; }
|
|
.input-area button { margin-left: 8px; background: #065f46; color: #fff; border: none; border-radius: 8px; padding: 10px 16px; cursor: pointer; }
|
|
.input-area button:hover { background: #047857; }
|
|
.loading { text-align: center; color: #6b7280; font-size: 13px; padding: 8px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="chat-container">
|
|
<div class="header">
|
|
<span id="agent-name">AI Assistant</span>
|
|
<i class="bi bi-robot"></i>
|
|
</div>
|
|
<div class="messages" id="messages">
|
|
<div class="text-center text-muted py-4" id="welcome" style="font-size:14px;">
|
|
<i class="bi bi-chat-dots fs-3"></i><br>How can I help you?
|
|
</div>
|
|
</div>
|
|
<div id="loading" class="loading" style="display:none;">Thinking...</div>
|
|
<div class="input-area">
|
|
<input type="text" id="input" placeholder="Type a message..." autofocus>
|
|
<button id="send-btn"><i class="bi bi-send"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const params = new URLSearchParams(window.location.search);
|
|
const agentId = params.get('agent_id') || '';
|
|
let sessionId = '';
|
|
let agentName = 'AI Assistant';
|
|
|
|
function addMsg(role, content) {
|
|
document.getElementById('welcome').style.display = 'none';
|
|
const msg = document.createElement('div');
|
|
msg.className = 'message ' + role;
|
|
const bubble = document.createElement('div');
|
|
bubble.className = 'bubble';
|
|
if (role === 'assistant') bubble.innerHTML = marked.parse(content);
|
|
else bubble.textContent = content;
|
|
msg.appendChild(bubble);
|
|
document.getElementById('messages').appendChild(msg);
|
|
document.getElementById('messages').scrollTop = document.getElementById('messages').scrollHeight;
|
|
}
|
|
|
|
async function send() {
|
|
const input = document.getElementById('input');
|
|
const msg = input.value.trim();
|
|
if (!msg) return;
|
|
input.value = '';
|
|
addMsg('user', msg);
|
|
document.getElementById('loading').style.display = 'block';
|
|
|
|
try {
|
|
const resp = await fetch('/api/ai-interactions/chat/', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
agent_id: agentId ? parseInt(agentId) : null,
|
|
message: msg,
|
|
session_id: sessionId,
|
|
}),
|
|
});
|
|
const data = await resp.json();
|
|
if (data.session_id) sessionId = data.session_id;
|
|
if (data.response) addMsg('assistant', data.response);
|
|
else if (data.error) addMsg('assistant', 'Error: ' + data.error);
|
|
} catch(e) {
|
|
addMsg('assistant', 'Connection error. Please try again.');
|
|
}
|
|
document.getElementById('loading').style.display = 'none';
|
|
}
|
|
|
|
document.getElementById('send-btn').addEventListener('click', send);
|
|
document.getElementById('input').addEventListener('keydown', function(e) {
|
|
if (e.key === 'Enter') send();
|
|
});
|
|
|
|
if (agentId) {
|
|
fetch('/api/agents/' + agentId + '/').then(r => r.json()).then(a => {
|
|
if (a.name) { agentName = a.name; document.getElementById('agent-name').textContent = a.name; }
|
|
}).catch(() => {});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|