chat messenger messages widget communication inbox chat messenger messages widget bubbles input send chat messenger widget message chat box interface
Chatbox Base
Fetch pattern JSON:
curl https://webspire.de/patterns/chatbox/base.json base.html
<div class="ws-chatbox mx-auto flex max-w-sm flex-col overflow-hidden rounded-xl border border-[var(--ws-chatbox-border)] bg-[var(--ws-chatbox-bg)]" style="height: 28rem;">
<!-- Header -->
<div class="flex items-center gap-3 border-b border-[var(--ws-chatbox-border)] px-4 py-3">
<div class="flex h-9 w-9 items-center justify-center rounded-full bg-indigo-100 text-xs font-bold text-indigo-700" aria-hidden="true">SK</div>
<div class="min-w-0 flex-1">
<p class="text-sm font-semibold text-[var(--ws-chatbox-text)]">Sarah Kim</p>
<div class="flex items-center gap-1.5">
<span class="h-2 w-2 rounded-full bg-emerald-500" aria-hidden="true"></span>
<span class="text-xs text-[var(--ws-chatbox-text-soft)]">Online</span>
</div>
</div>
</div>
<!-- Messages -->
<div class="flex-1 space-y-3 overflow-y-auto p-4" role="log" aria-label="Chat messages" aria-live="polite">
<div class="flex justify-start">
<div class="max-w-[75%] rounded-2xl rounded-tl-sm bg-[var(--ws-chatbox-border)] px-4 py-2">
<p class="text-sm text-[var(--ws-chatbox-text)]">Hey! Have you seen the new design mockups?</p>
<time class="mt-1 block text-right text-xs text-[var(--ws-chatbox-text-soft)]">10:24</time>
</div>
</div>
<div class="flex justify-end">
<div class="max-w-[75%] rounded-2xl rounded-tr-sm bg-[var(--ws-chatbox-accent)] px-4 py-2">
<p class="text-sm text-white">Yes! They look amazing. Love the new color palette.</p>
<time class="mt-1 block text-right text-xs text-white/70">10:26</time>
</div>
</div>
<div class="flex justify-start">
<div class="max-w-[75%] rounded-2xl rounded-tl-sm bg-[var(--ws-chatbox-border)] px-4 py-2">
<p class="text-sm text-[var(--ws-chatbox-text)]">Great! I'll share the Figma link in the channel.</p>
<time class="mt-1 block text-right text-xs text-[var(--ws-chatbox-text-soft)]">10:27</time>
</div>
</div>
<div class="flex justify-end">
<div class="max-w-[75%] rounded-2xl rounded-tr-sm bg-[var(--ws-chatbox-accent)] px-4 py-2">
<p class="text-sm text-white">Perfect, thanks!</p>
<time class="mt-1 block text-right text-xs text-white/70">10:28</time>
</div>
</div>
</div>
<!-- Input -->
<div class="border-t border-[var(--ws-chatbox-border)] p-3">
<div class="flex items-center gap-2">
<button type="button" class="shrink-0 rounded-lg p-2 text-[var(--ws-chatbox-text-soft)] transition hover:bg-[var(--ws-chatbox-border)]" aria-label="Add emoji">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" /></svg>
</button>
<input type="text" placeholder="Type a message..." class="min-w-0 flex-1 rounded-lg border border-[var(--ws-chatbox-border)] bg-transparent px-3 py-2 text-sm text-[var(--ws-chatbox-text)] placeholder:text-[var(--ws-chatbox-text-soft)]" aria-label="Message input" />
<button type="button" class="shrink-0 rounded-lg bg-[var(--ws-chatbox-accent)] p-2 text-white transition hover:opacity-90" aria-label="Send message">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" /></svg>
</button>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
chatmessengermessageswidgetcommunicationinbox
Slots
| Name | Required | Description |
|---|---|---|
| header | Yes | Contact name and online status. |
| messages | Yes | Chat message bubbles. |
| input | Yes | Text input with emoji and send buttons. |
Messenger-style chat widget with a header showing contact name and online status dot, alternating message bubbles with timestamps, and an input bar with emoji and send buttons. Uses role="log" for accessibility.