ai chat dark-theme conversational-ui llm chatbot dark
AI Chat App
Dark-themed AI chat interface with conversation history, model selector, and message input.
dark Responsive
Live Preview
Sections
sidebarmodel-selectorconversation-historychat-messagesprompt-input
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NexusAI — Chat</title>
<meta name="description" content="Full-screen AI chat interface with conversation history and model selector." />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<style>
body { font-family: 'Inter', sans-serif; }
/* Brand tokens */
:root {
--ws-color-accent: oklch(0.72 0.17 160);
--ws-color-accent-dim: oklch(0.72 0.17 160 / 0.2);
--ws-color-accent-hover: oklch(0.66 0.19 160);
}
</style>
</head>
<body class="bg-gray-950 text-gray-100 antialiased">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="hidden lg:flex lg:flex-col w-72 bg-gray-900 border-r border-gray-800">
<div class="flex items-center justify-between h-14 px-4 border-b border-gray-800">
<div class="flex items-center gap-2">
<svg class="w-6 h-6 shrink-0" viewBox="0 0 24 24" fill="none" aria-hidden="true" style="color: var(--ws-color-accent);"><circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.2"/><circle cx="12" cy="12" r="4" fill="currentColor"/></svg>
<span class="text-sm font-bold text-white">NexusAI</span>
</div>
<button class="p-1.5 text-gray-400 hover:text-white rounded-lg hover:bg-gray-800" aria-label="New chat">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 4v16m8-8H4"/></svg>
</button>
</div>
<!-- Model Selector -->
<div class="px-4 py-3 border-b border-gray-800">
<select class="w-full px-3 py-2 text-sm bg-gray-800 border border-gray-700 rounded-lg text-gray-200 focus:outline-none focus:ring-2" style="--tw-ring-color: var(--ws-color-accent);">
<option>NexusAI Pro (GPT-4 class)</option>
<option>NexusAI Fast (GPT-3.5 class)</option>
<option>NexusAI Vision</option>
<option>NexusAI Code</option>
</select>
</div>
<!-- Conversations -->
<div class="flex-1 overflow-y-auto px-3 py-3 space-y-1">
<p class="px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-gray-500">Today</p>
<a href="#" class="flex items-center gap-2 px-3 py-2.5 text-sm rounded-lg bg-gray-800 text-white">
<svg class="w-4 h-4 text-gray-400 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M8 10h.01M12 10h.01M16 10h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
Explain quantum computing
</a>
<a href="#" class="flex items-center gap-2 px-3 py-2.5 text-sm rounded-lg text-gray-400 hover:bg-gray-800 hover:text-white">
<svg class="w-4 h-4 text-gray-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M8 10h.01M12 10h.01M16 10h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
Write a Python REST API
</a>
<a href="#" class="flex items-center gap-2 px-3 py-2.5 text-sm rounded-lg text-gray-400 hover:bg-gray-800 hover:text-white">
<svg class="w-4 h-4 text-gray-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M8 10h.01M12 10h.01M16 10h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
Summarize meeting notes
</a>
<p class="px-2 py-1 mt-3 text-[10px] font-semibold uppercase tracking-wider text-gray-500">Yesterday</p>
<a href="#" class="flex items-center gap-2 px-3 py-2.5 text-sm rounded-lg text-gray-400 hover:bg-gray-800 hover:text-white">
<svg class="w-4 h-4 text-gray-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M8 10h.01M12 10h.01M16 10h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
Debug React useEffect
</a>
<a href="#" class="flex items-center gap-2 px-3 py-2.5 text-sm rounded-lg text-gray-400 hover:bg-gray-800 hover:text-white">
<svg class="w-4 h-4 text-gray-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M8 10h.01M12 10h.01M16 10h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
Marketing email copy
</a>
<p class="px-2 py-1 mt-3 text-[10px] font-semibold uppercase tracking-wider text-gray-500">Last Week</p>
<a href="#" class="flex items-center gap-2 px-3 py-2.5 text-sm rounded-lg text-gray-400 hover:bg-gray-800 hover:text-white">
<svg class="w-4 h-4 text-gray-500 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M8 10h.01M12 10h.01M16 10h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
Plan a trip to Japan
</a>
</div>
<!-- User -->
<div class="px-4 py-3 border-t border-gray-800">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold" style="background: var(--ws-color-accent-dim); color: var(--ws-color-accent);">AL</div>
<div>
<p class="text-sm font-medium text-white">Alex Lang</p>
<p class="text-xs text-gray-500">Pro Plan</p>
</div>
</div>
</div>
</aside>
<!-- Chat Area -->
<div class="flex-1 flex flex-col">
<!-- Chat Header -->
<header class="ws-navbar flex items-center justify-between h-14 px-6 border-b border-gray-800 bg-gray-950">
<div class="flex items-center gap-2">
<div class="w-2 h-2 rounded-full" style="background: var(--ws-color-accent);"></div>
<span class="text-sm font-medium text-gray-300">NexusAI Pro</span>
</div>
<div class="flex items-center gap-2">
<button class="p-2 text-gray-400 hover:text-white rounded-lg hover:bg-gray-800" aria-label="Share conversation">
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/></svg>
</button>
<button class="p-2 text-gray-400 hover:text-white rounded-lg hover:bg-gray-800" aria-label="Settings">
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"/></svg>
</button>
</div>
</header>
<!-- Messages -->
<div class="flex-1 overflow-y-auto px-4 py-6">
<div class="max-w-3xl mx-auto space-y-6">
<!-- User Message -->
<div class="flex justify-end">
<div class="max-w-lg text-white rounded-2xl rounded-br-md px-5 py-3" style="background: var(--ws-color-accent);">
<p class="text-sm leading-relaxed">Can you explain quantum computing in simple terms? I want to understand qubits, superposition, and entanglement.</p>
</div>
</div>
<!-- AI Response -->
<div class="flex gap-3">
<div class="w-8 h-8 rounded-full flex items-center justify-center shrink-0" style="background: var(--ws-color-accent-dim);">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" style="color: var(--ws-color-accent);"><circle cx="12" cy="12" r="4"/></svg>
</div>
<div class="max-w-lg bg-gray-800 rounded-2xl rounded-bl-md px-5 py-4">
<p class="text-sm leading-relaxed text-gray-200">Great question! Let me break it down:</p>
<p class="text-sm leading-relaxed text-gray-200 mt-3"><strong class="text-white">Qubits</strong> are the basic unit of quantum computing, like bits in regular computers. But while a bit can only be 0 or 1, a qubit can be both at the same time.</p>
<p class="text-sm leading-relaxed text-gray-200 mt-3"><strong class="text-white">Superposition</strong> is that ability to be in multiple states simultaneously. Think of a coin spinning in the air — it's neither heads nor tails until it lands.</p>
<p class="text-sm leading-relaxed text-gray-200 mt-3"><strong class="text-white">Entanglement</strong> is when two qubits become linked. Measuring one instantly tells you about the other, no matter the distance. Einstein called it "spooky action at a distance."</p>
<p class="text-sm leading-relaxed text-gray-200 mt-3">Together, these properties allow quantum computers to explore many solutions simultaneously, making them powerful for specific problems like cryptography and drug discovery.</p>
</div>
</div>
<!-- User Follow-up -->
<div class="flex justify-end">
<div class="max-w-lg text-white rounded-2xl rounded-br-md px-5 py-3" style="background: var(--ws-color-accent);">
<p class="text-sm leading-relaxed">How close are we to practical quantum computing?</p>
</div>
</div>
<!-- AI Response -->
<div class="flex gap-3">
<div class="w-8 h-8 rounded-full flex items-center justify-center shrink-0" style="background: var(--ws-color-accent-dim);">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" style="color: var(--ws-color-accent);"><circle cx="12" cy="12" r="4"/></svg>
</div>
<div class="max-w-lg bg-gray-800 rounded-2xl rounded-bl-md px-5 py-4">
<p class="text-sm leading-relaxed text-gray-200">We're in the <strong class="text-white">NISQ era</strong> (Noisy Intermediate-Scale Quantum). Current quantum computers have 50-1,000+ qubits, but they're error-prone.</p>
<p class="text-sm leading-relaxed text-gray-200 mt-3">Key milestones to watch:</p>
<ul class="text-sm text-gray-200 mt-2 space-y-1 list-disc list-inside">
<li>Error correction at scale (est. 2027-2030)</li>
<li>Quantum advantage for real business problems</li>
<li>Hybrid classical-quantum algorithms (happening now)</li>
</ul>
<p class="text-sm leading-relaxed text-gray-200 mt-3">Companies like IBM, Google, and startups like IonQ are making rapid progress. Practical, fault-tolerant quantum computing is likely 5-10 years away.</p>
</div>
</div>
</div>
</div>
<!-- Input Area -->
<div class="ws-forms border-t border-gray-800 bg-gray-950 px-4 py-4">
<div class="max-w-3xl mx-auto">
<div class="flex items-end gap-3 bg-gray-800 rounded-2xl px-4 py-3 border border-gray-700 focus-within:border-[oklch(0.72_0.17_160)] focus-within:ring-1 focus-within:ring-[oklch(0.72_0.17_160)]">
<button class="p-1.5 text-gray-400 hover:text-white rounded-lg hover:bg-gray-700 shrink-0" aria-label="Attach file">
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/></svg>
</button>
<textarea rows="1" placeholder="Ask NexusAI anything..." class="flex-1 bg-transparent text-sm text-gray-100 placeholder-gray-500 resize-none focus:outline-none" aria-label="Message input"></textarea>
<button class="p-2 text-white rounded-xl shrink-0 transition-colors" style="background: var(--ws-color-accent);" aria-label="Send message">
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg>
</button>
</div>
<p class="text-center text-[11px] text-gray-600 mt-2">NexusAI can make mistakes. Verify important information.</p>
</div>
</div>
</div>
</div>
</body>
</html>
Full-screen AI chat interface with dark theme. Features conversation history sidebar, model selector, message bubbles with AI/user styling, and a prompt input with attachment button. Emerald accent on gray-950 background.