Update templates/index.html

templates/index.html

@@ -846,33 +846,43 @@
             // Log to verify the dishes being fetched
             console.log('Fetched menu items:', menuItems);
         
-            menuItems.forEach(item => {
-                const menuItem = document.createElement('div');
-                menuItem.className = 'menu-item';
-                const img = document.createElement('img');
-                img.src = item.image_url || 'https://via.placeholder.com/120';
-                img.alt = item.name;
-                const name = document.createElement('div');
-                name.textContent = item.name;
-                const button = document.createElement('button');
-                button.textContent = 'Add to Cart';
-                button.onclick = () => {
-                    selectedMenuItem = item;
-                    addMessage('bot', `World-class selection! Would you like to customize your dish further?`);
-                    const options = [
-                        { text: 'Yes', class: 'green' },
-                        { text: 'No', class: 'red' }
-                    ];
-                    currentStep = 'customization';
-                    displayOptions(options);
-                };
-                menuItem.appendChild(img);
-                menuItem.appendChild(name);
-                menuItem.appendChild(button);
-                menuItemsList.appendChild(menuItem);
-            });
+            // If menuItems is an empty array, add a message indicating no items found
+            if (menuItems.length === 0) {
+                const noItemsMessage = document.createElement('div');
+                noItemsMessage.textContent = 'No dishes available at the moment.';
+                menuItemsList.appendChild(noItemsMessage);
+            } else {
+                menuItems.forEach(item => {
+                    const menuItem = document.createElement('div');
+                    menuItem.className = 'menu-item';
+                    const img = document.createElement('img');
+                    img.src = item.image_url || 'https://via.placeholder.com/120';
+                    img.alt = item.name;
+                    const name = document.createElement('div');
+                    name.textContent = item.name;
+                    const button = document.createElement('button');
+                    button.textContent = 'Add to Cart';
+                    button.onclick = () => {
+                        selectedMenuItem = item;
+                        addMessage('bot', `World-class selection! Would you like to customize your dish further?`);
+                        const options = [
+                            { text: 'Yes', class: 'green' },
+                            { text: 'No', class: 'red' }
+                        ];
+                        currentStep = 'customization';
+                        displayOptions(options);
+                    };
+                    menuItem.appendChild(img);
+                    menuItem.appendChild(name);
+                    menuItem.appendChild(button);
+                    menuItemsList.appendChild(menuItem);
+                });
+            }
+        
+            // Ensure the display is scrolled to the latest message
+            chatMessages.scrollTop = chatMessages.scrollHeight;
         
-            // If there's no issue with the fetch, we expect the dishes to be displayed correctly here.
+            // Log that menu items were displayed
             console.log('Menu items displayed');
         }