Update static/script.js

static/script.js

@@ -28,36 +28,44 @@ function sendMessage() {
         addMessage('user', message);
         conversation.push({ role: 'user', message: message });
         setTimeout(() => handleResponse(message), 500);
-    } else if (selectedItems.length > 0) {
-        addMessage('bot', `Looks like you’ve picked ${selectedItems.length} delicious item(s)! Ready to save them to Salesforce?`);
-        displaySubmitButton();
     } else {
         addMessage('bot', 'Hey, don’t be shy! Type something or add some items to get started! 😄');
     }
     userInput.value = ''; // Clear input after sending
 }
 
-function updateSelectedItems() {
-    const selectedArea = document.getElementById('itemDetails');
-    if (!selectedArea) {
-        console.error('Item details container not found!');
-        return;
-    }
-    selectedArea.innerHTML = '';
+function updateSelectionBox() {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) return;
+
+    // Remove existing selection box if it exists
+    const existingBox = document.querySelector('.selection-box');
+    if (existingBox) existingBox.remove();
+
+    if (selectedItems.length > 0) {
+        const selectionBox = document.createElement('div');
+        selectionBox.className = 'selection-box';
+
+        const label = document.createElement('span');
+        label.textContent = 'Selected Items:';
+        selectionBox.appendChild(label);
 
-    if (selectedItems.length === 0) {
-        selectedArea.textContent = 'Selected Items: None';
-    } else {
-        selectedArea.textContent = 'Selected Items: ';
         selectedItems.forEach(item => {
-            const span = document.createElement('span');
-            span.textContent = item.name;
-            span.style.marginRight = '10px';
-            span.style.display = 'inline-block';
-            selectedArea.appendChild(span);
+            const itemSpan = document.createElement('span');
+            itemSpan.textContent = item.name;
+            selectionBox.appendChild(itemSpan);
         });
+
+        const submitButton = document.createElement('button');
+        submitButton.textContent = 'Submit to Salesforce';
+        submitButton.className = 'submit-button';
+        submitButton.onclick = submitToSalesforce;
+        selectionBox.appendChild(submitButton);
+
+        chatMessages.appendChild(selectionBox);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
     }
-    console.log('Updated selected items:', selectedItems.map(item => item.name));
+    console.log('Updated selection box with items:', selectedItems.map(item => item.name));
 }
 
 function handleResponse(userInput) {
@@ -147,8 +155,8 @@ function fetchItemDetails(itemName) {
             } else {
                 const details = data.item_details;
                 selectedItems.push(details);
-                addMessage('bot', `Added "${itemName}" to your selection! See it below.`);
-                updateSelectedItems();
+                addMessage('bot', `Added "${itemName}" to your selection! Check the box below.`);
+                updateSelectionBox();
                 console.log(`Details for ${itemName}:`, details);
             }
         })
@@ -220,20 +228,6 @@ function displayOptions(options) {
     chatMessages.appendChild(optionsDiv);
 }
 
-function displaySubmitButton() {
-    const chatMessages = document.getElementById('chatMessages');
-    if (!chatMessages) return;
-
-    const existingButton = document.querySelector('.submit-button');
-    if (existingButton) existingButton.remove();
-
-    const submitButton = document.createElement('button');
-    submitButton.textContent = 'Submit to Salesforce';
-    submitButton.className = 'submit-button';
-    submitButton.onclick = submitToSalesforce;
-    chatMessages.appendChild(submitButton);
-}
-
 function submitToSalesforce() {
     if (selectedItems.length === 0) {
         addMessage('bot', 'No items to submit yet! Add some tasty picks first! 😊');
@@ -252,8 +246,7 @@ function submitToSalesforce() {
             } else {
                 addMessage('bot', `${data.success}! Your culinary choices are now saved. What’s next on the menu?`);
                 selectedItems = [];
-                updateSelectedItems();
-                document.querySelector('.submit-button').remove();
+                updateSelectionBox();
             }
         })
         .catch(error => {
@@ -280,7 +273,7 @@ function resetConversation() {
     ]);
     document.getElementById('suggestionsList').innerHTML = '';
     document.getElementById('menuItemsList').innerHTML = '';
-    updateSelectedItems();
+    updateSelectionBox();
 }
 
 document.getElementById('userInput').addEventListener('keypress', (e) => {