core-crew/templates/chat.html

58 lines
1.8 KiB
HTML
Raw Normal View History

2024-06-15 13:41:25 -04:00
<!DOCTYPE html>
<html>
<head>
<title>Content Generation Chat</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js"></script>
<script>
var socket = io();
socket.on('connect', function() {
console.log('Connected to server');
});
socket.on('task_queued', function(data) {
var taskId = data.task_id;
var agenda = data.agenda;
addMessage('System', `Task ${taskId} queued for generating content on "${agenda}".`);
});
socket.on('agent_update', function(data) {
var taskId = data.task_id;
var agentId = data.agent_id;
var status = data.status;
var message = data.message;
addMessage(`Agent ${agentId}`, `[${status}] ${message}`);
});
function addMessage(sender, message) {
var chatLog = document.getElementById('chat-log');
var messageElement = document.createElement('div');
messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
chatLog.appendChild(messageElement);
}
function generateContent() {
var agendaInput = document.getElementById('agenda-input');
var agenda = agendaInput.value.trim();
if (agenda) {
socket.emit('generate_content', { agenda: agenda });
agendaInput.value = '';
}
}
</script>
<style>
#chat-log {
height: 300px;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h1>Content Generation Chat</h1>
<div id="chat-log"></div>
<input type="text" id="agenda-input" placeholder="Enter a topic or agenda">
<button onclick="generateContent()">Generate Content</button>
</body>
</html>