Spaces:
Sleeping
Sleeping
Update static/script.js
Browse files- static/script.js +39 -51
static/script.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1 |
let conversation = [
|
2 |
-
{ role: 'bot', message: '
|
3 |
];
|
4 |
let selectedItems = [];
|
5 |
|
@@ -27,11 +27,23 @@ function sendMessage() {
|
|
27 |
if (message) {
|
28 |
addMessage('user', message);
|
29 |
conversation.push({ role: 'user', message: message });
|
30 |
-
userInput.value = '';
|
31 |
setTimeout(() => handleResponse(message), 500);
|
|
|
|
|
|
|
|
|
32 |
} else {
|
33 |
-
addMessage('bot', '
|
34 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
35 |
}
|
36 |
|
37 |
function handleResponse(userInput) {
|
@@ -39,19 +51,19 @@ function handleResponse(userInput) {
|
|
39 |
let botResponse = '';
|
40 |
|
41 |
if (conversation.length === 2) {
|
42 |
-
botResponse = `
|
43 |
displayOptions([
|
44 |
{ text: 'Vegetarian', class: 'green' },
|
45 |
{ text: 'Non-Vegetarian', class: 'red' },
|
46 |
{ text: 'Both', class: 'gray' }
|
47 |
]);
|
48 |
} else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian' || lowerInput === 'both') {
|
49 |
-
botResponse = `
|
50 |
addMessage('bot', botResponse);
|
51 |
fetchMenuItems(lowerInput);
|
52 |
return;
|
53 |
} else {
|
54 |
-
botResponse = `
|
55 |
addMessage('bot', botResponse);
|
56 |
suggestItems(userInput);
|
57 |
return;
|
@@ -69,18 +81,17 @@ function fetchMenuItems(dietaryPreference) {
|
|
69 |
.then(response => response.json())
|
70 |
.then(data => {
|
71 |
if (data.error) {
|
72 |
-
addMessage('bot', `Oops!
|
73 |
} else if (data.menu_items.length > 0) {
|
74 |
-
addMessage('bot', `Here
|
75 |
displayItemsList(data.menu_items, 'menuItemsList');
|
76 |
-
if (selectedItems.length > 0) displaySubmitButton();
|
77 |
} else {
|
78 |
-
addMessage('bot', `
|
79 |
}
|
80 |
-
console.log(`Fetched
|
81 |
})
|
82 |
.catch(error => {
|
83 |
-
addMessage('bot', `
|
84 |
setTimeout(() => fetchMenuItems(dietaryPreference), 2000);
|
85 |
});
|
86 |
}
|
@@ -94,13 +105,12 @@ function suggestItems(searchTerm) {
|
|
94 |
.then(response => response.json())
|
95 |
.then(data => {
|
96 |
if (data.error) {
|
97 |
-
addMessage('bot', `Couldn’t find anything for "${searchTerm}": ${data.error}.
|
98 |
} else if (data.suggestions.length > 0) {
|
99 |
-
addMessage('bot', `
|
100 |
displayItemsList(data.suggestions, 'suggestionsList');
|
101 |
-
if (selectedItems.length > 0) displaySubmitButton();
|
102 |
} else {
|
103 |
-
addMessage('bot', `No
|
104 |
}
|
105 |
console.log(`Suggestions for ${searchTerm}:`, data.suggestions);
|
106 |
})
|
@@ -119,18 +129,17 @@ function fetchItemDetails(itemName) {
|
|
119 |
.then(response => response.json())
|
120 |
.then(data => {
|
121 |
if (data.error) {
|
122 |
-
addMessage('bot', `Sorry, couldn’t get details for "${itemName}": ${data.error}.
|
123 |
} else {
|
124 |
const details = data.item_details;
|
125 |
selectedItems.push(details);
|
126 |
-
addMessage('bot', `Added "${itemName}" to your
|
127 |
-
|
128 |
-
displaySubmitButton();
|
129 |
console.log(`Details for ${itemName}:`, details);
|
130 |
}
|
131 |
})
|
132 |
.catch(error => {
|
133 |
-
addMessage('bot', `
|
134 |
setTimeout(() => fetchItemDetails(itemName), 2000);
|
135 |
});
|
136 |
}
|
@@ -139,7 +148,7 @@ function displayItemsList(items, containerId) {
|
|
139 |
const container = document.getElementById(containerId);
|
140 |
if (!container) {
|
141 |
console.error(`${containerId} container not found!`);
|
142 |
-
addMessage('bot', '
|
143 |
return;
|
144 |
}
|
145 |
container.innerHTML = '';
|
@@ -165,26 +174,6 @@ function displayItemsList(items, containerId) {
|
|
165 |
});
|
166 |
}
|
167 |
|
168 |
-
function displaySelectedItems() {
|
169 |
-
const selectedArea = document.getElementById('itemDetails');
|
170 |
-
if (!selectedArea) {
|
171 |
-
console.error('Item details container not found!');
|
172 |
-
return;
|
173 |
-
}
|
174 |
-
selectedArea.innerHTML = '';
|
175 |
-
|
176 |
-
if (selectedItems.length === 0) {
|
177 |
-
selectedArea.innerHTML = '<div>No items selected yet!</div>';
|
178 |
-
} else {
|
179 |
-
selectedItems.forEach(item => {
|
180 |
-
const div = document.createElement('div');
|
181 |
-
div.textContent = item.name; // Display as text label
|
182 |
-
div.style.margin = '5px 0';
|
183 |
-
selectedArea.appendChild(div);
|
184 |
-
});
|
185 |
-
}
|
186 |
-
}
|
187 |
-
|
188 |
function displayOptions(options) {
|
189 |
const chatMessages = document.getElementById('chatMessages');
|
190 |
if (!chatMessages) {
|
@@ -221,7 +210,6 @@ function displaySubmitButton() {
|
|
221 |
const chatMessages = document.getElementById('chatMessages');
|
222 |
if (!chatMessages) return;
|
223 |
|
224 |
-
// Remove existing submit button if any
|
225 |
const existingButton = document.querySelector('.submit-button');
|
226 |
if (existingButton) existingButton.remove();
|
227 |
|
@@ -234,7 +222,7 @@ function displaySubmitButton() {
|
|
234 |
|
235 |
function submitToSalesforce() {
|
236 |
if (selectedItems.length === 0) {
|
237 |
-
addMessage('bot', 'No items
|
238 |
return;
|
239 |
}
|
240 |
|
@@ -246,16 +234,16 @@ function submitToSalesforce() {
|
|
246 |
.then(response => response.json())
|
247 |
.then(data => {
|
248 |
if (data.error) {
|
249 |
-
addMessage('bot', `Failed to submit items: ${data.error}
|
250 |
} else {
|
251 |
-
addMessage('bot', data.success);
|
252 |
selectedItems = [];
|
253 |
-
|
254 |
document.querySelector('.submit-button').remove();
|
255 |
}
|
256 |
})
|
257 |
.catch(error => {
|
258 |
-
addMessage('bot', `Error submitting items: ${error.message}.
|
259 |
setTimeout(submitToSalesforce, 2000);
|
260 |
});
|
261 |
}
|
@@ -263,9 +251,9 @@ function submitToSalesforce() {
|
|
263 |
function resetConversation() {
|
264 |
const userName = conversation.length > 1 ? conversation[1].message : 'Friend';
|
265 |
conversation = [
|
266 |
-
{ role: 'bot', message: `
|
267 |
{ role: 'user', message: userName },
|
268 |
-
{ role: 'bot', message: `
|
269 |
];
|
270 |
selectedItems = [];
|
271 |
const chatMessages = document.getElementById('chatMessages');
|
@@ -278,7 +266,7 @@ function resetConversation() {
|
|
278 |
]);
|
279 |
document.getElementById('suggestionsList').innerHTML = '';
|
280 |
document.getElementById('menuItemsList').innerHTML = '';
|
281 |
-
|
282 |
}
|
283 |
|
284 |
document.getElementById('userInput').addEventListener('keypress', (e) => {
|
|
|
1 |
let conversation = [
|
2 |
+
{ role: 'bot', message: 'Hello! I’m Chef Bot, your culinary assistant! What’s your name?' }
|
3 |
];
|
4 |
let selectedItems = [];
|
5 |
|
|
|
27 |
if (message) {
|
28 |
addMessage('user', message);
|
29 |
conversation.push({ role: 'user', message: message });
|
|
|
30 |
setTimeout(() => handleResponse(message), 500);
|
31 |
+
} else if (selectedItems.length > 0) {
|
32 |
+
// If input is empty but items are selected, treat it as a trigger to show Submit
|
33 |
+
addMessage('bot', `You’ve selected ${selectedItems.length} item(s). Ready to submit?`);
|
34 |
+
displaySubmitButton();
|
35 |
} else {
|
36 |
+
addMessage('bot', 'Hey, don’t be shy! Type something or add items to get started! 😄');
|
37 |
}
|
38 |
+
userInput.value = ''; // Clear input after sending
|
39 |
+
updateInputBar(); // Reset input bar to show selected items
|
40 |
+
}
|
41 |
+
|
42 |
+
function updateInputBar() {
|
43 |
+
const userInput = document.getElementById('userInput');
|
44 |
+
if (!userInput) return;
|
45 |
+
userInput.value = selectedItems.map(item => item.name).join(', ');
|
46 |
+
console.log('Updated input bar with selected items:', userInput.value);
|
47 |
}
|
48 |
|
49 |
function handleResponse(userInput) {
|
|
|
51 |
let botResponse = '';
|
52 |
|
53 |
if (conversation.length === 2) {
|
54 |
+
botResponse = `Great to meet you, ${userInput}! 🍳 What kind of food are you craving today?`;
|
55 |
displayOptions([
|
56 |
{ text: 'Vegetarian', class: 'green' },
|
57 |
{ text: 'Non-Vegetarian', class: 'red' },
|
58 |
{ text: 'Both', class: 'gray' }
|
59 |
]);
|
60 |
} else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian' || lowerInput === 'both') {
|
61 |
+
botResponse = `Nice choice! Let me whip up some ${lowerInput} options for you...`;
|
62 |
addMessage('bot', botResponse);
|
63 |
fetchMenuItems(lowerInput);
|
64 |
return;
|
65 |
} else {
|
66 |
+
botResponse = `Hmm, let’s see what I can find for "${userInput}"...`;
|
67 |
addMessage('bot', botResponse);
|
68 |
suggestItems(userInput);
|
69 |
return;
|
|
|
81 |
.then(response => response.json())
|
82 |
.then(data => {
|
83 |
if (data.error) {
|
84 |
+
addMessage('bot', `Oops! Trouble fetching ${dietaryPreference} items: ${data.error}. Want to try again or search something specific?`);
|
85 |
} else if (data.menu_items.length > 0) {
|
86 |
+
addMessage('bot', `Here’s a tasty selection of ${dietaryPreference} items from Sector_Detail__c:`);
|
87 |
displayItemsList(data.menu_items, 'menuItemsList');
|
|
|
88 |
} else {
|
89 |
+
addMessage('bot', `Looks like we’re out of ${dietaryPreference} items in Sector_Detail__c. Try searching for something like "paneer" or "chicken"!`);
|
90 |
}
|
91 |
+
console.log(`Fetched items from Sector_Detail__c for ${dietaryPreference}:`, data.menu_items);
|
92 |
})
|
93 |
.catch(error => {
|
94 |
+
addMessage('bot', `Yikes! Couldn’t reach Salesforce: ${error.message}. I’ll retry in a sec...`);
|
95 |
setTimeout(() => fetchMenuItems(dietaryPreference), 2000);
|
96 |
});
|
97 |
}
|
|
|
105 |
.then(response => response.json())
|
106 |
.then(data => {
|
107 |
if (data.error) {
|
108 |
+
addMessage('bot', `Couldn’t find anything for "${searchTerm}": ${data.error}. Got another idea?`);
|
109 |
} else if (data.suggestions.length > 0) {
|
110 |
+
addMessage('bot', `Check out these suggestions for "${searchTerm}" from Ingredient_Object__c:`);
|
111 |
displayItemsList(data.suggestions, 'suggestionsList');
|
|
|
112 |
} else {
|
113 |
+
addMessage('bot', `No luck with "${searchTerm}" in Ingredient_Object__c. How about "chicken" or "paneer"?`);
|
114 |
}
|
115 |
console.log(`Suggestions for ${searchTerm}:`, data.suggestions);
|
116 |
})
|
|
|
129 |
.then(response => response.json())
|
130 |
.then(data => {
|
131 |
if (data.error) {
|
132 |
+
addMessage('bot', `Sorry, couldn’t get details for "${itemName}": ${data.error}. Double-check the name!`);
|
133 |
} else {
|
134 |
const details = data.item_details;
|
135 |
selectedItems.push(details);
|
136 |
+
addMessage('bot', `Added "${itemName}" to your list! Check the input bar.`);
|
137 |
+
updateInputBar();
|
|
|
138 |
console.log(`Details for ${itemName}:`, details);
|
139 |
}
|
140 |
})
|
141 |
.catch(error => {
|
142 |
+
addMessage('bot', `Trouble fetching details for "${itemName}": ${error.message}. Retrying...`);
|
143 |
setTimeout(() => fetchItemDetails(itemName), 2000);
|
144 |
});
|
145 |
}
|
|
|
148 |
const container = document.getElementById(containerId);
|
149 |
if (!container) {
|
150 |
console.error(`${containerId} container not found!`);
|
151 |
+
addMessage('bot', 'Something’s off with the display. Try again?');
|
152 |
return;
|
153 |
}
|
154 |
container.innerHTML = '';
|
|
|
174 |
});
|
175 |
}
|
176 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
177 |
function displayOptions(options) {
|
178 |
const chatMessages = document.getElementById('chatMessages');
|
179 |
if (!chatMessages) {
|
|
|
210 |
const chatMessages = document.getElementById('chatMessages');
|
211 |
if (!chatMessages) return;
|
212 |
|
|
|
213 |
const existingButton = document.querySelector('.submit-button');
|
214 |
if (existingButton) existingButton.remove();
|
215 |
|
|
|
222 |
|
223 |
function submitToSalesforce() {
|
224 |
if (selectedItems.length === 0) {
|
225 |
+
addMessage('bot', 'No items to submit yet! Add some first! 😊');
|
226 |
return;
|
227 |
}
|
228 |
|
|
|
234 |
.then(response => response.json())
|
235 |
.then(data => {
|
236 |
if (data.error) {
|
237 |
+
addMessage('bot', `Uh-oh! Failed to submit items: ${data.error}. Want to try again?`);
|
238 |
} else {
|
239 |
+
addMessage('bot', `${data.success}! Your selections are saved. Ready for more?`);
|
240 |
selectedItems = [];
|
241 |
+
updateInputBar();
|
242 |
document.querySelector('.submit-button').remove();
|
243 |
}
|
244 |
})
|
245 |
.catch(error => {
|
246 |
+
addMessage('bot', `Error submitting items: ${error.message}. I’ll retry shortly...`);
|
247 |
setTimeout(submitToSalesforce, 2000);
|
248 |
});
|
249 |
}
|
|
|
251 |
function resetConversation() {
|
252 |
const userName = conversation.length > 1 ? conversation[1].message : 'Friend';
|
253 |
conversation = [
|
254 |
+
{ role: 'bot', message: `Hello! I’m Chef Bot, your culinary assistant! What’s your name?` },
|
255 |
{ role: 'user', message: userName },
|
256 |
+
{ role: 'bot', message: `Great to meet you, ${userName}! 🍳 What kind of food are you craving today?` }
|
257 |
];
|
258 |
selectedItems = [];
|
259 |
const chatMessages = document.getElementById('chatMessages');
|
|
|
266 |
]);
|
267 |
document.getElementById('suggestionsList').innerHTML = '';
|
268 |
document.getElementById('menuItemsList').innerHTML = '';
|
269 |
+
updateInputBar();
|
270 |
}
|
271 |
|
272 |
document.getElementById('userInput').addEventListener('keypress', (e) => {
|