voice-button

1"use client"
2 
3import * as React from "react"
4import { CheckIcon, XIcon } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7import { Button } from "@/components/ui/button"
8import { LiveWaveform } from "@/components/ui/live-waveform"
9 
10export type VoiceButtonState =
11  | "idle"
12  | "recording"
13  | "processing"
14  | "success"
15  | "error"
16 
17export interface VoiceButtonProps
18  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onError"> {
19  /**
20   * Current state of the voice button
21   * @default "idle"
22   */
23  state?: VoiceButtonState
24 
25  /**
26   * Callback when button is clicked
27   */
28  onPress?: () => void
29 
30  /**
31   * Content to display on the left side (label)
32   * Can be a string or ReactNode for custom components
33   */
34  label?: React.ReactNode
35 
36  /**
37   * Content to display on the right side (e.g., keyboard shortcut)
38   * Can be a string or ReactNode for custom components
39   * @example "⌥Space" or <kbd>⌘K</kbd>
40   */
41  trailing?: React.ReactNode
42 
43  /**
44   * Icon to display in the center when idle (for icon size buttons)
45   */
46  icon?: React.ReactNode
47 
48  /**
49   * Custom variant for the button
50   * @default "outline"
51   */
52  variant?:
53    | "default"
54    | "destructive"
55    | "outline"
56    | "secondary"
57    | "ghost"
58    | "link"
59 
60  /**
61   * Size of the button
62   * @default "default"
63   */
64  size?: "default" | "sm" | "lg" | "icon"
65 
66  /**
67   * Custom className for the button
68   */
69  className?: string
70 
71  /**
72   * Custom className for the waveform container
73   */
74  waveformClassName?: string
75 
76  /**
77   * Duration in ms to show success/error states
78   * @default 1500
79   */
80  feedbackDuration?: number
81 
82  /**
83   * Disable the button
84   */
85  disabled?: boolean
86}
87 
88export const VoiceButton = React.forwardRef<
89  HTMLButtonElement,
90  VoiceButtonProps
91>(
92  (
93    {
94      state = "idle",
95      onPress,
96      label,
97      trailing,
98      icon,
99      variant = "outline",
100      size = "default",
101      className,
102      waveformClassName,
103      feedbackDuration = 1500,
104      disabled,
105      onClick,
106      ...props
107    },
108    ref
109  ) => {
110    const [showFeedback, setShowFeedback] = React.useState(false)
111 
112    React.useEffect(() => {
113      if (state === "success" || state === "error") {
114        setShowFeedback(true)
115        const timeout = setTimeout(
116          () => setShowFeedback(false),
117          feedbackDuration
118        )
119        return () => clearTimeout(timeout)
120      } else {
121        // Reset feedback when state changes away from success/error
122// … truncated