Create static/script.js

static/script.js

@@ -0,0 +1,235 @@
+let conversation = [
+    { role: 'bot', message: "Hi there! I'm Chat Bot! May I know your name?" }
+];
+let userName = ''; // To store the user's name
+
+// Reset conversation on page load
+document.addEventListener('DOMContentLoaded', () => {
+    conversation = [
+        { role: 'bot', message: "Hi there! I'm Chat Bot! May I know your name?" }
+    ];
+    const chatMessages = document.getElementById('chatMessages');
+    if (chatMessages) {
+        chatMessages.innerHTML = '';
+        addMessage('bot', "Hi there! I'm Chat Bot! May I know your name?");
+    }
+    console.log('Page loaded, conversation reset:', conversation);
+});
+
+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}`);
+    console.log('Current conversation:', conversation);
+}
+
+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(() => {
+            try {
+                handleResponse(message);
+            } catch (error) {
+                console.error('Error in handleResponse:', error);
+                addMessage('bot', 'Sorry, something went wrong. Please try again.');
+            }
+        }, 500);
+    } else {
+        console.warn('Empty message!');
+    }
+}
+
+// Add Enter key event listener for the input field
+document.addEventListener('DOMContentLoaded', () => {
+    const userInput = document.getElementById('userInput');
+    if (userInput) {
+        userInput.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter' && !event.shiftKey) {
+                event.preventDefault(); // Prevent default behavior (e.g., form submission)
+                sendMessage();
+            }
+        });
+    } else {
+        console.error('User input field not found during initialization!');
+    }
+});
+
+function displayForm() {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) {
+        console.error('Chat messages container not found for form!');
+        return;
+    }
+    // Prevent duplicate forms
+    if (chatMessages.querySelector('.registration-form')) {
+        console.log('Form already exists, skipping display.');
+        return;
+    }
+    const formDiv = document.createElement('div');
+    formDiv.className = 'bot-message';
+    formDiv.innerHTML = `
+        <p>Please register here with these details. Our service agent will get back to you soon.</p>
+        <div class="registration-form">
+            <label for="mobileNumber">Mobile Number:</label>
+            <input type="text" id="mobileNumber" placeholder="Enter your mobile number" /><br/>
+            <label for="email">Email:</label>
+            <input type="email" id="email" placeholder="Enter your email" /><br/>
+            <label for="issueDescription">Issue Description:</label>
+            <textarea id="issueDescription" placeholder="Describe your issue"></textarea><br/>
+            <button onclick="submitForm()">Submit</button>
+        </div>
+    `;
+    chatMessages.appendChild(formDiv);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+    console.log('Form displayed successfully.');
+}
+
+function submitForm() {
+    const mobileNumber = document.getElementById('mobileNumber').value.trim();
+    const email = document.getElementById('email').value.trim();
+    const issueDescription = document.getElementById('issueDescription').value.trim();
+
+    if (!mobileNumber || !email || !issueDescription) {
+        addMessage('bot', 'Please fill in all fields before submitting.');
+        return;
+    }
+
+    const formData = {
+        name: userName,
+        mobileNumber: mobileNumber,
+        email: email,
+        issueDescription: issueDescription
+    };
+
+    fetch('/submit-case', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData),
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            addMessage('bot', 'Thank you! Your case has been submitted. Our service agent will get back to you soon.');
+        } else {
+            addMessage('bot', 'There was an error submitting your case. Please try again later.');
+        }
+    })
+    .catch(error => {
+        console.error('Error submitting form:', error);
+        addMessage('bot', 'There was an error submitting your case. Please try again later.');
+    });
+}
+
+function clearOptions() {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) return;
+    const optionButtons = chatMessages.querySelectorAll('.bot-message .option-button');
+    console.log(`Clearing ${optionButtons.length} existing option buttons.`);
+    optionButtons.forEach(button => {
+        if (button.parentElement) {
+            button.parentElement.remove();
+        }
+    });
+    // Log the current DOM state after clearing
+    console.log('DOM after clearing options:', chatMessages.innerHTML);
+}
+
+function displayOptions(options, isCategory = false) {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) {
+        console.error('Chat messages container not found for options!');
+        return;
+    }
+
+    // Clear existing options before displaying new ones
+    clearOptions();
+
+    console.log(`Displaying ${options.length} options:`, options);
+    options.forEach((opt, index) => {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = 'bot-message';
+        const button = document.createElement('button');
+        button.textContent = opt.text;
+        button.className = `option-button ${opt.class}`;
+
+        button.addEventListener('click', () => {
+            console.log(`Button clicked: ${opt.text}`);
+            addMessage('user', opt.text);
+            conversation.push({ role: 'user', message: opt.text });
+            setTimeout(() => {
+                try {
+                    handleResponse(opt.text);
+                } catch (error) {
+                    console.error('Error in handleResponse after button click:', error);
+                    addMessage('bot', 'Sorry, something went wrong. Please try again.');
+                }
+            }, 500);
+        });
+
+        messageDiv.appendChild(button);
+        chatMessages.appendChild(messageDiv);
+        console.log(`Added button ${index + 1}: ${opt.text}`);
+    });
+
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+    // Log the DOM state after adding options
+    console.log('DOM after adding options:', chatMessages.innerHTML);
+}
+
+function handleResponse(userInput) {
+    const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
+    let botResponse = '';
+
+    // Define categories
+    const categories = [
+        { text: 'About TioNat and Account Setup', class: 'blue' },
+        { text: 'Nutritional Supplements', class: 'blue' },
+        { text: 'Health Care Products', class: 'blue' },
+        { text: 'Personal Care and Skincare', class: 'blue' },
+        { text: 'Returns and Customer Support', class: 'blue' },
+        { text: 'Security and Account Management', class: 'blue' },
+        { text: 'Other', class: 'green' }
+    ];
+
+    // 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?')) {
+        userName = userInput; // Store the user's name
+        botResponse = `Nice to meet you, ${userInput}! 😊 Please select a category for your query:`;
+        addMessage('bot', botResponse);
+        displayOptions(categories, true); // Display category buttons
+        return;
+    }
+
+    // Handle category selection
+    if (categories.some(cat => cat.text.toLowerCase() === lastMessage)) {
+        botResponse = `Thank you for selecting "${userInput}". Please provide more details about your query so our service agent can assist you.`;
+        addMessage('bot', botResponse);
+        displayForm();
+        return;
+    }
+
+    // Handle unrecognized input
+    botResponse = "I'm sorry, I don't understand your query. Please select a category for your query:";
+    addMessage('bot', botResponse);
+    if (!document.querySelector('.option-button')) {
+        displayOptions(categories, true);
+    }
+}