Update static/script.js

static/script.js

@@ -3,22 +3,26 @@ let conversation = [
 ];
 let selectedIngredients = [];
 
+const elements = {
+    chatMessages: document.getElementById('chatMessages'),
+    userInput: document.getElementById('userInput')
+};
+
 function addMessage(role, message) {
-    const chatMessages = document.getElementById('chatMessages');
-    if (!chatMessages) {
+    if (!elements.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;
+    elements.chatMessages.appendChild(messageDiv);
+    elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight;
     console.log(`Added ${role} message: ${message}`);
 }
 
 function sendMessage() {
-    const userInput = document.getElementById('userInput');
+    const userInput = elements.userInput;
     if (!userInput) {
         console.error('User input field not found!');
         return;
@@ -84,8 +88,7 @@ function fetchIngredients(dietaryPreference) {
 }
 
 function displayIngredientsList(ingredients) {
-    const chatMessages = document.getElementById('chatMessages');
-    if (!chatMessages) {
+    if (!elements.chatMessages) {
         console.error('Chat messages container not found for ingredients!');
         return;
     }
@@ -94,7 +97,7 @@ function displayIngredientsList(ingredients) {
     if (!ingredientsList) {
         ingredientsList = document.createElement('div');
         ingredientsList.className = 'ingredients-list';
-        chatMessages.appendChild(ingredientsList);
+        elements.chatMessages.appendChild(ingredientsList);
     } else {
         ingredientsList.innerHTML = '';
     }
@@ -123,11 +126,17 @@ function displayIngredientsList(ingredients) {
         item.appendChild(button);
         ingredientsList.appendChild(item);
     });
+
+    // Add Send button
+    const sendButton = document.createElement('button');
+    sendButton.textContent = 'Send';
+    sendButton.className = 'send-button';
+    sendButton.onclick = sendSelectedIngredients;
+    ingredientsList.appendChild(sendButton);
 }
 
 function displaySelectedIngredients() {
-    const chatMessages = document.getElementById('chatMessages');
-    if (!chatMessages) {
+    if (!elements.chatMessages) {
         console.error('Chat messages container not found for selected ingredients!');
         return;
     }
@@ -136,7 +145,7 @@ function displaySelectedIngredients() {
     if (!selectedArea) {
         selectedArea = document.createElement('div');
         selectedArea.className = 'selected-ingredients';
-        chatMessages.appendChild(selectedArea);
+        elements.chatMessages.appendChild(selectedArea);
     } else {
         selectedArea.innerHTML = '';
     }
@@ -149,13 +158,12 @@ function displaySelectedIngredients() {
 }
 
 function displayOptions(options) {
-    const chatMessages = document.getElementById('chatMessages');
-    if (!chatMessages) {
+    if (!elements.chatMessages) {
         console.error('Chat messages container not found for options!');
         return;
     }
-    // Clear existing content
-    chatMessages.innerHTML = '';
+    const optionsDiv = document.createElement('div');
+    optionsDiv.className = 'options-container';
     options.forEach(opt => {
         const button = document.createElement('button');
         button.textContent = opt.text;
@@ -163,20 +171,19 @@ function displayOptions(options) {
         button.onclick = () => {
             addMessage('user', opt.text);
             conversation.push({ role: 'user', message: opt.text });
-            handleResponse(opt.text); // Process the selection immediately
+            handleResponse(opt.text);
         };
-        chatMessages.appendChild(button);
+        optionsDiv.appendChild(button);
     });
-    chatMessages.appendChild(document.createElement('br'));
+    elements.chatMessages.appendChild(optionsDiv);
     const backButton = document.createElement('button');
     backButton.textContent = 'Go Back';
     backButton.className = 'option-button';
     backButton.onclick = () => {
-        // Reset conversation to initial state
         const userName = conversation.length > 1 ? conversation[1].message : 'User';
         conversation = [{ role: 'bot', message: `Hi there! I'm Chef Bot! May I know your name?` }, { role: 'user', message: userName }, { role: 'bot', message: `Nice to meet you, ${userName}! 😊 Let's create your perfect meal! What type of food would you prefer?` }];
         selectedIngredients = [];
-        chatMessages.innerHTML = '';
+        elements.chatMessages.innerHTML = '';
         conversation.forEach(msg => addMessage(msg.role, msg.message));
         displayOptions([
             { text: 'Vegetarian', class: 'green' },
@@ -184,15 +191,26 @@ function displayOptions(options) {
             { text: 'Both', class: 'gray' }
         ]);
     };
-    chatMessages.appendChild(backButton);
+    optionsDiv.appendChild(backButton);
+}
+
+// New function to handle sending selected ingredients
+function sendSelectedIngredients() {
+    if (selectedIngredients.length === 0) {
+        addMessage('bot', 'Please select at least one ingredient before sending!');
+        return;
+    }
+    const ingredientsList = selectedIngredients.map(ing => ing.name).join(', ');
+    addMessage('user', `Selected ingredients: ${ingredientsList}`);
+    addMessage('bot', `Great! I’ll suggest a recipe with ${ingredientsList}. How about a spicy prawn dish with rice flour coating? Let me know if you'd like to adjust!`);
+    selectedIngredients = []; // Reset after sending
+    displaySelectedIngredients(); // Update the display
 }
 
-// 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');