Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nixaut Copilot - Advanced AI Assistant</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🤖</text></svg>"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); | |
| * { font-family: 'Inter', sans-serif; } | |
| .gradient-shift { animation: gradientShift 8s ease-in-out infinite; } | |
| @keyframes gradientShift { | |
| 0%, 100% { background: rgb(17, 24, 39); } | |
| 50% { background: rgb(9, 9, 11); } | |
| } | |
| .typing-indicator span { animation: typing 1.4s infinite; } | |
| .typing-indicator span:nth-child(2) { animation-delay: 0.2s; } | |
| .typing-indicator span:nth-child(3) { animation-delay: 0.4s; } | |
| @keyframes typing { | |
| 0%, 60%, 100% { transform: translateY(0); opacity: 0.7; } | |
| 30% { transform: translateY(-10px); opacity: 1; } | |
| } | |
| .scroll-smooth { scroll-behavior: smooth; } | |
| .noise { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0.02; | |
| z-index: 1; | |
| pointer-events: none; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); | |
| } | |
| .glow { | |
| box-shadow: 0 0 20px rgba(255, 255, 255, 0.1), | |
| 0 0 40px rgba(255, 255, 255, 0.05), | |
| 0 0 60px rgba(255, 255, 255, 0.03); | |
| } | |
| .message-slide-in { | |
| animation: slideInFade 0.3s ease-out; | |
| } | |
| @keyframes slideInFade { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-zinc-950 text-white min-h-screen gradient-shift relative overflow-hidden"> | |
| <div class="noise"></div> | |
| <!-- Main Container --> | |
| <div class="flex h-screen relative z-10"> | |
| <custom-sidebar></custom-sidebar> | |
| <!-- Main Chat Area --> | |
| <main class="flex-1 flex flex-col bg-zinc-950 relative overflow-hidden max-h-screen" style="margin-left: 260px;"> | |
| <!-- Messages Container --> | |
| <div id="chatContainer" class="flex-1 overflow-y-auto scroll-smooth p-4 space-y-4" style="scrollbar-width: thin; scrollbar-color: #525252 #18181b;"> | |
| <!-- AI Welcome Message --> | |
| <div class="flex items-start gap-3 message-slide-in group"> | |
| <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-zinc-800 to-zinc-900 flex items-center justify-center flex-shrink-0 ring-1 ring-zinc-800/50 group-hover:ring-zinc-700/50 transition-all duration-200"> | |
| <i data-feather="cpu" class="w-4.5 h-4.5 text-zinc-300"></i> | |
| </div> | |
| <div class="flex-1 max-w-4xl"> | |
| <div class="bg-zinc-900/60 backdrop-blur-sm rounded-2xl p-4 border border-zinc-800/50 hover:border-zinc-700/50 transition-all duration-200"> | |
| <p class="text-white text-sm leading-relaxed">Hello!</p> | |
| <p class="text-zinc-400 text-sm mt-2 leading-relaxed">How can I help you today?</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="typingIndicator" class="hidden flex items-start gap-3 message-slide-in group"> | |
| <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-zinc-800 to-zinc-900 flex items-center justify-center flex-shrink-0 ring-1 ring-zinc-800/50 group-hover:ring-zinc-700/50 transition-all duration-200"> | |
| <i data-feather="cpu" class="w-4.5 h-4.5 text-zinc-300"></i> | |
| </div> | |
| <div class="flex-1 max-w-4xl"> | |
| <div class="bg-zinc-900/60 backdrop-blur-sm rounded-2xl p-4 border border-zinc-800/50 hover:border-zinc-700/50 transition-all duration-200"> | |
| <div class="typing-indicator flex space-x-1"> | |
| <span class="w-2 h-2 bg-zinc-400 rounded-full"></span> | |
| <span class="w-2 h-2 bg-zinc-400 rounded-full"></span> | |
| <span class="w-2 h-2 bg-zinc-400 rounded-full"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Advanced Input Area --> | |
| <div class="bg-zinc-900/40 backdrop-blur-xl border-t border-zinc-800/60 p-6 mt-auto"> | |
| <!-- Model Selection & Tokens Bar --> | |
| <div class="mb-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <!-- Model Selector --> | |
| <div id="modelDropdown" class="relative"> | |
| <button onclick="toggleModelDropdown()" class="flex items-center space-x-2 bg-zinc-800/60 hover:bg-zinc-800/80 border border-zinc-700/50 hover:border-zinc-600/50 rounded-lg px-3 py-2 text-sm text-white transition-all duration-200"> | |
| <div id="modelIndicator" class="w-2 h-2 bg-white rounded-full"></div> | |
| <span id="selectedModelText" class="font-medium">Max</span> | |
| <svg class="w-4 h-4 text-zinc-400 transition-transform" id="modelDropdownArrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M6 9l6 6 6-6"/> | |
| </svg> | |
| </button> | |
| <div id="modelDropdownMenu" class="hidden absolute bottom-full left-0 mb-2 bg-zinc-900 border border-zinc-700 rounded-lg shadow-2xl z-50 min-w-[200px]"> | |
| <div onclick="selectModel('Max')" class="px-3 py-2 text-white hover:bg-zinc-800 cursor-pointer transition-colors duration-150 flex items-center space-x-2"> | |
| <div class="w-2 h-2 bg-white rounded-full"></div> | |
| <div> | |
| <div class="font-medium text-sm">Max</div> | |
| <div class="text-xs text-zinc-400">Most capable</div> | |
| </div> | |
| </div> | |
| <div onclick="selectModel('Turbo')" class="px-3 py-2 text-white hover:bg-zinc-800 cursor-pointer transition-colors duration-150 flex items-center space-x-2"> | |
| <div class="w-2 h-2 bg-zinc-400 rounded-full"></div> | |
| <div> | |
| <div class="font-medium text-sm">Turbo</div> | |
| <div class="text-xs text-zinc-400">Fast response</div> | |
| </div> | |
| </div> | |
| <div onclick="selectModel('Lite')" class="px-3 py-2 text-white hover:bg-zinc-800 cursor-pointer transition-colors duration-150 flex items-center space-x-2"> | |
| <div class="w-2 h-2 bg-zinc-500 rounded-full"></div> | |
| <div> | |
| <div class="font-medium text-sm">Lite</div> | |
| <div class="text-xs text-zinc-400">Economical</div> | |
| </div> | |
| </div> | |
| <div onclick="selectModel('Deep Research')" class="px-3 py-2 text-white hover:bg-zinc-800 cursor-pointer transition-colors duration-150 flex items-center space-x-2"> | |
| <div class="w-2 h-2 bg-zinc-300 rounded-full"></div> | |
| <div> | |
| <div class="font-medium text-sm">Deep Research</div> | |
| <div class="text-xs text-zinc-400">In-depth analysis</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Web Search Toggle --> | |
| <button id="webSearchToggle" onclick="toggleWebSearch()" class="flex items-center space-x-1.5 bg-zinc-800/60 hover:bg-zinc-800/80 border border-zinc-700/50 hover:border-zinc-600/50 rounded-lg px-3 py-2 text-sm text-white transition-all duration-200"> | |
| <i data-feather="search" class="w-3.5 h-3.5"></i> | |
| <span>Web</span> | |
| <div class="w-8 h-4 bg-zinc-700 rounded-full relative"> | |
| <div id="webSearchToggleCircle" class="absolute left-0.5 top-0.5 w-3 h-3 bg-zinc-500 rounded-full transition-transform duration-200"></div> | |
| </div> | |
| </button> | |
| </div> | |
| <!-- Token Counter --> | |
| <div class="flex items-center space-x-3"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="cpu" class="w-3.5 h-3.5 text-zinc-400"></i> | |
| <span id="tokenCount" class="text-xs text-zinc-400 font-medium">0 / 4096 tokens</span> | |
| </div> | |
| <!-- Progress Bar --> | |
| <div class="w-20 bg-zinc-800 rounded-full h-1.5 relative overflow-hidden"> | |
| <div id="tokenProgressBar" class="absolute top-0 left-0 h-full bg-gradient-to-r from-white to-zinc-400 rounded-full transition-all duration-300" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Input Container --> | |
| <div class="relative bg-zinc-800/40 rounded-2xl border border-zinc-700/50 hover:border-zinc-600/50 transition-all duration-200 focus-within:border-white/50 focus-within:shadow-lg focus-within:shadow-white/5"> | |
| <!-- Action Buttons --> | |
| <div class="absolute right-2 top-2 flex items-center space-x-1.5"> | |
| <button onclick="attachFile()" class="p-2 hover:bg-zinc-700/50 rounded-lg transition-all duration-200 group"> | |
| <i data-feather="paperclip" class="w-4 h-4 text-zinc-400 group-hover:text-white"></i> | |
| </button> | |
| <button onclick="showVoiceInput()" class="p-2 hover:bg-zinc-700/50 rounded-lg transition-all duration-200 group"> | |
| <i data-feather="mic" class="w-4 h-4 text-zinc-400 group-hover:text-white"></i> | |
| </button> | |
| <button onclick="stopGeneration()" id="stopButton" class="hidden p-2 hover:bg-red-500/20 rounded-lg transition-all duration-200 group"> | |
| <i data-feather="square" class="w-4 h-4 text-red-400 group-hover:text-red-300"></i> | |
| </button> | |
| <button | |
| onclick="sendMessage()" | |
| id="sendButton" | |
| class="p-2 bg-gradient-to-r from-white to-zinc-200 text-zinc-900 rounded-lg hover:scale-105 transition-all duration-200 hover:shadow-lg hover:shadow-white/20 disabled:opacity-50 disabled:cursor-not-allowed" | |
| > | |
| <i data-feather="send" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <!-- Textarea --> | |
| <textarea | |
| id="messageInput" | |
| rows="1" | |
| placeholder="Type your message here... (@ to attach, / for commands)" | |
| class="w-full bg-transparent text-white placeholder-zinc-500 resize-none focus:outline-none px-4 pt-3.5 pr-24 pb-6 text-sm leading-relaxed" | |
| style="min-height: 52px; max-height: 120px;" | |
| onkeypress="handleKeyPress(event)" | |
| oninput="handleInput(this)" | |
| ></textarea> | |
| </div> | |
| <!-- Bottom Actions Bar --> | |
| <div class="mt-3 flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <button onclick="clearChat()" class="text-xs text-zinc-500 hover:text-white transition-colors duration-200 flex items-center space-x-1"> | |
| <i data-feather="trash-2" class="w-3 h-3"></i> | |
| <span>Clear</span> | |
| </button> | |
| <button onclick="exportChat()" class="text-xs text-zinc-500 hover:text-white transition-colors duration-200 flex items-center space-x-1"> | |
| <i data-feather="download" class="w-3 h-3"></i> | |
| <span>Export</span> | |
| </button> | |
| <button onclick="showSettings()" class="text-xs text-zinc-500 hover:text-white transition-colors duration-200 flex items-center space-x-1"> | |
| <i data-feather="settings" class="w-3 h-3"></i> | |
| <span>Settings</span> | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-2 text-xs text-zinc-500"> | |
| <span>Enter to send</span> | |
| <span>•</span> | |
| <span>Shift+Enter for new line</span> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script src="components/sidebar.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |