lokesh341 commited on
Commit
727f9cd
·
verified ·
1 Parent(s): 691da2a

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +962 -5
templates/index.html CHANGED
@@ -4,21 +4,978 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Chef Bot</title>
7
- <link rel="stylesheet" href="styles.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8
  </head>
9
  <body>
10
  <div class="chat-container">
11
  <div class="chat-header">🍳 Chef Bot</div>
12
- <div class="chat-messages" id="chatMessages" role="log" aria-live="polite">
13
  <div class="bot-message">Hello! I’m Chef Bot, your culinary assistant! What’s your name?</div>
14
  </div>
15
  <div class="suggestions-list" id="suggestionsList"></div>
16
  <div class="ingredients-list" id="menuItemsList"></div>
17
  <div class="chat-input">
18
- <input type="text" id="userInput" placeholder="Type here (e.g., paneer, chicken)..." aria-label="Enter dish or preference">
19
- <button onclick="sendMessage()" aria-label="Send message">Send</button>
20
  </div>
21
  </div>
22
- <script src="script.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  </body>
24
  </html>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Chef Bot</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ margin: 0;
11
+ padding: 0;
12
+ background-color: #f0f2f5;
13
+ overflow-x: hidden;
14
+ }
15
+
16
+ .chat-container {
17
+ width: 100%;
18
+ max-width: 100%;
19
+ height: 100vh;
20
+ border: 1px solid #ccc;
21
+ border-radius: 0;
22
+ background-color: white;
23
+ display: flex;
24
+ flex-direction: column;
25
+ box-sizing: border-box;
26
+ }
27
+
28
+ .chat-header {
29
+ background-color: #0288d1;
30
+ color: white;
31
+ padding: 8px;
32
+ text-align: center;
33
+ font-size: 16px;
34
+ flex-shrink: 0;
35
+ }
36
+
37
+ .chat-messages {
38
+ flex: 1;
39
+ overflow-y: auto;
40
+ padding: 5px;
41
+ box-sizing: border-box;
42
+ scroll-behavior: smooth;
43
+ }
44
+
45
+ .bot-message {
46
+ background-color: #e3f2fd;
47
+ padding: 8px;
48
+ margin: 5px 0;
49
+ border-radius: 5px;
50
+ max-width: 85%;
51
+ word-wrap: break-word;
52
+ font-size: 12px;
53
+ }
54
+
55
+ .user-message {
56
+ background-color: #ffebee;
57
+ padding: 8px;
58
+ margin: 5px 0;
59
+ border-radius: 5px;
60
+ max-width: 85%;
61
+ margin-left: auto;
62
+ text-align: right;
63
+ word-wrap: break-word;
64
+ font-size: 12px;
65
+ }
66
+
67
+ .chat-input {
68
+ display: flex;
69
+ padding: 5px;
70
+ border-top: 1px solid #ccc;
71
+ flex-shrink: 0;
72
+ position: fixed;
73
+ bottom: 0;
74
+ width: 100%;
75
+ background-color: white;
76
+ box-sizing: border-box;
77
+ }
78
+
79
+ .chat-input input {
80
+ flex: 1;
81
+ padding: 6px;
82
+ border: 1px solid #ccc;
83
+ border-radius: 5px;
84
+ font-size: 12px;
85
+ min-height: 35px;
86
+ box-sizing: border-box;
87
+ }
88
+
89
+ .chat-input button {
90
+ padding: 6px 10px;
91
+ margin-left: 5px;
92
+ background-color: #ff8f00;
93
+ color: white;
94
+ border: none;
95
+ border-radius: 5px;
96
+ cursor: pointer;
97
+ font-size: 12px;
98
+ min-height: 35px;
99
+ min-width: 60px;
100
+ }
101
+
102
+ .chat-input button:active {
103
+ background-color: #f57c00;
104
+ }
105
+
106
+ .items-grid {
107
+ display: flex;
108
+ flex-wrap: nowrap;
109
+ overflow-x: auto;
110
+ padding: 8px;
111
+ margin: 5px 0;
112
+ background-color: #f9f9f9;
113
+ border-radius: 5px;
114
+ gap: 8px;
115
+ scroll-behavior: smooth;
116
+ }
117
+
118
+ .item-card {
119
+ flex: 0 0 150px;
120
+ background-color: white;
121
+ border: 1px solid #ddd;
122
+ border-radius: 6px;
123
+ padding: 8px;
124
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
125
+ }
126
+
127
+ .item-card:active {
128
+ transform: scale(0.98);
129
+ }
130
+
131
+ .item-image {
132
+ width: 100%;
133
+ height: 100px;
134
+ object-fit: cover;
135
+ border-radius: 5px;
136
+ margin-bottom: 5px;
137
+ }
138
+
139
+ .item-content {
140
+ width: 100%;
141
+ }
142
+
143
+ .item-name {
144
+ font-size: 12px;
145
+ font-weight: bold;
146
+ color: #333;
147
+ margin-bottom: 3px;
148
+ }
149
+
150
+ .item-field {
151
+ font-size: 10px;
152
+ margin: 2px 0;
153
+ color: #555;
154
+ }
155
+
156
+ .item-field strong {
157
+ color: #0288d1;
158
+ }
159
+
160
+ .item-description {
161
+ font-size: 10px;
162
+ margin: 5px 0;
163
+ color: #555;
164
+ }
165
+
166
+ .button-container {
167
+ display: flex;
168
+ gap: 5px;
169
+ margin-top: 5px;
170
+ }
171
+
172
+ .show-button {
173
+ padding: 4px;
174
+ background-color: #0288d1;
175
+ color: white;
176
+ border: none;
177
+ border-radius: 5px;
178
+ cursor: pointer;
179
+ font-size: 10px;
180
+ flex: 1;
181
+ min-width: 40px;
182
+ }
183
+
184
+ .show-button:active {
185
+ background-color: #0277bd;
186
+ }
187
+
188
+ .add-button {
189
+ padding: 4px;
190
+ background-color: #4caf50;
191
+ color: white;
192
+ border: none;
193
+ border-radius: 5px;
194
+ cursor: pointer;
195
+ font-size: 10px;
196
+ flex: 1;
197
+ min-width: 40px;
198
+ }
199
+
200
+ .add-button:active {
201
+ background-color: #45a049;
202
+ }
203
+
204
+ .options-container {
205
+ display: flex;
206
+ flex-wrap: wrap;
207
+ gap: 5px;
208
+ margin: 5px 0;
209
+ }
210
+
211
+ .option-button {
212
+ padding: 6px 10px;
213
+ margin: 3px;
214
+ background-color: #7b1fa2;
215
+ color: white;
216
+ border: none;
217
+ border-radius: 5px;
218
+ cursor: pointer;
219
+ font-size: 12px;
220
+ min-width: 60px;
221
+ }
222
+
223
+ .option-button.green { background-color: #4caf50; }
224
+ .option-button.red { background-color: #d32f2f; }
225
+ .option-button.gray { background-color: #616161; }
226
+ .option-button:active { opacity: 0.9; }
227
+
228
+ .selection-box {
229
+ background-color: #e1f5fe;
230
+ padding: 8px;
231
+ border: 1px solid #0288d1;
232
+ border-radius: 5px;
233
+ margin: 5px 0;
234
+ font-size: 12px;
235
+ display: flex;
236
+ flex-wrap: wrap;
237
+ align-items: center;
238
+ gap: 5px;
239
+ }
240
+
241
+ .selection-box span {
242
+ background-color: #bbdefb;
243
+ padding: 3px 8px;
244
+ border-radius: 5px;
245
+ font-size: 12px;
246
+ }
247
+
248
+ .selected-item {
249
+ display: flex;
250
+ align-items: center;
251
+ background-color: #bbdefb;
252
+ padding: 3px 8px;
253
+ border-radius: 5px;
254
+ font-size: 11px;
255
+ flex-wrap: wrap;
256
+ }
257
+
258
+ .selected-item-image {
259
+ width: 25px;
260
+ height: 25px;
261
+ object-fit: cover;
262
+ border-radius: 5px;
263
+ margin-right: 5px;
264
+ }
265
+
266
+ .submit-button {
267
+ padding: 6px 10px;
268
+ background-color: #0288d1;
269
+ color: white;
270
+ border: none;
271
+ border-radius: 5px;
272
+ cursor: pointer;
273
+ font-size: 12px;
274
+ min-width: 60px;
275
+ }
276
+
277
+ .submit-button:active {
278
+ background-color: #0277bd;
279
+ }
280
+
281
+ .remove-button {
282
+ padding: 3px 6px;
283
+ margin-left: 5px;
284
+ background-color: #d32f2f;
285
+ color: white;
286
+ border: none;
287
+ border-radius: 5px;
288
+ cursor: pointer;
289
+ font-size: 10px;
290
+ }
291
+
292
+ .remove-button:active {
293
+ background-color: #b71c1c;
294
+ }
295
+
296
+ .manual-input {
297
+ padding: 4px;
298
+ border: 1px solid #0288d1;
299
+ border-radius: 5px;
300
+ font-size: 12px;
301
+ width: 100px;
302
+ }
303
+
304
+ .quantity-input {
305
+ padding: 4px;
306
+ border: 1px solid #0288d1;
307
+ border-radius: 5px;
308
+ font-size: 12px;
309
+ width: 50px;
310
+ }
311
+
312
+ .order-name-input {
313
+ padding: 4px;
314
+ border: 1px solid #0288d1;
315
+ border-radius: 5px;
316
+ font-size: 12px;
317
+ width: 100px;
318
+ }
319
+
320
+ .custom-ingredients-input {
321
+ padding: 4px;
322
+ border: 1px solid #0288d1;
323
+ border-radius: 5px;
324
+ font-size: 11px;
325
+ width: 120px;
326
+ margin-left: 5px;
327
+ }
328
+
329
+ .custom-ingredients-label {
330
+ font-size: 11px;
331
+ margin-left: 5px;
332
+ color: #555;
333
+ }
334
+
335
+ @media (max-width: 480px) {
336
+ .chat-header {
337
+ font-size: 14px;
338
+ padding: 6px;
339
+ }
340
+ .chat-messages {
341
+ padding: 3px;
342
+ }
343
+ .bot-message, .user-message {
344
+ font-size: 11px;
345
+ padding: 6px;
346
+ margin: 3px 0;
347
+ }
348
+ .chat-input input {
349
+ font-size: 11px;
350
+ min-height: 30px;
351
+ padding: 5px;
352
+ }
353
+ .chat-input button {
354
+ font-size: 11px;
355
+ min-height: 30px;
356
+ padding: 5px 8px;
357
+ min-width: 50px;
358
+ }
359
+ .items-grid {
360
+ flex-direction: column;
361
+ overflow-x: hidden;
362
+ gap: 6px;
363
+ padding: 6px;
364
+ }
365
+ .item-card {
366
+ width: 100%;
367
+ flex: 0 0 auto;
368
+ max-width: 120px;
369
+ }
370
+ .item-image {
371
+ height: 80px;
372
+ }
373
+ .item-name {
374
+ font-size: 10px;
375
+ }
376
+ .item-field, .item-description {
377
+ font-size: 9px;
378
+ }
379
+ .show-button, .add-button {
380
+ font-size: 9px;
381
+ padding: 3px;
382
+ min-width: 35px;
383
+ }
384
+ .options-container {
385
+ gap: 3px;
386
+ }
387
+ .option-button {
388
+ font-size: 11px;
389
+ padding: 5px 8px;
390
+ min-width: 50px;
391
+ }
392
+ .selection-box {
393
+ padding: 6px;
394
+ gap: 3px;
395
+ }
396
+ .selection-box span {
397
+ font-size: 11px;
398
+ padding: 2px 6px;
399
+ }
400
+ .selected-item {
401
+ font-size: 10px;
402
+ padding: 2px 6px;
403
+ }
404
+ .selected-item-image {
405
+ width: 20px;
406
+ height: 20px;
407
+ }
408
+ .submit-button {
409
+ font-size: 11px;
410
+ padding: 5px 8px;
411
+ min-width: 50px;
412
+ }
413
+ .remove-button {
414
+ font-size: 9px;
415
+ padding: 2px 5px;
416
+ }
417
+ .manual-input, .order-name-input {
418
+ width: 80px;
419
+ font-size: 11px;
420
+ padding: 3px;
421
+ }
422
+ .quantity-input {
423
+ width: 40px;
424
+ font-size: 11px;
425
+ padding: 3px;
426
+ }
427
+ .custom-ingredients-input {
428
+ width: 100px;
429
+ font-size: 10px;
430
+ }
431
+ }
432
+
433
+ @media (min-width: 481px) and (max-width: 768px) {
434
+ .chat-header {
435
+ font-size: 15px;
436
+ }
437
+ .chat-messages {
438
+ padding: 4px;
439
+ }
440
+ .bot-message, .user-message {
441
+ font-size: 12px;
442
+ padding: 7px;
443
+ }
444
+ .chat-input input {
445
+ font-size: 12px;
446
+ min-height: 35px;
447
+ }
448
+ .chat-input button {
449
+ font-size: 12px;
450
+ min-height: 35px;
451
+ padding: 6px 10px;
452
+ }
453
+ .items-grid {
454
+ gap: 8px;
455
+ }
456
+ .item-card {
457
+ flex: 0 0 140px;
458
+ }
459
+ .item-image {
460
+ height: 90px;
461
+ }
462
+ .item-name {
463
+ font-size: 11px;
464
+ }
465
+ .item-field, .item-description {
466
+ font-size: 10px;
467
+ }
468
+ .show-button, .add-button {
469
+ font-size: 10px;
470
+ padding: 4px;
471
+ min-width: 40px;
472
+ }
473
+ .option-button {
474
+ font-size: 12px;
475
+ padding: 6px 10px;
476
+ }
477
+ .selection-box {
478
+ padding: 8px;
479
+ gap: 5px;
480
+ }
481
+ .selection-box span {
482
+ font-size: 12px;
483
+ }
484
+ .selected-item {
485
+ font-size: 11px;
486
+ }
487
+ .selected-item-image {
488
+ width: 25px;
489
+ height: 25px;
490
+ }
491
+ .submit-button {
492
+ font-size: 12px;
493
+ padding: 6px 10px;
494
+ }
495
+ .remove-button {
496
+ font-size: 10px;
497
+ padding: 3px 6px;
498
+ }
499
+ .manual-input, .order-name-input {
500
+ width: 100px;
501
+ font-size: 12px;
502
+ }
503
+ .quantity-input {
504
+ width: 50px;
505
+ font-size: 12px;
506
+ }
507
+ .custom-ingredients-input {
508
+ width: 110px;
509
+ font-size: 11px;
510
+ }
511
+ }
512
+ </style>
513
  </head>
514
  <body>
515
  <div class="chat-container">
516
  <div class="chat-header">🍳 Chef Bot</div>
517
+ <div class="chat-messages" id="chatMessages">
518
  <div class="bot-message">Hello! I’m Chef Bot, your culinary assistant! What’s your name?</div>
519
  </div>
520
  <div class="suggestions-list" id="suggestionsList"></div>
521
  <div class="ingredients-list" id="menuItemsList"></div>
522
  <div class="chat-input">
523
+ <input type="text" id="userInput" placeholder="Type here (e.g., paneer, chicken)...">
524
+ <button onclick="sendMessage()">Send</button>
525
  </div>
526
  </div>
527
+
528
+ <script>
529
+ let conversation = [
530
+ { role: 'bot', message: 'Hello! I’m Chef Bot, your culinary assistant! What’s your name?' }
531
+ ];
532
+ let selectedItems = [];
533
+ let selectionBoxVisible = false;
534
+
535
+ function addMessage(role, message) {
536
+ const chatMessages = document.getElementById('chatMessages');
537
+ if (!chatMessages) {
538
+ console.error('Chat messages container not found!');
539
+ return;
540
+ }
541
+ const messageDiv = document.createElement('div');
542
+ messageDiv.className = role === 'bot' ? 'bot-message' : 'user-message';
543
+ messageDiv.textContent = message;
544
+ chatMessages.appendChild(messageDiv);
545
+ chatMessages.scrollTop = chatMessages.scrollHeight;
546
+ console.log(`Added ${role} message: ${message}`);
547
+ }
548
+
549
+ function sendMessage() {
550
+ const userInput = document.getElementById('userInput');
551
+ if (!userInput) {
552
+ console.error('User input field not found!');
553
+ return;
554
+ }
555
+ const message = userInput.value.trim();
556
+ if (message) {
557
+ addMessage('user', message);
558
+ conversation.push({ role: 'user', message: message });
559
+ selectionBoxVisible = true;
560
+ handleResponse(message);
561
+ } else {
562
+ addMessage('bot', 'Please type a dish or preference! 😄');
563
+ }
564
+ userInput.value = '';
565
+ updateSelectionBox();
566
+ }
567
+
568
+ function handleResponse(userInput) {
569
+ const lowerInput = userInput.toLowerCase();
570
+ let botResponse = '';
571
+
572
+ if (conversation.length === 2) {
573
+ botResponse = `Hi ${userInput}! 🍳 Search for a dish or choose a preference below!`;
574
+ displayOptions([
575
+ { text: 'Vegetarian', class: 'green' },
576
+ { text: 'Non-Vegetarian', class: 'red' }
577
+ ]);
578
+ addMessage('bot', botResponse);
579
+ } else if (lowerInput === 'vegetarian' || lowerInput === 'non-vegetarian') {
580
+ botResponse = `Fetching ${lowerInput} dishes...`;
581
+ addMessage('bot', botResponse);
582
+ fetchMenuItems(lowerInput);
583
+ } else {
584
+ botResponse = `Looking for "${userInput}"...`;
585
+ addMessage('bot', botResponse);
586
+ fetchMenuItems(null, userInput);
587
+ }
588
+ }
589
+
590
+ function updateSelectionBox() {
591
+ const chatMessages = document.getElementById('chatMessages');
592
+ if (!chatMessages) return;
593
+
594
+ const existingBox = document.querySelector('.selection-box');
595
+ if (existingBox) existingBox.remove();
596
+
597
+ if (!selectionBoxVisible && selectedItems.length === 0) return;
598
+
599
+ const selectionBox = document.createElement('div');
600
+ selectionBox.className = 'selection-box';
601
+
602
+ const vegButton = document.createElement('button');
603
+ vegButton.textContent = 'Veg';
604
+ vegButton.className = 'dietary-button green';
605
+ vegButton.onclick = () => {
606
+ addMessage('user', 'Vegetarian');
607
+ conversation.push({ role: 'user', message: 'Vegetarian' });
608
+ handleResponse('vegetarian');
609
+ };
610
+ selectionBox.appendChild(vegButton);
611
+
612
+ const nonVegButton = document.createElement('button');
613
+ nonVegButton.textContent = 'Non-Veg';
614
+ nonVegButton.className = 'dietary-button red';
615
+ nonVegButton.onclick = () => {
616
+ addMessage('user', 'Non-Vegetarian');
617
+ conversation.push({ role: 'user', message: 'Non-Vegetarian' });
618
+ handleResponse('non-vegetarian');
619
+ };
620
+ selectionBox.appendChild(nonVegButton);
621
+
622
+ const label = document.createElement('span');
623
+ label.textContent = 'Selected Items:';
624
+ selectionBox.appendChild(label);
625
+
626
+ selectedItems.forEach((item, index) => {
627
+ const itemContainer = document.createElement('div');
628
+ itemContainer.className = 'selected-item';
629
+ itemContainer.dataset.hidden = item.source === 'Sector_Detail__c' ? 'true' : 'false';
630
+
631
+ const img = document.createElement('img');
632
+ img.src = item.image_url || 'https://via.placeholder.com/30';
633
+ img.alt = item.name;
634
+ img.className = 'selected-item-image';
635
+ itemContainer.appendChild(img);
636
+
637
+ const contentDiv = document.createElement('div');
638
+ contentDiv.className = 'selected-item-content';
639
+
640
+ const itemSpan = document.createElement('span');
641
+ itemSpan.textContent = `${item.name} (Qty: ${item.quantity || 1})`;
642
+ contentDiv.appendChild(itemSpan);
643
+
644
+ const customLabel = document.createElement('span');
645
+ customLabel.className = 'custom-ingredients-label';
646
+ customLabel.textContent = 'Custom Ingredients:';
647
+ contentDiv.appendChild(customLabel);
648
+
649
+ const customInput = document.createElement('input');
650
+ customInput.type = 'text';
651
+ customInput.className = 'custom-ingredients-input';
652
+ customInput.placeholder = 'e.g., extra cheese';
653
+ customInput.value = item.custom_ingredients || '';
654
+ customInput.addEventListener('input', (e) => {
655
+ selectedItems[index].custom_ingredients = e.target.value.trim();
656
+ });
657
+ contentDiv.appendChild(customInput);
658
+
659
+ if (item.custom_ingredients) {
660
+ const customDisplay = document.createElement('span');
661
+ customDisplay.textContent = `Customized: ${item.name} with ${item.custom_ingredients}`;
662
+ customDisplay.className = 'custom-ingredients-label';
663
+ contentDiv.appendChild(customDisplay);
664
+ }
665
+
666
+ if (item.source === 'Sector_Detail__c') {
667
+ const showButton = document.createElement('button');
668
+ showButton.textContent = 'Show';
669
+ showButton.className = 'show-button';
670
+ showButton.onclick = () => toggleDescription(itemContainer, item.description, item.name);
671
+ contentDiv.appendChild(showButton);
672
+ }
673
+
674
+ itemContainer.appendChild(contentDiv);
675
+
676
+ const removeButton = document.createElement('button');
677
+ removeButton.textContent = 'X';
678
+ removeButton.className = 'remove-button';
679
+ removeButton.onclick = () => {
680
+ selectedItems.splice(index, 1);
681
+ addMessage('bot', `Removed "${item.name}".`);
682
+ updateSelectionBox();
683
+ };
684
+ itemContainer.appendChild(removeButton);
685
+
686
+ selectionBox.appendChild(itemContainer);
687
+ });
688
+
689
+ const textInput = document.createElement('input');
690
+ textInput.type = 'text';
691
+ textInput.placeholder = 'Add item...';
692
+ textInput.className = 'manual-input';
693
+ textInput.addEventListener('keypress', (e) => {
694
+ if (e.key === 'Enter' && textInput.value.trim()) {
695
+ const itemName = textInput.value.trim();
696
+ fetchSectorItemDetails(itemName);
697
+ textInput.value = '';
698
+ }
699
+ });
700
+ selectionBox.appendChild(textInput);
701
+
702
+ if (selectedItems.length > 0) {
703
+ const quantityInput = document.createElement('input');
704
+ quantityInput.type = 'number';
705
+ quantityInput.min = '1';
706
+ quantityInput.value = '1';
707
+ quantityInput.placeholder = 'Qty';
708
+ quantityInput.className = 'quantity-input';
709
+ selectionBox.appendChild(quantityInput);
710
+
711
+ const submitButton = document.createElement('button');
712
+ submitButton.textContent = 'Submit';
713
+ submitButton.className = 'submit-button';
714
+ submitButton.onclick = () => promptAndSubmit(quantityInput.value);
715
+ selectionBox.appendChild(submitButton);
716
+
717
+ const orderNameInput = document.createElement('input');
718
+ orderNameInput.type = 'text';
719
+ orderNameInput.placeholder = 'Order Name';
720
+ orderNameInput.className = 'order-name-input';
721
+ selectionBox.appendChild(orderNameInput);
722
+ }
723
+
724
+ chatMessages.appendChild(selectionBox);
725
+ chatMessages.scrollTop = chatMessages.scrollHeight;
726
+ console.log('Updated selection box:', selectedItems.map(item => ({ name: item.name, category: item.category, custom_ingredients: item.custom_ingredients })));
727
+ }
728
+
729
+ function fetchMenuItems(dietaryPreference = '', searchTerm = '') {
730
+ const payload = {};
731
+ if (dietaryPreference) payload.dietary_preference = dietaryPreference;
732
+ if (searchTerm) payload.search_term = searchTerm;
733
+ fetch('/get_menu_items', {
734
+ method: 'POST',
735
+ headers: { 'Content-Type': 'application/json' },
736
+ body: JSON.stringify(payload)
737
+ })
738
+ .then(response => response.json())
739
+ .then(data => {
740
+ if (data.error) {
741
+ addMessage('bot', `Error: ${data.error}. Try again!`);
742
+ } else if (data.menu_items.length > 0) {
743
+ addMessage('bot', `--- Found ${data.menu_items.length} item${data.menu_items.length > 1 ? 's' : ''} ---`);
744
+ displayItemsList(data.menu_items.filter(item => item.source === 'Sector_Detail__c'));
745
+ } else {
746
+ addMessage('bot', `No matches for "${searchTerm || dietaryPreference}". Try "paneer"!`);
747
+ }
748
+ console.log(`Fetched items for ${searchTerm || dietaryPreference}:`, data.menu_items);
749
+ })
750
+ .catch(error => {
751
+ addMessage('bot', `Connection issue: ${error.message}. Retrying...`);
752
+ setTimeout(() => fetchMenuItems(dietaryPreference, searchTerm), 2000);
753
+ });
754
+ }
755
+
756
+ function fetchSectorItemDetails(itemName) {
757
+ fetch('/get_sector_item_details', {
758
+ method: 'POST',
759
+ headers: { 'Content-Type': 'application/json' },
760
+ body: JSON.stringify({ item_name: itemName })
761
+ })
762
+ .then(response => response.json())
763
+ .then(data => {
764
+ if (data.error) {
765
+ addMessage('bot', `No "${itemName}" found. Try another!`);
766
+ } else {
767
+ const details = data.item_details;
768
+ if (selectedItems.some(item => item.name === details.name)) {
769
+ addMessage('bot', `"${details.name}" already selected!`);
770
+ } else {
771
+ selectedItems.push({ ...details, quantity: 1, custom_ingredients: '' });
772
+ addMessage('bot', `Added "${details.name}"!`);
773
+ updateSelectionBox();
774
+ }
775
+ }
776
+ })
777
+ .catch(error => {
778
+ addMessage('bot', `Error for "${itemName}". Retrying...`);
779
+ setTimeout(() => fetchSectorItemDetails(itemName), 2000);
780
+ });
781
+ }
782
+
783
+ function toggleDescription(itemContainer, description, itemName) {
784
+ let descElement = itemContainer.querySelector('.item-description');
785
+ if (!descElement) {
786
+ descElement = document.createElement('p');
787
+ descElement.className = 'item-description';
788
+ descElement.textContent = description;
789
+ itemContainer.querySelector('.selected-item-content').appendChild(descElement);
790
+ itemContainer.dataset.hidden = 'false';
791
+ console.log(`Showed description for ${itemName}`);
792
+ } else {
793
+ descElement.remove();
794
+ itemContainer.dataset.hidden = 'true';
795
+ console.log(`Hid description for ${itemName}`);
796
+ }
797
+ }
798
+
799
+ function displayItemsList(items) {
800
+ const chatMessages = document.getElementById('chatMessages');
801
+ if (!chatMessages) {
802
+ console.error('Chat messages container not found!');
803
+ addMessage('bot', 'Display issue. Try again?');
804
+ return;
805
+ }
806
+
807
+ const itemsGrid = document.createElement('div');
808
+ itemsGrid.className = 'items-grid';
809
+
810
+ items.forEach(item => {
811
+ const itemDiv = document.createElement('div');
812
+ itemDiv.className = 'item-card';
813
+
814
+ const img = document.createElement('img');
815
+ img.src = item.image_url || 'https://via.placeholder.com/60';
816
+ img.alt = item.name;
817
+ img.className = 'item-image';
818
+ itemDiv.appendChild(img);
819
+
820
+ const contentDiv = document.createElement('div');
821
+ contentDiv.className = 'item-content';
822
+
823
+ const nameDiv = document.createElement('div');
824
+ nameDiv.textContent = item.name;
825
+ nameDiv.className = 'item-name';
826
+ contentDiv.appendChild(nameDiv);
827
+
828
+ const fields = [
829
+ { label: 'Category', value: item.category },
830
+ { label: 'Description', value: item.description }
831
+ ];
832
+ fields.forEach(field => {
833
+ if (field.value) {
834
+ const p = document.createElement('p');
835
+ p.className = 'item-field';
836
+ p.innerHTML = `<strong>${field.label}:</strong> ${field.value}`;
837
+ contentDiv.appendChild(p);
838
+ }
839
+ });
840
+
841
+ itemDiv.appendChild(contentDiv);
842
+
843
+ const buttonContainer = document.createElement('div');
844
+ buttonContainer.className = 'button-container';
845
+
846
+ const addButton = document.createElement('button');
847
+ addButton.textContent = 'Add';
848
+ addButton.className = 'add-button';
849
+ addButton.onclick = () => {
850
+ const selectedItem = {
851
+ name: item.name,
852
+ image_url: item.image_url || '',
853
+ category: item.category || 'Not specified',
854
+ description: item.description || 'No description available',
855
+ source: item.source,
856
+ quantity: 1,
857
+ custom_ingredients: ''
858
+ };
859
+ if (selectedItems.some(existing => existing.name === selectedItem.name)) {
860
+ addMessage('bot', `"${selectedItem.name}" already selected!`);
861
+ } else {
862
+ selectedItems.push(selectedItem);
863
+ addMessage('bot', `Added "${selectedItem.name}"!`);
864
+ updateSelectionBox();
865
+ }
866
+ };
867
+ buttonContainer.appendChild(addButton);
868
+
869
+ itemDiv.appendChild(buttonContainer);
870
+ itemsGrid.appendChild(itemDiv);
871
+ });
872
+
873
+ chatMessages.appendChild(itemsGrid);
874
+ chatMessages.scrollTop = chatMessages.scrollHeight;
875
+ }
876
+
877
+ function displayOptions(options) {
878
+ const chatMessages = document.getElementById('chatMessages');
879
+ if (!chatMessages) {
880
+ console.error('Chat messages container not found!');
881
+ return;
882
+ }
883
+ const optionsDiv = document.createElement('div');
884
+ optionsDiv.className = 'options-container';
885
+
886
+ options.forEach(opt => {
887
+ const button = document.createElement('button');
888
+ button.textContent = opt.text;
889
+ button.className = `option-button ${opt.class}`;
890
+ button.onclick = () => {
891
+ addMessage('user', opt.text);
892
+ conversation.push({ role: 'user', message: opt.text });
893
+ selectionBoxVisible = true;
894
+ handleResponse(opt.text);
895
+ updateSelectionBox();
896
+ };
897
+ optionsDiv.appendChild(button);
898
+ });
899
+
900
+ const backButton = document.createElement('button');
901
+ backButton.textContent = 'Back';
902
+ backButton.className = 'option-button';
903
+ backButton.onclick = () => resetConversation();
904
+ optionsDiv.appendChild(backButton);
905
+
906
+ chatMessages.appendChild(optionsDiv);
907
+ }
908
+
909
+ function promptAndSubmit(quantity) {
910
+ const orderNameInput = document.querySelector('.order-name-input');
911
+ const customOrderName = orderNameInput ? orderNameInput.value.trim() : '';
912
+ if (confirm(`Submit ${selectedItems.length} items (Qty: ${quantity})?`)) {
913
+ submitToSalesforce(customOrderName, quantity);
914
+ } else {
915
+ addMessage('bot', 'Cancelled. Add more items?');
916
+ }
917
+ }
918
+
919
+ function submitToSalesforce(customOrderName, quantity) {
920
+ if (selectedItems.length === 0) {
921
+ addMessage('bot', 'No items selected! Add some dishes! 😊');
922
+ return;
923
+ }
924
+
925
+ const itemsToSubmit = selectedItems.map(item => ({
926
+ name: item.name,
927
+ category: item.category || 'Not specified',
928
+ description: item.description || 'No description available',
929
+ image_url: item.image_url || '',
930
+ quantity: parseInt(quantity) || 1,
931
+ custom_ingredients: item.custom_ingredients || ''
932
+ }));
933
+
934
+ fetch('/submit_items', {
935
+ method: 'POST',
936
+ headers: { 'Content-Type': 'application/json' },
937
+ body: JSON.stringify({ items: itemsToSubmit, custom_order_name: customOrderName })
938
+ })
939
+ .then(response => response.json())
940
+ .then(data => {
941
+ if (data.error) {
942
+ addMessage('bot', `Submission failed: ${data.error}. Try again?`);
943
+ } else {
944
+ addMessage('bot', `Submitted ${data.ingredient_name}! What's next?`);
945
+ selectedItems = [];
946
+ updateSelectionBox();
947
+ }
948
+ })
949
+ .catch(error => {
950
+ addMessage('bot', `Submission error: ${error.message}. Retrying...`);
951
+ setTimeout(() => submitToSalesforce(customOrderName, quantity), 2000);
952
+ });
953
+ }
954
+
955
+ function resetConversation() {
956
+ const userName = conversation.length > 1 ? conversation[1].message : 'Friend';
957
+ conversation = [
958
+ { role: 'bot', message: `Hello! I’m Chef Bot, your culinary assistant! What’s your name?` },
959
+ { role: 'user', message: userName },
960
+ { role: 'bot', message: `Hi ${userName}! 🍳 Search for a dish or choose a preference below!` }
961
+ ];
962
+ selectedItems = [];
963
+ selectionBoxVisible = true;
964
+ const chatMessages = document.getElementById('chatMessages');
965
+ chatMessages.innerHTML = '';
966
+ conversation.forEach(msg => addMessage(msg.role, msg.message));
967
+ displayOptions([
968
+ { text: 'Vegetarian', class: 'green' },
969
+ { text: 'Non-Vegetarian', class: 'red' }
970
+ ]);
971
+ updateSelectionBox();
972
+ }
973
+
974
+ document.getElementById('userInput').addEventListener('keypress', (e) => {
975
+ if (e.key === 'Enter') sendMessage();
976
+ });
977
+
978
+ console.log('Chef Bot script loaded!');
979
+ </script>
980
  </body>
981
  </html>