ai chatbot response message conversational-ui ai response chat message card avatar markdown AI chat response card conversational UI message bubble
AI Response Base
Fetch pattern JSON:
curl https://webspire.de/patterns/ai-response/base.json base.html
<article class="ws-ai-response rounded-2xl border border-[var(--ws-ai-response-border)] bg-[var(--ws-ai-response-bg)] p-6 sm:p-8">
<div class="flex gap-4">
<!-- Avatar -->
<div class="flex-shrink-0">
<div class="flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-ai-response-accent)] text-sm font-bold text-[var(--ws-ai-response-action-text)]" aria-hidden="true">AI</div>
</div>
<!-- Response content -->
<div class="min-w-0 flex-1 space-y-4">
<h3 class="text-lg font-semibold text-[var(--ws-ai-response-text)]">Getting started with Tailwind CSS</h3>
<p class="text-base leading-relaxed text-[var(--ws-ai-response-text-soft)]">Tailwind CSS is a utility-first framework that lets you build custom designs without leaving your HTML. Here are the key concepts you need to know:</p>
<ul class="list-inside list-disc space-y-2 text-[var(--ws-ai-response-text-soft)]" role="list">
<li>Utility classes map directly to CSS properties</li>
<li>Responsive design uses mobile-first breakpoint prefixes</li>
<li>Dark mode is supported via the <code class="rounded bg-[var(--ws-ai-response-border)] px-1.5 py-0.5 text-sm font-mono text-[var(--ws-ai-response-text)]">dark:</code> variant</li>
<li>Custom values are defined in your theme configuration</li>
</ul>
</div>
</div>
</article>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
aichatbotresponsemessageconversational-ui
Slots
| Name | Required | Description |
|---|---|---|
| avatar | Yes | Avatar circle identifying the AI assistant. |
| content | Yes | Main response area with heading, paragraph, and list. |
Base variant for the AI Response family. Displays an avatar circle alongside markdown-like formatted content including heading, paragraph, and bullet list. Ideal for chatbot and AI assistant interfaces.