Spaces:
Sleeping
Sleeping
Update static/script.js
Browse files- 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 |
-
|
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 =
|
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 |
-
|
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 |
-
|
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 |
-
|
153 |
-
if (!chatMessages) {
|
154 |
console.error('Chat messages container not found for options!');
|
155 |
return;
|
156 |
}
|
157 |
-
|
158 |
-
|
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);
|
167 |
};
|
168 |
-
|
169 |
});
|
170 |
-
chatMessages.appendChild(
|
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 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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');
|