ai chat multi-turn timestamps regenerate conversation-history ai chat multi-turn timestamps regenerate divider multi-turn ai conversation chat with timestamps and actions
AI Chat Multi-Turn
Fetch pattern JSON:
curl https://webspire.de/patterns/ai-chat/multi-turn.json multi-turn.html
<section
class="ws-ai-chat mx-auto flex h-[700px] max-w-3xl flex-col 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);
"
>
<!-- 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">AI Assistant</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="flex flex-col gap-1">
<div class="max-w-[75%] rounded-2xl rounded-tl-sm px-4 py-3 text-sm" style="background: var(--ws-ai-chat-ai-bg)">
Welcome! I can help you build UI patterns with Tailwind CSS. What would you like to create?
</div>
<span class="px-1 text-[10px]" style="color: var(--ws-ai-chat-text-soft)">10:02 AM</span>
</div>
</div>
<!-- User message -->
<div class="flex items-start justify-end gap-3">
<div class="flex flex-col items-end gap-1">
<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)"
>
I need a responsive pricing table with three tiers.
</div>
<span class="px-1 text-[10px]" style="color: var(--ws-ai-chat-text-soft)">10:03 AM</span>
</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="flex flex-col gap-1">
<div class="max-w-[75%] rounded-2xl rounded-tl-sm px-4 py-3 text-sm" style="background: var(--ws-ai-chat-ai-bg)">
I've generated a three-tier pricing layout. It uses <code class="rounded px-1 py-0.5 text-xs" style="background: var(--ws-ai-chat-border)">grid-cols-3</code> on large screens and stacks vertically on mobile. The middle tier is highlighted as recommended.
</div>
<span class="px-1 text-[10px]" style="color: var(--ws-ai-chat-text-soft)">10:03 AM</span>
</div>
</div>
<!-- System divider -->
<div class="flex items-center gap-3 py-2" role="separator">
<div class="h-px flex-1" style="background: var(--ws-ai-chat-border)"></div>
<span class="text-[11px] font-medium" style="color: var(--ws-ai-chat-text-soft)">New conversation</span>
<div class="h-px flex-1" style="background: var(--ws-ai-chat-border)"></div>
</div>
<!-- User message -->
<div class="flex items-start justify-end gap-3">
<div class="flex flex-col items-end gap-1">
<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)"
>
Now I need a hero section with a gradient background. Something modern and clean.
</div>
<span class="px-1 text-[10px]" style="color: var(--ws-ai-chat-text-soft)">10:15 AM</span>
</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="flex flex-col gap-1">
<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 gradient hero section using Tailwind's <code class="rounded px-1 py-0.5 text-xs" style="background: var(--ws-ai-chat-border)">bg-gradient-to-br</code> with OKLCH color stops. It includes a headline, subtext, and dual CTAs.
</div>
<span class="px-1 text-[10px]" style="color: var(--ws-ai-chat-text-soft)">10:15 AM</span>
</div>
</div>
<!-- User message -->
<div class="flex items-start justify-end gap-3">
<div class="flex flex-col items-end gap-1">
<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)"
>
Can you make the gradient more subtle and add an animation?
</div>
<span class="px-1 text-[10px]" style="color: var(--ws-ai-chat-text-soft)">10:16 AM</span>
</div>
</div>
<!-- AI response with regenerate button -->
<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="flex flex-col gap-1">
<div class="max-w-[75%] rounded-2xl rounded-tl-sm px-4 py-3 text-sm" style="background: var(--ws-ai-chat-ai-bg)">
I've toned down the gradient and added a subtle fade-up entrance animation with <code class="rounded px-1 py-0.5 text-xs" style="background: var(--ws-ai-chat-border)">prefers-reduced-motion</code> support. The colors now transition from a warm neutral to a soft blue.
</div>
<div class="flex items-center gap-2 px-1 pt-1">
<span class="text-[10px]" style="color: var(--ws-ai-chat-text-soft)">10:16 AM</span>
<button
class="inline-flex items-center gap-1 rounded-md border px-2 py-1 text-[11px] font-medium transition hover:opacity-80"
style="border-color: var(--ws-ai-chat-border); color: var(--ws-ai-chat-text-soft)"
aria-label="Regenerate response"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd" />
</svg>
Regenerate
</button>
</div>
</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-multi" class="sr-only">Type a message</label>
<input
id="chat-input-multi"
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>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
aichatmulti-turntimestampsregenerateconversation-history
Slots
| Name | Required | Description |
|---|---|---|
| messages | Yes | Chat message bubbles with timestamps |
| divider | No | System message or conversation separator |
| actions | No | Regenerate or other response actions |
| input | Yes | Message input area |
Enhanced variant for longer conversations. Adds timestamps to each message, a system divider for new conversation sections, and a regenerate button on the last AI response.