Hugging Face's logo

Spaces:
saeidmp
/
agentflow-nexus
Running

App Files Community
saeidmp commited on
Commit
1d8736e
·
verified ·
1 Parent(s): c0f9876

🐳 23/02 - 16:33 - توسعه بده و مدرن تر و با قابلیت های بیشتر بنویس

Browse files
Files changed (1) hide show
  1. index.html +806 -316
index.html CHANGED
@@ -3,422 +3,912 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>AgentFlow Nexus</title>
7
  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
  <script src="https://cdn.tailwindcss.com"></script>
9
- <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
- <script src="https://unpkg.com/feather-icons"></script>
 
 
 
 
11
  <style>
 
 
 
 
 
 
12
  /* Custom scrollbar */
13
  ::-webkit-scrollbar {
14
- width: 8px;
15
- height: 8px;
16
  }
17
  ::-webkit-scrollbar-track {
18
- background: rgba(255, 255, 255, 0.1);
19
- border-radius: 4px;
20
  }
21
  ::-webkit-scrollbar-thumb {
22
- background: rgba(255, 255, 255, 0.2);
23
- border-radius: 4px;
24
  }
25
  ::-webkit-scrollbar-thumb:hover {
26
- background: rgba(255, 255, 255, 0.3);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  }
28
- /* Message animation */
29
  @keyframes fadeIn {
30
  from { opacity: 0; transform: translateY(10px); }
31
  to { opacity: 1; transform: translateY(0); }
32
  }
33
- .message-animate {
 
 
 
 
 
 
 
 
 
 
 
 
34
  animation: fadeIn 0.3s ease-out forwards;
35
  }
 
 
 
36
 
37
- /* Improved message bubbles */
38
  .message-bubble {
39
- transition: all 0.2s ease;
40
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 
 
 
 
41
  }
42
 
43
- /* Improved input focus */
44
- .focus-enhanced:focus {
45
- box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
46
- transition: box-shadow 0.2s ease;
 
 
 
 
 
47
  }
48
 
49
- /* Better button feedback */
50
- .btn-feedback:hover {
51
- transform: translateY(-1px);
52
- }
53
- .btn-feedback:active {
54
- transform: translateY(1px);
55
- }
56
- /* Syntax highlight placeholder */
57
- .code-block {
58
- font-family: 'Courier New', monospace;
59
- background: rgba(0, 0, 0, 0.1);
60
- border-left: 3px solid #4F46E5;
61
  padding: 0.5rem 1rem;
62
- border-radius: 0 4px 4px 0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  }
64
  </style>
65
  </head>
66
- <body class="h-full bg-gray-900 text-gray-100 flex flex-col overflow-hidden">
67
- <div class="flex flex-1 overflow-hidden">
 
 
 
68
  <!-- Sidebar -->
69
- <div class="w-64 bg-gray-800 flex flex-col border-r border-gray-700 hidden md:flex">
70
- <div class="p-4 border-b border-gray-700 flex items-center space-x-3">
71
- <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center">
72
- <i data-feather="cpu" class="text-white"></i>
73
- </div>
74
- <div>
75
- <h2 class="font-bold">AgentFlow</h2>
76
- <p class="text-xs text-gray-400">Active</p>
 
 
 
 
 
 
 
 
 
77
  </div>
 
 
 
78
  </div>
79
- <div class="flex-1 overflow-y-auto p-4 space-y-4">
80
- <div>
81
- <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-2">Agents</h3>
82
- <div class="space-y-1">
83
- <button class="w-full flex items-center space-x-2 p-2 rounded hover:bg-gray-700 text-left">
84
- <i data-feather="message-square" class="w-4 h-4"></i>
85
- <span>Chat Agent</span>
86
- </button>
87
- <button class="w-full flex items-center space-x-2 p-2 rounded hover:bg-gray-700 text-left">
88
- <i data-feather="code" class="w-4 h-4"></i>
89
- <span>Code Agent</span>
90
- </button>
91
- <button class="w-full flex items-center space-x-2 p-2 rounded hover:bg-gray-700 text-left">
92
- <i data-feather="database" class="w-4 h-4"></i>
93
- <span>Data Agent</span>
94
- </button>
 
 
 
 
95
  </div>
96
  </div>
97
- <div>
98
- <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-2">Projects</h3>
99
- <div class="space-y-1">
100
- <button class="w-full flex items-center space-x-2 p-2 rounded hover:bg-gray-700 text-left">
101
- <div class="w-2 h-2 rounded-full bg-green-400"></div>
102
- <span>AgentFlow Core</span>
103
- </button>
104
- <button class="w-full flex items-center space-x-2 p-2 rounded hover:bg-gray-700 text-left">
105
- <div class="w-2 h-2 rounded-full bg-blue-400"></div>
106
- <span>UI Components</span>
107
- </button>
108
- <button class="w-full flex items-center space-x-2 p-2 rounded hover:bg-gray-700 text-left">
109
- <div class="w-2 h-2 rounded-full bg-yellow-400"></div>
110
- <span>API Integration</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
111
  </button>
112
  </div>
 
 
 
 
 
 
 
 
 
 
 
113
  </div>
114
  </div>
115
- <div class="p-4 border-t border-gray-700">
116
- <button class="w-full flex items-center space-x-2 p-2 rounded hover:bg-gray-700">
117
- <i data-feather="settings" class="w-4 h-4"></i>
118
- <span>Settings</span>
 
 
 
 
 
 
 
 
 
 
119
  </button>
120
  </div>
121
- </div>
122
 
123
  <!-- Main Content -->
124
- <div class="flex-1 flex flex-col overflow-hidden">
125
  <!-- Top Bar -->
126
- <div class="p-4 border-b border-gray-700 flex items-center justify-between">
127
  <div class="flex items-center space-x-4">
128
- <button class="md:hidden">
129
- <i data-feather="menu"></i>
130
  </button>
131
- <h1 class="text-xl font-bold">AgentFlow Nexus</h1>
 
 
 
 
132
  </div>
133
- <div class="flex items-center space-x-4">
134
- <button class="p-2 rounded-full hover:bg-gray-700">
135
- <i data-feather="search" class="w-4 h-4"></i>
136
- </button>
137
- <button class="p-2 rounded-full hover:bg-gray-700">
138
- <i data-feather="bell" class="w-4 h-4"></i>
139
  </button>
140
- <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center">
141
- <i data-feather="user" class="text-white w-4 h-4"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
142
  </div>
143
  </div>
144
- </div>
145
 
146
- <!-- Content Area -->
147
- <div class="flex-1 flex flex-col md:flex-row overflow-hidden">
148
- <!-- Chat Panel -->
149
- <div class="flex-1 flex flex-col border-r border-gray-700 overflow-hidden">
150
- <div class="p-4 border-b border-gray-700">
151
- <h2 class="font-bold">Agent Chat</h2>
152
- </div>
153
- <div class="flex-1 overflow-y-auto p-4 space-y-4" id="chat-messages">
154
- <!-- Messages will be inserted here by JavaScript -->
155
- </div>
156
- <div class="p-4 border-t border-gray-700">
157
  <div class="flex items-center space-x-2">
158
- <input type="text" id="message-input" placeholder="Type your message..." class="flex-1 bg-gray-700 rounded-lg py-2 px-4 focus:outline-none focus-enhanced transition-all">
159
- <button id="send-button" class="bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg p-2 btn-feedback transition-transform">
160
- <i data-feather="send" class="w-4 h-4"></i>
161
  </button>
162
  </div>
163
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
164
  </div>
165
 
166
- <!-- Side Panels -->
167
- <div class="w-full md:w-96 flex flex-col border-t md:border-t-0 border-gray-700">
168
  <!-- Tabs -->
169
- <div class="flex border-b border-gray-700">
170
- <button data-tab="editor" class="tab-button flex-1 py-3 px-4 font-medium text-center border-b-2 border-indigo-500">Editor</button>
171
- <button data-tab="tasks" class="tab-button flex-1 py-3 px-4 font-medium text-center border-b-2 border-transparent">Tasks</button>
172
- <button data-tab="files" class="tab-button flex-1 py-3 px-4 font-medium text-center border-b-2 border-transparent">Files</button>
 
 
 
 
 
 
 
 
 
 
173
  </div>
