@vvedantb/ui 0.1.0 → 0.1.2

package/src/ai-elements/speech-input.tsx

@@ -1,290 +1,290 @@
-"use client";
-import type { ComponentProps } from "react";
-import { IconMicrophone, IconSquare } from "@tabler/icons-react";
-import { Button } from "../ui/button";
-import { Spinner } from "../ui/spinner";
-import { cn } from "../utils/cn";
-import { useEffect, useRef, useState } from "react";
-interface SpeechRecognition extends EventTarget {
-  continuous: boolean;
-  interimResults: boolean;
-  lang: string;
-  start(): void;
-  stop(): void;
-  onstart: ((this: SpeechRecognition, ev: Event) => void) | null;
-  onend: ((this: SpeechRecognition, ev: Event) => void) | null;
-  onresult:
-    | ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => void)
-    | null;
-  onerror:
-    | ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => void)
-    | null;
-}
-interface SpeechRecognitionEvent extends Event {
-  results: SpeechRecognitionResultList;
-  resultIndex: number;
-}
-interface SpeechRecognitionResultList {
-  readonly length: number;
-  item(index: number): SpeechRecognitionResult;
-  [index: number]: SpeechRecognitionResult;
-}
-interface SpeechRecognitionResult {
-  readonly length: number;
-  item(index: number): SpeechRecognitionAlternative;
-  [index: number]: SpeechRecognitionAlternative;
-  isFinal: boolean;
-}
-interface SpeechRecognitionAlternative {
-  transcript: string;
-  confidence: number;
-}
-interface SpeechRecognitionErrorEvent extends Event {
-  error: string;
-}
-declare global {
-  interface Window {
-    SpeechRecognition: new () => SpeechRecognition;
-    webkitSpeechRecognition: new () => SpeechRecognition;
-  }
-}
-type SpeechInputMode = "speech-recognition" | "media-recorder" | "none";
-export type SpeechInputProps = ComponentProps<typeof Button> & {
-  onTranscriptionChange?: (text: string) => void;
-  onAudioRecorded?: (audioBlob: Blob) => Promise<string>;
-  lang?: string;
-};
-const detectSpeechInputMode = (): SpeechInputMode => {
-  if (typeof window === "undefined") {
-    return "none";
-  }
-  if ("SpeechRecognition" in window || "webkitSpeechRecognition" in window) {
-    return "speech-recognition";
-  }
-  if ("MediaRecorder" in window && "mediaDevices" in navigator) {
-    return "media-recorder";
-  }
-  return "none";
-};
-export const SpeechInput = ({
-  className,
-  onTranscriptionChange,
-  onAudioRecorded,
-  lang = "en-US",
-  ...props
-}: SpeechInputProps) => {
-  const [isListening, setIsListening] = useState(false);
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [mode] = useState<SpeechInputMode>(detectSpeechInputMode);
-  const [isRecognitionReady, setIsRecognitionReady] = useState(false);
-  const recognitionRef = useRef<SpeechRecognition | null>(null);
-  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
-  const streamRef = useRef<MediaStream | null>(null);
-  const audioChunksRef = useRef<Blob[]>([]);
-  const onTranscriptionChangeRef = useRef<
-    SpeechInputProps["onTranscriptionChange"]
-  >(onTranscriptionChange);
-  const onAudioRecordedRef =
-    useRef<SpeechInputProps["onAudioRecorded"]>(onAudioRecorded);
-  onTranscriptionChangeRef.current = onTranscriptionChange;
-  onAudioRecordedRef.current = onAudioRecorded;
-  useEffect(() => {
-    if (mode !== "speech-recognition") {
-      return;
-    }
-    const SpeechRecognitionCtor =
-      window.SpeechRecognition || window.webkitSpeechRecognition;
-    const speechRecognition = new SpeechRecognitionCtor();
-    speechRecognition.continuous = true;
-    speechRecognition.interimResults = true;
-    speechRecognition.lang = lang;
-    const handleStart = () => {
-      setIsListening(true);
-    };
-    const handleEnd = () => {
-      setIsListening(false);
-    };
-    const handleResult = (event: Event) => {
-      const speechEvent = event as SpeechRecognitionEvent;
-      let finalTranscript = "";
-      for (
-        let i = speechEvent.resultIndex;
-        i < speechEvent.results.length;
-        i += 1
-      ) {
-        const result = speechEvent.results[i];
-        if (result?.isFinal) {
-          finalTranscript += result[0]?.transcript ?? "";
-        }
-      }
-      if (finalTranscript) {
-        onTranscriptionChangeRef.current?.(finalTranscript);
-      }
-    };
-    const handleError = () => {
-      setIsListening(false);
-    };
-    speechRecognition.addEventListener("start", handleStart);
-    speechRecognition.addEventListener("end", handleEnd);
-    speechRecognition.addEventListener("result", handleResult);
-    speechRecognition.addEventListener("error", handleError);
-    recognitionRef.current = speechRecognition;
-    setIsRecognitionReady(true);
-    return () => {
-      speechRecognition.removeEventListener("start", handleStart);
-      speechRecognition.removeEventListener("end", handleEnd);
-      speechRecognition.removeEventListener("result", handleResult);
-      speechRecognition.removeEventListener("error", handleError);
-      speechRecognition.stop();
-      recognitionRef.current = null;
-      setIsRecognitionReady(false);
-    };
-  }, [mode, lang]);
-  useEffect(
-    () => () => {
-      if (mediaRecorderRef.current?.state === "recording") {
-        mediaRecorderRef.current.stop();
-      }
-      if (streamRef.current) {
-        for (const track of streamRef.current.getTracks()) {
-          track.stop();
-        }
-      }
-    },
-    [],
-  );
-  const startMediaRecorder = async () => {
-    if (!onAudioRecordedRef.current) {
-      return;
-    }
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      streamRef.current = stream;
-      const mediaRecorder = new MediaRecorder(stream);
-      audioChunksRef.current = [];
-      const handleDataAvailable = (event: BlobEvent) => {
-        if (event.data.size > 0) {
-          audioChunksRef.current.push(event.data);
-        }
-      };
-      const handleStop = async () => {
-        for (const track of stream.getTracks()) {
-          track.stop();
-        }
-        streamRef.current = null;
-        const audioBlob = new Blob(audioChunksRef.current, {
-          type: "audio/webm",
-        });
-        if (audioBlob.size > 0 && onAudioRecordedRef.current) {
-          setIsProcessing(true);
-          try {
-            const transcript = await onAudioRecordedRef.current(audioBlob);
-            if (transcript) {
-              onTranscriptionChangeRef.current?.(transcript);
-            }
-          } catch {
-          } finally {
-            setIsProcessing(false);
-          }
-        }
-      };
-      const handleError = () => {
-        setIsListening(false);
-        for (const track of stream.getTracks()) {
-          track.stop();
-        }
-        streamRef.current = null;
-      };
-      mediaRecorder.addEventListener("dataavailable", handleDataAvailable);
-      mediaRecorder.addEventListener("stop", handleStop);
-      mediaRecorder.addEventListener("error", handleError);
-      mediaRecorderRef.current = mediaRecorder;
-      mediaRecorder.start();
-      setIsListening(true);
-    } catch {
-      setIsListening(false);
-    }
-  };
-  const stopMediaRecorder = () => {
-    if (mediaRecorderRef.current?.state === "recording") {
-      mediaRecorderRef.current.stop();
-    }
-    setIsListening(false);
-  };
-  const toggleListening = () => {
-    if (mode === "speech-recognition" && recognitionRef.current) {
-      if (isListening) {
-        recognitionRef.current.stop();
-      } else {
-        recognitionRef.current.start();
-      }
-    } else if (mode === "media-recorder") {
-      if (isListening) {
-        stopMediaRecorder();
-      } else {
-        startMediaRecorder();
-      }
-    }
-  };
-  const isDisabled =
-    mode === "none" ||
-    (mode === "speech-recognition" && !isRecognitionReady) ||
-    (mode === "media-recorder" && !onAudioRecorded) ||
-    isProcessing;
-  return (
-    <div className="relative inline-flex items-center justify-center">
-      {isListening
-        ? [0, 1, 2].map((index) => (
-            <div
-              className="absolute inset-0 animate-ping rounded-full border-2 border-danger/30"
-              key={index}
-              style={{
-                animationDelay: `${index * 0.3}s`,
-                animationDuration: "2s",
-              }}
-            />
-          ))
-        : null}
-
-      <Button
-        className={cn(
-          "relative z-10 rounded-full transition-[background-color,transform] duration-200 ease-smooth active:duration-100 active:ease-out",
-          isListening
-            ? "bg-destructive text-danger-foreground hover:bg-destructive/80 hover:text-danger-foreground"
-            : "bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground",
-          className,
-        )}
-        disabled={isDisabled}
-        onClick={toggleListening}
-        {...props}
-      >
-        <span className="relative inline-flex size-4 items-center justify-center">
-          <span
-            className={cn(
-              "absolute inset-0 flex items-center justify-center transition-opacity duration-150 ease-out",
-              isProcessing ? "opacity-100" : "opacity-0",
-            )}
-          >
-            <Spinner />
-          </span>
-          <span
-            className={cn(
-              "absolute inset-0 flex items-center justify-center transition-opacity duration-150 ease-out",
-              !isProcessing && isListening ? "opacity-100" : "opacity-0",
-            )}
-          >
-            <IconSquare className="size-4" />
-          </span>
-          <span
-            className={cn(
-              "flex items-center justify-center transition-opacity duration-150 ease-out",
-              isProcessing || isListening ? "opacity-0" : "opacity-100",
-            )}
-          >
-            <IconMicrophone className="size-4" />
-          </span>
-        </span>
-      </Button>
-    </div>
-  );
-};
+"use client";
+import type { ComponentProps } from "react";
+import { IconMicrophone, IconSquare } from "@tabler/icons-react";
+import { Button } from "../ui/button";
+import { Spinner } from "../ui/spinner";
+import { cn } from "../utils/cn";
+import { useEffect, useRef, useState } from "react";
+interface SpeechRecognition extends EventTarget {
+  continuous: boolean;
+  interimResults: boolean;
+  lang: string;
+  start(): void;
+  stop(): void;
+  onstart: ((this: SpeechRecognition, ev: Event) => void) | null;
+  onend: ((this: SpeechRecognition, ev: Event) => void) | null;
+  onresult:
+    | ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => void)
+    | null;
+  onerror:
+    | ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => void)
+    | null;
+}
+interface SpeechRecognitionEvent extends Event {
+  results: SpeechRecognitionResultList;
+  resultIndex: number;
+}
+interface SpeechRecognitionResultList {
+  readonly length: number;
+  item(index: number): SpeechRecognitionResult;
+  [index: number]: SpeechRecognitionResult;
+}
+interface SpeechRecognitionResult {
+  readonly length: number;
+  item(index: number): SpeechRecognitionAlternative;
+  [index: number]: SpeechRecognitionAlternative;
+  isFinal: boolean;
+}
+interface SpeechRecognitionAlternative {
+  transcript: string;
+  confidence: number;
+}
+interface SpeechRecognitionErrorEvent extends Event {
+  error: string;
+}
+declare global {
+  interface Window {
+    SpeechRecognition: new () => SpeechRecognition;
+    webkitSpeechRecognition: new () => SpeechRecognition;
+  }
+}
+type SpeechInputMode = "speech-recognition" | "media-recorder" | "none";
+export type SpeechInputProps = ComponentProps<typeof Button> & {
+  onTranscriptionChange?: (text: string) => void;
+  onAudioRecorded?: (audioBlob: Blob) => Promise<string>;
+  lang?: string;
+};
+const detectSpeechInputMode = (): SpeechInputMode => {
+  if (typeof window === "undefined") {
+    return "none";
+  }
+  if ("SpeechRecognition" in window || "webkitSpeechRecognition" in window) {
+    return "speech-recognition";
+  }
+  if ("MediaRecorder" in window && "mediaDevices" in navigator) {
+    return "media-recorder";
+  }
+  return "none";
+};
+export const SpeechInput = ({
+  className,
+  onTranscriptionChange,
+  onAudioRecorded,
+  lang = "en-US",
+  ...props
+}: SpeechInputProps) => {
+  const [isListening, setIsListening] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [mode] = useState<SpeechInputMode>(detectSpeechInputMode);
+  const [isRecognitionReady, setIsRecognitionReady] = useState(false);
+  const recognitionRef = useRef<SpeechRecognition | null>(null);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const streamRef = useRef<MediaStream | null>(null);
+  const audioChunksRef = useRef<Blob[]>([]);
+  const onTranscriptionChangeRef = useRef<
+    SpeechInputProps["onTranscriptionChange"]
+  >(onTranscriptionChange);
+  const onAudioRecordedRef =
+    useRef<SpeechInputProps["onAudioRecorded"]>(onAudioRecorded);
+  onTranscriptionChangeRef.current = onTranscriptionChange;
+  onAudioRecordedRef.current = onAudioRecorded;
+  useEffect(() => {
+    if (mode !== "speech-recognition") {
+      return;
+    }
+    const SpeechRecognitionCtor =
+      window.SpeechRecognition || window.webkitSpeechRecognition;
+    const speechRecognition = new SpeechRecognitionCtor();
+    speechRecognition.continuous = true;
+    speechRecognition.interimResults = true;
+    speechRecognition.lang = lang;
+    const handleStart = () => {
+      setIsListening(true);
+    };
+    const handleEnd = () => {
+      setIsListening(false);
+    };
+    const handleResult = (event: Event) => {
+      const speechEvent = event as SpeechRecognitionEvent;
+      let finalTranscript = "";
+      for (
+        let i = speechEvent.resultIndex;
+        i < speechEvent.results.length;
+        i += 1
+      ) {
+        const result = speechEvent.results[i];
+        if (result?.isFinal) {
+          finalTranscript += result[0]?.transcript ?? "";
+        }
+      }
+      if (finalTranscript) {
+        onTranscriptionChangeRef.current?.(finalTranscript);
+      }
+    };
+    const handleError = () => {
+      setIsListening(false);
+    };
+    speechRecognition.addEventListener("start", handleStart);
+    speechRecognition.addEventListener("end", handleEnd);
+    speechRecognition.addEventListener("result", handleResult);
+    speechRecognition.addEventListener("error", handleError);
+    recognitionRef.current = speechRecognition;
+    setIsRecognitionReady(true);
+    return () => {
+      speechRecognition.removeEventListener("start", handleStart);
+      speechRecognition.removeEventListener("end", handleEnd);
+      speechRecognition.removeEventListener("result", handleResult);
+      speechRecognition.removeEventListener("error", handleError);
+      speechRecognition.stop();
+      recognitionRef.current = null;
+      setIsRecognitionReady(false);
+    };
+  }, [mode, lang]);
+  useEffect(
+    () => () => {
+      if (mediaRecorderRef.current?.state === "recording") {
+        mediaRecorderRef.current.stop();
+      }
+      if (streamRef.current) {
+        for (const track of streamRef.current.getTracks()) {
+          track.stop();
+        }
+      }
+    },
+    [],
+  );
+  const startMediaRecorder = async () => {
+    if (!onAudioRecordedRef.current) {
+      return;
+    }
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      streamRef.current = stream;
+      const mediaRecorder = new MediaRecorder(stream);
+      audioChunksRef.current = [];
+      const handleDataAvailable = (event: BlobEvent) => {
+        if (event.data.size > 0) {
+          audioChunksRef.current.push(event.data);
+        }
+      };
+      const handleStop = async () => {
+        for (const track of stream.getTracks()) {
+          track.stop();
+        }
+        streamRef.current = null;
+        const audioBlob = new Blob(audioChunksRef.current, {
+          type: "audio/webm",
+        });
+        if (audioBlob.size > 0 && onAudioRecordedRef.current) {
+          setIsProcessing(true);
+          try {
+            const transcript = await onAudioRecordedRef.current(audioBlob);
+            if (transcript) {
+              onTranscriptionChangeRef.current?.(transcript);
+            }
+          } catch {
+          } finally {
+            setIsProcessing(false);
+          }
+        }
+      };
+      const handleError = () => {
+        setIsListening(false);
+        for (const track of stream.getTracks()) {
+          track.stop();
+        }
+        streamRef.current = null;
+      };
+      mediaRecorder.addEventListener("dataavailable", handleDataAvailable);
+      mediaRecorder.addEventListener("stop", handleStop);
+      mediaRecorder.addEventListener("error", handleError);
+      mediaRecorderRef.current = mediaRecorder;
+      mediaRecorder.start();
+      setIsListening(true);
+    } catch {
+      setIsListening(false);
+    }
+  };
+  const stopMediaRecorder = () => {
+    if (mediaRecorderRef.current?.state === "recording") {
+      mediaRecorderRef.current.stop();
+    }
+    setIsListening(false);
+  };
+  const toggleListening = () => {
+    if (mode === "speech-recognition" && recognitionRef.current) {
+      if (isListening) {
+        recognitionRef.current.stop();
+      } else {
+        recognitionRef.current.start();
+      }
+    } else if (mode === "media-recorder") {
+      if (isListening) {
+        stopMediaRecorder();
+      } else {
+        startMediaRecorder();
+      }
+    }
+  };
+  const isDisabled =
+    mode === "none" ||
+    (mode === "speech-recognition" && !isRecognitionReady) ||
+    (mode === "media-recorder" && !onAudioRecorded) ||
+    isProcessing;
+  return (
+    <div className="relative inline-flex items-center justify-center">
+      {isListening
+        ? [0, 1, 2].map((index) => (
+            <div
+              className="absolute inset-0 animate-ping rounded-full border-2 border-danger/30"
+              key={index}
+              style={{
+                animationDelay: `${index * 0.3}s`,
+                animationDuration: "2s",
+              }}
+            />
+          ))
+        : null}
+
+      <Button
+        className={cn(
+          "relative z-10 rounded-full transition-[background-color,transform] duration-200 ease-smooth active:duration-100 active:ease-out",
+          isListening
+            ? "bg-destructive text-danger-foreground hover:bg-destructive/80 hover:text-danger-foreground"
+            : "bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground",
+          className,
+        )}
+        disabled={isDisabled}
+        onClick={toggleListening}
+        {...props}
+      >
+        <span className="relative inline-flex size-4 items-center justify-center">
+          <span
+            className={cn(
+              "absolute inset-0 flex items-center justify-center transition-opacity duration-150 ease-out",
+              isProcessing ? "opacity-100" : "opacity-0",
+            )}
+          >
+            <Spinner />
+          </span>
+          <span
+            className={cn(
+              "absolute inset-0 flex items-center justify-center transition-opacity duration-150 ease-out",
+              !isProcessing && isListening ? "opacity-100" : "opacity-0",
+            )}
+          >
+            <IconSquare className="size-4" />
+          </span>
+          <span
+            className={cn(
+              "flex items-center justify-center transition-opacity duration-150 ease-out",
+              isProcessing || isListening ? "opacity-0" : "opacity-100",
+            )}
+          >
+            <IconMicrophone className="size-4" />
+          </span>
+        </span>
+      </Button>
+    </div>
+  );
+};