343 lines
10 KiB
HTML
343 lines
10 KiB
HTML
<!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> |