Hugging Face's logo

Spaces:
SanyamV
/
sql-query-agent-project
Running

App Files Community
SanyamV commited on
Commit
6d16687
·
verified ·
1 Parent(s): 16282c9

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +568 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sql Query Agent Project
3
- emoji: 😻
4
- colorFrom: yellow
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: sql-query-agent-project
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,568 @@
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
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SQL Query Agent</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .chat-container {
11
+ height: calc(100vh - 200px);
12
+ }
13
+ .file-dropzone {
14
+ border: 2px dashed #cbd5e0;
15
+ transition: all 0.3s ease;
16
+ }
17
+ .file-dropzone.active {
18
+ border-color: #4f46e5;
19
+ background-color: #eef2ff;
20
+ }
21
+ .result-table {
22
+ max-height: 300px;
23
+ overflow-y: auto;
24
+ }
25
+ .typing-indicator span {
26
+ animation: bounce 1.5s infinite ease-in-out;
27
+ }
28
+ .typing-indicator span:nth-child(2) {
29
+ animation-delay: 0.2s;
30
+ }
31
+ .typing-indicator span:nth-child(3) {
32
+ animation-delay: 0.4s;
33
+ }
34
+ @keyframes bounce {
35
+ 0%, 100% { transform: translateY(0); }
36
+ 50% { transform: translateY(-5px); }
37
+ }
38
+ .sql-editor {
39
+ font-family: 'Courier New', monospace;
40
+ min-height: 100px;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="bg-gray-50">
45
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
46
+ <!-- Header -->
47
+ <header class="mb-8">
48
+ <div class="flex items-center justify-between">
49
+ <div class="flex items-center space-x-3">
50
+ <i class="fas fa-database text-3xl text-indigo-600"></i>
51
+ <h1 class="text-2xl font-bold text-gray-800">SQL Query Agent</h1>
52
+ </div>
53
+ <div class="flex space-x-4">
54
+ <button id="darkModeToggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
55
+ <i class="fas fa-moon text-gray-600"></i>
56
+ </button>
57
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
58
+ <i class="fas fa-question-circle mr-2"></i>Help
59
+ </button>
60
+ </div>
61
+ </div>
62
+ <p class="text-gray-600 mt-2">Upload your Excel file or connect to a database to start querying</p>
63
+ </header>
64
+
65
+ <!-- Main Content -->
66
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
67
+ <!-- Left Panel - Data Source Selection -->
68
+ <div class="lg:col-span-1 bg-white rounded-xl shadow-md p-6">
69
+ <h2 class="text-xl font-semibold mb-4 text-gray-800">Data Sources</h2>
70
+
71
+ <!-- Tabs -->
72
+ <div class="flex border-b mb-6">
73
+ <button id="excelTab" class="tab-btn active px-4 py-2 font-medium text-indigo-600 border-b-2 border-indigo-600">
74
+ <i class="fas fa-file-excel mr-2"></i>Excel File
75
+ </button>
76
+ <button id="sqlTab" class="tab-btn px-4 py-2 font-medium text-gray-500 hover:text-gray-700">
77
+ <i class="fas fa-database mr-2"></i>SQL Database
78
+ </button>
79
+ </div>
80
+
81
+ <!-- Excel Upload Section -->
82
+ <div id="excelSection" class="data-source-section">
83
+ <div id="fileDropzone" class="file-dropzone rounded-lg p-8 text-center mb-4 cursor-pointer">
84
+ <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i>
85
+ <p class="text-gray-600">Drag & drop your Excel file here</p>
86
+ <p class="text-sm text-gray-500 mt-1">or click to browse files</p>
87
+ <input type="file" id="fileInput" class="hidden" accept=".xlsx, .xls, .csv">
88
+ </div>
89
+ <div id="fileInfo" class="hidden p-4 bg-gray-50 rounded-lg mb-4">
90
+ <div class="flex justify-between items-center">
91
+ <div>
92
+ <p class="font-medium text-gray-800" id="fileName">sample_data.xlsx</p>
93
+ <p class="text-sm text-gray-500" id="fileSize">2.4 MB</p>
94
+ </div>
95
+ <button id="removeFile" class="text-red-500 hover:text-red-700">
96
+ <i class="fas fa-times"></i>
97
+ </button>
98
+ </div>
99
+ </div>
100
+ <div class="mb-4">
101
+ <label class="block text-sm font-medium text-gray-700 mb-1">Sheet Selection</label>
102
+ <select id="sheetSelect" class="w-full p-2 border border-gray-300 rounded-lg" disabled>
103
+ <option value="">Select a sheet</option>
104
+ </select>
105
+ </div>
106
+ <div class="mb-4">
107
+ <label class="block text-sm font-medium text-gray-700 mb-1">Preview</label>
108
+ <div class="bg-gray-50 p-2 rounded-lg border border-gray-200 overflow-x-auto">
109
+ <table class="min-w-full divide-y divide-gray-200">
110
+ <thead id="previewHeader" class="bg-gray-100">
111
+ <!-- Headers will be populated here -->
112
+ </thead>
113
+ <tbody id="previewBody" class="divide-y divide-gray-200">
114
+ <!-- Preview rows will be populated here -->
115
+ </tbody>
116
+ </table>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- SQL Connection Section -->
122
+ <div id="sqlSection" class="data-source-section hidden">
123
+ <div class="space-y-4">
124
+ <div>
125
+ <label class="block text-sm font-medium text-gray-700 mb-1">Database Type</label>
126
+ <select class="w-full p-2 border border-gray-300 rounded-lg">
127
+ <option>MySQL</option>
128
+ <option>PostgreSQL</option>
129
+ <option>SQL Server</option>
130
+ <option>SQLite</option>
131
+ <option>Oracle</option>
132
+ </select>
133
+ </div>
134
+ <div>
135
+ <label class="block text-sm font-medium text-gray-700 mb-1">Host</label>
136
+ <input type="text" class="w-full p-2 border border-gray-300 rounded-lg" placeholder="localhost">
137
+ </div>
138
+ <div>
139
+ <label class="block text-sm font-medium text-gray-700 mb-1">Port</label>
140
+ <input type="text" class="w-full p-2 border border-gray-300 rounded-lg" placeholder="3306">
141
+ </div>
142
+ <div>
143
+ <label class="block text-sm font-medium text-gray-700 mb-1">Database Name</label>
144
+ <input type="text" class="w-full p-2 border border-gray-300 rounded-lg" placeholder="my_database">
145
+ </div>
146
+ <div>
147
+ <label class="block text-sm font-medium text-gray-700 mb-1">Username</label>
148
+ <input type="text" class="w-full p-2 border border-gray-300 rounded-lg" placeholder="username">
149
+ </div>
150
+ <div>
151
+ <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
152
+ <input type="password" class="w-full p-2 border border-gray-300 rounded-lg" placeholder="••••••••">
153
+ </div>
154
+ <button class="w-full py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
155
+ <i class="fas fa-plug mr-2"></i>Connect
156
+ </button>
157
+ </div>
158
+ </div>
159
+
160
+ <div class="mt-6 pt-4 border-t border-gray-200">
161
+ <h3 class="text-sm font-medium text-gray-700 mb-2">Recent Connections</h3>
162
+ <div class="space-y-2">
163
+ <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg cursor-pointer">
164
+ <i class="fas fa-file-excel text-green-500 mr-3"></i>
165
+ <div>
166
+ <p class="text-sm font-medium">sales_data.xlsx</p>
167
+ <p class="text-xs text-gray-500">Yesterday</p>
168
+ </div>
169
+ </div>
170
+ <div class="flex items-center p-2 hover:bg-gray-50 rounded-lg cursor-pointer">
171
+ <i class="fas fa-database text-blue-500 mr-3"></i>
172
+ <div>
173
+ <p class="text-sm font-medium">Production DB</p>
174
+ <p class="text-xs text-gray-500">2 days ago</p>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Right Panel - Chat Interface -->
182
+ <div class="lg:col-span-2 bg-white rounded-xl shadow-md overflow-hidden">
183
+ <div class="p-6 border-b border-gray-200">
184
+ <h2 class="text-xl font-semibold text-gray-800">Query Assistant</h2>
185
+ <p class="text-sm text-gray-600">Ask questions about your data in natural language or write SQL queries</p>
186
+ </div>
187
+
188
+ <!-- Chat Container -->
189
+ <div class="chat-container overflow-y-auto p-4 space-y-4">
190
+ <!-- Welcome Message -->
191
+ <div class="flex justify-start">
192
+ <div class="max-w-[80%] bg-indigo-50 rounded-lg p-4">
193
+ <div class="flex items-start">
194
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center">
195
+ <i class="fas fa-robot text-indigo-600"></i>
196
+ </div>
197
+ <div class="ml-3">
198
+ <h3 class="text-sm font-medium text-indigo-800">SQL Assistant</h3>
199
+ <div class="mt-1 text-sm text-gray-700">
200
+ <p>Hello! I can help you analyze your data. Please upload an Excel file or connect to a database to get started.</p>
201
+ <p class="mt-2">You can ask questions like:</p>
202
+ <ul class="list-disc pl-5 mt-1 space-y-1">
203
+ <li>"Show me the top 5 customers by sales"</li>
204
+ <li>"What's the average order value?"</li>
205
+ <li>"Find all orders from last month"</li>
206
+ </ul>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Sample User Message -->
214
+ <div class="flex justify-end">
215
+ <div class="max-w-[80%] bg-indigo-600 rounded-lg p-4 text-white">
216
+ <p>Show me the top 5 products by revenue</p>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- Sample Assistant Response -->
221
+ <div class="flex justify-start">
222
+ <div class="max-w-[80%] bg-gray-50 rounded-lg p-4">
223
+ <div class="flex items-start">
224
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-gray-100 flex items-center justify-center">
225
+ <i class="fas fa-robot text-gray-600"></i>
226
+ </div>
227
+ <div class="ml-3">
228
+ <h3 class="text-sm font-medium text-gray-800">SQL Assistant</h3>
229
+ <div class="mt-1 text-sm text-gray-700">
230
+ <p>Here are the top 5 products by revenue:</p>
231
+ <div class="result-table mt-2 border border-gray-200 rounded-lg overflow-hidden">
232
+ <table class="min-w-full divide-y divide-gray-200">
233
+ <thead class="bg-gray-100">
234
+ <tr>
235
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Product</th>
236
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Revenue</th>
237
+ </tr>
238
+ </thead>
239
+ <tbody class="divide-y divide-gray-200">
240
+ <tr>
241
+ <td class="px-4 py-2">Premium Widget</td>
242
+ <td class="px-4 py-2">$12,450</td>
243
+ </tr>
244
+ <tr>
245
+ <td class="px-4 py-2">Basic Widget</td>
246
+ <td class="px-4 py-2">$8,720</td>
247
+ </tr>
248
+ <tr>
249
+ <td class="px-4 py-2">Deluxe Package</td>
250
+ <td class="px-4 py-2">$7,890</td>
251
+ </tr>
252
+ <tr>
253
+ <td class="px-4 py-2">Standard Package</td>
254
+ <td class="px-4 py-2">$5,430</td>
255
+ </tr>
256
+ <tr>
257
+ <td class="px-4 py-2">Add-on Service</td>
258
+ <td class="px-4 py-2">$3,210</td>
259
+ </tr>
260
+ </tbody>
261
+ </table>
262
+ </div>
263
+ <div class="mt-3 text-xs text-gray-500">
264
+ <p>Generated SQL: <code class="bg-gray-200 px-1 rounded">SELECT product_name, SUM(revenue) as revenue FROM sales GROUP BY product_name ORDER BY revenue DESC LIMIT 5</code></p>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Typing Indicator (hidden by default) -->
273
+ <div id="typingIndicator" class="flex justify-start hidden">
274
+ <div class="max-w-[80%] bg-gray-50 rounded-lg p-4">
275
+ <div class="flex items-center">
276
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-gray-100 flex items-center justify-center">
277
+ <i class="fas fa-robot text-gray-600"></i>
278
+ </div>
279
+ <div class="ml-3 typing-indicator">
280
+ <span class="inline-block h-2 w-2 rounded-full bg-gray-400 mx-1"></span>
281
+ <span class="inline-block h-2 w-2 rounded-full bg-gray-400 mx-1"></span>
282
+ <span class="inline-block h-2 w-2 rounded-full bg-gray-400 mx-1"></span>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <!-- Input Area -->
290
+ <div class="border-t border-gray-200 p-4 bg-gray-50">
291
+ <div class="flex items-start space-x-2">
292
+ <div class="flex-grow">
293
+ <div class="relative">
294
+ <div id="sqlEditor" class="sql-editor w-full p-3 border border-gray-300 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" contenteditable="true" placeholder="Type your question or SQL query here..."></div>
295
+ <div class="absolute right-2 bottom-2 flex space-x-1">
296
+ <button class="p-1 text-gray-500 hover:text-indigo-600">
297
+ <i class="fas fa-magic"></i>
298
+ </button>
299
+ <button class="p-1 text-gray-500 hover:text-indigo-600">
300
+ <i class="fas fa-history"></i>
301
+ </button>
302
+ </div>
303
+ </div>
304
+ <div class="flex items-center justify-between mt-2">
305
+ <div class="flex space-x-2">
306
+ <button class="p-1 text-gray-500 hover:text-indigo-600">
307
+ <i class="fas fa-paperclip"></i>
308
+ </button>
309
+ <button class="p-1 text-gray-500 hover:text-indigo-600">
310
+ <i class="fas fa-code"></i>
311
+ </button>
312
+ </div>
313
+ <div class="text-xs text-gray-500">
314
+ <span id="charCount">0</span>/1000
315
+ </div>
316
+ </div>
317
+ </div>
318
+ <button id="sendButton" class="flex-shrink-0 h-12 w-12 rounded-full bg-indigo-600 text-white flex items-center justify-center hover:bg-indigo-700 transition">
319
+ <i class="fas fa-paper-plane"></i>
320
+ </button>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+
327
+ <script>
328
+ // Tab switching functionality
329
+ const excelTab = document.getElementById('excelTab');
330
+ const sqlTab = document.getElementById('sqlTab');
331
+ const excelSection = document.getElementById('excelSection');
332
+ const sqlSection = document.getElementById('sqlSection');
333
+
334
+ excelTab.addEventListener('click', () => {
335
+ excelTab.classList.add('active', 'text-indigo-600', 'border-indigo-600');
336
+ excelTab.classList.remove('text-gray-500');
337
+ sqlTab.classList.remove('active', 'text-indigo-600', 'border-indigo-600');
338
+ sqlTab.classList.add('text-gray-500');
339
+ excelSection.classList.remove('hidden');
340
+ sqlSection.classList.add('hidden');
341
+ });
342
+
343
+ sqlTab.addEventListener('click', () => {
344
+ sqlTab.classList.add('active', 'text-indigo-600', 'border-indigo-600');
345
+ sqlTab.classList.remove('text-gray-500');
346
+ excelTab.classList.remove('active', 'text-indigo-600', 'border-indigo-600');
347
+ excelTab.classList.add('text-gray-500');
348
+ sqlSection.classList.remove('hidden');
349
+ excelSection.classList.add('hidden');
350
+ });
351
+
352
+ // File upload functionality
353
+ const fileDropzone = document.getElementById('fileDropzone');
354
+ const fileInput = document.getElementById('fileInput');
355
+ const fileInfo = document.getElementById('fileInfo');
356
+ const fileName = document.getElementById('fileName');
357
+ const fileSize = document.getElementById('fileSize');
358
+ const removeFile = document.getElementById('removeFile');
359
+ const sheetSelect = document.getElementById('sheetSelect');
360
+
361
+ fileDropzone.addEventListener('click', () => fileInput.click());
362
+
363
+ fileInput.addEventListener('change', (e) => {
364
+ if (e.target.files.length > 0) {
365
+ const file = e.target.files[0];
366
+ fileName.textContent = file.name;
367
+ fileSize.textContent = `${(file.size / (1024 * 1024)).toFixed(1)} MB`;
368
+ fileInfo.classList.remove('hidden');
369
+ fileDropzone.classList.add('hidden');
370
+
371
+ // Simulate sheet selection (in a real app, you'd parse the Excel file)
372
+ sheetSelect.innerHTML = `
373
+ <option value="">Select a sheet</option>
374
+ <option value="Sheet1">Sheet1</option>
375
+ <option value="Sheet2">Sheet2</option>
376
+ <option value="Orders">Orders</option>
377
+ `;
378
+ sheetSelect.disabled = false;
379
+ }
380
+ });
381
+
382
+ removeFile.addEventListener('click', () => {
383
+ fileInput.value = '';
384
+ fileInfo.classList.add('hidden');
385
+ fileDropzone.classList.remove('hidden');
386
+ sheetSelect.innerHTML = '<option value="">Select a sheet</option>';
387
+ sheetSelect.disabled = true;
388
+
389
+ // Clear preview
390
+ document.getElementById('previewHeader').innerHTML = '';
391
+ document.getElementById('previewBody').innerHTML = '';
392
+ });
393
+
394
+ // Drag and drop functionality
395
+ fileDropzone.addEventListener('dragover', (e) => {
396
+ e.preventDefault();
397
+ fileDropzone.classList.add('active');
398
+ });
399
+
400
+ fileDropzone.addEventListener('dragleave', () => {
401
+ fileDropzone.classList.remove('active');
402
+ });
403
+
404
+ fileDropzone.addEventListener('drop', (e) => {
405
+ e.preventDefault();
406
+ fileDropzone.classList.remove('active');
407
+
408
+ if (e.dataTransfer.files.length > 0) {
409
+ fileInput.files = e.dataTransfer.files;
410
+ const event = new Event('change');
411
+ fileInput.dispatchEvent(event);
412
+ }
413
+ });
414
+
415
+ // Sheet selection change
416
+ sheetSelect.addEventListener('change', (e) => {
417
+ if (e.target.value) {
418
+ // Simulate loading data for the selected sheet
419
+ const headers = ['ID', 'Product', 'Category', 'Price', 'Quantity'];
420
+ const data = [
421
+ [1, 'Premium Widget', 'Widgets', 49.99, 120],
422
+ [2, 'Basic Widget', 'Widgets', 19.99, 350],
423
+ [3, 'Deluxe Package', 'Packages', 199.99, 45],
424
+ [4, 'Standard Package', 'Packages', 99.99, 80],
425
+ [5, 'Add-on Service', 'Services', 29.99, 210]
426
+ ];
427
+
428
+ const previewHeader = document.getElementById('previewHeader');
429
+ const previewBody = document.getElementById('previewBody');
430
+
431
+ // Build header
432
+ previewHeader.innerHTML = '';
433
+ const headerRow = document.createElement('tr');
434
+ headers.forEach(header => {
435
+ const th = document.createElement('th');
436
+ th.className = 'px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase';
437
+ th.textContent = header;
438
+ headerRow.appendChild(th);
439
+ });
440
+ previewHeader.appendChild(headerRow);
441
+
442
+ // Build body
443
+ previewBody.innerHTML = '';
444
+ data.forEach(row => {
445
+ const tr = document.createElement('tr');
446
+ row.forEach(cell => {
447
+ const td = document.createElement('td');
448
+ td.className = 'px-4 py-2 text-sm text-gray-700';
449
+ td.textContent = cell;
450
+ tr.appendChild(td);
451
+ });
452
+ previewBody.appendChild(tr);
453
+ });
454
+ }
455
+ });
456
+
457
+ // Chat functionality
458
+ const sqlEditor = document.getElementById('sqlEditor');
459
+ const sendButton = document.getElementById('sendButton');
460
+ const typingIndicator = document.getElementById('typingIndicator');
461
+ const charCount = document.getElementById('charCount');
462
+
463
+ // Character count
464
+ sqlEditor.addEventListener('input', () => {
465
+ charCount.textContent = sqlEditor.textContent.length;
466
+ });
467
+
468
+ // Send message
469
+ sendButton.addEventListener('click', () => {
470
+ const message = sqlEditor.textContent.trim();
471
+ if (message) {
472
+ // Add user message to chat
473
+ const chatContainer = document.querySelector('.chat-container');
474
+ const userMessage = document.createElement('div');
475
+ userMessage.className = 'flex justify-end';
476
+ userMessage.innerHTML = `
477
+ <div class="max-w-[80%] bg-indigo-600 rounded-lg p-4 text-white">
478
+ <p>${message}</p>
479
+ </div>
480
+ `;
481
+ chatContainer.appendChild(userMessage);
482
+
483
+ // Clear input
484
+ sqlEditor.textContent = '';
485
+ charCount.textContent = '0';
486
+
487
+ // Show typing indicator
488
+ typingIndicator.classList.remove('hidden');
489
+
490
+ // Scroll to bottom
491
+ chatContainer.scrollTop = chatContainer.scrollHeight;
492
+
493
+ // Simulate assistant response after delay
494
+ setTimeout(() => {
495
+ typingIndicator.classList.add('hidden');
496
+
497
+ // Create assistant response
498
+ const assistantResponse = document.createElement('div');
499
+ assistantResponse.className = 'flex justify-start';
500
+ assistantResponse.innerHTML = `
501
+ <div class="max-w-[80%] bg-gray-50 rounded-lg p-4">
502
+ <div class="flex items-start">
503
+ <div class="flex-shrink-0 h-8 w-8 rounded-full bg-gray-100 flex items-center justify-center">
504
+ <i class="fas fa-robot text-gray-600"></i>
505
+ </div>
506
+ <div class="ml-3">
507
+ <h3 class="text-sm font-medium text-gray-800">SQL Assistant</h3>
508
+ <div class="mt-1 text-sm text-gray-700">
509
+ <p>Here are the results for your query:</p>
510
+ <div class="result-table mt-2 border border-gray-200 rounded-lg overflow-hidden">
511
+ <table class="min-w-full divide-y divide-gray-200">
512
+ <thead class="bg-gray-100">
513
+ <tr>
514
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Column 1</th>
515
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Column 2</th>
516
+ <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Column 3</th>
517
+ </tr>
518
+ </thead>
519
+ <tbody class="divide-y divide-gray-200">
520
+ <tr>
521
+ <td class="px-4 py-2">Value 1</td>
522
+ <td class="px-4 py-2">Value 2</td>
523
+ <td class="px-4 py-2">Value 3</td>
524
+ </tr>
525
+ <tr>
526
+ <td class="px-4 py-2">Value 4</td>
527
+ <td class="px-4 py-2">Value 5</td>
528
+ <td class="px-4 py-2">Value 6</td>
529
+ </tr>
530
+ </tbody>
531
+ </table>
532
+ </div>
533
+ <div class="mt-3 text-xs text-gray-500">
534
+ <p>Generated SQL: <code class="bg-gray-200 px-1 rounded">SELECT * FROM ${sheetSelect.value || 'your_data'} WHERE condition</code></p>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ </div>
539
+ </div>
540
+ `;
541
+ chatContainer.appendChild(assistantResponse);
542
+
543
+ // Scroll to bottom
544
+ chatContainer.scrollTop = chatContainer.scrollHeight;
545
+ }, 1500);
546
+ }
547
+ });
548
+
549
+ // Dark mode toggle
550
+ const darkModeToggle = document.getElementById('darkModeToggle');
551
+ darkModeToggle.addEventListener('click', () => {
552
+ document.documentElement.classList.toggle('dark');
553
+ const icon = darkModeToggle.querySelector('i');
554
+ if (document.documentElement.classList.contains('dark')) {
555
+ icon.classList.remove('fa-moon');
556
+ icon.classList.add('fa-sun');
557
+ icon.classList.remove('text-gray-600');
558
+ icon.classList.add('text-yellow-300');
559
+ } else {
560
+ icon.classList.remove('fa-sun');
561
+ icon.classList.add('fa-moon');
562
+ icon.classList.remove('text-yellow-300');
563
+ icon.classList.add('text-gray-600');
564
+ }
565
+ });
566
+ </script>
567
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SanyamV/sql-query-agent-project" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
568
+ </html>