llm-wiki-web/static/app.js

const API_BASE = '/api';
let currentPage = null;
let chatHistory = [];

document.addEventListener('DOMContentLoaded', () => {
    initTabs();
    loadWikiList();
    loadRawList();
});

function initTabs() {
    document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('tab-active'));
            btn.classList.add('tab-active');
            document.querySelectorAll('.tab-panel').forEach(p => p.classList.add('hidden'));
            document.getElementById(`tab-${btn.dataset.tab}`).classList.remove('hidden');
        });
    });
}

async function loadWikiList() {
    try {
        const res = await fetch(`${API_BASE}/wiki/list`);
        const data = await res.json();
        const list = document.getElementById('page-list');
        list.innerHTML = '';

        const categories = ['entities', 'concepts', 'sources', 'topics', 'comparisons'];
        categories.forEach(cat => {
            if (data[cat] && data[cat].length > 0) {
                const catDiv = document.createElement('div');
                catDiv.innerHTML = `<div class="text-xs text-gray-500 uppercase mt-2 mb-1">${cat}</div>`;
                data[cat].forEach(page => {
                    const a = document.createElement('a');
                    a.href = '#';
                    a.textContent = page.name;
                    a.className = 'block px-2 py-1 rounded hover:bg-gray-700 text-blue-400';
                    a.onclick = () => loadPage(page.file);
                    catDiv.appendChild(a);
                });
                list.appendChild(catDiv);
            }
        });
    } catch (e) {
        console.error('Error loading wiki list:', e);
    }
}

async function loadPage(file) {
    try {
        const res = await fetch(`${API_BASE}/wiki/page/${file}`);
        const data = await res.json();
        currentPage = data;
        const container = document.getElementById('page-content');

        let html = `<h2 class="text-2xl font-bold mb-4">${data.file.split('/').pop().replace('.md', '')}</h2>`;

        if (data.metadata && Object.keys(data.metadata).length > 0) {
            html += `<div class="text-xs text-gray-500 mb-2">Tags: ${Object.values(data.metadata).join(', ')}</div>`;
        }

        let content = data.content || '';
        content = content.replace(/\[\[([^\]]+)\]\]/g, '<span class="wikilink" onclick="navigateTo(\'$1\')">[[$1]]</span>');
        html += `<div class="prose prose-invert max-w-none">${marked.parse(content)}</div>`;

        container.innerHTML = html;
    } catch (e) {
        document.getElementById('page-content').innerHTML = `<p class="text-red-400">Errore: ${e.message}</p>`;
    }
}

function navigateTo(name) {
    const normalized = name.toLowerCase().replace(/\s+/g, '-');
    loadPage(normalized);
}

async function loadRawList() {
    try {
        const res = await fetch(`${API_BASE}/raw/list`);
        const data = await res.json();
        const list = document.getElementById('raw-list');
        list.innerHTML = '';

        Object.entries(data).forEach(([cat, files]) => {
            if (files.length > 0) {
                const div = document.createElement('div');
                div.innerHTML = `<div class="text-xs text-gray-500 uppercase">${cat}</div>`;
                files.forEach(f => {
                    const label = document.createElement('label');
                    label.className = 'flex items-center gap-2 px-2 py-1 hover:bg-gray-700 rounded cursor-pointer';
                    label.innerHTML = `<input type="radio" name="source" value="${cat}/${f}"> <span class="text-gray-300">${f}</span>`;
                    div.appendChild(label);
                });
                list.appendChild(div);
            }
        });
    } catch (e) {
        console.error('Error loading raw list:', e);
    }
}

async function runIngest() {
    const selected = document.querySelector('input[name="source"]:checked');
    if (!selected) {
        alert('Seleziona un file da ingestire');
        return;
    }

    const log = document.getElementById('ingest-log');
    log.innerHTML = '<span class="text-blue-400">Avvio ingest...</span>\n';

    try {
        const eventSource = new EventSource(`${API_BASE}/ingest/stream/${selected.value}`);

        eventSource.onmessage = (e) => {
            log.innerHTML += e.data + '\n';
            log.scrollTop = log.scrollHeight;
        };

        eventSource.onerror = () => {
            eventSource.close();
            log.innerHTML += '<span class="text-green-400">Completato!</span>\n';
            loadWikiList();
        };
    } catch (e) {
        log.innerHTML += `<span class="text-red-400">Errore: ${e.message}</span>\n`;
    }
}

