truetype/langcode_agent
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 16: Responsive web design improvements and enhanced documentation

Browse Source
This commit is contained in:
truetype committed 2026-03-20 20:34:23 +01:00
1 parent b3f57a8635
commit cf8e4c677f
2 files changed
+414 -58
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/index.html
+363 -56
View File
@@ -21,6 +21,7 @@
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
header {
@@ -89,6 +90,8 @@
font-size: 16px;
font-weight: 600;
transition: background 0.3s;
display: inline-block;
margin: 5px;
}
.btn:hover {
@@ -122,8 +125,8 @@
padding: 15px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
gap: 10px;
}
.config-info h3 {
@@ -139,6 +142,7 @@
.config-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.status-badge {
@@ -193,10 +197,12 @@
.chat-input {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.chat-input input {
flex: 1;
min-width: 200px;
}
.alert {
@@ -225,6 +231,7 @@
display: flex;
border-bottom: 2px solid #dee2e6;
margin-bottom: 20px;
flex-wrap: wrap;
}
.tab {
@@ -232,6 +239,9 @@
cursor: pointer;
border-bottom: 3px solid transparent;
margin-bottom: -2px;
flex: 1;
text-align: center;
min-width: 120px;
}
.tab.active {
@@ -247,71 +257,233 @@
.tab-content.active {
display: block;
}
.language-selector {
position: absolute;
top: 20px;
right: 20px;
}
.language-selector select {
padding: 8px 12px;
border-radius: 6px;
border: 1px solid #ddd;
background: white;
font-size: 14px;
cursor: pointer;
}
/* Responsive Design */
@media (max-width: 768px) {
body {
padding: 10px;
}
.container {
padding: 0 10px;
}
header h1 {
font-size: 2rem;
}
header p {
font-size: 1rem;
}
.card {
padding: 20px;
margin-bottom: 20px;
}
.card h2 {
font-size: 1.3rem;
}
.form-group {
margin-bottom: 15px;
}
label {
font-size: 14px;
}
input, select, textarea {
padding: 10px;
font-size: 14px;
}
.btn {
padding: 10px 20px;
font-size: 14px;
width: 100%;
margin: 5px 0;
}
.config-item {
padding: 12px;
}
.config-actions {
flex-direction: column;
}
.config-actions .btn {
width: 100%;
}
.chat-container {
height: 300px;
padding: 10px;
}
.message {
max-width: 90%;
padding: 8px 12px;
font-size: 14px;
}
.chat-input {
flex-direction: column;
}
.chat-input input {
min-width: 100%;
}
.tabs {
flex-direction: column;
}
.tab {
padding: 8px 15px;
border-bottom: none;
border-left: 3px solid transparent;
margin-bottom: 0;
text-align: left;
}
.tab.active {
border-bottom: none;
border-left-color: #667eea;
}
.language-selector {
position: static;
text-align: center;
margin-bottom: 20px;
}
}
@media (max-width: 480px) {
header h1 {
font-size: 1.8rem;
}
.card {
padding: 15px;
}
.btn {
padding: 8px 16px;
font-size: 13px;
}
.chat-container {
height: 250px;
}
}
/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
.btn:hover {
background: #667eea;
}
.btn:active {
background: #5a6fd8;
transform: scale(0.98);
}
input:focus, select:focus, textarea:focus {
border-color: #667eea;
box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}
}
</style>
</head>
<body>
<div class="container">
<div class="language-selector">
<select id="language-select" onchange="changeLanguage(this.value)">
<option value="it">Italiano</option>
<option value="en">English</option>
</select>
</div>
<header>
<h1>MaxClaw Agent</h1>
<p>Interfaccia di configurazione per l'agente AI</p>
<h1 id="title">MaxClaw Agent</h1>
<p id="subtitle">Interfaccia di configurazione per l'agente AI</p>
</header>
<div class="card">
<div class="tabs">
<div class="tab active" onclick="switchTab('config')">Configurazione</div>
<div class="tab" onclick="switchTab('chat')">Chat</div>
<div class="tab" onclick="switchTab('status')">Stato</div>
<div class="tab active" onclick="switchTab('config')" id="tab-config">Configurazione</div>
<div class="tab" onclick="switchTab('chat')" id="tab-chat">Chat</div>
<div class="tab" onclick="switchTab('status')" id="tab-status">Stato</div>
</div>
<div id="config-tab" class="tab-content active">
<h2>Gestione Configurazioni</h2>
<h2 id="config-title">Gestione Configurazioni</h2>
<div id="alert-container"></div>
<form id="config-form">
<div class="form-group">
<label for="config-name">Nome Configurazione</label>
<label for="config-name" id="name-label">Nome Configurazione</label>
<input type="text" id="config-name" placeholder="es. mio-ollama" required>
</div>
<div class="form-group">
<label for="config-provider">Provider</label>
<label for="config-provider" id="provider-label">Provider</label>
<select id="config-provider" required>
<option value="">Seleziona un provider</option>
<option value="ollama">Ollama</option>
<option value="openai">OpenAI</option>
<option value="openrouter">OpenRouter</option>
<option value="anthropic">Anthropic</option>
<option value="google">Google</option>
</select>
</div>
<div class="form-group">
<label for="config-model">Nome Modello</label>
<label for="config-model" id="model-label">Nome Modello</label>
<input type="text" id="config-model" placeholder="es. gemma2:9b" required>
</div>
<div class="form-group" id="api-key-group">
<label for="config-api-key">Chiave API</label>
<label for="config-api-key" id="api-key-label">Chiave API</label>
<input type="password" id="config-api-key" placeholder="Inserisci la chiave API">
</div>
<div class="form-group" id="base-url-group">
<label for="config-base-url">URL Base</label>
<label for="config-base-url" id="base-url-label">URL Base</label>
<input type="text" id="config-base-url" placeholder="http://localhost:11434">
</div>
<div class="form-group">
<label>
<input type="checkbox" id="config-set-active">
Imposta come configurazione attiva
<span id="set-active-label">Imposta come configurazione attiva</span>
</label>
</div>
<button type="submit" class="btn">Salva Configurazione</button>
<button type="button" class="btn btn-secondary" onclick="clearForm()">Pulisci</button>
<button type="submit" class="btn" id="save-btn">Salva Configurazione</button>
<button type="button" class="btn btn-secondary" onclick="clearForm()" id="clear-btn">Pulisci</button>
</form>
<div class="config-list">
<h3>Configurazioni Esistenti</h3>
<h3 id="existing-configs-title">Configurazioni Esistenti</h3>
<div id="config-list-container">
<!-- Configurations will be loaded here -->
</div>
@@ -319,49 +491,49 @@
</div>
<div id="chat-tab" class="tab-content">
<h2>Chat con MaxClaw</h2>
<h2 id="chat-title">Chat con MaxClaw</h2>
<div class="chat-container" id="chat-container">
<div class="message agent-message">
<div class="message agent-message" id="welcome-message">
Ciao! Sono MaxClaw, il tuo agente AI. Come posso aiutarti oggi?
</div>
</div>
<div class="chat-input">
<input type="text" id="chat-input" placeholder="Scrivi un messaggio...">
<button class="btn" onclick="sendMessage()">Invia</button>
<button class="btn" onclick="sendMessage()" id="send-btn">Invia</button>
</div>
</div>
<div id="status-tab" class="tab-content">
<h2>Stato del Sistema</h2>
<h2 id="status-title">Stato del Sistema</h2>
<div id="status-container">
<div class="alert alert-success">
<strong>✅ Sistema operativo</strong><br>
L'agente è pronto per l'uso.
<div class="alert alert-success" id="system-status-alert">
<strong id="system-ok">✅ Sistema operativo</strong><br>
<span id="system-ready">L'agente è pronto per l'uso.</span>
</div>
<div class="config-item">
<div class="config-info">
<h3>Provider Attivo</h3>
<h3 id="active-provider-title">Provider Attivo</h3>
<p id="active-provider">Nessun provider configurato</p>
</div>
</div>
<div class="config-item">
<div class="config-info">
<h3>Modello Attivo</h3>
<h3 id="active-model-title">Modello Attivo</h3>
<p id="active-model">Nessun modello configurato</p>
</div>
</div>
<div class="config-item">
<div class="config-info">
<h3>Connessione</h3>
<h3 id="connection-title">Connessione</h3>
<p id="connection-status">Verifica in corso...</p>
</div>
<button class="btn btn-secondary" onclick="testConnection()">Testa Connessione</button>
<button class="btn btn-secondary" onclick="testConnection()" id="test-connection-btn">Testa Connessione</button>
</div>
</div>
</div>
@@ -372,8 +544,104 @@
// API base URL
const API_BASE = 'http://localhost:8000';
// Current language
let currentLanguage = 'it';
// Translations
const translations = {
it: {
title: "MaxClaw Agent",
subtitle: "Interfaccia di configurazione per l'agente AI",
tabConfig: "Configurazione",
tabChat: "Chat",
tabStatus: "Stato",
configTitle: "Gestione Configurazioni",
nameLabel: "Nome Configurazione",
providerLabel: "Provider",
modelLabel: "Nome Modello",
apiKeyLabel: "Chiave API",
baseUrlLabel: "URL Base",
setActiveLabel: "Imposta come configurazione attiva",
saveBtn: "Salva Configurazione",
clearBtn: "Pulisci",
existingConfigsTitle: "Configurazioni Esistenti",
chatTitle: "Chat con MaxClaw",
welcomeMessage: "Ciao! Sono MaxClaw, il tuo agente AI. Come posso aiutarti oggi?",
chatPlaceholder: "Scrivi un messaggio...",
sendBtn: "Invia",
statusTitle: "Stato del Sistema",
systemOk: "✅ Sistema operativo",
systemReady: "L'agente è pronto per l'uso.",
activeProviderTitle: "Provider Attivo",
activeModelTitle: "Modello Attivo",
connectionTitle: "Connessione",
testConnectionBtn: "Testa Connessione",
alertSuccess: "Configurazione salvata con successo!",
alertError: "Errore",
alertCancelled: "Annullato.",
alertTesting: "Test in corso...",
alertConnectionSuccess: "Connessione riuscita!",
alertConnectionFailed: "Connessione fallita",
noProvider: "Nessun provider configurato",
noModel: "Nessun modello configurato",
checking: "Verifica in corso...",
active: "Attivo",
inactive: "Inattivo",
test: "Testa",
delete: "Elimina",
activate: "Attiva"
},
en: {
title: "MaxClaw Agent",
subtitle: "Configuration interface for AI agent",
tabConfig: "Configuration",
tabChat: "Chat",
tabStatus: "Status",
configTitle: "Configuration Management",
nameLabel: "Configuration Name",
providerLabel: "Provider",
modelLabel: "Model Name",
apiKeyLabel: "API Key",
baseUrlLabel: "Base URL",
setActiveLabel: "Set as active configuration",
saveBtn: "Save Configuration",
clearBtn: "Clear",
existingConfigsTitle: "Existing Configurations",
chatTitle: "Chat with MaxClaw",
welcomeMessage: "Hello! I'm MaxClaw, your AI agent. How can I help you today?",
chatPlaceholder: "Type a message...",
sendBtn: "Send",
statusTitle: "System Status",
systemOk: "✅ System operational",
systemReady: "The agent is ready to use.",
activeProviderTitle: "Active Provider",
activeModelTitle: "Active Model",
connectionTitle: "Connection",
testConnectionBtn: "Test Connection",
alertSuccess: "Configuration saved successfully!",
alertError: "Error",
alertCancelled: "Cancelled.",
alertTesting: "Testing...",
alertConnectionSuccess: "Connection successful!",
alertConnectionFailed: "Connection failed",
noProvider: "No provider configured",
noModel: "No model configured",
checking: "Checking...",
active: "Active",
inactive: "Inactive",
test: "Test",
delete: "Delete",
activate: "Activate"
}
};
// Initialize
document.addEventListener('DOMContentLoaded', function() {
// Load saved language preference
const savedLanguage = localStorage.getItem('maxclaw-language') || 'it';
document.getElementById('language-select').value = savedLanguage;
changeLanguage(savedLanguage);
loadConfigurations();
loadActiveConfiguration();
@@ -396,6 +664,45 @@
});
});
// Change language
function changeLanguage(language) {
currentLanguage = language;
localStorage.setItem('maxclaw-language', language);
const t = translations[language];
// Update all translatable elements
document.getElementById('title').textContent = t.title;
document.getElementById('subtitle').textContent = t.subtitle;
document.getElementById('tab-config').textContent = t.tabConfig;
document.getElementById('tab-chat').textContent = t.tabChat;
document.getElementById('tab-status').textContent = t.tabStatus;
document.getElementById('config-title').textContent = t.configTitle;
document.getElementById('name-label').textContent = t.nameLabel;
document.getElementById('provider-label').textContent = t.providerLabel;
document.getElementById('model-label').textContent = t.modelLabel;
document.getElementById('api-key-label').textContent = t.apiKeyLabel;
document.getElementById('base-url-label').textContent = t.baseUrlLabel;
document.getElementById('set-active-label').textContent = t.setActiveLabel;
document.getElementById('save-btn').textContent = t.saveBtn;
document.getElementById('clear-btn').textContent = t.clearBtn;
document.getElementById('existing-configs-title').textContent = t.existingConfigsTitle;
document.getElementById('chat-title').textContent = t.chatTitle;
document.getElementById('welcome-message').textContent = t.welcomeMessage;
document.getElementById('chat-input').placeholder = t.chatPlaceholder;
document.getElementById('send-btn').textContent = t.sendBtn;
document.getElementById('status-title').textContent = t.statusTitle;
document.getElementById('system-ok').textContent = t.systemOk;
document.getElementById('system-ready').textContent = t.systemReady;
document.getElementById('active-provider-title').textContent = t.activeProviderTitle;
document.getElementById('active-model-title').textContent = t.activeModelTitle;
document.getElementById('connection-title').textContent = t.connectionTitle;
document.getElementById('test-connection-btn').textContent = t.testConnectionBtn;
// Update HTML lang attribute
document.documentElement.lang = language;
}
// Switch tabs
function switchTab(tabName) {
// Update tab buttons
@@ -421,7 +728,7 @@
container.innerHTML = '';
if (configs.length === 0) {
container.innerHTML = '<p>Nessuna configurazione trovata.</p>';
container.innerHTML = `<p>${translations[currentLanguage].noProvider}</p>`;
return;
}
@@ -431,20 +738,20 @@
item.innerHTML = `
<div class="config-info">
<h3>${config.name}
${config.is_active ? '<span class="status-badge status-active">Attivo</span>' : ''}
${config.is_active ? `<span class="status-badge status-active">${translations[currentLanguage].active}</span>` : ''}
</h3>
<p>Provider: ${config.provider} | Modello: ${config.model_name}</p>
<p>${translations[currentLanguage].providerLabel}: ${config.provider} | ${translations[currentLanguage].modelLabel}: ${config.model_name}</p>
</div>
<div class="config-actions">
<button class="btn btn-secondary" onclick="activateConfig('${config.name}')">Attiva</button>
<button class="btn btn-secondary" onclick="testConfig('${config.name}')">Testa</button>
<button class="btn btn-danger" onclick="deleteConfig('${config.name}')">Elimina</button>
<button class="btn btn-secondary" onclick="activateConfig('${config.name}')">${translations[currentLanguage].activate}</button>
<button class="btn btn-secondary" onclick="testConfig('${config.name}')">${translations[currentLanguage].test}</button>
<button class="btn btn-danger" onclick="deleteConfig('${config.name}')">${translations[currentLanguage].delete}</button>
</div>
`;
container.appendChild(item);
});
} catch (error) {
showAlert('Errore nel caricamento delle configurazioni: ' + error.message, 'error');
showAlert(translations[currentLanguage].alertError + ': ' + error.message, 'error');
}
}
@@ -458,8 +765,8 @@
document.getElementById('active-provider').textContent = config.provider;
document.getElementById('active-model').textContent = config.model_name;
} else {
document.getElementById('active-provider').textContent = 'Nessun provider configurato';
document.getElementById('active-model').textContent = 'Nessun modello configurato';
document.getElementById('active-provider').textContent = translations[currentLanguage].noProvider;
document.getElementById('active-model').textContent = translations[currentLanguage].noModel;
}
} catch (error) {
console.error('Error loading active configuration:', error);
@@ -500,16 +807,16 @@
});
if (response.ok) {
showAlert('Configurazione salvata con successo!', 'success');
showAlert(translations[currentLanguage].alertSuccess, 'success');
clearForm();
loadConfigurations();
loadActiveConfiguration();
} else {
const error = await response.json();
showAlert('Errore: ' + error.detail, 'error');
showAlert(translations[currentLanguage].alertError + ': ' + error.detail, 'error');
}
} catch (error) {
showAlert('Errore di connessione: ' + error.message, 'error');
showAlert(translations[currentLanguage].alertError + ': ' + error.message, 'error');
}
}
@@ -521,15 +828,15 @@
});
if (response.ok) {
showAlert(`Configurazione "${name}" attivata!`, 'success');
showAlert(`${translations[currentLanguage].alertSuccess} "${name}"`, 'success');
loadConfigurations();
loadActiveConfiguration();
} else {
const error = await response.json();
showAlert('Errore: ' + error.detail, 'error');
showAlert(translations[currentLanguage].alertError + ': ' + error.detail, 'error');
}
} catch (error) {
showAlert('Errore di connessione: ' + error.message, 'error');
showAlert(translations[currentLanguage].alertError + ': ' + error.message, 'error');
}
}
@@ -548,7 +855,7 @@
showAlert(`❌ ${result.message}`, 'error');
}
} catch (error) {
showAlert('Errore di connessione: ' + error.message, 'error');
showAlert(translations[currentLanguage].alertError + ': ' + error.message, 'error');
}
}
@@ -564,36 +871,36 @@
});
if (response.ok) {
showAlert(`Configurazione "${name}" eliminata!`, 'success');
showAlert(`${translations[currentLanguage].alertSuccess} "${name}"`, 'success');
loadConfigurations();
loadActiveConfiguration();
} else {
const error = await response.json();
showAlert('Errore: ' + error.detail, 'error');
showAlert(translations[currentLanguage].alertError + ': ' + error.detail, 'error');
}
} catch (error) {
showAlert('Errore di connessione: ' + error.message, 'error');
showAlert(translations[currentLanguage].alertError + ': ' + error.message, 'error');
}
}
// Test connection
async function testConnection() {
document.getElementById('connection-status').textContent = 'Test in corso...';
document.getElementById('connection-status').textContent = translations[currentLanguage].alertTesting;
try {
const response = await fetch(API_BASE + '/health');
const result = await response.json();
if (result.status === 'healthy') {
document.getElementById('connection-status').textContent = '✅ Connessione riuscita';
showAlert('Connessione al server riuscita!', 'success');
document.getElementById('connection-status').textContent = translations[currentLanguage].alertConnectionSuccess;
showAlert(translations[currentLanguage].alertConnectionSuccess, 'success');
} else {
document.getElementById('connection-status').textContent = '❌ Connessione fallita';
showAlert('Connessione al server fallita', 'error');
document.getElementById('connection-status').textContent = translations[currentLanguage].alertConnectionFailed;
showAlert(translations[currentLanguage].alertConnectionFailed, 'error');
}
} catch (error) {
document.getElementById('connection-status').textContent = '❌ Errore di connessione';
showAlert('Errore di connessione: ' + error.message, 'error');
document.getElementById('connection-status').textContent = translations[currentLanguage].alertConnectionFailed;
showAlert(translations[currentLanguage].alertError + ': ' + error.message, 'error');
}
}
@@ -622,7 +929,7 @@
// Add agent response to chat
addMessageToChat(result.response, 'agent');
} catch (error) {
addMessageToChat('Errore: Impossibile connettersi al server', 'agent');
addMessageToChat(translations[currentLanguage].alertError + ': ' + error.message, 'agent');
}
}
@@ -644,7 +951,7 @@
const baseUrlInput = document.getElementById('config-base-url');
// Show/hide fields based on provider
if (provider === 'openai' || provider === 'openrouter') {
if (provider === 'openai' || provider === 'openrouter' || provider === 'anthropic' || provider === 'google') {
apiKeyGroup.style.display = 'block';
} else {
apiKeyGroup.style.display = 'none';