174
 
175
- <!-- Tab Content -->
176
- <div class="flex-1 overflow-y-auto">
177
  <!-- Editor Panel -->
178
- <div id="editor-panel" class="p-4 h-full">
179
- <div class="flex items-center justify-between mb-2">
180
- <h3 class="font-medium">Code Editor</h3>
181
- <button class="text-xs text-indigo-400 hover:text-indigo-300">Send to Chat</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
182
  </div>
183
- <textarea id="code-editor" class="w-full h-64 bg-gray-800 text-gray-100 font-mono text-sm p-3 rounded border border-gray-700 focus:outline-none focus:ring-1 focus:ring-indigo-500" placeholder="Write your code here..."></textarea>
184
- <div class="mt-2 flex justify-between">
185
- <select class="bg-gray-700 text-sm rounded px-2 py-1">
186
- <option>JavaScript</option>
187
- <option>Python</option>
188
- <option>HTML</option>
189
- <option>CSS</option>
190
- </select>
191
- <button class="bg-gray-700 hover:bg-gray-600 text-sm rounded-lg px-3 py-1 btn-feedback transition-transform">Run</button>
192
- </div>
193
  </div>
194
 
195
  <!-- Tasks Panel -->
196
- <div id="tasks-panel" class="p-4 h-full hidden">
197
- <div class="flex items-center justify-between mb-2">
198
- <h3 class="font-medium">Tasks</h3>
199
- <button id="add-task-button" class="text-xs text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-1">
200
- <i data-feather="plus" class="w-3 h-3"></i>
201
- <span>Add Task</span>
202
- </button>
203
- </div>
204
- <div class="space-y-2" id="task-list">
205
- <!-- Tasks will be inserted here by JavaScript -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
206
  </div>
207
  </div>
208
 
209
  <!-- Files Panel -->
210
- <div id="files-panel" class="p-4 h-full hidden">
211
- <div class="flex items-center justify-between mb-2">
212
- <h3 class="font-medium">Files</h3>
213
- <button class="text-xs text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-1">
214
- <i data-feather="upload" class="w-3 h-3"></i>
215
- <span>Upload</span>
216
- </button>
217
- </div>
218
- <div class="space-y-2">
219
- <div class="flex items-center p-2 rounded hover:bg-gray-700">
220
- <i data-feather="file-text" class="w-4 h-4 mr-2 text-gray-400"></i>
221
- <span class="text-sm">project_spec.md</span>
222
- </div>
223
- <div class="flex items-center p-2 rounded hover:bg-gray-700">
224
- <i data-feather="file-text" class="w-4 h-4 mr-2 text-gray-400"></i>
225
- <span class="text-sm">api_endpoints.json</span>
226
  </div>
227
- <div class="flex items-center p-2 rounded hover:bg-gray-700">
228
- <i data-feather="image" class="w-4 h-4 mr-2 text-gray-400"></i>
229
- <span class="text-sm">design_mockup.png</span>
 
 
 
 
 
 
 
 
230
  </div>
231
  </div>
232
  </div>
233
  </div>
234
  </div>
235
  </div>
236
- </div>
237
  </div>
238
 
239
  <!-- Status Bar -->
240
- <div class="bg-gray-800 text-xs text-gray-400 px-4 py-2 flex justify-between items-center border-t border-gray-700">
241
  <div class="flex items-center space-x-4">
242
- <span class="flex items-center">
243
- <span class="w-2 h-2 rounded-full bg-green-400 mr-1"></span>
244
  <span>Connected</span>
245
  </span>
246
- <span>Agent: Chat</span>
247
- <span>Project: AgentFlow Core</span>
 
 
 
 
 
 
 
 
 
 
 
248
  </div>
249
- <div>
250
- <span>Last updated: <span id="last-updated">Just now</span></span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
251
  </div>
252
  </div>
253
 
254
  <script>
255
- document.addEventListener('DOMContentLoaded', function() {
256
- // Initialize Feather Icons
257
- feather.replace();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
258
 
259
- // Tab switching functionality
260
- const tabButtons = document.querySelectorAll('.tab-button');
261
- const panels = {
262
- 'editor': document.getElementById('editor-panel'),
263
- 'tasks': document.getElementById('tasks-panel'),
264
- 'files': document.getElementById('files-panel')
265
- };
266
 
267
- tabButtons.forEach(button => {
268
- button.addEventListener('click', () => {
269
- // Reset all tabs
270
- tabButtons.forEach(btn => btn.classList.remove('border-indigo-500'));
271
- Object.values(panels).forEach(panel => panel.classList.add('hidden'));
272
-
273
- // Activate selected tab
274
- const tabName = button.getAttribute('data-tab');
275
- button.classList.add('border-indigo-500');
276
- panels[tabName].classList.remove('hidden');
277
- });
278
- });
279
 
280
- // Chat functionality
281
- const messageInput = document.getElementById('message-input');
282
- const sendButton = document.getElementById('send-button');
283
- const chatMessages = document.getElementById('chat-messages');
284
 
285
- function addMessage(content, isUser = false) {
286
- const messageDiv = document.createElement('div');
287
- messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'}`;
288
- const bubble = document.createElement('div');
289
- bubble.className = `max-w-xs md:max-w-md lg:max-w-lg rounded-xl px-4 py-2 message-animate message-bubble ${isUser ? 'bg-indigo-600 text-white' : 'bg-gray-700'}`;
290
- bubble.innerHTML = content;
291
-
292
- messageDiv.appendChild(bubble);
293
- chatMessages.appendChild(messageDiv);
294
- chatMessages.scrollTop = chatMessages.scrollHeight;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
295
  }
 
 
 
 
 
 
 
296
 
297
- function sendMessage() {
298
- const message = messageInput.value.trim();
299
- if (message) {
300
- addMessage(message, true);
301
- messageInput.value = '';
302
-
303
- // Simulate AI response
304
- setTimeout(() => {
305
- addMessage(getRandomResponse());
306
- }, 1000);
307
- }
308
  }
 
 
 
 
 
 
309
 
310
- // Sample responses
311
- function getRandomResponse() {
312
- const responses = [
313
- "I've processed your request. Here are the results...",
314
- "I'm analyzing that now. One moment please.",
315
- "Based on my analysis, I recommend the following approach...",
316
- "Let me check my knowledge base for that information.",
317
- "I found some relevant data for you.",
318
- "Here's what I can tell you about that topic...",
319
- "I've updated the task list with your request.",
320
- "Would you like me to elaborate on any particular aspect?"
321
- ];
322
- return responses[Math.floor(Math.random() * responses.length)];
323
  }
 
 
 
 
 
324
 
325
- sendButton.addEventListener('click', sendMessage);
326
- messageInput.addEventListener('keypress', (e) => {
327
- if (e.key === 'Enter') {
328
- sendMessage();
329
- }
330
- });
331
-
332
- // Initialize with welcome messages
333
- setTimeout(() => {
334
- addMessage("Welcome to AgentFlow Nexus! How can I assist you today?");
335
- setTimeout(() => {
336
- addMessage("I can help with coding, task management, and file organization. Try asking me anything!");
337
- setTimeout(() => {
338
- addMessage("Tip: Click the tabs above to switch between different tools and features.");
339
- }, 800);
340
- }, 800);
341
- }, 500);
342
- // Task functionality
343
- const addTaskButton = document.getElementById('add-task-button');
344
- const taskList = document.getElementById('task-list');
345
 
346
- // Sample tasks
347
- const sampleTasks = [
348
- { id: 1, text: "Integrate OpenAI API", completed: false },
349
- { id: 2, text: "Design landing page", completed: true },
350
- { id: 3, text: "Fix authentication bug", completed: false }
351
- ];
352
 
353
- function renderTasks() {
354
- taskList.innerHTML = '';
355
- const tasks = JSON.parse(localStorage.getItem('tasks')) || sampleTasks;
356
-
357
- tasks.forEach(task => {
358
- const taskDiv = document.createElement('div');
359
- taskDiv.className = `flex items-center p-2 rounded-lg gap-2 transition-all ${task.completed ? 'bg-gray-800 text-gray-500' : 'bg-gray-700 hover:bg-gray-600'}`;
360
- const checkbox = document.createElement('input');
361
- checkbox.type = 'checkbox';
362
- checkbox.className = 'mr-2';
363
- checkbox.checked = task.completed;
364
- checkbox.addEventListener('change', () => {
365
- task.completed = checkbox.checked;
366
- saveTasks(tasks);
367
- renderTasks();
368
- });
369
-
370
- const text = document.createElement('span');
371
- text.className = `flex-1 ${task.completed ? 'line-through' : ''}`;
372
- text.textContent = task.text;
373
-
374
- const deleteButton = document.createElement('button');
375
- deleteButton.innerHTML = '<i data-feather="trash-2" class="w-4 h-4 text-gray-400 hover:text-red-400"></i>';
376
- deleteButton.addEventListener('click', () => {
377
- const index = tasks.findIndex(t => t.id === task.id);
378
- if (index !== -1) {
379
- tasks.splice(index, 1);
380
- saveTasks(tasks);
381
- renderTasks();
382
- }
383
- });
384
-
385
- taskDiv.appendChild(checkbox);
386
- taskDiv.appendChild(text);
387
- taskDiv.appendChild(deleteButton);
388
- taskList.appendChild(taskDiv);
389
- });
390
-
391
- feather.replace();
392
  }
393
 
394
- function saveTasks(tasks) {
395
- localStorage.setItem('tasks', JSON.stringify(tasks));
396
- }
 
 
 
 
397
 
398
- addTaskButton.addEventListener('click', () => {
399
- const tasks = JSON.parse(localStorage.getItem('tasks')) || sampleTasks;
400
- const newId = tasks.length > 0 ? Math.max(...tasks.map(t => t.id)) + 1 : 1;
401
- const newTask = {
402
- id: newId,
403
- text: "New Task",
404
- completed: false
405
- };
406
- tasks.push(newTask);
407
- saveTasks(tasks);
408
- renderTasks();
409
- });
410
 
411
- // Initialize tasks
412
- renderTasks();
 
413
 
414
- // Update last updated time
415
- function updateLastUpdated() {
416
- document.getElementById('last-updated').textContent = new Date().toLocaleTimeString();
417
- }
 
418
 
419
- setInterval(updateLastUpdated, 60000);
420
- updateLastUpdated();
421
- });
422
- </script>
423
- </body>
424
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AgentFlow Nexus - Modern AI Workspace</title>
7
  <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
  <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/lucide@latest"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
