156 lines
6.8 KiB
HTML
Executable File
156 lines
6.8 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Agent Chat - H3R7Tech</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: #1a1a2e; color: #eee; padding: 20px; }
|
|
|
|
.logo { text-align: center; padding: 10px; }
|
|
.logo img { width: 80px; border-radius: 10px; }
|
|
|
|
header { background: linear-gradient(90deg, #e94560, #7b2cbf); padding: 20px; text-align: center; margin: -20px -20px 20px; border-radius: 0 0 20px 20px; }
|
|
h1 { font-size: 24px; }
|
|
|
|
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
|
|
.stat { background: #16213e; padding: 15px; border-radius: 10px; text-align: center; }
|
|
.stat-num { font-size: 24px; font-weight: bold; color: #00d9ff; }
|
|
.stat-label { font-size: 11px; color: #888; }
|
|
|
|
.agents { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
|
|
.agent-badge { background: #0f3460; padding: 8px 15px; border-radius: 20px; font-size: 13px; }
|
|
.agent-badge .count { background: #00d9ff; color: #000; padding: 2px 8px; border-radius: 10px; margin-left: 5px; }
|
|
|
|
.chat-container { background: #16213e; border-radius: 15px; height: 500px; overflow-y: auto; padding: 20px; }
|
|
.message { padding: 12px 15px; margin: 8px 0; border-radius: 12px; max-width: 85%; }
|
|
.message.info { background: #0f3460; margin-left: 0; }
|
|
.message.success { background: #1a4d2e; margin-left: 0; border-left: 4px solid #00ff88; }
|
|
.message.warning { background: #4d4d1a; margin-left: 0; border-left: 4px solid #ffd700; }
|
|
.message.error { background: #4d1a1a; margin-left: 0; border-left: 4px solid #e94560; }
|
|
|
|
.message .agent { font-size: 11px; color: #00d9ff; font-weight: bold; }
|
|
.message .time { font-size: 10px; color: #666; float: right; }
|
|
.message .content { margin-top: 5px; font-size: 14px; }
|
|
|
|
.actions { margin-top: 20px; display: flex; gap: 10px; }
|
|
button { padding: 10px 20px; background: #00d9ff; border: none; border-radius: 8px; color: #000; font-weight: bold; cursor: pointer; }
|
|
button:hover { background: #00b8d4; }
|
|
button.clear { background: #e94560; color: #fff; }
|
|
|
|
.refresh { float: right; background: #7b2cbf; color: #fff; }
|
|
|
|
a { color: #00d9ff; }
|
|
|
|
.home-btn{position:fixed;top:10px;left:10px;z-index:9999;background:linear-gradient(135deg,#00d9ff,#7b2cbf);color:#fff;border:none;border-radius:8px;padding:10px 15px;font-size:14px;cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:8px;box-shadow:0 2px 10px rgba(0,217,255,0.3);transition:all 0.3s;font-family:-apple-system,BlinkMacSystemFont,sans-serif}.home-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,217,255,0.5)}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a href="https://portal-kolifee.duckdns.org/" class="home-btn" title="Retour au portail"><span style="font-size:18px">🏠</span><span>Accueil</span></a>
|
|
<div class="logo">
|
|
<img src="/turf/H3R7Tech_logo.png" alt="H3R7Tech">
|
|
</div>
|
|
|
|
<header>
|
|
<h1>💬 Agent Chat - H3R7Tech</h1>
|
|
</header>
|
|
|
|
<div class="stats" id="stats">
|
|
<div class="stat">
|
|
<div class="stat-num" id="total">0</div>
|
|
<div class="stat-label">Messages</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-num" id="agents">0</div>
|
|
<div class="stat-label">Agents</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-num" id="success">0</div>
|
|
<div class="stat-label">Succès</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-num" id="errors">0</div>
|
|
<div class="stat-label">Erreurs</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="agents" id="agents-list"></div>
|
|
|
|
<div class="actions">
|
|
<button onclick="loadMessages()" class="refresh">🔄 Rafraîchir</button>
|
|
<button onclick="clearMessages()" class="clear">🗑️ Effacer</button>
|
|
<a href="/">← Retour Portail</a>
|
|
</div>
|
|
|
|
<h2 style="margin: 20px 0 10px;">📝 Historique</h2>
|
|
<div class="chat-container" id="chat"></div>
|
|
|
|
<script>
|
|
const API = '/agent/api';
|
|
|
|
function loadMessages() {
|
|
fetch(API + '/messages?limit=100')
|
|
.then(r => r.json())
|
|
.then(messages => {
|
|
renderMessages(messages);
|
|
updateStats(messages);
|
|
});
|
|
}
|
|
|
|
function renderMessages(messages) {
|
|
const chat = document.getElementById('chat');
|
|
if (messages.length === 0) {
|
|
chat.innerHTML = '<div style="text-align:center;color:#666;padding:40px;">Aucun message</div>';
|
|
return;
|
|
}
|
|
|
|
chat.innerHTML = messages.map(m => {
|
|
const time = new Date(m.timestamp).toLocaleString('fr-FR', {
|
|
day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit'
|
|
});
|
|
return `<div class="message ${m.type}">
|
|
<span class="agent">🤖 ${m.agent}</span>
|
|
<span class="time">${time}</span>
|
|
<div class="content">${m.content}</div>
|
|
</div>`;
|
|
}).join('');
|
|
|
|
chat.scrollTop = chat.scrollHeight;
|
|
}
|
|
|
|
function updateStats(messages) {
|
|
document.getElementById('total').textContent = messages.length;
|
|
|
|
const agents = {};
|
|
let success = 0, errors = 0;
|
|
|
|
messages.forEach(m => {
|
|
agents[m.agent] = (agents[m.agent] || 0) + 1;
|
|
if (m.type === 'success') success++;
|
|
if (m.type === 'error') errors++;
|
|
});
|
|
|
|
document.getElementById('agents').textContent = Object.keys(agents).length;
|
|
document.getElementById('success').textContent = success;
|
|
document.getElementById('errors').textContent = errors;
|
|
|
|
// Render agent badges
|
|
const agentsList = document.getElementById('agents-list');
|
|
agentsList.innerHTML = Object.entries(agents).map(([a, c]) =>
|
|
`<span class="agent-badge">${a} <span class="count">${c}</span></span>`
|
|
).join('');
|
|
}
|
|
|
|
function clearMessages() {
|
|
if (!confirm('Effacer tous les messages?')) return;
|
|
fetch(API + '/messages', { method: 'DELETE' })
|
|
.then(() => loadMessages());
|
|
}
|
|
|
|
// Auto-refresh every 30 seconds
|
|
loadMessages();
|
|
setInterval(loadMessages, 30000);
|
|
</script>
|
|
</body>
|
|
</html>
|