const chatForm = document.getElementById('chat-form');
const messageInput = document.getElementById('message-input');
const chatBox = document.getElementById('chat-box');

// Replace with your actual backend URL
const API_URL = 'https://deepimagix-self-trained2.hf.space:7860/chat/';

chatForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    const message = messageInput.value.trim();
    if (!message) return;

    addMessage('user', message);
    messageInput.value = '';
    messageInput.disabled = true;

    try {
        const formData = new FormData();
        formData.append('text', message);

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

        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }

        const data = await response.json();
        const aiReply = data.response || 'No response received.';
        addMessage('ai', aiReply);
    } catch (error) {
        addMessage('ai', 'Sorry, something went wrong. Please try again.');
        console.error('Error:', error);
    } finally {
        messageInput.disabled = false;
        messageInput.focus();
    }
});

function addMessage(sender, text) {
    const messageDiv = document.createElement('div');
    messageDiv.classList.add('message', sender);
    messageDiv.textContent = text;
    chatBox.appendChild(messageDiv);
    chatBox.scrollTop = chatBox.scrollHeight;
}