Skip to content

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.

More ai / chat ui components

← Browse all NudaUI components