function MainComponent() { const [userInput, setUserInput] = React.useState(''); const [conversation, setConversation] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const [proficiencyLevel, setProficiencyLevel] = React.useState(''); const [feedback, setFeedback] = React.useState(''); const fetchAIResponse = async (text)=>{ setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: text } ], system_prompt: 'Provide conversation continuation, proficiency assessment, and detailed feedback' }) }); const data = await response.json(); if (data && data.choices && data.choices.length > 0) { const { content } = data.choices[0].message; const proficiencyRegex = content.match(/(A1|A2|B1|B2|C1|C2)/); const feedbackStart = content.indexOf("Feedback:"); const proficiency = proficiencyRegex ? proficiencyRegex[0] : "Assessment pending"; const feedbackText = feedbackStart !== -1 ? content.substring(feedbackStart) : "Detailed feedback pending"; setProficiencyLevel(proficiency); setFeedback(feedbackText); return content; } } catch (error) { console.error("Error fetching AI response:", error); return "Sorry, something went wrong."; } finally{ setIsLoading(false); } }; const handleInputChange = (e)=>{ setUserInput(e.target.value); }; const handleSendClick = async ()=>{ const chatResponse = await fetchAIResponse(userInput); const newConversationEntry = { user: userInput, ai: chatResponse, proficiency: proficiencyLevel, feedback: feedback }; setConversation([ ...conversation, newConversationEntry ]); setUserInput(''); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f4f7f6] p-4", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-[#2d2d2d] text-4xl mb-8", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, "English Conversation AI"), isLoading ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Loading...") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "conversationInput", className: "w-full p-2 bg-white rounded-md", rows: "4", placeholder: "Type your message here...", value: userInput, onChange: handleInputChange, __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-4 p-2 w-full bg-[#007bff] text-white font-semibold rounded-md", onClick: handleSendClick, __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Send")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl mt-8", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, conversation.map((entry, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "bg-white p-4 rounded-md mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto mb-2", __source: { fileName: "", lineNumber: 66, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 66, columnNumber: 53 }, __self: this }, "You:"), " ", entry.user), /*#__PURE__*/ React.createElement("div", { className: "font-roboto mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 67, columnNumber: 53 }, __self: this }, "AI:"), " ", entry.ai), /*#__PURE__*/ React.createElement("div", { className: "font-roboto mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 68, columnNumber: 53 }, __self: this }, "Proficiency Level:"), " ", entry.proficiency), /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 69, columnNumber: 48 }, __self: this }, "Feedback:"), " ", entry.feedback))))))); }