ai-native-form
Version:
AI-powered React form assistant with GPT-4, speech input, and schema auto-generation.
30 lines (29 loc) • 2.02 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from "react";
import SpeechRecognition, { useSpeechRecognition } from "react-speech-recognition";
export const AIPromptInput = ({ onSubmit, hideButton = false }) => {
const [input, setInput] = useState("");
const [listeningStarted, setListeningStarted] = useState(false);
const { transcript, listening, resetTranscript, browserSupportsSpeechRecognition, } = useSpeechRecognition();
useEffect(() => {
if (!listening && listeningStarted) {
setInput(transcript);
setListeningStarted(false);
}
}, [listening, transcript]);
const handleListen = () => {
if (!browserSupportsSpeechRecognition) {
alert("Your browser does not support speech recognition.");
return;
}
resetTranscript();
setListeningStarted(true);
SpeechRecognition.startListening({ continuous: false });
};
const handleSubmit = () => {
if (!input.trim())
return;
onSubmit(input.trim());
};
return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("textarea", { value: input, onChange: (e) => setInput(e.target.value), placeholder: "Enter a prompt or speak...", rows: 2, className: "w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 resize-none" }), _jsx("button", { type: "button", onClick: handleListen, className: `shrink-0 flex items-center px-3 py-2 rounded-lg transition ${listening ? "bg-red-600 text-white" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`, title: listening ? "Listening..." : "Speak", children: listening ? "🔴" : "🎙️" })] }), !hideButton && (_jsx("div", { className: "text-right", children: _jsx("button", { type: "button", onClick: handleSubmit, className: "bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg", children: "Fill with AI" }) }))] }));
};