sparkecoder 0.1.20 → 0.1.22

package/web/.next/standalone/web/src/components/ai-elements/speech-input.tsx

@@ -2,7 +2,7 @@
 
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { LoaderIcon, MicIcon, SquareIcon } from "lucide-react";
+import { LoaderIcon, MicIcon, MicOffIcon } from "lucide-react";
 import {
   type ComponentProps,
   useCallback,
@@ -17,6 +17,7 @@ interface SpeechRecognition extends EventTarget {
   lang: string;
   start(): void;
   stop(): void;
+  abort(): void;
   onstart: ((this: SpeechRecognition, ev: Event) => void) | null;
   onend: ((this: SpeechRecognition, ev: Event) => void) | null;
   onresult:
@@ -67,8 +68,11 @@ declare global {
 
 type SpeechInputMode = "speech-recognition" | "media-recorder" | "none";
 
-export type SpeechInputProps = ComponentProps<typeof Button> & {
+export type SpeechInputProps = Omit<ComponentProps<typeof Button>, 'onClick'> & {
+  /** Called with finalized transcript text (confirmed words) */
   onTranscriptionChange?: (text: string) => void;
+  /** Called with interim transcript text as user speaks (live preview) */
+  onInterimTranscription?: (text: string) => void;
   /**
    * Callback for when audio is recorded using MediaRecorder fallback.
    * This is called in browsers that don't support the Web Speech API (Firefox, Safari).
@@ -98,19 +102,20 @@ const detectSpeechInputMode = (): SpeechInputMode => {
 export const SpeechInput = ({
   className,
   onTranscriptionChange,
+  onInterimTranscription,
   onAudioRecorded,
   lang = "en-US",
+  disabled,
   ...props
 }: SpeechInputProps) => {
   const [isListening, setIsListening] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
   const [mode, setMode] = useState<SpeechInputMode>("none");
-  const [recognition, setRecognition] = useState<SpeechRecognition | null>(
-    null
-  );
   const recognitionRef = useRef<SpeechRecognition | null>(null);
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
   const audioChunksRef = useRef<Blob[]>([]);
+  // Track the accumulated final transcript for the current session
+  const sessionTranscriptRef = useRef<string>("");
 
   // Detect mode on mount
   useEffect(() => {
@@ -123,9 +128,9 @@ export const SpeechInput = ({
       return;
     }
 
-    const SpeechRecognition =
+    const SpeechRecognitionAPI =
       window.SpeechRecognition || window.webkitSpeechRecognition;
-    const speechRecognition = new SpeechRecognition();
+    const speechRecognition = new SpeechRecognitionAPI();
 
     speechRecognition.continuous = true;
     speechRecognition.interimResults = true;
@@ -133,41 +138,58 @@ export const SpeechInput = ({
 
     speechRecognition.onstart = () => {
       setIsListening(true);
+      sessionTranscriptRef.current = "";
     };
 
     speechRecognition.onend = () => {
       setIsListening(false);
+      // Clear any interim display when stopped
+      onInterimTranscription?.("");
     };
 
     speechRecognition.onresult = (event) => {
-      let finalTranscript = "";
+      let interimTranscript = "";
+      let newFinalTranscript = "";
 
       for (let i = event.resultIndex; i < event.results.length; i++) {
         const result = event.results[i];
+        const transcript = result[0]?.transcript ?? "";
+        
         if (result.isFinal) {
-          finalTranscript += result[0]?.transcript ?? "";
+          newFinalTranscript += transcript;
+        } else {
+          interimTranscript += transcript;
         }
       }
 
-      if (finalTranscript) {
-        onTranscriptionChange?.(finalTranscript);
+      // If we have new finalized text, add it to the input
+      if (newFinalTranscript) {
+        sessionTranscriptRef.current += newFinalTranscript;
+        onTranscriptionChange?.(newFinalTranscript);
+        // Clear interim since it's now final
+        onInterimTranscription?.("");
+      }
+      
+      // Show interim results as live preview
+      if (interimTranscript) {
+        onInterimTranscription?.(interimTranscript);
       }
     };
 
     speechRecognition.onerror = (event) => {
       console.error("Speech recognition error:", event.error);
       setIsListening(false);
+      onInterimTranscription?.("");
     };
 
     recognitionRef.current = speechRecognition;
-    setRecognition(speechRecognition);
 
     return () => {
       if (recognitionRef.current) {
-        recognitionRef.current.stop();
+        recognitionRef.current.abort();
       }
     };
-  }, [mode, onTranscriptionChange, lang]);
+  }, [mode, lang, onTranscriptionChange, onInterimTranscription]);
 
   // Start MediaRecorder recording
   const startMediaRecorder = useCallback(async () => {
@@ -241,11 +263,16 @@ export const SpeechInput = ({
   }, []);
 
   const toggleListening = useCallback(() => {
-    if (mode === "speech-recognition" && recognition) {
+    if (mode === "speech-recognition" && recognitionRef.current) {
       if (isListening) {
-        recognition.stop();
+        recognitionRef.current.stop();
       } else {
-        recognition.start();
+        try {
+          recognitionRef.current.start();
+        } catch (e) {
+          // Recognition might already be started
+          console.warn("Speech recognition start error:", e);
+        }
       }
     } else if (mode === "media-recorder") {
       if (isListening) {
@@ -254,45 +281,71 @@ export const SpeechInput = ({
         startMediaRecorder();
       }
     }
-  }, [mode, recognition, isListening, startMediaRecorder, stopMediaRecorder]);
+  }, [mode, isListening, startMediaRecorder, stopMediaRecorder]);
 
   // Determine if button should be disabled
-  const isDisabled =
+  const isButtonDisabled =
+    disabled ||
     mode === "none" ||
-    (mode === "speech-recognition" && !recognition) ||
+    (mode === "speech-recognition" && !recognitionRef.current) ||
     (mode === "media-recorder" && !onAudioRecorded) ||
     isProcessing;
 
+  // Not supported - show disabled mic with tooltip hint
+  if (mode === "none") {
+    return (
+      <Button
+        type="button"
+        className={cn(
+          "relative rounded-full opacity-50 cursor-not-allowed",
+          className
+        )}
+        disabled
+        title="Speech recognition not supported in this browser"
+        {...props}
+      >
+        <MicOffIcon className="size-4" />
+      </Button>
+    );
+  }
+
   return (
     <div className="relative inline-flex items-center justify-center">
-      {/* Animated pulse rings */}
-      {isListening &&
-        [0, 1, 2].map((index) => (
-          <div
-            className="absolute inset-0 animate-ping rounded-full border-2 border-red-400/30"
-            key={index}
-            style={{
-              animationDelay: `${index * 0.3}s`,
-              animationDuration: "2s",
-            }}
+      {/* Animated pulse rings when listening */}
+      {isListening && (
+        <>
+          <span className="absolute inset-0 rounded-full bg-red-500/20 animate-ping" />
+          <span 
+            className="absolute inset-0 rounded-full bg-red-500/10 animate-ping" 
+            style={{ animationDelay: "0.2s" }}
           />
-        ))}
+        </>
+      )}
 
       {/* Main record button */}
       <Button
+        type="button"
         className={cn(
-          "relative z-10 rounded-full transition-all duration-300",
+          "relative z-10 rounded-full transition-all duration-200",
           isListening
-            ? "bg-destructive text-white hover:bg-destructive/80 hover:text-white"
-            : "bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground",
+            ? "bg-red-500 text-white hover:bg-red-600 shadow-lg shadow-red-500/25"
+            : "hover:bg-muted",
           className
         )}
-        disabled={isDisabled}
+        disabled={isButtonDisabled}
         onClick={toggleListening}
+        title={isListening ? "Stop recording" : "Start voice input"}
+        variant={isListening ? "default" : "ghost"}
         {...props}
       >
         {isProcessing && <LoaderIcon className="size-4 animate-spin" />}
-        {!isProcessing && isListening && <SquareIcon className="size-4" />}
+        {!isProcessing && isListening && (
+          <div className="relative">
+            <MicIcon className="size-4" />
+            {/* Recording indicator dot */}
+            <span className="absolute -top-0.5 -right-0.5 size-2 bg-white rounded-full animate-pulse" />
+          </div>
+        )}
         {!(isProcessing || isListening) && <MicIcon className="size-4" />}
       </Button>
     </div>