Aurora AI Message

1"use client"
2 
3import * as React from "react"
4import { Avatar as AuroraAvatar } from "@/registry/aurora/ui/avatar"
5import { Button } from "@/registry/aurora/ui/button"
6 
7// ─── Types ──────────────────────────────────────────────────────────────────
8 
9export interface MessageProps extends React.HTMLAttributes<HTMLElement> {
10  role?: "assistant" | "user" | "system"
11  /** Timestamp shown in the hover-revealed meta row */
12  time?: React.ReactNode
13  /** Action buttons shown in the hover-revealed meta row */
14  actions?: React.ReactNode
15}
16 
17export interface MessageAvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
18  label: string
19  tone?: "axon" | "cyan" | "rose" | "muted"
20  status?: "online" | "away" | "busy" | "offline"
21}
22 
23export interface MessageContentProps extends React.HTMLAttributes<HTMLDivElement> {
24  tone?: MessageProps["role"]
25  /** Append a blinking caret to signal an in-progress stream */
26  streaming?: boolean
27}
28 
29// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).
30 
31// ─── Message ─────────────────────────────────────────────────────────────────
32// Turn row: avatar + bubble, with a timestamp/actions meta row revealed on hover.
33 
34const Message = ({ ref, className, role = "assistant", time, actions, style, children, ...props }: MessageProps & { ref?: React.Ref<HTMLElement> }) => {
35    const isUser = role === "user"
36    const hasMeta = time != null || actions != null
37 
38    return (
39      <article
40        ref={ref}
41        className={["group/aurora-msg flex flex-col", className].filter(Boolean).join(" ")}
42        data-role={role}
43        style={{
44          color: "var(--aurora-text-primary)",
45          alignItems: isUser ? "flex-end" : "stretch",
46          ...style,
47        }}
48        {...props}
49      >
50        <div
51          className="flex gap-[10px]"
52          style={{ justifyContent: isUser ? "flex-end" : "flex-start", alignItems: "flex-start" }}
53        >
54          {children}
55        </div>
56        {hasMeta && (
57          <div
58            className="flex items-center gap-[6px] opacity-0 transition-opacity duration-150 ease-out group-hover/aurora-msg:opacity-100"
59            style={{
60              marginTop: 5,
61// … truncated