feat(api): remove outdated planning document and implement streaming service for real-time task updates
This commit is contained in:
Davidson Gomes
343
static/test_chat_stream.html
Normal file
343
static/test_chat_stream.html
Normal file
@@ -0,0 +1,343 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>ADK Streaming Test</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--secondary-color: #f3f4f6;
|
||||
--text-color: #1f2937;
|
||||
--border-color: #e5e7eb;
|
||||
--success-color: #10b981;
|
||||
--error-color: #ef4444;
|
||||
--user-message-bg: #dbeafe;
|
||||
--agent-message-bg: #f3f4f6;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-color);
|
||||
background-color: #f9fafb;
|
||||
padding: 20px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
#messages {
|
||||
height: 60vh;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
background-color: white;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.message {
|
||||
margin: 10px 0;
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
max-width: 80%;
|
||||
word-wrap: break-word;
|
||||
animation: fadeIn 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.user-message {
|
||||
background-color: var(--user-message-bg);
|
||||
margin-left: auto;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.agent-message {
|
||||
background-color: var(--agent-message-bg);
|
||||
margin-right: auto;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
#connection-status {
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.connected {
|
||||
background-color: rgba(16, 185, 129, 0.1);
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.disconnected {
|
||||
background-color: rgba(239, 68, 68, 0.1);
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
#messageForm {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
input[type="text"]:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 12px 24px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
#connectButton {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#connectButton:hover {
|
||||
background-color: #1d4ed8;
|
||||
}
|
||||
|
||||
#connectButton:disabled {
|
||||
background-color: #93c5fd;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#sendButton {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#sendButton:hover {
|
||||
background-color: #1d4ed8;
|
||||
}
|
||||
|
||||
#sendButton:disabled {
|
||||
background-color: #93c5fd;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
#debug {
|
||||
margin-top: 20px;
|
||||
padding: 15px;
|
||||
background-color: #1f2937;
|
||||
color: #e5e7eb;
|
||||
border-radius: 8px;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
<blade media|%20(max-width%3A%20768px)%20%7B>body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#messages {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
.message {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#sendButton {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>ADK Streaming Test</h1>
|
||||
<div id="messages"></div>
|
||||
<div id="connection-status" class="disconnected">Desconectado</div>
|
||||
<form id="messageForm">
|
||||
<input type="text" id="agentId" placeholder="Agent ID">
|
||||
<input type="text" id="contactId" placeholder="Contact ID">
|
||||
<input type="text" id="token" placeholder="JWT Token">
|
||||
<button type="button" id="connectButton">Conectar</button>
|
||||
<div style="display: flex; margin-top: 15px;">
|
||||
<input type="text" id="message" placeholder="Digite sua mensagem...">
|
||||
<button type="submit" id="sendButton" disabled>Enviar</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="debug"></div>
|
||||
|
||||
<script>
|
||||
let ws = null;
|
||||
let currentMessageId = null;
|
||||
const messagesDiv = document.getElementById('messages');
|
||||
const messageForm = document.getElementById('messageForm');
|
||||
const connectButton = document.getElementById('connectButton');
|
||||
const sendButton = document.getElementById('sendButton');
|
||||
const statusDiv = document.getElementById('connection-status');
|
||||
const debugDiv = document.getElementById('debug');
|
||||
|
||||
function log(message, data = null) {
|
||||
const timestamp = new Date().toISOString();
|
||||
let logMessage = `${timestamp} - ${message}`;
|
||||
if (data) {
|
||||
logMessage += '\n' + JSON.stringify(data, null, 2);
|
||||
}
|
||||
debugDiv.textContent = logMessage + '\n\n' + debugDiv.textContent;
|
||||
console.log(message, data);
|
||||
}
|
||||
|
||||
connectButton.onclick = function () {
|
||||
const agentId = document.getElementById('agentId').value;
|
||||
const contactId = document.getElementById('contactId').value;
|
||||
const token = document.getElementById('token').value;
|
||||
|
||||
if (!agentId || !contactId || !token) {
|
||||
alert('Por favor, preencha todos os campos');
|
||||
return;
|
||||
}
|
||||
|
||||
if (ws) {
|
||||
ws.close();
|
||||
}
|
||||
|
||||
const ws_url = `ws://${window.location.host}/api/v1/chat/ws/${agentId}/${contactId}`;
|
||||
log('Connecting to WebSocket', {
|
||||
url: ws_url
|
||||
});
|
||||
|
||||
ws = new WebSocket(ws_url);
|
||||
|
||||
ws.onopen = function () {
|
||||
log('WebSocket connected, sending authentication');
|
||||
const authMessage = {
|
||||
type: 'authorization',
|
||||
token: token
|
||||
};
|
||||
ws.send(JSON.stringify(authMessage));
|
||||
log('Authentication sent', authMessage);
|
||||
|
||||
statusDiv.textContent = 'Conectado';
|
||||
statusDiv.className = 'connected';
|
||||
sendButton.disabled = false;
|
||||
connectButton.disabled = true;
|
||||
};
|
||||
|
||||
ws.onmessage = function (event) {
|
||||
const packet = JSON.parse(event.data);
|
||||
log('Received message', packet);
|
||||
|
||||
if (packet.turn_complete) {
|
||||
currentMessageId = null;
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentMessageId == null) {
|
||||
currentMessageId = Math.random().toString(36).substring(7);
|
||||
const messageDiv = document.createElement('div');
|
||||
messageDiv.id = currentMessageId;
|
||||
messageDiv.className = 'message agent-message';
|
||||
messagesDiv.appendChild(messageDiv);
|
||||
}
|
||||
|
||||
const messageDiv = document.getElementById(currentMessageId);
|
||||
messageDiv.textContent = (messageDiv.textContent || '') + packet.message;
|
||||
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
||||
};
|
||||
|
||||
ws.onclose = function (event) {
|
||||
log('WebSocket closed', {
|
||||
code: event.code,
|
||||
reason: event.reason,
|
||||
wasClean: event.wasClean
|
||||
});
|
||||
statusDiv.textContent = 'Desconectado';
|
||||
statusDiv.className = 'disconnected';
|
||||
sendButton.disabled = true;
|
||||
connectButton.disabled = false;
|
||||
ws = null;
|
||||
};
|
||||
|
||||
ws.onerror = function (error) {
|
||||
log('WebSocket error', error);
|
||||
statusDiv.textContent = 'Erro na conexão';
|
||||
statusDiv.className = 'disconnected';
|
||||
};
|
||||
};
|
||||
|
||||
messageForm.onsubmit = function (e) {
|
||||
e.preventDefault();
|
||||
const messageInput = document.getElementById('message');
|
||||
const message = messageInput.value;
|
||||
|
||||
if (message && ws) {
|
||||
const userMessageDiv = document.createElement('div');
|
||||
userMessageDiv.className = 'message user-message';
|
||||
userMessageDiv.textContent = message;
|
||||
messagesDiv.appendChild(userMessageDiv);
|
||||
|
||||
const messagePacket = {
|
||||
message: message
|
||||
};
|
||||
log('Sending message', messagePacket);
|
||||
ws.send(JSON.stringify(messagePacket));
|
||||
|
||||
messageInput.value = '';
|
||||
messagesDiv.scrollTop = messagesDiv.scrollHeight;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user