Update static/script.js

static/script.js

@@ -3,8 +3,10 @@ let conversation = [
 ];
 let selectedItems = [];
 let selectionBoxVisible = false;
+const searchCache = new Map();
+const MAX_RETRIES = 3;
 
-function addMessage(role, message) {
+function addMessage(role, message, isDebug = false) {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) {
         console.error('Chat messages container not found!');
@@ -15,7 +17,7 @@ function addMessage(role, message) {
     messageDiv.textContent = message;
     chatMessages.appendChild(messageDiv);
     chatMessages.scrollTop = chatMessages.scrollHeight;
-    console.log(`Added ${role} message: ${message}`);
+    if (isDebug) console.log(`[${role.toUpperCase()}] ${message}`);
 }
 
 function showToast(message) {
@@ -34,7 +36,7 @@ function sendMessage() {
     }
     const message = userInput.value.trim();
     if (message) {
-        addMessage('user', message);
+        addMessage('user', message, true);
         conversation.push({ role: 'user', message: message });
         selectionBoxVisible = true;
         handleResponse(message);
@@ -93,6 +95,8 @@ function updateSelectionBox() {
     const clearAllButton = document.createElement('button');
     clearAllButton.textContent = 'Clear All';
     clearAllButton.className = 'remove-button';
+    clearAllButton.setAttribute('aria-label', 'Clear all selected items');
+    clearAllButton.tabIndex = 0;
     clearAllButton.onclick = () => {
         selectedItems = [];
         addMessage('bot', 'Cleared all items.');
@@ -104,8 +108,10 @@ function updateSelectionBox() {
     const vegButton = document.createElement('button');
     vegButton.textContent = 'Veg';
     vegButton.className = 'option-button green';
+    vegButton.setAttribute('aria-label', 'Select vegetarian dishes');
+    vegButton.tabIndex = 0;
     vegButton.onclick = () => {
-        addMessage('user', 'Vegetarian');
+        addMessage('user', 'Vegetarian', true);
         conversation.push({ role: 'user', message: 'Vegetarian' });
         handleResponse('vegetarian');
         showToast('Selected Vegetarian');
@@ -115,8 +121,10 @@ function updateSelectionBox() {
     const nonVegButton = document.createElement('button');
     nonVegButton.textContent = 'Non-Veg';
     nonVegButton.className = 'option-button red';
+    nonVegButton.setAttribute('aria-label', 'Select non-vegetarian dishes');
+    nonVegButton.tabIndex = 0;
     nonVegButton.onclick = () => {
-        addMessage('user', 'Non-Vegetarian');
+        addMessage('user', 'Non-Vegetarian', true);
         conversation.push({ role: 'user', message: 'Non-Vegetarian' });
         handleResponse('non-vegetarian');
         showToast('Selected Non-Vegetarian');
@@ -126,8 +134,10 @@ function updateSelectionBox() {
     const bothButton = document.createElement('button');
     bothButton.textContent = 'Both';
     bothButton.className = 'option-button gray';
+    bothButton.setAttribute('aria-label', 'Select both vegetarian and non-vegetarian dishes');
+    bothButton.tabIndex = 0;
     bothButton.onclick = () => {
-        addMessage('user', 'Both');
+        addMessage('user', 'Both', true);
         conversation.push({ role: 'user', message: 'Both' });
         handleResponse('both');
         showToast('Selected Both');
@@ -144,7 +154,7 @@ function updateSelectionBox() {
         itemContainer.dataset.hidden = item.source === 'Sector_Detail__c' ? 'true' : 'false';
 
         const img = document.createElement('img');
-        img.src = item.image_url || 'https://via.placeholder.com/30';
+        img.src = item.image_url || 'https://via.placeholder.com/30?text=Item';
         img.alt = item.name;
         img.className = 'selected-item-image';
         itemContainer.appendChild(img);
@@ -156,10 +166,41 @@ function updateSelectionBox() {
         itemSpan.textContent = `${item.name} (Qty: ${item.quantity || 1})`;
         contentDiv.appendChild(itemSpan);
 
+        const quantityDiv = document.createElement('div');
+        quantityDiv.className = 'quantity-controls';
+        const decButton = document.createElement('button');
+        decButton.textContent = '-';
+        decButton.className = 'quantity-button';
+        decButton.setAttribute('aria-label', `Decrease quantity of ${item.name}`);
+        decButton.tabIndex = 0;
+        decButton.onclick = () => {
+            if (item.quantity > 1) {
+                item.quantity -= 1;
+                updateSelectionBox();
+                showToast(`Decreased quantity of ${item.name}`);
+            }
+        };
+        quantityDiv.appendChild(decButton);
+
+        const incButton = document.createElement('button');
+        incButton.textContent = '+';
+        incButton.className = 'quantity-button';
+        incButton.setAttribute('aria-label', `Increase quantity of ${item.name}`);
+        incButton.tabIndex = 0;
+        incButton.onclick = () => {
+            item.quantity += 1;
+            updateSelectionBox();
+            showToast(`Increased quantity of ${item.name}`);
+        };
+        quantityDiv.appendChild(incButton);
+        contentDiv.appendChild(quantityDiv);
+
         if (item.source === 'Sector_Detail__c') {
             const showButton = document.createElement('button');
             showButton.textContent = 'Show';
             showButton.className = 'show-button';
+            showButton.setAttribute('aria-label', `Show details for ${item.name}`);
+            showButton.tabIndex = 0;
             showButton.onclick = () => toggleDescription(itemContainer, item.description, item.name);
             contentDiv.appendChild(showButton);
         }
@@ -169,6 +210,8 @@ function updateSelectionBox() {
         const removeButton = document.createElement('button');
         removeButton.textContent = 'X';
         removeButton.className = 'remove-button';
+        removeButton.setAttribute('aria-label', `Remove ${item.name} from selection`);
+        removeButton.tabIndex = 0;
         removeButton.onclick = () => {
             selectedItems.splice(index, 1);
             addMessage('bot', `Removed "${item.name}".`);
@@ -184,14 +227,17 @@ function updateSelectionBox() {
     textInput.type = 'text';
     textInput.placeholder = 'Add item...';
     textInput.className = 'manual-input';
-    textInput.addEventListener('keypress', debounce((e) => {
+    textInput.setAttribute('aria-label', 'Add item manually');
+    textInput.tabIndex = 0;
+    const debouncedFetch = debounce((e) => {
         if (e.key === 'Enter' && textInput.value.trim()) {
             const itemName = textInput.value.trim();
             fetchSectorItemDetails(itemName);
             textInput.value = '';
             showToast(`Searching for "${itemName}"...`);
         }
-    }, 300));
+    }, 300);
+    textInput.addEventListener('keypress', debouncedFetch);
     selectionBox.appendChild(textInput);
 
     if (selectedItems.length > 0) {
@@ -201,11 +247,15 @@ function updateSelectionBox() {
         quantityInput.value = '1';
         quantityInput.placeholder = 'Qty';
         quantityInput.className = 'quantity-input';
+        quantityInput.setAttribute('aria-label', 'Set default quantity for all items');
+        quantityInput.tabIndex = 0;
         selectionBox.appendChild(quantityInput);
 
         const submitButton = document.createElement('button');
         submitButton.textContent = 'Submit';
         submitButton.className = 'submit-button';
+        submitButton.setAttribute('aria-label', 'Submit selected items');
+        submitButton.tabIndex = 0;
         submitButton.onclick = () => promptAndSubmit(quantityInput.value);
         selectionBox.appendChild(submitButton);
 
@@ -213,15 +263,38 @@ function updateSelectionBox() {
         orderNameInput.type = 'text';
         orderNameInput.placeholder = 'Order Name';
         orderNameInput.className = 'order-name-input';
+        orderNameInput.setAttribute('aria-label', 'Enter order name');
+        orderNameInput.tabIndex = 0;
         selectionBox.appendChild(orderNameInput);
     }
 
     chatMessages.appendChild(selectionBox);
     chatMessages.scrollTop = chatMessages.scrollHeight;
-    console.log('Updated selection box:', selectedItems.map(item => ({ name: item.name, category: item.category })));
+}
+
+async function fetchWithRetry(url, options, retries = MAX_RETRIES) {
+    for (let i = 0; i < retries; i++) {
+        try {
+            const response = await fetch(url, options);
+            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+            return await response.json();
+        } catch (error) {
+            if (i === retries - 1) {
+                throw error;
+            }
+            await new Promise(resolve => setTimeout(resolve, 2000));
+        }
+    }
 }
 
 function fetchMenuItems(dietaryPreference = '', searchTerm = '') {
+    const cacheKey = `${dietaryPreference}:${searchTerm}`;
+    if (searchCache.has(cacheKey)) {
+        const data = searchCache.get(cacheKey);
+        displayCachedMenuItems(data, searchTerm, dietaryPreference);
+        return;
+    }
+
     const payload = {};
     if (dietaryPreference) payload.dietary_preference = dietaryPreference;
     if (searchTerm) payload.search_term = searchTerm;
@@ -231,46 +304,64 @@ function fetchMenuItems(dietaryPreference = '', searchTerm = '') {
     spinner.className = 'spinner';
     chatMessages.appendChild(spinner);
 
-    fetch('/get_menu_items', {
+    fetchWithRetry('/get_menu_items', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(payload)
     })
-        .then(response => response.json())
         .then(data => {
             spinner.remove();
             if (data.error) {
                 addMessage('bot', `Error: ${data.error}. Try again!`);
                 showToast(`Error: ${data.error}`);
             } else if (data.menu_items.length > 0) {
+                searchCache.set(cacheKey, data);
                 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" or "chicken curry"!`);
                 showToast('No items found!');
             }
-            console.log(`Fetched items for ${searchTerm || dietaryPreference}:`, data.menu_items);
         })
         .catch(error => {
             spinner.remove();
-            addMessage('bot', `Connection issue: ${error.message}. Retrying...`);
+            addMessage('bot', `Connection issue: ${error.message}. Please try again later.`);
             showToast('Connection issue!');
-            setTimeout(() => fetchMenuItems(dietaryPreference, searchTerm), 2000);
         });
 }
 
+function displayCachedMenuItems(data, searchTerm, dietaryPreference) {
+    if (data.error) {
+        addMessage('bot', `Error: ${data.error}. Try again!`);
+        showToast(`Error: ${data.error}`);
+    } else if (data.menu_items.length > 0) {
+        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" or "chicken curry"!`);
+        showToast('No items found!');
+    }
+}
+
 function fetchSectorItemDetails(itemName) {
-    fetch('/get_sector_item_details', {
+    const cacheKey = `sector:${itemName}`;
+    if (searchCache.has(cacheKey)) {
+        const data = searchCache.get(cacheKey);
+        displayCachedSectorItems(data, itemName);
+        return;
+    }
+
+    fetchWithRetry('/get_sector_item_details', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ item_name: itemName })
     })
-        .then(response => response.json())
         .then(data => {
             if (data.error) {
                 addMessage('bot', `No "${itemName}" found. Try another!`);
                 showToast(`No "${itemName}" found`);
             } else {
+                searchCache.set(cacheKey, data);
                 const details = data.item_details;
                 if (selectedItems.some(item => item.name === details.name)) {
                     addMessage('bot', `"${details.name}" already selected!`);
@@ -284,12 +375,29 @@ function fetchSectorItemDetails(itemName) {
             }
         })
         .catch(error => {
-            addMessage('bot', `Error for "${itemName}". Retrying...`);
+            addMessage('bot', `Error for "${itemName}". Please try again later.`);
             showToast(`Error fetching "${itemName}"`);
-            setTimeout(() => fetchSectorItemDetails(itemName), 2000);
         });
 }
 
+function displayCachedSectorItems(data, itemName) {
+    if (data.error) {
+        addMessage('bot', `No "${itemName}" found. Try another!`);
+        showToast(`No "${itemName}" found`);
+    } else {
+        const details = data.item_details;
+        if (selectedItems.some(item => item.name === details.name)) {
+            addMessage('bot', `"${details.name}" already selected!`);
+            showToast(`"${details.name}" already selected`);
+        } else {
+            selectedItems.push({ ...details, quantity: 1 });
+            addMessage('bot', `Added "${details.name}"!`);
+            showToast(`Added "${details.name}"`);
+            updateSelectionBox();
+        }
+    }
+}
+
 function toggleDescription(itemContainer, description, itemName) {
     let descElement = itemContainer.querySelector('.item-description');
     if (!descElement) {
@@ -298,12 +406,10 @@ function toggleDescription(itemContainer, description, itemName) {
         descElement.textContent = description;
         itemContainer.querySelector('.selected-item-content').appendChild(descElement);
         itemContainer.dataset.hidden = 'false';
-        console.log(`Showed description for ${itemName}`);
         showToast(`Showing details for ${itemName}`);
     } else {
         descElement.remove();
         itemContainer.dataset.hidden = 'true';
-        console.log(`Hid description for ${itemName}`);
         showToast(`Hid details for ${itemName}`);
     }
 }
@@ -311,7 +417,6 @@ function toggleDescription(itemContainer, description, itemName) {
 function displayItemsList(items) {
     const chatMessages = document.getElementById('chatMessages');
     if (!chatMessages) {
-        console.error('Chat messages container not found!');
         addMessage('bot', 'Display issue. Try again?');
         showToast('Display issue!');
         return;
@@ -320,14 +425,15 @@ function displayItemsList(items) {
     const itemsGrid = document.createElement('div');
     itemsGrid.className = 'items-grid';
 
-    items.forEach(item => {
-        const itemDiv = document.createElement('div');
+    items.forEach((item, index) => {
+        const itemDiv = document.createElement('article');
         itemDiv.className = 'item-card';
 
         const img = document.createElement('img');
-        img.src = item.image_url || 'https://via.placeholder.com/120';
+        img.src = item.image_url || 'https://via.placeholder.com/120?text=Item';
         img.alt = item.name;
         img.className = 'item-image';
+        if (index < 3) img.loading = 'eager'; // Preload first 3 images
         itemDiv.appendChild(img);
 
         const contentDiv = document.createElement('div');
@@ -365,6 +471,8 @@ function displayItemsList(items) {
         const addButton = document.createElement('button');
         addButton.textContent = 'Add';
         addButton.className = 'add-button';
+        addButton.setAttribute('aria-label', `Add ${item.name} to selection`);
+        addButton.tabIndex = 0;
         addButton.onclick = () => {
             const selectedItem = {
                 name: item.name,
@@ -414,8 +522,10 @@ function displayOptions(options) {
         const button = document.createElement('button');
         button.textContent = opt.text;
         button.className = `option-button ${opt.class}`;
+        button.setAttribute('aria-label', `Select ${opt.text} dishes`);
+        button.tabIndex = 0;
         button.onclick = () => {
-            addMessage('user', opt.text);
+            addMessage('user', opt.text, true);
             conversation.push({ role: 'user', message: opt.text });
             selectionBoxVisible = true;
             handleResponse(opt.text);
@@ -428,6 +538,8 @@ function displayOptions(options) {
     const backButton = document.createElement('button');
     backButton.textContent = 'Back';
     backButton.className = 'option-button';
+    backButton.setAttribute('aria-label', 'Reset conversation');
+    backButton.tabIndex = 0;
     backButton.onclick = () => resetConversation();
     optionsDiv.appendChild(backButton);
 
@@ -437,8 +549,14 @@ function displayOptions(options) {
 function promptAndSubmit(quantity) {
     const orderNameInput = document.querySelector('.order-name-input');
     const customOrderName = orderNameInput ? orderNameInput.value.trim() : '';
-    if (confirm(`Submit ${selectedItems.length} items (Qty: ${quantity})?`)) {
-        submitToSalesforce(customOrderName, quantity);
+    const qty = parseInt(quantity);
+    if (isNaN(qty) || qty <= 0) {
+        addMessage('bot', 'Please enter a valid quantity (1 or more)!');
+        showToast('Invalid quantity!');
+        return;
+    }
+    if (confirm(`Submit ${selectedItems.length} items with default quantity ${qty}?`)) {
+        submitToSalesforce(customOrderName, qty);
         showToast('Submitting order...');
     } else {
         addMessage('bot', 'Cancelled. Add more items?');
@@ -458,30 +576,28 @@ function submitToSalesforce(customOrderName, quantity) {
         category: item.category || 'Not specified',
         description: item.description || 'No description available',
         image_url: item.image_url || '',
-        quantity: parseInt(quantity) || 1
+        quantity: item.quantity || parseInt(quantity) || 1
     }));
 
-    fetch('/submit_items', {
+    fetchWithRetry('/submit_items', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ items: itemsToSubmit, custom_order_name: customOrderName })
     })
-        .then(response => response.json())
         .then(data => {
             if (data.error) {
                 addMessage('bot', `Submission failed: ${data.error}. Try again?`);
                 showToast(`Submission failed: ${data.error}`);
             } else {
-                addMessage('bot', `Submitted ${data.ingredient_name}! What's next?`);
+                addMessage('bot', `Order "${customOrderName || 'Order'}" with ${itemsToSubmit.length} items submitted! What's next?`);
                 selectedItems = [];
                 updateSelectionBox();
-                showToast('Order submitted!');
+                showToast('Order submitted successfully!');
             }
         })
         .catch(error => {
-            addMessage('bot', `Submission error: ${error.message}. Retrying...`);
+            addMessage('bot', `Submission error: ${error.message}. Please try again later.`);
             showToast('Submission error!');
-            setTimeout(() => submitToSalesforce(customOrderName, quantity), 2000);
         });
 }