banko-ai-assistant 1.0.0__py3-none-any.whl
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- banko_ai/__init__.py +19 -0
- banko_ai/__main__.py +10 -0
- banko_ai/ai_providers/__init__.py +18 -0
- banko_ai/ai_providers/aws_provider.py +337 -0
- banko_ai/ai_providers/base.py +175 -0
- banko_ai/ai_providers/factory.py +84 -0
- banko_ai/ai_providers/gemini_provider.py +340 -0
- banko_ai/ai_providers/openai_provider.py +295 -0
- banko_ai/ai_providers/watsonx_provider.py +591 -0
- banko_ai/cli.py +374 -0
- banko_ai/config/__init__.py +5 -0
- banko_ai/config/settings.py +216 -0
- banko_ai/static/Anallytics.png +0 -0
- banko_ai/static/Graph.png +0 -0
- banko_ai/static/Graph2.png +0 -0
- banko_ai/static/ai-status.png +0 -0
- banko_ai/static/banko-ai-assistant-watsonx.gif +0 -0
- banko_ai/static/banko-db-ops.png +0 -0
- banko_ai/static/banko-response.png +0 -0
- banko_ai/static/cache-stats.png +0 -0
- banko_ai/static/creditcard.png +0 -0
- banko_ai/static/profilepic.jpeg +0 -0
- banko_ai/static/query_watcher.png +0 -0
- banko_ai/static/roach-logo.svg +54 -0
- banko_ai/static/watsonx-icon.svg +1 -0
- banko_ai/templates/base.html +59 -0
- banko_ai/templates/dashboard.html +569 -0
- banko_ai/templates/index.html +1499 -0
- banko_ai/templates/login.html +41 -0
- banko_ai/utils/__init__.py +8 -0
- banko_ai/utils/cache_manager.py +525 -0
- banko_ai/utils/database.py +202 -0
- banko_ai/utils/migration.py +123 -0
- banko_ai/vector_search/__init__.py +18 -0
- banko_ai/vector_search/enrichment.py +278 -0
- banko_ai/vector_search/generator.py +329 -0
- banko_ai/vector_search/search.py +463 -0
- banko_ai/web/__init__.py +13 -0
- banko_ai/web/app.py +668 -0
- banko_ai/web/auth.py +73 -0
- banko_ai_assistant-1.0.0.dist-info/METADATA +414 -0
- banko_ai_assistant-1.0.0.dist-info/RECORD +46 -0
- banko_ai_assistant-1.0.0.dist-info/WHEEL +5 -0
- banko_ai_assistant-1.0.0.dist-info/entry_points.txt +2 -0
- banko_ai_assistant-1.0.0.dist-info/licenses/LICENSE +21 -0
- banko_ai_assistant-1.0.0.dist-info/top_level.txt +1 -0
|
@@ -0,0 +1,569 @@
|
|
|
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>Banko - Home Dashboard</title>
|
|
7
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
8
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
9
|
+
<link rel="stylesheet" href="/static/css/style.css?v={{ range(1, 10000) | random }}">
|
|
10
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
11
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
12
|
+
|
|
13
|
+
<script>
|
|
14
|
+
tailwind.config = {
|
|
15
|
+
theme: {
|
|
16
|
+
extend: {
|
|
17
|
+
fontFamily: {
|
|
18
|
+
'inter': ['Inter', 'system-ui', 'sans-serif'],
|
|
19
|
+
},
|
|
20
|
+
colors: {
|
|
21
|
+
'cockroach': {
|
|
22
|
+
'primary': '#6933FF',
|
|
23
|
+
'primary-light': '#8B5CF6',
|
|
24
|
+
'primary-dark': '#5B21B6',
|
|
25
|
+
'secondary': '#10B981',
|
|
26
|
+
'accent': '#F59E0B',
|
|
27
|
+
'background': '#FFFFFF',
|
|
28
|
+
'surface': '#F8FAFC',
|
|
29
|
+
'border': '#E2E8F0',
|
|
30
|
+
'text': '#1E293B',
|
|
31
|
+
'text-light': '#64748B',
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
</script>
|
|
38
|
+
<style>
|
|
39
|
+
.mobile-overlay {
|
|
40
|
+
position: fixed;
|
|
41
|
+
top: 0;
|
|
42
|
+
left: 0;
|
|
43
|
+
right: 0;
|
|
44
|
+
bottom: 0;
|
|
45
|
+
background: rgba(0, 0, 0, 0.5);
|
|
46
|
+
z-index: 40;
|
|
47
|
+
transition: opacity 0.3s ease;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.sidebar-hidden {
|
|
51
|
+
transform: translateX(-100%);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.sidebar-visible {
|
|
55
|
+
transform: translateX(0);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.card-shadow {
|
|
59
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.dashboard-card {
|
|
63
|
+
background: white;
|
|
64
|
+
border-radius: 1rem;
|
|
65
|
+
padding: 1.5rem;
|
|
66
|
+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
67
|
+
border: 1px solid #E2E8F0;
|
|
68
|
+
transition: all 0.3s ease;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.dashboard-card:hover {
|
|
72
|
+
transform: translateY(-2px);
|
|
73
|
+
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.stat-card {
|
|
77
|
+
background: linear-gradient(135deg, #6933FF 0%, #8B5CF6 100%);
|
|
78
|
+
color: white;
|
|
79
|
+
border-radius: 1rem;
|
|
80
|
+
padding: 1.5rem;
|
|
81
|
+
box-shadow: 0 4px 20px rgba(105, 51, 255, 0.3);
|
|
82
|
+
transition: all 0.3s ease;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.stat-card:hover {
|
|
86
|
+
transform: translateY(-2px);
|
|
87
|
+
box-shadow: 0 8px 30px rgba(105, 51, 255, 0.4);
|
|
88
|
+
}
|
|
89
|
+
</style>
|
|
90
|
+
</head>
|
|
91
|
+
<body class="bg-cockroach-surface text-cockroach-text">
|
|
92
|
+
<div class="flex h-screen">
|
|
93
|
+
<!-- Sidebar -->
|
|
94
|
+
<aside id="sidebar" class="fixed lg:static left-0 top-0 h-full w-72 bg-white border-r border-cockroach-border flex flex-col z-50 shadow-lg transition-all duration-300">
|
|
95
|
+
<!-- Sidebar Header -->
|
|
96
|
+
<div class="p-6 border-b border-cockroach-border bg-gradient-to-br from-cockroach-primary to-cockroach-primary-light">
|
|
97
|
+
<div class="flex items-center justify-between">
|
|
98
|
+
<div>
|
|
99
|
+
<h1 class="text-2xl font-bold text-white">Banko</h1>
|
|
100
|
+
<p class="text-white/80 text-sm">AI Banking Assistant</p>
|
|
101
|
+
</div>
|
|
102
|
+
<button id="sidebar-close" class="lg:hidden text-white hover:bg-white/20 p-2 rounded-lg transition-colors">
|
|
103
|
+
<i class="fas fa-times text-lg"></i>
|
|
104
|
+
</button>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
<!-- Navigation -->
|
|
109
|
+
<nav class="flex-1 p-6">
|
|
110
|
+
<div class="space-y-2">
|
|
111
|
+
<a href="/home" class="sidebar-item {{ 'active' if current_page == 'home' else '' }}">
|
|
112
|
+
<i class="fas fa-home"></i>
|
|
113
|
+
<span>Home</span>
|
|
114
|
+
</a>
|
|
115
|
+
<a href="/savings" class="sidebar-item {{ 'active' if current_page == 'savings' else '' }}">
|
|
116
|
+
<i class="fas fa-piggy-bank"></i>
|
|
117
|
+
<span>Savings</span>
|
|
118
|
+
</a>
|
|
119
|
+
<a href="/wallet" class="sidebar-item {{ 'active' if current_page == 'wallet' else '' }}">
|
|
120
|
+
<i class="fas fa-wallet"></i>
|
|
121
|
+
<span>Wallet</span>
|
|
122
|
+
</a>
|
|
123
|
+
<a href="/credit-card" class="sidebar-item {{ 'active' if current_page == 'credit-card' else '' }}">
|
|
124
|
+
<i class="fas fa-credit-card"></i>
|
|
125
|
+
<span>Credit Card</span>
|
|
126
|
+
</a>
|
|
127
|
+
<a href="/statements" class="sidebar-item {{ 'active' if current_page == 'statements' else '' }}">
|
|
128
|
+
<i class="fas fa-file-alt"></i>
|
|
129
|
+
<span>Statements</span>
|
|
130
|
+
</a>
|
|
131
|
+
<a href="/banko" class="sidebar-item {{ 'active' if current_page == 'banko' else '' }}">
|
|
132
|
+
<i class="fas fa-robot"></i>
|
|
133
|
+
<span>Banko Assistant</span>
|
|
134
|
+
</a>
|
|
135
|
+
<a href="/benefits" class="sidebar-item {{ 'active' if current_page == 'benefits' else '' }}">
|
|
136
|
+
<i class="fas fa-star"></i>
|
|
137
|
+
<span>Benefits</span>
|
|
138
|
+
</a>
|
|
139
|
+
<a href="/settings" class="sidebar-item {{ 'active' if current_page == 'settings' else '' }}">
|
|
140
|
+
<i class="fas fa-cog"></i>
|
|
141
|
+
<span>Settings</span>
|
|
142
|
+
</a>
|
|
143
|
+
</div>
|
|
144
|
+
</nav>
|
|
145
|
+
|
|
146
|
+
<!-- Sidebar Footer -->
|
|
147
|
+
<div class="p-4 border-t border-cockroach-border">
|
|
148
|
+
<div class="text-center text-xs text-cockroach-text-light">
|
|
149
|
+
<p>Powered by CockroachDB</p>
|
|
150
|
+
<p>© 2025 Banko</p>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
</aside>
|
|
154
|
+
|
|
155
|
+
<!-- Mobile Overlay -->
|
|
156
|
+
<div id="mobile-overlay" class="mobile-overlay hidden"></div>
|
|
157
|
+
|
|
158
|
+
<!-- Main Content -->
|
|
159
|
+
<main id="main-content" class="flex-1 flex flex-col transition-all duration-300">
|
|
160
|
+
<!-- Header -->
|
|
161
|
+
<header class="header flex items-center justify-between">
|
|
162
|
+
<div class="flex items-center space-x-6">
|
|
163
|
+
<button id="sidebar-toggle" class="lg:hidden btn-modern btn-secondary">
|
|
164
|
+
<i class="fas fa-bars"></i>
|
|
165
|
+
</button>
|
|
166
|
+
<h2 class="text-2xl font-bold text-white">Welcome to Roachathon Bank!</h2>
|
|
167
|
+
<div class="provider-badges flex items-center">
|
|
168
|
+
<span class="provider-badge badge-db">
|
|
169
|
+
<img src="/static/roach-logo.svg" alt="CockroachDB" />
|
|
170
|
+
CockroachDB
|
|
171
|
+
</span>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
<div class="flex items-center space-x-4">
|
|
175
|
+
<div class="flex items-center space-x-2 text-white">
|
|
176
|
+
<img src="/static/profilepic.jpeg" alt="Profile" class="w-8 h-8 rounded-full">
|
|
177
|
+
<span class="text-sm font-medium">John Doe</span>
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
</header>
|
|
181
|
+
|
|
182
|
+
<!-- Dashboard Content -->
|
|
183
|
+
<div class="flex-1 p-6 overflow-y-auto">
|
|
184
|
+
{% if current_page == 'settings' %}
|
|
185
|
+
<!-- Settings Content -->
|
|
186
|
+
<div class="max-w-4xl mx-auto">
|
|
187
|
+
<div class="bg-white rounded-lg shadow-lg p-6">
|
|
188
|
+
<h3 class="text-xl font-semibold mb-6">Settings</h3>
|
|
189
|
+
|
|
190
|
+
<!-- AI Provider Section -->
|
|
191
|
+
<div class="mb-8">
|
|
192
|
+
<h4 class="text-md font-medium text-gray-700 mb-4">AI Configuration</h4>
|
|
193
|
+
<div class="space-y-4">
|
|
194
|
+
<div>
|
|
195
|
+
<label class="block text-sm font-medium text-gray-700 mb-2">AI Provider:</label>
|
|
196
|
+
<div class="flex items-center space-x-2">
|
|
197
|
+
<span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
|
|
198
|
+
{{ ai_provider.name if ai_provider else 'Unknown' }}
|
|
199
|
+
</span>
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
|
|
203
|
+
<div>
|
|
204
|
+
<label for="model-select" class="block text-sm font-medium text-gray-700 mb-2">AI Model:</label>
|
|
205
|
+
<div class="flex space-x-2">
|
|
206
|
+
<select id="model-select" class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white">
|
|
207
|
+
<option value="">Loading models...</option>
|
|
208
|
+
</select>
|
|
209
|
+
<button id="refresh-models" class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
|
|
210
|
+
<i class="fas fa-sync-alt"></i>
|
|
211
|
+
</button>
|
|
212
|
+
</div>
|
|
213
|
+
<p class="text-xs text-gray-500 mt-1">Switch between different models for the current AI provider</p>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
|
|
218
|
+
<!-- System Status Section -->
|
|
219
|
+
<div class="mb-8">
|
|
220
|
+
<h4 class="text-md font-medium text-gray-700 mb-4">System Status</h4>
|
|
221
|
+
<div id="system-status" class="space-y-2">
|
|
222
|
+
<div class="flex items-center space-x-2">
|
|
223
|
+
<i class="fas fa-spinner fa-spin text-blue-500"></i>
|
|
224
|
+
<span class="text-sm text-gray-600">Checking system status...</span>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|
|
230
|
+
{% else %}
|
|
231
|
+
<!-- Default Dashboard Content -->
|
|
232
|
+
<!-- Stats Cards -->
|
|
233
|
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
|
234
|
+
<div class="stat-card">
|
|
235
|
+
<div class="flex items-center justify-between">
|
|
236
|
+
<div>
|
|
237
|
+
<p class="text-white/80 text-sm">Card Balance</p>
|
|
238
|
+
<p class="text-2xl font-bold text-white">-$2300.47</p>
|
|
239
|
+
</div>
|
|
240
|
+
<div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
|
|
241
|
+
<i class="fas fa-credit-card text-white text-lg"></i>
|
|
242
|
+
</div>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<div class="dashboard-card">
|
|
247
|
+
<div class="flex items-center justify-between">
|
|
248
|
+
<div>
|
|
249
|
+
<p class="text-cockroach-text-light text-sm">Credit Limit</p>
|
|
250
|
+
<p class="text-2xl font-bold text-cockroach-secondary">$25000</p>
|
|
251
|
+
<p class="text-xs text-cockroach-text-light">Approved</p>
|
|
252
|
+
</div>
|
|
253
|
+
<div class="w-12 h-12 bg-cockroach-secondary/10 rounded-full flex items-center justify-center">
|
|
254
|
+
<i class="fas fa-check-circle text-cockroach-secondary text-lg"></i>
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
258
|
+
|
|
259
|
+
<div class="dashboard-card">
|
|
260
|
+
<div class="flex items-center justify-between">
|
|
261
|
+
<div>
|
|
262
|
+
<p class="text-cockroach-text-light text-sm">Recent Transaction</p>
|
|
263
|
+
<p class="text-lg font-bold text-cockroach-text">Salary</p>
|
|
264
|
+
<p class="text-sm text-cockroach-secondary">+$5,000.00</p>
|
|
265
|
+
</div>
|
|
266
|
+
<div class="w-12 h-12 bg-cockroach-secondary/10 rounded-full flex items-center justify-center">
|
|
267
|
+
<i class="fas fa-arrow-up text-cockroach-secondary text-lg"></i>
|
|
268
|
+
</div>
|
|
269
|
+
</div>
|
|
270
|
+
</div>
|
|
271
|
+
|
|
272
|
+
<div class="dashboard-card">
|
|
273
|
+
<div class="flex items-center justify-between">
|
|
274
|
+
<div>
|
|
275
|
+
<p class="text-cockroach-text-light text-sm">Monthly Spending</p>
|
|
276
|
+
<p class="text-lg font-bold text-cockroach-text">Shopping 52%</p>
|
|
277
|
+
<p class="text-xs text-cockroach-text-light">Top category</p>
|
|
278
|
+
</div>
|
|
279
|
+
<div class="w-12 h-12 bg-blue-500/10 rounded-full flex items-center justify-center">
|
|
280
|
+
<i class="fas fa-shopping-cart text-blue-500 text-lg"></i>
|
|
281
|
+
</div>
|
|
282
|
+
</div>
|
|
283
|
+
</div>
|
|
284
|
+
</div>
|
|
285
|
+
|
|
286
|
+
<!-- Charts Section -->
|
|
287
|
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
|
|
288
|
+
<!-- Expenses Chart -->
|
|
289
|
+
<div class="dashboard-card">
|
|
290
|
+
<h3 class="text-lg font-semibold text-cockroach-text mb-4">Expenses by Category</h3>
|
|
291
|
+
<div class="flex items-center justify-center">
|
|
292
|
+
<img src="/static/Graph.png" alt="Expenses Chart" class="max-w-full h-auto rounded-lg">
|
|
293
|
+
</div>
|
|
294
|
+
</div>
|
|
295
|
+
|
|
296
|
+
<!-- Spend Analysis -->
|
|
297
|
+
<div class="dashboard-card">
|
|
298
|
+
<h3 class="text-lg font-semibold text-cockroach-text mb-4">Spend Analysis</h3>
|
|
299
|
+
<div class="flex items-center justify-center">
|
|
300
|
+
<img src="/static/Graph2.png" alt="Spend Analysis" class="max-w-full h-auto rounded-lg">
|
|
301
|
+
</div>
|
|
302
|
+
</div>
|
|
303
|
+
</div>
|
|
304
|
+
|
|
305
|
+
<!-- Transactions Section -->
|
|
306
|
+
<div class="dashboard-card">
|
|
307
|
+
<div class="flex items-center justify-between mb-6">
|
|
308
|
+
<h3 class="text-lg font-semibold text-cockroach-text">Recent Transactions</h3>
|
|
309
|
+
<button class="text-cockroach-primary hover:text-cockroach-primary-dark font-medium text-sm">
|
|
310
|
+
More details →
|
|
311
|
+
</button>
|
|
312
|
+
</div>
|
|
313
|
+
|
|
314
|
+
<div class="space-y-4">
|
|
315
|
+
<div class="flex items-center justify-between p-4 bg-cockroach-surface rounded-lg">
|
|
316
|
+
<div class="flex items-center space-x-4">
|
|
317
|
+
<div class="w-10 h-10 bg-yellow-500/10 rounded-full flex items-center justify-center">
|
|
318
|
+
<i class="fas fa-utensils text-yellow-500"></i>
|
|
319
|
+
</div>
|
|
320
|
+
<div>
|
|
321
|
+
<p class="font-medium text-cockroach-text">Uber eats</p>
|
|
322
|
+
<p class="text-sm text-cockroach-text-light">Jan 31, 9:00 AM</p>
|
|
323
|
+
</div>
|
|
324
|
+
</div>
|
|
325
|
+
<span class="font-semibold text-red-500">-$23.10</span>
|
|
326
|
+
</div>
|
|
327
|
+
|
|
328
|
+
<div class="flex items-center justify-between p-4 bg-cockroach-surface rounded-lg">
|
|
329
|
+
<div class="flex items-center space-x-4">
|
|
330
|
+
<div class="w-10 h-10 bg-blue-500/10 rounded-full flex items-center justify-center">
|
|
331
|
+
<i class="fas fa-dumbbell text-blue-500"></i>
|
|
332
|
+
</div>
|
|
333
|
+
<div>
|
|
334
|
+
<p class="font-medium text-cockroach-text">Gym membership</p>
|
|
335
|
+
<p class="text-sm text-cockroach-text-light">Jan 30, 10:31 PM</p>
|
|
336
|
+
</div>
|
|
337
|
+
</div>
|
|
338
|
+
<span class="font-semibold text-red-500">-$150.00</span>
|
|
339
|
+
</div>
|
|
340
|
+
|
|
341
|
+
<div class="flex items-center justify-between p-4 bg-cockroach-surface rounded-lg">
|
|
342
|
+
<div class="flex items-center space-x-4">
|
|
343
|
+
<div class="w-10 h-10 bg-green-500/10 rounded-full flex items-center justify-center">
|
|
344
|
+
<i class="fas fa-dollar-sign text-green-500"></i>
|
|
345
|
+
</div>
|
|
346
|
+
<div>
|
|
347
|
+
<p class="font-medium text-cockroach-text">Salary</p>
|
|
348
|
+
<p class="text-sm text-cockroach-text-light">Jan 30, 12:15 PM</p>
|
|
349
|
+
</div>
|
|
350
|
+
</div>
|
|
351
|
+
<span class="font-semibold text-green-500">+$5,000.00</span>
|
|
352
|
+
</div>
|
|
353
|
+
</div>
|
|
354
|
+
</div>
|
|
355
|
+
{% endif %}
|
|
356
|
+
</div>
|
|
357
|
+
</main>
|
|
358
|
+
</div>
|
|
359
|
+
|
|
360
|
+
<script>
|
|
361
|
+
// Sidebar Management
|
|
362
|
+
class SidebarManager {
|
|
363
|
+
constructor() {
|
|
364
|
+
this.sidebar = document.getElementById('sidebar');
|
|
365
|
+
this.mainContent = document.getElementById('main-content');
|
|
366
|
+
this.sidebarToggle = document.getElementById('sidebar-toggle');
|
|
367
|
+
this.sidebarClose = document.getElementById('sidebar-close');
|
|
368
|
+
this.mobileOverlay = document.getElementById('mobile-overlay');
|
|
369
|
+
this.isOpen = true;
|
|
370
|
+
|
|
371
|
+
this.init();
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
init() {
|
|
375
|
+
this.sidebarToggle?.addEventListener('click', () => this.toggle());
|
|
376
|
+
this.sidebarClose?.addEventListener('click', () => this.close());
|
|
377
|
+
this.mobileOverlay?.addEventListener('click', () => this.close());
|
|
378
|
+
|
|
379
|
+
// Handle window resize
|
|
380
|
+
window.addEventListener('resize', () => this.handleResize());
|
|
381
|
+
this.handleResize();
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
toggle() {
|
|
385
|
+
if (this.isOpen) {
|
|
386
|
+
this.close();
|
|
387
|
+
} else {
|
|
388
|
+
this.open();
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
open() {
|
|
393
|
+
this.isOpen = true;
|
|
394
|
+
this.sidebar.classList.remove('sidebar-hidden');
|
|
395
|
+
this.sidebar.classList.add('sidebar-visible');
|
|
396
|
+
this.mobileOverlay?.classList.remove('hidden');
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
close() {
|
|
400
|
+
this.isOpen = false;
|
|
401
|
+
this.sidebar.classList.add('sidebar-hidden');
|
|
402
|
+
this.sidebar.classList.remove('sidebar-visible');
|
|
403
|
+
this.mobileOverlay?.classList.add('hidden');
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
handleResize() {
|
|
407
|
+
if (window.innerWidth >= 1024) {
|
|
408
|
+
// Desktop: always show sidebar
|
|
409
|
+
this.sidebar.classList.remove('sidebar-hidden');
|
|
410
|
+
this.sidebar.classList.add('sidebar-visible');
|
|
411
|
+
this.mobileOverlay?.classList.add('hidden');
|
|
412
|
+
this.isOpen = true;
|
|
413
|
+
} else {
|
|
414
|
+
// Mobile: hide sidebar by default
|
|
415
|
+
this.sidebar.classList.add('sidebar-hidden');
|
|
416
|
+
this.sidebar.classList.remove('sidebar-visible');
|
|
417
|
+
this.mobileOverlay?.classList.add('hidden');
|
|
418
|
+
this.isOpen = false;
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
// Model Switching Functionality
|
|
424
|
+
class ModelManager {
|
|
425
|
+
constructor() {
|
|
426
|
+
this.modelSelect = document.getElementById('model-select');
|
|
427
|
+
this.refreshButton = document.getElementById('refresh-models');
|
|
428
|
+
this.systemStatus = document.getElementById('system-status');
|
|
429
|
+
|
|
430
|
+
if (this.modelSelect) {
|
|
431
|
+
this.init();
|
|
432
|
+
}
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
init() {
|
|
436
|
+
this.loadModels();
|
|
437
|
+
this.loadSystemStatus();
|
|
438
|
+
|
|
439
|
+
if (this.modelSelect) {
|
|
440
|
+
this.modelSelect.addEventListener('change', (e) => {
|
|
441
|
+
if (e.target.value) {
|
|
442
|
+
this.switchModel(e.target.value);
|
|
443
|
+
}
|
|
444
|
+
});
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
if (this.refreshButton) {
|
|
448
|
+
this.refreshButton.addEventListener('click', () => {
|
|
449
|
+
this.loadModels();
|
|
450
|
+
this.loadSystemStatus();
|
|
451
|
+
});
|
|
452
|
+
}
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
async loadModels() {
|
|
456
|
+
try {
|
|
457
|
+
const response = await fetch('/api/models');
|
|
458
|
+
const data = await response.json();
|
|
459
|
+
|
|
460
|
+
if (data.success && this.modelSelect) {
|
|
461
|
+
this.modelSelect.innerHTML = '';
|
|
462
|
+
|
|
463
|
+
data.models.forEach(model => {
|
|
464
|
+
const option = document.createElement('option');
|
|
465
|
+
option.value = model;
|
|
466
|
+
option.textContent = model;
|
|
467
|
+
if (model === data.current) {
|
|
468
|
+
option.selected = true;
|
|
469
|
+
}
|
|
470
|
+
this.modelSelect.appendChild(option);
|
|
471
|
+
});
|
|
472
|
+
}
|
|
473
|
+
} catch (error) {
|
|
474
|
+
console.error('Error loading models:', error);
|
|
475
|
+
if (this.modelSelect) {
|
|
476
|
+
this.modelSelect.innerHTML = '<option value="">Error loading models</option>';
|
|
477
|
+
}
|
|
478
|
+
}
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
async switchModel(model) {
|
|
482
|
+
try {
|
|
483
|
+
const response = await fetch('/api/models', {
|
|
484
|
+
method: 'POST',
|
|
485
|
+
headers: { 'Content-Type': 'application/json' },
|
|
486
|
+
body: JSON.stringify({ model })
|
|
487
|
+
});
|
|
488
|
+
|
|
489
|
+
const data = await response.json();
|
|
490
|
+
|
|
491
|
+
if (data.success) {
|
|
492
|
+
this.showNotification(data.message, 'success');
|
|
493
|
+
this.loadSystemStatus();
|
|
494
|
+
} else {
|
|
495
|
+
this.showNotification('Error: ' + data.error, 'error');
|
|
496
|
+
}
|
|
497
|
+
} catch (error) {
|
|
498
|
+
this.showNotification('Error: ' + error.message, 'error');
|
|
499
|
+
}
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
async loadSystemStatus() {
|
|
503
|
+
try {
|
|
504
|
+
const response = await fetch('/api/health');
|
|
505
|
+
const data = await response.json();
|
|
506
|
+
|
|
507
|
+
if (this.systemStatus) {
|
|
508
|
+
if (data.success) {
|
|
509
|
+
this.systemStatus.innerHTML = `
|
|
510
|
+
<div class="space-y-2">
|
|
511
|
+
<div class="flex items-center space-x-2">
|
|
512
|
+
<i class="fas fa-check-circle text-green-500"></i>
|
|
513
|
+
<span class="text-sm text-cockroach-text-light">Database: ${data.database}</span>
|
|
514
|
+
</div>
|
|
515
|
+
<div class="flex items-center space-x-2">
|
|
516
|
+
<i class="fas fa-${data.ai_provider === 'connected' ? 'check-circle text-green-500' : 'times-circle text-red-500'}"></i>
|
|
517
|
+
<span class="text-sm text-cockroach-text-light">AI Provider (${data.ai_service}): ${data.ai_provider}</span>
|
|
518
|
+
</div>
|
|
519
|
+
<div class="flex items-center space-x-2">
|
|
520
|
+
<i class="fas fa-robot text-blue-500"></i>
|
|
521
|
+
<span class="text-sm text-cockroach-text-light">Current Model: ${data.current_model}</span>
|
|
522
|
+
</div>
|
|
523
|
+
</div>
|
|
524
|
+
`;
|
|
525
|
+
} else {
|
|
526
|
+
this.systemStatus.innerHTML = `
|
|
527
|
+
<div class="flex items-center space-x-2">
|
|
528
|
+
<i class="fas fa-times-circle text-red-500"></i>
|
|
529
|
+
<span class="text-sm text-red-500">Error: ${data.error}</span>
|
|
530
|
+
</div>
|
|
531
|
+
`;
|
|
532
|
+
}
|
|
533
|
+
}
|
|
534
|
+
} catch (error) {
|
|
535
|
+
if (this.systemStatus) {
|
|
536
|
+
this.systemStatus.innerHTML = `
|
|
537
|
+
<div class="flex items-center space-x-2">
|
|
538
|
+
<i class="fas fa-times-circle text-red-500"></i>
|
|
539
|
+
<span class="text-sm text-red-500">Error checking status</span>
|
|
540
|
+
</div>
|
|
541
|
+
`;
|
|
542
|
+
}
|
|
543
|
+
}
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
showNotification(message, type) {
|
|
547
|
+
// Create a simple notification
|
|
548
|
+
const notification = document.createElement('div');
|
|
549
|
+
notification.className = `fixed top-4 right-4 px-4 py-2 rounded-lg text-white z-50 ${
|
|
550
|
+
type === 'success' ? 'bg-green-500' : 'bg-red-500'
|
|
551
|
+
}`;
|
|
552
|
+
notification.textContent = message;
|
|
553
|
+
document.body.appendChild(notification);
|
|
554
|
+
|
|
555
|
+
setTimeout(() => {
|
|
556
|
+
notification.remove();
|
|
557
|
+
}, 3000);
|
|
558
|
+
}
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
// Initialize when DOM is loaded
|
|
562
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
563
|
+
console.log('Initializing Banko Dashboard...');
|
|
564
|
+
window.sidebarManager = new SidebarManager();
|
|
565
|
+
window.modelManager = new ModelManager();
|
|
566
|
+
});
|
|
567
|
+
</script>
|
|
568
|
+
</body>
|
|
569
|
+
</html>
|