Update static/script.js

static/script.js

@@ -31,7 +31,7 @@ function sendMessage() {
         selectionBoxVisible = true;
         handleResponse(message);
     } else {
-        addMessage('bot', 'Please type a dish or pick a preference! 😄');
+        addMessage('bot', 'Please type a dish name! 😄');
     }
     userInput.value = '';
     updateSelectionBox();
@@ -42,7 +42,7 @@ function handleResponse(userInput) {
     let botResponse = '';
 
     if (conversation.length === 2) {
-        botResponse = `Hi ${userInput}! 🍳 Search for a dish or choose a preference below!`;
+        botResponse = `Hi ${userInput}! 🍳 Search for a dish like "chicken" or add items below!`;
         displayOptions([
             { text: 'Vegetarian', class: 'green' },
             { text: 'Non-Vegetarian', class: 'red' },
@@ -50,13 +50,12 @@ function handleResponse(userInput) {
         ]);
         addMessage('bot', botResponse);
     } else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian' || lowerInput === 'both') {
-        botResponse = `Fetching ${lowerInput} dishes...`;
+        botResponse = `Selected ${lowerInput}. Search for a dish or add an item!`;
         addMessage('bot', botResponse);
-        fetchMenuItems(lowerInput);
     } else {
         botResponse = `Looking for "${userInput}"...`;
         addMessage('bot', botResponse);
-        fetchMenuItems(null, userInput);
+        fetchMenuItems(userInput);
     }
 }
 
