Update templates/index.html

templates/index.html

@@ -6,36 +6,33 @@
     <title>Chef Bot</title>
     <style>
         body {
-            font-family: 'Segoe UI', Arial, sans-serif;
+            font-family: 'Arial', sans-serif;
             margin: 0;
             padding: 0;
-            background-color: #f4f6f8;
+            background-color: #f0f2f5;
             overflow-x: hidden;
         }
 
         .chat-container {
             width: 100%;
-            max-width: 800px;
+            max-width: 1200px;
             height: 100vh;
             margin: 0 auto;
-            border: 1px solid #ddd;
-            border-radius: 10px;
-            background-color: #fff;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            background-color: white;
             display: flex;
             flex-direction: column;
             box-sizing: border-box;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
         }
 
         .chat-header {
-            background-color: #0288d1;
+            background: linear-gradient(45deg, #0288d1, #03a9f4);
             color: white;
             padding: 12px;
             text-align: center;
-            font-size: 20px;
-            font-weight: bold;
+            font-size: 1.25rem;
             flex-shrink: 0;
-            border-radius: 10px 10px 0 0;
         }
 
         .chat-messages {
@@ -52,13 +49,12 @@
             border-radius: 8px;
             max-width: 80%;
             word-wrap: break-word;
-            font-size: 14px;
-            line-height: 1.4;
+            font-size: 0.875rem;
+            animation: slideIn 0.3s ease;
         }
 
         .bot-message {
             background-color: #e3f2fd;
-            margin-right: 10%;
         }
 
         .user-message {
@@ -67,36 +63,41 @@
             text-align: right;
         }
 
+        @keyframes slideIn {
+            from { transform: translateY(20px); opacity: 0; }
+            to { transform: translateY(0); opacity: 1; }
+        }
+
         .chat-input {
             display: flex;
             padding: 10px;
-            border-top: 1px solid #ddd;
+            border-top: 1px solid #ccc;
             flex-shrink: 0;
-            background-color: #fff;
+            background-color: white;
             box-sizing: border-box;
         }
 
         .chat-input input {
             flex: 1;
-            padding: 10px;
+            padding: 8px;
             border: 1px solid #ccc;
             border-radius: 8px;
-            font-size: 14px;
+            font-size: 0.875rem;
             min-height: 40px;
             box-sizing: border-box;
         }
 
         .chat-input button {
-            padding: 10px 16px;
-            margin-left: 10px;
+            padding: 8px 12px;
+            margin-left: 8px;
             background-color: #ff8f00;
             color: white;
             border: none;
             border-radius: 8px;
             cursor: pointer;
-            font-size: 14px;
+            font-size: 0.875rem;
             min-height: 40px;
-            min-width: 80px;
+            min-width: 70px;
         }
 
         .chat-input button:hover {
@@ -105,10 +106,10 @@
 
         .items-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
             gap: 12px;
-            padding: 10px;
-            margin: 10px 0;
+            padding: 12px;
+            margin: 8px 0;
             background-color: #f9f9f9;
             border-radius: 8px;
         }
@@ -117,33 +118,39 @@
             background-color: white;
             border: 1px solid #ddd;
             border-radius: 8px;
-            padding: 10px;
-            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-            transition: transform 0.2s;
+            padding: 12px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
         }
 
         .item-card:hover {
-            transform: translateY(-3px);
+            transform: scale(1.05);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
         }
 
         .item-image {
             width: 100%;
             height: 120px;
             object-fit: cover;
-            border-radius: 6px;
+            border-radius: 8px;
             margin-bottom: 8px;
+            loading: lazy;
+        }
+
+        .item-content {
+            width: 100%;
         }
 
         .item-name {
-            font-size: 16px;
+            font-size: 0.875rem;
             font-weight: bold;
             color: #333;
-            margin-bottom: 6px;
+            margin-bottom: 5px;
         }
 
         .item-field {
-            font-size: 12px;
-            margin: 4px 0;
+            font-size: 0.75rem;
+            margin: 3px 0;
             color: #555;
         }
 
@@ -151,134 +158,242 @@
             color: #0288d1;
         }
 
