static/script.js

let conversation = [
    { role: 'bot', message: 'Hello! 👋 Welcome to Chef Bot! 😊 I can help you create a perfect meal. First, what type of food would you prefer today?' }
];

function addMessage(role, message) {
    const chatMessages = document.getElementById('chatMessages');
    if (!chatMessages) {
        console.error('Chat messages container not found!');
        return;
    }
    const messageDiv = document.createElement('div');
    messageDiv.className = role === 'bot' ? 'bot-message' : 'user-message';
    messageDiv.textContent = message;
    chatMessages.appendChild(messageDiv);
    chatMessages.scrollTop = chatMessages.scrollHeight;
    console.log(`Added ${role} message: ${message}`);
}

function sendMessage() {
    const userInput = document.getElementById('userInput');
    if (!userInput) {
        console.error('User input field not found!');
        return;
    }
    const message = userInput.value.trim();
    if (message) {
        addMessage('user', message);
        conversation.push({ role: 'user', message: message });
        userInput.value = '';

        setTimeout(() => {
            handleResponse(message);
        }, 500);
    } else {
        console.warn('Empty message!');
    }
}

function handleResponse(userInput) {
    const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
    let botResponse = '';
    let options = [];

    if (conversation.length === 2) { // After name input or initial greeting
        botResponse = `Nice to meet you! 😄 What type of meal are you in the mood for? Please choose an option below:`;
        options = [
            { text: 'Vegetarian 🍆', class: 'green' },
            { text: 'Non-Vegetarian 🍗', class: 'red' }
        ];
    } else if (lastMessage.includes('vegetarian')) {
        botResponse = 'Great choice! 🍽️ Here are some tasty vegetarian dishes:';
        options = [
            { text: 'Vegetable Biryani', class: '' },
            { text: 'Paneer Butter Masala', class: '' },
            { text: 'Palak Paneer', class: '' }
        ];
    } else if (lastMessage.includes('non-vegetarian')) {
        botResponse = 'Yum! Here are some delicious non-vegetarian dishes:';
        options = [
            { text: 'Chicken Curry', class: '' },
            { text: 'Mutton Korma', class: '' },
            { text: 'Fish Tikka', class: '' }
        ];
    } else if (['vegetable biryani', 'paneer butter masala', 'palak paneer'].includes(lastMessage)) {
        botResponse = `Great choice! Here are the ingredients for ${lastMessage}:`;
        if (lastMessage === 'Vegetable Biryani') {
            options = ['Rice', 'Carrots', 'Potatoes', 'Green Beans', 'Onions', 'Spices'];
        } else if (lastMessage === 'Paneer Butter Masala') {
            options = ['Paneer', 'Butter', 'Tomatoes', 'Onions', 'Spices', 'Cream'];
        } else if (lastMessage === 'Palak Paneer') {
            options = ['Spinach', 'Paneer', 'Onions', 'Garlic', 'Spices'];
        }
    } else if (['chicken curry', 'mutton korma', 'fish tikka'].includes(lastMessage)) {
        botResponse = `Yum! Here are the ingredients for ${lastMessage}:`;
        if (lastMessage === 'Chicken Curry') {
            options = ['Chicken', 'Tomatoes', 'Onions', 'Garlic', 'Ginger', 'Spices'];
        } else if (lastMessage === 'Mutton Korma') {
            options = ['Mutton', 'Onions', 'Tomatoes', 'Yogurt', 'Spices'];
        } else if (lastMessage === 'Fish Tikka') {
            options = ['Fish', 'Yogurt', 'Spices', 'Lemon', 'Onions'];
        }
    }

    addMessage('bot', botResponse);
    if (options.length > 0) {
        displayOptions(options);
    }
}

function displayOptions(options) {
    const chatMessages = document.getElementById('chatMessages');
    if (!chatMessages) {
        console.error('Chat messages container not found for options!');
        return;
    }
    options.forEach(opt => {
        const button = document.createElement('button');
        button.textContent = opt;
        button.className = 'option-button';
        button.onclick = () => {
            addMessage('user', opt);
            conversation.push({ role: 'user', message: opt });
            chatMessages.innerHTML = ''; // Clear previous messages
            conversation.forEach(msg => addMessage(msg.role, msg.message));
            setTimeout(() => handleResponse(opt), 500);
        };
        chatMessages.appendChild(button);
    });
    chatMessages.appendChild(document.createElement('br'));
    const backButton = document.createElement('button');
    backButton.textContent = 'Go Back';
    backButton.className = 'option-button';
    backButton.onclick = () => {
        conversation.pop(); // Remove last user input
        chatMessages.innerHTML = ''; // Clear previous messages
        conversation.forEach(msg => addMessage(msg.role, msg.message));
        setTimeout(() => handleResponse(conversation[conversation.length - 1].message), 500);
    };
    chatMessages.appendChild(backButton);
}

// Add event listener for Enter key
document.getElementById('userInput').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        sendMessage();
    }
});

// Initial load check
console.log('Script loaded successfully');