Hugging Face's logo

Spaces:
nixaut-codelabs
/
neural-nexus-ai
Running

App Files Community
nixaut-codelabs commited on
Commit
9591b2e
·
verified ·
1 Parent(s): 92f8bf5

Sidebar fazla kompleks. Çok daha sade hale getir. Neredeyse herşeyi kaldır. Sadece sohbet geçmişi, new chat ve media butonları, hesap butonu (hesap simgesiyle) falan. Sitenin temasına rengine uygun olmalı ayrıca.

Browse files
Files changed (1) hide show
  1. components/sidebar.js +113 -905
components/sidebar.js CHANGED
@@ -1,3 +1,4 @@
 
1
  class CustomSidebar extends HTMLElement {
2
  connectedCallback() {
3
  this.attachShadow({ mode: 'open' });
@@ -25,87 +26,6 @@ class CustomSidebar extends HTMLElement {
25
  background: rgba(17, 24, 39, 0.98);
26
  }
27
 
28
- .nav-title {
29
- font-size: 0.75rem;
30
- font-weight: 600;
31
- color: #71717a;
32
- text-transform: uppercase;
33
- letter-spacing: 0.05em;
34
- padding: 0 1.5rem;
35
- margin-bottom: 0.75rem;
36
- display: flex;
37
- align-items: center;
38
- justify-content: space-between;
39
- }
40
-
41
- .nav-title-actions {
42
- display: flex;
43
- gap: 0.5rem;
44
- }
45
-
46
- .nav-title-btn {
47
- padding: 0.25rem 0.5rem;
48
- background: rgba(255, 255, 255, 0.05);
49
- border: none;
50
- border-radius: 4px;
51
- color: #9ca3af;
52
- cursor: pointer;
53
- font-size: 0.625rem;
54
- transition: all 0.2s ease;
55
- }
56
-
57
- .nav-title-btn:hover {
58
- background: rgba(255, 255, 255, 0.1);
59
- color: #ffffff;
60
- }
61
-
62
- .nav-item {
63
- display: flex;
64
- align-items: center;
65
- gap: 0.75rem;
66
- padding: 0.875rem 1.5rem;
67
- color: #d1d5db;
68
- text-decoration: none;
69
- transition: all 0.2s ease;
70
- position: relative;
71
- cursor: pointer;
72
- border-radius: 0 12px 12px 0;
73
- margin-right: 0.75rem;
74
- }
75
-
76
- .nav-item:hover {
77
- background: rgba(255, 255, 255, 0.08);
78
- color: #ffffff;
79
- }
80
-
81
- .nav-item.active {
82
- background: rgba(255, 255, 255, 0.12);
83
- color: #ffffff;
84
- }
85
-
86
- .nav-item.active::before {
87
- content: '';
88
- position: absolute;
89
- left: 0;
90
- top: 50%;
91
- transform: translateY(-50%);
92
- bottom: auto;
93
- width: 3px;
94
- height: 24px;
95
- background: linear-gradient(135deg, #ffffff 0%, #9ca3af 100%);
96
- border-radius: 0 3px 3px 0;
97
- }
98
-
99
- .nav-icon {
100
- width: 20px;
101
- height: 20px;
102
- transition: transform 0.2s ease;
103
- }
104
-
105
- .nav-item:hover .nav-icon {
106
- transform: scale(1.1);
107
- }
108
-
109
  .new-chat-btn {
110
  margin: 0 1.5rem 1.5rem;
111
  padding: 0.875rem 1.5rem;
@@ -135,80 +55,22 @@ class CustomSidebar extends HTMLElement {
135
  }
136
 
137
  .chat-history-section {
138
- margin-bottom: 1rem;
139
- }
140
-
141
- .search-chats {
142
- margin: 0 1.5rem 0.75rem;
143
- position: relative;
144
  }
145
 
146
- .search-chats input {
147
- width: 100%;
148
- padding: 0.5rem 0.75rem 0.5rem 2rem;
149
- background: rgba(255, 255, 255, 0.05);
150
- border: 1px solid rgba(255, 255, 255, 0.1);
151
- border-radius: 8px;
152
- color: #ffffff;
153
  font-size: 0.75rem;
154
- outline: none;
155
- transition: all 0.2s ease;
156
- }
157
-
158
- .search-chats input:focus {
159
- background: rgba(255, 255, 255, 0.08);
160
- border-color: rgba(255, 255, 255, 0.2);
161
- }
162
-
163
- .search-chats input::placeholder {
164
- color: #71717a;
165
- }
166
-
167
- .search-icon {
168
- position: absolute;
169
- left: 0.5rem;
170
- top: 50%;
171
- transform: translateY(-50%);
172
- width: 14px;
173
- height: 14px;
174
  color: #71717a;
175
- }
176
-
177
- .chat-filters {
178
- display: flex;
179
- gap: 0.25rem;
180
- margin: 0 1.5rem 0.75rem;
181
- padding: 0.25rem;
182
- background: rgba(255, 255, 255, 0.05);
183
- border-radius: 8px;
184
- }
185
-
186
- .filter-btn {
187
- flex: 1;
188
- padding: 0.375rem 0.5rem;
189
- background: transparent;
190
- border: none;
191
- border-radius: 6px;
192
- color: #9ca3af;
193
- font-size: 0.625rem;
194
- cursor: pointer;
195
- transition: all 0.2s ease;
196
- }
197
-
198
- .filter-btn.active {
199
- background: rgba(255, 255, 255, 0.1);
200
- color: #ffffff;
201
- }
202
-
203
- .filter-btn:hover:not(.active) {
204
- background: rgba(255, 255, 255, 0.05);
205
- color: #d1d5db;
206
  }
207
 
208
  .chat-history {
209
- max-height: 320px;
210
  overflow-y: auto;
211
- margin-bottom: 1rem;
212
  padding-right: 0.5rem;
213
  }
214
 
@@ -221,7 +83,7 @@ class CustomSidebar extends HTMLElement {
221
  }
222
 
223
  .chat-history::-webkit-scrollbar-thumb {
224
- background: #4b5563;
225
  border-radius: 2px;
226
  }
227
 
@@ -250,126 +112,82 @@ class CustomSidebar extends HTMLElement {
250
  background: rgba(255, 255, 255, 0.06);
251
  }
252
 
253
- .chat-item-menu {
254
- position: absolute;
255
- right: 0.5rem;
256
- top: 50%;
257
- transform: translateY(-50%);
258
- opacity: 0;
259
- transition: opacity 0.2s ease;
260
- }
261
-
262
- .chat-item:hover .chat-item-menu {
263
- opacity: 1;
264
- }
265
-
266
- .chat-menu-btn {
267
- padding: 0.25rem;
268
- background: transparent;
269
- border: none;
270
- color: #71717a;
271
- cursor: pointer;
272
- border-radius: 4px;
273
- transition: all 0.2s ease;
274
  }
275
 
276
- .chat-menu-btn:hover {
277
- background: rgba(255, 255, 255, 0.1);
278
- color: #ffffff;
279
  }
280
 
281
- .chat-dropdown {
282
- position: absolute;
283
- right: 0;
284
- top: 100%;
285
- background: rgba(31, 41, 55, 0.95);
286
- backdrop-filter: blur(20px);
287
- border: 1px solid rgba(255, 255, 255, 0.1);
288
- border-radius: 8px;
289
- padding: 0.25rem;
290
- min-width: 160px;
291
- z-index: 50;
292
- display: none;
293
  }
294
 
295
- .chat-dropdown.show {
296
- display: block;
297
  }
298
 
299
- .dropdown-item {
300
- padding: 0.5rem 0.75rem;
301
- color: #d1d5db;
302
- font-size: 0.75rem;
303
- cursor: pointer;
304
- border-radius: 4px;
305
- transition: all 0.2s ease;
306
  display: flex;
307
  align-items: center;
308
- gap: 0.5rem;
 
 
 
 
 
 
 
 
 
 
 
309
  }
310
 
311
- .dropdown-item:hover {
312
- background: rgba(255, 255, 255, 0.1);
313
  color: #ffffff;
314
  }
315
 
316
- .dropdown-item svg {
317
- width: 14px;
318
- height: 14px;
319
- }
320
-
321
- .chat-tags {
322
- display: flex;
323
- gap: 0.25rem;
324
- margin-top: 0.25rem;
325
- margin-left: 1.5rem;
326
- }
327
-
328
- .chat-tag {
329
- padding: 0.125rem 0.375rem;
330
- background: rgba(99, 102, 241, 0.2);
331
- border: 1px solid rgba(99, 102, 241, 0.3);
332
- border-radius: 4px;
333
- color: #a5b4fc;
334
- font-size: 0.625rem;
335
- transition: all 0.2s ease;
336
- }
337
-
338
- .chat-tag:hover {
339
- background: rgba(99, 102, 241, 0.3);
340
- color: #c7d2fe;
341
  }
342
 
343
- .divider {
344
- height: 1px;
345
- background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
346
- margin: 1.5rem 1.5rem 1rem;
347
  }
348
 
349
- .account-section {
 
 
 
350
  padding: 1rem 1.5rem;
351
  background: rgba(255, 255, 255, 0.04);
352
  border-radius: 12px;
353
- margin: 0 1.5rem 1rem;
354
  cursor: pointer;
355
  transition: all 0.2s ease;
356
- position: relative;
 
 
 
357
  }
358
 
359
- .account-section:hover {
360
  background: rgba(255, 255, 255, 0.08);
 
361
  }
362
 
363
- .account-header {
364
- display: flex;
365
- align-items: center;
366
- gap: 0.75rem;
367
- margin-bottom: 0.75rem;
368
- }
369
-
370
- .avatar {
371
- width: 40px;
372
- height: 40px;
373
  border-radius: 50%;
374
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
375
  display: flex;
@@ -378,18 +196,6 @@ class CustomSidebar extends HTMLElement {
378
  color: white;
379
  font-weight: 600;
380
  font-size: 0.875rem;
381
- position: relative;
382
- }
383
-
384
- .status-indicator {
385
- position: absolute;
386
- bottom: 0;
387
- right: 0;
388
- width: 12px;
389
- height: 12px;
390
- background: #10b981;
391
- border: 2px solid rgba(17, 24, 39, 0.95);
392
- border-radius: 50%;
393
  }
394
 
395
  .account-info {
@@ -408,85 +214,6 @@ class CustomSidebar extends HTMLElement {
408
  font-size: 0.75rem;
409
  }
410
 
411
- .account-plan {
412
- display: flex;
413
- align-items: center;
414
- justify-content: space-between;
415
- margin-top: 0.5rem;
416
- }
417
-
418
- .plan-info {
419
- display: flex;
420
- align-items: center;
421
- gap: 0.5rem;
422
- }
423
-
424
- .plan-text {
425
- color: #9ca3af;
426
- font-size: 0.75rem;
427
- }
428
-
429
- .badge {
430
- background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
431
- color: #ffffff;
432
- padding: 0.25rem 0.625rem;
433
- border-radius: 6px;
434
- font-size: 0.625rem;
435
- font-weight: 600;
436
- text-transform: uppercase;
437
- letter-spacing: 0.05em;
438
- }
439
-
440
- .usage-stats {
441
- display: grid;
442
- grid-template-columns: 1fr 1fr;
443
- gap: 0.5rem;
444
- margin-top: 0.75rem;
445
- padding-top: 0.75rem;
446
- border-top: 1px solid rgba(255, 255, 255, 0.1);
447
- }
448
-
449
- .stat-item {
450
- text-align: center;
451
- }
452
-
453
- .stat-value {
454
- color: #ffffff;
455
- font-size: 0.875rem;
456
- font-weight: 600;
457
- }
458
-
459
- .stat-label {
460
- color: #71717a;
461
- font-size: 0.625rem;
462
- margin-top: 0.125rem;
463
- }
464
-
465
- .account-actions {
466
- display: flex;
467
- gap: 0.5rem;
468
- margin-top: 0.75rem;
469
- }
470
-
471
- .account-btn {
472
- flex: 1;
473
- padding: 0.375rem 0.5rem;
474
- background: rgba(255, 255, 255, 0.05);
475
- border: 1px solid rgba(255, 255, 255, 0.1);
476
- border-radius: 6px;
477
- color: #d1d5db;
478
- font-size: 0.625rem;
479
- cursor: pointer;
480
- transition: all 0.2s ease;
481
- text-align: center;
482
- }
483
-
484
- .account-btn:hover {
485
- background: rgba(255, 255, 255, 0.1);
486
- color: #ffffff;
487
- border-color: rgba(255, 255, 255, 0.2);
488
- }
489
-
490
  @media (max-width: 768px) {
491
  .sidebar {
492
  transform: translateX(-100%);
@@ -509,657 +236,138 @@ class CustomSidebar extends HTMLElement {
509
 
510
  <!-- Chat History Section -->
511
  <div class="chat-history-section">
512
- <div class="nav-title">
513
- <span>Chat History</span>
514
- <div class="nav-title-actions">
515
- <button class="nav-title-btn" onclick="sortChats()">Sort</button>
516
- <button class="nav-title-btn" onclick="toggleArchived()">Archive</button>
517
- </div>
518
- </div>
519
-
520
- <!-- Search Chats -->
521
- <div class="search-chats">
522
- <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
523
- <circle cx="11" cy="11" r="8"></circle>
524
- <path d="m21 21-4.35-4.35"></path>
525
- </svg>
526
- <input type="text" placeholder="Search conversations..." oninput="searchChats(this.value)">
527
- </div>
528
-
529
- <!-- Chat Filters -->
530
- <div class="chat-filters">
531
- <button class="filter-btn active" onclick="filterChats('all', this)">All</button>
532
- <button class="filter-btn" onclick="filterChats('personal', this)">Personal</button>
533
- <button class="filter-btn" onclick="filterChats('work', this)">Work</button>
534
- <button class="filter-btn" onclick="filterChats('starred', this)">Starred</button>
535
- </div>
536
-
537
- <!-- Chat Items -->
538
  <div class="chat-history" id="recentChats">
539
  <div class="chat-item" data-id="1">
540
  <div class="chat-item-content" onclick="loadChatHistory(1)">
541
- <svg class="history-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
542
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
543
  </svg>
544
  <span class="chat-title">Website Redesign Discussion</span>
545
  </div>
546
- <div class="chat-item-menu">
547
- <button class="chat-menu-btn" onclick="toggleChatMenu(1, event)">
548
- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
549
- <circle cx="12" cy="12" r="1"></circle>
550
- <circle cx="19" cy="12" r="1"></circle>
551
- <circle cx="5" cy="12" r="1"></circle>
552
- </svg>
553
- </button>
554
- <div class="chat-dropdown" id="chat-menu-1">
555
- <div class="dropdown-item" onclick="renameChat(1)">
556
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
557
- <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
558
- <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
559
- </svg>
560
- Rename
561
- </div>
562
- <div class="dropdown-item" onclick="duplicateChat(1)">
563
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
564
- <rect x="9" y="9" width="13" height="13" rx="2"/>
565
- <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
566
- </svg>
567
- Duplicate
568
- </div>
569
- <div class="dropdown-item" onclick="toggleStarChat(1)">
570
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
571
- <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
572
- </svg>
573
- Star
574
- </div>
575
- <div class="dropdown-item" onclick="shareChat(1)">
576
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
577
- <circle cx="18" cy="5" r="3"/>
578
- <circle cx="6" cy="12" r="3"/>
579
- <circle cx="18" cy="19" r="3"/>
580
- <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
581
- <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
582
- </svg>
583
- Share
584
- </div>
585
- <div class="dropdown-item" onclick="exportChat(1)">
586
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
587
- <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
588
- <polyline points="7 10 12 15 17 10"/>
589
- <line x1="12" y1="15" x2="12" y2="3"/>
590
- </svg>
591
- Export
592
- </div>
593
- <div class="dropdown-item" onclick="archiveChat(1)">
594
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
595
- <polyline points="21 8 21 21 3 21 3 8"/>
596
- <rect x="1" y="3" width="22" height="5"/>
597
- <line x1="10" y1="12" x2="14" y2="12"/>
598
- </svg>
599
- Archive
600
- </div>
601
- <div class="dropdown-item" onclick="deleteChat(1)" style="color: #ef4444;">
602
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
603
- <polyline points="3 6 5 6 21 6"/>
604
- <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
605
- </svg>
606
- Delete
607
- </div>
608
- </div>
609
- </div>
610
- <div class="chat-tags">
611
- <span class="chat-tag">work</span>
612
- <span class="chat-tag">design</span>
613
- </div>
614
  </div>
615
 
616
  <div class="chat-item" data-id="2">
617
  <div class="chat-item-content" onclick="loadChatHistory(2)">
618
- <svg class="history-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
619
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
620
  </svg>
621
  <span class="chat-title">JavaScript Performance Tips</span>
622
  </div>
623
- <div class="chat-item-menu">
624
- <button class="chat-menu-btn" onclick="toggleChatMenu(2, event)">
625
- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
626
- <circle cx="12" cy="12" r="1"></circle>
627
- <circle cx="19" cy="12" r="1"></circle>
628
- <circle cx="5" cy="12" r="1"></circle>
629
- </svg>
630
- </button>
631
- <div class="chat-dropdown" id="chat-menu-2">
632
- <div class="dropdown-item" onclick="renameChat(2)">
633
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
634
- <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
635
- <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
636
- </svg>
637
- Rename
638
- </div>
639
- <div class="dropdown-item" onclick="duplicateChat(2)">
640
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
641
- <rect x="9" y="9" width="13" height="13" rx="2"/>
642
- <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
643
- </svg>
644
- Duplicate
645
- </div>
646
- <div class="dropdown-item" onclick="toggleStarChat(2)">
647
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
648
- <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
649
- </svg>
650
- Star
651
- </div>
652
- <div class="dropdown-item" onclick="makePublicChat(2)">
653
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
654
- <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
655
- <circle cx="12" cy="12" r="3"/>
656
- </svg>
657
- Make Public
658
- </div>
659
- <div class="dropdown-item" onclick="archiveChat(2)">
660
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
661
- <polyline points="21 8 21 21 3 21 3 8"/>
662
- <rect x="1" y="3" width="22" height="5"/>
663
- <line x1="10" y1="12" x2="14" y2="12"/>
664
- </svg>
665
- Archive
666
- </div>
667
- <div class="dropdown-item" onclick="deleteChat(2)" style="color: #ef4444;">
668
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
669
- <polyline points="3 6 5 6 21 6"/>
670
- <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
671
- </svg>
672
- Delete
673
- </div>
674
- </div>
675
- </div>
676
- <div class="chat-tags">
677
- <span class="chat-tag">personal</span>
678
- <span class="chat-tag">coding</span>
679
- </div>
680
  </div>
681
 
682
  <div class="chat-item" data-id="3">
683
  <div class="chat-item-content" onclick="loadChatHistory(3)">
684
- <svg class="history-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
685
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
686
  </svg>
687
  <span class="chat-title">React Architecture Planning</span>
688
  </div>
689
- <div class="chat-item-menu">
690
- <button class="chat-menu-btn" onclick="toggleChatMenu(3, event)">
691
- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
692
- <circle cx="12" cy="12" r="1"></circle>
693
- <circle cx="19" cy="12" r="1"></circle>
694
- <circle cx="5" cy="12" r="1"></circle>
695
- </svg>
696
- </button>
697
- <div class="chat-dropdown" id="chat-menu-3">
698
- <div class="dropdown-item" onclick="renameChat(3)">
699
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
700
- <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
701
- <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
702
- </svg>
703
- Rename
704
- </div>
705
- <div class="dropdown-item" onclick="togglePinChat(3)">
706
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
707
- <line x1="12" y1="17" x2="12" y2="22"/>
708
- <path d="M5 17h14v-1.76a2 2 0 00-1.11-1.79l-1.78-.9a2 2 0 01-1.11-1.79V7a5 5 0 00-10 0v4.76a2 2 0 01-1.11 1.79l-1.78.9A2 2 0 005 15.24V17z"/>
709
- </svg>
710
- Pin to Top
711
- </div>
712
- <div class="dropdown-item" onclick="shareChat(3)">
713
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
714
- <circle cx="18" cy="5" r="3"/>
715
- <circle cx="6" cy="12" r="3"/>
716
- <circle cx="18" cy="19" r="3"/>
717
- <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
718
- <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
719
- </svg>
720
- Share
721
- </div>
722
- <div class="dropdown-item" onclick="exportChat(3)">
723
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
724
- <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
725
- <polyline points="7 10 12 15 17 10"/>
726
- <line x1="12" y1="15" x2="12" y2="3"/>
727
- </svg>
728
- Export
729
- </div>
730
- <div class="dropdown-item" onclick="deleteChat(3)" style="color: #ef4444;">
731
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
732
- <polyline points="3 6 5 6 21 6"/>
733
- <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
734
- </svg>
735
- Delete
736
- </div>
737
- </div>
738
- </div>
739
- <div class="chat-tags">
740
- <span class="chat-tag">work</span>
741
- <span class="chat-tag">architect</span>
742
- <span class="chat-tag">important</span>
743
- </div>
744
  </div>
745
 
746
  <div class="chat-item" data-id="4">
747
  <div class="chat-item-content" onclick="loadChatHistory(4)">
748
- <svg class="history-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
749
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
750
  </svg>
751
  <span class="chat-title">Machine Learning Basics</span>
752
  </div>
753
- <div class="chat-item-menu">
754
- <button class="chat-menu-btn" onclick="toggleChatMenu(4, event)">
755
- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
756
- <circle cx="12" cy="12" r="1"></circle>
757
- <circle cx="19" cy="12" r="1"></circle>
758
- <circle cx="5" cy="12" r="1"></circle>
759
- </svg>
760
- </button>
761
- <div class="chat-dropdown" id="chat-menu-4">
762
- <div class="dropdown-item" onclick="renameChat(4)">
763
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
764
- <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
765
- <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
766
- </svg>
767
- Rename
768
- </div>
769
- <div class="dropdown-item" onclick="duplicateChat(4)">
770
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
771
- <rect x="9" y="9" width="13" height="13" rx="2"/>
772
- <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
773
- </svg>
774
- Duplicate
775
- </div>
776
- <div class="dropdown-item" onclick="toggleStarChat(4)">
777
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
778
- <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
779
- </svg>
780
- Star
781
- </div>
782
- <div class="dropdown-item" onclick="archiveChat(4)">
783
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
784
- <polyline points="21 8 21 21 3 21 3 8"/>
785
- <rect x="1" y="3" width="22" height="5"/>
786
- <line x1="10" y1="12" x2="14" y2="12"/>
787
- </svg>
788
- Archive
789
- </div>
790
- <div class="dropdown-item" onclick="deleteChat(4)" style="color: #ef4444;">
791
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
792
- <polyline points="3 6 5 6 21 6"/>
793
- <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
794
- </svg>
795
- Delete
796
- </div>
797
- </div>
798
- </div>
799
- <div class="chat-tags">
800
- <span class="chat-tag">learning</span>
801
- <span class="chat-tag">ai</span>
802
- </div>
803
  </div>
804
 
805
  <div class="chat-item" data-id="5">
806
  <div class="chat-item-content" onclick="loadChatHistory(5)">
807
- <svg class="history-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
808
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
809
  </svg>
810
  <span class="chat-title">API Best Practices Guide</span>
811
  </div>
812
- <div class="chat-item-menu">
813
- <button class="chat-menu-btn" onclick="toggleChatMenu(5, event)">
814
- <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
815
- <circle cx="12" cy="12" r="1"></circle>
816
- <circle cx="19" cy="12" r="1"></circle>
817
- <circle cx="5" cy="12" r="1"></circle>
818
- </svg>
819
- </button>
820
- <div class="chat-dropdown" id="chat-menu-5">
821
- <div class="dropdown-item" onclick="renameChat(5)">
822
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
823
- <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
824
- <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
825
- </svg>
826
- Rename
827
- </div>
828
- <div class="dropdown-item" onclick="togglePinChat(5)">
829
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
830
- <line x1="12" y1="17" x2="12" y2="22"/>
831
- <path d="M5 17h14v-1.76a2 2 0 00-1.11-1.79l-1.78-.9a2 2 0 01-1.11-1.79V7a5 5 0 00-10 0v4.76a2 2 0 01-1.11 1.79l-1.78.9A2 2 0 005 15.24V17z"/>
832
- </svg>
833
- Pin to Top
834
- </div>
835
- <div class="dropdown-item" onclick="shareChat(5)">
836
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
837
- <circle cx="18" cy="5" r="3"/>
838
- <circle cx="6" cy="12" r="3"/>
839
- <circle cx="18" cy="19" r="3"/>
840
- <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
841
- <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
842
- </svg>
843
- Share
844
- </div>
845
- <div class="dropdown-item" onclick="makePublicChat(5)">
846
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
847
- <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
848
- <circle cx="12" cy="12" r="3"/>
849
- </svg>
850
- Make Public
851
- </div>
852
- <div class="dropdown-item" onclick="deleteChat(5)" style="color: #ef4444;">
853
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
854
- <polyline points="3 6 5 6 21 6"/>
855
- <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
856
- </svg>
857
- Delete
858
- </div>
859
- </div>
860
- </div>
861
- <div class="chat-tags">
862
- <span class="chat-tag">work</span>
863
- <span class="chat-tag">api</span>
864
- <span class="chat-tag">documentation</span>
865
- </div>
866
  </div>
867
  </div>
868
  </div>
869
 
870
  <div class="divider"></div>
871
 
872
- <!-- Resources Section -->
873
- <div class="nav-section">
874
- <div class="nav-title">Resources</div>
875
- <a href="/docs" class="nav-item">
876
- <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
877
- <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
878
- <path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/>
879
- </svg>
880
- Documentation
881
- </a>
882
- <a href="/tutorials" class="nav-item">
883
- <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
884
- <polygon points="5 3 19 12 5 21 5 3"/>
885
- </svg>
886
- Tutorials
887
- </a>
888
- <a href="/templates" class="nav-item">
889
- <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
890
- <rect x="3" y="3" width="18" height="18" rx="2"/>
891
- <path d="M3 9h18M9 21V9"/>
892
- </svg>
893
- Templates
894
- </a>
895
- <a href="/blog" class="nav-item">
896
- <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
897
- <path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/>
898
- <path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 003-3h7z"/>
899
- </svg>
900
- Blog
901
- </a>
902
- <a href="/community" class="nav-item">
903
- <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
904
- <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2m18-10a4 4 0 11-8 0 4 4 0 018 0z"/>
905
- <path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/>
906
- </svg>
907
- Community
908
- </a>
909
- </div>
910
-
911
- <div class="divider"></div>
912
-
913
- <!-- Tools Section -->
914
- <div class="nav-section">
915
- <div class="nav-title">Tools</div>
916
- <a href="/chat" class="nav-item active">
917
- <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
918
- <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
919
- </svg>
920
- Chat Interface
921
- </a>
922
- <a href="/files" class="nav-item">
923
- <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
924
  <path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"/>
925
  <path d="M13 2v7h7"/>
926
  </svg>
927
- File Manager
928
- </a>
929
- <a href="/analytics" class="nav-item">
930
- <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
931
- <path d="M18 20V10m-6 10V4M6 20v-6"/>
 
 
932
  </svg>
933
- Analytics
934
- </a>
935
- <a href="/integrations" class="nav-item">
936
- <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
937
- <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
 
 
938
  </svg>
939
- Integrations
940
- </a>
941
- <a href="/playground" class="nav-item">
942
- <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
943
- <circle cx="12" cy="12" r="3"/>
944
- <path d="M12 1v6m0 6v6m4.22-13.22l4.24 4.24M1.54 9.96l4.24 4.24"/>
945
- </svg>
946
- Playground
947
- </a>
948
- <a href="/knowledge" class="nav-item">
949
- <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
950
- <path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
951
- </svg>
952
- Knowledge Base
953
- </a>
954
  </div>
955
 
956
  <div class="divider"></div>
957
 
958
- <!-- Account Section -->
959
- <div class="account-section">
960
- <div class="account-header">
961
- <div class="avatar">
962
- U
963
- <div class="status-indicator"></div>
964
- </div>
965
- <div class="account-info">
966
- <div class="account-name">User Name</div>
967
- <div class="account-email">[email protected]</div>
968
- </div>
969
  </div>
970
- <div class="account-plan">
971
- <div class="plan-info">
972
- <span class="plan-text">Current Plan:</span>
973
- <span class="badge">Pro</span>
974
- </div>
975
- </div>
976
- <div class="usage-stats">
977
- <div class="stat-item">
978
- <div class="stat-value">2,847</div>
979
- <div class="stat-label">Messages</div>
980
- </div>
981
- <div class="stat-item">
982
- <div class="stat-value">84%</div>
983
- <div class="stat-label">API Usage</div>
984
- </div>
985
- <div class="stat-item">
986
- <div class="stat-value">12</div>
987
- <div class="stat-label">Projects</div>
988
- </div>
989
- <div class="stat-item">
990
- <div class="stat-value">47GB</div>
991
- <div class="stat-label">Storage</div>
992
- </div>
993
- </div>
994
- <div class="account-actions">
995
- <button class="account-btn" onclick="openProfile()">Profile</button>
996
- <button class="account-btn" onclick="openBilling()">Billing</button>
997
- <button class="account-btn" onclick="openSettings()">Settings</button>
998
- <button class="account-btn" onclick="logout()">Logout</button>
999
  </div>
1000
- </div>
 
 
 
1001
  </nav>
1002
  `;
1003
  }
1004
  }
1005
 
1006
  customElements.define('custom-sidebar', CustomSidebar);
1007
-
1008
- // Sidebar functions
1009
  function startNewChat() {
1010
  clearChat();
1011
  }
1012
 
1013
- function toggleChatMenu(chatId, event) {
1014
- event.stopPropagation();
1015
- const menu = document.getElementById(`chat-menu-${chatId}`);
1016
- const allMenus = document.querySelectorAll('.chat-dropdown');
1017
 
1018
- allMenus.forEach(m => {
1019
- if (m !== menu) {
1020
- m.classList.remove('show');
1021
- }
1022
  });
1023
 
1024
- menu.classList.toggle('show');
1025
- }
1026
-
1027
- function renameChat(chatId) {
1028
- const newName = prompt('Enter new chat name:');
1029
- if (newName) {
1030
- const chatItem = document.querySelector(`.chat-item[data-id="${chatId}"] .chat-title`);
1031
- if (chatItem) {
1032
- chatItem.textContent = newName;
1033
- }
1034
  }
1035
- closeAllMenus();
1036
  }
1037
 
1038
- function duplicateChat(chatId) {
1039
- const chatItem = document.querySelector(`.chat-item[data-id="${chatId}"]`);
1040
- if (chatItem) {
1041
- const clonedItem = chatItem.cloneNode(true);
1042
- clonedItem.setAttribute('data-id', Date.now());
1043
- chatItem.parentNode.insertBefore(clonedItem, chatItem.nextSibling);
1044
- }
1045
- closeAllMenus();
1046
- }
1047
-
1048
- function toggleStarChat(chatId) {
1049
- console.log('Chat starred!');
1050
- closeAllMenus();
1051
  }
1052
 
1053
- function shareChat(chatId) {
1054
- console.log('Share link copied to clipboard!');
1055
- closeAllMenus();
1056
  }
1057
 
1058
- function makePublicChat(chatId) {
1059
- if (confirm('Make this chat public? Anyone with the link will be able to view it.')) {
1060
- console.log('Chat is now public!');
1061
- }
1062
- closeAllMenus();
1063
  }
1064
 
1065
- function exportChat(chatId) {
1066
- console.log('Chat exported successfully!');
1067
- closeAllMenus();
1068
  }
1069
-
1070
- function archiveChat(chatId) {
1071
- if (confirm('Archive this chat? You can find it in the archive section.')) {
1072
- console.log('Chat archived!');
1073
- }
1074
- closeAllMenus();
1075
- }
1076
-
1077
- function togglePinChat(chatId) {
1078
- console.log('Chat pinned to top!');
1079
- closeAllMenus();
1080
- }
1081
-
1082
- function deleteChat(chatId) {
1083
- if (confirm('Are you sure you want to delete this chat? This action cannot be undone.')) {
1084
- const chatItem = document.querySelector(`.chat-item[data-id="${chatId}"]`);
1085
- if (chatItem) {
1086
- chatItem.remove();
1087
- }
1088
- }
1089
- closeAllMenus();
1090
- }
1091
-
1092
- function searchChats(query) {
1093
- const allChats = document.querySelectorAll('.chat-item');
1094
- allChats.forEach(chat => {
1095
- const title = chat.querySelector('.chat-title').textContent.toLowerCase();
1096
- if (title.includes(query.toLowerCase())) {
1097
- chat.style.display = 'block';
1098
- } else {
1099
- chat.style.display = 'none';
1100
- }
1101
- });
1102
- }
1103
-
1104
- function filterChats(filter, button) {
1105
- const allButtons = document.querySelectorAll('.filter-btn');
1106
- allButtons.forEach(btn => btn.classList.remove('active'));
1107
- button.classList.add('active');
1108
-
1109
- const allChats = document.querySelectorAll('.chat-item');
1110
- allChats.forEach(chat => {
1111
- if (filter === 'all') {
1112
- chat.style.display = 'block';
1113
- } else {
1114
- const tags = chat.querySelectorAll('.chat-tag');
1115
- let hasTag = false;
1116
- tags.forEach(tag => {
1117
- if (tag.textContent === filter) {
1118
- hasTag = true;
1119
- }
1120
- });
1121
- chat.style.display = hasTag ? 'block' : 'none';
1122
- }
1123
- });
1124
- }
1125
-
1126
- function sortChats() {
1127
- console.log('Sort options coming soon!');
1128
- }
1129
-
1130
- function toggleArchived() {
1131
- console.log('Archive section coming soon!');
1132
- }
1133
-
1134
- function loadChatHistory(chatId) {
1135
- console.log('Loading chat history for:', chatId);
1136
- }
1137
-
1138
- function openProfile() {
1139
- console.log('Profile page coming soon!');
1140
- }
1141
-
1142
- function openBilling() {
1143
- console.log('Billing page coming soon!');
1144
- }
1145
-
1146
- function openSettings() {
1147
- console.log('Settings page coming soon!');
1148
- }
1149
-
1150
- function logout() {
1151
- if (confirm('Are you sure you want to logout?')) {
1152
- console.log('Logged out successfully!');
1153
- }
1154
- }
1155
-
1156
- function closeAllMenus() {
1157
- const allMenus = document.querySelectorAll('.chat-dropdown');
1158
- allMenus.forEach(m => m.classList.remove('show'));
1159
- }
1160
-
1161
- document.addEventListener('click', function(event) {
1162
- if (!event.target.closest('.chat-menu-btn') && !event.target.closest('.chat-dropdown')) {
1163
- closeAllMenus();
1164
- }
1165
- });
 
1
+
2
  class CustomSidebar extends HTMLElement {
3
  connectedCallback() {
4
  this.attachShadow({ mode: 'open' });
 
26
  background: rgba(17, 24, 39, 0.98);
27
  }
28
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29
  .new-chat-btn {
30
  margin: 0 1.5rem 1.5rem;
31
  padding: 0.875rem 1.5rem;
 
55
  }
56
 
57
  .chat-history-section {
58
+ margin-bottom: 2rem;
 
 
 
 
 
59
  }
60
 
61
+ .nav-title {
 
 
 
 
 
 
62
  font-size: 0.75rem;
63
+ font-weight: 600;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  color: #71717a;
65
+ text-transform: uppercase;
66
+ letter-spacing: 0.05em;
67
+ padding: 0 1.5rem;
68
+ margin-bottom: 0.75rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
69
  }
70
 
71
  .chat-history {
72
+ max-height: 400px;
73
  overflow-y: auto;
 
74
  padding-right: 0.5rem;
75
  }
76
 
 
83
  }
84
 
85
  .chat-history::-webkit-scrollbar-thumb {
86
+ background: #525252;
87
  border-radius: 2px;
88
  }
89
 
 
112
  background: rgba(255, 255, 255, 0.06);
113
  }
114
 
115
+ .chat-item-content.active {
116
+ color: #ffffff;
117
+ background: rgba(255, 255, 255, 0.12);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
118
  }
119
 
120
+ .history-icon {
121
+ width: 16px;
122
+ height: 16px;
123
  }
124
 
125
+ .divider {
126
+ height: 1px;
127
+ background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
128
+ margin: 1.5rem 1.5rem 1rem;
 
 
 
 
 
 
 
 
129
  }
130
 
131
+ .media-section {
132
+ margin-bottom: 2rem;
133
  }
134
 
135
+ .media-btn {
 
 
 
 
 
 
136
  display: flex;
137
  align-items: center;
138
+ gap: 0.75rem;
139
+ padding: 0.875rem 1.5rem;
140
+ color: #d1d5db;
141
+ text-decoration: none;
142
+ transition: all 0.2s ease;
143
+ cursor: pointer;
144
+ border-radius: 0 12px 12px 0;
145
+ margin-right: 0.75rem;
146
+ border: none;
147
+ background: transparent;
148
+ width: 100%;
149
+ text-align: left;
150
  }
151
 
152
+ .media-btn:hover {
153
+ background: rgba(255, 255, 255, 0.08);
154
  color: #ffffff;
155
  }
156
 
157
+ .media-icon {
158
+ width: 20px;
159
+ height: 20px;
160
+ transition: transform 0.2s ease;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
161
  }
162
 
163
+ .media-btn:hover .media-icon {
164
+ transform: scale(1.1);
 
 
165
  }
166
 
167
+ .account-btn {
168
+ display: flex;
169
+ align-items: center;
170
+ gap: 0.75rem;
171
  padding: 1rem 1.5rem;
172
  background: rgba(255, 255, 255, 0.04);
173
  border-radius: 12px;
174
+ margin: 0 1.5rem;
175
  cursor: pointer;
176
  transition: all 0.2s ease;
177
+ border: none;
178
+ color: #ffffff;
179
+ width: calc(100% - 3rem);
180
+ text-align: left;
181
  }
182
 
183
+ .account-btn:hover {
184
  background: rgba(255, 255, 255, 0.08);
185
+ transform: translateY(-1px);
186
  }
187
 
188
+ .account-icon {
189
+ width: 32px;
190
+ height: 32px;
 
 
 
 
 
 
 
191
  border-radius: 50%;
192
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
193
  display: flex;
 
196
  color: white;
197
  font-weight: 600;
198
  font-size: 0.875rem;
 
 
 
 
 
 
 
 
 
 
 
 
199
  }
200
 
201
  .account-info {
 
214
  font-size: 0.75rem;
215
  }
216
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
217
  @media (max-width: 768px) {
218
  .sidebar {
219
  transform: translateX(-100%);
 
236
 
237
  <!-- Chat History Section -->
238
  <div class="chat-history-section">
239
+ <div class="nav-title">Chat History</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
240
  <div class="chat-history" id="recentChats">
241
  <div class="chat-item" data-id="1">
242
  <div class="chat-item-content" onclick="loadChatHistory(1)">
243
+ <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
244
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
245
  </svg>
246
  <span class="chat-title">Website Redesign Discussion</span>
247
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
248
  </div>
249
 
250
  <div class="chat-item" data-id="2">
251
  <div class="chat-item-content" onclick="loadChatHistory(2)">
252
+ <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
253
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
254
  </svg>
255
  <span class="chat-title">JavaScript Performance Tips</span>
256
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
257
  </div>
258
 
259
  <div class="chat-item" data-id="3">
260
  <div class="chat-item-content" onclick="loadChatHistory(3)">
261
+ <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
262
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
263
  </svg>
264
  <span class="chat-title">React Architecture Planning</span>
265
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
266
  </div>
267
 
268
  <div class="chat-item" data-id="4">
269
  <div class="chat-item-content" onclick="loadChatHistory(4)">
270
+ <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
271
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
272
  </svg>
273
  <span class="chat-title">Machine Learning Basics</span>
274
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
275
  </div>
276
 
277
  <div class="chat-item" data-id="5">
278
  <div class="chat-item-content" onclick="loadChatHistory(5)">
279
+ <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
280
  <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
281
  </svg>
282
  <span class="chat-title">API Best Practices Guide</span>
283
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
284
  </div>
285
  </div>
286
  </div>
287
 
288
  <div class="divider"></div>
289
 
290
+ <!-- Media Section -->
291
+ <div class="media-section">
292
+ <div class="nav-title">Media</div>
293
+ <button onclick="openFiles()" class="media-btn">
294
+ <svg class="media-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
295
  <path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"/>
296
  <path d="M13 2v7h7"/>
297
  </svg>
298
+ Files
299
+ </button>
300
+ <button onclick="openImages()" class="media-btn">
301
+ <svg class="media-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
302
+ <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
303
+ <circle cx="8.5" cy="8.5" r="1.5"/>
304
+ <path d="M21 15l-5-5L5 21"/>
305
  </svg>
306
+ Images
307
+ </button>
308
+ <button onclick="openAudio()" class="media-btn">
309
+ <svg class="media-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
310
+ <path d="M9 18V5l12-2v13"/>
311
+ <circle cx="6" cy="18" r="3"/>
312
+ <circle cx="18" cy="16" r="3"/>
313
  </svg>
314
+ Audio
315
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
316
  </div>
317
 
318
  <div class="divider"></div>
319
 
320
+ <!-- Account Button -->
321
+ <button onclick="openAccount()" class="account-btn">
322
+ <div class="account-icon">
323
+ U
 
 
 
 
 
 
 
324
  </div>
325
+ <div class="account-info">
326
+ <div class="account-name">User Name</div>
327
+ <div class="account-email">[email protected]</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
328
  </div>
329
+ <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
330
+ <path d="M9 18l6-6-6-6"/>
331
+ </svg>
332
+ </button>
333
  </nav>
334
  `;
335
  }
336
  }
337
 
338
  customElements.define('custom-sidebar', CustomSidebar);
339
+ // Simplified Sidebar functions
 
340
  function startNewChat() {
341
  clearChat();
342
  }
343
 
344
+ function loadChatHistory(chatId) {
345
+ console.log('Loading chat history for:', chatId);
 
 
346
 
347
+ // Remove active class from all chat items
348
+ document.querySelectorAll('.chat-item-content').forEach(item => {
349
+ item.classList.remove('active');
 
350
  });
351
 
352
+ // Add active class to clicked chat item
353
+ const clickedChat = document.querySelector(`.chat-item[data-id="${chatId}"] .chat-item-content`);
354
+ if (clickedChat) {
355
+ clickedChat.classList.add('active');
 
 
 
 
 
 
356
  }
 
357
  }
358
 
359
+ function openFiles() {
360
+ console.log('Opening files...');
 
 
 
 
 
 
 
 
 
 
 
361
  }
362
 
363
+ function openImages() {
364
+ console.log('Opening images...');
 
365
  }
366
 
367
+ function openAudio() {
368
+ console.log('Opening audio...');
 
 
 
369
  }
370
 
371
+ function openAccount() {
372
+ console.log('Opening account settings...');
 
373
  }