static/appS.js

document.addEventListener('DOMContentLoaded', () => {
    const convo = document.querySelector(".convo");
    const fileUpload = document.getElementById('file-upload');
    const imageUpload = document.getElementById('image-upload');
    const fileBtn = document.getElementById('file-btn');
    const imageBtn = document.getElementById('image-btn');
    const sendButtons = document.querySelectorAll('.sendingQA');
    const SummarizeInput = document.querySelector(".SummarizeInput");
    const CaptionInput = document.querySelector(".CaptionInput");
     var GotitB = document.querySelector(".explainChoix button")

    GotitB.addEventListener("click",()=>{
   explain.style.opacity="0"
})
    let selectedFile = null;
    let filePreviewBubble = null;

    // Initialize mode switching
    document.querySelectorAll('.select-options input[type="radio"]').forEach(radio => {
        radio.addEventListener('change', (e) => {
            if (e.target.checked) {
                const selectedValue = e.target.value;
                if (selectedValue == "Summarize") {
                    SummarizeInput.classList.add("active");
                    SummarizeInput.classList.remove("innactive");
                    CaptionInput.classList.remove("active");
                    CaptionInput.classList.add("innactive");
                } else {
                    SummarizeInput.classList.add("innactive");
                    SummarizeInput.classList.remove("active");
                    CaptionInput.classList.remove("innactive");
                    CaptionInput.classList.add("active");
                }
                
                // Clear current selection when switching modes
                selectedFile = null;
                fileUpload.value = '';
                imageUpload.value = '';
                if (filePreviewBubble) {
                    filePreviewBubble.remove();
                    filePreviewBubble = null;
                }
            }
        });
    });

    // File upload handlers
    fileBtn.addEventListener('click', () => {
        fileUpload.click();
    });

    imageBtn.addEventListener('click', () => {
        imageUpload.click();
    });

    fileUpload.addEventListener('change', (e) => {
        if (e.target.files.length) {
            selectedFile = e.target.files[0];
            displayFilePreview(selectedFile);
        }
    });

    imageUpload.addEventListener('change', (e) => {
        if (e.target.files.length) {
            selectedFile = e.target.files[0];
            displayFilePreview(selectedFile);
        }
    });

    function displayFilePreview(file) {
        if (filePreviewBubble) filePreviewBubble.remove();
        
        filePreviewBubble = document.createElement('div');
        filePreviewBubble.className = 'file-preview-bubble bubble right';
        filePreviewBubble.innerHTML = `
            <div class="label">You</div>
            <div class="text">📎 Selected: ${file.name}</div>
        `;
        convo.appendChild(filePreviewBubble);
        convo.scrollTop = convo.scrollHeight;
    }

    function createMessageBubble(text, sender = "You", audioSrc = null) {
        const bubble = document.createElement('div');
        bubble.className = `bubble ${sender === "You" ? "right" : "left"}`;

        const label = document.createElement('div');
        label.className = "label";
        label.innerText = sender;

        const message = document.createElement('div');
        message.className = "text";
        
        if (sender === "You") {
            message.innerText = text;
        } else {
            message.innerHTML = text;
            
            if (audioSrc) {
                const audioContainer = document.createElement('div');
                audioContainer.style.display = 'flex';
                audioContainer.style.alignItems = 'center';
                audioContainer.style.gap = '10px';
                audioContainer.style.marginTop = '8px';
                
                const audio = new Audio(audioSrc);
                const audioIcon = document.createElement('i');
                audioIcon.className = 'fa-solid fa-volume-high audio-toggle';
                audioIcon.style.cursor = 'pointer';
                
                audioIcon.addEventListener('click', () => {
                    if (audio.paused) {
                        audio.play();
                        audioIcon.classList.remove('fa-volume-xmark');
                        audioIcon.classList.add('fa-volume-high');
                    } else {
                        audio.pause();
                        audioIcon.classList.remove('fa-volume-high');
                        audioIcon.classList.add('fa-volume-xmark');
                    }
                });
                
                audioContainer.appendChild(audioIcon);
                audioContainer.appendChild(document.createTextNode('Listen'));
                message.appendChild(audioContainer);
            }
        }

        bubble.appendChild(label);
        bubble.appendChild(message);
        convo.appendChild(bubble);
        convo.scrollTop = convo.scrollHeight;
        return bubble;
    }

async function handleSend() {
    if (!selectedFile) {
        alert("Please upload a file first");
        return;
    }

    const isSummarizeMode = document.querySelector('input[name="option"]:checked').value === 'Summarize';
    
    // User message
    createMessageBubble(
        isSummarizeMode ? "Please summarize this document" : "Please caption this image",
        "You"
    );

    // Thinking message
    const thinkingBubble = createMessageBubble(
        isSummarizeMode ? "Summarizing your document..." : "Generating caption for your image...",
        "Aidan"
    );

    try {
        const formData = new FormData();
        formData.append('file', selectedFile);
        
        const endpoint = isSummarizeMode ? '/summarize/' : '/imagecaption/';
        
        // For summarize mode, add length parameter
        if (isSummarizeMode) {
            const length = document.querySelector('input[name="optionS"]:checked').value;
            formData.append('length', length);
        }

        const response = await fetch(endpoint, {
            method: 'POST',
            body: formData
        });

        const result = await response.json();
        
        if (!response.ok) {
            throw new Error(result.detail || result.message || "Request failed");
        }

        // Replace thinking message with actual result
        thinkingBubble.remove();
        
        if (isSummarizeMode) {
            createMessageBubble(
                `<strong>Summary:</strong><br><br>${result.summary.replace(/\n/g, '<br>')}` +
                (result.pdf_url ? `<br><br><a href="${result.pdf_url}" download target="_blank">Download PDF</a>` : ''),
                "Aidan",
                result.audio_url
            );
        } else {
            createMessageBubble(
                `<strong>Caption:</strong><br><br>${result.answer || result.caption}`,
                "Aidan",
                result.audio
            );
        }
    } catch (error) {
        console.error("Error:", error);
        thinkingBubble.remove();
        createMessageBubble(
            `⚠️ Error: ${error.message}`,
            "Aidan"
        );
    } finally {
        // Reset file inputs
        selectedFile = null;
        fileUpload.value = '';
        imageUpload.value = '';
        if (filePreviewBubble) {
            filePreviewBubble.remove();
            filePreviewBubble = null;
        }
    }
}
    // Attach send handlers
    sendButtons.forEach(button => {
        button.addEventListener('click', handleSend);
    });
});