Update templates/index.html

templates/index.html

@@ -4,7 +4,331 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chef Bot</title>
-    <link rel="stylesheet" href="/static/styles.css">
+    <style>
+        body {
+            font-family: 'Segoe UI', Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f4f6f8;
+            overflow-x: hidden;
+        }
+
+        .chat-container {
+            width: 100%;
+            max-width: 800px;
+            height: 100vh;
+            margin: 0 auto;
+            border: 1px solid #ddd;
+            border-radius: 10px;
+            background-color: #fff;
+            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;
+            color: white;
+            padding: 12px;
+            text-align: center;
+            font-size: 20px;
+            font-weight: bold;
+            flex-shrink: 0;
+            border-radius: 10px 10px 0 0;
+        }
+
+        .chat-messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 10px;
+            box-sizing: border-box;
+            scroll-behavior: smooth;
+        }
+
+        .bot-message, .user-message {
+            padding: 10px;
+            margin: 8px 0;
+            border-radius: 8px;
+            max-width: 80%;
+            word-wrap: break-word;
+            font-size: 14px;
+            line-height: 1.4;
+        }
+
+        .bot-message {
+            background-color: #e3f2fd;
+            margin-right: 10%;
+        }
+
+        .user-message {
+            background-color: #ffebee;
+            margin-left: auto;
+            text-align: right;
+        }
+
+        .chat-input {
+            display: flex;
+            padding: 10px;
+            border-top: 1px solid #ddd;
+            flex-shrink: 0;
+            background-color: #fff;
+            box-sizing: border-box;
+        }
+
+        .chat-input input {
+            flex: 1;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 8px;
+            font-size: 14px;
+            min-height: 40px;
+            box-sizing: border-box;
+        }
+
+        .chat-input button {
+            padding: 10px 16px;
+            margin-left: 10px;
+            background-color: #ff8f00;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            min-height: 40px;
+            min-width: 80px;
+        }
+
+        .chat-input button:hover {
+            background-color: #f57c00;
+        }
+
+        .items-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 12px;
+            padding: 10px;
+            margin: 10px 0;
+            background-color: #f9f9f9;
+            border-radius: 8px;
+        }
+
+        .item-card {
+            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;
+        }
+
+        .item-card:hover {
+            transform: translateY(-3px);
+        }
+
+        .item-image {
+            width: 100%;
+            height: 120px;
+            object-fit: cover;
+            border-radius: 6px;
+            margin-bottom: 8px;
+        }
+
+        .item-name {
+            font-size: 16px;
+            font-weight: bold;
+            color: #333;
+            margin-bottom: 6px;
+        }
+
+        .item-field {
+            font-size: 12px;
+            margin: 4px 0;
+            color: #555;
+        }
+
+        .item-field strong {
+            color: #0288d1;
+        }
+
+        .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;
+        }
+
+        .selection-box {
+            background-color: #e1f5fe;
+            padding: 10px;
+            border: 1px solid #0288d1;
+            border-radius: 8px;
+            margin: 10px 0;
+            font-size: 14px;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            align-items: center;
+        }
+
+        .selected-item {
+            display: flex;
+            align-items: center;
+            background-color: #bbdefb;
+            padding: 6px 10px;
+            border-radius: 6px;
+            font-size: 13px;
+        }
+
+        .selected-item-image {
+            width: 30px;
+            height: 30px;
+            object-fit: cover;
+            border-radius: 6px;
+            margin-right: 8px;
+        }
+
+        .remove-button {
+            padding: 4px 8px;
+            margin-left: 8px;
+            background-color: #d32f2f;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-size: 12px;
+        }
+
+        .remove-button:hover {
+            background-color: #b71c1c;
+        }
+
+        .submit-button {
+            padding: 10px 16px;
+            background-color: #0288d1;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            min-width: 80px;
+        }
+
+        .submit-button:hover {
+            background-color: #0277bd;
+        }
+
+        .manual-input, .order-name-input {
+            padding: 8px;
+            border: 1px solid #0288d1;
+            border-radius: 6px;
+            font-size: 14px;
+            width: 120px;
+        }
+
+        .quantity-input {
+            padding: 8px;
+            border: 1px solid #0288d1;
+            border-radius: 6px;
+            font-size: 14px;
+            width: 60px;
+        }
+
+        @media (max-width: 480px) {
+            .chat-container {
+                border-radius: 0;
+                box-shadow: none;
+            }
+
+            .chat-header {
+                font-size: 16px;
+                padding: 10px;
+            }
+
+            .chat-messages {
+                padding: 8px;
+            }
+
+            .bot-message, .user-message {
+                font-size: 12px;
+                padding: 8px;
+                margin: 6px 0;
+            }
+
+            .chat-input input {
+                font-size: 12px;
+                min-height: 36px;
+            }
+
+            .chat-input button {
+                font-size: 12px;
+                min-height: 36px;
+                padding: 8px 12px;
+                min-width: 70px;
+            }
+
+            .items-grid {
+                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+                gap: 10px;
+            }
+
+            .item-image {
+                height: 100px;
+            }
+
+            .item-name {
+                font-size: 14px;
+            }
+
+            .item-field {
+                font-size: 11px;
+            }
+
+            .add-button {
+                font-size: 12px;
+                padding: 6px;
+            }
+
+            .selection-box {
+                padding: 8px;
+                gap: 6px;
+            }
+
+            .selected-item {
+                font-size: 12px;
+                padding: 4px 8px;
+            }
+
+            .selected-item-image {
+                width: 25px;
+                height: 25px;
+            }
+
+            .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;
+            }
+        }
+    </style>
 </head>
 <body>
     <div class="chat-container">
