geethareddy commited on
Commit
1ba64c3
·
verified ·
1 Parent(s): 3a2bd22

Update static/script.js

Browse files
Files changed (1) hide show
  1. static/script.js +41 -23
static/script.js CHANGED
@@ -3,22 +3,26 @@ let conversation = [
3
  ];
4
  let selectedIngredients = [];
5
 
 
 
 
 
 
6
  function addMessage(role, message) {
7
- const chatMessages = document.getElementById('chatMessages');
8
- if (!chatMessages) {
9
  console.error('Chat messages container not found!');
10
  return;
11
  }
12
  const messageDiv = document.createElement('div');
13
  messageDiv.className = role === 'bot' ? 'bot-message' : 'user-message';
14
  messageDiv.textContent = message;
15
- chatMessages.appendChild(messageDiv);
16
- chatMessages.scrollTop = chatMessages.scrollHeight;
17
  console.log(`Added ${role} message: ${message}`);
18
  }
19
 
20
  function sendMessage() {
21
- const userInput = document.getElementById('userInput');
22
  if (!userInput) {
23
  console.error('User input field not found!');
24
  return;
@@ -84,8 +88,7 @@ function fetchIngredients(dietaryPreference) {
84
  }
85
 
86
  function displayIngredientsList(ingredients) {
87
- const chatMessages = document.getElementById('chatMessages');
88
- if (!chatMessages) {
89
  console.error('Chat messages container not found for ingredients!');
90
  return;
91
  }
@@ -94,7 +97,7 @@ function displayIngredientsList(ingredients) {
94
  if (!ingredientsList) {
95
  ingredientsList = document.createElement('div');
96
  ingredientsList.className = 'ingredients-list';
97
- chatMessages.appendChild(ingredientsList);
98
  } else {
99
  ingredientsList.innerHTML = '';
100
  }
@@ -123,11 +126,17 @@ function displayIngredientsList(ingredients) {
123
  item.appendChild(button);
124
  ingredientsList.appendChild(item);
125
  });
 
 
 
 
 
 
 
126
  }
127
 
128
  function displaySelectedIngredients() {
129
- const chatMessages = document.getElementById('chatMessages');
130
- if (!chatMessages) {
131
  console.error('Chat messages container not found for selected ingredients!');
132
  return;
133
  }
@@ -136,7 +145,7 @@ function displaySelectedIngredients() {
136
  if (!selectedArea) {
137
  selectedArea = document.createElement('div');
138
  selectedArea.className = 'selected-ingredients';
139
- chatMessages.appendChild(selectedArea);
140
  } else {
141
  selectedArea.innerHTML = '';
142
  }
@@ -149,13 +158,12 @@ function displaySelectedIngredients() {
149
  }
150
 
151
  function displayOptions(options) {
152
- const chatMessages = document.getElementById('chatMessages');
153
- if (!chatMessages) {
154
  console.error('Chat messages container not found for options!');
155
  return;
156
  }
157
- // Clear existing content
158
- chatMessages.innerHTML = '';
159
  options.forEach(opt => {
160
  const button = document.createElement('button');
161
  button.textContent = opt.text;
@@ -163,20 +171,19 @@ function displayOptions(options) {
163
  button.onclick = () => {
164
  addMessage('user', opt.text);
165
  conversation.push({ role: 'user', message: opt.text });
166
- handleResponse(opt.text); // Process the selection immediately
167
  };
168
- chatMessages.appendChild(button);
169
  });
170
- chatMessages.appendChild(document.createElement('br'));
171
  const backButton = document.createElement('button');
172
  backButton.textContent = 'Go Back';
173
  backButton.className = 'option-button';
174
  backButton.onclick = () => {
175
- // Reset conversation to initial state
176
  const userName = conversation.length > 1 ? conversation[1].message : 'User';
177
  conversation = [{ role: 'bot', message: `Hi there! I'm Chef Bot! May I know your name?` }, { role: 'user', message: userName }, { role: 'bot', message: `Nice to meet you, ${userName}! 😊 Let's create your perfect meal! What type of food would you prefer?` }];
178
  selectedIngredients = [];
179
- chatMessages.innerHTML = '';
180
  conversation.forEach(msg => addMessage(msg.role, msg.message));
181
  displayOptions([
182
  { text: 'Vegetarian', class: 'green' },
@@ -184,15 +191,26 @@ function displayOptions(options) {
184
  { text: 'Both', class: 'gray' }
185
  ]);
186
  };
187
- chatMessages.appendChild(backButton);
 
 
 
 
 
 
 
 
 
 
 
 
 
188
  }
189
 
190
- // Add event listener for Enter key
191
  document.getElementById('userInput').addEventListener('keypress', function(e) {
192
  if (e.key === 'Enter') {
193
  sendMessage();
194
  }
195
  });
196
 
197
- // Initial load check
198
  console.log('Script loaded successfully');
 
3
  ];
4
  let selectedIngredients = [];
5
 
6
+ const elements = {
7
+ chatMessages: document.getElementById('chatMessages'),
8
+ userInput: document.getElementById('userInput')
9
+ };
10
+
11
  function addMessage(role, message) {
12
+ if (!elements.chatMessages) {
 
13
  console.error('Chat messages container not found!');
14
  return;
15
  }
16
  const messageDiv = document.createElement('div');
17
  messageDiv.className = role === 'bot' ? 'bot-message' : 'user-message';
18
  messageDiv.textContent = message;
19
+ elements.chatMessages.appendChild(messageDiv);
20
+ elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight;
21
  console.log(`Added ${role} message: ${message}`);
22
  }
23
 
24
  function sendMessage() {
25
+ const userInput = elements.userInput;
26
  if (!userInput) {
27
  console.error('User input field not found!');
28
  return;
 
88
  }
89
 
90
  function displayIngredientsList(ingredients) {
91
+ if (!elements.chatMessages) {
 
92
  console.error('Chat messages container not found for ingredients!');
93
  return;
94
  }
 
97
  if (!ingredientsList) {
98
  ingredientsList = document.createElement('div');
99
  ingredientsList.className = 'ingredients-list';
100
+ elements.chatMessages.appendChild(ingredientsList);
101
  } else {
102
  ingredientsList.innerHTML = '';
103
  }
 
126
  item.appendChild(button);
127
  ingredientsList.appendChild(item);
128
  });
129
+
130
+ // Add Send button
131
+ const sendButton = document.createElement('button');
132
+ sendButton.textContent = 'Send';
133
+ sendButton.className = 'send-button';
134
+ sendButton.onclick = sendSelectedIngredients;
135
+ ingredientsList.appendChild(sendButton);
136
  }
137
 
138
  function displaySelectedIngredients() {
139
+ if (!elements.chatMessages) {
 
140
  console.error('Chat messages container not found for selected ingredients!');
141
  return;
142
  }
 
145
  if (!selectedArea) {
146
  selectedArea = document.createElement('div');
147
  selectedArea.className = 'selected-ingredients';
148
+ elements.chatMessages.appendChild(selectedArea);
149
  } else {
150
  selectedArea.innerHTML = '';
151
  }
 
158
  }
159
 
160
  function displayOptions(options) {
161
+ if (!elements.chatMessages) {
 
162
  console.error('Chat messages container not found for options!');
163
  return;
164
  }
165
+ const optionsDiv = document.createElement('div');
166
+ optionsDiv.className = 'options-container';
167
  options.forEach(opt => {
168
  const button = document.createElement('button');
169
  button.textContent = opt.text;
 
171
  button.onclick = () => {
172
  addMessage('user', opt.text);
173
  conversation.push({ role: 'user', message: opt.text });
174
+ handleResponse(opt.text);
175
  };
176
+ optionsDiv.appendChild(button);
177
  });
178
+ elements.chatMessages.appendChild(optionsDiv);
179
  const backButton = document.createElement('button');
180
  backButton.textContent = 'Go Back';
181
  backButton.className = 'option-button';
182
  backButton.onclick = () => {
 
183
  const userName = conversation.length > 1 ? conversation[1].message : 'User';
184
  conversation = [{ role: 'bot', message: `Hi there! I'm Chef Bot! May I know your name?` }, { role: 'user', message: userName }, { role: 'bot', message: `Nice to meet you, ${userName}! 😊 Let's create your perfect meal! What type of food would you prefer?` }];
185
  selectedIngredients = [];
186
+ elements.chatMessages.innerHTML = '';
187
  conversation.forEach(msg => addMessage(msg.role, msg.message));
188
  displayOptions([
189
  { text: 'Vegetarian', class: 'green' },
 
191
  { text: 'Both', class: 'gray' }
192
  ]);
193
  };
194
+ optionsDiv.appendChild(backButton);
195
+ }
196
+
197
+ // New function to handle sending selected ingredients
198
+ function sendSelectedIngredients() {
199
+ if (selectedIngredients.length === 0) {
200
+ addMessage('bot', 'Please select at least one ingredient before sending!');
201
+ return;
202
+ }
203
+ const ingredientsList = selectedIngredients.map(ing => ing.name).join(', ');
204
+ addMessage('user', `Selected ingredients: ${ingredientsList}`);
205
+ addMessage('bot', `Great! I’ll suggest a recipe with ${ingredientsList}. How about a spicy prawn dish with rice flour coating? Let me know if you'd like to adjust!`);
206
+ selectedIngredients = []; // Reset after sending
207
+ displaySelectedIngredients(); // Update the display
208
  }
209
 
 
210
  document.getElementById('userInput').addEventListener('keypress', function(e) {
211
  if (e.key === 'Enter') {
212
  sendMessage();
213
  }
214
  });
215
 
 
216
  console.log('Script loaded successfully');