forked from cleveragents/cleveragents-core
aditya
9fe3196827
All sims re-run after pipeline fixes (better prompts, real syntax validation, fenced-block extraction fix). Results: 7/7 PASS, 20 files total, all Python files pass compile() syntax check. Includes run_all_sims.py runner script and rag-basic action config.
423 lines
14 KiB
HTML
423 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WebSocket Chat</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.chat-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chat-header {
|
|
background: #4CAF50;
|
|
color: white;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.connection-status {
|
|
padding: 10px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.connected {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.disconnected {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
.connecting {
|
|
background-color: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.messages {
|
|
height: 400px;
|
|
overflow-y: auto;
|
|
padding: 20px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.message {
|
|
margin-bottom: 15px;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.message.chat {
|
|
background-color: #e3f2fd;
|
|
border-left: 4px solid #2196F3;
|
|
}
|
|
|
|
.message.system {
|
|
background-color: #f3e5f5;
|
|
border-left: 4px solid #9c27b0;
|
|
font-style: italic;
|
|
}
|
|
|
|
.message.error {
|
|
background-color: #ffebee;
|
|
border-left: 4px solid #f44336;
|
|
}
|
|
|
|
.message-sender {
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.message-content {
|
|
color: #666;
|
|
}
|
|
|
|
.message-timestamp {
|
|
font-size: 0.8em;
|
|
color: #999;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.input-area {
|
|
padding: 20px;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
.input-row {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#usernameInput {
|
|
flex: 1;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#messageInput {
|
|
flex: 3;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#sendButton {
|
|
padding: 10px 20px;
|
|
background: #4CAF50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#sendButton:hover:not(:disabled) {
|
|
background: #45a049;
|
|
}
|
|
|
|
#sendButton:disabled {
|
|
background: #cccccc;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.controls {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #2196F3;
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #1976D2;
|
|
}
|
|
|
|
.btn-danger {
|
|
background: #f44336;
|
|
color: white;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background: #d32f2f;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="chat-container">
|
|
<div class="chat-header">
|
|
<h1>WebSocket Chat Room</h1>
|
|
</div>
|
|
|
|
<div id="connectionStatus" class="connection-status disconnected">
|
|
Disconnected
|
|
</div>
|
|
|
|
<div id="messages" class="messages">
|
|
<div class="message system">
|
|
<div class="message-content">Welcome to the chat room! Enter your username and click Connect to start chatting.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-area">
|
|
<div class="input-row">
|
|
<input type="text" id="usernameInput" placeholder="Enter your username..." value="Anonymous">
|
|
<input type="text" id="messageInput" placeholder="Type your message..." disabled>
|
|
<button id="sendButton" disabled>Send</button>
|
|
</div>
|
|
<div class="controls">
|
|
<button id="connectButton" class="btn btn-primary">Connect</button>
|
|
<button id="disconnectButton" class="btn btn-danger" disabled>Disconnect</button>
|
|
<button id="clearButton" class="btn">Clear Messages</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
class ChatClient {
|
|
constructor() {
|
|
this.websocket = null;
|
|
this.isConnected = false;
|
|
this.username = 'Anonymous';
|
|
this.serverUrl = 'ws://localhost:8765';
|
|
|
|
this.initializeElements();
|
|
this.attachEventListeners();
|
|
}
|
|
|
|
initializeElements() {
|
|
this.elements = {
|
|
connectionStatus: document.getElementById('connectionStatus'),
|
|
messages: document.getElementById('messages'),
|
|
usernameInput: document.getElementById('usernameInput'),
|
|
messageInput: document.getElementById('messageInput'),
|
|
sendButton: document.getElementById('sendButton'),
|
|
connectButton: document.getElementById('connectButton'),
|
|
disconnectButton: document.getElementById('disconnectButton'),
|
|
clearButton: document.getElementById('clearButton')
|
|
};
|
|
}
|
|
|
|
attachEventListeners() {
|
|
this.elements.connectButton.addEventListener('click', () => this.connect());
|
|
this.elements.disconnectButton.addEventListener('click', () => this.disconnect());
|
|
this.elements.sendButton.addEventListener('click', () => this.sendMessage());
|
|
this.elements.clearButton.addEventListener('click', () => this.clearMessages());
|
|
|
|
this.elements.messageInput.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
this.sendMessage();
|
|
}
|
|
});
|
|
|
|
this.elements.usernameInput.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') {
|
|
this.connect();
|
|
}
|
|
});
|
|
}
|
|
|
|
async connect() {
|
|
if (this.isConnected) return;
|
|
|
|
this.username = this.elements.usernameInput.value.trim() || 'Anonymous';
|
|
this.updateConnectionStatus('connecting', 'Connecting...');
|
|
|
|
try {
|
|
this.websocket = new WebSocket(this.serverUrl);
|
|
|
|
this.websocket.onopen = () => {
|
|
this.isConnected = true;
|
|
this.updateConnectionStatus('connected', 'Connected');
|
|
this.updateButtonStates();
|
|
this.addSystemMessage('Connected to chat server');
|
|
};
|
|
|
|
this.websocket.onmessage = (event) => {
|
|
this.handleMessage(event.data);
|
|
};
|
|
|
|
this.websocket.onclose = (event) => {
|
|
this.isConnected = false;
|
|
this.updateConnectionStatus('disconnected', 'Disconnected');
|
|
this.updateButtonStates();
|
|
|
|
if (event.wasClean) {
|
|
this.addSystemMessage('Disconnected from chat server');
|
|
} else {
|
|
this.addSystemMessage('Connection lost unexpectedly');
|
|
}
|
|
|
|
this.websocket = null;
|
|
};
|
|
|
|
this.websocket.onerror = (error) => {
|
|
console.error('WebSocket error:', error);
|
|
this.addErrorMessage('Connection error occurred');
|
|
};
|
|
|
|
} catch (error) {
|
|
console.error('Failed to connect:', error);
|
|
this.updateConnectionStatus('disconnected', 'Connection failed');
|
|
this.addErrorMessage('Failed to connect to server');
|
|
}
|
|
}
|
|
|
|
disconnect() {
|
|
if (this.websocket && this.isConnected) {
|
|
this.websocket.close(1000, 'User disconnected');
|
|
}
|
|
}
|
|
|
|
sendMessage() {
|
|
const message = this.elements.messageInput.value.trim();
|
|
if (!message || !this.isConnected) return;
|
|
|
|
try {
|
|
const messageData = {
|
|
message: message,
|
|
sender: this.username
|
|
};
|
|
|
|
this.websocket.send(JSON.stringify(messageData));
|
|
this.elements.messageInput.value = '';
|
|
|
|
} catch (error) {
|
|
console.error('Failed to send message:', error);
|
|
this.addErrorMessage('Failed to send message');
|
|
}
|
|
}
|
|
|
|
handleMessage(data) {
|
|
try {
|
|
const message = JSON.parse(data);
|
|
|
|
switch (message.type) {
|
|
case 'chat':
|
|
this.addChatMessage(message);
|
|
break;
|
|
case 'system':
|
|
this.addSystemMessage(message.message);
|
|
break;
|
|
case 'error':
|
|
this.addErrorMessage(message.message);
|
|
break;
|
|
default:
|
|
console.warn('Unknown message type:', message.type);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to parse message:', error);
|
|
this.addErrorMessage('Received invalid message format');
|
|
}
|
|
}
|
|
|
|
addChatMessage(message) {
|
|
const messageEl = this.createMessageElement('chat');
|
|
messageEl.innerHTML = `
|
|
<div class="message-sender">${this.escapeHtml(message.sender)}</div>
|
|
<div class="message-content">${this.escapeHtml(message.message)}</div>
|
|
<div class="message-timestamp">${this.formatTimestamp(message.timestamp)}</div>
|
|
`;
|
|
this.elements.messages.appendChild(messageEl);
|
|
this.scrollToBottom();
|
|
}
|
|
|
|
addSystemMessage(text) {
|
|
const messageEl = this.createMessageElement('system');
|
|
messageEl.innerHTML = `
|
|
<div class="message-content">${this.escapeHtml(text)}</div>
|
|
<div class="message-timestamp">${this.formatTimestamp(Date.now() / 1000)}</div>
|
|
`;
|
|
this.elements.messages.appendChild(messageEl);
|
|
this.scrollToBottom();
|
|
}
|
|
|
|
addErrorMessage(text) {
|
|
const messageEl = this.createMessageElement('error');
|
|
messageEl.innerHTML = `
|
|
<div class="message-content">Error: ${this.escapeHtml(text)}</div>
|
|
<div class="message-timestamp">${this.formatTimestamp(Date.now() / 1000)}</div>
|
|
`;
|
|
this.elements.messages.appendChild(messageEl);
|
|
this.scrollToBottom();
|
|
}
|
|
|
|
createMessageElement(type) {
|
|
const messageEl = document.createElement('div');
|
|
messageEl.className = `message ${type}`;
|
|
return messageEl;
|
|
}
|
|
|
|
updateConnectionStatus(status, text) {
|
|
this.elements.connectionStatus.className = `connection-status ${status}`;
|
|
this.elements.connectionStatus.textContent = text;
|
|
}
|
|
|
|
updateButtonStates() {
|
|
this.elements.connectButton.disabled = this.isConnected;
|
|
this.elements.disconnectButton.disabled = !this.isConnected;
|
|
this.elements.sendButton.disabled = !this.isConnected;
|
|
this.elements.messageInput.disabled = !this.isConnected;
|
|
this.elements.usernameInput.disabled = this.isConnected;
|
|
}
|
|
|
|
clearMessages() {
|
|
this.elements.messages.innerHTML = '';
|
|
this.addSystemMessage('Messages cleared');
|
|
}
|
|
|
|
scrollToBottom() {
|
|
this.elements.messages.scrollTop = this.elements.messages.scrollHeight;
|
|
}
|
|
|
|
escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
formatTimestamp(timestamp) {
|
|
const date = new Date(timestamp * 1000);
|
|
return date.toLocaleTimeString();
|
|
}
|
|
}
|
|
|
|
// Initialize the chat client when the page loads
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
window.chatClient = new ChatClient();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |