Update static/script.js

static/script.js

@@ -0,0 +1,113 @@
+let conversation = [
+    { role: 'bot', message: "Hi there! I'm Chat Bot! May I know your name?" }
+];
+let selectedIngredients = [];
+let selectedMenuItem = null;
+let cart = [];
+
+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 = [];
+
+    // Handle name input (first user response after bot's greeting)
+    if (conversation.length === 2 && conversation[0].role === 'bot' && conversation[0].message.includes('May I know your name?')) {
+        botResponse = `Nice to meet you, ${userInput}! 😊 How can I assist you today?`;
+        options = [
+            { text: 'How do I contact customer support?', class: 'blue' },
+            { text: 'What are your business hours?', class: 'blue' },
+            { text: 'How do I reset my password?', class: 'blue' }
+        ];
+    } else if (lastMessage.includes('how do i contact customer support?')) {
+        botResponse = 'You can email us at support@company.com.';
+    } else if (lastMessage.includes('what are your business hours?')) {
+        botResponse = 'We are open from 9 AM to 6 PM, Monday to Friday.';
+    } else if (lastMessage.includes('how do i reset my password?')) {
+        botResponse = 'Click on "Forgot Password" on the login page.';
+    } else {
+        // Fallback for unrecognized input
+        botResponse = "Sorry, I didn't understand that. Could you please clarify or choose an option?";
+        if (conversation.length === 2) {
+            options = [
+                { text: 'How do I contact customer support?', class: 'blue' },
+                { text: 'What are your business hours?', class: 'blue' },
+                { text: 'How do I reset my password?', class: 'blue' }
+            ];
+        }
+    }
+
+    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;
+    }
+
+    // Display each option as a chat message
+    options.forEach(opt => {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'bot-message'; // This ensures the options look like bot messages
+        const button = document.createElement('button');
+        button.textContent = opt.text;
+        button.className = `option-button ${opt.class}`;
+        
+        // When an option is clicked, treat it as a user response and trigger the appropriate handler
+        button.onclick = () => {
+            addMessage('user', opt.text);
+            conversation.push({ role: 'user', message: opt.text });
+            setTimeout(() => handleResponse(opt.text), 500);
+        };
+
+        messageDiv.appendChild(button);
+        chatMessages.appendChild(messageDiv); // Append the button inside a bot message container
+    });
+
+    // Scroll to the bottom of the chat container
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+
+document.getElementById('userInput').addEventListener('keypress', function(e) {
+    if (e.key === 'Enter') {
+        sendMessage();
+    }
+});
+
+console.log('Script loaded successfully');