Spaces:
Runtime error
Runtime error
Update templates/customdish.html
Browse files- templates/customdish.html +71 -69
templates/customdish.html
CHANGED
@@ -379,80 +379,82 @@
|
|
379 |
</head>
|
380 |
<body>
|
381 |
<div class="chat-container">
|
382 |
-
|
383 |
-
|
384 |
-
|
385 |
-
</div>
|
386 |
-
<div class="chat-input">
|
387 |
-
<input type="text" id="userInput" placeholder="Type your name or message...">
|
388 |
-
<button onclick="sendMessage()">Send</button>
|
389 |
-
</div>
|
390 |
</div>
|
391 |
-
|
392 |
-
|
393 |
-
|
394 |
-
|
395 |
-
|
396 |
-
|
397 |
-
|
398 |
-
|
399 |
-
|
400 |
-
|
401 |
-
|
402 |
-
|
403 |
-
|
404 |
-
|
405 |
-
|
406 |
-
|
407 |
-
|
408 |
-
|
409 |
-
|
410 |
-
}
|
411 |
-
|
412 |
-
|
413 |
-
|
414 |
-
|
415 |
-
|
416 |
-
|
417 |
-
|
418 |
-
|
419 |
-
|
420 |
-
|
421 |
-
|
422 |
-
|
423 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
424 |
const messageDiv = document.createElement('div');
|
425 |
-
messageDiv.className = role === 'bot' ? 'bot-message' : 'user-message';
|
426 |
-
messageDiv.textContent = message;
|
427 |
chatMessages.appendChild(messageDiv);
|
428 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
429 |
}
|
|
|
430 |
|
431 |
-
// Function to display all conversation messages
|
432 |
-
function displayConversation() {
|
433 |
-
const chatMessages = document.getElementById('chatMessages');
|
434 |
-
chatMessages.innerHTML = ''; // Clear previous messages
|
435 |
-
conversation.forEach(msg => {
|
436 |
-
const messageDiv = document.createElement('div');
|
437 |
-
messageDiv.className = msg.role === 'bot' ? 'bot-message' : 'user-message';
|
438 |
-
messageDiv.textContent = msg.message;
|
439 |
-
chatMessages.appendChild(messageDiv);
|
440 |
-
});
|
441 |
-
chatMessages.scrollTop = chatMessages.scrollHeight; // Scroll to bottom
|
442 |
-
}
|
443 |
-
|
444 |
-
// Modified sendMessage function to be triggered automatically or by the user
|
445 |
-
function sendMessage() {
|
446 |
-
const userInput = document.getElementById('userInput').value.trim();
|
447 |
-
if (userInput) {
|
448 |
-
addMessage('user', userInput);
|
449 |
-
conversation.push({ role: 'user', message: userInput });
|
450 |
-
document.getElementById('userInput').value = ''; // Clear input field
|
451 |
-
setTimeout(() => handleResponse(userInput), 500);
|
452 |
-
} else {
|
453 |
-
console.warn('Empty message!');
|
454 |
-
}
|
455 |
-
}
|
456 |
|
457 |
function handleResponse(userInput) {
|
458 |
const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
|
|
|
379 |
</head>
|
380 |
<body>
|
381 |
<div class="chat-container">
|
382 |
+
<div class="chat-header">🍳 Chef Bot</div>
|
383 |
+
<div class="chat-messages" id="chatMessages">
|
384 |
+
<!-- Initial message will be set by JavaScript based on session -->
|
|
|
|
|
|
|
|
|
|
|
385 |
</div>
|
386 |
+
<div class="chat-input">
|
387 |
+
<input type="text" id="userInput" placeholder="Type your name or message...">
|
388 |
+
<button onclick="sendMessage()">Send</button>
|
389 |
+
</div>
|
390 |
+
</div>
|
391 |
+
|
392 |
+
<script>
|
393 |
+
let currentStep = 'greeting'; // other possible values: 'food_type', 'select_ingredients', 'menu_display', 'customization', 'post_cart'
|
394 |
+
let conversation = [];
|
395 |
+
let selectedIngredients = [];
|
396 |
+
let selectedMenuItem = null;
|
397 |
+
let cart = [];
|
398 |
+
|
399 |
+
// Get the user name passed from Flask (via Jinja)
|
400 |
+
const userName = "{{ user_name }}"; // Jinja syntax to inject user_name from Flask session
|
401 |
+
|
402 |
+
window.onload = function() {
|
403 |
+
if (userName) {
|
404 |
+
// If user_name exists, greet the user directly and proceed to food preference
|
405 |
+
conversation.push({ role: 'bot', message: `Nice to meet you, ${userName}! 😊 Let's create your perfect meal! What type of food would you prefer?` });
|
406 |
+
displayConversation(); // Display the current conversation
|
407 |
+
displayOptions([
|
408 |
+
{ text: 'Vegetarian', class: 'green' },
|
409 |
+
{ text: 'Non-Vegetarian', class: 'red' }
|
410 |
+
]);
|
411 |
+
} else {
|
412 |
+
// Ask for the name if it's not found
|
413 |
+
conversation.push({ role: 'bot', message: "Hi there! I'm Chef Bot! May I know your name?" });
|
414 |
+
displayConversation(); // Display the conversation
|
415 |
+
}
|
416 |
+
};
|
417 |
+
|
418 |
+
// Function to add messages to the chat
|
419 |
+
function addMessage(role, message) {
|
420 |
+
const chatMessages = document.getElementById('chatMessages');
|
421 |
+
if (!chatMessages) {
|
422 |
+
console.error('Chat messages container not found!');
|
423 |
+
return;
|
424 |
+
}
|
425 |
+
const messageDiv = document.createElement('div');
|
426 |
+
messageDiv.className = role === 'bot' ? 'bot-message' : 'user-message';
|
427 |
+
messageDiv.textContent = message;
|
428 |
+
chatMessages.appendChild(messageDiv);
|
429 |
+
chatMessages.scrollTop = chatMessages.scrollHeight;
|
430 |
+
}
|
431 |
+
|
432 |
+
// Function to display all conversation messages
|
433 |
+
function displayConversation() {
|
434 |
+
const chatMessages = document.getElementById('chatMessages');
|
435 |
+
chatMessages.innerHTML = ''; // Clear previous messages
|
436 |
+
conversation.forEach(msg => {
|
437 |
const messageDiv = document.createElement('div');
|
438 |
+
messageDiv.className = msg.role === 'bot' ? 'bot-message' : 'user-message';
|
439 |
+
messageDiv.textContent = msg.message;
|
440 |
chatMessages.appendChild(messageDiv);
|
441 |
+
});
|
442 |
+
chatMessages.scrollTop = chatMessages.scrollHeight; // Scroll to bottom
|
443 |
+
}
|
444 |
+
|
445 |
+
// Function to handle user input
|
446 |
+
function sendMessage() {
|
447 |
+
const userInput = document.getElementById('userInput').value.trim();
|
448 |
+
if (userInput) {
|
449 |
+
addMessage('user', userInput);
|
450 |
+
conversation.push({ role: 'user', message: userInput });
|
451 |
+
document.getElementById('userInput').value = ''; // Clear input field
|
452 |
+
setTimeout(() => handleResponse(userInput), 500);
|
453 |
+
} else {
|
454 |
+
console.warn('Empty message!');
|
455 |
}
|
456 |
+
}
|
457 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
458 |
|
459 |
function handleResponse(userInput) {
|
460 |
const lastMessage = conversation[conversation.length - 1].message.toLowerCase();
|