Update static/script.js

static/script.js

@@ -29,21 +29,35 @@ function sendMessage() {
         conversation.push({ role: 'user', message: message });
         setTimeout(() => handleResponse(message), 500);
     } else if (selectedItems.length > 0) {
-        // If input is empty but items are selected, treat it as a trigger to show Submit
-        addMessage('bot', `You’ve selected ${selectedItems.length} item(s). Ready to submit?`);
+        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 items to get started! 😄');
+        addMessage('bot', 'Hey, don’t be shy! Type something or add some items to get started! 😄');
     }
     userInput.value = ''; // Clear input after sending
-    updateInputBar(); // Reset input bar to show selected items
 }
 
-function updateInputBar() {
-    const userInput = document.getElementById('userInput');
-    if (!userInput) return;
-    userInput.value = selectedItems.map(item => item.name).join(', ');
-    console.log('Updated input bar with selected items:', userInput.value);
+function updateSelectedItems() {
+    const selectedArea = document.getElementById('itemDetails');
+    if (!selectedArea) {
+        console.error('Item details container not found!');
+        return;
+    }
+    selectedArea.innerHTML = '';
+
+    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);
+        });
+    }
+    console.log('Updated selected items:', selectedItems.map(item => item.name));
 }
 
 function handleResponse(userInput) {
@@ -133,8 +147,8 @@ function fetchItemDetails(itemName) {
             } else {
                 const details = data.item_details;
                 selectedItems.push(details);
-                addMessage('bot', `Added "${itemName}" to your list! Check the input bar.`);
-                updateInputBar();
+                addMessage('bot', `Added "${itemName}" to your selection! See it below.`);
+                updateSelectedItems();
                 console.log(`Details for ${itemName}:`, details);
             }
         })
@@ -222,7 +236,7 @@ function displaySubmitButton() {
 
 function submitToSalesforce() {
     if (selectedItems.length === 0) {
-        addMessage('bot', 'No items to submit yet! Add some first! 😊');
+        addMessage('bot', 'No items to submit yet! Add some tasty picks first! 😊');
         return;
     }
 
@@ -236,9 +250,9 @@ function submitToSalesforce() {
             if (data.error) {
                 addMessage('bot', `Uh-oh! Failed to submit items: ${data.error}. Want to try again?`);
             } else {
-                addMessage('bot', `${data.success}! Your selections are saved. Ready for more?`);
+                addMessage('bot', `${data.success}! Your culinary choices are now saved. What’s next on the menu?`);
                 selectedItems = [];
-                updateInputBar();
+                updateSelectedItems();
                 document.querySelector('.submit-button').remove();
             }
         })
@@ -266,7 +280,7 @@ function resetConversation() {
     ]);
     document.getElementById('suggestionsList').innerHTML = '';
     document.getElementById('menuItemsList').innerHTML = '';
-    updateInputBar();
+    updateSelectedItems();
 }
 
 document.getElementById('userInput').addEventListener('keypress', (e) => {