+        .item-description {
+            font-size: 0.75rem;
+            margin: 5px 0;
+            color: #555;
+        }
+
+        .button-container {
+            display: flex;
+            gap: 8px;
+            margin-top: 8px;
+        }
+
+        .show-button, .add-button {
+            padding: 6px;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 0.75rem;
+            flex: 1;
+            min-width: 50px;
+        }
+
+        .show-button {
+            background-color: #0288d1;
+            color: white;
+        }
+
+        .show-button:hover {
+            background-color: #0277bd;
+        }
+
         .add-button {
-            width: 100%;
-            padding: 8px;
             background-color: #4caf50;
             color: white;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 14px;
-            margin-top: 8px;
         }
 
         .add-button:hover {
             background-color: #45a049;
         }
 
+        .options-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin: 8px 0;
+        }
+
+        .option-button {
+            padding: 8px 12px;
+            background-color: #7b1fa2;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 0.875rem;
+            min-width: 70px;
+        }
+
+        .option-button.green { background-color: #4caf50; }
+        .option-button.red { background-color: #d32f2f; }
+        .option-button.gray { background-color: #616161; }
+        .option-button:hover { opacity: 0.9; }
+
         .selection-box {
             background-color: #e1f5fe;
-            padding: 10px;
+            padding: 12px;
             border: 1px solid #0288d1;
             border-radius: 8px;
-            margin: 10px 0;
-            font-size: 14px;
+            margin: 8px 0;
+            font-size: 0.875rem;
             display: flex;
             flex-wrap: wrap;
-            gap: 8px;
             align-items: center;
+            gap: 8px;
+            position: relative;
+        }
+
+        .selection-box::before {
+            content: "Selected Items";
+            position: sticky;
+            top: 0;
+            background: #0288d1;
+            color: white;
+            padding: 8px;
+            border-radius: 8px 8px 0 0;
+            font-size: 0.875rem;
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        .selection-box span {
+            background-color: #bbdefb;
+            padding: 4px 10px;
+            border-radius: 8px;
+            font-size: 0.875rem;
         }
 
         .selected-item {
             display: flex;
             align-items: center;
             background-color: #bbdefb;
-            padding: 6px 10px;
-            border-radius: 6px;
-            font-size: 13px;
+            padding: 4px 10px;
+            border-radius: 8px;
+            font-size: 0.75rem;
         }
 
         .selected-item-image {
             width: 30px;
             height: 30px;
             object-fit: cover;
-            border-radius: 6px;
+            border-radius: 8px;
             margin-right: 8px;
+            loading: lazy;
         }
 
-        .remove-button {
-            padding: 4px 8px;
-            margin-left: 8px;
-            background-color: #d32f2f;
+        .submit-button {
+            padding: 8px 12px;
+            background-color: #0288d1;
             color: white;
             border: none;
-            border-radius: 6px;
+            border-radius: 8px;
             cursor: pointer;
-            font-size: 12px;
+            font-size: 0.875rem;
+            min-width: 70px;
         }
 
-        .remove-button:hover {
-            background-color: #b71c1c;
+        .submit-button:hover {
+            background-color: #0277bd;
         }
 
-        .submit-button {
-            padding: 10px 16px;
-            background-color: #0288d1;
+        .remove-button {
+            padding: 4px 8px;
+            margin-left: 8px;
+            background-color: #d32f2f;
             color: white;
             border: none;
             border-radius: 8px;
             cursor: pointer;
-            font-size: 14px;
-            min-width: 80px;
+            font-size: 0.75rem;
         }
 
-        .submit-button:hover {
-            background-color: #0277bd;
+        .remove-button:hover {
+            background-color: #b71c1c;
         }
 
         .manual-input, .order-name-input {
-            padding: 8px;
+            padding: 6px;
             border: 1px solid #0288d1;
-            border-radius: 6px;
-            font-size: 14px;
+            border-radius: 8px;
+            font-size: 0.875rem;
             width: 120px;
         }
 
         .quantity-input {
-            padding: 8px;
+            padding: 6px;
             border: 1px solid #0288d1;
-            border-radius: 6px;
-            font-size: 14px;
+            border-radius: 8px;
+            font-size: 0.875rem;
             width: 60px;
         }
 
+        .spinner {
+            border: 4px solid #0288d1;
+            border-top: 4px solid transparent;
+            border-radius: 50%;
+            width: 24px;
+            height: 24px;
+            animation: spin 1s linear infinite;
+            margin: 10px auto;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .toast {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: #4caf50;
+            color: white;
+            padding: 10px;
+            border-radius: 8px;
+            font-size: 0.875rem;
+            animation: fadeInOut 3s ease forwards;
+            z-index: 1000;
+        }
+
+        @keyframes fadeInOut {
+            0% { opacity: 0; transform: translateY(20px); }
+            10%, 90% { opacity: 1; transform: translateY(0); }
+            100% { opacity: 0; transform: translateY(20px); }
+        }
+
         @media (max-width: 480px) {
             .chat-container {
                 border-radius: 0;
-                box-shadow: none;
+                height: calc(100vh - env(safe-area-inset-bottom));
             }
 
             .chat-header {
-                font-size: 16px;
-                padding: 10px;
+                font-size: 1rem;
+                padding: 8px;
             }
 
             .chat-messages {
-                padding: 8px;
+                padding: 6px;
             }
 
             .bot-message, .user-message {
-                font-size: 12px;
+                font-size: 0.75rem;
                 padding: 8px;
                 margin: 6px 0;
             }
 
             .chat-input input {
-                font-size: 12px;
+                font-size: 0.75rem;
                 min-height: 36px;
+                padding: 6px;
             }
 
             .chat-input button {
-                font-size: 12px;
+                font-size: 0.75rem;
                 min-height: 36px;
-                padding: 8px 12px;
-                min-width: 70px;
+                padding: 6px 10px;
+                min-width: 60px;
             }
 
             .items-grid {
-                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-                gap: 10px;
+                grid-template-columns: 1fr;
+                gap: 8px;
+                padding: 8px;
+            }
+
+            .item-card {
+                max-width: 100%;
             }
 
             .item-image {
@@ -286,16 +401,29 @@
             }
 
             .item-name {
-                font-size: 14px;
+                font-size: 0.75rem;
             }
 
-            .item-field {
-                font-size: 11px;
+            .item-field, .item-description {
+                font-size: 0.625rem;
             }
 
-            .add-button {
-                font-size: 12px;
-                padding: 6px;
+            .show-button, .add-button {
+                font-size: 0.625rem;
+                padding: 4px;
+                min-width: 40px;
+            }
+
+            .options-container {
+                flex-direction: column;
+                align-items: stretch;
+                gap: 6px;
+            }
+
+            .option-button {
+                font-size: 0.75rem;
+                padding: 6px 10px;
+                min-width: 100%;
             }
 
             .selection-box {
@@ -303,29 +431,164 @@
                 gap: 6px;
             }
 
+            .selection-box::before {
+                font-size: 0.75rem;
+                padding: 6px;
+            }
+
+            .selection-box span {
+                font-size: 0.75rem;
+                padding: 3px 8px;
+            }
+
             .selected-item {
-                font-size: 12px;
-                padding: 4px 8px;
+                font-size: 0.625rem;
+                padding: 3px 8px;
             }
 
             .selected-item-image {
-                width: 25px;
-                height: 25px;
+                width: 24px;
+                height: 24px;
+            }
+
+            .submit-button {
+                font-size: 0.75rem;
+                padding: 6px 10px;
+                min-width: 60px;
             }
 
             .remove-button {
-                font-size: 10px;
+                font-size: 0.625rem;
                 padding: 3px 6px;
             }
 
             .manual-input, .order-name-input {
                 width: 100px;
-                font-size: 12px;
+                font-size: 0.75rem;
+                padding: 4px;
             }
 
             .quantity-input {
                 width: 50px;
-                font-size: 12px;
+                font-size: 0.75rem;
+                padding: 4px;
+            }
+        }
+
+        @media (min-width: 481px) and (max-width: 768px) {
+            .chat-container {
+                max-width: 100%;
+            }
+
+            .chat-header {
+                font-size: 1.125rem;
+            }
+
+            .chat-messages {
+                padding: 8px;
+            }
+
+            .bot-message, .user-message {
+                font-size: 0.875rem;
+                padding: 9px;
+            }
+
+            .chat-input input {
+                font-size: 0.875rem;
+                min-height: 38px;
+            }
+
+            .chat-input button {
+                font-size: 0.875rem;
+                min-height: 38px;
+                padding: 7px 11px;
+            }
+
+            .items-grid {
+                grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+                gap: 10px;
+            }
+
+            .item-image {
+                height: 110px;
+            }
+
+            .item-name {
+                font-size: 0.875rem;
+            }
+
+            .item-field, .item-description {
+                font-size: 0.75rem;
+            }
+
+            .show-button, .add-button {
+                font-size: 0.75rem;
+                padding: 5px;
+                min-width: 45px;
+            }
+
+            .option-button {
+                font-size: 0.875rem;
+                padding: 7px 11px;
+            }
+
+            .selection-box {
+                padding: 10px;
+                gap: 7px;
+            }
+
+            .selection-box span {
+                font-size: 0.875rem;
+            }
+
+            .selected-item {
+                font-size: 0.75rem;
+            }
+
+            .selected-item-image {
+                width: 28px;
+                height: 28px;
+            }
+
+            .submit-button {
+                font-size: 0.875rem;
+                padding: 7px 11px;
+            }
+
+            .remove-button {
+                font-size: 0.75rem;
+                padding: 4px 7px;
+            }
+
+            .manual-input, .order-name-input {
+                width: 110px;
+                font-size: 0.875rem;
+            }
+
+            .quantity-input {
+                width: 55px;
+                font-size: 0.875rem;
+            }
+        }
+
+        @media (min-width: 769px) {
+            .chat-container {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 10px;
+            }
+
+            .chat-messages, .chat-input {
+                grid-column: 1 / 2;
+            }
+
+            .suggestions-list, .ingredients-list {
+                grid-column: 2 / 3;
+            }
+
+            .selection-box {
+                grid-column: 2 / 3;
+                grid-row: 1 / 3;
             }
         }
     </style>
@@ -333,12 +596,14 @@
 <body>
     <div class="chat-container">
         <div class="chat-header">🍳 Chef Bot</div>
-        <div class="chat-messages" id="chatMessages">
+        <div class="chat-messages" id="chatMessages" role="log" aria-live="polite">
             <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., chicken, paneer)...">
-            <button onclick="sendMessage()">Send</button>
+            <input type="text" id="userInput" placeholder="Type here (e.g., paneer, chicken)..." aria-label="Enter dish or preference">
+            <button onclick="sendMessage()" aria-label="Send message">Send</button>
         </div>
     </div>
     <script>
@@ -346,25 +611,46 @@
             { role: 'bot', message: 'Hello! I’m Chef Bot, your culinary assistant! What’s your name?' }
         ];
         let selectedItems = [];
+        let selectionBoxVisible = false;
 
         function addMessage(role, message) {
             const chatMessages = document.getElementById('chatMessages');
+            if (!chatMessages) {
+                console.error('Chat messages container not found!');
+                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 showToast(message) {
+            const toast = document.createElement('div');
+            toast.className = 'toast';
+            toast.textContent = message;
+            document.body.appendChild(toast);
+            setTimeout(() => toast.remove(), 3000);
         }
 
         function sendMessage() {
             const userInput = document.getElementById('userInput');
+            if (!userInput) {
+                console.error('User input field not found!');
+                return;
+            }
             const message = userInput.value.trim();
             if (message) {
                 addMessage('user', message);
-                conversation.push({ role: 'user', message });
+                conversation.push({ role: 'user', message: message });
+                selectionBoxVisible = true;
                 handleResponse(message);
+                showToast(`Sent: "${message}"`);
             } else {
-                addMessage('bot', 'Please type a dish or ingredient! 😄');
+                addMessage('bot', 'Please type a dish or preference! 😄');
+                showToast('Input is empty!');
             }
             userInput.value = '';
             updateSelectionBox();
@@ -375,83 +661,271 @@
             let botResponse = '';
 
             if (conversation.length === 2) {
-                botResponse = `Hi ${userInput}! 🍳 Search for a dish or ingredient (e.g., chicken)!`;
+                botResponse = `Hi ${userInput}! 🍳 Search for a dish or choose a preference below!`;
+                displayOptions([
+                    { text: 'Vegetarian', class: 'green' },
+                    { text: 'Non-Vegetarian', class: 'red' },
+                    { text: 'Both', class: 'gray' }
+                ]);
                 addMessage('bot', botResponse);
+            } else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian' || lowerInput === 'both') {
+                botResponse = `Fetching ${lowerInput} dishes...`;
+                addMessage('bot', botResponse);
+                fetchMenuItems(lowerInput);
             } else {
-                botResponse = `Looking for "${userInput}" dishes...`;
+                botResponse = `Looking for "${userInput}"...`;
                 addMessage('bot', botResponse);
                 fetchMenuItems(null, userInput);
             }
         }
 
-        function fetchMenuItems(dietaryPreference = '', searchTerm = '') {
-            // Mock API response for chicken
-            const mockData = {
-                menu_items: [
-                    {
-                        name: 'Chicken Curry',
-                        image_url: 'https://example.com/chicken_curry.jpg',
-                        category: 'Main Course',
-                        description: 'Spicy chicken curry with rich flavors.',
-                        source: 'Menu',
-                        price: 12.99,
-                        veg_nonveg: 'Non-Vegetarian',
-                        spice_levels: 'Medium',
-                        ingredients: 'Chicken, spices, tomatoes',
-                        nutritional_info: '500 kcal',
-                        sector: 'Indian'
-                    },
-                    {
-                        name: 'Grilled Chicken',
-                        image_url: 'https://example.com/grilled_chicken.jpg',
-                        category: 'Main Course',
-                        description: 'Juicy grilled chicken breast.',
-                        source: 'Menu',
-                        price: 10.99,
-                        veg_nonveg: 'Non-Vegetarian',
-                        spice_levels: 'Low',
-                        ingredients: 'Chicken, herbs',
-                        nutritional_info: '400 kcal',
-                        sector: 'Western'
-                    }
-                ]
+        function debounce(func, wait) {
+            let timeout;
+            return function (...args) {
+                clearTimeout(timeout);
+                timeout = setTimeout(() => func.apply(this, args), wait);
             };
+        }
+
+        function updateSelectionBox() {
+            const chatMessages = document.getElementById('chatMessages');
+            if (!chatMessages) return;
+
+            const existingBox = document.querySelector('.selection-box');
+            if (existingBox) existingBox.remove();
+
+            if (!selectionBoxVisible && selectedItems.length === 0) return;
+
+            const selectionBox = document.createElement('div');
+            selectionBox.className = 'selection-box';
+
+            const clearAllButton = document.createElement('button');
+            clearAllButton.textContent = 'Clear All';
+            clearAllButton.className = 'remove-button';
+            clearAllButton.onclick = () => {
+                selectedItems = [];
+                addMessage('bot', 'Cleared all items.');
+                showToast('All items cleared!');
+                updateSelectionBox();
+            };
+            selectionBox.appendChild(clearAllButton);
+
+            const vegButton = document.createElement('button');
+            vegButton.textContent = 'Veg';
+            vegButton.className = 'option-button green';
+            vegButton.onclick = () => {
+                addMessage('user', 'Vegetarian');
+                conversation.push({ role: 'user', message: 'Vegetarian' });
+                handleResponse('vegetarian');
+                showToast('Selected Vegetarian');
+            };
+            selectionBox.appendChild(vegButton);
+
+            const nonVegButton = document.createElement('button');
+            nonVegButton.textContent = 'Non-Veg';
+            nonVegButton.className = 'option-button red';
+            nonVegButton.onclick = () => {
+                addMessage('user', 'Non-Vegetarian');
+                conversation.push({ role: 'user', message: 'Non-Vegetarian' });
+                handleResponse('non-vegetarian');
+                showToast('Selected Non-Vegetarian');
+            };
+            selectionBox.appendChild(nonVegButton);
+
+            const bothButton = document.createElement('button');
+            bothButton.textContent = 'Both';
+            bothButton.className = 'option-button gray';
+            bothButton.onclick = () => {
+                addMessage('user', 'Both');
+                conversation.push({ role: 'user', message: 'Both' });
+                handleResponse('both');
+                showToast('Selected 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 data = mockData;
-            if (data.menu_items.length > 0) {
-                addMessage('bot', `--- Found ${data.menu_items.length} item${data.menu_items.length > 1 ? 's' : ''} ---`);
-                displayItemsList(data.menu_items);
-                if (searchTerm.toLowerCase() === 'chicken') {
-                    fetchSectorItemDetails(searchTerm);
+                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);
                 }
-            } else {
-                addMessage('bot', `No matches for "${searchTerm}". Try "chicken"!`);
+
+                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}".`);
+                    showToast(`Removed "${item.name}"`);
+                    updateSelectionBox();
+                };
+                itemContainer.appendChild(removeButton);
+
+                selectionBox.appendChild(itemContainer);
+            });
+
+            const textInput = document.createElement('input');
+            textInput.type = 'text';
+            textInput.placeholder = 'Add item...';
+            textInput.className = 'manual-input';
+            textInput.addEventListener('keypress', debounce((e) => {
+                if (e.key === 'Enter' && textInput.value.trim()) {
+                    const itemName = textInput.value.trim();
+                    fetchSectorItemDetails(itemName);
+                    textInput.value = '';
+                    showToast(`Searching for "${itemName}"...`);
+                }
+            }, 300));
+            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);
             }
+
+            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;
+
+            const chatMessages = document.getElementById('chatMessages');
+            const spinner = document.createElement('div');
+            spinner.className = 'spinner';
+            chatMessages.appendChild(spinner);
+
+            fetch('/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) {
+                        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...`);
+                    showToast('Connection issue!');
+                    setTimeout(() => fetchMenuItems(dietaryPreference, searchTerm), 2000);
+                });
         }
 
         function fetchSectorItemDetails(itemName) {
-            // Mock sector item details for chicken
-            const mockSectorData = {
-                item_details: {
-                    name: 'Chicken Masala Powder',
-                    image_url: 'https://example.com/masala.jpg',
-                    category: 'Spice',
-                    description: 'Perfect spice mix for chicken dishes.',
-                    source: 'Sector_Detail__c',
-                    quantity: 1
-                }
-            };
+            fetch('/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 {
+                        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();
+                        }
+                    }
+                })
+                .catch(error => {
+                    addMessage('bot', `Error for "${itemName}". Retrying...`);
+                    showToast(`Error fetching "${itemName}"`);
+                    setTimeout(() => fetchSectorItemDetails(itemName), 2000);
+                });
+        }
 
-            const details = mockSectorData.item_details;
-            if (!selectedItems.some(item => item.name === details.name)) {
-                selectedItems.push({ ...details, quantity: 1 });
-                addMessage('bot', `Added complementary "${details.name}"!`);
-                updateSelectionBox();
+        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}`);
+                showToast(`Showing details for ${itemName}`);
+            } else {
+                descElement.remove();
+                itemContainer.dataset.hidden = 'true';
+                console.log(`Hid description for ${itemName}`);
+                showToast(`Hid details 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?');
+                showToast('Display issue!');
+                return;
+            }
+
             const itemsGrid = document.createElement('div');
             itemsGrid.className = 'items-grid';
 
@@ -465,40 +939,70 @@
                 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';
-                itemDiv.appendChild(nameDiv);
+                contentDiv.appendChild(nameDiv);
 
                 const fields = [
                     { label: 'Price', value: item.price ? `$${item.price.toFixed(2)}` : 'N/A' },
-                    { label: 'Category', value: item.category },
+                    { label: 'Veg/Non-Veg', value: item.veg_nonveg },
                     { label: 'Spice', value: item.spice_levels },
-                    { label: 'Ingredients', value: item.ingredients }
+                    { 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}`;
-                        itemDiv.appendChild(p);
+                        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 = () => {
-                    if (!selectedItems.some(existing => existing.name === item.name)) {
-                        selectedItems.push({ ...item, quantity: 1 });
-                        addMessage('bot', `Added "${item.name}"!`);
-                        updateSelectionBox();
+                    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)) {
+                        addMessage('bot', `"${selectedItem.name}" already selected!`);
+                        showToast(`"${selectedItem.name}" already selected`);
                     } else {
-                        addMessage('bot', `"${item.name}" already selected!`);
+                        selectedItems.push(selectedItem);
+                        addMessage('bot', `Added "${selectedItem.name}"!`);
+                        showToast(`Added "${selectedItem.name}"`);
+                        updateSelectionBox();
                     }
                 };
-                itemDiv.appendChild(addButton);
+                buttonContainer.appendChild(addButton);
 
+                itemDiv.appendChild(buttonContainer);
                 itemsGrid.appendChild(itemDiv);
             });
 
@@ -506,62 +1010,116 @@
             chatMessages.scrollTop = chatMessages.scrollHeight;
         }
 
-        function updateSelectionBox() {
+        function displayOptions(options) {
             const chatMessages = document.getElementById('chatMessages');
-            const existingBox = document.querySelector('.selection-box');
-            if (existingBox) existingBox.remove();
-
-            if (selectedItems.length === 0) return;
-
-            const selectionBox = document.createElement('div');
-            selectionBox.className = 'selection-box';
-
-            selectedItems.forEach((item, index) => {
-                const itemContainer = document.createElement('div');
-                itemContainer.className = 'selected-item';
+            if (!chatMessages) {
+                console.error('Chat messages container not found!');
+                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();
+                    showToast(`Selected ${opt.text}`);
+                };
+                optionsDiv.appendChild(button);
+            });
 
-                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 backButton = document.createElement('button');
+            backButton.textContent = 'Back';
+            backButton.className = 'option-button';
+            backButton.onclick = () => resetConversation();
+            optionsDiv.appendChild(backButton);
 
-                const itemSpan = document.createElement('span');
-                itemSpan.textContent = `${item.name} (Qty: ${item.quantity})`;
-                itemContainer.appendChild(itemSpan);
+            chatMessages.appendChild(optionsDiv);
+        }
 
-                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);
+        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);
+                showToast('Submitting order...');
+            } else {
+                addMessage('bot', 'Cancelled. Add more items?');
+                showToast('Order cancelled');
+            }
+        }
 
-                selectionBox.appendChild(itemContainer);
-            });
+        function submitToSalesforce(customOrderName, quantity) {
+            if (selectedItems.length === 0) {
+                addMessage('bot', 'No items selected! Add some dishes! 😊');
+                showToast('No items selected');
+                return;
+            }
 
-            const submitButton = document.createElement('button');
-            submitButton.textContent = 'Submit Order';
-            submitButton.className = 'submit-button';
-            submitButton.onclick = () => {
-                if (selectedItems.length > 0) {
-                    addMessage('bot', `Order submitted with ${selectedItems.length} items!`);
-                    selectedItems = [];
-                    updateSelectionBox();
-                }
-            };
-            selectionBox.appendChild(submitButton);
+            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
+            }));
+
+            fetch('/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?`);
+                        selectedItems = [];
+                        updateSelectionBox();
+                        showToast('Order submitted!');
+                    }
+                })
+                .catch(error => {
+                    addMessage('bot', `Submission error: ${error.message}. Retrying...`);
+                    showToast('Submission error!');
+                    setTimeout(() => submitToSalesforce(customOrderName, quantity), 2000);
+                });
+        }
 
-            chatMessages.appendChild(selectionBox);
-            chatMessages.scrollTop = chatMessages.scrollHeight;
+        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();
+            showToast('Conversation reset');
         }
 
         document.getElementById('userInput').addEventListener('keypress', (e) => {
             if (e.key === 'Enter') sendMessage();
         });
+
+        console.log('Chef Bot script loaded!');
     </script>
 </body>
 </html>