Hugging Face's logo

Spaces:
Simultaneous-Orthoganlity-In-Time
/
chat-with-multi-llm
Running

App Files Community
Simultaneous-Orthoganlity-In-Time commited on
Commit
5d6ad84
·
verified ·
1 Parent(s): 493cb2d

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +524 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Chat With Multi Llm
3
- emoji: ⚡
4
- colorFrom: gray
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: chat-with-multi-llm
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,524 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AsanaAI - Collaborative Project Management with AI</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .kanban-column {
11
+ min-height: 500px;
12
+ }
13
+ .chat-message.ai {
14
+ background-color: #f0f7ff;
15
+ border-left: 4px solid #3b82f6;
16
+ }
17
+ .chat-message.user {
18
+ background-color: #f8fafc;
19
+ border-left: 4px solid #e2e8f0;
20
+ }
21
+ .task-card:hover {
22
+ transform: translateY(-2px);
23
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
24
+ }
25
+ .sidebar-item:hover .sidebar-tooltip {
26
+ display: block;
27
+ }
28
+ .sidebar-tooltip {
29
+ display: none;
30
+ position: absolute;
31
+ left: 100%;
32
+ top: 50%;
33
+ transform: translateY(-50%);
34
+ background: #1e293b;
35
+ color: white;
36
+ padding: 0.5rem 1rem;
37
+ border-radius: 0.375rem;
38
+ white-space: nowrap;
39
+ z-index: 10;
40
+ }
41
+ .animate-pulse {
42
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
43
+ }
44
+ @keyframes pulse {
45
+ 0%, 100% {
46
+ opacity: 1;
47
+ }
48
+ 50% {
49
+ opacity: 0.5;
50
+ }
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="bg-gray-50 text-gray-800">
55
+ <div class="flex h-screen overflow-hidden">
56
+ <!-- Sidebar -->
57
+ <div class="hidden md:flex md:flex-shrink-0">
58
+ <div class="flex flex-col w-20 bg-white border-r border-gray-200">
59
+ <div class="flex items-center justify-center h-16 px-4 bg-indigo-600">
60
+ <span class="text-white font-bold text-xl">AAI</span>
61
+ </div>
62
+ <div class="flex flex-col flex-grow pt-5 overflow-y-auto">
63
+ <div class="flex-1 space-y-1">
64
+ <a href="#" class="sidebar-item group relative flex items-center justify-center py-3 px-2 text-indigo-600 bg-indigo-50">
65
+ <i class="fas fa-home text-xl"></i>
66
+ <span class="sidebar-tooltip">Dashboard</span>
67
+ </a>
68
+ <a href="#" class="sidebar-item group relative flex items-center justify-center py-3 px-2 text-gray-600 hover:text-indigo-600 hover:bg-indigo-50">
69
+ <i class="fas fa-tasks text-xl"></i>
70
+ <span class="sidebar-tooltip">Projects</span>
71
+ </a>
72
+ <a href="#" class="sidebar-item group relative flex items-center justify-center py-3 px-2 text-gray-600 hover:text-indigo-600 hover:bg-indigo-50">
73
+ <i class="fas fa-users text-xl"></i>
74
+ <span class="sidebar-tooltip">Team</span>
75
+ </a>
76
+ <a href="#" class="sidebar-item group relative flex items-center justify-center py-3 px-2 text-gray-600 hover:text-indigo-600 hover:bg-indigo-50">
77
+ <i class="fas fa-comments text-xl"></i>
78
+ <span class="sidebar-tooltip">Chat</span>
79
+ </a>
80
+ <a href="#" class="sidebar-item group relative flex items-center justify-center py-3 px-2 text-gray-600 hover:text-indigo-600 hover:bg-indigo-50">
81
+ <i class="fas fa-cog text-xl"></i>
82
+ <span class="sidebar-tooltip">Settings</span>
83
+ </a>
84
+ </div>
85
+ <div class="pb-4">
86
+ <a href="#" class="sidebar-item group relative flex items-center justify-center py-3 px-2 text-gray-600 hover:text-indigo-600 hover:bg-indigo-50">
87
+ <i class="fas fa-question-circle text-xl"></i>
88
+ <span class="sidebar-tooltip">Help</span>
89
+ </a>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- Main content -->
96
+ <div class="flex flex-col flex-1 overflow-hidden">
97
+ <!-- Top navigation -->
98
+ <div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">
99
+ <div class="flex items-center">
100
+ <button class="md:hidden p-2 rounded-md text-gray-500 hover:text-gray-600 hover:bg-gray-100 focus:outline-none">
101
+ <i class="fas fa-bars"></i>
102
+ </button>
103
+ <h1 class="ml-4 text-xl font-semibold text-gray-900">Project Dashboard</h1>
104
+ </div>
105
+ <div class="flex items-center space-x-4">
106
+ <div class="relative">
107
+ <button class="p-2 rounded-full text-gray-500 hover:text-gray-600 hover:bg-gray-100 focus:outline-none">
108
+ <i class="fas fa-bell"></i>
109
+ </button>
110
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
111
+ </div>
112
+ <div class="relative">
113
+ <button class="flex items-center space-x-2 focus:outline-none">
114
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User profile">
115
+ <span class="hidden md:block text-sm font-medium text-gray-700">John Doe</span>
116
+ </button>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <!-- Main content area -->
122
+ <div class="flex-1 overflow-auto p-4">
123
+ <!-- Project header -->
124
+ <div class="mb-6">
125
+ <div class="flex items-center justify-between">
126
+ <div>
127
+ <h2 class="text-2xl font-bold">Website Redesign</h2>
128
+ <p class="text-gray-600">Complete redesign of company website with new branding</p>
129
+ </div>
130
+ <div class="flex space-x-2">
131
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none">
132
+ <i class="fas fa-plus mr-2"></i> Add Task
133
+ </button>
134
+ <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 focus:outline-none">
135
+ <i class="fas fa-ellipsis-h"></i>
136
+ </button>
137
+ </div>
138
+ </div>
139
+ <div class="mt-4 flex items-center space-x-4">
140
+ <div class="flex -space-x-2">
141
+ <img class="h-8 w-8 rounded-full border-2 border-white" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Team member">
142
+ <img class="h-8 w-8 rounded-full border-2 border-white" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Team member">
143
+ <div class="h-8 w-8 rounded-full border-2 border-white bg-indigo-100 flex items-center justify-center">
144
+ <span class="text-xs font-medium text-indigo-800">+2</span>
145
+ </div>
146
+ </div>
147
+ <div class="flex -space-x-2">
148
+ <div class="h-8 w-8 rounded-full border-2 border-white bg-purple-100 flex items-center justify-center">
149
+ <i class="fas fa-robot text-purple-500"></i>
150
+ </div>
151
+ <div class="h-8 w-8 rounded-full border-2 border-white bg-green-100 flex items-center justify-center">
152
+ <i class="fas fa-robot text-green-500"></i>
153
+ </div>
154
+ </div>
155
+ <span class="text-sm text-gray-500">2 humans, 2 AI assistants</span>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Kanban board -->
160
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
161
+ <!-- Backlog column -->
162
+ <div class="bg-white rounded-lg shadow kanban-column">
163
+ <div class="p-4 border-b border-gray-200">
164
+ <h3 class="font-medium text-gray-900">Backlog</h3>
165
+ </div>
166
+ <div class="p-4 space-y-3">
167
+ <div class="task-card bg-white p-3 rounded-lg border border-gray-200 hover:shadow-md transition duration-150 ease-in-out cursor-move">
168
+ <div class="flex justify-between items-start">
169
+ <div>
170
+ <span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Design</span>
171
+ <h4 class="mt-2 font-medium">Create wireframes</h4>
172
+ </div>
173
+ <button class="text-gray-400 hover:text-gray-600">
174
+ <i class="fas fa-ellipsis-v"></i>
175
+ </button>
176
+ </div>
177
+ <div class="mt-3 flex items-center justify-between">
178
+ <div class="flex items-center space-x-1">
179
+ <i class="fas fa-comment text-gray-400 text-xs"></i>
180
+ <span class="text-xs text-gray-500">3</span>
181
+ </div>
182
+ <div class="flex -space-x-1">
183
+ <img class="h-6 w-6 rounded-full border-2 border-white" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Assignee">
184
+ </div>
185
+ </div>
186
+ </div>
187
+ <div class="task-card bg-white p-3 rounded-lg border border-gray-200 hover:shadow-md transition duration-150 ease-in-out cursor-move">
188
+ <div class="flex justify-between items-start">
189
+ <div>
190
+ <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded-full">Content</span>
191
+ <h4 class="mt-2 font-medium">Write homepage copy</h4>
192
+ </div>
193
+ <button class="text-gray-400 hover:text-gray-600">
194
+ <i class="fas fa-ellipsis-v"></i>
195
+ </button>
196
+ </div>
197
+ <div class="mt-3 flex items-center justify-between">
198
+ <div class="flex items-center space-x-1">
199
+ <i class="fas fa-comment text-gray-400 text-xs"></i>
200
+ <span class="text-xs text-gray-500">5</span>
201
+ </div>
202
+ <div class="flex -space-x-1">
203
+ <div class="h-6 w-6 rounded-full border-2 border-white bg-purple-100 flex items-center justify-center">
204
+ <i class="fas fa-robot text-purple-500 text-xs"></i>
205
+ </div>
206
+ </div>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ <div class="p-3 border-t border-gray-200">
211
+ <button class="w-full py-2 text-sm text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 rounded-md">
212
+ <i class="fas fa-plus mr-2"></i> Add task
213
+ </button>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- In Progress column -->
218
+ <div class="bg-white rounded-lg shadow kanban-column">
219
+ <div class="p-4 border-b border-gray-200">
220
+ <h3 class="font-medium text-gray-900">In Progress</h3>
221
+ </div>
222
+ <div class="p-4 space-y-3">
223
+ <div class="task-card bg-white p-3 rounded-lg border border-gray-200 hover:shadow-md transition duration-150 ease-in-out cursor-move">
224
+ <div class="flex justify-between items-start">
225
+ <div>
226
+ <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">Development</span>
227
+ <h4 class="mt-2 font-medium">Implement new header</h4>
228
+ </div>
229
+ <button class="text-gray-400 hover:text-gray-600">
230
+ <i class="fas fa-ellipsis-v"></i>
231
+ </button>
232
+ </div>
233
+ <div class="mt-3 flex items-center justify-between">
234
+ <div class="flex items-center space-x-1">
235
+ <i class="fas fa-comment text-gray-400 text-xs"></i>
236
+ <span class="text-xs text-gray-500">7</span>
237
+ </div>
238
+ <div class="flex -space-x-1">
239
+ <img class="h-6 w-6 rounded-full border-2 border-white" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Assignee">
240
+ </div>
241
+ </div>
242
+ </div>
243
+ <div class="task-card bg-white p-3 rounded-lg border border-gray-200 hover:shadow-md transition duration-150 ease-in-out cursor-move">
244
+ <div class="flex justify-between items-start">
245
+ <div>
246
+ <span class="text-xs px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full">SEO</span>
247
+ <h4 class="mt-2 font-medium">Optimize meta tags</h4>
248
+ </div>
249
+ <button class="text-gray-400 hover:text-gray-600">
250
+ <i class="fas fa-ellipsis-v"></i>
251
+ </button>
252
+ </div>
253
+ <div class="mt-3 flex items-center justify-between">
254
+ <div class="flex items-center space-x-1">
255
+ <i class="fas fa-comment text-gray-400 text-xs"></i>
256
+ <span class="text-xs text-gray-500">2</span>
257
+ </div>
258
+ <div class="flex -space-x-1">
259
+ <div class="h-6 w-6 rounded-full border-2 border-white bg-green-100 flex items-center justify-center">
260
+ <i class="fas fa-robot text-green-500 text-xs"></i>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ <div class="p-3 border-t border-gray-200">
267
+ <button class="w-full py-2 text-sm text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 rounded-md">
268
+ <i class="fas fa-plus mr-2"></i> Add task
269
+ </button>
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Review column -->
274
+ <div class="bg-white rounded-lg shadow kanban-column">
275
+ <div class="p-4 border-b border-gray-200">
276
+ <h3 class="font-medium text-gray-900">Review</h3>
277
+ </div>
278
+ <div class="p-4 space-y-3">
279
+ <div class="task-card bg-white p-3 rounded-lg border border-gray-200 hover:shadow-md transition duration-150 ease-in-out cursor-move">
280
+ <div class="flex justify-between items-start">
281
+ <div>
282
+ <span class="text-xs px-2 py-1 bg-red-100 text-red-800 rounded-full">Bug</span>
283
+ <h4 class="mt-2 font-medium">Fix mobile menu</h4>
284
+ </div>
285
+ <button class="text-gray-400 hover:text-gray-600">
286
+ <i class="fas fa-ellipsis-v"></i>
287
+ </button>
288
+ </div>
289
+ <div class="mt-3 flex items-center justify-between">
290
+ <div class="flex items-center space-x-1">
291
+ <i class="fas fa-comment text-gray-400 text-xs"></i>
292
+ <span class="text-xs text-gray-500">4</span>
293
+ </div>
294
+ <div class="flex -space-x-1">
295
+ <img class="h-6 w-6 rounded-full border-2 border-white" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="Assignee">
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ <div class="p-3 border-t border-gray-200">
301
+ <button class="w-full py-2 text-sm text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 rounded-md">
302
+ <i class="fas fa-plus mr-2"></i> Add task
303
+ </button>
304
+ </div>
305
+ </div>
306
+
307
+ <!-- Done column -->
308
+ <div class="bg-white rounded-lg shadow kanban-column">
309
+ <div class="p-4 border-b border-gray-200">
310
+ <h3 class="font-medium text-gray-900">Done</h3>
311
+ </div>
312
+ <div class="p-4 space-y-3">
313
+ <div class="task-card bg-white p-3 rounded-lg border border-gray-200 hover:shadow-md transition duration-150 ease-in-out cursor-move opacity-70">
314
+ <div class="flex justify-between items-start">
315
+ <div>
316
+ <span class="text-xs px-2 py-1 bg-indigo-100 text-indigo-800 rounded-full">Research</span>
317
+ <h4 class="mt-2 font-medium">Competitor analysis</h4>
318
+ </div>
319
+ <button class="text-gray-400 hover:text-gray-600">
320
+ <i class="fas fa-ellipsis-v"></i>
321
+ </button>
322
+ </div>
323
+ <div class="mt-3 flex items-center justify-between">
324
+ <div class="flex items-center space-x-1">
325
+ <i class="fas fa-comment text-gray-400 text-xs"></i>
326
+ <span class="text-xs text-gray-500">8</span>
327
+ </div>
328
+ <div class="flex -space-x-1">
329
+ <div class="h-6 w-6 rounded-full border-2 border-white bg-purple-100 flex items-center justify-center">
330
+ <i class="fas fa-robot text-purple-500 text-xs"></i>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ <div class="p-3 border-t border-gray-200">
337
+ <button class="w-full py-2 text-sm text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 rounded-md">
338
+ <i class="fas fa-plus mr-2"></i> Add task
339
+ </button>
340
+ </div>
341
+ </div>
342
+ </div>
343
+
344
+ <!-- Chat panel (hidden by default, can be toggled) -->
345
+ <div id="chat-panel" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
346
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl max-h-screen flex flex-col" style="height: 80vh;">
347
+ <div class="p-4 border-b border-gray-200 flex justify-between items-center">
348
+ <h3 class="font-medium text-gray-900">Project Chat</h3>
349
+ <button id="close-chat" class="text-gray-400 hover:text-gray-600">
350
+ <i class="fas fa-times"></i>
351
+ </button>
352
+ </div>
353
+ <div class="flex-1 overflow-y-auto p-4 space-y-4">
354
+ <!-- AI message -->
355
+ <div class="chat-message ai p-3 rounded-lg">
356
+ <div class="flex items-start space-x-3">
357
+ <div class="h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center">
358
+ <i class="fas fa-robot text-purple-500"></i>
359
+ </div>
360
+ <div>
361
+ <p class="font-medium text-purple-600">Design Assistant</p>
362
+ <p class="mt-1 text-gray-700">I've analyzed the wireframes and suggest we increase the padding on the header elements for better mobile readability.</p>
363
+ </div>
364
+ </div>
365
+ </div>
366
+
367
+ <!-- User message -->
368
+ <div class="chat-message user p-3 rounded-lg">
369
+ <div class="flex items-start space-x-3">
370
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User">
371
+ <div>
372
+ <p class="font-medium text-gray-800">John Doe</p>
373
+ <p class="mt-1 text-gray-700">Thanks for the suggestion! What specific padding values would you recommend?</p>
374
+ </div>
375
+ </div>
376
+ </div>
377
+
378
+ <!-- AI message -->
379
+ <div class="chat-message ai p-3 rounded-lg">
380
+ <div class="flex items-start space-x-3">
381
+ <div class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center">
382
+ <i class="fas fa-robot text-green-500"></i>
383
+ </div>
384
+ <div>
385
+ <p class="font-medium text-green-600">Dev Assistant</p>
386
+ <p class="mt-1 text-gray-700">Based on current mobile design trends, I'd recommend 16px padding on the sides and 12px between elements.</p>
387
+ </div>
388
+ </div>
389
+ </div>
390
+
391
+ <!-- AI thinking indicator -->
392
+ <div class="chat-message ai p-3 rounded-lg">
393
+ <div class="flex items-start space-x-3">
394
+ <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
395
+ <i class="fas fa-robot text-blue-500"></i>
396
+ </div>
397
+ <div>
398
+ <p class="font-medium text-blue-600">Project Manager AI</p>
399
+ <div class="mt-1 flex space-x-2">
400
+ <div class="h-2 w-2 bg-blue-400 rounded-full animate-pulse"></div>
401
+ <div class="h-2 w-2 bg-blue-400 rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
402
+ <div class="h-2 w-2 bg-blue-400 rounded-full animate-pulse" style="animation-delay: 0.4s"></div>
403
+ </div>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ <div class="p-4 border-t border-gray-200">
409
+ <div class="flex items-center space-x-2">
410
+ <div class="flex-1 relative">
411
+ <input type="text" placeholder="Type your message..." class="w-full pl-4 pr-10 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
412
+ <div class="absolute right-3 top-2 flex space-x-1">
413
+ <button class="p-1 text-gray-400 hover:text-indigo-600">
414
+ <i class="far fa-smile"></i>
415
+ </button>
416
+ <button class="p-1 text-gray-400 hover:text-indigo-600">
417
+ <i class="fas fa-paperclip"></i>
418
+ </button>
419
+ </div>
420
+ </div>
421
+ <button class="p-2 bg-indigo-600 text-white rounded-full hover:bg-indigo-700 focus:outline-none">
422
+ <i class="fas fa-paper-plane"></i>
423
+ </button>
424
+ </div>
425
+ <div class="mt-2 flex flex-wrap gap-2">
426
+ <button class="text-xs px-2 py-1 bg-indigo-100 text-indigo-800 rounded-full hover:bg-indigo-200">
427
+ <i class="fas fa-robot mr-1"></i> Ask Design AI
428
+ </button>
429
+ <button class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full hover:bg-green-200">
430
+ <i class="fas fa-robot mr-1"></i> Ask Dev AI
431
+ </button>
432
+ <button class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full hover:bg-blue-200">
433
+ <i class="fas fa-robot mr-1"></i> Ask PM AI
434
+ </button>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ </div>
442
+
443
+ <!-- Floating action button for chat -->
444
+ <button id="open-chat" class="fixed bottom-6 right-6 h-14 w-14 bg-indigo-600 text-white rounded-full shadow-lg hover:bg-indigo-700 focus:outline-none flex items-center justify-center">
445
+ <i class="fas fa-comment-dots text-xl"></i>
446
+ <span class="absolute -top-1 -right-1 h-5 w-5 rounded-full bg-red-500 text-white text-xs flex items-center justify-center">3</span>
447
+ </button>
448
+
449
+ <script>
450
+ // Chat panel toggle
451
+ document.getElementById('open-chat').addEventListener('click', function() {
452
+ document.getElementById('chat-panel').classList.remove('hidden');
453
+ });
454
+
455
+ document.getElementById('close-chat').addEventListener('click', function() {
456
+ document.getElementById('chat-panel').classList.add('hidden');
457
+ });
458
+
459
+ // Simulate AI response after 2 seconds
460
+ setTimeout(() => {
461
+ const thinkingMessage = document.querySelector('.chat-message.ai:last-child');
462
+ if (thinkingMessage) {
463
+ thinkingMessage.innerHTML = `
464
+ <div class="flex items-start space-x-3">
465
+ <div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
466
+ <i class="fas fa-robot text-blue-500"></i>
467
+ </div>
468
+ <div>
469
+ <p class="font-medium text-blue-600">Project Manager AI</p>
470
+ <p class="mt-1 text-gray-700">I've updated the task description with these specifications and assigned it to the design team. The estimated completion time is 2 days.</p>
471
+ </div>
472
+ </div>
473
+ `;
474
+ }
475
+ }, 2000);
476
+
477
+ // Drag and drop functionality for kanban cards
478
+ const cards = document.querySelectorAll('.task-card');
479
+ const columns = document.querySelectorAll('.kanban-column');
480
+
481
+ cards.forEach(card => {
482
+ card.setAttribute('draggable', 'true');
483
+
484
+ card.addEventListener('dragstart', () => {
485
+ card.classList.add('opacity-50');
486
+ });
487
+
488
+ card.addEventListener('dragend', () => {
489
+ card.classList.remove('opacity-50');
490
+ });
491
+ });
492
+
493
+ columns.forEach(column => {
494
+ column.addEventListener('dragover', e => {
495
+ e.preventDefault();
496
+ const draggingCard = document.querySelector('.opacity-50');
497
+ if (draggingCard) {
498
+ const afterElement = getDragAfterElement(column, e.clientY);
499
+ if (afterElement) {
500
+ column.insertBefore(draggingCard, afterElement);
501
+ } else {
502
+ column.appendChild(draggingCard);
503
+ }
504
+ }
505
+ });
506
+ });
507
+
508
+ function getDragAfterElement(column, y) {
509
+ const cards = [...column.querySelectorAll('.task-card:not(.opacity-50)')];
510
+
511
+ return cards.reduce((closest, child) => {
512
+ const box = child.getBoundingClientRect();
513
+ const offset = y - box.top - box.height / 2;
514
+
515
+ if (offset < 0 && offset > closest.offset) {
516
+ return { offset: offset, element: child };
517
+ } else {
518
+ return closest;
519
+ }
520
+ }, { offset: Number.NEGATIVE_INFINITY }).element;
521
+ }
522
+ </script>
523
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Simultaneous-Orthoganlity-In-Time/chat-with-multi-llm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
524
+ </html>