Rodrigo Rodriguez (Pragmatismo)
2dca1664dd
- Database migrations run automatically on startup - New QUICK_START.md with usage examples and troubleshooting - Better handling of already-running services
530 lines
17 KiB
Text
530 lines
17 KiB
Text
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>General Bots</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
<meta name="description" content="General Bots - Simplified Interface" />
|
|
<meta name="theme-color" content="#3b82f6" />
|
|
|
|
<!-- Minimal styles -->
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--primary-color: #3b82f6;
|
|
--secondary-color: #6b7280;
|
|
--background-color: #ffffff;
|
|
--text-color: #1f2937;
|
|
--border-color: #e5e7eb;
|
|
--chat-bg: #f9fafb;
|
|
--message-user-bg: #3b82f6;
|
|
--message-bot-bg: #f3f4f6;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
background: var(--background-color);
|
|
color: var(--text-color);
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Header */
|
|
.header {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
padding: 1rem 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.header-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.logo {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: white;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: bold;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
/* Chat container */
|
|
.chat-container {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--chat-bg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.messages-area {
|
|
flex: 1;
|
|
padding: 1.5rem;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.message {
|
|
max-width: 70%;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.message.user {
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.message.bot {
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.message-content {
|
|
padding: 0.75rem 1rem;
|
|
border-radius: 12px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.message.user .message-content {
|
|
background: var(--message-user-bg);
|
|
color: white;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
|
|
.message.bot .message-content {
|
|
background: var(--message-bot-bg);
|
|
color: var(--text-color);
|
|
border-bottom-left-radius: 4px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.message-time {
|
|
font-size: 0.75rem;
|
|
color: var(--secondary-color);
|
|
margin-top: 0.25rem;
|
|
padding: 0 0.5rem;
|
|
}
|
|
|
|
.message.user .message-time {
|
|
text-align: right;
|
|
}
|
|
|
|
/* Input area */
|
|
.input-container {
|
|
background: white;
|
|
border-top: 1px solid var(--border-color);
|
|
padding: 1rem 1.5rem;
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.input-wrapper {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
background: var(--chat-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 24px;
|
|
padding: 0.5rem 1rem;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.input-wrapper:focus-within {
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
#messageInput {
|
|
flex: 1;
|
|
border: none;
|
|
outline: none;
|
|
background: transparent;
|
|
font-size: 1rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.send-button {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 50%;
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.send-button:hover {
|
|
background: #2563eb;
|
|
}
|
|
|
|
.send-button:disabled {
|
|
background: var(--secondary-color);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Loading indicator */
|
|
.typing-indicator {
|
|
display: none;
|
|
align-self: flex-start;
|
|
padding: 0.75rem 1rem;
|
|
background: var(--message-bot-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
border-bottom-left-radius: 4px;
|
|
}
|
|
|
|
.typing-indicator.show {
|
|
display: block;
|
|
}
|
|
|
|
.typing-dots {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.typing-dots span {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--secondary-color);
|
|
border-radius: 50%;
|
|
animation: typing 1.4s infinite;
|
|
}
|
|
|
|
.typing-dots span:nth-child(2) {
|
|
animation-delay: 0.2s;
|
|
}
|
|
|
|
.typing-dots span:nth-child(3) {
|
|
animation-delay: 0.4s;
|
|
}
|
|
|
|
@keyframes typing {
|
|
0%, 60%, 100% {
|
|
transform: translateY(0);
|
|
opacity: 0.7;
|
|
}
|
|
30% {
|
|
transform: translateY(-10px);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Scrollbar styling */
|
|
.messages-area::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.messages-area::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.messages-area::-webkit-scrollbar-thumb {
|
|
background: var(--border-color);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.messages-area::-webkit-scrollbar-thumb:hover {
|
|
background: var(--secondary-color);
|
|
}
|
|
|
|
/* Responsive design */
|
|
@media (max-width: 768px) {
|
|
.message {
|
|
max-width: 85%;
|
|
}
|
|
|
|
.header {
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.messages-area {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.input-container {
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
}
|
|
|
|
/* Dark mode support */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background-color: #111827;
|
|
--text-color: #f9fafb;
|
|
--border-color: #374151;
|
|
--chat-bg: #1f2937;
|
|
--message-bot-bg: #374151;
|
|
}
|
|
|
|
.header {
|
|
background: #1f2937;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.input-container {
|
|
background: #111827;
|
|
}
|
|
|
|
.input-wrapper {
|
|
background: #1f2937;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-title">
|
|
<div class="logo">GB</div>
|
|
<span>General Bots</span>
|
|
</div>
|
|
<div id="connectionStatus"></div>
|
|
</header>
|
|
|
|
<!-- Main chat container -->
|
|
<div class="chat-container">
|
|
<!-- Messages area -->
|
|
<div class="messages-area" id="messagesArea">
|
|
<!-- Welcome message -->
|
|
<div class="message bot">
|
|
<div class="message-content">
|
|
Hello! I'm your General Bots assistant. How can I help you today?
|
|
</div>
|
|
<div class="message-time">Just now</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Typing indicator -->
|
|
<div class="typing-indicator" id="typingIndicator">
|
|
<div class="typing-dots">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Input area -->
|
|
<div class="input-container">
|
|
<div class="input-wrapper">
|
|
<input
|
|
type="text"
|
|
id="messageInput"
|
|
placeholder="Type your message..."
|
|
aria-label="Message input"
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
<button class="send-button" id="sendButton" aria-label="Send message">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M22 2L11 13M22 2l-7 20-4-9-9-4z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Simple chat script -->
|
|
<script>
|
|
(function() {
|
|
'use strict';
|
|
|
|
// Elements
|
|
const messagesArea = document.getElementById('messagesArea');
|
|
const messageInput = document.getElementById('messageInput');
|
|
const sendButton = document.getElementById('sendButton');
|
|
const typingIndicator = document.getElementById('typingIndicator');
|
|
|
|
// WebSocket connection
|
|
let ws = null;
|
|
let reconnectTimeout = null;
|
|
|
|
// Initialize WebSocket
|
|
function initWebSocket() {
|
|
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
const wsUrl = `${protocol}//${window.location.host}/ws`;
|
|
|
|
try {
|
|
ws = new WebSocket(wsUrl);
|
|
|
|
ws.onopen = () => {
|
|
console.log('WebSocket connected');
|
|
updateConnectionStatus(true);
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
const data = JSON.parse(event.data);
|
|
handleIncomingMessage(data);
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
console.log('WebSocket disconnected');
|
|
updateConnectionStatus(false);
|
|
scheduleReconnect();
|
|
};
|
|
|
|
ws.onerror = (error) => {
|
|
console.error('WebSocket error:', error);
|
|
};
|
|
} catch (error) {
|
|
console.error('Failed to create WebSocket:', error);
|
|
scheduleReconnect();
|
|
}
|
|
}
|
|
|
|
// Reconnect logic
|
|
function scheduleReconnect() {
|
|
if (reconnectTimeout) return;
|
|
reconnectTimeout = setTimeout(() => {
|
|
reconnectTimeout = null;
|
|
initWebSocket();
|
|
}, 3000);
|
|
}
|
|
|
|
// Update connection status
|
|
function updateConnectionStatus(connected) {
|
|
const statusEl = document.getElementById('connectionStatus');
|
|
if (statusEl) {
|
|
statusEl.textContent = connected ? '● Connected' : '○ Disconnected';
|
|
statusEl.style.color = connected ? '#10b981' : '#ef4444';
|
|
}
|
|
}
|
|
|
|
// Handle incoming messages
|
|
function handleIncomingMessage(data) {
|
|
typingIndicator.classList.remove('show');
|
|
|
|
if (data.content) {
|
|
addMessage(data.content, 'bot');
|
|
}
|
|
}
|
|
|
|
// Add message to chat
|
|
function addMessage(text, sender) {
|
|
const messageDiv = document.createElement('div');
|
|
messageDiv.className = `message ${sender}`;
|
|
|
|
const contentDiv = document.createElement('div');
|
|
contentDiv.className = 'message-content';
|
|
contentDiv.textContent = text;
|
|
|
|
const timeDiv = document.createElement('div');
|
|
timeDiv.className = 'message-time';
|
|
timeDiv.textContent = formatTime(new Date());
|
|
|
|
messageDiv.appendChild(contentDiv);
|
|
messageDiv.appendChild(timeDiv);
|
|
|
|
messagesArea.appendChild(messageDiv);
|
|
scrollToBottom();
|
|
}
|
|
|
|
// Format timestamp
|
|
function formatTime(date) {
|
|
return date.toLocaleTimeString('en-US', {
|
|
hour: 'numeric',
|
|
minute: '2-digit',
|
|
hour12: true
|
|
});
|
|
}
|
|
|
|
// Scroll to bottom
|
|
function scrollToBottom() {
|
|
messagesArea.scrollTop = messagesArea.scrollHeight;
|
|
}
|
|
|
|
// Send message
|
|
function sendMessage() {
|
|
const message = messageInput.value.trim();
|
|
if (!message) return;
|
|
|
|
// Add user message
|
|
addMessage(message, 'user');
|
|
|
|
// Clear input
|
|
messageInput.value = '';
|
|
|
|
// Show typing indicator
|
|
typingIndicator.classList.add('show');
|
|
scrollToBottom();
|
|
|
|
// Send via WebSocket if connected
|
|
if (ws && ws.readyState === WebSocket.OPEN) {
|
|
ws.send(JSON.stringify({
|
|
type: 'message',
|
|
content: message
|
|
}));
|
|
} else {
|
|
// Fallback: Send via HTTP
|
|
sendViaHttp(message);
|
|
}
|
|
}
|
|
|
|
// Fallback HTTP sending
|
|
async function sendViaHttp(message) {
|
|
try {
|
|
const response = await fetch('/api/chat/message', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ content: message })
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
handleIncomingMessage(data);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to send message:', error);
|
|
typingIndicator.classList.remove('show');
|
|
addMessage('Sorry, I couldn\'t process your message. Please try again.', 'bot');
|
|
}
|
|
}
|
|
|
|
// Event listeners
|
|
sendButton.addEventListener('click', sendMessage);
|
|
|
|
messageInput.addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
sendMessage();
|
|
}
|
|
});
|
|
|
|
// Initialize on load
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initWebSocket();
|
|
messageInput.focus();
|
|
});
|
|
|
|
// Handle page visibility
|
|
document.addEventListener('visibilitychange', () => {
|
|
if (!document.hidden && (!ws || ws.readyState !== WebSocket.OPEN)) {
|
|
initWebSocket();
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|