Update app.py

app.py

@@ -1,76 +1,193 @@
-from flask import Flask, render_template, request, jsonify
-from simple_salesforce import Salesforce
-from dotenv import load_dotenv
-import os
-import logging
+let conversation = [
+    { role: 'bot', message: 'Hi there! I\'m Chef Bot! May I know your name?' }
+];
+let selectedIngredients = [];
 
-# Load environment variables from .env file
-load_dotenv()
+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 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: message });
+        userInput.value = '';
+        setTimeout(() => handleResponse(message), 500);
+    } else {
+        console.warn('Empty message!');
+    }
+}
+
+function handleResponse(userInput) {
+    const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
+    let botResponse = '';
+    let options = [];
+
+    if (conversation.length === 2) { // After name input
+        botResponse = `Nice to meet you, ${userInput}! 😊 Let's create your perfect meal! What type of food would you prefer?`;
+        options = [
+            { text: 'Vegetarian', class: 'green' },
+            { text: 'Non-Vegetarian', class: 'red' },
+            { text: 'Both', class: 'gray' }
+        ];
+    } else if (lastMessage.includes('vegetarian') || lastMessage.includes('non-vegetarian') || lastMessage.includes('both')) {
+        botResponse = `Great choice! 🍽️ These are the available ingredients for ${lastMessage} (including any "Both" category):`;
+        fetchIngredients(lastMessage.toLowerCase());
+        return;
+    }
 
-# Set up logging
-logging.basicConfig(level=logging.INFO)
-logger = logging.getLogger(__name__)
+    addMessage('bot', botResponse);
+    if (options.length > 0) {
+        displayOptions(options);
+    }
+}
 
-app = Flask(__name__, template_folder='templates', static_folder='static')
+function fetchIngredients(dietaryPreference) {
+    fetch('/get_ingredients', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ dietary_preference: dietaryPreference })
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.error) {
+            addMessage('bot', `Sorry, there was an error fetching ingredients: ${data.error}`);
+        } else {
+            const ingredients = data.ingredients || [];
+            addMessage('bot', 'Great choice! These are available ingredients:');
+            displayIngredientsList(ingredients);
+            displaySelectedIngredients();
+            // Log ingredients to console for debugging
+            console.log(`Ingredients fetched for ${dietaryPreference}:`, ingredients);
+        }
+    })
+    .catch(error => {
+        addMessage('bot', `Error: Unable to connect to the ingredient database. ${error.message}`);
+    });
+}
 
-# Function to get Salesforce connection
-def get_salesforce_connection():
-    try:
-        sf = Salesforce(
-            username=os.getenv('SFDC_USERNAME'),
-            password=os.getenv('SFDC_PASSWORD'),
-            security_token=os.getenv('SFDC_SECURITY_TOKEN'),
-            domain=os.getenv('SFDC_DOMAIN', 'login')
-        )
-        logger.info("Successfully connected to Salesforce")
-        return sf
-    except Exception as e:
-        logger.error(f"Error connecting to Salesforce: {e}")
-        return None
+function displayIngredientsList(ingredients) {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) {
+        console.error('Chat messages container not found for ingredients!');
+        return;
+    }
 
-# Initialize Salesforce connection
-sf = get_salesforce_connection()
+    let ingredientsList = document.querySelector('.ingredients-list');
+    if (!ingredientsList) {
+        ingredientsList = document.createElement('div');
+        ingredientsList.className = 'ingredients-list';
+        chatMessages.appendChild(ingredientsList);
+    } else {
+        ingredientsList.innerHTML = '';
+    }
 
-@app.route('/')
-def index():
-    return render_template('index.html')
+    ingredients.forEach(ingredient => {
+        const item = document.createElement('div');
+        item.className = 'ingredient-item';
+        const img = document.createElement('img');
+        img.src = ingredient.image_url || 'https://via.placeholder.com/80';
+        img.alt = ingredient.name;
+        const name = document.createElement('div');
+        name.textContent = ingredient.name; // Removed category from display
+        name.style.textAlign = 'center';
+        name.style.marginTop = '5px';
+        name.style.fontSize = '12px';
+        const button = document.createElement('button');
+        button.textContent = 'Add';
+        button.onclick = () => {
+            if (!selectedIngredients.some(item => item.name === ingredient.name)) {
+                selectedIngredients.push(ingredient);
+                displaySelectedIngredients();
+            }
+        };
+        item.appendChild(img);
+        item.appendChild(name);
+        item.appendChild(button);
+        ingredientsList.appendChild(item);
+    });
+}
 
