Hugging Face's logo

Spaces:
abdullahalioo
/
i
Running

App Files Community
abdullahalioo commited on
Commit
bf1e6e8
·
verified ·
1 Parent(s): c9a3ef2

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1377 -19
index.html CHANGED
@@ -1,19 +1,1377 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Nexus AI Assistant</title>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ :root {
11
+ --primary: #6366f1;
12
+ --primary-dark: #4f46e5;
13
+ --secondary: #f43f5e;
14
+ --dark: #1e293b;
15
+ --light: #f8fafc;
16
+ --gray: #94a3b8;
17
+ --success: #10b981;
18
+ --warning: #f59e0b;
19
+ --error: #ef4444;
20
+ }
21
+
22
+ * {
23
+ margin: 0;
24
+ padding: 0;
25
+ box-sizing: border-box;
26
+ font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
27
+ }
28
+
29
+ body {
30
+ height: 100%;
31
+ margin: 0;
32
+ padding: 0;
33
+ background-color: #f1f5f9;
34
+ color: var(--dark);
35
+ min-height: 100vh;
36
+ display: flex;
37
+ flex-direction: column;
38
+ -ms-overflow-style: none;
39
+ scrollbar-width: none;
40
+ }
41
+
42
+ ::-webkit-scrollbar{
43
+ display: none;
44
+ }
45
+
46
+ *{
47
+ -ms-overflow-style: none;
48
+ scrollbar-width: none;
49
+ }
50
+
51
+ .app-container {
52
+ max-width: 1250px;
53
+ width: 100%;
54
+ margin: 0 auto;
55
+ padding: 1rem;
56
+ flex: 1;
57
+ display: flex;
58
+ flex-direction: column;
59
+ }
60
+
61
+ header {
62
+ position: sticky;
63
+ display: flex;
64
+ justify-content: space-between;
65
+ align-items: center;
66
+ padding: 1rem 0;
67
+ margin-bottom: 1rem;
68
+ border-bottom: 1px solid #e2e8f0;
69
+ }
70
+
71
+ .logo {
72
+ display: flex;
73
+ align-items: center;
74
+ gap: 0.75rem;
75
+ font-weight: 700;
76
+ font-size: 1.5rem;
77
+ color: var(--primary);
78
+ }
79
+
80
+ .logo i {
81
+ font-size: 1.75rem;
82
+ }
83
+
84
+ .settings-btn {
85
+ background: none;
86
+ border: 2px solid #f9f4f4;
87
+ padding: 0.5rem 1rem;
88
+ font-size: 1.25rem;
89
+ color: #272727;
90
+ cursor: pointer;
91
+ transition: color 0.2s;
92
+ }
93
+
94
+ .settings-btn:hover {
95
+ color: var(--primary);
96
+ }
97
+
98
+ .main-content {
99
+ display: flex;
100
+ flex: 1;
101
+ gap: 1rem;
102
+ }
103
+
104
+ .sidebar {
105
+ width: 250px;
106
+ background-color: white;
107
+ border-radius: 1rem;
108
+ padding: 1rem;
109
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
110
+ display: flex;
111
+ flex-direction: column;
112
+ transition: transform 0.3s ease;
113
+ }
114
+
115
+ .sidebar-header {
116
+ display: flex;
117
+ justify-content: space-between;
118
+ align-items: center;
119
+ margin-bottom: 1rem;
120
+ }
121
+
122
+ .sidebar-title {
123
+ font-weight: 600;
124
+ font-size: 1rem;
125
+ }
126
+
127
+ .new-chat-btn {
128
+ background-color: var(--primary);
129
+ color: white;
130
+ border: none;
131
+ border-radius: 0.5rem;
132
+ padding: 0.5rem;
133
+ cursor: pointer;
134
+ transition: background-color 0.2s;
135
+ }
136
+
137
+ .new-chat-btn:hover {
138
+ background-color: var(--primary-dark);
139
+ }
140
+
141
+ .chat-list {
142
+ flex: 1;
143
+ overflow-y: auto;
144
+ margin-bottom: 1rem;
145
+ }
146
+
147
+ .chat-item {
148
+ padding: 0.75rem;
149
+ border-radius: 0.5rem;
150
+ cursor: pointer;
151
+ margin-bottom: 0.25rem;
152
+ white-space: nowrap;
153
+ overflow: hidden;
154
+ text-overflow: ellipsis;
155
+ transition: background-color 0.2s;
156
+ }
157
+
158
+ .chat-item:hover {
159
+ background-color: #f1f5f9;
160
+ }
161
+
162
+ .chat-item.active {
163
+ background-color: #e0e7ff;
164
+ color: var(--primary);
165
+ font-weight: 500;
166
+ }
167
+
168
+ .chat-container {
169
+ flex: 1;
170
+ display: flex;
171
+ flex-direction: column;
172
+ background-color: white;
173
+ border-radius: 1rem;
174
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
175
+ overflow: hidden;
176
+ }
177
+
178
+ .chat-header {
179
+ padding: 1rem;
180
+ background-color: var(--primary);
181
+ color: white;
182
+ display: flex;
183
+ justify-content: space-between;
184
+ align-items: center;
185
+ display: none;
186
+ }
187
+
188
+ .chat-title {
189
+ font-weight: 600;
190
+ font-size: 1.25rem;
191
+ }
192
+
193
+ .chat-status {
194
+ display: flex;
195
+ align-items: center;
196
+ gap: 0.5rem;
197
+ font-size: 0.875rem;
198
+ }
199
+
200
+ .status-indicator {
201
+ width: 0.75rem;
202
+ height: 0.75rem;
203
+ border-radius: 50%;
204
+ background-color: var(--success);
205
+ }
206
+
207
+ .chat-messages {
208
+ flex: 1;
209
+ padding: 1.5rem;
210
+ overflow-y: auto;
211
+ display: flex;
212
+ flex-direction: column;
213
+ gap: 1.5rem;
214
+ -ms-overflow-style: none;
215
+ scrollbar-width: none;
216
+ }
217
+
218
+ .message {
219
+ display: flex;
220
+ gap: 1rem;
221
+ max-width: 80%;
222
+ }
223
+
224
+ .message-user {
225
+ align-self: flex-end;
226
+ flex-direction: row-reverse;
227
+ }
228
+
229
+ .message-ai {
230
+ align-self: flex-start;
231
+ }
232
+
233
+ .avatar {
234
+ width: 2.5rem;
235
+ height: 2.5rem;
236
+ border-radius: 50%;
237
+ display: flex;
238
+ align-items: center;
239
+ justify-content: center;
240
+ flex-shrink: 0;
241
+ font-size: 1.25rem;
242
+ }
243
+
244
+ .avatar-user {
245
+ background-color: var(--primary);
246
+ color: white;
247
+ }
248
+
249
+ .avatar-ai {
250
+ background-color: #e0e7ff;
251
+ color: var(--primary);
252
+ }
253
+
254
+ .message-content {
255
+ display: flex;
256
+ flex-direction: column;
257
+ gap: 0.5rem;
258
+ }
259
+
260
+ .message-text {
261
+ padding: 0.75rem 1rem;
262
+ border-radius: 1rem;
263
+ line-height: 1.5;
264
+ font-size: 0.95rem;
265
+ }
266
+
267
+ .message-user .message-text {
268
+ background-color: var(--primary);
269
+ color: white;
270
+ border-bottom-right-radius: 0.25rem;
271
+ }
272
+
273
+ .message-ai .message-text {
274
+ background-color: #f8fafc;
275
+ border: 1px solid #e2e8f0;
276
+ border-bottom-left-radius: 0.25rem;
277
+ }
278
+
279
+ .message-meta {
280
+ display: flex;
281
+ align-items: center;
282
+ gap: 0.5rem;
283
+ font-size: 0.75rem;
284
+ color: var(--gray);
285
+ }
286
+
287
+ .message-ai .message-meta {
288
+ justify-content: flex-start;
289
+ }
290
+
291
+ .message-user .message-meta {
292
+ justify-content: flex-end;
293
+ }
294
+
295
+ .typing-indicator {
296
+ display: flex;
297
+ gap: 0.25rem;
298
+ padding: 0.75rem 1rem;
299
+ background-color: #f8fafc;
300
+ border: 1px solid #e2e8f0;
301
+ border-radius: 1rem;
302
+ border-bottom-left-radius: 0.25rem;
303
+ align-self: flex-start;
304
+ }
305
+
306
+ .typing-dot {
307
+ width: 0.5rem;
308
+ height: 0.5rem;
309
+ background-color: var(--gray);
310
+ border-radius: 50%;
311
+ animation: typingAnimation 1.4s infinite ease-in-out;
312
+ }
313
+
314
+ .typing-dot:nth-child(1) {
315
+ animation-delay: 0s;
316
+ }
317
+
318
+ .typing-dot:nth-child(2) {
319
+ animation-delay: 0.2s;
320
+ }
321
+
322
+ .typing-dot:nth-child(3) {
323
+ animation-delay: 0.4s;
324
+ }
325
+
326
+ @keyframes typingAnimation {
327
+ 0%, 60%, 100% {
328
+ transform: translateY(0);
329
+ opacity: 0.6;
330
+ }
331
+ 30% {
332
+ transform: translateY(-0.25rem);
333
+ opacity: 1;
334
+ }
335
+ }
336
+
337
+ .input-container {
338
+ padding: 1rem;
339
+ border-top: 1px solid #e2e8f0;
340
+ background-color: white;
341
+ }
342
+
343
+ .input-box {
344
+ display: flex;
345
+ gap: 0.5rem;
346
+ }
347
+
348
+ .input-field {
349
+ flex: 1;
350
+ padding: 0.75rem 1rem;
351
+ border: 1px solid #e2e8f0;
352
+ border-radius: 0.75rem;
353
+ font-size: 1rem;
354
+ outline: none;
355
+ transition: border-color 0.2s, box-shadow 0.2s;
356
+ }
357
+
358
+ .input-field:focus {
359
+ border-color: var(--primary);
360
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
361
+ }
362
+
363
+ .send-btn {
364
+ padding: 0 1.25rem;
365
+ background-color: var(--primary);
366
+ color: white;
367
+ border: none;
368
+ border-radius: 0.75rem;
369
+ cursor: pointer;
370
+ transition: background-color 0.2s;
371
+ }
372
+
373
+ .send-btn:hover {
374
+ background-color: var(--primary-dark);
375
+ }
376
+
377
+ .send-btn:disabled {
378
+ background-color: var(--gray);
379
+ cursor: not-allowed;
380
+ }
381
+
382
+ .action-buttons {
383
+ display: flex;
384
+ gap: 0.5rem;
385
+ margin-top: 0.5rem;
386
+ }
387
+
388
+ .action-btn {
389
+ padding: 0.5rem 0.75rem;
390
+ background-color: #f1f5f9;
391
+ border: none;
392
+ border-radius: 0.5rem;
393
+ font-size: 0.875rem;
394
+ color: var(--dark);
395
+ cursor: pointer;
396
+ transition: background-color 0.2s;
397
+ display: flex;
398
+ align-items: center;
399
+ gap: 0.25rem;
400
+ }
401
+
402
+ .action-btn:hover {
403
+ background-color: #e2e8f0;
404
+ }
405
+
406
+ .action-btn i {
407
+ font-size: 0.875rem;
408
+ }
409
+ .chat-footer {
410
+ text-align: center;
411
+ padding: 0.5rem;
412
+ font-size: 1rem;
413
+ color: var(--dark);
414
+ background-color: white;
415
+ border-top: 1px solid #e2e8f0;
416
+ position: sticky;
417
+ bottom: 0;
418
+ z-index: 10;
419
+ }
420
+
421
+ .settings-panel {
422
+ margin-top: 0;
423
+ padding-top: 20px;
424
+ border-radius: 20px 20px 0 0;
425
+ position: fixed;
426
+ top: 0;
427
+ right: -350px;
428
+ width: 350px;
429
+ border-radius: 0;
430
+ height: 100vh;
431
+ background-color: white;
432
+ box-shadow: -4px 0 6px -1px rgba(0, 0, 0, 0.1);
433
+ transition: right 0.3s ease;
434
+ z-index: 100;
435
+ padding: 1.5rem;
436
+ display: flex;
437
+ flex-direction: column;
438
+ }
439
+
440
+ .settings-panel.open {
441
+ right: 0;
442
+ }
443
+
444
+ .settings-header {
445
+ display: flex;
446
+ justify-content: space-between;
447
+ align-items: center;
448
+ margin-bottom: 1.5rem;
449
+ padding-bottom: 1rem;
450
+ border-bottom: 1px solid #e2e8f0;
451
+ }
452
+
453
+ .settings-title {
454
+ font-weight: 600;
455
+ font-size: 1.25rem;
456
+ }
457
+
458
+ .close-settings {
459
+ background: none;
460
+ border: none;
461
+ font-size: 1.25rem;
462
+ color: var(--gray);
463
+ cursor: pointer;
464
+ }
465
+
466
+ .settings-content {
467
+ flex: 1;
468
+ overflow-y: auto;
469
+ }
470
+
471
+ .settings-section {
472
+ margin-bottom: 0rem;
473
+ }
474
+
475
+ .settings-section-title {
476
+ font-weight: 600;
477
+ margin-bottom: 0.75rem;
478
+ color: var(--dark);
479
+ }
480
+
481
+ .setting-item {
482
+ margin-bottom: 1rem;
483
+ }
484
+
485
+ .setting-label {
486
+ display: block;
487
+ margin-bottom: 0.5rem;
488
+ font-size: 0.875rem;
489
+ color: var(--dark);
490
+ }
491
+
492
+ .setting-select, .setting-input {
493
+ width: 100%;
494
+ padding: 0.5rem 0.75rem;
495
+ border: 1px solid #e2e8f0;
496
+ border-radius: 0.5rem;
497
+ font-size: 0.875rem;
498
+ }
499
+
500
+ .toggle-switch {
501
+ position: relative;
502
+ display: inline-block;
503
+ width: 50px;
504
+ height: 24px;
505
+ }
506
+
507
+ .toggle-switch input {
508
+ opacity: 0;
509
+ width: 0;
510
+ height: 0;
511
+ }
512
+
513
+ .slider {
514
+ position: absolute;
515
+ cursor: pointer;
516
+ top: 0;
517
+ left: 0;
518
+ right: 0;
519
+ bottom: 0;
520
+ background-color: #ccc;
521
+ transition: .4s;
522
+ border-radius: 24px;
523
+ }
524
+
525
+ .slider:before {
526
+ position: absolute;
527
+ content: "";
528
+ height: 16px;
529
+ width: 16px;
530
+ left: 4px;
531
+ bottom: 4px;
532
+ background-color: white;
533
+ transition: .4s;
534
+ border-radius: 50%;
535
+ }
536
+
537
+ input:checked + .slider {
538
+ background-color: var(--primary);
539
+ }
540
+
541
+ input:checked + .slider:before {
542
+ transform: translateX(26px);
543
+ }
544
+
545
+ .toggle-label {
546
+ display: flex;
547
+ align-items: center;
548
+ gap: 0.5rem;
549
+ font-size: 0.875rem;
550
+ }
551
+
552
+ .overlay {
553
+ position: fixed;
554
+ top: 0;
555
+ left: 0;
556
+ width: 100%;
557
+ height: 100%;
558
+ background-color: rgba(0, 0, 0, 0.5);
559
+ z-index: 99;
560
+ opacity: 0;
561
+ pointer-events: none;
562
+ transition: opacity 0.3s ease;
563
+ }
564
+
565
+ .overlay.open {
566
+ opacity: 1;
567
+ pointer-events: all;
568
+ }
569
+
570
+ .markdown-content a {
571
+ color: var(--primary);
572
+ text-decoration: none;
573
+ }
574
+
575
+ .markdown-content a:hover {
576
+ text-decoration: underline;
577
+ }
578
+
579
+ .markdown-content code {
580
+ background-color: #f1f5f9;
581
+ padding: 0.2rem 0.4rem;
582
+ border-radius: 0.25rem;
583
+ font-family: monospace;
584
+ font-size: 0.9em;
585
+ }
586
+
587
+ .markdown-content pre {
588
+ background-color: #f8fafc;
589
+ padding: 0.75rem;
590
+ border-radius: 0.5rem;
591
+ overflow-x: auto;
592
+ margin: 0.5rem 0;
593
+ border: 1px solid #e2e8f0;
594
+ }
595
+
596
+ .markdown-content pre code {
597
+ background-color: transparent;
598
+ padding: 0;
599
+ }
600
+
601
+ .markdown-content ul, .markdown-content ol {
602
+ padding-left: 1.5rem;
603
+ margin: 0.5rem 0;
604
+ }
605
+
606
+ .markdown-content blockquote {
607
+ border-left: 3px solid var(--gray);
608
+ padding-left: 1rem;
609
+ margin: 0.5rem 0;
610
+ color: var(--gray);
611
+ }
612
+
613
+ .suggestions {
614
+ display: flex;
615
+ flex-wrap: wrap;
616
+ gap: 0.5rem;
617
+ margin-bottom: 1rem;
618
+ }
619
+
620
+ .suggestion-chip {
621
+ padding: 0.5rem 0.75rem;
622
+ background-color: #f1f5f9;
623
+ border-radius: 1rem;
624
+ font-size: 0.875rem;
625
+ cursor: pointer;
626
+ transition: background-color 0.2s;
627
+ }
628
+
629
+ .suggestion-chip:hover {
630
+ background-color: #e2e8f0;
631
+ }
632
+
633
+ /* Mobile menu button */
634
+ .mobile-menu-btn {
635
+ display: none;
636
+ background: none;
637
+ border: 2px solid #f9f4f4;
638
+ border-radius: 4px;
639
+ font-size: 1.5rem;
640
+ color: var(--dark);
641
+ cursor: pointer;
642
+ padding: 0.5rem 1rem;
643
+ margin-right: 1rem;
644
+ }
645
+
646
+ @media (max-width: 768px) {
647
+ .app-container {
648
+ padding: 0rem;
649
+ }
650
+
651
+ .main-content {
652
+ flex-direction: column;
653
+ }
654
+
655
+ .sidebar {
656
+ position: fixed;
657
+ top: 0;
658
+ left: -100%;
659
+ width: 80%;
660
+ max-width: 300px;
661
+ height: 100vh;
662
+ z-index: 101;
663
+ border-radius: 0;
664
+ transition: left 0.3s ease;
665
+ }
666
+
667
+ .sidebar.open {
668
+ left: 0;
669
+ }
670
+
671
+ .chat-container {
672
+ border-radius: 0;
673
+ }
674
+
675
+ .message {
676
+ max-width: 90%;
677
+ }
678
+
679
+ .settings-panel {
680
+ width: 100%;
681
+ right: -100%;
682
+ }
683
+
684
+ .settings-panel.open {
685
+ right: 0;
686
+ }
687
+
688
+ .mobile-menu-btn {
689
+ display: block;
690
+ }
691
+
692
+ .mobile-menu-overlay {
693
+ position: fixed;
694
+ top: 0;
695
+ left: 0;
696
+ width: 100%;
697
+ height: 100%;
698
+ background-color: rgba(0, 0, 0, 0.5);
699
+ z-index: 100;
700
+ opacity: 0;
701
+ pointer-events: none;
702
+ transition: opacity 0.3s ease;
703
+ }
704
+
705
+ .mobile-menu-overlay.open {
706
+ opacity: 1;
707
+ pointer-events: all;
708
+ }
709
+ }
710
+
711
+ /* Animation for new messages */
712
+ @keyframes fadeIn {
713
+ from {
714
+ opacity: 0;
715
+ transform: translateY(10px);
716
+ }
717
+ to {
718
+ opacity: 1;
719
+ transform: translateY(0);
720
+ }
721
+ }
722
+
723
+ .message {
724
+ animation: fadeIn 0.3s ease-out;
725
+ }
726
+
727
+ /* General panel styling */
728
+ .settings-panel {
729
+ max-width: 500px;
730
+ margin: 30px auto;
731
+ padding: 24px;
732
+ background: #ffffff;
733
+ border-radius: 12px;
734
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
735
+ font-family: 'Segoe UI', sans-serif;
736
+ color: #333;
737
+ }
738
+
739
+ /* Content layout */
740
+ .settings-content {
741
+ display: flex;
742
+ flex-direction: column;
743
+ gap: 32px;
744
+ }
745
+
746
+ /* Section titles */
747
+ .settings-section-title {
748
+ font-size: 18px;
749
+ font-weight: 600;
750
+ margin-bottom: 16px;
751
+ color: #222;
752
+ }
753
+
754
+ /* Section spacing */
755
+ .settings-section {
756
+ border-top: 1px solid #e0e0e0;
757
+ padding-top: 0px;
758
+ }
759
+
760
+ .settings-section:first-child {
761
+ border-top: none;
762
+ padding-top: 0;
763
+ }
764
+
765
+ /* Individual setting item */
766
+ .setting-item {
767
+ margin-bottom: 20px;
768
+ }
769
+
770
+ /* Label styles */
771
+ .setting-label {
772
+ display: block;
773
+ margin-bottom: 8px;
774
+ font-weight: 500;
775
+ color: #555;
776
+ }
777
+
778
+ /* Dropdown select */
779
+ .setting-select {
780
+ width: 100%;
781
+ padding: 10px 14px;
782
+ font-size: 15px;
783
+ border-radius: 8px;
784
+ border: 1px solid #ccc;
785
+ background-color: #fff;
786
+ transition: border-color 0.3s;
787
+ }
788
+
789
+ .setting-select:focus {
790
+ border-color: #4caf50;
791
+ outline: none;
792
+ }
793
+
794
+ /* Toggle switch */
795
+ .toggle-label {
796
+ display: flex;
797
+ align-items: center;
798
+ gap: 12px;
799
+ font-weight: 500;
800
+ cursor: pointer;
801
+ color: #555;
802
+ }
803
+
804
+ /* Hide checkbox */
805
+ .toggle-label input[type="checkbox"] {
806
+ display: none;
807
+ }
808
+
809
+ /* Switch slider style */
810
+ .slider {
811
+ width: 44px;
812
+ height: 22px;
813
+ background-color: #ccc;
814
+ border-radius: 22px;
815
+ position: relative;
816
+ transition: background-color 0.3s ease;
817
+ }
818
+
819
+ .slider::before {
820
+ content: "";
821
+ position: absolute;
822
+ width: 18px;
823
+ height: 18px;
824
+ left: 2px;
825
+ top: 2px;
826
+ background-color: white;
827
+ border-radius: 50%;
828
+ transition: transform 0.3s ease;
829
+ }
830
+
831
+ /* Toggle ON */
832
+ .toggle-label input:checked + .slider {
833
+ background-color: #4caf50;
834
+ }
835
+
836
+ .toggle-label input:checked + .slider::before {
837
+ transform: translateX(22px);
838
+ }
839
+ </style>
840
+ </head>
841
+ <body>
842
+ <div class="app-container">
843
+ <header>
844
+ <button class="mobile-menu-btn" id="mobileMenuBtn">
845
+ ☰
846
+ </button>
847
+ <div class="logo">
848
+ <i class="fas fa-robot"></i>
849
+ <span>Orion AI</span>
850
+ </div>
851
+ <button class="settings-btn" id="settingsBtn">
852
+ <i class="fas fa-cog"></i>
853
+ </button>
854
+ </header>
855
+
856
+ <div class="main-content">
857
+ <div class="sidebar" id="sidebar">
858
+ <div class="sidebar-header">
859
+ <div class="sidebar-title">Chats</div>
860
+ <button class="new-chat-btn" id="newChatBtn">
861
+ <i class="fas fa-plus"></i>
862
+ </button>
863
+ </div>
864
+ <div class="chat-list" id="chatList">
865
+ <!-- Chat history items will be added here -->
866
+ </div>
867
+ <div class="chat-footer">
868
+ Created by Abdullah Ali
869
+ </div>
870
+ </div>
871
+
872
+ <div class="chat-container">
873
+
874
+ <div class="chat-header">
875
+ <div class="chat-title" id="currentChatTitle">New Chat</div>
876
+ <div class="chat-status">
877
+ <div class="status-indicator"></div>
878
+ <span>hi</span>
879
+ </div>
880
+ </div>
881
+
882
+ <div class="chat-messages" id="chatMessages">
883
+ <!-- Messages will be inserted here -->
884
+ </div>
885
+
886
+ <div class="input-container">
887
+ <div class="suggestions">
888
+ <div class="suggestion-chip">What can you do?</div>
889
+ <div class="suggestion-chip">Explain AI in simple terms</div>
890
+ </div>
891
+ <div class="input-box">
892
+ <input type="text" class="input-field" id="messageInput" placeholder="Ask me anything..." autocomplete="off">
893
+ <button class="send-btn" id="sendBtn">
894
+ <i class="fas fa-paper-plane"></i>
895
+ </button>
896
+ </div>
897
+ <div class="action-buttons">
898
+ <button class="action-btn">
899
+ <i class="fas fa-microphone"></i>
900
+ Voice
901
+ </button>
902
+ <button class="action-btn">
903
+ <i class="fas fa-image"></i>
904
+ Image
905
+ </button>
906
+ <button class="action-btn" id="clearChatBtn">
907
+ <i class="fas fa-trash-alt"></i>
908
+ Clear
909
+ </button>
910
+ </div>
911
+ </div>
912
+ </div>
913
+ </div>
914
+ </div>
915
+
916
+ <!-- Mobile Menu Overlay -->
917
+ <div class="mobile-menu-overlay" id="mobileMenuOverlay"></div>
918
+
919
+ <!-- Settings Panel -->
920
+ <div class="settings-panel" id="settingsPanel">
921
+ <div class="settings-header">
922
+ <div class="settings-title">Settings</div>
923
+ <button class="close-settings" id="closeSettingsBtn">
924
+ <i class="fas fa-times"></i>
925
+ </button>
926
+ </div>
927
+
928
+ <div class="settings-content">
929
+ <div class="settings-section">
930
+ <div class="settings-section-title">AI Configuration</div>
931
+ <div class="setting-item">
932
+ <label class="setting-label">AI Model</label>
933
+ <select class="setting-select" id="aiModelSelect">
934
+ <option value="gpt-4">GPT-4 (Most capable)</option>
935
+ <option value="gpt-3.5">GPT-3.5 (Faster)</option>
936
+ <option value="claude-2">Claude 2</option>
937
+ <option value="llama-2">Llama 2</option>
938
+ </select>
939
+ </div>
940
+ <div class="setting-item">
941
+ <label class="setting-label">Response Style</label>
942
+ <select class="setting-select" id="responseStyleSelect">
943
+ <option value="default">Default</option>
944
+ <option value="concise">Concise</option>
945
+ <option value="detailed">Detailed</option>
946
+ <option value="creative">Creative</option>
947
+ </select>
948
+ </div>
949
+ </div>
950
+
951
+ <div class="settings-section">
952
+ <div class="settings-section-title">Appearance</div>
953
+ <div class="setting-item">
954
+ <label class="setting-label">Theme</label>
955
+ <select class="setting-select" id="themeSelect">
956
+ <option value="light">Light</option>
957
+ <option value="dark">Dark</option>
958
+ <option value="system">System</option>
959
+ </select>
960
+ </div>
961
+ <div class="setting-item">
962
+ <label class="toggle-label">
963
+ <input type="checkbox" id="animationsToggle" checked>
964
+ <span class="slider"></span>
965
+ Animations
966
+ </label>
967
+ </div>
968
+ </div>
969
+
970
+ <div class="settings-section">
971
+ <div class="settings-section-title">Privacy</div>
972
+ <div class="setting-item">
973
+ <label class="toggle-label">
974
+ <input type="checkbox" id="historyToggle" checked>
975
+ <span class="slider"></span>
976
+ Save chat history
977
+ </label>
978
+ </div>
979
+ <div class="setting-item">
980
+ <label class="toggle-label">
981
+ <input type="checkbox" id="analyticsToggle">
982
+ <span class="slider"></span>
983
+ Share usage analytics
984
+ </label>
985
+ </div>
986
+ </div>
987
+ </div>
988
+ </div>
989
+
990
+ <div class="overlay" id="overlay"></div>
991
+
992
+ <script>
993
+ // DOM Elements
994
+ const messageInput = document.getElementById('messageInput');
995
+ const sendBtn = document.getElementById('sendBtn');
996
+ const chatMessages = document.getElementById('chatMessages');
997
+ const settingsBtn = document.getElementById('settingsBtn');
998
+ const settingsPanel = document.getElementById('settingsPanel');
999
+ const closeSettingsBtn = document.getElementById('closeSettingsBtn');
1000
+ const overlay = document.getElementById('overlay');
1001
+ const clearChatBtn = document.getElementById('clearChatBtn');
1002
+ const suggestionChips = document.querySelectorAll('.suggestion-chip');
1003
+ const newChatBtn = document.getElementById('newChatBtn');
1004
+ const chatList = document.getElementById('chatList');
1005
+ const currentChatTitle = document.getElementById('currentChatTitle');
1006
+ // Corrected code for toggling the sidebar visibility
1007
+ const mobileMenuBtn = document.getElementById('mobileMenuBtn');
1008
+ const mobileMenuOverlay = document.getElementById('mobileMenuOverlay');
1009
+
1010
+ // Toggle mobile menu
1011
+ mobileMenuBtn.addEventListener('click', () => {
1012
+ sidebar.classList.toggle('open');
1013
+ mobileMenuOverlay.classList.toggle('open');
1014
+ });
1015
+
1016
+ // Close mobile menu when overlay is clicked
1017
+ mobileMenuOverlay.addEventListener('click', () => {
1018
+ sidebar.classList.remove('open');
1019
+ mobileMenuOverlay.classList.remove('open');
1020
+ });
1021
+
1022
+ // Configuration
1023
+ const PROXY_URL = "https://abdullahalioo-severr.hf.space/ask";
1024
+ let lastController = null;
1025
+ let isWaitingForResponse = false;
1026
+
1027
+ // Chat state
1028
+ let chats = [];
1029
+ let currentChatId = null;
1030
+
1031
+ // Initialize the app
1032
+ function initApp() {
1033
+ loadChats();
1034
+ if (chats.length === 0) {
1035
+ createNewChat();
1036
+ } else {
1037
+ loadChat(chats[0].id);
1038
+ }
1039
+ renderChatList();
1040
+ }
1041
+
1042
+ // Load chats from localStorage
1043
+ function loadChats() {
1044
+ const savedChats = localStorage.getItem('orionAI_chats');
1045
+ if (savedChats) {
1046
+ chats = JSON.parse(savedChats);
1047
+ }
1048
+ }
1049
+
1050
+ // Save chats to localStorage
1051
+ function saveChats() {
1052
+ localStorage.setItem('orionAI_chats', JSON.stringify(chats));
1053
+ }
1054
+
1055
+ // Create a new chat
1056
+ function createNewChat() {
1057
+ const newChat = {
1058
+ id: Date.now().toString(),
1059
+ title: 'New Chat',
1060
+ messages: [], // Ensure this is an empty array
1061
+ createdAt: new Date().toISOString(),
1062
+ updatedAt: new Date().toISOString()
1063
+ };
1064
+
1065
+ chats.unshift(newChat);
1066
+ saveChats();
1067
+ loadChat(newChat.id); // This will trigger the welcome message
1068
+ renderChatList();
1069
+ }
1070
+
1071
+ // Load a chat by ID
1072
+ function loadChat(chatId) {
1073
+ const chat = chats.find(c => c.id === chatId);
1074
+ if (!chat) return;
1075
+
1076
+ currentChatId = chatId;
1077
+ currentChatTitle.textContent = chat.title;
1078
+
1079
+ // Clear current messages
1080
+ chatMessages.innerHTML = '';
1081
+
1082
+ // Load messages
1083
+ if (chat.messages.length === 0) {
1084
+ addWelcomeMessage(); // Add welcome message if no messages exist
1085
+ } else {
1086
+ chat.messages.forEach(msg => {
1087
+ addMessage(msg.sender, msg.text, msg.isMarkdown, false);
1088
+ });
1089
+ }
1090
+
1091
+ // Update active state in chat list
1092
+ document.querySelectorAll('.chat-item').forEach(item => {
1093
+ item.classList.toggle('active', item.dataset.chatId === chatId);
1094
+ });
1095
+
1096
+ scrollToBottom();
1097
+ }
1098
+
1099
+ // Add welcome message
1100
+ function addWelcomeMessage() {
1101
+ addMessage('ai', `Hello! I'm Orion AI, your advanced assistant. How can I help you today?`);
1102
+ }
1103
+
1104
+ // Render chat list
1105
+ function renderChatList() {
1106
+ chatList.innerHTML = '';
1107
+
1108
+ chats.forEach(chat => {
1109
+ const chatItem = document.createElement('div');
1110
+ chatItem.className = `chat-item ${chat.id === currentChatId ? 'active' : ''}`;
1111
+ chatItem.dataset.chatId = chat.id;
1112
+ chatItem.textContent = chat.title;
1113
+
1114
+ chatItem.addEventListener('click', () => {
1115
+ loadChat(chat.id);
1116
+ closeMobileMenu();
1117
+ });
1118
+
1119
+ chatList.appendChild(chatItem);
1120
+ });
1121
+ }
1122
+
1123
+ // Update chat title based on first message
1124
+ function updateChatTitle(messageText) {
1125
+ if (!currentChatId) return;
1126
+
1127
+ const chat = chats.find(c => c.id === currentChatId);
1128
+ if (!chat) return;
1129
+
1130
+ // Only update if it's still the default title
1131
+ if (chat.title === 'New Chat') {
1132
+ // Take first 30 characters of the message
1133
+ const newTitle = messageText.length > 30
1134
+ ? messageText.substring(0, 30) + '...'
1135
+ : messageText;
1136
+
1137
+ chat.title = newTitle;
1138
+ currentChatTitle.textContent = newTitle;
1139
+ saveChats();
1140
+ renderChatList();
1141
+ }
1142
+ }
1143
+
1144
+ // Add a message to the current chat
1145
+ function addMessage(sender, text, isMarkdown = true, saveToHistory = true) {
1146
+ const messageDiv = document.createElement('div');
1147
+ messageDiv.className = `message message-${sender}`;
1148
+
1149
+ const avatarDiv = document.createElement('div');
1150
+ avatarDiv.className = `avatar avatar-${sender}`;
1151
+ avatarDiv.innerHTML = sender === 'ai' ? '<i class="fas fa-robot"></i>' : '<i class="fas fa-user"></i>';
1152
+
1153
+ const contentDiv = document.createElement('div');
1154
+ contentDiv.className = 'message-content';
1155
+
1156
+ const textDiv = document.createElement('div');
1157
+ textDiv.className = 'message-text';
1158
+
1159
+ if (isMarkdown) {
1160
+ textDiv.classList.add('markdown-content');
1161
+ textDiv.innerHTML = text;
1162
+ } else {
1163
+ textDiv.textContent = text;
1164
+ }
1165
+
1166
+ const metaDiv = document.createElement('div');
1167
+ metaDiv.className = 'message-meta';
1168
+
1169
+ const timeSpan = document.createElement('span');
1170
+ timeSpan.textContent = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
1171
+
1172
+ if (sender === 'ai') {
1173
+ const modelSpan = document.createElement('span');
1174
+ modelSpan.textContent = 'GPT-4';
1175
+ metaDiv.appendChild(modelSpan);
1176
+ }
1177
+
1178
+ metaDiv.appendChild(timeSpan);
1179
+ contentDiv.appendChild(textDiv);
1180
+ contentDiv.appendChild(metaDiv);
1181
+ messageDiv.appendChild(avatarDiv);
1182
+ messageDiv.appendChild(contentDiv);
1183
+
1184
+ chatMessages.appendChild(messageDiv);
1185
+ scrollToBottom();
1186
+
1187
+ // Save to chat history
1188
+ if (saveToHistory && currentChatId) {
1189
+ const chat = chats.find(c => c.id === currentChatId);
1190
+ if (chat) {
1191
+ chat.messages.push({
1192
+ sender,
1193
+ text,
1194
+ isMarkdown,
1195
+ timestamp: new Date().toISOString()
1196
+ });
1197
+ chat.updatedAt = new Date().toISOString();
1198
+ saveChats();
1199
+
1200
+ if (sender === 'user') {
1201
+ updateChatTitle(text);
1202
+ }
1203
+ }
1204
+ }
1205
+ }
1206
+
1207
+ // Show typing indicator
1208
+ function showTypingIndicator() {
1209
+ const typingDiv = document.createElement('div');
1210
+ typingDiv.className = 'typing-indicator';
1211
+ typingDiv.id = 'typingIndicator';
1212
+
1213
+ for (let i = 0; i < 3; i++) {
1214
+ const dot = document.createElement('div');
1215
+ dot.className = 'typing-dot';
1216
+ typingDiv.appendChild(dot);
1217
+ }
1218
+
1219
+ chatMessages.appendChild(typingDiv);
1220
+ scrollToBottom();
1221
+ }
1222
+
1223
+ // Hide typing indicator
1224
+ function hideTypingIndicator() {
1225
+ const typingIndicator = document.getElementById('typingIndicator');
1226
+ if (typingIndicator) {
1227
+ typingIndicator.remove();
1228
+ }
1229
+ }
1230
+
1231
+ // Scroll to bottom of chat
1232
+ function scrollToBottom() {
1233
+ chatMessages.scrollTop = chatMessages.scrollHeight;
1234
+ }
1235
+
1236
+ // Send message to AI
1237
+ async function sendMessage() {
1238
+ const message = messageInput.value.trim();
1239
+ if (!message || isWaitingForResponse) return;
1240
+
1241
+ // Add user message to chat
1242
+ addMessage('user', message, false);
1243
+ messageInput.value = '';
1244
+
1245
+ // Show typing indicator
1246
+ showTypingIndicator();
1247
+ isWaitingForResponse = true;
1248
+ sendBtn.disabled = true;
1249
+
1250
+ // Abort previous request if exists
1251
+ if (lastController) lastController.abort();
1252
+ const controller = new AbortController();
1253
+ lastController = controller;
1254
+
1255
+ try {
1256
+ const startTime = performance.now();
1257
+
1258
+ const response = await fetch(PROXY_URL, {
1259
+ method: 'POST',
1260
+ headers: { 'Content-Type': 'application/json' },
1261
+ body: JSON.stringify({ question: message }),
1262
+ signal: controller.signal
1263
+ });
1264
+
1265
+ if (!response.ok) throw new Error(await response.text());
1266
+
1267
+ const data = await response.json();
1268
+ const latency = performance.now() - startTime;
1269
+
1270
+ // Hide typing indicator
1271
+ hideTypingIndicator();
1272
+
1273
+ // Add AI response to chat
1274
+ addMessage('ai', data.answer);
1275
+
1276
+ } catch (err) {
1277
+ if (err.name !== 'AbortError') {
1278
+ hideTypingIndicator();
1279
+ addMessage('ai', `<span style="color:var(--error)">Error: ${err.message || 'Failed to get response'}</span>`, false);
1280
+ }
1281
+ } finally {
1282
+ isWaitingForResponse = false;
1283
+ sendBtn.disabled = false;
1284
+ }
1285
+ }
1286
+
1287
+ // Clear current chat
1288
+ function clearCurrentChat() {
1289
+ if (!currentChatId) return;
1290
+
1291
+ const chat = chats.find(c => c.id === currentChatId);
1292
+ if (chat) {
1293
+ chat.messages = [];
1294
+ chat.updatedAt = new Date().toISOString();
1295
+ saveChats();
1296
+ }
1297
+
1298
+ chatMessages.innerHTML = '';
1299
+ addWelcomeMessage();
1300
+ }
1301
+
1302
+ // Toggle mobile menu
1303
+ function toggleMobileMenu() {
1304
+ sidebarElement.classList.toggle('open');
1305
+ mobileMenuOverlay.classList.toggle('open');
1306
+ }
1307
+
1308
+ // Close mobile menu
1309
+ function closeMobileMenu() {
1310
+ sidebarElement.classList.remove('open');
1311
+ mobileMenuOverlay.classList.remove('open');
1312
+ }
1313
+
1314
+ // Event Listeners
1315
+ sendBtn.addEventListener('click', sendMessage);
1316
+
1317
+ messageInput.addEventListener('keypress', (e) => {
1318
+ if (e.key === 'Enter' && !e.shiftKey) {
1319
+ e.preventDefault();
1320
+ sendMessage();
1321
+ }
1322
+ });
1323
+
1324
+ // Settings panel toggle
1325
+ settingsBtn.addEventListener('click', () => {
1326
+ settingsPanel.classList.add('open');
1327
+ overlay.classList.add('open');
1328
+ });
1329
+
1330
+ closeSettingsBtn.addEventListener('click', () => {
1331
+ settingsPanel.classList.remove('open');
1332
+ overlay.classList.remove('open');
1333
+ });
1334
+
1335
+ overlay.addEventListener('click', () => {
1336
+ settingsPanel.classList.remove('open');
1337
+ overlay.classList.remove('open');
1338
+ });
1339
+
1340
+ // Clear chat
1341
+ clearChatBtn.addEventListener('click', clearCurrentChat);
1342
+
1343
+ // New chat button
1344
+ newChatBtn.addEventListener('click', createNewChat);
1345
+
1346
+ // Suggestion chips
1347
+ suggestionChips.forEach(chip => {
1348
+ chip.addEventListener('click', () => {
1349
+ messageInput.value = chip.textContent;
1350
+ messageInput.focus();
1351
+ });
1352
+ });
1353
+ // DOM Elements
1354
+ const menuBtn = document.getElementById('menuBtn');
1355
+ const sidebarElement = document.querySelector('.sidebar');
1356
+
1357
+ // Toggle sidebar visibility
1358
+ menuBtn.addEventListener('click', () => {
1359
+ sidebar.classList.toggle('open');
1360
+ });
1361
+
1362
+
1363
+ // Initialize app
1364
+ function initApp() {
1365
+ loadChats();
1366
+ if (chats.length === 0) {
1367
+ createNewChat(); // This should create a new chat and trigger the welcome message
1368
+ } else {
1369
+ loadChat(chats[0].id);
1370
+ }
1371
+ renderChatList();
1372
+ }
1373
+
1374
+ messageInput.focus();
1375
+ </script>
1376
+ </body>
1377
+ </html>