ai chatbot response actions feedback copy regenerate ai response actions copy regenerate thumbs feedback AI response with action buttons chat message with copy and feedback
AI Response With Actions
Fetch pattern JSON:
curl https://webspire.de/patterns/ai-response/with-actions.json with-actions.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>
<!-- Action bar -->
<div class="flex items-center gap-1 border-t border-[var(--ws-ai-response-border)] pt-4" role="toolbar" aria-label="Response actions">
<button type="button" title="Copy response" class="inline-flex items-center gap-1.5 rounded-lg px-3 py-2 text-xs font-medium text-[var(--ws-ai-response-text-soft)] transition hover:bg-[var(--ws-ai-response-border)] hover:text-[var(--ws-ai-response-text)]">
<svg class="h-4 w-4" 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.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m0 0a2.625 2.625 0 115.25 0H15" /></svg>
Copy
</button>
<button type="button" title="Regenerate response" class="inline-flex items-center gap-1.5 rounded-lg px-3 py-2 text-xs font-medium text-[var(--ws-ai-response-text-soft)] transition hover:bg-[var(--ws-ai-response-border)] hover:text-[var(--ws-ai-response-text)]">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.992 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182M20.015 4.356v4.992" /></svg>
Regenerate
</button>
<button type="button" title="Good response" class="inline-flex items-center rounded-lg px-2.5 py-2 text-[var(--ws-ai-response-text-soft)] transition hover:bg-[var(--ws-ai-response-border)] hover:text-[var(--ws-ai-response-text)]" aria-label="Good response">
<svg class="h-4 w-4" 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.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H14.23c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.228.22.442.436.619a2.136 2.136 0 001.437.556c.484 0 .964-.078 1.423-.23l.68-.227M5.904 18.75A10.489 10.489 0 014.5 15c0-1.855.483-3.598 1.33-5.114" /></svg>
</button>
<button type="button" title="Bad response" class="inline-flex items-center rounded-lg px-2.5 py-2 text-[var(--ws-ai-response-text-soft)] transition hover:bg-[var(--ws-ai-response-border)] hover:text-[var(--ws-ai-response-text)]" aria-label="Bad response">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 15h2.25m8.024-9.75c.011.05.028.1.052.148.591 1.2.924 2.55.924 3.977a8.96 8.96 0 01-1.526 5.009c-.389.482-.988.729-1.605.729H13.23a4.488 4.488 0 00-1.423.23l-3.114 1.04a4.488 4.488 0 01-1.423.23H5.904a2.147 2.147 0 01-1.873-1.175 10.522 10.522 0 01-1.28-3.776c-.09-.782.166-1.596.788-2.117l.196-.176a2.19 2.19 0 00.672-1.573V8.25c0-.904.525-1.694 1.286-2.067A4.483 4.483 0 016 4.5c.652 0 1.281.11 1.866.312a7.01 7.01 0 003.091.682h1.855c1.006 0 1.95.358 2.688 1.006" /></svg>
</button>
</div>
</div>
</div>
</article>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
aichatbotresponseactionsfeedbackcopyregenerate
Slots
| Name | Required | Description |
|---|---|---|
| avatar | Yes | Avatar circle identifying the AI assistant. |
| content | Yes | Main response area with formatted text. |
| actions | Yes | Action bar with copy, regenerate, and feedback buttons. |
Enhanced AI response with an action toolbar below the message content. Includes copy, regenerate, thumbs up, and thumbs down buttons with accessible labels and hover states.