ai-native-form/dist/AIPromptInput.js

AI-powered React form assistant with GPT-4, speech input, and schema auto-generation.

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 }) => {
    const [input, setInput] = useState("");
    const [listeningStarted, setListeningStarted] = useState(false);
    const { transcript, listening, resetTranscript, browserSupportsSpeechRecognition, } = useSpeechRecognition();
    useEffect(() => {
        if (!listening && listeningStarted) {
            setInput(transcript);
            setListeningStarted(false);
        }
    }, [transcript, listening]);
    const handleListen = () => {
        if (!browserSupportsSpeechRecognition) {
            alert("Your browser does not support speech recognition.");
            return;
        }
        resetTranscript();
        setListeningStarted(true);
        SpeechRecognition.startListening({ continuous: false });
    };
    return (_jsxs("div", { className: "space-y-3 mt-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("textarea", { value: input, placeholder: "Enter a prompt or speak...", onChange: (e) => setInput(e.target.value), 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 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200", title: "Speak", children: "\uD83C\uDF99\uFE0F" })] }), _jsx("div", { className: "text-right", children: _jsx("button", { type: "button", onClick: () => onSubmit(input), className: "bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg", children: "Fill with AI" }) })] }));
};