-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
464 lines (413 loc) · 32.2 KB
/
Copy pathindex.html
File metadata and controls
464 lines (413 loc) · 32.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
<!DOCTYPE html>
<html lang="en" class="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Quasar AI</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>☄️</text></svg>">
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.1.6/purify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="tailwind.css">
<link rel="stylesheet" href="styles.css">
</head>
<body class="text-slate-800 dark:text-slate-200 h-screen flex font-sans overflow-hidden">
<div id="toastContainer" class="fixed bottom-4 right-4 z-[200] flex flex-col gap-2"></div>
<!-- ===================== AUTH SCREEN ===================== -->
<div id="authScreen" class="fixed inset-0 z-[300] flex items-center justify-center p-4"
style="background: linear-gradient(135deg, #e0f2fe 0%, #ffffff 100%);">
<div class="w-full max-w-md">
<!-- Logo -->
<div class="text-center mb-8">
<div class="w-16 h-16 rounded-2xl bg-brand-500 mx-auto flex items-center justify-center text-white shadow-xl mb-4 text-3xl">
<i class="fas fa-meteor"></i>
</div>
<h1 class="text-3xl font-bold text-slate-800">Quasar AI</h1>
<p class="text-slate-500 text-sm mt-1">Sign in to continue</p>
</div>
<!-- Card -->
<div class="bg-white border border-slate-200 rounded-2xl shadow-xl overflow-hidden">
<!-- Tabs -->
<div class="flex border-b border-slate-100">
<button id="authTabLoginBtn"
onclick="switchAuthTab('login')"
class="auth-tab-btn flex-1 py-3.5 text-sm font-semibold text-brand-500 border-b-2 border-brand-500 transition-all">
Sign In
</button>
<button id="authTabRegisterBtn"
onclick="switchAuthTab('register')"
class="auth-tab-btn flex-1 py-3.5 text-sm font-semibold text-slate-400 border-b-2 border-transparent transition-all hover:text-slate-600">
Create Account
</button>
</div>
<div class="p-6 space-y-4">
<!-- Error banner -->
<div id="authError" class="hidden items-center gap-3 p-3 bg-red-50 border border-red-200 rounded-xl text-red-600 text-sm">
<i class="fas fa-exclamation-circle flex-shrink-0"></i>
<span id="authErrorMsg"></span>
</div>
<!-- Login form -->
<div id="authLoginForm">
<div class="space-y-3">
<div>
<label class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Email</label>
<input id="loginEmail" type="email" placeholder="you@example.com"
class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-800 outline-none focus:border-brand-500 focus:ring-2 ring-brand-500/20 transition-all">
</div>
<div>
<label class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Password</label>
<div class="relative">
<input id="loginPassword" type="password" placeholder="••••••••"
class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-800 outline-none focus:border-brand-500 focus:ring-2 ring-brand-500/20 transition-all pr-10">
<button type="button" onclick="togglePasswordVisibility('loginPassword', this)"
class="absolute right-3 top-2.5 text-slate-400 hover:text-slate-600 transition-colors">
<i class="fas fa-eye text-sm"></i>
</button>
</div>
</div>
<button id="loginBtn" onclick="handleLogin()"
class="w-full py-2.5 bg-brand-500 hover:bg-brand-600 text-white rounded-xl font-semibold text-sm transition-colors shadow-sm flex items-center justify-center gap-2 mt-2">
<i class="fas fa-arrow-right-to-bracket"></i> Sign In
</button>
</div>
</div>
<!-- Register form -->
<div id="authRegisterForm" class="hidden">
<div class="space-y-3">
<div>
<label class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Email</label>
<input id="registerEmail" type="email" placeholder="you@example.com"
class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-800 outline-none focus:border-brand-500 focus:ring-2 ring-brand-500/20 transition-all">
</div>
<div>
<label class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Password <span class="text-slate-400 font-normal normal-case">(min 8 characters)</span></label>
<div class="relative">
<input id="registerPassword" type="password" placeholder="••••••••"
class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-800 outline-none focus:border-brand-500 focus:ring-2 ring-brand-500/20 transition-all pr-10">
<button type="button" onclick="togglePasswordVisibility('registerPassword', this)"
class="absolute right-3 top-2.5 text-slate-400 hover:text-slate-600 transition-colors">
<i class="fas fa-eye text-sm"></i>
</button>
</div>
</div>
<div>
<label class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1.5">Confirm Password</label>
<input id="registerConfirm" type="password" placeholder="••••••••"
class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-800 outline-none focus:border-brand-500 focus:ring-2 ring-brand-500/20 transition-all">
</div>
<button id="registerBtn" onclick="handleRegister()"
class="w-full py-2.5 bg-brand-500 hover:bg-brand-600 text-white rounded-xl font-semibold text-sm transition-colors shadow-sm flex items-center justify-center gap-2 mt-2">
<i class="fas fa-user-plus"></i> Create Account
</button>
</div>
</div>
</div>
</div>
<p class="text-center text-xs text-slate-400 mt-4">
Your API keys are stored locally on your device only.
</p>
</div>
</div>
<!-- ===================== END AUTH SCREEN ===================== -->
<!-- Sidebar -->
<aside id="sidebar" class="sidebar-container w-64 glass-panel border-r border-slate-200 dark:border-white/10 flex flex-col flex-shrink-0">
<div class="p-4 border-b border-slate-200 dark:border-white/10 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-8 h-8 rounded-lg bg-brand-500 flex items-center justify-center text-white shadow-lg">
<i class="fas fa-meteor"></i>
</div>
<h1 class="font-bold text-lg tracking-tight">Quasar AI</h1>
</div>
<button id="closeSidebarBtnMobile" class="md:hidden p-2 text-slate-500 hover:text-slate-800 dark:hover:text-white">
<i class="fas fa-times"></i>
</button>
</div>
<div class="p-3 space-y-2">
<button onclick="createNewChat()" class="w-full flex items-center gap-2 justify-center py-2.5 bg-brand-500 hover:bg-brand-600 text-white rounded-xl shadow-md transition-colors font-medium">
<i class="fas fa-plus"></i> New Chat
</button>
<button onclick="createFolder()" class="w-full flex items-center gap-2 justify-center py-2 bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-600 dark:text-slate-300 border border-slate-200 dark:border-white/10 rounded-xl transition-colors font-medium text-sm shadow-sm">
<i class="fas fa-folder-plus text-slate-400"></i> New Folder
</button>
<div class="relative">
<input
type="text"
id="chatSearchInput"
placeholder="Search chats..."
class="w-full px-3 py-2.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-white/10 rounded-lg text-sm text-slate-800 dark:text-white placeholder:text-slate-400 outline-none focus:border-brand-500 focus:ring-1 ring-brand-500 transition-all"
>
<i class="fas fa-search absolute right-3 top-3 text-slate-400 text-sm pointer-events-none"></i>
</div>
</div>
<div id="chatList" class="flex-grow overflow-y-auto px-2 space-y-1 pb-4"></div>
<div id="emptySearchState" class="hidden flex-grow flex flex-col items-center justify-center px-4 text-center pb-4">
<i class="fas fa-search text-3xl text-slate-300 dark:text-slate-700 mb-2"></i>
<p class="text-xs text-slate-500">No chats found</p>
</div>
<div class="p-3 border-t border-slate-200 dark:border-white/10">
<button onclick="openSettings('api')" class="w-full flex items-center justify-center gap-2 p-2.5 rounded-xl border border-slate-200 dark:border-white/10 hover:bg-white dark:hover:bg-slate-800 transition-colors text-sm font-medium shadow-sm">
<i class="fas fa-key text-brand-500"></i> API Keys
</button>
</div>
</aside>
<!-- Main content: chat + artifact panel side by side -->
<div id="mainContent" class="flex flex-grow h-full overflow-hidden min-w-0 relative">
<!-- Chat column -->
<main id="chatColumn" class="flex flex-col h-full relative bg-white/30 dark:bg-slate-900/30 min-w-0" style="flex:1 1 0%;">
<header class="h-16 glass-panel border-b border-slate-200 dark:border-white/10 flex items-center justify-between px-4 z-40 flex-shrink-0">
<div class="flex items-center gap-3 min-w-0 flex-1">
<button id="toggleSidebarBtn" class="p-2 text-slate-500 hover:text-slate-800 dark:hover:text-white rounded-lg transition-colors bg-white/50 dark:bg-slate-800/50 shadow-sm border border-slate-200 dark:border-white/5 flex-shrink-0">
<i class="fas fa-bars"></i>
</button>
<div class="h-6 w-px bg-slate-200 dark:bg-slate-700 hidden md:block flex-shrink-0"></div>
<h2 id="currentChatTitle" class="font-semibold text-lg truncate max-w-[120px] md:max-w-[200px] text-slate-700 dark:text-slate-200 flex-shrink-0">New Chat</h2>
<div class="h-6 w-px bg-slate-200 dark:bg-slate-700 hidden sm:block flex-shrink-0"></div>
<div class="relative min-w-0">
<button id="modelDropdownBtn" class="bg-white dark:bg-slate-800 text-xs md:text-sm text-slate-700 dark:text-slate-200 px-2 sm:px-3 py-2 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm outline-none focus:ring-2 ring-brand-500 cursor-pointer transition-all hover:bg-slate-50 dark:hover:bg-slate-700 font-medium flex items-center gap-1.5 max-w-[140px] sm:max-w-[240px]">
<i class="fas fa-cube text-brand-500 text-xs flex-shrink-0"></i>
<span id="modelDropdownLabel" class="truncate">No model</span>
<i class="fas fa-chevron-down text-slate-400 text-xs ml-auto flex-shrink-0"></i>
</button>
<div id="modelDropdownMenu" class="hidden absolute top-full left-0 mt-2 bg-white dark:bg-slate-800 border border-slate-200 dark:border-white/10 rounded-xl shadow-lg z-50 max-h-72 overflow-y-auto min-w-[260px]"></div>
<select id="modelSelect" class="hidden"></select>
</div>
</div>
<div class="flex items-center gap-2 md:gap-4 flex-shrink-0">
<div id="tokenStatusBar" class="hidden items-center gap-1.5 text-[11px] font-mono text-slate-400 dark:text-slate-500 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-white/10 rounded-xl px-2.5 h-10 flex-shrink-0 select-none"></div>
<button onclick="openSettings('general')" class="w-10 h-10 rounded-xl flex items-center justify-center bg-white dark:bg-slate-800 border border-slate-200 dark:border-white/10 shadow-sm text-slate-600 dark:text-slate-300 hover:text-brand-500 transition-colors" title="Settings">
<i class="fas fa-cog"></i>
</button>
<button onclick="handleLogout()" class="w-10 h-10 rounded-xl flex items-center justify-center bg-white dark:bg-slate-800 border border-slate-200 dark:border-white/10 shadow-sm text-slate-600 dark:text-slate-300 hover:text-red-500 transition-colors" title="Sign Out">
<i class="fas fa-sign-out-alt"></i>
</button>
</div>
</header>
<div id="chatWindow" class="flex-grow overflow-y-auto p-4 md:p-6 space-y-6" style="padding-bottom: 10rem;"></div>
<!-- Footer floats over the chat — pointer-events-none lets scrolls pass through the empty area -->
<footer id="chatFooter" class="absolute bottom-0 left-0 right-0 p-4 md:px-6 md:pb-6 z-10">
<div class="max-w-3xl mx-auto w-full">
<!-- Shown when chat is empty; hidden once the first message is sent -->
<div id="welcomeHeadline" class="hidden text-center mb-6">
<div class="w-14 h-14 rounded-2xl bg-brand-500 mx-auto flex items-center justify-center text-white shadow-xl mb-4 text-2xl">
<i class="fas fa-meteor"></i>
</div>
<h1 class="text-2xl md:text-3xl font-bold text-slate-800 dark:text-white">How can I help you today?</h1>
<p class="mt-1.5 text-sm text-slate-500">Select a model and start chatting.</p>
</div>
<div id="attachmentPreview" class="hidden mb-2 inline-flex items-center gap-2 bg-white dark:bg-slate-800 border border-slate-200 dark:border-white/10 px-3 py-1.5 rounded-lg shadow-sm">
<i class="fas fa-image text-brand-500 text-sm flex-shrink-0"></i>
<span id="attachmentName" class="text-xs truncate max-w-[120px] font-medium">image.jpg</span>
<div id="attachmentChoiceBtns" class="flex items-center gap-1.5">
<button id="attachSendAsImageBtn" type="button" class="text-xs px-2 py-1 bg-brand-500 hover:bg-brand-600 text-white rounded-md font-medium transition-colors flex items-center gap-1">
<i class="fas fa-image" style="font-size:10px"></i> Image
</button>
<button id="attachExtractTextBtn" type="button" class="text-xs px-2 py-1 bg-slate-600 hover:bg-slate-700 text-white rounded-md font-medium transition-colors flex items-center gap-1">
<i class="fas fa-font" style="font-size:10px"></i> Text
</button>
</div>
<button id="removeAttachmentBtn" type="button" class="hidden text-slate-400 hover:text-red-500 ml-1"><i class="fas fa-times"></i></button>
</div>
<form id="chatForm" class="bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-white/10 shadow-lg focus-within:ring-2 ring-brand-500/50 transition-all flex flex-col p-2">
<textarea
id="userInput"
rows="1"
placeholder="Message Quasar AI..."
class="w-full bg-transparent text-slate-800 dark:text-white px-3 py-2 outline-none resize-none placeholder:text-slate-400 text-base max-h-48 overflow-y-auto"
></textarea>
<div class="flex justify-between items-center px-1 pt-2 border-t border-slate-100 dark:border-white/5 mt-1">
<div class="flex items-center gap-1">
<label class="p-2 text-slate-400 hover:text-brand-500 hover:bg-brand-50 dark:hover:bg-brand-900/30 rounded-lg cursor-pointer transition-colors" title="Attach Image">
<i class="fas fa-paperclip"></i>
<input type="file" id="fileInput" accept="image/*" class="hidden">
</label>
<button type="button" id="voiceBtn" class="p-2 text-slate-400 hover:text-brand-500 hover:bg-brand-50 dark:hover:bg-brand-900/30 rounded-lg transition-colors" title="Voice Input">
<i class="fas fa-microphone"></i>
</button>
</div>
<button
type="submit"
id="sendBtn"
class="px-4 py-2 bg-brand-500 hover:bg-brand-600 disabled:bg-slate-200 dark:disabled:bg-slate-700 disabled:text-slate-400 text-white rounded-xl transition-all shadow-sm flex items-center justify-center font-medium gap-2 text-sm"
>
Send <i class="fas fa-arrow-up text-xs"></i>
</button>
<button
type="button"
id="stopBtn"
onclick="if(_streamController) _streamController.abort()"
class="hidden px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-xl transition-all shadow-sm flex items-center justify-center font-medium gap-2 text-sm"
>
Stop <i class="fas fa-stop text-xs"></i>
</button>
</div>
</form>
<div class="text-center mt-3">
<p class="text-[11px] text-slate-400">Quasar AI can make mistakes. Consider verifying critical information.</p>
</div>
</div>
</footer>
</main>
<!-- Resize handle -->
<div id="resizeHandle" class="resize-handle hidden"></div>
<!-- Artifact backdrop — shown on mobile when the bottom sheet is open -->
<div id="artifactBackdrop" class="fixed inset-0 bg-black/50 z-[79] hidden backdrop-blur-sm" onclick="closeArtifactPanel()"></div>
<!-- Artifact panel -->
<div id="artifactPanel" class="artifact-panel hidden flex-col h-full border-l border-slate-200 dark:border-white/10 bg-[#0d1117] flex-shrink-0">
<!-- Mobile swipe-to-dismiss handle (hidden on desktop via CSS) -->
<div id="artifactMobileDrag" class="artifact-mobile-drag"></div>
<!-- Artifact panel header -->
<div class="artifact-panel-header">
<div class="artifact-panel-title">
<i class="fas fa-code" id="artifactPanelIcon"></i>
<span id="artifactPanelLang">Code</span>
<span id="artifactPanelFile" class="artifact-panel-filename"></span>
</div>
<div class="artifact-panel-tabs" id="artifactPanelTabs"></div>
<div class="artifact-panel-actions">
<button class="artifact-action-btn" id="artifactPanelCopyBtn" onclick="copyArtifactPanel()" title="Copy">
<i class="fas fa-copy"></i>
</button>
<button class="artifact-action-btn" id="artifactPanelCloseBtn" onclick="closeArtifactPanel()" title="Close panel">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<!-- Artifact panel body -->
<div class="artifact-panel-body" id="artifactPanelBody">
<div id="artifactPanelCodePane" class="artifact-panel-code-pane">
<pre class="artifact-pre"><code id="artifactPanelCode" class="artifact-code"></code></pre>
</div>
<div id="artifactPanelPreviewPane" class="artifact-panel-preview-pane hidden">
<iframe id="artifactPanelIframe" sandbox="allow-scripts" title="Preview"></iframe>
</div>
</div>
</div>
</div><!-- end #mainContent -->
<div id="mobileOverlay" class="fixed inset-0 bg-black/50 z-40 hidden md:hidden backdrop-blur-sm transition-opacity"></div>
<!-- Settings Modal -->
<div id="settingsModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm hidden items-center justify-center z-[100] p-4">
<div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-white/10 w-full max-w-3xl rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[85vh]">
<div class="p-4 md:p-5 border-b border-slate-200 dark:border-white/10 flex justify-between items-center bg-slate-50 dark:bg-slate-800/50 flex-shrink-0">
<h3 class="text-xl font-bold flex items-center gap-2 text-slate-800 dark:text-white">
<i class="fas fa-sliders-h text-brand-500"></i> Settings
</h3>
<button onclick="closeSettings()" class="text-slate-400 hover:text-slate-800 dark:hover:text-white p-1">
<i class="fas fa-times text-xl"></i>
</button>
</div>
<div class="flex px-4 md:px-6 border-b border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-slate-800/30 overflow-x-auto flex-shrink-0">
<button onclick="switchTab('general')" id="tab-btn-general" class="tab-btn active px-4 py-3 text-sm font-semibold text-slate-500 dark:text-slate-400 whitespace-nowrap">
<i class="fas fa-sliders-h mr-1.5"></i> General
</button>
<button onclick="switchTab('api')" id="tab-btn-api" class="tab-btn px-4 py-3 text-sm font-semibold text-slate-500 dark:text-slate-400 whitespace-nowrap">
<i class="fas fa-key mr-1.5"></i> API Management
</button>
<button onclick="switchTab('usage')" id="tab-btn-usage" class="tab-btn px-4 py-3 text-sm font-semibold text-slate-500 dark:text-slate-400 whitespace-nowrap">
<i class="fas fa-chart-bar mr-1.5"></i> Usage
</button>
<button onclick="switchTab('help')" id="tab-btn-help" class="tab-btn px-4 py-3 text-sm font-semibold text-slate-500 dark:text-slate-400 whitespace-nowrap">
<i class="fas fa-question-circle mr-1.5"></i> Help
</button>
</div>
<div class="p-6 overflow-y-auto flex-grow relative bg-white dark:bg-slate-900">
<div id="tab-content-general" class="tab-content space-y-6">
<h4 class="text-lg font-semibold text-slate-800 dark:text-white mb-2">Appearance</h4>
<div class="flex items-center justify-between p-4 bg-slate-50 dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-white/5">
<div>
<p class="font-medium text-slate-800 dark:text-white">Theme Preference</p>
<p class="text-xs text-slate-500">Toggle between Light and Dark mode.</p>
</div>
<button id="themeToggleBtn" class="px-4 py-2 rounded-lg bg-white dark:bg-slate-700 border border-slate-200 dark:border-white/10 shadow-sm flex items-center gap-2 font-medium">
<i class="fas fa-moon dark:hidden text-slate-600"></i>
<i class="fas fa-sun hidden dark:block text-amber-400"></i>
<span class="dark:hidden text-slate-700">Light Mode</span>
<span class="hidden dark:block text-slate-200">Dark Mode</span>
</button>
</div>
<h4 class="text-lg font-semibold text-slate-800 dark:text-white mb-2 pt-4 border-t border-slate-100 dark:border-white/5">Data</h4>
<div class="flex items-center justify-between p-4 bg-red-50 dark:bg-red-900/20 rounded-xl border border-red-100 dark:border-red-900/30">
<div>
<p class="font-medium text-red-700 dark:text-red-400">Clear All Chats</p>
<p class="text-xs text-red-600/70 dark:text-red-400/70">Permanently delete all conversation history.</p>
</div>
<button onclick="clearAllChats()" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg shadow-sm font-medium transition-colors">
Delete All
</button>
</div>
</div>
<div id="tab-content-api" class="tab-content hidden space-y-4">
<div class="mb-4">
<p class="text-sm text-slate-600 dark:text-slate-400">Configure your API providers here. Keys are stored securely in your browser's local storage.</p>
</div>
<div id="providerSettingsList" class="grid gap-4"></div>
</div>
<div id="tab-content-usage" class="tab-content hidden space-y-5">
<div class="flex items-center justify-between">
<div>
<h4 class="text-lg font-semibold text-slate-800 dark:text-white">Token Usage</h4>
<p class="text-xs text-slate-500 mt-0.5">Cumulative usage across all sessions, stored locally.</p>
</div>
<button onclick="resetTokenUsage()" class="px-3 py-1.5 text-xs font-medium bg-red-50 hover:bg-red-100 dark:bg-red-900/20 dark:hover:bg-red-900/40 text-red-600 dark:text-red-400 border border-red-200 dark:border-red-800 rounded-lg transition-colors">
<i class="fas fa-trash-alt mr-1"></i> Reset
</button>
</div>
<div id="usageTableWrap" class="overflow-x-auto rounded-xl border border-slate-200 dark:border-white/10"></div>
</div>
<div id="tab-content-help" class="tab-content hidden space-y-6">
<div class="text-center py-6">
<div class="w-16 h-16 rounded-2xl bg-brand-500 mx-auto flex items-center justify-center text-white shadow-xl mb-4 text-3xl">
<i class="fas fa-meteor"></i>
</div>
<h3 class="text-2xl font-bold text-slate-800 dark:text-white">Quasar AI</h3>
<a href="https://github.com/coder11125/QuasarAI" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1.5 mt-2 text-sm text-slate-500 hover:text-brand-500 transition-colors">
<i class="fab fa-github"></i> github.com/coder11125/QuasarAI
</a>
<a href="https://github.com/coder11125/QuasarAI/wiki" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1.5 mt-2 ml-4 text-sm text-slate-500 hover:text-brand-500 transition-colors">
<i class="fas fa-book"></i> Documentation
</a>
</div>
<div class="grid md:grid-cols-2 gap-4">
<div class="p-4 bg-slate-50 dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-white/5">
<h5 class="font-bold text-slate-800 dark:text-white mb-2"><i class="fas fa-keyboard text-brand-500 mr-2"></i> Shortcuts</h5>
<ul class="text-sm text-slate-600 dark:text-slate-400 space-y-2">
<li class="flex justify-between"><span>Send Message:</span> <kbd class="px-2 py-1 bg-white dark:bg-slate-700 border border-slate-200 dark:border-white/10 rounded font-mono text-xs shadow-sm">Enter</kbd></li>
<li class="flex justify-between"><span>New Line:</span> <kbd class="px-2 py-1 bg-white dark:bg-slate-700 border border-slate-200 dark:border-white/10 rounded font-mono text-xs shadow-sm">Shift + Enter</kbd></li>
</ul>
</div>
<div class="p-4 bg-slate-50 dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-white/5">
<h5 class="font-bold text-slate-800 dark:text-white mb-2"><i class="fas fa-shield-alt text-brand-500 mr-2"></i> Privacy</h5>
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed">
Chat histories and API keys are cached locally in <code>localStorage</code> and synced to the Quasar backend (MongoDB). API keys are encrypted with AES-256-GCM before being stored on the server. The app connects to the AI provider APIs you configure and to the Quasar backend for sync and authentication.
</p>
</div>
</div>
</div>
</div>
<div class="p-4 md:p-5 border-t border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-slate-800/50 flex justify-end gap-3 flex-shrink-0">
<button onclick="closeSettings()" class="px-6 py-2.5 rounded-xl font-medium bg-slate-200 hover:bg-slate-300 dark:bg-slate-700 dark:hover:bg-slate-600 text-slate-700 dark:text-slate-200 transition-colors">Done</button>
</div>
</div>
</div>
<!-- App scripts (load order matters: constants → state → utils → feature files → init) -->
<script src="js/constants.js"></script>
<script src="js/state.js"></script>
<script src="js/utils.js"></script>
<script src="js/search.js"></script>
<script src="js/server-sync.js"></script>
<script src="js/theme-sidebar.js"></script>
<script src="js/input.js"></script>
<script src="js/artifact-panel.js"></script>
<script src="js/model-dropdown.js"></script>
<script src="js/chats.js"></script>
<script src="js/folders.js"></script>
<script src="js/chat-render.js"></script>
<script src="js/messages.js"></script>
<script src="js/settings.js"></script>
<script src="js/attachments.js"></script>
<script src="js/send.js"></script>
<script src="js/edit-regenerate.js"></script>
<script src="js/ocr.js"></script>
<script src="js/auth.js"></script>
<script src="js/init.js"></script>
</body>
</html>