Aurora AI Persona

1"use client"
2 
3/**
4 * Aurora Persona — identity card (avatar, role, presence, capability chips) + compact row.
5 * CD-parity standalone implementation (self-contained; the canonical shadcn file).
6 */
7 
8import * as React from "react"
9import { cn } from "@/lib/utils"
10 
11export type PersonaPresence = "online" | "busy" | "away" | "offline"
12 
13export interface PersonaProps extends React.HTMLAttributes<HTMLDivElement> {
14  name: string
15  /** Role / one-line description under the name. */
16  role?: string
17  /** @deprecated alias for `role`. */
18  description?: string
19  presence?: PersonaPresence
20  /** Capability chips (full variant only). */
21  tags?: string[]
22  /** Show the Axon orange "AI" badge next to the name (full variant). */
23  badge?: boolean
24  variant?: "default" | "compact"
25  /** Compact: render as a selected (rose-outlined) row. */
26  selected?: boolean
27}
28 
29const PRESENCE: Record<PersonaPresence, string> = {
30  online: "var(--aurora-success)",
31  busy: "var(--aurora-accent-pink)",
32  away: "var(--aurora-warn)",
33  offline: "var(--aurora-neutral)",
34}
35 
36const PRESENCE_LABEL: Record<PersonaPresence, string> = {
37  online: "Online",
38  busy: "Busy",
39  away: "Away",
40  offline: "Offline",
41}
42 
43const AI_STYLE: React.CSSProperties = {
44  color: "var(--axon-orange)",
45  background: "var(--axon-orange-surface)",
46  borderColor: "var(--axon-orange-border)",
47}
48 
49function initials(name: string): string {
50  const parts = name.trim().split(/\s+/).slice(0, 2)
51  return parts.map((p) => p[0]?.toUpperCase() ?? "").join("") || "?"
52}
53 
54// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).
55 
56const Persona = (
57    { ref,
58      name,
59      role,
60      description,
61      presence,
62      tags,
63      badge = false,
64      variant = "default",
65      selected = false,
66      className,
67      style,
68      role: elementRole,
69      tabIndex,
70      onClick,
71      onKeyDown,
72      ...props
73    }: PersonaProps & { ref?: React.Ref<HTMLDivElement> }
74  ) => {
75    const sub = role ?? description
76    const dotColor = presence ? PRESENCE[presence] : null
77    const isCompact = variant === "compact"
78    const dotSize = isCompact ? 10 : 13
79    const interactiveProps = onClick
80      ? {
81          role: elementRole ?? "button",
82          tabIndex: tabIndex ?? 0,
83        }
84      : {
85          role: elementRole,
86          tabIndex,
87        }
88 
89    const handleKeyDown = React.useCallback(
90      (event: React.KeyboardEvent<HTMLDivElement>) => {
91        onKeyDown?.(event)
92// … truncated