Message Actions
A copy-paste ai / chat ui component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
AI / Chat UIHTMLCSSany framework
Copy into your project
HTML
<!-- Message Actions — copy / regenerate / thumbs up/down -->
<div class="nuda-msgact">
<button class="nuda-msgact__btn" aria-label="Copy">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<rect x="8" y="8" width="13" height="13" rx="2" />
<path d="M16 8 L16 5 A 2 2 0 0 0 14 3 L5 3 A 2 2 0 0 0 3 5 L3 14 A 2 2 0 0 0 5 16 L8 16" />
</svg>
</button>
<button class="nuda-msgact__btn" aria-label="Regenerate">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12 A 9 9 0 1 1 16 4.5" />
<path d="M21 4 L21 10 L15 10" />
</svg>
</button>
<button class="nuda-msgact__btn" aria-label="Like">…</button>
<button class="nuda-msgact__btn" aria-label="Dislike">…</button>
</div>CSS
/* Message Actions
Inline action toolbar typically shown on hover under an AI message.
Customize: --act-accent */
.nuda-msgact {
--act-accent: #e4ff54;
display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
}
.nuda-msgact__btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: transparent;
border: none;
color: #a1a1aa;
cursor: pointer;
border-radius: 7px;
transition: background 0.2s, color 0.2s, transform 0.2s;
}
.nuda-msgact__btn:hover {
background: rgba(228, 255, 84, 0.1);
color: var(--act-accent);
transform: translateY(-1px);
}
.nuda-msgact__btn:active { transform: translateY(0) scale(0.92); }
.nuda-msgact__btn svg { width: 15px; height: 15px; }How to use Message Actions
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.