Aurora AI Conversation

1"use client"
2 
3import * as React from "react"
4import { Avatar as AuroraAvatar } from "@/registry/aurora/ui/avatar"
5 
6// ─── Types ──────────────────────────────────────────────────────────────────
7 
8export type ConversationProps = React.HTMLAttributes<HTMLDivElement> & {
9  /** Caps the scroll height of the thread (px). Defaults to 520. */
10  maxHeight?: number
11}
12 
13export interface MessageProps extends React.HTMLAttributes<HTMLElement> {
14  role?: "assistant" | "user" | "system"
15}
16 
17export interface MessageAvatarProps extends React.HTMLAttributes<HTMLDivElement> {
18  label: string
19  /** Accent family for the avatar ring + glyph. */
20  tone?: "axon" | "cyan" | "rose" | "muted"
21}
22 
23// ─── Conversation ─────────────────────────────────────────────────────────────
24 
25const Conversation = ({ ref, className, style, maxHeight = 520, ...props }: ConversationProps & { ref?: React.Ref<HTMLDivElement> }) => (
26    <div
27      ref={ref}
28      role="log"
29      aria-live="polite"
30      aria-label="Conversation"
31      className={["grid gap-4 border p-4", className].filter(Boolean).join(" ")}
32      style={{
33        border: "1px solid var(--aurora-border-strong)",
34        borderRadius: "var(--aurora-radius-1)",
35        boxShadow: "var(--aurora-shadow-medium), var(--aurora-highlight-medium)",
36        background:
37          "linear-gradient(180deg, color-mix(in srgb, var(--aurora-panel-strong) 96%, transparent), var(--aurora-panel-medium))",
38        maxHeight,
39        overflowY: "auto",
40        ...style,
41      }}
42      {...props}
43    />
44  )
45Conversation.displayName = "Conversation"
46 
47// ─── Message (row) ────────────────────────────────────────────────────────────
48 
49const Message = ({ ref, className, role = "assistant", style, ...props }: MessageProps & { ref?: React.Ref<HTMLElement> }) => {
50    const isUser = role === "user"
51    return (
52      <article
53        ref={ref}
54        className={["flex gap-3", className].filter(Boolean).join(" ")}
55        data-role={role}
56        style={{
57          // User rows mirror: avatar moves to the right, bubble hugs the right edge.
58// … truncated