Create script.js

static/script.js

@@ -0,0 +1,101 @@
+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);
+}