function MainComponent() { const [userInput, setUserInput] = React.useState(""); const [aiResponse, setAiResponse] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const fetchAiResponse = async ()=>{ setIsLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": userInput } ], system_prompt: 'Continue the conversation in English.' }) }); const data = await response.json(); if (data && data.choices && data.choices.length > 0) { setAiResponse(data.choices[0].message.content); } else { setAiResponse("Sorry, I couldn't understand that."); } setIsLoading(false); }; const handleInputChange = (event)=>{ setUserInput(event.target.value); }; const handleSubmit = async (event)=>{ event.preventDefault(); if (userInput.trim() !== "") { fetchAiResponse(); } }; React.useEffect(()=>{ const handleSpeech = async ()=>{ const recognition = new window.webkitSpeechRecognition(); recognition.lang = 'en-US'; recognition.interimResults = false; recognition.maxAlternatives = 1; recognition.onresult = (event)=>{ const speechToText = event.results[0][0].transcript; setUserInput(speechToText); fetchAiResponse(); }; recognition.start(); }; handleSpeech(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f5]", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-6 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-4 text-3xl font-bold text-center font-roboto", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "English Conversation Practice"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "userInput", className: "block mb-2 text-sm font-medium text-gray-900 font-roboto", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Your Message"), /*#__PURE__*/ React.createElement("textarea", { id: "userInput", name: "userMessage", rows: "4", className: "block w-full p-2.5 text-sm text-gray-900 bg-gray-50 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 font-roboto", placeholder: "Type your message here or speak it aloud...", value: userInput, onChange: handleInputChange, __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "py-2.5 px-5 mt-4 text-sm font-medium text-white bg-blue-600 rounded-lg border border-blue-700 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, isLoading ? 'Loading...' : 'Send')), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mb-2 text-xl font-medium text-gray-900 font-roboto", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "AI Response"), /*#__PURE__*/ React.createElement("div", { className: "p-4 text-sm text-gray-700 bg-gray-100 rounded-lg font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, aiResponse || "AI response will appear here...")))); }