Aurora AI Speech Input

1"use client"
2 
3import * as React from "react"
4import { Mic, Square } from "lucide-react"
5import { Button } from "@/registry/aurora/ui/button"
6import { Textarea } from "@/registry/aurora/ui/textarea"
7import { cn } from "@/lib/utils"
8 
9// ---------------------------------------------------------------------------
10// SpeechInput — voice capture: mic toggle, live level meter, transcript area.
11//
12// CD parity: a raised navy panel with a rose ("LISTENING") status, a pink mic
13// glyph, a pulsing rose status dot, a row of rose pill bars that animate as a
14// live level meter while recording, a neutral icon Stop/Mic toggle, and a
15// transcript Textarea. Rose is the Aurora secondary accent for recording state;
16// AI/automation identity remains Axon orange elsewhere.
17//
18// Architecture stays shadcn: forwardRef to the underlying <textarea> (so the
19// public TextareaHTMLAttributes API is preserved), displayName, React.memo, and
20// the Button escape hatches (variant="neutral" size="icon"). Recording state is
21// uncontrolled (defaultRecording) and toggled by the header button.
22// ---------------------------------------------------------------------------
23 
24const ROSE = "var(--aurora-accent-pink)"
25 
26// 14 pill bars. Relative heights (0..1) drive the live meter while recording.
27const BAR_LEVELS = [0.4, 0.62, 0.5, 0.78, 0.46, 1, 0.84, 0.58, 0.7, 0.94, 0.66, 0.52, 0.74, 0.34]
28 
29// Styles: registry/aurora/styles/aurora-components.css (@layer aurora-components).
30 
31export interface SpeechInputProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
32  /** Start in the recording (listening) state — shows the live meter + LISTENING status. */
33  defaultRecording?: boolean
34}
35 
36const SpeechInput = function SpeechInput({ ref, className, style, defaultRecording = false, ...props }: SpeechInputProps & { ref?: React.Ref<HTMLTextAreaElement> }) {
37    const [recording, setRecording] = React.useState(defaultRecording)
38 
39    return (
40      <div
41        style={{
42          display: "grid",
43          gap: "13px",
44          padding: "16px 18px",
45          borderRadius: "var(--aurora-radius-1)",
46          border: "1px solid var(--aurora-border-strong)",
47          background: "var(--aurora-surface-raised)",
48          boxShadow: "var(--aurora-shadow-medium), var(--aurora-highlight-medium)",
49        }}
50      >
51        {/* Header — mic glyph + title + LISTENING status, stop/mic toggle on the right */}
52        <div style={{ display: "flex", alignItems: "center", gap: "9px" }}>
53// … truncated