ai chat sidebar conversation-history two-column ai chat sidebar history conversations two-column ai chat with sidebar navigation two-column chat layout
AI Chat With Sidebar
Fetch pattern JSON:
curl https://webspire.de/patterns/ai-chat/with-sidebar.json with-sidebar.html
<section
class="ws-ai-chat mx-auto flex h-[650px] max-w-5xl overflow-hidden rounded-2xl border shadow-md"
style="
--ws-ai-chat-bg: oklch(0.985 0.002 75);
--ws-ai-chat-text: oklch(0.205 0.015 75);
--ws-ai-chat-text-soft: oklch(0.556 0.01 75);
--ws-ai-chat-border: oklch(0.885 0.008 75);
--ws-ai-chat-accent: oklch(0.588 0.16 250);
--ws-ai-chat-user-bg: oklch(0.588 0.16 250);
--ws-ai-chat-ai-bg: oklch(0.95 0.004 75);
background: var(--ws-ai-chat-bg);
color: var(--ws-ai-chat-text);
border-color: var(--ws-ai-chat-border);
"
>
<!-- Sidebar -->
<aside
class="hidden w-64 shrink-0 flex-col border-r md:flex"
style="border-color: var(--ws-ai-chat-border); background: var(--ws-ai-chat-ai-bg)"
>
<!-- New Chat button -->
<div class="p-4">
<button
class="flex w-full items-center justify-center gap-2 rounded-xl border px-4 py-2.5 text-sm font-medium transition hover:opacity-80"
style="border-color: var(--ws-ai-chat-border); color: var(--ws-ai-chat-text)"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
</svg>
New Chat
</button>
</div>
<!-- Conversation list -->
<nav class="flex-1 overflow-y-auto px-3 pb-4" aria-label="Conversation history">
<p class="mb-2 px-2 text-[10px] font-semibold uppercase tracking-widest" style="color: var(--ws-ai-chat-text-soft)">Recent</p>
<ul class="space-y-1">
<li>
<a
href="#"
class="block rounded-lg px-3 py-2.5 text-sm transition hover:opacity-80"
style="background: var(--ws-ai-chat-bg)"
aria-current="page"
>
<p class="truncate font-medium">Pricing table design</p>
<p class="mt-0.5 text-[11px]" style="color: var(--ws-ai-chat-text-soft)">Today</p>
</a>
</li>
<li>
<a href="#" class="block rounded-lg px-3 py-2.5 text-sm transition hover:opacity-80">
<p class="truncate font-medium" style="color: var(--ws-ai-chat-text)">Hero section gradient</p>
<p class="mt-0.5 text-[11px]" style="color: var(--ws-ai-chat-text-soft)">Yesterday</p>
</a>
</li>
<li>
<a href="#" class="block rounded-lg px-3 py-2.5 text-sm transition hover:opacity-80">
<p class="truncate font-medium" style="color: var(--ws-ai-chat-text)">Navigation patterns</p>
<p class="mt-0.5 text-[11px]" style="color: var(--ws-ai-chat-text-soft)">Mar 19</p>
</a>
</li>
<li>
<a href="#" class="block rounded-lg px-3 py-2.5 text-sm transition hover:opacity-80">
<p class="truncate font-medium" style="color: var(--ws-ai-chat-text)">Auth form accessibility</p>
<p class="mt-0.5 text-[11px]" style="color: var(--ws-ai-chat-text-soft)">Mar 18</p>
</a>
</li>
</ul>
</nav>
</aside>
<!-- Chat area -->
<div class="flex flex-1 flex-col">
<!-- Header -->
<header
class="flex items-center gap-3 border-b px-6 py-4"
style="border-color: var(--ws-ai-chat-border)"
>
<div
class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold text-white"
style="background: var(--ws-ai-chat-accent)"
>
AI
</div>
<div>
<p class="text-sm font-semibold">Pricing table design</p>
<p class="text-xs" style="color: var(--ws-ai-chat-text-soft)">Online</p>
</div>
</header>
<!-- Messages -->
<div class="flex flex-1 flex-col gap-4 overflow-y-auto px-6 py-6" role="log" aria-label="Chat messages" aria-live="polite">
<!-- AI message -->
<div class="flex items-start gap-3">
<div
class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white"
style="background: var(--ws-ai-chat-accent)"
aria-hidden="true"
>
AI
</div>
<div class="max-w-[75%] rounded-2xl rounded-tl-sm px-4 py-3 text-sm" style="background: var(--ws-ai-chat-ai-bg)">
Hello! I'm ready to help you design a pricing table. How many tiers do you need?
</div>
</div>
<!-- User message -->
<div class="flex items-start justify-end gap-3">
<div
class="max-w-[75%] rounded-2xl rounded-tr-sm px-4 py-3 text-sm text-white"
style="background: var(--ws-ai-chat-user-bg)"
>
Three tiers: Free, Pro, and Enterprise. The Pro tier should be highlighted.
</div>
</div>
<!-- AI message -->
<div class="flex items-start gap-3">
<div
class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white"
style="background: var(--ws-ai-chat-accent)"
aria-hidden="true"
>
AI
</div>
<div class="max-w-[75%] rounded-2xl rounded-tl-sm px-4 py-3 text-sm" style="background: var(--ws-ai-chat-ai-bg)">
Here's a responsive three-tier pricing layout. The Pro tier uses a contrasting accent color and a "Recommended" badge. All tiers stack vertically on mobile and expand to a three-column grid on large screens.
</div>
</div>
<!-- User message -->
<div class="flex items-start justify-end gap-3">
<div
class="max-w-[75%] rounded-2xl rounded-tr-sm px-4 py-3 text-sm text-white"
style="background: var(--ws-ai-chat-user-bg)"
>
Looks great, can you add a toggle for monthly and annual billing?
</div>
</div>
</div>
<!-- Input area -->
<div class="border-t px-4 py-4" style="border-color: var(--ws-ai-chat-border)">
<form class="flex items-center gap-3" onsubmit="return false">
<label for="chat-input-sidebar" class="sr-only">Type a message</label>
<input
id="chat-input-sidebar"
type="text"
placeholder="Type a message..."
class="flex-1 rounded-xl border px-4 py-2.5 text-sm outline-none transition focus:ring-2"
style="
border-color: var(--ws-ai-chat-border);
background: var(--ws-ai-chat-bg);
color: var(--ws-ai-chat-text);
"
/>
<button
type="submit"
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-white transition hover:opacity-90"
style="background: var(--ws-ai-chat-accent)"
aria-label="Send message"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
</svg>
</button>
</form>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
aichatsidebarconversation-historytwo-column
Slots
| Name | Required | Description |
|---|---|---|
| sidebar | Yes | Conversation history list with navigation |
| messages | Yes | Chat message bubbles |
| input | Yes | Message input area |
Enhanced variant with a two-column layout. The left sidebar lists previous conversations with titles and dates, plus a New Chat button. The right side contains the active chat area. Sidebar hides on mobile for responsive behavior.