async function doSearch() {
    const query = document.getElementById('search-input').value.trim();
    if (!query) return;

    const results = document.getElementById('search-results');
    results.innerHTML = '<span class="text-gray-400">Ricerca in corso...</span>';

    try {
        const res = await fetch(`${API_BASE}/search?q=${encodeURIComponent(query)}`);
        const data = await res.json();

        results.innerHTML = '';

        if (data.by_name && data.by_name.length > 0) {
            const section = document.createElement('div');
            section.innerHTML = `<h4 class="font-semibold text-green-400 mb-2">Per nome</h4>`;
            data.by_name.forEach(r => {
                section.innerHTML += `<div class="ml-4 p-2 bg-gray-800 rounded mb-1"><a href="#" class="text-blue-400" onclick="loadPage('${r.file.replace('.md', '')}')">${r.name}</a> <span class="text-gray-500 text-xs">(${r.category})</span></div>`;
            });
            results.appendChild(section);
        }

        if (data.by_content && data.by_content.length > 0) {
            const section = document.createElement('div');
            section.innerHTML = `<h4 class="font-semibold text-blue-400 mb-2">Nel contenuto</h4>`;
            data.by_content.forEach(r => {
                const matchesHtml = r.matches.map(m => `<div class="text-xs text-gray-400 ml-4">Linea ${m.line}: ${m.text}</div>`).join('');
                section.innerHTML += `<div class="p-2 bg-gray-800 rounded mb-2"><a href="#" class="text-blue-400" onclick="loadPage('${r.file.replace('.md', '')}')">${r.name}</a>${matchesHtml}</div>`;
            });
            results.appendChild(section);
        }

        if ((!data.by_name || data.by_name.length === 0) && (!data.by_content || data.by_content.length === 0)) {
            results.innerHTML = '<span class="text-gray-500">Nessun risultato</span>';
        }
    } catch (e) {
        results.innerHTML = `<span class="text-red-400">Errore: ${e.message}</span>`;
    }
}

async function sendChat() {
    const input = document.getElementById('chat-input');
    const message = input.value.trim();
    if (!message) return;

    const messages = document.getElementById('chat-messages');
    messages.innerHTML += `<div class="mb-2 p-2 bg-gray-700 rounded"><span class="text-blue-400">Tu:</span> ${escapeHtml(message)}</div>`;
    input.value = '';

    const responseDiv = document.createElement('div');
    responseDiv.className = 'mb-2 p-2 bg-gray-800 rounded';
    responseDiv.innerHTML = '<span class="text-green-400">Wiki:</span> <span class="streaming-cursor"></span>';
    messages.appendChild(responseDiv);
    messages.scrollTop = messages.scrollHeight;

    try {
        const res = await fetch(`${API_BASE}/chat`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ message, history: chatHistory })
        });

        const reader = res.body.getReader();
        const decoder = new TextDecoder();
        let response = '';

        while (true) {
            const { done, value } = await reader.read();
            if (done) break;
            const chunk = decoder.decode(value);
            response += chunk;
            responseDiv.innerHTML = `<span class="text-green-400">Wiki:</span> ${formatResponse(response)}`;
        }

        chatHistory.push({ role: 'user', content: message });
        chatHistory.push({ role: 'assistant', content: response });

    } catch (e) {
        responseDiv.innerHTML = `<span class="text-red-400">Errore: ${e.message}</span>`;
    }
}

function formatResponse(text) {
    text = escapeHtml(text);
    text = text.replace(/\[\[([^\]]+)\]\]/g, '<span class="wikilink" onclick="navigateTo(\'$1\')">[[$1]]</span>');
    return text + '<span class="streaming-cursor"></span>';
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

const marked = {
    parse: function(text) {
        text = text.replace(/^### (.+)$/gm, '<h3 class="text-lg font-semibold mt-4 mb-2">$1</h3>');
        text = text.replace(/^## (.+)$/gm, '<h2 class="text-xl font-semibold mt-4 mb-2">$1</h2>');
        text = text.replace(/^# (.+)$/gm, '<h1 class="text-2xl font-bold mb-4">$1</h1>');
        text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
        text = text.replace(/\*(.+?)\*/g, '<em>$1</em>');
        text = text.replace(/`(.+?)`/g, '<code class="bg-gray-700 px-1 rounded">$1</code>');
        text = text.replace(/\n/g, '<br>');
        return text;
    }
};