Update templates/chef-bot.html

templates/chef-bot.html

@@ -103,31 +103,16 @@
             background-color: #f57c00;
         }
 
-        .items-grid {
-            display: flex;
-            flex-wrap: nowrap;
-            overflow-x: auto;
-            padding: 8px;
-            margin: 5px 0;
-            background-color: #f9f9f9;
-            border-radius: 5px;
-            gap: 8px;
-            scroll-behavior: smooth;
-        }
-
-        .item-card {
-            flex: 0 0 150px;
+        .item-box {
             background-color: white;
             border: 1px solid #ddd;
             border-radius: 6px;
             padding: 8px;
+            margin: 5px 0;
+            max-width: 200px;
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
         }
 
-        .item-card:active {
-            transform: scale(0.98);
-        }
-
         .item-image {
             width: 100%;
             height: 100px;
@@ -136,10 +121,6 @@
             margin-bottom: 5px;
         }
 
-        .item-content {
-            width: 100%;
-        }
-
         .item-name {
             font-size: 12px;
             font-weight: bold;
@@ -147,45 +128,7 @@
             margin-bottom: 3px;
         }
 
-        .item-field {
-            font-size: 10px;
-            margin: 2px 0;
-            color: #555;
-        }
-
-        .item-field strong {
-            color: #0288d1;
-        }
-
-        .item-description {
-            font-size: 10px;
-            margin: 5px 0;
-            color: #555;
-        }
-
-        .button-container {
-            display: flex;
-            gap: 5px;
-            margin-top: 5px;
-        }
-
-        .show-button {
-            padding: 4px;
-            background-color: #0288d1;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 10px;
-            flex: 1;
-            min-width: 40px;
-        }
-
-        .show-button:active {
-            background-color: #0277bd;
-        }
-
-        .add-button {
+        .add-button, .submit-button {
             padding: 4px;
             background-color: #4caf50;
             color: white;
@@ -193,11 +136,11 @@
             border-radius: 5px;
             cursor: pointer;
             font-size: 10px;
-            flex: 1;
-            min-width: 40px;
+            width: 100%;
+            margin-top: 5px;
         }
 
-        .add-button:active {
+        .add-button:active, .submit-button:active {
             background-color: #45a049;
         }
 
@@ -222,7 +165,6 @@
 
         .option-button.green { background-color: #4caf50; }
         .option-button.red { background-color: #d32f2f; }
-        .option-button.gray { background-color: #616161; }
         .option-button:active { opacity: 0.9; }
 
         .selection-box {
@@ -238,60 +180,6 @@
             gap: 5px;
         }
 
-        .selection-box span {
-            background-color: #bbdefb;
-            padding: 3px 8px;
-            border-radius: 5px;
-            font-size: 12px;
-        }
-
-        .selected-item {
-            display: flex;
-            align-items: center;
-            background-color: #bbdefb;
-            padding: 3px 8px;
-            border-radius: 5px;
-            font-size: 11px;
-        }
-
-        .selected-item-image {
-            width: 25px;
-            height: 25px;
-            object-fit: cover;
-            border-radius: 5px;
-            margin-right: 5px;
-        }
-
-        .submit-button {
-            padding: 6px 10px;
-            background-color: #0288d1;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 12px;
-            min-width: 60px;
-        }
-
-        .submit-button:active {
-            background-color: #0277bd;
-        }
-
-        .remove-button {
-            padding: 3px 6px;
-            margin-left: 5px;
-            background-color: #d32f2f;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font-size: 10px;
-        }
-
-        .remove-button:active {
-            background-color: #b71c1c;
-        }
-
         .manual-input {
             padding: 4px;
             border: 1px solid #0288d1;
@@ -300,190 +188,36 @@
             width: 100px;
         }
 
-        .quantity-input {
+        .order-name-input {
             padding: 4px;
             border: 1px solid #0288d1;
             border-radius: 5px;
             font-size: 12px;
-            width: 50px;
+            width: 100px;
         }
 
-        .order-name-input {
-            padding: 4px;
-            border: 1px solid #0288d1;
+        .customized-item {
+            background-color: #bbdefb;
+            padding: 8px;
             border-radius: 5px;
+            margin: 5px 0;
             font-size: 12px;
-            width: 100px;
         }
 
         @media (max-width: 480px) {
-            .chat-header {
-                font-size: 14px;
-                padding: 6px;
-            }
-            .chat-messages {
-                padding: 3px;
-            }
-            .bot-message, .user-message {
-                font-size: 11px;
-                padding: 6px;
-                margin: 3px 0;
-            }
-            .chat-input input {
-                font-size: 11px;
-                min-height: 30px;
-                padding: 5px;
-            }
-            .chat-input button {
-                font-size: 11px;
-                min-height: 30px;
-                padding: 5px 8px;
-                min-width: 50px;
-            }
-            .items-grid {
-                flex-direction: column;
-                overflow-x: hidden;
-                gap: 6px;
-                padding: 6px;
-            }
-            .item-card {
-                width: 100%;
-                flex: 0 0 auto;
-                max-width: 120px;
-            }
-            .item-image {
-                height: 80px;
-            }
-            .item-name {
-                font-size: 10px;
-            }
-            .item-field, .item-description {
-                font-size: 9px;
-            }
-            .show-button, .add-button {
-                font-size: 9px;
-                padding: 3px;
-                min-width: 35px;
-            }
-            .options-container {
-                gap: 3px;
-            }
-            .option-button {
-                font-size: 11px;
-                padding: 5px 8px;
-                min-width: 50px;
-            }
-            .selection-box {
-                padding: 6px;
-                gap: 3px;
-            }
-            .selection-box span {
-                font-size: 11px;
-                padding: 2px 6px;
-            }
-            .selected-item {
-                font-size: 10px;
-                padding: 2px 6px;
-            }
-            .selected-item-image {
-                width: 20px;
-                height: 20px;
-            }
-            .submit-button {
-                font-size: 11px;
-                padding: 5px 8px;
-                min-width: 50px;
-            }
-            .remove-button {
-                font-size: 9px;
-                padding: 2px 5px;
-            }
-            .manual-input, .order-name-input {
-                width: 80px;
-                font-size: 11px;
-                padding: 3px;
-            }
-            .quantity-input {
-                width: 40px;
-                font-size: 11px;
-                padding: 3px;
-            }
-        }
-
-        @media (min-width: 481px) and (max-width: 768px) {
-            .chat-header {
-                font-size: 15px;
-            }
-            .chat-messages {
-                padding: 4px;
-            }
-            .bot-message, .user-message {
-                font-size: 12px;
-                padding: 7px;
-            }
-            .chat-input input {
-                font-size: 12px;
-                min-height: 35px;
-            }
-            .chat-input button {
-                font-size: 12px;
-                min-height: 35px;
-                padding: 6px 10px;
-            }
-            .items-grid {
-                gap: 8px;
-            }
-            .item-card {
-                flex: 0 0 140px;
-            }
-            .item-image {
-                height: 90px;
-            }
-            .item-name {
-                font-size: 11px;
-            }
-            .item-field, .item-description {
-                font-size: 10px;
-            }
-            .show-button, .add-button {
-                font-size: 10px;
-                padding: 4px;
-                min-width: 40px;
-            }
-            .option-button {
-                font-size: 12px;
-                padding: 6px 10px;
-            }
-            .selection-box {
-                padding: 8px;
-                gap: 5px;
-            }
-            .selection-box span {
-                font-size: 12px;
-            }
-            .selected-item {
-                font-size: 11px;
-            }
-            .selected-item-image {
-                width: 25px;
-                height: 25px;
-            }
-            .submit-button {
-                font-size: 12px;
-                padding: 6px 10px;
-            }
-            .remove-button {
-                font-size: 10px;
-                padding: 3px 6px;
-            }
-            .manual-input, .order-name-input {
-                width: 100px;
-                font-size: 12px;
-            }
-            .quantity-input {
-                width: 50px;
-                font-size: 12px;
-            }
+            .chat-header { font-size: 14px; padding: 6px; }
+            .chat-messages { padding: 3px; }
+            .bot-message, .user-message { font-size: 11px; padding: 6px; margin: 3px 0; }
+            .chat-input input { font-size: 11px; min-height: 30px; padding: 5px; }
+            .chat-input button { font-size: 11px; min-height: 30px; padding: 5px 8px; min-width: 50px; }
+            .item-box { max-width: 150px; }
+            .item-image { height: 80px; }
+            .item-name { font-size: 10px; }
+            .add-button, .submit-button { font-size: 9px; }
+            .option-button { font-size: 11px; padding: 5px 8px; min-width: 50px; }
+            .selection-box { padding: 6px; gap: 3px; }
+            .manual-input, .order-name-input { width: 80px; font-size: 11px; padding: 3px; }
+            .customized-item { font-size: 11px; }
         }
     </style>
 </head>
@@ -493,8 +227,6 @@
         <div class="chat-messages" id="chatMessages">
             <div class="bot-message">Hello! I’m Chef Bot, your culinary assistant! What’s your name?</div>
         </div>
-        <div class="suggestions-list" id="suggestionsList"></div>
-        <div class="ingredients-list" id="menuItemsList"></div>
         <div class="chat-input">
             <input type="text" id="userInput" placeholder="Type here (e.g., paneer, chicken)...">
             <button onclick="sendMessage()">Send</button>
@@ -505,33 +237,27 @@
         let conversation = [
             { role: 'bot', message: 'Hello! I’m Chef Bot, your culinary assistant! What’s your name?' }
         ];
-        let selectedItems = [];
+        let selectedItem = null;
+        let customIngredients = [];
         let selectionBoxVisible = false;
 
         function addMessage(role, message) {
             const chatMessages = document.getElementById('chatMessages');
-            if (!chatMessages) {
-                console.error('Chat messages container not found!');
-                return;
-            }
+            if (!chatMessages) return;
             const messageDiv = document.createElement('div');
             messageDiv.className = role === 'bot' ? 'bot-message' : 'user-message';
             messageDiv.textContent = message;
             chatMessages.appendChild(messageDiv);
             chatMessages.scrollTop = chatMessages.scrollHeight;
-            console.log(`Added ${role} message: ${message}`);
         }
 
         function sendMessage() {
             const userInput = document.getElementById('userInput');
-            if (!userInput) {
-                console.error('User input field not found!');
-                return;
-            }
+            if (!userInput) return;
             const message = userInput.value.trim();
             if (message) {
                 addMessage('user', message);
-                conversation.push({ role: 'user', message: message });
+                conversation.push({ role: 'user', message });
                 selectionBoxVisible = true;
                 handleResponse(message);
             } else {
@@ -543,85 +269,97 @@
 
         function handleResponse(userInput) {
             const lowerInput = userInput.toLowerCase();
-            let botResponse = '';
-
             if (conversation.length === 2) {
-                botResponse = `Hi ${userInput}! 🍳 Search for a dish or choose a preference below!`;
+                addMessage('bot', `Hi ${userInput}! 🍳 Choose a dish or preference below!`);
                 displayOptions([
                     { text: 'Vegetarian', class: 'green' },
-                    { text: 'Non-Vegetarian', class: 'red' },
-                    { text: 'Both', class: 'gray' }
+                    { text: 'Non-Vegetarian', class: 'red' }
                 ]);
-                addMessage('bot', botResponse);
-            } else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian' || lowerInput === 'both') {
-                botResponse = `Fetching ${lowerInput} dishes...`;
-                addMessage('bot', botResponse);
-                fetchMenuItems(lowerInput);
-            } else if (lowerInput.startsWith('add')) {
-                handleAddItem(lowerInput);
+            } else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian') {
+                addMessage('bot', `Fetching ${lowerInput} dish...`);
+                fetchMenuItem(lowerInput);
             } else {
-                botResponse = `Looking for "${userInput}"...`;
-                addMessage('bot', botResponse);
-                fetchMenuItems(null, userInput);
+                addMessage('bot', `Looking for "${userInput}"...`);
+                fetchMenuItem(null, userInput);
             }
         }
 
-        function handleAddItem(input) {
-            const addMatch = input.match(/^add\s+(.+?)(?:\s+with\s+(.+))?$/i);
-            if (!addMatch) {
-                addMessage('bot', 'Please use format: "Add [dish name] [with extra ingredients]"');
-                return;
-            }
-            const dishName = addMatch[1].trim();
-            const extraIngredients = addMatch[2] ? addMatch[2].trim() : '';
-            fetch('/get_sector_item_details', {
+        function displayOptions(options) {
+            const chatMessages = document.getElementById('chatMessages');
+            if (!chatMessages) return;
+            const optionsDiv = document.createElement('div');
+            optionsDiv.className = 'options-container';
+            options.forEach(opt => {
+                const button = document.createElement('button');
+                button.textContent = opt.text;
+                button.className = `option-button ${opt.class}`;
+                button.onclick = () => {
+                    addMessage('user', opt.text);
+                    conversation.push({ role: 'user', message: opt.text });
+                    handleResponse(opt.text);
+                };
+                optionsDiv.appendChild(button);
+            });
+            chatMessages.appendChild(optionsDiv);
+        }
+
+        function fetchMenuItem(dietaryPreference = '', searchTerm = '') {
+            const payload = {};
+            if (dietaryPreference) payload.dietary_preference = dietaryPreference;
+            if (searchTerm) payload.search_term = searchTerm;
+            fetch('/get_menu_items', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ item_name: dishName })
+                body: JSON.stringify(payload)
             })
                 .then(response => response.json())
                 .then(data => {
                     if (data.error) {
-                        addMessage('bot', `No "${dishName}" found. Try another dish!`);
-                        return;
-                    }
-                    const item = data.item_details;
-                    const originalItem = {
-                        name: item.name,
-                        image_url: item.image_url || '',
-                        category: item.category || 'Not specified',
-                        description: item.description || 'No description available',
-                        source: item.source,
-                        quantity: 1
-                    };
-                    if (selectedItems.some(existing => existing.name === originalItem.name && !existing.custom)) {
-                        addMessage('bot', `"${originalItem.name}" already added!`);
+                        addMessage('bot', `Error: ${data.error}. Try again!`);
+                    } else if (data.menu_items.length > 0) {
+                        selectedItem = data.menu_items[0]; // Select the first item
+                        addMessage('bot', `Found "${selectedItem.name}"!`);
+                        displayItemBox(selectedItem);
                     } else {
-                        selectedItems.push(originalItem);
-                        addMessage('bot', `Added "${originalItem.name}"!`);
-                    }
-                    if (extraIngredients) {
-                        const customItem = {
-                            ...originalItem,
-                            name: `${item.name} (Custom)`,
-                            description: `${item.description}, ${extraIngredients}`,
-                            custom: true
-                        };
-                        if (selectedItems.some(existing => existing.name === customItem.name)) {
-                            addMessage('bot', `"${customItem.name}" already added!`);
-                        } else {
-                            selectedItems.push(customItem);
-                            addMessage('bot', `Added customized "${customItem.name}" with ${extraIngredients}!`);
-                        }
+                        addMessage('bot', `No matches for "${searchTerm || dietaryPreference}". Try "paneer"!`);
                     }
-                    updateSelectionBox();
                 })
                 .catch(error => {
-                    addMessage('bot', `Error fetching "${dishName}": ${error.message}. Retrying...`);
-                    setTimeout(() => fetchSectorItemDetails(dishName), 2000);
+                    addMessage('bot', `Connection issue: ${error.message}. Retrying...`);
+                    setTimeout(() => fetchMenuItem(dietaryPreference, searchTerm), 2000);
                 });
         }
 
+        function displayItemBox(item) {
+            const chatMessages = document.getElementById('chatMessages');
+            if (!chatMessages) return;
+            const itemBox = document.createElement('div');
+            itemBox.className = 'item-box';
+
+            const img = document.createElement('img');
+            img.src = item.image_url || 'https://via.placeholder.com/100';
+            img.alt = item.name;
+            img.className = 'item-image';
+            itemBox.appendChild(img);
+
+            const nameDiv = document.createElement('div');
+            nameDiv.className = 'item-name';
+            nameDiv.textContent = item.name;
+            itemBox.appendChild(nameDiv);
+
+            const addButton = document.createElement('button');
+            addButton.className = 'add-button';
+            addButton.textContent = 'Select';
+            addButton.onclick = () => {
+                addMessage('bot', `Selected "${item.name}". Add custom ingredients or submit!`);
+                updateSelectionBox();
+            };
+            itemBox.appendChild(addButton);
+
+            chatMessages.appendChild(itemBox);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+
         function updateSelectionBox() {
             const chatMessages = document.getElementById('chatMessages');
             if (!chatMessages) return;
@@ -629,348 +367,105 @@
             const existingBox = document.querySelector('.selection-box');
             if (existingBox) existingBox.remove();
 
-            if (!selectionBoxVisible && selectedItems.length === 0) return;
+            if (!selectionBoxVisible || !selectedItem) return;
 
             const selectionBox = document.createElement('div');
             selectionBox.className = 'selection-box';
 
-            const vegButton = document.createElement('button');
-            vegButton.textContent = 'Veg';
-            vegButton.className = 'dietary-button green';
-            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 = () => {
-                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 = () => {
-                addMessage('user', 'Both');
-                conversation.push({ role: 'user', message: 'Both' });
-                handleResponse('both');
-            };
-            selectionBox.appendChild(bothButton);
-
             const label = document.createElement('span');
             label.textContent = 'Selected:';
             selectionBox.appendChild(label);
 
-            selectedItems.forEach((item, index) => {
-                const itemContainer = document.createElement('div');
-                itemContainer.className = 'selected-item';
-                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.alt = item.name;
-                img.className = 'selected-item-image';
-                itemContainer.appendChild(img);
-
-                const contentDiv = document.createElement('div');
-                contentDiv.className = 'selected-item-content';
-
-                const itemSpan = document.createElement('span');
-                itemSpan.textContent = `${item.name} (Qty: ${item.quantity || 1})`;
-                contentDiv.appendChild(itemSpan);
-
-                if (item.source === 'Sector_Detail__c') {
-                    const showButton = document.createElement('button');
-                    showButton.textContent = 'Show';
-                    showButton.className = 'show-button';
-                    showButton.onclick = () => toggleDescription(itemContainer, item.description, item.name);
-                    contentDiv.appendChild(showButton);
-                }
-
-                itemContainer.appendChild(contentDiv);
-
-                const removeButton = document.createElement('button');
-                removeButton.textContent = 'X';
-                removeButton.className = 'remove-button';
-                removeButton.onclick = () => {
-                    selectedItems.splice(index, 1);
-                    addMessage('bot', `Removed "${item.name}".`);
-                    updateSelectionBox();
-                };
-                itemContainer.appendChild(removeButton);
-
-                selectionBox.appendChild(itemContainer);
-            });
-
-            const textInput = document.createElement('input');
-            textInput.type = 'text';
-            textInput.placeholder = 'Add item (e.g., Paneer Tikka with onions)';
-            textInput.className = 'manual-input';
-            textInput.addEventListener('keypress', (e) => {
-                if (e.key === 'Enter' && textInput.value.trim()) {
-                    const input = textInput.value.trim();
-                    addMessage('user', `Add ${input}`);
-                    conversation.push({ role: 'user', message: `Add ${input}` });
-                    handleAddItem(`add ${input}`);
-                    textInput.value = '';
+            // Display original item
+            const originalItemDiv = document.createElement('div');
+            originalItemDiv.className = 'customized-item';
+            originalItemDiv.textContent = `Original: ${selectedItem.name}`;
+            selectionBox.appendChild(originalItemDiv);
+
+            // Display customized item with ingredients
+            if (customIngredients.length > 0) {
+                const customItemDiv = document.createElement('div');
+                customItemDiv.className = 'customized-item';
+                customItemDiv.textContent = `Customized: ${selectedItem.name} with ${customIngredients.join(', ')}`;
+                selectionBox.appendChild(customItemDiv);
+            }
+
+            // Input for custom ingredients
+            const ingredientInput = document.createElement('input');
+            ingredientInput.type = 'text';
+            ingredientInput.placeholder = 'Add ingredient (e.g., onion)';
+            ingredientInput.className = 'manual-input';
+            ingredientInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter' && ingredientInput.value.trim()) {
+                    const ingredient = ingredientInput.value.trim();
+                    fetchIngredient(ingredient);
+                    ingredientInput.value = '';
                 }
             });
-            selectionBox.appendChild(textInput);
-
-            if (selectedItems.length > 0) {
-                const quantityInput = document.createElement('input');
-                quantityInput.type = 'number';
-                quantityInput.min = '1';
-                quantityInput.value = '1';
-                quantityInput.placeholder = 'Qty';
-                quantityInput.className = 'quantity-input';
-                selectionBox.appendChild(quantityInput);
-
-                const submitButton = document.createElement('button');
-                submitButton.textContent = 'Submit';
-                submitButton.className = 'submit-button';
-                submitButton.onclick = () => promptAndSubmit(quantityInput.value);
-                selectionBox.appendChild(submitButton);
-
-                const orderNameInput = document.createElement('input');
-                orderNameInput.type = 'text';
-                orderNameInput.placeholder = 'Order Name';
-                orderNameInput.className = 'order-name-input';
-                selectionBox.appendChild(orderNameInput);
-            }
+            selectionBox.appendChild(ingredientInput);
+
+            // Order name input
+            const orderNameInput = document.createElement('input');
+            orderNameInput.type = 'text';
+            orderNameInput.placeholder = 'Order Name';
+            orderNameInput.className = 'order-name-input';
+            selectionBox.appendChild(orderNameInput);
+
+            // Submit button
+            const submitButton = document.createElement('button');
+            submitButton.className = 'submit-button';
+            submitButton.textContent = 'Submit';
+            submitButton.onclick = () => {
+                const customOrderName = orderNameInput.value.trim();
+                submitToSalesforce(customOrderName);
+            };
+            selectionBox.appendChild(submitButton);
 
             chatMessages.appendChild(selectionBox);
             chatMessages.scrollTop = chatMessages.scrollHeight;
-            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;
-            fetch('/get_menu_items', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(payload)
-            })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.error) {
-                        addMessage('bot', `Error: ${data.error}. Try again!`);
-                    } 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"!`);
-                    }
-                    console.log(`Fetched items for ${searchTerm || dietaryPreference}:`, data.menu_items);
-                })
-                .catch(error => {
-                    addMessage('bot', `Connection issue: ${error.message}. Retrying...`);
-                    setTimeout(() => fetchMenuItems(dietaryPreference, searchTerm), 2000);
-                });
-        }
-
-        function fetchSectorItemDetails(itemName) {
+        function fetchIngredient(ingredientName) {
             fetch('/get_sector_item_details', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ item_name: itemName })
+                body: JSON.stringify({ item_name: ingredientName })
             })
                 .then(response => response.json())
                 .then(data => {
                     if (data.error) {
-                        addMessage('bot', `No "${itemName}" found. Try another!`);
+                        addMessage('bot', `Ingredient "${ingredientName}" not found. Try another!`);
                     } else {
-                        const details = data.item_details;
-                        if (selectedItems.some(item => item.name === details.name && !item.custom)) {
-                            addMessage('bot', `"${details.name}" already selected!`);
-                        } else {
-                            selectedItems.push({ ...details, quantity: 1 });
-                            addMessage('bot', `Added "${details.name}"!`);
-                            updateSelectionBox();
-                        }
+                        customIngredients.push(data.item_details.name);
+                        addMessage('bot', `Added ingredient "${data.item_details.name}" to "${selectedItem.name}"!`);
+                        updateSelectionBox();
                     }
                 })
                 .catch(error => {
-                    addMessage('bot', `Error for "${itemName}". Retrying...`);
-                    setTimeout(() => fetchSectorItemDetails(itemName), 2000);
+                    addMessage('bot', `Error fetching "${ingredientName}". Retrying...`);
+                    setTimeout(() => fetchIngredient(ingredientName), 2000);
                 });
         }
 
-        function toggleDescription(itemContainer, description, itemName) {
-            let descElement = itemContainer.querySelector('.item-description');
-            if (!descElement) {
-                descElement = document.createElement('p');
-                descElement.className = 'item-description';
-                descElement.textContent = description;
-                itemContainer.querySelector('.selected-item-content').appendChild(descElement);
-                itemContainer.dataset.hidden = 'false';
-                console.log(`Showed description for ${itemName}`);
-            } else {
-                descElement.remove();
-                itemContainer.dataset.hidden = 'true';
-                console.log(`Hid description for ${itemName}`);
-            }
-        }
-
-        function displayItemsList(items) {
-            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';
-
-            items.forEach(item => {
-                const itemDiv = document.createElement('div');
-                itemDiv.className = 'item-card';
-
-                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);
-
-                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';
-
-                const addButton = document.createElement('button');
-                addButton.textContent = 'Add';
-                addButton.className = 'add-button';
-                addButton.onclick = () => {
-                    const selectedItem = {
-                        name: item.name,
-                        image_url: item.image_url || '',
-                        category: item.category || 'Not specified',
-                        description: item.description || 'No description available',
-                        source: item.source,
-                        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 (selectedItems.some(existing => existing.name === selectedItem.name && !existing.custom)) {
-                        addMessage('bot', `"${selectedItem.name}" already selected!`);
-                    } else {
-                        selectedItems.push(selectedItem);
-                        addMessage('bot', `Added "${selectedItem.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) {
-                console.error('Chat messages container not found!');
+        function submitToSalesforce(customOrderName) {
+            if (!selectedItem) {
+                addMessage('bot', 'No item selected! Please select a dish! 😊');
                 return;
             }
-            const optionsDiv = document.createElement('div');
-            optionsDiv.className = 'options-container';
-
-            options.forEach(opt => {
-                const button = document.createElement('button');
-                button.textContent = opt.text;
-                button.className = `option-button ${opt.class}`;
-                button.onclick = () => {
-                    addMessage('user', opt.text);
-                    conversation.push({ role: 'user', message: opt.text });
-                    selectionBoxVisible = true;
-                    handleResponse(opt.text);
-                    updateSelectionBox();
-                };
-                optionsDiv.appendChild(button);
-            });
 
-            const backButton = document.createElement('button');
-            backButton.textContent = 'Back';
-            backButton.className = 'option-button';
-            backButton.onclick = () => resetConversation();
-            optionsDiv.appendChild(backButton);
-
-            chatMessages.appendChild(optionsDiv);
-        }
-
-        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);
-            } else {
-                addMessage('bot', 'Cancelled. Add more items?');
-            }
-        }
-
-        function submitToSalesforce(customOrderName, quantity) {
-            if (selectedItems.length === 0) {
-                addMessage('bot', 'No items selected! Add some dishes! 😊');
-                return;
-            }
-
-            const itemsToSubmit = selectedItems.map(item => ({
-                name: item.name,
-                category: item.category || 'Not specified',
-                description: item.description || 'No description available',
-                image_url: item.image_url || '',
-                quantity: parseInt(quantity) || 1
-            }));
+            const order = {
+                name: selectedItem.name,
+                category: selectedItem.category || 'Not specified',
+                description: selectedItem.description || 'No description available',
+                image_url: selectedItem.image_url || '',
+                custom_ingredients: customIngredients,
+                quantity: 1
+            };
 
             fetch('/submit_items', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ items: itemsToSubmit, custom_order_name: customOrderName })
+                body: JSON.stringify({ items: [order], custom_order_name: customOrderName })
             })
                 .then(response => response.json())
                 .then(data => {
@@ -978,36 +473,18 @@
                         addMessage('bot', `Submission failed: ${data.error}. Try again?`);
                     } else {
                         addMessage('bot', `Submitted ${data.ingredient_name}! What's next?`);
-                        selectedItems = [];
+                        selectedItem = null;
+                        customIngredients = [];
+                        selectionBoxVisible = false;
                         updateSelectionBox();
                     }
                 })
                 .catch(error => {
                     addMessage('bot', `Submission error: ${error.message}. Retrying...`);
-                    setTimeout(() => submitToSalesforce(customOrderName, quantity), 2000);
+                    setTimeout(() => submitToSalesforce(customOrderName), 2000);
                 });
         }
 
-        function resetConversation() {
-            const userName = conversation.length > 1 ? conversation[1].message : 'Friend';
-            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!` }
-            ];
-            selectedItems = [];
-            selectionBoxVisible = true;
-            const chatMessages = document.getElementById('chatMessages');
-            chatMessages.innerHTML = '';
-            conversation.forEach(msg => addMessage(msg.role, msg.message));
-            displayOptions([
-                { text: 'Vegetarian', class: 'green' },
-                { text: 'Non-Vegetarian', class: 'red' },
-                { text: 'Both', class: 'gray' }
-            ]);
-            updateSelectionBox();
-        }
-
         document.getElementById('userInput').addEventListener('keypress', (e) => {
             if (e.key === 'Enter') sendMessage();
         });