@@ -12,13 +336,232 @@
         <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)...">
+            <input type="text" id="userInput" placeholder="Type here (e.g., chicken, paneer)...">
             <button onclick="sendMessage()">Send</button>
         </div>
     </div>
-    <script src="/static/script.js"></script>
+    <script>
+        let conversation = [
+            { role: 'bot', message: 'Hello! I’m Chef Bot, your culinary assistant! What’s your name?' }
+        ];
+        let selectedItems = [];
+
+        function addMessage(role, message) {
+            const chatMessages = document.getElementById('chatMessages');
+            const messageDiv = document.createElement('div');
+            messageDiv.className = role === 'bot' ? 'bot-message' : 'user-message';
+            messageDiv.textContent = message;
+            chatMessages.appendChild(messageDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+
+        function sendMessage() {
+            const userInput = document.getElementById('userInput');
+            const message = userInput.value.trim();
+            if (message) {
+                addMessage('user', message);
+                conversation.push({ role: 'user', message });
+                handleResponse(message);
+            } else {
+                addMessage('bot', 'Please type a dish or ingredient! 😄');
+            }
+            userInput.value = '';
+            updateSelectionBox();
+        }
+
+        function handleResponse(userInput) {
+            const lowerInput = userInput.toLowerCase();
+            let botResponse = '';
+
+            if (conversation.length === 2) {
+                botResponse = `Hi ${userInput}! 🍳 Search for a dish or ingredient (e.g., chicken)!`;
+                addMessage('bot', botResponse);
+            } else {
+                botResponse = `Looking for "${userInput}" dishes...`;
+                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'
+                    }
+                ]
+            };
+
+            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);
+                }
+            } else {
+                addMessage('bot', `No matches for "${searchTerm}". Try "chicken"!`);
+            }
+        }
+
+        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
+                }
+            };
+
+            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 displayItemsList(items) {
+            const chatMessages = document.getElementById('chatMessages');
+            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/120';
+                img.alt = item.name;
+                img.className = 'item-image';
+                itemDiv.appendChild(img);
+
+                const nameDiv = document.createElement('div');
+                nameDiv.textContent = item.name;
+                nameDiv.className = 'item-name';
+                itemDiv.appendChild(nameDiv);
+
+                const fields = [
+                    { label: 'Price', value: item.price ? `$${item.price.toFixed(2)}` : 'N/A' },
+                    { label: 'Category', value: item.category },
+                    { label: 'Spice', value: item.spice_levels },
+                    { label: 'Ingredients', value: item.ingredients }
+                ];
+                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);
+                    }
+                });
+
+                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();
+                    } else {
+                        addMessage('bot', `"${item.name}" already selected!`);
+                    }
+                };
+                itemDiv.appendChild(addButton);
+
+                itemsGrid.appendChild(itemDiv);
+            });
+
+            chatMessages.appendChild(itemsGrid);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+
+        function updateSelectionBox() {
+            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';
+
+                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 itemSpan = document.createElement('span');
+                itemSpan.textContent = `${item.name} (Qty: ${item.quantity})`;
+                itemContainer.appendChild(itemSpan);
+
+                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 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);
+
+            chatMessages.appendChild(selectionBox);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+
+        document.getElementById('userInput').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') sendMessage();
+        });
+    </script>
 </body>
 </html>