Spaces:
Running
Running
| <html lang="en" class="h-full"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="theme-color" content="#6366f1"> | |
| <title>SinapsisAI Chat</title> | |
| <link rel="manifest" href="/manifest.json"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| }, | |
| secondary: { | |
| 50: '#f5f3ff', | |
| 100: '#ede9fe', | |
| 200: '#ddd6fe', | |
| 300: '#c4b5fd', | |
| 400: '#a78bfa', | |
| 500: '#8b5cf6', | |
| 600: '#7c3aed', | |
| 700: '#6d28d9', | |
| 800: '#5b21b6', | |
| 900: '#4c1d95', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| :root { | |
| --bg: #ffffff; | |
| --bg-soft: #f9fafb; | |
| --text: #111827; | |
| --muted: #6b7280; | |
| --primary: #0ea5e9; | |
| --accent: #8b5cf6; | |
| --border: #e5e7eb; | |
| --ring: #93c5fd; | |
| --success: #10b981; | |
| --warning: #f59e0b; | |
| --danger: #ef4444; | |
| --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); | |
| } | |
| .dark { | |
| --bg: #0f172a; | |
| --bg-soft: #1e293b; | |
| --text: #f8fafc; | |
| --muted: #94a3b8; | |
| --primary: #7dd3fc; | |
| --accent: #a78bfa; | |
| --border: #334155; | |
| --ring: #1e40af; | |
| --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.5); | |
| } | |
| body { | |
| background-color: var(--bg); | |
| color: var(--text); | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| } | |
| .chat-bubble-user { | |
| background-color: var(--primary); | |
| color: white; | |
| border-radius: 1.25rem 1.25rem 0.25rem 1.25rem; | |
| } | |
| .chat-bubble-assistant { | |
| background-color: var(--bg-soft); | |
| color: var(--text); | |
| border-radius: 1.25rem 1.25rem 1.25rem 0.25rem; | |
| border: 1px solid var(--border); | |
| } | |
| .typewriter { | |
| border-right: 2px solid var(--primary); | |
| animation: blink 1s step-end infinite; | |
| } | |
| @keyframes blink { | |
| from, to { border-color: transparent } | |
| 50% { border-color: var(--primary) } | |
| } | |
| .safe-area-bottom { | |
| padding-bottom: env(safe-area-inset-bottom); | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="h-full flex flex-col dark:bg-gray-900 transition-colors duration-200"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-10 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 px-4 py-3 flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <button id="sidebar-toggle" class="md:hidden text-gray-600 dark:text-gray-400"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| <h1 class="text-lg font-semibold text-gray-900 dark:text-white">SinapsisAI</h1> | |
| <div class="hidden md:flex items-center ml-4 space-x-1"> | |
| <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span> | |
| <span class="text-sm text-gray-500 dark:text-gray-400">Connected</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800"> | |
| <i data-feather="bell"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800"> | |
| <i data-feather="settings"></i> | |
| </button> | |
| <div class="relative"> | |
| <button id="user-menu-button" class="flex items-center space-x-2 group"> | |
| <div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center text-white font-medium group-hover:from-primary-600 group-hover:to-secondary-600 transition-all">SA</div> | |
| </button> | |
| <div id="user-menu" class="hidden absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-20 overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 dark:border-gray-700"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center text-white font-medium">SA</div> | |
| <div> | |
| <p class="font-medium">SinapsisAI Pro</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">pro@sinapsisai.com</p> | |
| </div> | |
| </div> | |
| <div class="mt-3 space-y-2"> | |
| <div class="flex justify-between text-xs"> | |
| <span class="text-gray-500 dark:text-gray-400">Plan Usage</span> | |
| <span>50/500 requests</span> | |
| </div> | |
| <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5"> | |
| <div class="bg-primary-500 h-1.5 rounded-full" style="width: 10%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-2"> | |
| <div class="grid grid-cols-2 gap-2 mb-2"> | |
| <div class="p-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-center"> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Tokens Used</p> | |
| <p class="font-medium">1,245</p> | |
| </div> | |
| <div class="p-2 bg-gray-100 dark:bg-gray-700 rounded-lg text-center"> | |
| <p class="text-xs text-gray-500 dark:text-gray-400">Next Billing</p> | |
| <p class="font-medium">May 15</p> | |
| </div> | |
| </div> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="user" class="w-4 h-4 mr-2"></i> Profile & Account | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="credit-card" class="w-4 h-4 mr-2"></i> Billing & Invoices | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="key" class="w-4 h-4 mr-2"></i> API Keys | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="cpu" class="w-4 h-4 mr-2"></i> Models & Add-ons | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="database" class="w-4 h-4 mr-2"></i> Data Controls | |
| </a> | |
| <div class="border-t border-gray-200 dark:border-gray-700 my-1"></div> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="settings" class="w-4 h-4 mr-2"></i> Settings | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="command" class="w-4 h-4 mr-2"></i> Keyboard Shortcuts | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="help-circle" class="w-4 h-4 mr-2"></i> Help & Support | |
| </a> | |
| <div class="border-t border-gray-200 dark:border-gray-700 my-1"></div> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 text-red-500 dark:text-red-400"> | |
| <i data-feather="log-out" class="w-4 h-4 mr-2"></i> Sign Out | |
| </a> | |
| </div> | |
| <div class="p-3 bg-gray-100 dark:bg-gray-700/50 text-xs text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700"> | |
| <div class="flex justify-between items-center"> | |
| <span>Version 2.4.1</span> | |
| <button class="text-primary-500 hover:text-primary-600">Changelog</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="flex flex-1 overflow-hidden"> | |
| <!-- Sidebar --> | |
| <aside id="sidebar" class="hidden md:block w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex-shrink-0 overflow-y-auto"> | |
| <div class="p-4"> | |
| <button class="w-full flex items-center justify-center space-x-2 bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg transition-colors"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| <span>New Chat</span> | |
| </button> | |
| <div class="mt-6"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search chats..." class="w-full pl-10 pr-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Today</h3> | |
| <div class="space-y-1"> | |
| <a href="#" class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 group"> | |
| <div class="flex-1 truncate"> | |
| <p class="text-sm font-medium truncate">AI Research Assistant</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 truncate">Can you summarize this paper...</p> | |
| </div> | |
| <span class="text-xs text-gray-400">12:45</span> | |
| </a> | |
| <a href="#" class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 group"> | |
| <div class="flex-1 truncate"> | |
| <p class="text-sm font-medium truncate">Code Debugging</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 truncate">Why is this React component...</p> | |
| </div> | |
| <span class="text-xs text-gray-400">10:30</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Yesterday</h3> | |
| <div class="space-y-1"> | |
| <a href="#" class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 group"> | |
| <div class="flex-1 truncate"> | |
| <p class="text-sm font-medium truncate">Content Strategy</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 truncate">Ideas for blog posts about...</p> | |
| </div> | |
| <span class="text-xs text-gray-400">18:20</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Previous 7 Days</h3> | |
| <div class="space-y-1"> | |
| <a href="#" class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 group"> | |
| <div class="flex-1 truncate"> | |
| <p class="text-sm font-medium truncate">Marketing Copy</p> | |
| <p class="text-xs text-gray-500 dark:text-gray-400 truncate">Write a tagline for our new...</p> | |
| </div> | |
| <span class="text-xs text-gray-400">Tue</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-4 border-t border-gray-200 dark:border-gray-800"> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="play" class="w-4 h-4 mr-2"></i> Playground | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="database" class="w-4 h-4 mr-2"></i> Datasets | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="box" class="w-4 h-4 mr-2"></i> Vector DB | |
| </a> | |
| <a href="#" class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i data-feather="zap" class="w-4 h-4 mr-2"></i> Workflows | |
| </a> | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- Chat Area --> | |
| <main class="flex-1 flex flex-col overflow-hidden bg-gray-50 dark:bg-gray-950"> | |
| <!-- Messages --> | |
| <div id="messages" class="flex-1 overflow-y-auto p-4 space-y-6 scrollbar-hide"> | |
| <div class="flex justify-start"> | |
| <div class="max-w-[85%] md:max-w-[75%] lg:max-w-[65%]"> | |
| <div class="chat-bubble-assistant p-4"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <div class="w-6 h-6 rounded-full bg-secondary-500 flex items-center justify-center text-white text-xs font-medium">AI</div> | |
| <span class="text-xs font-medium">SinapsisAI</span> | |
| </div> | |
| <p class="text-sm">Hello! I'm SinapsisAI, your intelligent assistant. How can I help you today?</p> | |
| <div class="flex items-center justify-end space-x-2 mt-3 text-xs text-gray-500 dark:text-gray-400"> | |
| <span>12:45 PM</span> | |
| <button class="hover:text-primary-500"> | |
| <i data-feather="copy" class="w-3 h-3"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-end"> | |
| <div class="max-w-[85%] md:max-w-[75%] lg:max-w-[65%]"> | |
| <div class="chat-bubble-user p-4"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <div class="w-6 h-6 rounded-full bg-primary-500 flex items-center justify-center text-white text-xs font-medium">Y</div> | |
| <span class="text-xs font-medium text-white/90">You</span> | |
| </div> | |
| <p class="text-sm text-white">Can you explain how neural networks work in simple terms?</p> | |
| <div class="flex items-center justify-end space-x-2 mt-3 text-xs text-white/70"> | |
| <span>12:46 PM</span> | |
| <button class="hover:text-white"> | |
| <i data-feather="edit" class="w-3 h-3"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-start"> | |
| <div class="max-w-[85%] md:max-w-[75%] lg:max-w-[65%]"> | |
| <div class="chat-bubble-assistant p-4"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <div class="w-6 h-6 rounded-full bg-secondary-500 flex items-center justify-center text-white text-xs font-medium">AI</div> | |
| <span class="text-xs font-medium">SinapsisAI</span> | |
| </div> | |
| <p class="text-sm">Sure! Think of a neural network like a team of workers in a factory:</p> | |
| <ol class="text-sm list-decimal list-inside space-y-1 mt-2 ml-2"> | |
| <li>Each worker (neuron) specializes in one small task</li> | |
| <li>They pass their work to the next station (layer)</li> | |
| <li>The final product gets better as the team learns from mistakes</li> | |
| </ol> | |
| <div class="mt-3 p-3 bg-gray-100 dark:bg-gray-800 rounded-lg"> | |
| <div class="flex items-center space-x-2 text-xs text-gray-600 dark:text-gray-300"> | |
| <i data-feather="bookmark" class="w-3 h-3"></i> | |
| <span>Source: Deep Learning Simplified (2023)</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-end space-x-2 mt-3 text-xs text-gray-500 dark:text-gray-400"> | |
| <span>12:47 PM</span> | |
| <button class="hover:text-primary-500"> | |
| <i data-feather="copy" class="w-3 h-3"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-start"> | |
| <div class="max-w-[85%] md:max-w-[75%] lg:max-w-[65%]"> | |
| <div class="chat-bubble-assistant p-4"> | |
| <div class="flex items-center space-x-2 mb-2"> | |
| <div class="w-6 h-6 rounded-full bg-secondary-500 flex items-center justify-center text-white text-xs font-medium">AI</div> | |
| <span class="text-xs font-medium">SinapsisAI</span> | |
| </div> | |
| <p class="text-sm">Would you like me to explain any specific type of neural network or provide examples?</p> | |
| <div class="flex items-center justify-end space-x-2 mt-3 text-xs text-gray-500 dark:text-gray-400"> | |
| <span>12:48 PM</span> | |
| <button class="hover:text-primary-500"> | |
| <i data-feather="copy" class="w-3 h-3"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Composer --> | |
| <div class="sticky bottom-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 px-4 py-3 safe-area-bottom"> | |
| <div class="flex items-end space-x-2"> | |
| <button class="p-2 rounded-full text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800"> | |
| <i data-feather="plus"></i> | |
| </button> | |
| <div class="flex-1 relative"> | |
| <textarea | |
| id="message-input" | |
| rows="1" | |
| placeholder="Ask anything..." | |
| class="w-full max-h-32 min-h-[40px] px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none" | |
| style="scrollbar-width: none;" | |
| ></textarea> | |
| <div class="absolute right-2 bottom-2 flex space-x-1"> | |
| <button class="p-1 text-gray-500 hover:text-primary-500"> | |
| <i data-feather="mic" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button id="send-button" class="p-2 rounded-full bg-primary-500 text-white hover:bg-primary-600 disabled:opacity-50 disabled:cursor-not-allowed"> | |
| <i data-feather="send" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between mt-2 px-1"> | |
| <div class="flex space-x-1"> | |
| <button class="text-xs px-2 py-1 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center"> | |
| <i data-feather="search" class="w-3 h-3 mr-1"></i> | |
| <span>Research</span> | |
| </button> | |
| <button class="text-xs px-2 py-1 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center"> | |
| <i data-feather="image" class="w-3 h-3 mr-1"></i> | |
| <span>Image</span> | |
| </button> | |
| </div> | |
| <div class="text-xs text-gray-500 dark:text-gray-400"> | |
| <span id="char-count">0</span>/2000 | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Auto-resize textarea | |
| const textarea = document.getElementById('message-input'); | |
| textarea.addEventListener('input', function() { | |
| this.style.height = 'auto'; | |
| this.style.height = (this.scrollHeight) + 'px'; | |
| // Update character count | |
| document.getElementById('char-count').textContent = this.value.length; | |
| }); | |
| // Toggle send button state | |
| textarea.addEventListener('input', function() { | |
| const sendButton = document.getElementById('send-button'); | |
| sendButton.disabled = this.value.trim().length === 0; | |
| }); | |
| // Handle send message | |
| document.getElementById('send-button').addEventListener('click', function() { | |
| const message = textarea.value.trim(); | |
| if (message) { | |
| // TODO: Send message logic | |
| console.log('Sending:', message); | |
| textarea.value = ''; | |
| textarea.style.height = 'auto'; | |
| document.getElementById('char-count').textContent = '0'; | |
| this.disabled = true; | |
| } | |
| }); | |
| // Handle Enter to send, Shift+Enter for newline | |
| textarea.addEventListener('keydown', function(e) { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| document.getElementById('send-button').click(); | |
| } | |
| }); | |
| // Toggle sidebar on mobile | |
| document.getElementById('sidebar-toggle').addEventListener('click', function() { | |
| document.getElementById('sidebar').classList.toggle('hidden'); | |
| }); | |
| // Toggle user menu | |
| document.getElementById('user-menu-button').addEventListener('click', function() { | |
| document.getElementById('user-menu').classList.toggle('hidden'); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |