Ai Message

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { Check, Copy, RotateCcw, ThumbsDown, ThumbsUp } from "lucide-react";
5import { type ReactNode, useEffect, useState } from "react";
6 
7const COPIED_RESET_MS = 1600;
8const ACTION_STAGGER_MS = 30;
9 
10/**
11 * The reveal is CSS so it needs no state and cannot desync from the pointer.
12 * `motion`'s `animate` target was not being re-applied on state change here, and
13 * a hover fade does not need a spring — a 200ms ease-out is the whole effect.
14 */
15const ACTION_STYLES = `
16.ai-message-action {
17  opacity: 0;
18  transform: translateX(var(--ai-message-slide)) scale(0.9);
19  transition:
20    opacity 200ms cubic-bezier(.23, 1, .32, 1),
21    transform 200ms cubic-bezier(.23, 1, .32, 1),
22    background-color 150ms ease,
23    color 150ms ease;
24}
25.ai-message-action-agent { --ai-message-slide: -6px; }
26.ai-message-action-user { --ai-message-slide: 6px; }
27.ai-message-root:hover .ai-message-action,
28.ai-message-root:focus-within .ai-message-action {
29  opacity: 1;
30  transform: translateX(0) scale(1);
31}
32.ai-message-pop { animation: ai-message-pop 250ms cubic-bezier(.23, 1, .32, 1); }
33@keyframes ai-message-pop {
34  0% { transform: scale(1); }
35  45% { transform: scale(1.25); }
36  100% { transform: scale(1); }
37}
38@media (prefers-reduced-motion: reduce) {
39  .ai-message-action { transition-duration: 0ms; transition-delay: 0ms !important; transform: none; }
40  .ai-message-root:hover .ai-message-action,
41  .ai-message-root:focus-within .ai-message-action { transform: none; }
42  .ai-message-pop { animation: none; }
43}
44`;
45 
46export type AIMessageAuthor = "user" | "assistant";
47 
48export type AIMessageProps = {
49  /** Rendered to the side of the bubble — an avatar or an orb. */
50  avatar?: ReactNode;
51  /**
52   * Draw the tinted bubble. Turn it off for assistant turns that carry their own
53   * surfaces — reasoning traces, tool calls, diffs — where a bubble around a
54   * stack of cards reads as a box inside a box.
55   */
56  bubble?: boolean;
57  children: ReactNode;
58  className?: string;
59  /** Plain text handed to the clipboard. Omit to hide the copy action. */
60  copyText?: string;
61  /**
62   * Who wrote it. Named `from` rather than `role` on purpose: `role` is an ARIA
63   * attribute, and a component prop of that name misleads both readers and
64   * accessibility linters.
65   */
66  from?: AIMessageAuthor;
67  onRetry?: () => void;
68  onVote?: (vote: "up" | "down") => void;
69  /** Preformatted timestamp, e.g. "14:32". */
70  timestamp?: string;
71};
72 
73/**
74// … truncated