Update static/script.js

static/script.js

@@ -100,23 +100,13 @@ function updateSelectionBox() {
 
     const textInput = document.createElement('input');
     textInput.type = 'text';
-    textInput.placeholder = 'Add item manually...';
+    textInput.placeholder = 'Search related items...';
     textInput.className = 'manual-input';
     textInput.addEventListener('keypress', (e) => {
         if (e.key === 'Enter' && textInput.value.trim()) {
-            const manualItem = {
-                name: textInput.value.trim(),
-                image_url: '',
-                description: 'Manually added item'
-            };
-            if (selectedItems.some(item => item.name === manualItem.name)) {
-                addMessage('bot', `"${manualItem.name}" is already in your selection!`);
-            } else {
-                selectedItems.push(manualItem);
-                addMessage('bot', `Added "${manualItem.name}" to your selection! Check the box below.`);
-            }
+            const searchTerm = textInput.value.trim();
+            fetchRelatedImages(searchTerm);
             textInput.value = '';
-            updateSelectionBox();
         }
     });
     selectionBox.appendChild(textInput);
@@ -151,7 +141,6 @@ function handleResponse(userInput) {
         fetchMenuItems(lowerInput);
         return;
     } else {
-        // Treat input as an item name and fetch details
         botResponse = `Looking up details for "${userInput}"...`;
         addMessage('bot', botResponse);
         fetchItemDetailsByName(userInput);
@@ -258,6 +247,47 @@ function fetchItemDetailsByName(itemName) {
         });
 }
 
+function fetchRelatedImages(searchTerm) {
+    fetch('/get_menu_items', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ search_term: searchTerm })
+    })
+        .then(response => response.json())
+        .then(data => {
+            if (data.error) {
+                addMessage('bot', `Oops! Trouble finding related items for "${searchTerm}": ${data.error}. Try again!`);
+            } else if (data.menu_items.length > 0) {
+                const imageContainer = document.createElement('div');
+                imageContainer.className = 'image-container';
+                data.menu_items.forEach(item => {
+                    if (item.image_url) {
+                        const img = document.createElement('img');
+                        img.src = item.image_url;
+                        img.alt = item.name;
+                        img.className = 'related-image';
+                        imageContainer.appendChild(img);
+                    }
+                });
+                if (imageContainer.children.length > 0) {
+                    const chatMessages = document.getElementById('chatMessages');
+                    chatMessages.appendChild(imageContainer);
+                    chatMessages.scrollTop = chatMessages.scrollHeight;
+                    addMessage('bot', `Here are images for items related to "${searchTerm}":`);
+                } else {
+                    addMessage('bot', `No images found for items related to "${searchTerm}".`);
+                }
+            } else {
+                addMessage('bot', `No items found related to "${searchTerm}" in Sector_Detail__c.`);
+            }
+            console.log(`Fetched related images for "${searchTerm}":`, data.menu_items);
+        })
+        .catch(error => {
+            addMessage('bot', `Error fetching related images for "${searchTerm}": ${error.message}. I’ll retry in a sec...`);
+            setTimeout(() => fetchRelatedImages(searchTerm), 2000);
+        });
+}
+
 function showDescriptionPopup(item) {
     const existingPopup = document.querySelector('.description-popup');
     if (existingPopup) existingPopup.remove();