document.getElementById('mcp-form').addEventListener('submit', async (e) => {
    e.preventDefault();

    const promptInput = document.getElementById('prompt-input');
    const fileInput = document.getElementById('file-input');
    const chatBox = document.getElementById('chat-box');

    const prompt = promptInput.value;
    const file = fileInput.files[0];

    const formData = new FormData();
    formData.append('prompt', prompt);
    if (file) {
        formData.append('file', file);
    }

    // Display user message
    const userMessageDiv = document.createElement('div');
    userMessageDiv.classList.add('message', 'user-message');
    userMessageDiv.textContent = prompt;
    chatBox.appendChild(userMessageDiv);

    promptInput.value = '';
    fileInput.value = '';

    try {
        const response = await fetch('/mcp', {
            method: 'POST',
            body: formData,
        });
        const data = await response.json();

        // Display MCP response
        const mcpMessageDiv = document.createElement('div');
        mcpMessageDiv.classList.add('message', 'mcp-message');
        mcpMessageDiv.textContent = data.response;
        chatBox.appendChild(mcpMessageDiv);

        chatBox.scrollTop = chatBox.scrollHeight; // Scroll to bottom

    } catch (error) {
        console.error('Error:', error);
        const errorMessageDiv = document.createElement('div');
        errorMessageDiv.classList.add('message', 'mcp-message');
        errorMessageDiv.textContent = 'Error: Could not connect to the server.';
        chatBox.appendChild(errorMessageDiv);
        chatBox.scrollTop = chatBox.scrollHeight; // Scroll to bottom
    }
});