messages conversation-list inbox chat notifications message list conversation list chat inbox unread messages typing indicator show list of chat conversations display messaging inbox conversation sidebar with unread counts
Message List
Fetch pattern JSON:
curl https://webspire.de/patterns/chat-widget/message-list.json message-list.html
<section
class="ws-chat-widget flex max-w-sm flex-col rounded-2xl border"
style="
--ws-chat-widget-bg: oklch(0.99 0.005 75);
--ws-chat-widget-text: oklch(0.25 0.01 75);
--ws-chat-widget-text-soft: oklch(0.45 0.01 75);
--ws-chat-widget-text-muted: oklch(0.6 0.01 75);
--ws-chat-widget-border: oklch(0.9 0.01 75);
--ws-chat-widget-accent: oklch(0.55 0.12 75);
--ws-chat-widget-accent-soft: oklch(0.92 0.04 75);
--ws-chat-widget-accent-text: oklch(0.99 0.005 75);
--ws-chat-widget-muted-bg: oklch(0.96 0.005 75);
background: var(--ws-chat-widget-bg);
color: var(--ws-chat-widget-text);
border-color: var(--ws-chat-widget-border);
"
aria-label="Conversations"
>
<!-- Header -->
<header class="flex items-center justify-between border-b px-4 py-3" style="border-color: var(--ws-chat-widget-border)">
<h2 class="text-base font-semibold">Messages</h2>
<span
class="inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold"
style="background: var(--ws-chat-widget-accent); color: var(--ws-chat-widget-accent-text)"
aria-label="3 unread messages"
>3</span>
</header>
<!-- Conversation List -->
<ul class="flex flex-col divide-y" style="--tw-divide-color: var(--ws-chat-widget-border)" role="list">
<!-- Conversation 1 — unread -->
<li class="flex items-center gap-3 px-4 py-3" style="background: var(--ws-chat-widget-muted-bg)">
<div
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-semibold"
style="background: var(--ws-chat-widget-accent-soft); color: var(--ws-chat-widget-text)"
aria-hidden="true"
>A</div>
<div class="flex min-w-0 flex-1 flex-col gap-0.5">
<div class="flex items-center justify-between">
<span class="text-sm font-semibold">Anna Kovacs</span>
<time class="text-[10px]" style="color: var(--ws-chat-widget-text-muted)">2 min</time>
</div>
<div class="flex items-center justify-between gap-2">
<span class="truncate text-xs" style="color: var(--ws-chat-widget-text-soft)">Can we schedule a call for tomorrow?</span>
<span
class="flex h-4.5 min-w-4.5 shrink-0 items-center justify-center rounded-full px-1 text-[10px] font-bold"
style="background: var(--ws-chat-widget-accent); color: var(--ws-chat-widget-accent-text)"
aria-label="2 unread"
>2</span>
</div>
</div>
</li>
<!-- Conversation 2 — unread -->
<li class="flex items-center gap-3 px-4 py-3" style="background: var(--ws-chat-widget-muted-bg)">
<div
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-semibold"
style="background: var(--ws-chat-widget-accent-soft); color: var(--ws-chat-widget-text)"
aria-hidden="true"
>M</div>
<div class="flex min-w-0 flex-1 flex-col gap-0.5">
<div class="flex items-center justify-between">
<span class="text-sm font-semibold">Marcus Chen</span>
<time class="text-[10px]" style="color: var(--ws-chat-widget-text-muted)">15 min</time>
</div>
<div class="flex items-center justify-between gap-2">
<span class="truncate text-xs" style="color: var(--ws-chat-widget-text-soft)">The deployment looks good, just one fix</span>
<span
class="flex h-4.5 min-w-4.5 shrink-0 items-center justify-center rounded-full px-1 text-[10px] font-bold"
style="background: var(--ws-chat-widget-accent); color: var(--ws-chat-widget-accent-text)"
aria-label="1 unread"
>1</span>
</div>
</div>
</li>
<!-- Conversation 3 — typing -->
<li class="flex items-center gap-3 px-4 py-3">
<div
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-semibold"
style="background: var(--ws-chat-widget-accent-soft); color: var(--ws-chat-widget-text)"
aria-hidden="true"
>L</div>
<div class="flex min-w-0 flex-1 flex-col gap-0.5">
<div class="flex items-center justify-between">
<span class="text-sm font-medium" style="color: var(--ws-chat-widget-text)">Lisa Park</span>
<time class="text-[10px]" style="color: var(--ws-chat-widget-text-muted)">32 min</time>
</div>
<span class="text-xs italic" style="color: var(--ws-chat-widget-accent)">typing…</span>
</div>
</li>
<!-- Conversation 4 -->
<li class="flex items-center gap-3 px-4 py-3">
<div
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-semibold"
style="background: var(--ws-chat-widget-accent-soft); color: var(--ws-chat-widget-text)"
aria-hidden="true"
>D</div>
<div class="flex min-w-0 flex-1 flex-col gap-0.5">
<div class="flex items-center justify-between">
<span class="text-sm font-medium" style="color: var(--ws-chat-widget-text)">David Ramirez</span>
<time class="text-[10px]" style="color: var(--ws-chat-widget-text-muted)">2 hr</time>
</div>
<span class="truncate text-xs" style="color: var(--ws-chat-widget-text-muted)">Thanks, that works perfectly!</span>
</div>
</li>
<!-- Conversation 5 -->
<li class="flex items-center gap-3 px-4 py-3">
<div
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full text-sm font-semibold"
style="background: var(--ws-chat-widget-accent-soft); color: var(--ws-chat-widget-text)"
aria-hidden="true"
>E</div>
<div class="flex min-w-0 flex-1 flex-col gap-0.5">
<div class="flex items-center justify-between">
<span class="text-sm font-medium" style="color: var(--ws-chat-widget-text)">Elena Voss</span>
<time class="text-[10px]" style="color: var(--ws-chat-widget-text-muted)">Yesterday</time>
</div>
<span class="truncate text-xs" style="color: var(--ws-chat-widget-text-muted)">See you at the meeting on Friday</span>
</div>
</li>
</ul>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
messagesconversation-listinboxchatnotifications
Conversation list widget displaying multiple chat threads with avatar initials, names, truncated message previews, timestamps, unread count badges, and a typing indicator.