Spaces:
Sleeping
Sleeping
File size: 2,201 Bytes
14fdc5e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | "use client";
import { ReactNode, useState } from "react";
type RecognitionInstance = {
continuous: boolean;
interimResults: boolean;
lang: string;
onresult: ((event: any) => void) | null;
onerror: ((event: any) => void) | null;
onend: (() => void) | null;
start: () => void;
stop: () => void;
};
type RecognitionConstructor = new () => RecognitionInstance;
declare global {
interface Window {
SpeechRecognition?: RecognitionConstructor;
webkitSpeechRecognition?: RecognitionConstructor;
}
}
type VoiceInputProps = {
onTranscript: (text: string) => void;
disabled?: boolean;
className?: string;
idleLabel?: string;
listeningLabel?: string;
title?: string;
children?: ReactNode;
listeningContent?: ReactNode;
};
export function VoiceInput({
onTranscript,
disabled = false,
className,
idleLabel = "Voice",
listeningLabel = "Listening...",
title,
children,
listeningContent
}: VoiceInputProps) {
const [isListening, setIsListening] = useState(false);
const toggleListen = () => {
const Constructor = window.SpeechRecognition ?? window.webkitSpeechRecognition;
if (!Constructor) {
alert("Speech recognition is not supported in this browser.");
return;
}
const recognition = new Constructor();
recognition.lang = "en-US";
recognition.continuous = false;
recognition.interimResults = false;
recognition.onresult = (event) => {
const transcript = event?.results?.[0]?.[0]?.transcript;
if (typeof transcript === "string" && transcript.trim()) {
onTranscript(transcript.trim());
}
};
recognition.onerror = () => {
setIsListening(false);
};
recognition.onend = () => {
setIsListening(false);
};
setIsListening(true);
recognition.start();
};
return (
<button
type="button"
onClick={toggleListen}
disabled={disabled || isListening}
className={className}
title={title}
>
{isListening
? (listeningContent ?? listeningLabel)
: (children ?? idleLabel)}
</button>
);
}
|