Hugging Face's logo

Spaces:
erkinalp
/
codewiz-ai-studio
Running

App Files Community
erkinalp commited on
Commit
9e61e06
·
verified ·
1 Parent(s): fe44f69

now add the deepwiki and ask devin features

Browse files
Files changed (6) hide show
  1. ask-devin.html +423 -0
  2. components/navbar.js +3 -3
  3. components/sidebar.js +10 -2
  4. deepwiki.html +337 -0
  5. index.html +22 -10
  6. style.css +56 -1
ask-devin.html ADDED
@@ -0,0 +1,423 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Ask Devin - DevinAI Clone</title>
7
+ <link rel="stylesheet" href="style.css">
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
+ <link rel="preconnect" href="https://fonts.googleapis.com">
12
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
14
+ <style>
15
+ * {
16
+ font-family: 'Inter', sans-serif;
17
+ }
18
+ .code-font {
19
+ font-family: 'JetBrains Mono', monospace;
20
+ }
21
+ .message-user {
22
+ background: linear-gradient(135deg, #3b82f6, #6366f1);
23
+ color: white;
24
+ border-radius: 1rem 1rem 0.25rem 1rem;
25
+ }
26
+ .message-ai {
27
+ background: #f3f4f6;
28
+ color: #1f2937;
29
+ border-radius: 1rem 1rem 1rem 0.25rem;
30
+ }
31
+ .thinking-dots span {
32
+ animation: bounce 1.5s infinite;
33
+ }
34
+ .thinking-dots span:nth-child(2) {
35
+ animation-delay: 0.2s;
36
+ }
37
+ .thinking-dots span:nth-child(3) {
38
+ animation-delay: 0.4s;
39
+ }
40
+ @keyframes bounce {
41
+ 0%, 80%, 100% { transform: translateY(0); }
42
+ 40% { transform: translateY(-10px); }
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="bg-gray-50 min-h-screen">
47
+ <custom-navbar></custom-navbar>
48
+ <custom-sidebar></custom-sidebar>
49
+
50
+ <main class="ml-0 md:ml-64 pt-16 px-4 md:px-8 pb-8">
51
+ <div class="max-w-6xl mx-auto">
52
+ <!-- Header Section -->
53
+ <div class="mb-8 mt-6">
54
+ <h1 class="text-3xl md:text-4xl font-bold text-gray-900">Ask Devin AI Assistant</h1>
55
+ <p class="text-gray-600 mt-2">Get instant AI-powered answers to your coding questions, with explanations and code examples</p>
56
+ </div>
57
+
58
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
59
+ <!-- Left Column - Chat Interface -->
60
+ <div class="lg:col-span-2">
61
+ <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden h-[600px] flex flex-col">
62
+ <!-- Chat Header -->
63
+ <div class="px-6 py-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-purple-50">
64
+ <h2 class="text-xl font-bold text-gray-900 flex items-center">
65
+ <div class="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center mr-3">
66
+ <i data-feather="cpu" class="w-4 h-4 text-white"></i>
67
+ </div>
68
+ Devin AI Assistant
69
+ <span class="ml-3 text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Online</span>
70
+ </h2>
71
+ </div>
72
+
73
+ <!-- Chat Messages -->
74
+ <div class="flex-1 overflow-y-auto p-6" id="chat-messages">
75
+ <!-- Welcome Message -->
76
+ <div class="message-ai p-4 mb-6 max-w-[85%]">
77
+ <div class="flex items-center mb-2">
78
+ <div class="w-6 h-6 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full"></div>
79
+ <span class="ml-2 font-semibold">Devin AI</span>
80
+ <span class="ml-auto text-xs text-gray-500">Just now</span>
81
+ </div>
82
+ <p class="text-gray-800">Hello! I'm Devin, your AI coding assistant. I can help you with:</p>
83
+ <ul class="list-disc pl-5 mt-2 text-gray-700">
84
+ <li>Explaining programming concepts</li>
85
+ <li>Writing and debugging code</li>
86
+ <li>Code reviews and optimization</li>
87
+ <li>Architecture and best practices</li>
88
+ </ul>
89
+ <p class="mt-3 text-gray-800">What would you like to know today?</p>
90
+ </div>
91
+
92
+ <!-- Example messages -->
93
+ <div class="message-user p-4 mb-6 max-w-[85%] ml-auto">
94
+ <div class="flex items-center mb-2">
95
+ <div class="w-6 h-6 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full"></div>
96
+ <span class="ml-2 font-semibold text-white">You</span>
97
+ <span class="ml-auto text-xs text-blue-100">2 min ago</span>
98
+ </div>
99
+ <p>How do I optimize React component performance?</p>
100
+ </div>
101
+
102
+ <div class="message-ai p-4 mb-6 max-w-[85%]">
103
+ <div class="flex items-center mb-2">
104
+ <div class="w-6 h-6 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full"></div>
105
+ <span class="ml-2 font-semibold">Devin AI</span>
106
+ <span class="ml-auto text-xs text-gray-500">1 min ago</span>
107
+ </div>
108
+ <p class="text-gray-800 mb-3">React performance can be optimized using:</p>
109
+ <ol class="list-decimal pl-5 text-gray-700 mb-3">
110
+ <li><strong>useMemo</strong>: Memoize expensive calculations</li>
111
+ <li><strong>useCallback</strong>: Memoize function references</li>
112
+ <li><strong>React.memo</strong>: Prevent unnecessary re-renders</li>
113
+ <li><strong>Code splitting</strong>: Lazy load components</li>
114
+ </ol>
115
+ <pre class="text-sm bg-gray-800 text-gray-200 p-3 rounded-lg mt-2 overflow-x-auto">
116
+ import React, { useMemo, memo } from 'react';
117
+
118
+ // Memoized component
119
+ const ExpensiveComponent = memo(({ data }) => {
120
+ const processedData = useMemo(() => {
121
+ return data.filter(item => item.active)
122
+ .map(item => ({ ...item, processed: true }));
123
+ }, [data]);
124
+
125
+ return <div>{JSON.stringify(processedData)}</div>;
126
+ });</pre>
127
+ <p class="mt-3 text-gray-800">Would you like me to explain any of these in more detail?</p>
128
+ </div>
129
+ </div>
130
+
131
+ <!-- Chat Input -->
132
+ <div class="border-t border-gray-200 p-4">
133
+ <div class="flex items-center">
134
+ <textarea
135
+ id="user-question"
136
+ rows="2"
137
+ placeholder="Ask Devin anything about coding..."
138
+ class="flex-1 border border-gray-300 rounded-l-lg p-4 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
139
+ ></textarea>
140
+ <button
141
+ id="send-question"
142
+ class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-4 rounded-r-lg font-semibold hover:opacity-90 transition-opacity h-full"
143
+ >
144
+ <i data-feather="send" class="w-5 h-5"></i>
145
+ </button>
146
+ </div>
147
+ <div class="flex justify-between items-center mt-2 text-sm text-gray-500">
148
+ <div>
149
+ <button class="flex items-center text-gray-600 hover:text-blue-600 mr-4">
150
+ <i data-feather="code" class="w-4 h-4 mr-1"></i>
151
+ Attach Code
152
+ </button>
153
+ </div>
154
+ <div>
155
+ <button class="flex items-center text-gray-600 hover:text-blue-600">
156
+ <i data-feather="trash" class="w-4 h-4 mr-1"></i>
157
+ Clear Chat
158
+ </button>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+
165
+ <!-- Right Column - Features & Quick Questions -->
166
+ <div class="lg:col-span-1">
167
+ <!-- Quick Questions -->
168
+ <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden mb-6">
169
+ <div class="px-6 py-4 border-b border-gray-200">
170
+ <h2 class="text-xl font-bold text-gray-900 flex items-center">
171
+ <i data-feather="zap" class="w-5 h-5 mr-2 text-yellow-600"></i>
172
+ Quick Questions
173
+ </h2>
174
+ </div>
175
+ <div class="p-4">
176
+ <div class="space-y-3">
177
+ <button class="quick-question-btn w-full text-left p-3 border border-gray-200 rounded-lg hover:bg-blue-50 hover:border-blue-200">
178
+ How to fix "Cannot read property of undefined" in JavaScript?
179
+ </button>
180
+ <button class="quick-question-btn w-full text-left p-3 border border-gray-200 rounded-lg hover:bg-blue-50 hover:border-blue-200">
181
+ Explain async/await with examples
182
+ </button>
183
+ <button class="quick-question-btn w-full text-left p-3 border border-gray-200 rounded-lg hover:bg-blue-50 hover:border-blue-200">
184
+ Best practices for API error handling
185
+ </button>
186
+ <button class="quick-question-btn w-full text-left p-3 border border-gray-200 rounded-lg hover:bg-blue-50 hover:border-blue-200">
187
+ React vs Vue vs Angular comparison
188
+ </button>
189
+ <button class="quick-question-btn w-full text-left p-3 border border-gray-200 rounded-lg hover:bg-blue-50 hover:border-blue-200">
190
+ How to optimize database queries?
191
+ </button>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- AI Features -->
197
+ <div class="bg-gradient-to-br from-gray-900 to-black rounded-xl shadow-lg overflow-hidden">
198
+ <div class="px-6 py-4">
199
+ <h2 class="text-xl font-bold text-white mb-4">AI Features</h2>
200
+ <div class="space-y-4">
201
+ <div class="flex items-center p-3 bg-gray-800 bg-opacity-50 rounded-lg">
202
+ <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center mr-3">
203
+ <i data-feather="code" class="w-5 h-5 text-white"></i>
204
+ </div>
205
+ <div>
206
+ <p class="font-semibold text-white">Code Generation</p>
207
+ <p class="text-sm text-gray-300">Generate code from natural language</p>
208
+ </div>
209
+ </div>
210
+ <div class="flex items-center p-3 bg-gray-800 bg-opacity-50 rounded-lg">
211
+ <div class="w-10 h-10 bg-green-500 rounded-lg flex items-center justify-center mr-3">
212
+ <i data-feather="search" class="w-5 h-5 text-white"></i>
213
+ </div>
214
+ <div>
215
+ <p class="font-semibold text-white">Code Explanation</p>
216
+ <p class="text-sm text-gray-300">Understand complex code snippets</p>
217
+ </div>
218
+ </div>
219
+ <div class="flex items-center p-3 bg-gray-800 bg-opacity-50 rounded-lg">
220
+ <div class="w-10 h-10 bg-purple-500 rounded-lg flex items-center justify-center mr-3">
221
+ <i data-feather="check-circle" class="w-5 h-5 text-white"></i>
222
+ </div>
223
+ <div>
224
+ <p class="font-semibold text-white">Code Review</p>
225
+ <p class="text-sm text-gray-300">Get AI-powered code reviews</p>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <!-- Recent Questions -->
233
+ <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden mt-6">
234
+ <div class="px-6 py-4 border-b border-gray-200">
235
+ <h2 class="text-xl font-bold text-gray-900 flex items-center">
236
+ <i data-feather="history" class="w-5 h-5 mr-2 text-gray-600"></i>
237
+ Recent Questions
238
+ </h2>
239
+ </div>
240
+ <div class="p-4">
241
+ <div class="space-y-4">
242
+ <div class="text-sm">
243
+ <p class="font-medium text-gray-900">"How to implement JWT auth?"</p>
244
+ <p class="text-gray-500 text-xs mt-1">2 hours ago</p>
245
+ </div>
246
+ <div class="text-sm">
247
+ <p class="font-medium text-gray-900">"React useEffect cleanup"</p>
248
+ <p class="text-gray-500 text-xs mt-1">Yesterday</p>
249
+ </div>
250
+ <div class="text-sm">
251
+ <p class="font-medium text-gray-900">"Python list comprehension speed"</p>
252
+ <p class="text-gray-500 text-xs mt-1">3 days ago</p>
253
+ </div>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </main>
261
+
262
+ <custom-footer></custom-footer>
263
+
264
+ <script src="components/navbar.js"></script>
265
+ <script src="components/sidebar.js"></script>
266
+ <script src="components/footer.js"></script>
267
+ <script src="script.js"></script>
268
+ <script>
269
+ feather.replace();
270
+
271
+ document.addEventListener('DOMContentLoaded', function() {
272
+ // Update sidebar active state
273
+ const sidebarLinks = document.querySelector('custom-sidebar').shadowRoot.querySelectorAll('.menu-item');
274
+ sidebarLinks.forEach(link => {
275
+ link.classList.remove('active');
276
+ if (link.href && link.href.includes('ask-devin.html')) {
277
+ link.classList.add('active');
278
+ }
279
+ });
280
+
281
+ // Add Ask Devin to sidebar if not present
282
+ const sidebar = document.querySelector('custom-sidebar');
283
+ if (sidebar) {
284
+ const aiToolsGroup = sidebar.shadowRoot.querySelector('.menu-group:nth-child(2) .menu-items');
285
+ if (aiToolsGroup) {
286
+ const askDevinLink = document.createElement('a');
287
+ askDevinLink.className = 'menu-item';
288
+ askDevinLink.href = 'ask-devin.html';
289
+ askDevinLink.innerHTML = '<i data-feather="message-square"></i> Ask Devin';
290
+ aiToolsGroup.appendChild(askDevinLink);
291
+ feather.replace();
292
+ }
293
+ }
294
+
295
+ // Chat functionality
296
+ const chatMessages = document.getElementById('chat-messages');
297
+ const userInput = document.getElementById('user-question');
298
+ const sendButton = document.getElementById('send-question');
299
+
300
+ function addMessage(text, isUser = true) {
301
+ const messageDiv = document.createElement('div');
302
+ messageDiv.className = isUser ? 'message-user p-4 mb-6 max-w-[85%] ml-auto' : 'message-ai p1-4 mb-6 max-w-[85%]';
303
+
304
+ const timestamp = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
305
+
306
+ messageDiv.innerHTML = `
307
+ <div class="flex items-center mb-2">
308
+ <div class="w-6 h-6 ${isUser ? 'bg-gradient-to-r from-blue-500 to-cyan-500' : 'bg-gradient-to-r from-purple-500 to-pink-500'} rounded-full"></div>
309
+ <span class="ml-2 font-semibold ${isUser ? 'text-white' : ''}">${isUser ? 'You' : 'Devin AI'}</span>
310
+ <span class="ml-auto text-xs ${isUser ? 'text-blue-100' : 'text-gray-500'}">${timestamp}</span>
311
+ </div>
312
+ <p class="${isUser ? '' : 'text-gray-800'}">${text}</p>
313
+ `;
314
+
315
+ chatMessages.appendChild(messageDiv);
316
+ chatMessages.scrollTop = chatMessages.scrollHeight;
317
+ }
318
+
319
+ function addThinkingIndicator() {
320
+ const thinkingDiv = document.createElement('div');
321
+ thinkingDiv.className = 'message-ai p-4 mb-6 max-w-[85%]';
322
+ thinkingDiv.id = 'thinking-indicator';
323
+ thinkingDiv.innerHTML = `
324
+ <div class="flex items-center mb-2">
325
+ <div class="w-6 h-6 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full"></div>
326
+ <span class="ml-2 font-semibold">Devin AI</span>
327
+ </div>
328
+ <div class="thinking-dots flex space-x-1">
329
+ <span class="w-2 h-2 bg-gray-400 rounded-full"></span>
330
+ <span class="w-2 h-2 bg-gray-400 rounded-full"></span>
331
+ <span class="w-2 h-2 bg-gray-400 rounded-full"></span>
332
+ </div>
333
+ `;
334
+ chatMessages.appendChild(thinkingDiv);
335
+ chatMessages.scrollTop = chatMessages.scrollHeight;
336
+ }
337
+
338
+ function removeThinkingIndicator() {
339
+ const indicator = document.getElementById('thinking-indicator');
340
+ if (indicator) {
341
+ indicator.remove();
342
+ }
343
+ }
344
+
345
+ function simulateAIResponse(question) {
346
+ const responses = [
347
+ `I'll help you with: <strong>"${question}"</strong><br><br>
348
+ Based on your question, here's what I recommend:<br>
349
+ 1. Understand the core concept<br>
350
+ 2. Review common patterns<br>
351
+ 3. Implement with best practices<br><br>
352
+ Would you like me to provide code examples or more detailed explanations?`,
353
+
354
+ `Great question! For <strong>"${question}"</strong>, the key considerations are:<br>
355
+ • Performance implications<br>
356
+ • Security best practices<br>
357
+ • Maintainability and readability<br><br>
358
+ I can generate sample code if you specify a programming language.`,
359
+
360
+ `Regarding <strong>"${question}"</strong>:<br><br>
361
+ This is a common challenge developers face. The solution typically involves:<br>
362
+ 1. Proper error handling<br>
363
+ 2. Efficient data structures<br>
364
+ 3. Following language-specific idioms<br><br>
365
+ Want me to dive deeper into any particular aspect?`
366
+ ];
367
+
368
+ return responses[Math.floor(Math.random() * responses.length)];
369
+ }
370
+
371
+ // Send message
372
+ sendButton.addEventListener('click', function() {
373
+ const question = userInput.value.trim();
374
+ if (!question) return;
375
+
376
+ // Add user message
377
+ addMessage(question, true);
378
+ userInput.value = '';
379
+
380
+ // Show thinking indicator
381
+ addThinkingIndicator();
382
+
383
+ // Simulate AI thinking
384
+ setTimeout(() => {
385
+ removeThinkingIndicator();
386
+
387
+ // Add AI response
388
+ const response = simulateAIResponse(question);
389
+ addMessage(response, false);
390
+
391
+ // Replace feather icons
392
+ feather.replace();
393
+ }, 1500 + Math.random() * 1000);
394
+ });
395
+
396
+ // Enter key to send
397
+ userInput.addEventListener('keypress', function(e) {
398
+ if (e.key === 'Enter' && !e.shiftKey) {
399
+ e.preventDefault();
400
+ sendButton.click();
401
+ }
402
+ });
403
+
404
+ // Quick question buttons
405
+ document.querySelectorAll('.quick-question-btn').forEach(btn => {
406
+ btn.addEventListener('click', function() {
407
+ userInput.value = this.textContent;
408
+ userInput.focus();
409
+ });
410
+ });
411
+
412
+ // Clear chat button
413
+ document.querySelector('button:has(i[data-feather="trash"])')?.addEventListener('click', function() {
414
+ if (confirm('Clear all chat messages?')) {
415
+ while (chatMessages.children.length > 1) {
416
+ chatMessages.removeChild(chatMessages.lastChild);
417
+ }
418
+ }
419
+ });
420
+ });
421
+ </script>
422
+ </body>
423
+ </html>
components/navbar.js CHANGED
@@ -107,14 +107,14 @@ class CustomNavbar extends HTMLElement {
107
  </button>
108
  <a href="index.html" class="logo">DevinAI</a>
109
  </div>
110
-
111
  <div class="nav-links">
112
  <a href="index.html" class="active">Dashboard</a>
113
  <a href="projects.html">Projects</a>
 
 
114
  <a href="settings.html">Settings</a>
115
  </div>
116
-
117
- <div class="user-menu">
118
  <div class="hidden md:flex items-center gap-2 text-gray-600">
119
  <i data-feather="bell"></i>
120
  </div>
 
107
  </button>
108
  <a href="index.html" class="logo">DevinAI</a>
109
  </div>
 
110
  <div class="nav-links">
111
  <a href="index.html" class="active">Dashboard</a>
112
  <a href="projects.html">Projects</a>
113
+ <a href="deepwiki.html">DeepWiki</a>
114
+ <a href="ask-devin.html">Ask Devin</a>
115
  <a href="settings.html">Settings</a>
116
  </div>
117
+ <div class="user-menu">
 
118
  <div class="hidden md:flex items-center gap-2 text-gray-600">
119
  <i data-feather="bell"></i>
120
  </div>
components/sidebar.js CHANGED
@@ -155,6 +155,10 @@ class CustomSidebar extends HTMLElement {
155
  <div class="menu-group">
156
  <div class="menu-title">AI Tools</div>
157
  <div class="menu-items">
 
 
 
 
158
  <a href="#" class="menu-item">
159
  <i data-feather="code"></i>
160
  Code Generation
@@ -172,16 +176,20 @@ class CustomSidebar extends HTMLElement {
172
  Optimization
173
  </a>
174
  </div>
175
- </div>
176
 
177
  <div class="menu-group">
178
  <div class="menu-title">Settings</div>
179
  <div class="menu-items">
 
 
 
 
180
  <a href="settings.html" class="menu-item">
181
  <i data-feather="settings"></i>
182
  General Settings
183
  </a>
184
- <a href="#" class="menu-item">
185
  <i data-feather="users"></i>
186
  Team Members
187
  </a>
 
155
  <div class="menu-group">
156
  <div class="menu-title">AI Tools</div>
157
  <div class="menu-items">
158
+ <a href="ask-devin.html" class="menu-item">
159
+ <i data-feather="message-square"></i>
160
+ Ask Devin
161
+ </a>
162
  <a href="#" class="menu-item">
163
  <i data-feather="code"></i>
164
  Code Generation
 
176
  Optimization
177
  </a>
178
  </div>
179
+ </div>
180
 
181
  <div class="menu-group">
182
  <div class="menu-title">Settings</div>
183
  <div class="menu-items">
184
+ <a href="deepwiki.html" class="menu-item">
185
+ <i data-feather="book"></i>
186
+ DeepWiki
187
+ </a>
188
  <a href="settings.html" class="menu-item">
189
  <i data-feather="settings"></i>
190
  General Settings
191
  </a>
192
+ <a href="#" class="menu-item">
193
  <i data-feather="users"></i>
194
  Team Members
195
  </a>
deepwiki.html ADDED
@@ -0,0 +1,337 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>DeepWiki - DevinAI Clone</title>
7
+ <link rel="stylesheet" href="style.css">
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
+ <link rel="preconnect" href="https://fonts.googleapis.com">
12
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
14
+ <style>
15
+ * {
16
+ font-family: 'Inter', sans-serif;
17
+ }
18
+ .code-font {
19
+ font-family: 'JetBrains Mono', monospace;
20
+ }
21
+ .wiki-article pre {
22
+ background: #1a202c;
23
+ color: #e2e8f0;
24
+ padding: 1.5rem;
25
+ border-radius: 0.5rem;
26
+ overflow-x: auto;
27
+ font-family: 'JetBrains Mono', monospace;
28
+ font-size: 0.875rem;
29
+ line-height: 1.5;
30
+ border-left: 4px solid #3b82f6;
31
+ }
32
+ </style>
33
+ </head>
34
+ <body class="bg-gray-50 min-h-screen">
35
+ <custom-navbar></custom-navbar>
36
+ <custom-sidebar></custom-sidebar>
37
+
38
+ <main class="ml-0 md:ml-64 pt-16 px-4 md:px-8 pb-8">
39
+ <div class="max-w-6xl mx-auto">
40
+ <!-- Header Section -->
41
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 mt-6">
42
+ <div>
43
+ <h1 class="text-3xl md:text-4xl font-bold text-gray-900">DeepWiki</h1>
44
+ <p class="text-gray-600 mt-2">AI-powered knowledge base for developers</p>
45
+ </div>
46
+ <div class="mt-4 md:mt-0">
47
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold flex items-center shadow-lg hover:shadow-xl transition-all duration-300" id="ask-devin-wiki-btn">
48
+ <i data-feather="message-square" class="w-5 h-5 mr-2"></i>
49
+ Ask Devin
50
+ </button>
51
+ </div>
52
+ </div>
53
+
54
+ <!-- Search Bar -->
55
+ <div class="bg-white rounded-xl shadow-lg border border-gray-200 p-4 mb-8">
56
+ <div class="flex items-center">
57
+ <i data-feather="search" class="w-5 h-5 text-gray-400 ml-3"></i>
58
+ <input type="text" placeholder="Search DeepWiki for concepts, frameworks, APIs, or best practices..."
59
+ class="flex-1 ml-4 px-4 py-3 border-0 focus:outline-none focus:ring-0 text-gray-700" id="wiki-search">
60
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium flex items-center ml-4">
61
+ <i data-feather="search" class="w-5 h-5 mr-2"></i>
62
+ Search
63
+ </button>
64
+ </div>
65
+ </div>
66
+
67
+ <!-- Main Content -->
68
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
69
+ <!-- Left Column - Categories -->
70
+ <div class="lg:col-span-1">
71
+ <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
72
+ <div class="px-6 py-4 border-b border-gray-200">
73
+ <h2 class="text-xl font-bold text-gray-900 flex items-center">
74
+ <i data-feather="folder" class="w-5 h-5 mr-2 text-blue-600"></i>
75
+ Categories
76
+ </h2>
77
+ </div>
78
+ <div class="p-4">
79
+ <ul class="space-y-2">
80
+ <li><a href="#" class="flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700"><i data-feather="code" class="w-4 h-4 mr-3"></i> Programming Languages</a></li>
81
+ <li><a href="#" class="flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700"><i data-feather="layers" class="w-4 h-4 mr-3"></i> Frameworks & Libraries</a></li>
82
+ <li><a href="#" class="flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700"><i data-feather="database" class="w-4 h-4 mr-3"></i> Databases</a></li>
83
+ <li><a href="#" class="flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700"><i data-feather="cloud" class="w-4 h-4 mr-3"></i> DevOps & Cloud</a></li>
84
+ <li><a href="#" class="flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700"><i data-feather="shield" class="w-4 h-4 mr-3"></i> Security</a></li>
85
+ <li><a href="#" class="flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700"><i data-feather="cpu" class="w-4 h-4 mr-3"></i> AI & Machine Learning</a></li>
86
+ <li><a href="#" class="flex items-center p-3 hover:bg-gray-50 rounded-lg text-gray-700"><i data-feather="smartphone" class="w-4 h-4 mr-3"></i> Mobile Development</a></li>
87
+ </ul>
88
+ </div>
89
+ </div>
90
+
91
+ <!-- Recent Articles -->
92
+ <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden mt-8">
93
+ <div class="px-6 py-4 border-b border-gray-200">
94
+ <h2 class="text-xl font-bold text-gray-900 flex items-center">
95
+ <i data-feather="clock" class="w-5 h-5 mr-2 text-green-600"></i>
96
+ Recent Articles
97
+ </h2>
98
+ </div>
99
+ <div class="p-4">
100
+ <div class="space-y-4">
101
+ <div class="border-l-4 border-blue-500 pl-4 py-2">
102
+ <h4 class="font-semibold text-gray-900">React Hooks Best Practices</h4>
103
+ <p class="text-sm text-gray-500">Updated 2 days ago</p>
104
+ </div>
105
+ <div class="border-l-4 border-green-500 pl-4 py-2">
106
+ <h4 class="font-semibold text-gray-900">REST vs GraphQL APIs</h4>
107
+ <p class="text-sm text-gray-500">Updated 1 week ago</p>
108
+ </div>
109
+ <div class="border-l-4 border-purple-500 pl-4 py-2">
110
+ <h4 class="font-semibold text-gray-900">Docker Containerization Guide</h4>
111
+ <p class="text-sm text-gray-500">Updated 3 weeks ago</p>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+ </div>
117
+
118
+ <!-- Right Column - Wiki Article -->
119
+ <div class="lg:col-span-2">
120
+ <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
121
+ <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center">
122
+ <h2 class="text-xl font-bold text-gray-900 flex items-center">
123
+ <i data-feather="book" class="w-5 h-5 mr-2 text-purple-600"></i>
124
+ React Hooks Deep Dive
125
+ </h2>
126
+ <span class="bg-blue-100 text-blue-800 text-xs font-semibold px-3 py-1 rounded-full">AI Verified</span>
127
+ </div>
128
+ <div class="p-6 wiki-article">
129
+ <div class="prose max-w-none">
130
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">Introduction to React Hooks</h3>
131
+ <p class="text-gray-700 mb-4">React Hooks are functions that let you use state and other React features without writing a class. They were introduced in React 16.8 and have become the standard way to write React components.</p>
132
+
133
+ <div class="bg-blue-50 border-l-4 border-blue-500 p-4 my-6">
134
+ <div class="flex">
135
+ <i data-feather="info" class="w-5 h-5 text-blue-500 mr-3"></i>
136
+ <div>
137
+ <p class="font-semibold text-blue-800">AI Insight</p>
138
+ <p class="text-blue-700">Hooks solve problems of wrapper hell, complex lifecycle methods, and confusing class components.</p>
139
+ </div>
140
+ </div>
141
+ </div>
142
+
143
+ <h4 class="text-xl font-bold text-gray-900 mt-6 mb-3">Basic Hooks</h4>
144
+ <ul class="list-disc pl-5 text-gray-700 mb-6">
145
+ <li><strong>useState</strong> - Adds state to functional components</li>
146
+ <li><strong>useEffect</strong> - Performs side effects in functional components</li>
147
+ <li><strong>useContext</strong> - Accesses React context without nesting</li>
148
+ </ul>
149
+
150
+ <h4 class="text-xl font-bold text-gray-900 mt-6 mb-3">Code Example</h4>
151
+ <pre>import React, { useState, useEffect } from 'react';
152
+
153
+ function Counter() {
154
+ const [count, setCount] = useState(0);
155
+
156
+ useEffect(() => {
157
+ // Update document title with count
158
+ document.title = `You clicked ${count} times`;
159
+
160
+ // Cleanup function
161
+ return () => {
162
+ document.title = 'React App';
163
+ };
164
+ }, [count]); // Only re-run if count changes
165
+
166
+ return (
167
+ &lt;div&gt;
168
+ &lt;p&gt;You clicked {count} times&lt;/p&gt;
169
+ &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
170
+ Click me
171
+ &lt;/button&gt;
172
+ &lt;/div&gt;
173
+ );
174
+ }
175
+
176
+ export default Counter;</pre>
177
+
178
+ <div class="mt-8 p-4 bg-gray-50 rounded-lg">
179
+ <div class="flex items-center mb-4">
180
+ <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center">
181
+ <i data-feather="cpu" class="w-5 h-5 text-white"></i>
182
+ </div>
183
+ <div class="ml-4">
184
+ <p class="font-semibold text-gray-900">DevinAI Note</p>
185
+ <p class="text-gray-600">This article was AI-generated and verified for accuracy. Use the "Ask Devin" button for specific questions.</p>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+
193
+ <!-- Related Articles -->
194
+ <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden mt-8">
195
+ <div class="px-6 py-4 border-b border-gray-200">
196
+ <h2 class="text-xl font-bold text-gray-900 flex items-center">
197
+ <i data-feather="link" class="w-5 h-5 mr-2 text-orange-600"></i>
198
+ Related Articles
199
+ </h2>
200
+ </div>
201
+ <div class="p-6">
202
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
203
+ <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50">
204
+ <h4 class="font-semibold text-gray-900">React Context API</h4>
205
+ <p class="text-sm text-gray-500 mt-1">State management without prop drilling</p>
206
+ <a href="#" class="text-blue-600 text-sm mt-2 inline-block">Read →</a>
207
+ </div>
208
+ <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50">
209
+ <h4 class="font-semibold text-gray-900">Custom Hooks</h4>
210
+ <p class="text-sm text-gray-500 mt-1">Building reusable hook logic</p>
211
+ <a href="#" class="text-blue-600 text-sm mt-2 inline-block">Read →</a>
212
+ </div>
213
+ <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50">
214
+ <h4 class="font-semibold text-gray-900">Performance Optimization</h4>
215
+ <p class="text-sm text-gray-500 mt-1">useMemo, useCallback, and React.memo</p>
216
+ <a href="#" class="text-blue-600 text-sm mt-2 inline-block">Read →</a>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </main>
225
+
226
+ <!-- Ask Devin Modal -->
227
+ <div id="ask-devin-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
228
+ <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
229
+ <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"></div>
230
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen">&#8203;</span>
231
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
232
+ <div class="bg-gradient-to-r from-blue-600 to-purple-600 px-6 py-4">
233
+ <h3 class="text-lg font-bold text-white">Ask Devin AI Assistant</h3>
234
+ </div>
235
+ <div class="bg-white px-6 py-4">
236
+ <div class="mb-4">
237
+ <p class="text-gray-600 mb-4">Ask any coding question, and Devin will provide detailed explanations with code examples.</p>
238
+ <textarea id="ask-devin-question" rows="4" class="w-full border border-gray-300 rounded-lg p-3 focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="E.g., How do I implement authentication in React with JWT?"></textarea>
239
+ </div>
240
+ <div class="flex justify-end space-x-3">
241
+ <button id="close-modal" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50">Cancel</button>
242
+ <button id="submit-question" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Ask Devin</button>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <custom-footer></custom-footer>
250
+
251
+ <script src="components/navbar.js"></script>
252
+ <script src="components/sidebar.js"></script>
253
+ <script src="components/footer.js"></script>
254
+ <script src="script.js"></script>
255
+ <script>
256
+ feather.replace();
257
+
258
+ // Update active state in sidebar
259
+ document.addEventListener('DOMContentLoaded', function() {
260
+ const sidebarLinks = document.querySelector('custom-sidebar').shadowRoot.querySelectorAll('.menu-item');
261
+ sidebarLinks.forEach(link => {
262
+ link.classList.remove('active');
263
+ if (link.href && link.href.includes('deepwiki.html')) {
264
+ link.classList.add('active');
265
+ }
266
+ });
267
+
268
+ // Add DeepWiki to sidebar
269
+ const sidebar = document.querySelector('custom-sidebar');
270
+ if (sidebar) {
271
+ const sidebarContent = sidebar.shadowRoot.querySelector('.sidebar .menu-items:last-child');
272
+ if (sidebarContent) {
273
+ const wikiLink = document.createElement('a');
274
+ wikiLink.className = 'menu-item';
275
+ wikiLink.href = 'deepwiki.html';
276
+ wikiLink.innerHTML = '<i data-feather="book"></i> DeepWiki';
277
+ sidebarContent.parentNode.insertBefore(wikiLink, sidebarContent);
278
+ }
279
+ }
280
+
281
+ // Ask Devin Modal
282
+ const modal = document.getElementById('ask-devin-modal');
283
+ const openBtn = document.getElementById('ask-devin-wiki-btn');
284
+ const closeBtn = document.getElementById('close-modal');
285
+ const submitBtn = document.getElementById('submit-question');
286
+
287
+ if (openBtn) {
288
+ openBtn.addEventListener('click', () => {
289
+ modal.classList.remove('hidden');
290
+ modal.classList.add('block');
291
+ });
292
+ }
293
+
294
+ if (closeBtn) {
295
+ closeBtn.addEventListener('click', () => {
296
+ modal.classList.remove('block');
297
+ modal.classList.add('hidden');
298
+ });
299
+ }
300
+
301
+ if (submitBtn) {
302
+ submitBtn.addEventListener('click', () => {
303
+ const question = document.getElementById('ask-devin-question').value.trim();
304
+ if (question) {
305
+ // In a real app, this would call an API
306
+ alert(`DevinAI received your question: "${question}"\n\nAnswer would appear here in a real implementation.`);
307
+ modal.classList.remove('block');
308
+ modal.classList.add('hidden');
309
+ document.getElementById('ask-devin-question').value = '';
310
+ }
311
+ });
312
+ }
313
+
314
+ // Close modal on background click
315
+ modal.addEventListener('click', (e) => {
316
+ if (e.target === modal) {
317
+ modal.classList.remove('block');
318
+ modal.classList.add('hidden');
319
+ }
320
+ });
321
+
322
+ // Search functionality
323
+ const searchInput = document.getElementById('wiki-search');
324
+ if (searchInput) {
325
+ searchInput.addEventListener('keypress', (e) => {
326
+ if (e.key === 'Enter') {
327
+ const query = searchInput.value.trim();
328
+ if (query) {
329
+ alert(`Searching DeepWiki for: "${query}"\n\nResults would appear here in a real implementation.`);
330
+ }
331
+ }
332
+ });
333
+ }
334
+ });
335
+ </script>
336
+ </body>
337
+ </html>
index.html CHANGED
@@ -33,11 +33,17 @@
33
  <p class="text-gray-600 mt-2">Your AI coding assistant is ready to help you build amazing things</p>
34
  </div>
35
  <div class="mt-4 md:mt-0">
36
- <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold flex items-center shadow-lg hover:shadow-xl transition-all duration-300">
37
- <i data-feather="plus" class="w-5 h-5 mr-2"></i>
38
- New Project
39
- </button>
40
- </div>
 
 
 
 
 
 
41
  </div>
42
 
43
  <!-- Stats Grid -->
@@ -127,11 +133,17 @@
127
  </div>
128
  </div>
129
  <div class="mt-6 text-center">
130
- <a href="projects.html" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center">
131
- See all projects
132
- <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
133
- </a>
134
- </div>
 
 
 
 
 
 
135
  </div>
136
  </div>
137
 
 
33
  <p class="text-gray-600 mt-2">Your AI coding assistant is ready to help you build amazing things</p>
34
  </div>
35
  <div class="mt-4 md:mt-0">
36
+ <div class="flex gap-3">
37
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold flex items-center shadow-lg hover:shadow-xl transition-all duration-300">
38
+ <i data-feather="plus" class="w-5 h-5 mr-2"></i>
39
+ New Project
40
+ </button>
41
+ <a href="deepwiki.html" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-semibold flex items-center shadow-lg hover:shadow-xl transition-all duration-300">
42
+ <i data-feather="book" class="w-5 h-5 mr-2"></i>
43
+ DeepWiki
44
+ </a>
45
+ </div>
46
+ </div>
47
  </div>
48
 
49
  <!-- Stats Grid -->
 
133
  </div>
134
  </div>
135
  <div class="mt-6 text-center">
136
+ <div class="flex justify-center space-x-4">
137
+ <a href="projects.html" class="text-blue-600 hover:text-blue-800 font-medium inline-flex items-center">
138
+ See all projects
139
+ <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
140
+ </a>
141
+ <a href="ask-devin.html" class="text-purple-600 hover:text-purple-800 font-medium inline-flex items-center">
142
+ Ask Devin AI
143
+ <i data-feather="message-square" class="w-4 h-4 ml-1"></i>
144
+ </a>
145
+ </div>
146
+ </div>
147
  </div>
148
  </div>
149
 
style.css CHANGED
@@ -77,7 +77,6 @@ pre.code-block {
77
  .pulse-slow {
78
  animation: pulse-slow 2s infinite;
79
  }
80
-
81
  /* Custom Button Styles */
82
  .btn-primary {
83
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
@@ -95,6 +94,62 @@ pre.code-block {
95
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
96
  }
97
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98
  .btn-outline {
99
  background: transparent;
100
  color: var(--primary-color);
 
77
  .pulse-slow {
78
  animation: pulse-slow 2s infinite;
79
  }
 
80
  /* Custom Button Styles */
81
  .btn-primary {
82
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
 
94
  box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
95
  }
96
 
97
+ /* Chat styles */
98
+ .chat-container {
99
+ display: flex;
100
+ flex-direction: column;
101
+ height: 100%;
102
+ }
103
+
104
+ .chat-messages {
105
+ flex: 1;
106
+ overflow-y: auto;
107
+ padding: 1rem;
108
+ }
109
+
110
+ .chat-input {
111
+ border-top: 1px solid #e5e7eb;
112
+ padding: 1rem;
113
+ }
114
+
115
+ .message {
116
+ max-width: 80%;
117
+ margin-bottom: 1rem;
118
+ padding: 0.75rem 1rem;
119
+ }
120
+
121
+ .message-user {
122
+ margin-left: auto;
123
+ background: linear-gradient(135deg, #3b82f6, #6366f1);
124
+ color: white;
125
+ border-radius: 1rem 1rem 0.25rem 1rem;
126
+ }
127
+
128
+ .message-ai {
129
+ background: #f3f4f6;
130
+ color: #1f2937;
131
+ border-radius: 1rem 1rem 1rem 0.25rem;
132
+ }
133
+
134
+ /* Modal styles */
135
+ .modal-overlay {
136
+ position: fixed;
137
+ inset: 0;
138
+ background-color: rgba(0, 0, 0, 0.5);
139
+ display: flex;
140
+ align-items: center;
141
+ justify-content: center;
142
+ z-index: 50;
143
+ }
144
+
145
+ .modal-content {
146
+ background: white;
147
+ border-radius: 0.5rem;
148
+ max-width: 32rem;
149
+ width: 100%;
150
+ max-height: 90vh;
151
+ overflow-y: auto;
152
+ }
153
  .btn-outline {
154
  background: transparent;
155
  color: var(--primary-color);