Ai Message

A chat message bubble with sliding action buttons. Actions slide out from the edge on hover or focus. Used in AI chat interfaces to provide interaction options without clutter.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/ai-message

npx layro-cli add @educlopez/ai-message

npx layro-cli add @educlopez/ai-message

bunx layro-cli add @educlopez/ai-message

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import SmoothButton from "@/components/smoothui/smooth-button";
import { cn } from "@/lib/utils";
import { Check, Copy, RotateCcw, ThumbsDown, ThumbsUp } from "lucide-react";
import { type ReactNode, useEffect, useState } from "react";

const COPIED_RESET_MS = 1600;
const ACTION_STAGGER_MS = 30;

/**
 * The reveal is CSS so it needs no state and cannot desync from the pointer.
 * `motion`'s `animate` target was not being re-applied on state change here, and
 * a hover fade does not need a spring — a 200ms ease-out is the whole effect.