-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
165 lines (155 loc) · 15.4 KB
/
index.html
File metadata and controls
165 lines (155 loc) · 15.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DataFlow</title>
<link rel="icon" href="/static/DataFlow.png" type="image/png">
<link rel="stylesheet" href="/static/main.min.css" />
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
<script src="https://unpkg.com/lucide@latest" defer></script>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js" defer></script>
<script src="/static/prism.min.js" defer></script>
<link rel="stylesheet" href="/static/prism.min.css" />
</head>
<body class="font-sans flex flex-col" style="height: var(--app-height, 100vh);">
<header class="bg-gradient-to-r from-indigo-800 to-blue-600 text-white p-4 shadow-md flex justify-between items-center z-20">
<a href="/" id="header-link" class="text-xl font-bold flex items-center">
<img id="header-db-icon" loading="lazy" src="/static/DataFlow.png" alt="DataFlow Logo" class="mr-2 h-9 w-9" style="filter: brightness(0) invert(1);">
<span id="header-title-text">DataFlow</span>
</a>
<div class="flex items-center space-x-3">
<button id="dark-mode-toggle-btn" class="header-btn bg-white text-indigo-600 hover:bg-indigo-100 font-semibold py-2 px-4 rounded-lg text-sm flex items-center shadow">
<span id="dark-mode-icon-container" class="btn-icon mr-1 h-4 w-4">
<!-- Icon will be placed here by JS -->
</span>
<span class="btn-text">Theme</span>
</button>
<button id="new-chat-btn" class="header-btn bg-white text-indigo-600 hover:bg-indigo-100 font-semibold py-2 px-4 rounded-lg text-sm flex items-center shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="btn-icon mr-1 h-4 w-4 text-indigo-600"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
<span class="btn-text">New Chat</span>
</button>
<button id="config-toggle-btn" class="header-btn bg-white text-indigo-600 hover:bg-indigo-100 font-semibold py-2 px-4 rounded-lg text-sm flex items-center shadow">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="btn-icon mr-1 h-4 w-4 text-indigo-600" id="settings-icon"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path><circle cx="12" cy="12" r="3"></circle></svg>
<span class="btn-text">Config</span>
</button>
<button id="schema-toggle-btn" class="header-btn bg-white text-indigo-600 hover:bg-indigo-100 font-semibold py-2 px-4 rounded-lg text-sm flex items-center shadow">
<span id="schema-db-icon" class="btn-icon mr-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-indigo-600"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg>
</span>
<span id="schema-up-icon" class="btn-icon mr-1 hidden">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-indigo-600"><polyline points="9 18 15 12 9 6"></polyline></svg>
</span>
<span id="schema-text" class="btn-text">View Schema</span>
</button>
</div>
</header>
<!-- Toast Container -->
<div id="toast-container"></div>
<!-- Configuration Popup -->
<div id="config-popup" class="rounded-lg p-4">
<div class="flex justify-between items-center mb-3">
<h3 class="font-semibold">Database Configuration</h3>
<button id="close-config-btn" class="text-gray-500 hover:text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>
<form id="config-form" class="space-y-4 pt-2">
<div class="input-group">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-server-icon lucide-server"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/></svg>
<input type="text" id="mysql-host" name="mysql-host" placeholder=" " class="bg-transparent">
<label for="mysql-host" class="floating-label">MySQL Host</label>
</div>
<div class="input-group">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-icon lucide-user"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
<input type="text" id="mysql-user" name="mysql-user" placeholder=" " class="bg-transparent" autocomplete="new-password">
<label for="mysql-user" class="floating-label">MySQL User</label>
</div>
<div class="input-group">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-key-round-icon lucide-key-round"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"/><circle cx="16.5" cy="7.5" r=".5" fill="currentColor" data-darkreader-inline-fill="" style="--darkreader-inline-fill: currentColor;"/></svg>
<input type="password" id="mysql-password" name="mysql-password" placeholder=" " class="bg-transparent" autocomplete="new-password">
<label for="mysql-password" class="floating-label">MySQL Password</label>
<button type="button" class="toggle-password" data-target="mysql-password">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-icon lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
</button>
</div>
<div class="input-group">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-key-round-icon lucide-key-round"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"/><circle cx="16.5" cy="7.5" r=".5" fill="currentColor" data-darkreader-inline-fill="" style="--darkreader-inline-fill: currentColor;"/></svg>
<input type="password" id="gemini-api-key" name="gemini-api-key" placeholder=" " class="bg-transparent">
<label for="gemini-api-key" class="floating-label">Gemini API Key</label>
<button type="button" class="toggle-password" data-target="gemini-api-key">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye-icon lucide-eye"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>
</button>
</div>
<div class="pt-2">
<button type="button" id="config-save-btn" class="w-full inline-flex justify-center items-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 button-primary">
<span id="config-save-text">Save Configuration</span>
<div id="config-save-spinner" class="hidden ml-2 flex items-center">
<!-- SVG Spinner will be inserted here by JS -->
</div>
</button>
</div>
</form>
</div>
<!-- Main Content Area: Chat + Schema Sidebar -->
<div id="main-content-wrapper" class="flex flex-1 overflow-hidden">
<main id="chat-area" class="flex-1 flex flex-col overflow-hidden initial-state">
<div id="initial-view-content" class="text-center px-4">
<h1 id="greeting" class="text-5xl font-bold text-gray-700 mb-4 tracking-tight"></h1>
<p id="welcome-text" class="text-gray-500 max-w-xl mx-auto">Curious about your data? Ask a question or type <code class="bg-gray-200 text-gray-700 px-1 rounded text-xs">/run</code> to execute a direct SQL query.</p>
</div>
<div id="chat-history" class="flex-1 overflow-y-auto space-y-4 p-4">
<!-- The initial welcome message is now handled by #initial-view-content -->
</div>
<!-- Go-to-bottom floating button (added) -->
<button id="scroll-bottom-btn" title="Scroll to latest" class="hidden absolute left-1/2 transform -translate-x-1/2 bottom-24 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-2 shadow-lg focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div id="chat-input-area" class="w-full p-4 relative">
<div id="slash-command-popup" class="absolute bottom-full left-0 mb-1 w-auto border rounded-md shadow-lg z-20 hidden">
<!-- Suggestions will be added here by JS -->
</div>
<form id="chat-form" class="flex items-center space-x-3">
<div id="input-wrapper" class="flex-1 flex items-center rounded-lg focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-transparent transition duration-150 ease-in-out overflow-hidden">
<button type="button" id="terminal-btn" title="Activate Run Command">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-terminal-icon lucide-terminal"><path d="M12 19h8"/><path d="m4 17 6-6-6-6"/></svg>
</button>
<span id="run-command-tag" class="hidden bg-blue-600 text-white text-sm font-semibold py-1 px-3 flex items-center cursor-default">
/run
<button type="button" id="remove-run-tag-btn" class="text-blue-200 hover:text-white focus:outline-none p-1">
<svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</span>
<input type="text" id="message-input" placeholder="Type your message or /run command..." class="flex-1 px-4 py-2 focus:outline-none bg-transparent h-full text-sm" required>
</div>
<button type="submit" id="send-button" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-full flex items-center justify-center h-10 w-10 relative">
<svg id="send-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5 absolute"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>
<div id="send-spinner" class="hidden absolute">
<!-- SVG Spinner will be inserted here by JS -->
</div>
</button>
</form>
</div>
</main>
<div id="schema-display"
class="bg-white text-sm transition-all duration-300 ease-in-out">
<!-- Removed: border-gray-200, overflow-hidden, max-h-0, opacity-0, p-0, border-0. Applied via CSS rules and 'open' class -->
<!-- Content will be dynamically inserted by JS, including spinner -->
<!-- The header and refresh button are now part of the dynamic content or structured here -->
<div id="schema-display-header">
<h3 class="font-semibold text-gray-700 dark:text-gray-200">Database Schema</h3>
<button id="refresh-schema-btn" class="text-xs bg-gray-200 hover:bg-gray-300 text-gray-700 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 font-semibold py-1 px-2 rounded inline-flex items-center">
<svg class="mr-1 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg> Refresh Schema
</button>
</div>
<div id="schema-content" class="text-gray-600 dark:text-gray-400">
<!-- Schema items will be loaded here -->
</div>
</div>
</div> <!-- End #main-content-wrapper -->
<script src="/static/main.js" defer></script>
</body>
</html>