frontend/dist/js/app.js

let sessionId = null;

function setLoading(isLoading, action) {
    const button = document.getElementById(action === 'upload' ? 'uploadButton' : 'queryButton');
    const spinner = document.getElementById(action === 'upload' ? 'uploadSpinner' : 'querySpinner');
    
    if (isLoading) {
        button.classList.add('loading');
        spinner.style.display = 'inline';
        button.disabled = true;
    } else {
        button.classList.remove('loading');
        spinner.style.display = 'none';
        button.disabled = false;
    }
}

async function uploadFile() {
    const fileInput = document.getElementById('fileInput');
    const uploadSpinner = document.getElementById('uploadSpinner');
    
    if (!fileInput.files.length) {
        alert('Please select a file first');
        return;
    }

    const file = fileInput.files[0];
    const formData = new FormData();
    formData.append('file', file);

    uploadSpinner.style.display = 'inline';
    
    try {
        const response = await fetch('/upload', {
            method: 'POST',
            body: formData
        });
        
        const data = await response.json();
        sessionId = data.session_id;
        document.getElementById('querySection').style.display = 'block';
        
    } catch (error) {
        alert('Error uploading file: ' + error);
    } finally {
        uploadSpinner.style.display = 'none';
    }
}

async function submitQuery() {
    if (!sessionId) {
        alert('Please upload a document first');
        return;
    }

    const queryInput = document.getElementById('queryInput');
    const querySpinner = document.getElementById('querySpinner');
    
    querySpinner.style.display = 'inline';
    
    try {
        const response = await fetch('/query', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                session_id: sessionId,
                query: queryInput.value
            })
        });
        
        const data = await response.json();
        document.getElementById('answer').textContent = data.answer;
        document.getElementById('context').innerHTML = data.context.join('<br><br>');
        
    } catch (error) {
        alert('Error submitting query: ' + error);
    } finally {
        querySpinner.style.display = 'none';
    }
}

function toggleContext() {
    const contextSection = document.getElementById('contextSection');
    contextSection.style.display = document.getElementById('contextToggle').checked ? 'block' : 'none';
}

// Initially hide the query section
document.getElementById('querySection').style.display = 'none';