Update static/script.js

static/script.js

@@ -96,7 +96,7 @@ function updateSelectionBox() {
         if (e.key === 'Enter' && textInput.value.trim()) {
             const manualItem = {
                 name: textInput.value.trim(),
-                image_url: '' // Default to placeholder
+                image_url: ''
             };
             selectedItems.push(manualItem);
             addMessage('bot', `Added "${manualItem.name}" to your selection! Check the box below.`);
@@ -230,14 +230,28 @@ function displayItemsList(items, containerId, isSectorDetail = false) {
     items.forEach(item => {
         const itemDiv = document.createElement('div');
         itemDiv.className = containerId === 'menuItemsList' ? 'ingredient-item' : 'suggestion-item';
+
         const img = document.createElement('img');
         img.src = item.image_url || 'https://via.placeholder.com/60';
         img.alt = item.name;
-        const name = document.createElement('div');
-        name.textContent = item.name;
-        name.style.textAlign = 'center';
-        name.style.marginTop = '5px';
-        name.style.fontSize = '12px';
+        itemDiv.appendChild(img);
+
+        const nameDiv = document.createElement('div');
+        nameDiv.textContent = item.name;
+        nameDiv.style.textAlign = 'center';
+        nameDiv.style.marginTop = '5px';
+        nameDiv.style.fontSize = '12px';
+        itemDiv.appendChild(nameDiv);
+
+        if (isSectorDetail && item.description) {
+            const descDiv = document.createElement('div');
+            descDiv.textContent = item.description;
+            descDiv.style.textAlign = 'center';
+            descDiv.style.fontSize = '10px';
+            descDiv.style.color = '#555';
+            itemDiv.appendChild(descDiv);
+        }
+
         const button = document.createElement('button');
         button.textContent = 'Add';
         button.onclick = () => {
@@ -253,9 +267,8 @@ function displayItemsList(items, containerId, isSectorDetail = false) {
             }
             updateSelectionBox();
         };
-        itemDiv.appendChild(img);
-        itemDiv.appendChild(name);
         itemDiv.appendChild(button);
+
         container.appendChild(itemDiv);
     });
 }
@@ -300,7 +313,6 @@ function submitToSalesforce() {
         return;
     }
 
-    // Only send the name field to the backend
     const itemsToSubmit = selectedItems.map(item => ({ name: item.name }));
 
     fetch('/submit_items', {