12
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
13
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
14
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
15
  <style>
16
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
17
+
18
+ * {
19
+ font-family: 'Inter', sans-serif;
20
+ }
21
+
22
  /* Custom scrollbar */
23
  ::-webkit-scrollbar {
24
+ width: 6px;
25
+ height: 6px;
26
  }
27
  ::-webkit-scrollbar-track {
28
+ background: transparent;
 
29
  }
30
  ::-webkit-scrollbar-thumb {
31
+ background: rgba(99, 102, 241, 0.3);
32
+ border-radius: 3px;
33
  }
34
  ::-webkit-scrollbar-thumb:hover {
35
+ background: rgba(99, 102, 241, 0.5);
36
+ }
37
+
38
+ /* Glassmorphism effects */
39
+ .glass {
40
+ background: rgba(255, 255, 255, 0.03);
41
+ backdrop-filter: blur(10px);
42
+ border: 1px solid rgba(255, 255, 255, 0.1);
43
+ }
44
+ .glass-strong {
45
+ background: rgba(30, 41, 59, 0.8);
46
+ backdrop-filter: blur(16px);
47
+ border: 1px solid rgba(255, 255, 255, 0.1);
48
+ }
49
+
50
+ /* Animations */
51
+ @keyframes slideIn {
52
+ from { opacity: 0; transform: translateX(-10px); }
53
+ to { opacity: 1; transform: translateX(0); }
54
  }
 
55
  @keyframes fadeIn {
56
  from { opacity: 0; transform: translateY(10px); }
57
  to { opacity: 1; transform: translateY(0); }
58
  }
59
+ @keyframes pulse-ring {
60
+ 0% { transform: scale(0.8); opacity: 0.5; }
61
+ 100% { transform: scale(2); opacity: 0; }
62
+ }
63
+ @keyframes float {
64
+ 0%, 100% { transform: translateY(0px); }
65
+ 50% { transform: translateY(-5px); }
66
+ }
67
+
68
+ .animate-slide-in {
69
+ animation: slideIn 0.3s ease-out forwards;
70
+ }
71
+ .animate-fade-in {
72
  animation: fadeIn 0.3s ease-out forwards;
73
  }
74
+ .animate-float {
75
+ animation: float 3s ease-in-out infinite;
76
+ }
77
 
78
+ /* Message bubbles */
79
  .message-bubble {
80
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
81
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
82
+ }
83
+ .message-bubble:hover {
84
+ transform: translateY(-2px);
85
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
86
  }
87
 
88
+ /* Typing indicator */
89
+ .typing-dot {
90
+ animation: typing 1.4s infinite;
91
+ }
92
+ .typing-dot:nth-child(2) { animation-delay: 0.2s; }
93
+ .typing-dot:nth-child(3) { animation-delay: 0.4s; }
94
+ @keyframes typing {
95
+ 0%, 60%, 100% { transform: translateY(0); }
96
+ 30% { transform: translateY(-4px); }
97
  }
98
 
