409 lines
23 KiB
HTML
409 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>RAGGER - Layout Test</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
:root {
|
|
--primary: #7c3aed;
|
|
--primary-light: #a78bfa;
|
|
}
|
|
.tab-active {
|
|
border-bottom: 2px solid var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
.sidebar-section {
|
|
padding-bottom: 1rem;
|
|
margin-bottom: 1rem;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
}
|
|
.sidebar-section:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.doc-item:hover {
|
|
background-color: #f3f4f6;
|
|
}
|
|
.upload-zone {
|
|
border: 2px dashed #d1d5db;
|
|
transition: all 0.2s;
|
|
}
|
|
.upload-zone:hover {
|
|
border-color: var(--primary);
|
|
background-color: #faf5ff;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background-color: #d1d5db;
|
|
border-radius: 2px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-100 min-h-screen flex flex-col">
|
|
<!-- NAVBAR STICKY -->
|
|
<nav class="w-full bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm">
|
|
<div class="flex flex-row items-center justify-between px-4 lg:px-6 py-2">
|
|
<!-- Logo + Titolo -->
|
|
<div class="flex items-center space-x-3">
|
|
<span class="text-2xl">📚</span>
|
|
<div>
|
|
<span class="font-bold text-lg text-gray-800">RAGGER</span>
|
|
<span class="hidden sm:inline text-xs text-gray-500 ml-2">Sistema RAG</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Controlli centrali -->
|
|
<div class="hidden md:flex items-center gap-2 bg-gray-100 rounded-lg px-2 py-1">
|
|
<button class="px-2 py-1 text-xs rounded hover:bg-white" title="Test Connessione">🔄</button>
|
|
<button class="px-2 py-1 text-xs rounded hover:bg-white" title="Health Check">📊</button>
|
|
<button class="px-2 py-1 text-xs rounded hover:bg-white" title="Reset DB">🗑️</button>
|
|
</div>
|
|
|
|
<!-- Info sistema -->
|
|
<div class="flex items-center gap-2">
|
|
<span class="hidden sm:inline text-xs text-gray-500 font-mono">ollama.solarpi.net</span>
|
|
<div class="w-2 h-2 bg-green-500 rounded-full" title="Connesso"></div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- LAYOUT PRINCIPALE -->
|
|
<div class="flex flex-1 overflow-hidden">
|
|
<!-- SIDEBAR SINISTRA - GESTIONE DOCUMENTALE -->
|
|
<aside class="w-80 bg-white border-r border-gray-200 flex flex-col overflow-hidden">
|
|
<!-- Header sidebar -->
|
|
<div class="p-4 border-b border-gray-200 bg-gray-50">
|
|
<h2 class="font-semibold text-gray-700 flex items-center gap-2">
|
|
📁 Documenti
|
|
</h2>
|
|
</div>
|
|
|
|
<!-- Contenuto sidebar scrollabile -->
|
|
<div class="flex-1 overflow-y-auto scrollbar-thin p-4">
|
|
<!-- Upload Area -->
|
|
<div class="sidebar-section">
|
|
<div class="upload-zone rounded-lg p-4 text-center cursor-pointer" onclick="document.getElementById('file-input').click()">
|
|
<input type="file" id="file-input" class="hidden" multiple accept=".pdf,.docx,.xlsx,.pptx,.txt,.csv,.png,.jpg">
|
|
<div class="text-3xl mb-2">📤</div>
|
|
<p class="text-sm text-gray-600 font-medium">Carica documenti</p>
|
|
<p class="text-xs text-gray-400 mt-1">PDF, DOCX, XLSX, PPTX, TXT, CSV, Immagini</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistiche -->
|
|
<div class="sidebar-section">
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<div class="bg-violet-50 rounded-lg p-3 text-center">
|
|
<p class="text-xl font-bold text-violet-600">11</p>
|
|
<p class="text-xs text-gray-500">Chunks</p>
|
|
</div>
|
|
<div class="bg-blue-50 rounded-lg p-3 text-center">
|
|
<p class="text-xl font-bold text-blue-600">4</p>
|
|
<p class="text-xs text-gray-500">Documenti</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lista Documenti -->
|
|
<div class="sidebar-section">
|
|
<h3 class="text-xs font-semibold text-gray-500 uppercase mb-2 flex items-center justify-between">
|
|
Indicizzati
|
|
<button class="text-gray-400 hover:text-gray-600" title="Aggiorna">🔄</button>
|
|
</h3>
|
|
<div class="space-y-1" id="doc-list">
|
|
<!-- Documento 1 -->
|
|
<div class="doc-item flex items-start gap-2 p-2 rounded-lg cursor-pointer group">
|
|
<span class="text-lg">📄</span>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-gray-700 truncate">Nuova Modalità Iscrizione UILDM.pdf</p>
|
|
<p class="text-xs text-gray-400">2 chunks · PDF</p>
|
|
</div>
|
|
<button class="opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-600 text-xs">✕</button>
|
|
</div>
|
|
<!-- Documento 2 -->
|
|
<div class="doc-item flex items-start gap-2 p-2 rounded-lg cursor-pointer group">
|
|
<span class="text-lg">📊</span>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-gray-700 truncate">Soci UILDM.xlsx</p>
|
|
<p class="text-xs text-gray-400">4 chunks · Excel</p>
|
|
</div>
|
|
<button class="opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-600 text-xs">✕</button>
|
|
</div>
|
|
<!-- Documento 3 -->
|
|
<div class="doc-item flex items-start gap-2 p-2 rounded-lg cursor-pointer group">
|
|
<span class="text-lg">📄</span>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-gray-700 truncate">UILDM GORIZIA 2026 Brochure.pdf</p>
|
|
<p class="text-xs text-gray-400">2 chunks · PDF</p>
|
|
</div>
|
|
<button class="opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-600 text-xs">✕</button>
|
|
</div>
|
|
<!-- Documento 4 -->
|
|
<div class="doc-item flex items-start gap-2 p-2 rounded-lg cursor-pointer group">
|
|
<span class="text-lg">📄</span>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-gray-700 truncate">progetto_insieme_senza_confini.pdf</p>
|
|
<p class="text-xs text-gray-400">3 chunks · PDF</p>
|
|
</div>
|
|
<button class="opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-600 text-xs">✕</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Config rapida -->
|
|
<div class="sidebar-section">
|
|
<h3 class="text-xs font-semibold text-gray-500 uppercase mb-2">Configurazione</h3>
|
|
<div class="space-y-2 text-sm">
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-500">Provider:</span>
|
|
<span class="font-medium">Ollama</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-500">Modello:</span>
|
|
<span class="font-medium font-mono text-xs">gemma2:9b</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-500">Embedding:</span>
|
|
<span class="font-medium font-mono text-xs">nomic-embed</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer sidebar -->
|
|
<div class="p-3 border-t border-gray-200 bg-gray-50">
|
|
<button class="w-full px-3 py-2 text-xs bg-gray-200 hover:bg-gray-300 rounded-lg text-gray-700">
|
|
⚙️ Impostazioni avanzate
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- CONTENUTO PRINCIPALE -->
|
|
<main class="flex-1 flex flex-col overflow-hidden bg-gray-50">
|
|
<!-- TAB NAV -->
|
|
<div class="bg-white border-b border-gray-200 px-4">
|
|
<div class="flex space-x-1">
|
|
<button class="tab-btn tab-active px-4 py-3 text-sm font-medium" data-tab="chat">
|
|
💬 Chat
|
|
</button>
|
|
<button class="tab-btn px-4 py-3 text-sm font-medium text-gray-500 hover:text-gray-700" data-tab="lettera">
|
|
✉️ Lettera
|
|
</button>
|
|
<button class="tab-btn px-4 py-3 text-sm font-medium text-gray-500 hover:text-gray-700" data-tab="progetto">
|
|
📋 Progetto
|
|
</button>
|
|
<button class="tab-btn px-4 py-3 text-sm font-medium text-gray-500 hover:text-gray-700" data-tab="settings">
|
|
⚙️ Impostazioni
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TAB CONTENT -->
|
|
<div class="flex-1 overflow-y-auto p-4 lg:p-6">
|
|
<!-- CHAT TAB -->
|
|
<div id="tab-chat" class="tab-content max-w-4xl mx-auto">
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-800">Chat con i tuoi documenti</h2>
|
|
|
|
<!-- Chat Messages -->
|
|
<div class="space-y-4 mb-4" id="chat-messages">
|
|
<!-- Messaggio utente -->
|
|
<div class="flex gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-sm flex-shrink-0">👤</div>
|
|
<div class="flex-1 bg-white rounded-lg p-4 shadow-sm border">
|
|
<p class="text-sm text-gray-700">Come iscriversi alla UILDM?</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Messaggio assistente -->
|
|
<div class="flex gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-violet-100 flex items-center justify-center text-sm flex-shrink-0">🤖</div>
|
|
<div class="flex-1 bg-white rounded-lg p-4 shadow-sm border">
|
|
<p class="text-sm text-gray-700 mb-3">Per iscriversi alla UILDM è necessario compilare il modulo di iscrizione e pagare la quota associativa annuale. Ecco i passaggi:</p>
|
|
<ol class="text-sm text-gray-700 list-decimal list-inside space-y-1">
|
|
<li>Compilare il modulo di iscrizione</li>
|
|
<li>Pagare la quota annuale di €20</li>
|
|
<li>Consegnare la documentazione alla segreteria</li>
|
|
</ol>
|
|
|
|
<!-- Fonti -->
|
|
<div class="mt-4 pt-3 border-t">
|
|
<p class="text-xs font-semibold text-gray-500 mb-2">📚 Fonti:</p>
|
|
<div class="space-y-1">
|
|
<div class="flex items-center gap-2 text-xs bg-violet-50 rounded p-2">
|
|
<span>📄</span>
|
|
<span class="text-gray-700">Nuova Modalità Iscrizione UILDM.pdf</span>
|
|
<span class="text-gray-400">· score 0.72</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat Input -->
|
|
<div class="sticky bottom-0 bg-gray-50 pt-4">
|
|
<div class="border rounded-xl p-2 flex gap-2 bg-white shadow-sm">
|
|
<input type="text" placeholder="Fai una domanda sui documenti..." class="flex-1 px-4 py-2 outline-none text-sm">
|
|
<button class="px-5 py-2 bg-violet-600 text-white rounded-lg text-sm hover:bg-violet-700 flex items-center gap-2">
|
|
<span>Invia</span>
|
|
<span>→</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LETTERA TAB -->
|
|
<div id="tab-lettera" class="tab-content hidden max-w-4xl mx-auto">
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-800">Genera Lettera</h2>
|
|
|
|
<div class="grid lg:grid-cols-2 gap-6">
|
|
<!-- Input -->
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Argomento della lettera</label>
|
|
<textarea class="w-full border rounded-lg p-3 text-sm focus:ring-2 focus:ring-violet-300 focus:border-violet-500" rows="4" placeholder="Es: Richiesta di patrocinio per l'evento annuale..."></textarea>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Contesto aggiuntivo</label>
|
|
<textarea class="w-full border rounded-lg p-3 text-sm focus:ring-2 focus:ring-violet-300 focus:border-violet-500" rows="2" placeholder="Dettagli specifici, destinatario, tono..."></textarea>
|
|
</div>
|
|
<button class="w-full px-4 py-3 bg-violet-600 text-white rounded-lg text-sm hover:bg-violet-700 flex items-center justify-center gap-2">
|
|
✉️ Genera Lettera
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Output -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Lettera generata</label>
|
|
<textarea class="w-full border rounded-lg p-3 text-sm bg-white h-80" readonly placeholder="La lettera apparirà qui dopo la generazione..."></textarea>
|
|
<div class="flex gap-2 mt-2">
|
|
<button class="flex-1 px-3 py-2 border rounded-lg text-sm hover:bg-gray-50">📋 Copia</button>
|
|
<button class="flex-1 px-3 py-2 border rounded-lg text-sm hover:bg-gray-50">💾 Salva</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PROGETTO TAB -->
|
|
<div id="tab-progetto" class="tab-content hidden max-w-4xl mx-auto">
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-800">Genera Proposta Progetto</h2>
|
|
|
|
<div class="grid lg:grid-cols-2 gap-6">
|
|
<!-- Input -->
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Titolo del progetto</label>
|
|
<input type="text" class="w-full border rounded-lg p-3 text-sm focus:ring-2 focus:ring-violet-300 focus:border-violet-500" placeholder="Es: Insieme senza confini">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Descrizione</label>
|
|
<textarea class="w-full border rounded-lg p-3 text-sm focus:ring-2 focus:ring-violet-300 focus:border-violet-500" rows="6" placeholder="Descrivi l'obiettivo, il target, le attività previste..."></textarea>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Budget stimato (opzionale)</label>
|
|
<input type="text" class="w-full border rounded-lg p-3 text-sm" placeholder="Es: €5.000">
|
|
</div>
|
|
<button class="w-full px-4 py-3 bg-violet-600 text-white rounded-lg text-sm hover:bg-violet-700 flex items-center justify-center gap-2">
|
|
📋 Genera Proposta
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Output -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Proposta generata</label>
|
|
<textarea class="w-full border rounded-lg p-3 text-sm bg-white h-96" readonly placeholder="La proposta apparirà qui dopo la generazione..."></textarea>
|
|
<div class="flex gap-2 mt-2">
|
|
<button class="flex-1 px-3 py-2 border rounded-lg text-sm hover:bg-gray-50">📋 Copia</button>
|
|
<button class="flex-1 px-3 py-2 border rounded-lg text-sm hover:bg-gray-50">💾 Salva</button>
|
|
<button class="flex-1 px-3 py-2 border rounded-lg text-sm hover:bg-gray-50">📧 Email</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SETTINGS TAB -->
|
|
<div id="tab-settings" class="tab-content hidden max-w-2xl mx-auto">
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-800">⚙️ Impostazioni</h2>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm border p-6 space-y-6">
|
|
<!-- Provider -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Provider LLM</label>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<label class="flex items-center gap-2 p-3 border rounded-lg cursor-pointer hover:bg-violet-50 has-[:checked]:border-violet-500 has-[:checked]:bg-violet-50">
|
|
<input type="radio" name="provider" value="ollama" checked class="text-violet-600">
|
|
<span class="text-sm">🏠 Ollama</span>
|
|
</label>
|
|
<label class="flex items-center gap-2 p-3 border rounded-lg cursor-pointer hover:bg-violet-50 has-[:checked]:border-violet-500 has-[:checked]:bg-violet-50">
|
|
<input type="radio" name="provider" value="opencode" class="text-violet-600">
|
|
<span class="text-sm">🧘 OpenCode</span>
|
|
</label>
|
|
<label class="flex items-center gap-2 p-3 border rounded-lg cursor-pointer hover:bg-violet-50 has-[:checked]:border-violet-500 has-[:checked]:bg-violet-50">
|
|
<input type="radio" name="provider" value="openrouter" class="text-violet-600">
|
|
<span class="text-sm">🌐 OpenRouter</span>
|
|
</label>
|
|
<label class="flex items-center gap-2 p-3 border rounded-lg cursor-pointer hover:bg-violet-50 has-[:checked]:border-violet-500 has-[:checked]:bg-violet-50">
|
|
<input type="radio" name="provider" value="groq" class="text-violet-600">
|
|
<span class="text-sm">⚡ Groq</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ollama Settings -->
|
|
<div id="ollama-settings">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Ollama Host</label>
|
|
<input type="text" value="https://ollama.solarpi.net" class="w-full border rounded-lg p-3 text-sm font-mono">
|
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1 mt-4">Modello</label>
|
|
<select class="w-full border rounded-lg p-3 text-sm">
|
|
<option selected>gemma2:9b</option>
|
|
<option>llama3.2</option>
|
|
<option>llama3.1</option>
|
|
<option>mistral</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Embedding -->
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Modello Embedding</label>
|
|
<select class="w-full border rounded-lg p-3 text-sm">
|
|
<option selected>nomic-embed-text</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex gap-2 pt-4 border-t">
|
|
<button class="flex-1 px-4 py-2 bg-violet-600 text-white rounded-lg text-sm hover:bg-violet-700">
|
|
💾 Salva Impostazioni
|
|
</button>
|
|
<button class="px-4 py-2 border rounded-lg text-sm hover:bg-gray-50">
|
|
🔄 Applica
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
document.querySelectorAll('.tab-btn').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
document.querySelectorAll('.tab-btn').forEach(b => {
|
|
b.classList.remove('tab-active');
|
|
b.classList.add('text-gray-500');
|
|
});
|
|
btn.classList.add('tab-active');
|
|
btn.classList.remove('text-gray-500');
|
|
|
|
document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden'));
|
|
document.getElementById('tab-' + btn.dataset.tab).classList.remove('hidden');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|