let conversation = [ { role: 'bot', message: 'Hi there! I'm Chef Bot! May I know your name?' } ]; function addMessage(role, message) { const chatMessages = document.getElementById('chatMessages'); const messageDiv = document.createElement('div'); messageDiv.className = role === 'bot' ? 'bot-message' : 'user-message'; messageDiv.textContent = message; chatMessages.appendChild(messageDiv); chatMessages.scrollTop = chatMessages.scrollHeight; } function sendMessage() { const userInput = document.getElementById('userInput').value.trim(); if (userInput) { addMessage('user', userInput); conversation.push({ role: 'user', message: userInput }); document.getElementById('userInput').value = ''; setTimeout(() => { handleResponse(userInput); }, 500); } } function handleResponse(userInput) { const lastMessage = conversation[conversation.length - 1].message.toLowerCase(); let botResponse = ''; let options = []; if (conversation.length === 2) { // After name input botResponse = `Nice to meet you, ${userInput}! 😊 Let's create your perfect meal! What type of food would you prefer?`; options = [ { text: 'Vegetarian', class: 'green' }, { text: 'Non-Vegetarian', class: 'red' } ]; } else if (lastMessage.includes('vegetarian')) { botResponse = 'Great choice! 🍽️ We have some amazing vegetarian options! What\'s your dietary preference?'; options = [ { text: 'Vegan', class: '' }, { text: 'Gluten-Free', class: '' }, { text: 'Vegetarian', class: '' }, { text: 'Low Carb', class: '' }, { text: 'Dairy-Free', class: '' }, { text: 'Keto', class: '' }, { text: 'Halal', class: '' } ]; } else if (lastMessage.includes('non-vegetarian')) { botResponse = 'Great choice! 🍽️ We have some amazing non-vegetarian options! What\'s your dietary preference?'; options = [ { text: 'Low Carb', class: '' }, { text: 'Dairy-Free', class: '' }, { text: 'Keto', class: '' }, { text: 'Halal', class: '' } ]; } else if (lastMessage.includes('low carb') || lastMessage.includes('dairy-free') || lastMessage.includes('keto') || lastMessage.includes('halal') || lastMessage.includes('gluten-free') || lastMessage.includes('vegan')) { botResponse = 'Wonderful choice! 😊 Let\'s pick your favorite ingredients:'; options = [ { text: 'Potatoes', class: '' }, { text: 'Tomatoes', class: '' }, { text: 'Spinach', class: '' }, { text: 'Cauliflower', class: '' }, { text: 'Paneer', class: '' }, { text: 'Tofu', class: '' } ]; } addMessage('bot', botResponse); if (options.length > 0) { displayOptions(options); } } function displayOptions(options) { const chatMessages = document.getElementById('chatMessages'); options.forEach(opt => { const button = document.createElement('button'); button.textContent = opt.text; button.className = `option-button ${opt.class}`; button.onclick = () => { addMessage('user', opt.text); conversation.push({ role: 'user', message: opt.text }); chatMessages.innerHTML = ''; // Clear previous messages conversation.forEach(msg => addMessage(msg.role, msg.message)); setTimeout(() => handleResponse(opt.text), 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); }