nagasurendra commited on
Commit
4c82fa4
·
verified ·
1 Parent(s): cafc49b

Update templates/customdish.html

Browse files
Files changed (1) hide show
  1. templates/customdish.html +71 -69
templates/customdish.html CHANGED
@@ -379,80 +379,82 @@
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
- window.onload = function() {
400
- // Check if the name is in sessionStorage
401
- if (sessionStorage.getItem('user_name')) {
402
- // If the user is logged in and name exists in sessionStorage, greet the user
403
- const userName = sessionStorage.getItem('user_name'); // Get the user's name from session
404
- conversation.push({ role: 'bot', message: `Nice to meet you, ${userName}! 😊 Let's create your perfect meal! What type of food would you prefer?` });
405
- displayConversation(); // Function to display the conversation
406
- displayOptions([
407
- { text: 'Vegetarian', class: 'green' },
408
- { text: 'Non-Vegetarian', class: 'red' }
409
- ]);
410
- } else {
411
- // If name is not in session, ask for the name
412
- conversation.push({ role: 'bot', message: "Hi there! I'm Chef Bot! May I know your name?" });
413
- displayConversation(); // Function to display the conversation
414
- }
415
- };
416
-
417
- // Function to add messages to the chat
418
- function addMessage(role, message) {
419
- const chatMessages = document.getElementById('chatMessages');
420
- if (!chatMessages) {
421
- console.error('Chat messages container not found!');
422
- return;
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
- chatMessages.scrollTop = chatMessages.scrollHeight;
 
 
 
 
 
 
 
 
 
 
 
 
 
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();