-@app.route('/get_ingredients', methods=['POST'])
-def get_ingredients():
-    global sf
-    if not sf:
-        sf = get_salesforce_connection()
-        if not sf:
-            return jsonify({"error": "Failed to connect to Salesforce"}), 500
+function displaySelectedIngredients() {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) {
+        console.error('Chat messages container not found for selected ingredients!');
+        return;
+    }
 
-    dietary_preference = request.json.get('dietary_preference', '').lower()
-    
-    # Map dietary preference to SOQL condition
-    preference_map = {
-        'vegetarian': "Category__c = 'Veg'",
-        'non-vegetarian': "Category__c = 'Non-Veg'",
-        'both': None  # No condition to fetch all records, including "Both" category
+    let selectedArea = document.querySelector('.selected-ingredients');
+    if (!selectedArea) {
+        selectedArea = document.createElement('div');
+        selectedArea.className = 'selected-ingredients';
+        chatMessages.appendChild(selectedArea);
+    } else {
+        selectedArea.innerHTML = '';
     }
-    condition = preference_map.get(dietary_preference)
 
-    try:
-        # Construct the base query
-        soql = "SELECT Name, Image_URL__c, Category__c FROM Sector_Detail__c"  # Added Category__c for debugging
-        if condition:
-            soql += f" WHERE {condition}"
-        soql += " LIMIT 200"
+    selectedIngredients.forEach(ingredient => {
+        const div = document.createElement('div');
+        div.textContent = ingredient.name; // Removed category from display
+        selectedArea.appendChild(div);
+    });
+}
 
-        logger.info(f"Executing SOQL query: {soql}")
-        result = sf.query(soql)
-        ingredients = [
-            {"name": record['Name'], "image_url": record.get('Image_URL__c', ''), "category": record.get('Category__c', 'Unknown')}
-            for record in result['records'] if 'Name' in record
-        ]
-        logger.info(f"Fetched {len(ingredients)} ingredients: {ingredients}")
-        return jsonify({"ingredients": ingredients})
-    except Exception as e:
-        logger.error(f"Failed to fetch ingredients: {str(e)}")
-        return jsonify({"error": f"Failed to fetch ingredients: {str(e)}"}), 500
+function displayOptions(options) {
+    const chatMessages = document.getElementById('chatMessages');
+    if (!chatMessages) {
+        console.error('Chat messages container not found for options!');
+        return;
+    }
+    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 });
+            chatMessages.innerHTML = ''; // Clear previous messages
+            conversation.forEach(msg => addMessage(msg.role, msg.message));
+            setTimeout(() => handleResponse(opt.text), 500);
+        };
+        chatMessages.appendChild(button);
+    });
+    chatMessages.appendChild(document.createElement('br'));
+    const backButton = document.createElement('button');
+    backButton.textContent = 'Go Back';
+    backButton.className = 'option-button';
+    backButton.onclick = () => {
+        conversation.pop(); // Remove last user input
+        selectedIngredients = []; // Clear selected ingredients
+        chatMessages.innerHTML = ''; // Clear previous messages
+        conversation.forEach(msg => addMessage(msg.role, msg.message));
+        setTimeout(() => handleResponse(conversation[conversation.length - 1].message), 500);
+    };
+    chatMessages.appendChild(backButton);
+}
+
+// Add event listener for Enter key
+document.getElementById('userInput').addEventListener('keypress', function(e) {
+    if (e.key === 'Enter') {
+        sendMessage();
+    }
+});
 
-if __name__ == '__main__':
-    app.run(debug=True, host='0.0.0.0', port=7860)
+// Initial load check
+console.log('Script loaded successfully');