99
+ /* Code block styling */
100
+ .code-block-wrapper {
101
+ position: relative;
102
+ margin: 0.5rem 0;
103
+ border-radius: 0.5rem;
104
+ overflow: hidden;
105
+ }
106
+ .code-header {
107
+ background: rgba(0, 0, 0, 0.4);
 
 
 
108
  padding: 0.5rem 1rem;
109
+ display: flex;
110
+ justify-content: space-between;
111
+ align-items: center;
112
+ font-size: 0.75rem;
113
+ color: #9ca3af;
114
+ }
115
+ .copy-btn {
116
+ transition: all 0.2s;
117
+ }
118
+ .copy-btn:hover {
119
+ color: white;
120
+ transform: scale(1.05);
121
+ }
122
+
123
+ /* Task priorities */
124
+ .priority-high { border-left: 3px solid #ef4444; }
125
+ .priority-medium { border-left: 3px solid #f59e0b; }
126
+ .priority-low { border-left: 3px solid #10b981; }
127
+
128
+ /* Agent status indicator */
129
+ .status-ring::before {
130
+ content: '';
131
+ position: absolute;
132
+ width: 100%;
133
+ height: 100%;
134
+ border-radius: 50%;
135
+ background: #10b981;
136
+ animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
137
+ z-index: -1;
138
+ }
139
+
140
+ /* Responsive sidebar */
141
+ .sidebar-transition {
142
+ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
143
+ }
144
+
145
+ /* Input focus effects */
146
+ .input-glow:focus {
147
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
148
+ border-color: rgba(99, 102, 241, 0.5);
149
+ }
150
+
151
+ /* Theme transitions */
152
+ .theme-transition {
153
+ transition: background-color 0.3s, color 0.3s, border-color 0.3s;
154
+ }
155
+
156
+ /* Drag and drop zone */
157
+ .drop-zone {
158
+ border: 2px dashed rgba(99, 102, 241, 0.3);
159
+ transition: all 0.3s;
160
+ }
161
+ .drop-zone.drag-over {
162
+ border-color: #6366f1;
163
+ background: rgba(99, 102, 241, 0.1);
164
+ }
165
+
166
+ /* Custom checkbox */
167
+ .custom-checkbox {
168
+ appearance: none;
169
+ width: 1.2rem;
170
+ height: 1.2rem;
171
+ border: 2px solid rgba(99, 102, 241, 0.4);
172
+ border-radius: 0.35rem;
173
+ cursor: pointer;
174
+ transition: all 0.2s;
175
+ position: relative;
176
+ }
177
+ .custom-checkbox:checked {
178
+ background: #6366f1;
179
+ border-color: #6366f1;
180
+ }
181
+ .custom-checkbox:checked::after {
182
+ content: '';
183
+ position: absolute;
184
+ left: 5px;
185
+ top: 2px;
186
+ width: 5px;
187
+ height: 9px;
188
+ border: solid white;
189
+ border-width: 0 2px 2px 0;
190
+ transform: rotate(45deg);
191
+ }
192
+
193
+ /* Modal overlay */
194
+ .modal-overlay {
195
+ background: rgba(0, 0, 0, 0.6);
196
+ backdrop-filter: blur(4px);
197
+ }
198
+
199
+ /* Notification badge */
200
+ .notification-badge {
201
+ animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
202
+ }
203
+ @keyframes ping {
204
+ 75%, 100% {
205
+ transform: scale(2);
206
+ opacity: 0;
207
+ }
208
+ }
209
+
210
+ /* Line numbers for editor */
211
+ .line-numbers {
212
+ counter-reset: line;
213
+ }
214
+ .line-numbers > div::before {
215
+ counter-increment: line;
216
+ content: counter(line);
217
+ display: inline-block;
218
+ width: 2rem;
219
+ margin-right: 1rem;
220
+ color: #6b7280;
221
+ text-align: right;
222
+ user-select: none;
223
  }
224
  </style>
225
  </head>
226
+ <body class="h-full bg-slate-900 text-slate-100 overflow-hidden theme-transition" id="app-body">
227
+ <!-- Mobile Sidebar Overlay -->
228
+ <div id="sidebar-overlay" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-40 hidden lg:hidden modal-overlay" onclick="toggleSidebar()"></div>
229
+
230
+ <div class="flex h-full overflow-hidden">
231
  <!-- Sidebar -->
232
+ <aside id="sidebar" class="sidebar-transition fixed lg:static inset-y-0 left-0 z-50 w-72 bg-slate-800/95 border-r border-slate-700/50 flex flex-col transform -translate-x-full lg:translate-x-0 glass-strong">
233
+ <!-- Logo -->
234
+ <div class="p-5 border-b border-slate-700/50 flex items-center justify-between">
235
+ <div class="flex items-center space-x-3">
236
+ <div class="relative">
237
+ <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg animate-float">
238
+ <i data-lucide="cpu" class="text-white w-5 h-5"></i>
239
+ </div>
240
+ <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-slate-800 status-ring"></div>
241
+ </div>
242
+ <div>
243
+ <h2 class="font-bold text-lg tracking-tight">AgentFlow</h2>
244
+ <p class="text-xs text-slate-400 flex items-center gap-1">
245
+ <span class="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse"></span>
246
+ System Active
247
+ </p>
248
+ </div>
249
  </div>
250
+ <button onclick="toggleSidebar()" class="lg:hidden p-2 hover:bg-slate-700 rounded-lg transition-colors">
251
+ <i data-lucide="x" class="w-5 h-5"></i>
252
+ </button>
253
  </div>
254
+
255
+ <!-- Navigation -->
256
+ <div class="flex-1 overflow-y-auto p-4 space-y-6">
257
+ <!-- Agent Selector -->
258
+ <div class="space-y-2">
259
+ <div class="flex items-center justify-between mb-2">
260
+ <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-400">Active Agent</h3>
261
+ <button onclick="showAgentSelector()" class="text-xs text-indigo-400 hover:text-indigo-300 transition-colors">Change</button>
262
+ </div>
263
+ <div class="glass rounded-xl p-3 cursor-pointer hover:bg-slate-700/50 transition-all group" onclick="showAgentSelector()">
264
+ <div class="flex items-center space-x-3">
265
+ <div class="w-10 h-10 rounded-lg bg-indigo-500/20 flex items-center justify-center group-hover:scale-110 transition-transform">
266
+ <i data-lucide="bot" class="text-indigo-400 w-5 h-5"></i>
267
+ </div>
268
+ <div class="flex-1">
269
+ <p class="font-medium text-sm" id="current-agent-name">Chat Agent</p>
270
+ <p class="text-xs text-slate-400">GPT-4 Turbo</p>
271
+ </div>
272
+ <i data-lucide="chevron-right" class="w-4 h-4 text-slate-500"></i>
273
+ </div>
274
  </div>
275
  </div>
276
+
277
+ <!-- Quick Actions -->
278
+ <div class="space-y-1">
279
+ <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-2">Quick Actions</h3>
280
+ <button onclick="newChat()" class="w-full flex items-center space-x-3 p-2.5 rounded-lg hover:bg-slate-700/50 text-left transition-all group">
281
+ <div class="w-8 h-8 rounded-lg bg-blue-500/20 flex items-center justify-center group-hover:scale-110 transition-transform">
282
+ <i data-lucide="plus" class="w-4 h-4 text-blue-400"></i>
283
+ </div>
284
+ <span class="text-sm font-medium">New Chat</span>
285
+ </button>
286
+ <button onclick="clearContext()" class="w-full flex items-center space-x-3 p-2.5 rounded-lg hover:bg-slate-700/50 text-left transition-all group">
287
+ <div class="w-8 h-8 rounded-lg bg-orange-500/20 flex items-center justify-center group-hover:scale-110 transition-transform">
288
+ <i data-lucide="rotate-ccw" class="w-4 h-4 text-orange-400"></i>
289
+ </div>
290
+ <span class="text-sm font-medium">Clear Context</span>
291
+ </button>
292
+ <button onclick="exportChat()" class="w-full flex items-center space-x-3 p-2.5 rounded-lg hover:bg-slate-700/50 text-left transition-all group">
293
+ <div class="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center group-hover:scale-110 transition-transform">
294
+ <i data-lucide="download" class="w-4 h-4 text-purple-400"></i>
295
+ </div>
296
+ <span class="text-sm font-medium">Export Chat</span>
297
+ </button>
298
+ </div>
299
+
300
+ <!-- Recent Projects -->
301
+ <div class="space-y-1">
302
+ <div class="flex items-center justify-between mb-2">
303
+ <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-400">Projects</h3>
304
+ <button onclick="addProject()" class="p-1 hover:bg-slate-700 rounded transition-colors">
305
+ <i data-lucide="plus" class="w-3 h-3"></i>
306
  </button>
307
  </div>
308
+ <div id="project-list" class="space-y-1">
309
+ <!-- Projects injected by JS -->
310
+ </div>
311
+ </div>
312
+
313
+ <!-- Recent Chats -->
314
+ <div class="space-y-1">
315
+ <h3 class="text-xs font-semibold uppercase tracking-wider text-slate-400 mb-2">Recent</h3>
316
+ <div id="recent-chats" class="space-y-1">
317
+ <!-- Recent chats injected by JS -->
318
+ </div>
319
  </div>
320
  </div>
321
+
322
+ <!-- Bottom Actions -->
323
+ <div class="p-4 border-t border-slate-700/50 space-y-2">
324
+ <button onclick="toggleTheme()" class="w-full flex items-center space-x-3 p-2.5 rounded-lg hover:bg-slate-700/50 text-left transition-all">
325
+ <i data-lucide="palette" class="w-4 h-4 text-slate-400"></i>
326
+ <span class="text-sm">Toggle Theme</span>
327
+ </button>
328
+ <button onclick="showKeyboardShortcuts()" class="w-full flex items-center space-x-3 p-2.5 rounded-lg hover:bg-slate-700/50 text-left transition-all">
329
+ <i data-lucide="command" class="w-4 h-4 text-slate-400"></i>
330
+ <span class="text-sm">Shortcuts</span>
331
+ </button>
332
+ <button onclick="openSettings()" class="w-full flex items-center space-x-3 p-2.5 rounded-lg hover:bg-slate-700/50 text-left transition-all">
333
+ <i data-lucide="settings" class="w-4 h-4 text-slate-400"></i>
334
+ <span class="text-sm">Settings</span>
335
  </button>
336
  </div>
337
+ </aside>
338
 
339
  <!-- Main Content -->
340
+ <main class="flex-1 flex flex-col overflow-hidden bg-slate-900/50 relative">
341
  <!-- Top Bar -->
342
+ <header class="h-16 border-b border-slate-700/50 flex items-center justify-between px-4 lg:px-6 glass z-30">
343
  <div class="flex items-center space-x-4">
344
+ <button onclick="toggleSidebar()" class="lg:hidden p-2 hover:bg-slate-800 rounded-lg transition-colors">
345
+ <i data-lucide="menu" class="w-5 h-5"></i>
346
  </button>
347
+ <div class="hidden sm:flex items-center space-x-2 text-sm text-slate-400">
348
+ <span>Workspace</span>
349
+ <i data-lucide="chevron-right" class="w-4 h-4"></i>
350
+ <span class="text-slate-200" id="header-project">AgentFlow Core</span>
351
+ </div>
352
  </div>
353
+
354
+ <div class="flex items-center space-x-3">
355
+ <button onclick="toggleSearch()" class="hidden md:flex items-center space-x-2 px-3 py-1.5 rounded-lg bg-slate-800/50 hover:bg-slate-700/50 border border-slate-700/50 text-sm text-slate-400 transition-all">
356
+ <i data-lucide="search" class="w-4 h-4"></i>
357
+ <span>Search...</span>
358
+ <span class="text-xs bg-slate-700 px-1.5 py-0.5 rounded">⌘K</span>
359
  </button>
360
+
361
+ <div class="relative">
362
+ <button onclick="toggleNotifications()" class="p-2 hover:bg-slate-800 rounded-lg transition-colors relative">
363
+ <i data-lucide="bell" class="w-5 h-5"></i>
364
+ <span id="notification-count" class="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full hidden notification-badge"></span>
365
+ </button>
366
+ <!-- Notifications Dropdown -->
367
+ <div id="notifications-panel" class="hidden absolute right-0 top-full mt-2 w-80 glass-strong rounded-xl shadow-2xl border border-slate-700/50 overflow-hidden z-50 animate-fade-in">
368
+ <div class="p-4 border-b border-slate-700/50 flex items-center justify-between">
369
+ <h3 class="font-semibold">Notifications</h3>
370
+ <button onclick="markAllRead()" class="text-xs text-indigo-400 hover:text-indigo-300">Mark all read</button>
371
+ </div>
372
+ <div id="notifications-list" class="max-h-64 overflow-y-auto">
373
+ <!-- Notifications injected by JS -->
374
+ </div>
375
+ </div>
376
+ </div>
377
+
378
+ <div class="relative group">
379
+ <button class="flex items-center space-x-2 p-1.5 rounded-lg hover:bg-slate-800 transition-colors">
380
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-semibold text-sm">
381
+ JD
382
+ </div>
383
+ </button>
384
+ <!-- User Dropdown -->
385
+ <div class="hidden group-hover:block absolute right-0 top-full mt-2 w-48 glass-strong rounded-xl shadow-2xl border border-slate-700/50 overflow-hidden z-50 animate-fade-in">
386
+ <div class="p-3 border-b border-slate-700/50">
387
+ <p class="font-medium text-sm">John Doe</p>
388
+ <p class="text-xs text-slate-400">john@agentflow.ai</p>
389
+ </div>
390
+ <div class="p-1">
391
+ <button onclick="openProfile()" class="w-full flex items-center space-x-2 p-2 rounded-lg hover:bg-slate-700/50 text-left text-sm transition-colors">
392
+ <i data-lucide="user" class="w-4 h-4"></i>
393
+ <span>Profile</span>
394
+ </button>
395
+ <button onclick="openSettings()" class="w-full flex items-center space-x-2 p-2 rounded-lg hover:bg-slate-700/50 text-left text-sm transition-colors">
396
+ <i data-lucide="settings" class="w-4 h-4"></i>
397
+ <span>Settings</span>
398
+ </button>
399
+ <div class="border-t border-slate-700/50 my-1"></div>
400
+ <button onclick="logout()" class="w-full flex items-center space-x-2 p-2 rounded-lg hover:bg-red-500/20 text-left text-sm text-red-400 transition-colors">
401
+ <i data-lucide="log-out" class="w-4 h-4"></i>
402
+ <span>Logout</span>
403
+ </button>
404
+ </div>
405
+ </div>
406
  </div>
407
  </div>
408
+ </header>
409
 
410
+ <!-- Content Grid -->
411
+ <div class="flex-1 flex flex-col lg:flex-row overflow-hidden">
412
+ <!-- Chat Area -->
413
+ <div class="flex-1 flex flex-col min-w-0 border-r border-slate-700/50">
414
+ <!-- Chat Header -->
415
+ <div class="h-14 border-b border-slate-700/50 flex items-center justify-between px-4 lg:px-6 glass">
416
+ <div class="flex items-center space-x-3">
417
+ <div class="w-2 h-2 rounded-full bg-green-400 animate-pulse"></div>
418
+ <h2 class="font-semibold text-slate-200">Agent Conversation</h2>
419
+ <span class="text-xs px-2 py-0.5 rounded-full bg-slate-700 text-slate-400" id="message-count">0 messages</span>
420
+ </div>
421
  <div class="flex items-center space-x-2">
422
+ <button onclick="toggleChatSettings()" class="p-2 hover:bg-slate-800 rounded-lg transition-colors">
423
+ <i data-lucide="sliders" class="w-4 h-4 text-slate-400"></i>
 
424
  </button>
425
  </div>
426
  </div>
427
+
428
+ <!-- Messages -->
429
+ <div id="chat-messages" class="flex-1 overflow-y-auto p-4 lg:p-6 space-y-4 scroll-smooth">
430
+ <!-- Welcome Message -->
431
+ <div class="flex justify-start animate-fade-in">
432
+ <div class="max-w-[85%] lg:max-w-[70%] message-bubble bg-slate-800/80 rounded-2xl rounded-tl-sm px-4 py-3 border border-slate-700/50">
433
+ <div class="flex items-start space-x-3">
434
+ <div class="w-8 h-8 rounded-lg bg-indigo-500/20 flex-shrink-0 flex items-center justify-center mt-0.5">
435
+ <i data-lucide="bot" class="w-4 h-4 text-indigo-400"></i>
436
+ </div>
437
+ <div class="flex-1 space-y-1">
438
+ <p class="text-sm text-slate-200">Welcome to <strong>AgentFlow Nexus</strong>! 🚀</p>
439
+ <p class="text-sm text-slate-400">I'm your AI assistant powered by GPT-4. I can help you with:</p>
440
+ <ul class="text-sm text-slate-400 list-disc list-inside space-y-1 ml-1">
441
+ <li>Writing and analyzing code</li>
442
+ <li>Managing tasks and projects</li>
443
+ <li>Processing files and data</li>
444
+ <li>Research and brainstorming</li>
445
+ </ul>
446
+ <p class="text-xs text-slate-500 mt-2">Try typing a message or use the code editor on the right!</p>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </div>
452
+
453
+ <!-- Input Area -->
454
+ <div class="p-4 lg:p-6 border-t border-slate-700/50 glass">
455
+ <div class="max-w-4xl mx-auto space-y-3">
456
+ <!-- Attachment Preview -->
457
+ <div id="attachment-preview" class="hidden flex items-center space-x-2 p-2 bg-slate-800/50 rounded-lg border border-slate-700/50">
458
+ <i data-lucide="file" class="w-4 h-4 text-indigo-400"></i>
459
+ <span class="text-sm text-slate-300 flex-1 truncate" id="attachment-name">file.txt</span>
460
+ <button onclick="clearAttachment()" class="p-1 hover:bg-slate-700 rounded transition-colors">
461
+ <i data-lucide="x" class="w-4 h-4"></i>
462
+ </button>
463
+ </div>
464
+
465
+ <div class="relative flex items-end space-x-2 bg-slate-800/50 rounded-xl border border-slate-700/50 focus-within:border-indigo-500/50 focus-within:ring-2 focus-within:ring-indigo-500/20 transition-all input-glow">
466
+ <button onclick="attachFile()" class="p-3 text-slate-400 hover:text-slate-200 transition-colors">
467
+ <i data-lucide="paperclip" class="w-5 h-5"></i>
468
+ </button>
469
+ <textarea id="message-input" rows="1" placeholder="Type your message... (Shift+Enter for new line)"
470
+ class="flex-1 bg-transparent border-0 py-3 px-0 text-slate-200 placeholder-slate-500 resize-none focus:outline-none max-h-32"
471
+ oninput="autoResize(this)"
472
+ onkeydown="handleKeyDown(event)"></textarea>
473
+ <div class="flex items-center space-x-1 pr-2 pb-2">
474
+ <button onclick="toggleEmojiPicker()" class="p-2 text-slate-400 hover:text-slate-200 transition-colors">
475
+ <i data-lucide="smile" class="w-5 h-5"></i>
476
+ </button>
477
+ <button onclick="sendMessage()" id="send-button" class="p-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-all transform hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed">
478
+ <i data-lucide="send" class="w-5 h-5"></i>
479
+ </button>
480
+ </div>
481
+ </div>
482
+ <div class="flex items-center justify-between text-xs text-slate-500 px-1">
483
+ <span>Press <kbd class="px-1.5 py-0.5 bg-slate-800 rounded text-slate-400">⌘</kbd> <kbd class="px-1.5 py-0.5 bg-slate-800 rounded text-slate-400">K</kbd> to search</span>
484
+ <span id="input-stats">0/2000</span>
485
+ </div>
486
+ </div>
487
+ </div>
488
  </div>
489
 
490
+ <!-- Right Panel -->
491
+ <div class="w-full lg:w-[450px] flex flex-col bg-slate-900/30 border-l border-slate-700/50">
492
  <!-- Tabs -->
493
+ <div class="flex border-b border-slate-700/50 glass">
494
+ <button onclick="switchTab('editor')" data-tab="editor" class="tab-btn flex-1 py-3 px-4 text-sm font-medium text-indigo-400 border-b-2 border-indigo-500 transition-all hover:bg-slate-800/50 flex items-center justify-center space-x-2">
495
+ <i data-lucide="code-2" class="w-4 h-4"></i>
496
+ <span>Editor</span>
497
+ </button>
498
+ <button onclick="switchTab('tasks')" data-tab="tasks" class="tab-btn flex-1 py-3 px-4 text-sm font-medium text-slate-400 border-b-2 border-transparent transition-all hover:bg-slate-800/50 flex items-center justify-center space-x-2">
499
+ <i data-lucide="check-square" class="w-4 h-4"></i>
500
+ <span>Tasks</span>
501
+ <span id="task-badge" class="hidden ml-1.5 px-1.5 py-0.5 text-xs bg-indigo-500/20 text-indigo-400 rounded-full">0</span>
502
+ </button>
503
+ <button onclick="switchTab('files')" data-tab="files" class="tab-btn flex-1 py-3 px-4 text-sm font-medium text-slate-400 border-b-2 border-transparent transition-all hover:bg-slate-800/50 flex items-center justify-center space-x-2">
504
+ <i data-lucide="folder" class="w-4 h-4"></i>
505
+ <span>Files</span>
506
+ </button>
507
  </div>
508
 
509
+ <!-- Tab Contents -->
510
+ <div class="flex-1 overflow-hidden relative">
511
  <!-- Editor Panel -->
512
+ <div id="editor-panel" class="tab-content absolute inset-0 flex flex-col p-4 overflow-y-auto">
513
+ <div class="flex items-center justify-between mb-3">
514
+ <div class="flex items-center space-x-2">
515
+ <select id="language-select" onchange="changeLanguage()" class="bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:border-indigo-500/50">
516
+ <option value="javascript">JavaScript</option>
517
+ <option value="python">Python</option>
518
+ <option value="html">HTML</option>
519
+ <option value="css">CSS</option>
520
+ <option value="typescript">TypeScript</option>
521
+ </select>
522
+ </div>
523
+ <div class="flex items-center space-x-2">
524
+ <button onclick="formatCode()" class="p-2 hover:bg-slate-800 rounded-lg text-slate-400 hover:text-slate-200 transition-colors" title="Format Code">
525
+ <i data-lucide="align-left" class="w-4 h-4"></i>
526
+ </button>
527
+ <button onclick="runCode()" class="flex items-center space-x-1 px-3 py-1.5 bg-green-600/20 text-green-400 hover:bg-green-600/30 rounded-lg text-sm font-medium transition-all">
528
+ <i data-lucide="play" class="w-4 h-4"></i>
529
+ <span>Run</span>
530
+ </button>
531
+ </div>
532
+ </div>
533
+
534
+ <div class="relative flex-1 min-h-[300px]">
535
+ <div class="absolute inset-0 bg-slate-950 rounded-lg border border-slate-800 overflow-hidden flex flex-col">
536
+ <div class="flex-1 relative">
537
+ <textarea id="code-editor" class="absolute inset-0 w-full h-full bg-transparent text-slate-300 font-mono text-sm p-4 resize-none focus:outline-none line-numbers leading-relaxed"
538
+ placeholder="// Write your code here..." spellcheck="false">// Welcome to the Code Editor
539
+ function greet(name) {
540
+ return `Hello, ${name}! Welcome to AgentFlow.`;
541
+ }
542
+
543
+ console.log(greet('Developer'));</textarea>
544
+ </div>
545
+ </div>
546
+ </div>
547
+
548
+ <div id="code-output" class="mt-3 p-3 bg-slate-950 rounded-lg border border-slate-800 hidden">
549
+ <div class="flex items-center justify-between mb-2">
550
+ <span class="text-xs font-medium text-slate-400 uppercase">Output</span>
551
+ <button onclick="clearOutput()" class="text-xs text-slate-500 hover:text-slate-300">Clear</button>
552
+ </div>
553
+ <pre class="text-sm font-mono text-green-400 overflow-x-auto"></pre>
554
+ </div>
555
+
556
+ <div class="mt-3 flex items-center justify-between">
557
+ <button onclick="sendCodeToChat()" class="flex items-center space-x-2 text-sm text-indigo-400 hover:text-indigo-300 transition-colors">
558
+ <i data-lucide="message-square" class="w-4 h-4"></i>
559
+ <span>Send to Chat</span>
560
+ </button>
561
+ <button onclick="saveCode()" class="flex items-center space-x-2 text-sm text-slate-400 hover:text-slate-200 transition-colors">
562
+ <i data-lucide="save" class="w-4 h-4"></i>
563
+ <span>Save</span>
564
+ </button>
565
  </div>
 
 
 
 
 
 
 
 
 
 
566
  </div>
567
 
568
  <!-- Tasks Panel -->
569
+ <div id="tasks-panel" class="tab-content absolute inset-0 flex flex-col hidden">
570
+ <div class="p-4 border-b border-slate-700/50 flex items-center justify-between glass">
571
+ <div class="flex items-center space-x-2">
572
+ <h3 class="font-semibold">Task Board</h3>
573
+ <span id="task-count" class="text-xs px-2 py-0.5 bg-slate-700 rounded-full text-slate-400">0</span>
574
+ </div>
575
+ <div class="flex items-center space-x-2">
576
+ <select id="task-filter" onchange="filterTasks()" class="bg-slate-800 border border-slate-700 rounded-lg px-2 py-1 text-xs focus:outline-none focus:border-indigo-500/50">
577
+ <option value="all">All</option>
578
+ <option value="active">Active</option>
579
+ <option value="completed">Completed</option>
580
+ </select>
581
+ <button onclick="addTask()" class="p-2 bg-indigo-600 hover:bg-indigo-500 rounded-lg transition-all hover:scale-105">
582
+ <i data-lucide="plus" class="w-4 h-4"></i>
583
+ </button>
584
+ </div>
585
+ </div>
586
+
587
+ <div class="flex-1 overflow-y-auto p-4 space-y-3" id="task-list">
588
+ <!-- Tasks injected by JS -->
589
+ </div>
590
+
591
+ <!-- Task Stats -->
592
+ <div class="p-4 border-t border-slate-700/50 glass">
593
+ <div class="flex items-center justify-between text-sm">
594
+ <span class="text-slate-400" id="task-progress-text">0/0 completed</span>
595
+ <div class="w-24 h-2 bg-slate-800 rounded-full overflow-hidden">
596
+ <div id="task-progress-bar" class="h-full bg-indigo-500 transition-all duration-500" style="width: 0%"></div>
597
+ </div>
598
+ </div>
599
  </div>
600
  </div>
601
 
602
  <!-- Files Panel -->
603
+ <div id="files-panel" class="tab-content absolute inset-0 flex flex-col hidden">
604
+ <div class="p-4 border-b border-slate-700/50 flex items-center justify-between glass">
605
+ <h3 class="font-semibold">File Manager</h3>
606
+ <div class="flex items-center space-x-2">
607
+ <button onclick="createFolder()" class="p-2 hover:bg-slate-800 rounded-lg transition-colors text-slate-400">
608
+ <i data-lucide="folder-plus" class="w-4 h-4"></i>
609
+ </button>
610
+ <label class="p-2 bg-indigo-600 hover:bg-indigo-500 rounded-lg transition-all hover:scale-105 cursor-pointer">
611
+ <i data-lucide="upload" class="w-4 h-4"></i>
612
+ <input type="file" class="hidden" multiple onchange="handleFileUpload(event)">
613
+ </label>
 
 
 
 
 
614
  </div>
615
+ </div>
616
+
617
+ <!-- Drop Zone -->
618
+ <div id="drop-zone" class="m-4 p-8 border-2 border-dashed border-slate-700 rounded-xl text-center drop-zone">
619
+ <i data-lucide="upload-cloud" class="w-8 h-8 text-slate-500 mx-auto mb-2"></i>
620
+ <p class="text-sm text-slate-400">Drop files here or click upload</p>
621
+ </div>
622
+
623
+ <div class="flex-1 overflow-y-auto px-4 pb-4">
624
+ <div id="file-list" class="space-y-1">
625
+ <!-- Files injected by JS -->
626
  </div>
627
  </div>
628
  </div>
629
  </div>
630
  </div>
631
  </div>
632
+ </main>
633
  </div>
634
 
635
  <!-- Status Bar -->
636
+ <div class="h-8 bg-slate-950 border-t border-slate-800 flex items-center justify-between px-4 text-xs text-slate-500">
637
  <div class="flex items-center space-x-4">
638
+ <span class="flex items-center space-x-1.5">
639
+ <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
640
  <span>Connected</span>
641
  </span>
642
+ <span class="hidden sm:inline" id="status-agent">Agent: Chat Agent</span>
643
+ <span class="hidden md:inline" id="status-project">Project: AgentFlow Core</span>
644
+ <span class="hidden lg:inline flex items-center space-x-1">
645
+ <i data-lucide="clock" class="w-3 h-3"></i>
646
+ <span id="last-updated">Just now</span>
647
+ </span>
648
+ </div>
649
+ <div class="flex items-center space-x-3">
650
+ <button onclick="showShortcuts()" class="hover:text-slate-300 transition-colors flex items-center space-x-1">
651
+ <i data-lucide="keyboard" class="w-3 h-3"></i>
652
+ <span>Shortcuts</span>
653
+ </button>
654
+ <span>v2.0.0</span>
655
  </div>
656
+ </div>
657
+
658
+ <!-- Search Modal -->
659
+ <div id="search-modal" class="fixed inset-0 z-50 hidden modal-overlay flex items-start justify-center pt-[20vh]">
660
+ <div class="w-full max-w-2xl mx-4 glass-strong rounded-xl shadow-2xl border border-slate-700/50 overflow-hidden animate-fade-in">
661
+ <div class="p-4 border-b border-slate-700/50 flex items-center space-x-3">
662
+ <i data-lucide="search" class="w-5 h-5 text-slate-400"></i>
663
+ <input type="text" id="search-input" placeholder="Search messages, files, tasks..."
664
+ class="flex-1 bg-transparent border-0 text-slate-200 placeholder-slate-500 focus:outline-none text-lg"
665
+ oninput="performSearch(this.value)">
666
+ <kbd class="px-2 py-1 bg-slate-800 rounded text-xs text-slate-400">ESC</kbd>
667
+ </div>
668
+ <div id="search-results" class="max-h-[60vh] overflow-y-auto p-2">
669
+ <div class="p-8 text-center text-slate-500">
670
+ <i data-lucide="search" class="w-12 h-12 mx-auto mb-3 opacity-50"></i>
671
+ <p>Start typing to search...</p>
672
+ </div>
673
+ </div>
674
+ </div>
675
+ </div>
676
+
677
+ <!-- Agent Selector Modal -->
678
+ <div id="agent-modal" class="fixed inset-0 z-50 hidden modal-overlay flex items-center justify-center p-4">
679
+ <div class="w-full max-w-md glass-strong rounded-2xl shadow-2xl border border-slate-700/50 overflow-hidden animate-fade-in">
680
+ <div class="p-6 border-b border-slate-700/50">
681
+ <h3 class="text-xl font-bold mb-2">Select Agent</h3>
682
+ <p class="text-sm text-slate-400">Choose an AI agent specialized for your task</p>
683
+ </div>
684
+ <div class="p-4 space-y-2" id="agent-list">
685
+ <!-- Agents injected by JS -->
686
+ </div>
687
+ </div>
688
+ </div>
689
+
690
+ <!-- Keyboard Shortcuts Modal -->
691
+ <div id="shortcuts-modal" class="fixed inset-0 z-50 hidden modal-overlay flex items-center justify-center p-4">
692
+ <div class="w-full max-w-lg glass-strong rounded-2xl shadow-2xl border border-slate-700/50 overflow-hidden animate-fade-in">
693
+ <div class="p-6 border-b border-slate-700/50 flex items-center justify-between">
694
+ <h3 class="text-xl font-bold">Keyboard Shortcuts</h3>
695
+ <button onclick="closeModals()" class="p-2 hover:bg-slate-800 rounded-lg transition-colors">
696
+ <i data-lucide="x" class="w-5 h-5"></i>
697
+ </button>
698
+ </div>
699
+ <div class="p-6 grid grid-cols-2 gap-4 text-sm">
700
+ <div class="flex items-center justify-between p-3 bg-slate-800/50 rounded-lg">
701
+ <span class="text-slate-300">New Chat</span>
702
+ <kbd class="px-2 py-1 bg-slate-700 rounded text-xs">⌘N</kbd>
703
+ </div>
704
+ <div class="flex items-center justify-between p-3 bg-slate-800/50 rounded-lg">
705
+ <span class="text-slate-300">Send Message</span>
706
+ <kbd class="px-2 py-1 bg-slate-700 rounded text-xs">↵</kbd>
707
+ </div>
708
+ <div class="flex items-center justify-between p-3 bg-slate-800/50 rounded-lg">
709
+ <span class="text-slate-300">Search</span>
710
+ <kbd class="px-2 py-1 bg-slate-700 rounded text-xs">⌘K</kbd>
711
+ </div>
712
+ <div class="flex items-center justify-between p-3 bg-slate-800/50 rounded-lg">
713
+ <span class="text-slate-300">Toggle Sidebar</span>
714
+ <kbd class="px-2 py-1 bg-slate-700 rounded text-xs">⌘B</kbd>
715
+ </div>
716
+ <div class="flex items-center justify-between p-3 bg-slate-800/50 rounded-lg">
717
+ <span class="text-slate-300">Run Code</span>
718
+ <kbd class="px-2 py-1 bg-slate-700 rounded text-xs">⌘↵</kbd>
719
+ </div>
720
+ <div class="flex items-center justify-between p-3 bg-slate-800/50 rounded-lg">
721
+ <span class="text-slate-300">Close Modal</span>
722
+ <kbd class="px-2 py-1 bg-slate-700 rounded text-xs">ESC</kbd>
723
+ </div>
724
+ </div>
725
  </div>
726
  </div>
727
 
728
  <script>
729
+ // State Management
730
+ const state = {
731
+ currentAgent: 'chat',
732
+ currentProject: 'AgentFlow Core',
733
+ theme: localStorage.getItem('theme') || 'dark',
734
+ messages: JSON.parse(localStorage.getItem('messages')) || [],
735
+ tasks: JSON.parse(localStorage.getItem('tasks')) || [
736
+ { id: 1, text: 'Review pull requests', completed: false, priority: 'high', dueDate: '2024-01-20' },
737
+ { id: 2, text: 'Update documentation', completed: true, priority: 'medium', dueDate: '2024-01-18' },
738
+ { id: 3, text: 'Fix navigation bug', completed: false, priority: 'low', dueDate: '2024-01-25' }
739
+ ],
740
+ files: JSON.parse(localStorage.getItem('files')) || [
741
+ { name: 'project_spec.md', size: '2.4 KB', type: 'text', date: '2024-01-15' },
742
+ { name: 'api_client.js', size: '12.8 KB', type: 'code', date: '2024-01-14' },
743
+ { name: 'design_mockup.png', size: '1.2 MB', type: 'image', date: '2024-01-13' }
744
+ ],
745
+ notifications: [
746
+ { id: 1, text: 'New task assigned to you', time: '2m ago', read: false },
747
+ { id: 2, text: 'Code execution completed', time: '5m ago', read: true },
748
+ { id: 3, text: 'File upload successful', time: '1h ago', read: true }
749
+ ],
750
+ agents: [
751
+ { id: 'chat', name: 'Chat Agent', model: 'GPT-4 Turbo', icon: 'message-square', desc: 'General conversation and assistance' },
752
+ { id: 'code', name: 'Code Agent', model: 'Codex', icon: 'code', desc: 'Programming and debugging' },
753
+ { id: 'data', name: 'Data Agent', model: 'GPT-4', icon: 'database', desc: 'Data analysis and processing' },
754
+ { id: 'creative', name: 'Creative Agent', model: 'GPT-4', icon: 'sparkles', desc: 'Content creation and design' }
755
+ ],
756
+ projects: [
757
+ { id: 1, name: 'AgentFlow Core', color: 'green', active: true },
758
+ { id: 2, name: 'UI Components', color: 'blue', active: false },
759
+ { id: 3, name: 'API Integration', color: 'yellow', active: false }
760
+ ]
761
+ };
762
+
763
+ // Initialization
764
+ document.addEventListener('DOMContentLoaded', () => {
765
+ lucide.createIcons();
766
+ applyTheme(state.theme);
767
+ renderProjects();
768
+ renderTasks();
769
+ renderFiles();
770
+ renderAgents();
771
+ renderNotifications();
772
+ updateTaskStats();
773
+ loadMessages();
774
 
775
+ // Setup drag and drop
776
+ setupDragAndDrop();
 
 
 
 
 
777
 
778
+ // Keyboard shortcuts
779
+ document.addEventListener('keydown', handleGlobalKeys);
 
 
 
 
 
 
 
 
 
 
780
 
781
+ // Auto-resize textarea
782
+ const textarea = document.getElementById('message-input');
783
+ textarea.addEventListener('input', () => autoResize(textarea));
 
784
 
785
+ // Close modals on outside click
786
+ document.querySelectorAll('.modal-overlay').forEach(modal => {
787
+ modal.addEventListener('click', (e) => {
788
+ if (e.target === modal) closeModals();
789
+ });
790
+ });
791
+ });
792
+
793
+ // Theme Management
794
+ function toggleTheme() {
795
+ state.theme = state.theme === 'dark' ? 'light' : 'dark';
796
+ localStorage.setItem('theme', state.theme);
797
+ applyTheme(state.theme);
798
+ }
799
+
800
+ function applyTheme(theme) {
801
+ const body = document.getElementById('app-body');
802
+ if (theme === 'light') {
803
+ body.classList.remove('bg-slate-900', 'text-slate-100');
804
+ body.classList.add('bg-slate-50', 'text-slate-900');
805
+ // Add more light mode specific changes
806
+ document.querySelectorAll('.glass, .glass-strong').forEach(el => {
807
+ el.style.background = 'rgba(255, 255, 255, 0.8)';
808
+ el.style.borderColor = 'rgba(0, 0, 0, 0.1)';
809
+ });
810
+ } else {
811
+ body.classList.add('bg-slate-900', 'text-slate-100');
812
+ body.classList.remove('bg-slate-50', 'text-slate-900');
813
+ document.querySelectorAll('.glass, .glass-strong').forEach(el => {
814
+ el.style.background = '';
815
+ el.style.borderColor = '';
816
+ });
817
  }
818
+ }
819
+
820
+ // Sidebar Toggle
821
+ function toggleSidebar() {
822
+ const sidebar = document.getElementById('sidebar');
823
+ const overlay = document.getElementById('sidebar-overlay');
824
+ const isOpen = !sidebar.classList.contains('-translate-x-full');
825
 
826
+ if (isOpen) {
827
+ sidebar.classList.add('-translate-x-full');
828
+ overlay.classList.add('hidden');
829
+ } else {
830
+ sidebar.classList.remove('-translate-x-full');
831
+ overlay.classList.remove('hidden');
 
 
 
 
 
832
  }
833
+ }
834
+
835
+ // Chat Functions
836
+ function autoResize(textarea) {
837
+ textarea.style.height = 'auto';
838
+ textarea.style.height = Math.min(textarea.scrollHeight, 128) + 'px';
839
 
840
+ // Update stats
841
+ const stats = document.getElementById('input-stats');
842
+ stats.textContent = `${textarea.value.length}/2000`;
843
+ }
844
+
845
+ function handleKeyDown(e) {
846
+ if (e.key === 'Enter' && !e.shiftKey) {
847
+ e.preventDefault();
848
+ sendMessage();
 
 
 
 
849
  }
850
+ }
851
+
852
+ function sendMessage() {
853
+ const input = document.getElementById('message-input');
854
+ const content = input.value.trim();
855
 
856
+ if (!content && !state.currentAttachment) return;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
857
 
858
+ // Add user message
859
+ const messageDiv = document.createElement('div');
860
+ messageDiv.className = 'flex justify-end animate-fade-in';
 
 
 
861
 
862
+ let attachmentHtml = '';
863
+ if (state.currentAttachment) {
864
+ attachmentHtml = `
865
+ <div class="flex items-center space-x-2 mt-2 p-2 bg-indigo-700/30 rounded border border-indigo-500/30">
866
+ <i data-lucide="file" class="w-4 h-4"></i>
867
+ <span class="text-sm">${state.currentAttachment.name}</span>
868
+ </div>
869
+ `;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
870
  }
871
 
872
+ messageDiv.innerHTML = `
873
+ <div class="max-w-[85%] lg:max-w-[70%] message-bubble bg-indigo-600 text-white rounded-2xl rounded-tr-sm px-4 py-3 shadow-lg">
874
+ <p class="text-sm leading-relaxed">${escapeHtml(content)}</p>
875
+ ${attachmentHtml}
876
+ <span class="text-xs text-indigo-200 mt-1 block text-right">${new Date().toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</span>
877
+ </div>
878
+ `;
879
 
880
+ document.getElementById('chat-messages').appendChild(messageDiv);
881
+ lucide.createIcons();
 
 
 
 
 
 
 
 
 
 
882
 
883
+ // Save message
884
+ state.messages.push({ content, type: 'user', time: new Date() });
885
+ localStorage.setItem('messages', JSON.stringify(state.messages));
886
 
887
+ // Clear input
888
+ input.value = '';
889
+ input.style.height = 'auto';
890
+ document.getElementById('input-stats').textContent = '0/2000';
891
+ clearAttachment();
892
 
893
+ // Update count
894
+ updateMessageCount();
895
+
896
+ // Scroll to bottom
897
+ const container = document.getElementById('chat-messages');
898
+ container.scrollTop = container.scrollHeight;
899
+
900
+ // Show typing indicator
901
+ showTypingIndicator();
902
+
903
+ // Simulate response
904
+ setTimeout(() => {
905
+ removeTypingIndicator();
906
+ addBotResponse(content);
907
+ }, 1500 + Math.random() * 1000);
908
+ }
909
+
910
+ function addBotResponse(userMessage) {
911
+ const responses = [
912
+ "I've analyzed your request. Here's what I found...",
913
+ "Great question! Let me break this down for you:\n\n1. First point\n2. Second point\n3. Third point",
914
+ "I can help with that. Here's a code example:\n\n