@@ -75,19 +74,31 @@ function updateSelectionBox() {
     const vegButton = document.createElement('button');
     vegButton.textContent = 'Veg';
     vegButton.className = 'dietary-button green';
-    vegButton.onclick = () => fetchMenuItems('vegetarian');
+    vegButton.onclick = () => {
+        addMessage('user', 'Vegetarian');
+        conversation.push({ role: 'user', message: 'Vegetarian' });
+        handleResponse('vegetarian');
+    };
     selectionBox.appendChild(vegButton);
 
     const nonVegButton = document.createElement('button');
     nonVegButton.textContent = 'Non-Veg';
     nonVegButton.className = 'dietary-button red';
-    nonVegButton.onclick = () => fetchMenuItems('non-vegetarian');
+    nonVegButton.onclick = () => {
+        addMessage('user', 'Non-Vegetarian');
+        conversation.push({ role: 'user', message: 'Non-Vegetarian' });
+        handleResponse('non-vegetarian');
+    };
     selectionBox.appendChild(nonVegButton);
 
     const bothButton = document.createElement('button');
     bothButton.textContent = 'Both';
     bothButton.className = 'dietary-button gray';
-    bothButton.onclick = () => fetchMenuItems('both');
+    bothButton.onclick = () => {
+        addMessage('user', 'Both');
+        conversation.push({ role: 'user', message: 'Both' });
+        handleResponse('both');
+    };
     selectionBox.appendChild(bothButton);
 
     const label = document.createElement('span');
@@ -161,14 +172,11 @@ function updateSelectionBox() {
     console.log('Updated selection box:', selectedItems.map(item => ({ name: item.name, category: item.category })));
 }
 
-function fetchMenuItems(dietaryPreference, searchTerm = '') {
-    const payload = {};
-    if (dietaryPreference) payload.dietary_preference = dietaryPreference;
-    if (searchTerm) payload.search_term = searchTerm;
+function fetchMenuItems(searchTerm) {
     fetch('/get_menu_items', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(payload)
+        body: JSON.stringify({ search_term: searchTerm })
     })
         .then(response => response.json())
         .then(data => {
@@ -178,13 +186,13 @@ function fetchMenuItems(dietaryPreference, searchTerm = '') {
                 addMessage('bot', `--- Found ${data.menu_items.length} item${data.menu_items.length > 1 ? 's' : ''} ---`);
                 displayItemsList(data.menu_items);
             } else {
-                addMessage('bot', `No matches for "${searchTerm || dietaryPreference}". Try "paneer"!`);
+                addMessage('bot', `No matches for "${searchTerm}". Try "chicken"!`);
             }
-            console.log(`Fetched items for ${searchTerm || dietaryPreference}:`, data.menu_items);
+            console.log(`Fetched Menu_Item__c items for ${searchTerm}:`, data.menu_items);
         })
         .catch(error => {
             addMessage('bot', `Connection issue: ${error.message}. Retrying...`);
-            setTimeout(() => fetchMenuItems(dietaryPreference, searchTerm), 2000);
+            setTimeout(() => fetchMenuItems(searchTerm), 2000);
         });
 }
 
@@ -197,14 +205,15 @@ function fetchSectorItemDetails(itemName) {
         .then(response => response.json())
         .then(data => {
             if (data.error) {
-                addMessage('bot', `No "${itemName}" found. Try another!`);
+                addMessage('bot', `No "${itemName}" found in Sector_Detail__c. Try another!`);
             } else {
                 const details = data.item_details;
                 if (selectedItems.some(item => item.name === details.name)) {
                     addMessage('bot', `"${details.name}" already selected!`);
                 } else {
                     selectedItems.push({ ...details, quantity: 1 });
-                    addMessage('bot', `Added "${details.name}"!`);
+                    addMessage('bot', `--- Added "${details.name}" ---`);
+                    displaySingleItem(details);
                     updateSelectionBox();
                 }
             }
@@ -245,7 +254,7 @@ function displayItemsList(items) {
     items.forEach(item => {
         const itemDiv = document.createElement('div');
         itemDiv.className = 'item-card';
-        itemDiv.dataset.hidden = item.source === 'Sector_Detail__c' ? 'true' : 'false';
+        itemDiv.dataset.hidden = 'false';
 
         const img = document.createElement('img');
         img.src = item.image_url || 'https://via.placeholder.com/60';
@@ -261,40 +270,30 @@ function displayItemsList(items) {
         nameDiv.className = 'item-name';
         contentDiv.appendChild(nameDiv);
 
-        if (item.source === 'Menu_Item__c') {
-            const fields = [
-                { label: 'Price', value: item.price ? `$${item.price.toFixed(2)}` : 'N/A' },
-                { label: 'Veg/Non-Veg', value: item.veg_nonveg },
-                { label: 'Spice', value: item.spice_levels },
-                { label: 'Category', value: item.category },
-                { label: 'Ingredients', value: item.ingredients },
-                { label: 'Nutrition', value: item.nutritional_info },
-                { label: 'Sector', value: item.sector },
-                { label: 'Dynamic', value: item.dynamic_dish ? 'Yes' : 'No' }
-            ];
-            fields.forEach(field => {
-                if (field.value) {
-                    const p = document.createElement('p');
-                    p.className = 'item-field';
-                    p.innerHTML = `<strong>${field.label}:</strong> ${field.value}`;
-                    contentDiv.appendChild(p);
-                }
-            });
-        }
+        const fields = [
+            { label: 'Price', value: item.price ? `$${item.price.toFixed(2)}` : 'N/A' },
+            { label: 'Veg/Non-Veg', value: item.veg_nonveg },
+            { label: 'Spice', value: item.spice_levels },
+            { label: 'Category', value: item.category },
+            { label: 'Ingredients', value: item.ingredients },
+            { label: 'Nutrition', value: item.nutritional_info },
+            { label: 'Sector', value: item.sector },
+            { label: 'Dynamic', value: item.dynamic_dish ? 'Yes' : 'No' }
+        ];
+        fields.forEach(field => {
+            if (field.value) {
+                const p = document.createElement('p');
+                p.className = 'item-field';
+                p.innerHTML = `<strong>${field.label}:</strong> ${field.value}`;
+                contentDiv.appendChild(p);
+            }
+        });
 
         itemDiv.appendChild(contentDiv);
 
         const buttonContainer = document.createElement('div');
         buttonContainer.className = 'button-container';
 
-        if (item.source === 'Sector_Detail__c') {
-            const showButton = document.createElement('button');
-            showButton.textContent = 'Show';
-            showButton.className = 'show-button';
-            showButton.onclick = () => toggleDescription(itemDiv, item.description, item.name);
-            buttonContainer.appendChild(showButton);
-        }
-
         const addButton = document.createElement('button');
         addButton.textContent = 'Add';
         addButton.className = 'add-button';
@@ -305,17 +304,15 @@ function displayItemsList(items) {
                 category: item.category || 'Not specified',
                 description: item.description || 'No description available',
                 source: item.source,
-                quantity: 1
+                quantity: 1,
+                ingredients: item.ingredients,
+                nutritional_info: item.nutritional_info,
+                price: item.price,
+                sector: item.sector,
+                spice_levels: item.spice_levels,
+                veg_nonveg: item.veg_nonveg,
+                dynamic_dish: item.dynamic_dish
             };
-            if (item.source === 'Menu_Item__c') {
-                selectedItem.ingredients = item.ingredients;
-                selectedItem.nutritional_info = item.nutritional_info;
-                selectedItem.price = item.price;
-                selectedItem.sector = item.sector;
-                selectedItem.spice_levels = item.spice_levels;
-                selectedItem.veg_nonveg = item.veg_nonveg;
-                selectedItem.dynamic_dish = item.dynamic_dish;
-            }
             if (selectedItems.some(existing => existing.name === selectedItem.name)) {
                 addMessage('bot', `"${selectedItem.name}" already selected!`);
             } else {
@@ -334,6 +331,67 @@ function displayItemsList(items) {
     chatMessages.scrollTop = chatMessages.scrollHeight;
 }
 
+function displaySingleItem(item) {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) {
+        console.error('Chat messages container not found!');
+        addMessage('bot', 'Display issue. Try again?');
+        return;
+    }
+
+    const itemsGrid = document.createElement('div');
+    itemsGrid.className = 'items-grid';
+
+    const itemDiv = document.createElement('div');
+    itemDiv.className = 'item-card';
+    itemDiv.dataset.hidden = 'true';
+
+    const img = document.createElement('img');
+    img.src = item.image_url || 'https://via.placeholder.com/60';
+    img.alt = item.name;
+    img.className = 'item-image';
+    itemDiv.appendChild(img);
+
+    const contentDiv = document.createElement('div');
+    contentDiv.className = 'item-content';
+
+    const nameDiv = document.createElement('div');
+    nameDiv.textContent = item.name;
+    nameDiv.className = 'item-name';
+    contentDiv.appendChild(nameDiv);
+
+    itemDiv.appendChild(contentDiv);
+
+    const buttonContainer = document.createElement('div');
+    buttonContainer.className = 'button-container';
+
+    const showButton = document.createElement('button');
+    showButton.textContent = 'Show';
+    showButton.className = 'show-button';
+    showButton.onclick = () => toggleDescription(itemDiv, item.description, item.name);
+    buttonContainer.appendChild(showButton);
+
+    const addButton = document.createElement('button');
+    addButton.textContent = 'Add';
+    addButton.className = 'add-button';
+    addButton.onclick = () => {
+        if (selectedItems.some(existing => existing.name === item.name)) {
+            addMessage('bot', `"${item.name}" already selected!`);
+        } else {
+            selectedItems.push({ ...item, quantity: 1 });
+            addMessage('bot', `Added "${item.name}"!`);
+            updateSelectionBox();
+        }
+    };
+    buttonContainer.appendChild(addButton);
+
+    itemDiv.appendChild(buttonContainer);
+    itemsGrid.appendChild(itemDiv);
+
+    chatMessages.appendChild(itemsGrid);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
 function displayOptions(options) {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) {
@@ -416,7 +474,7 @@ function resetConversation() {
     conversation = [
         { role: 'bot', message: `Hello! I’m Chef Bot, your culinary assistant! What’s your name?` },
         { role: 'user', message: userName },
-        { role: 'bot', message: `Hi ${userName}! 🍳 Search for a dish or choose a preference below!` }
+        { role: 'bot', message: `Hi ${userName}! 🍳 Search for a dish like "chicken" or add items below!` }
     ];
     selectedItems = [];
     selectionBoxVisible = true;