function MainComponent() { const [selectedLanguage, setSelectedLanguage] = useState("Spanish"); const [userMessage, setUserMessage] = useState(""); const [conversation, setConversation] = useState([]); const [loading, setLoading] = useState(false); const [corrections, setCorrections] = useState([]); const [vocabulary, setVocabulary] = useState([]); const languages = [ "Spanish", "French", "German", "Italian", "Chinese", "Japanese" ]; const handleSubmit = async ()=>{ if (!userMessage.trim()) return; setLoading(true); try { const botResponse = await fetch("/integrations/anthropic-claude-sonnet-3-5/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: `You are a native ${selectedLanguage} speaker having a conversation. Respond in ${selectedLanguage} and provide corrections and vocabulary suggestions. Return only JSON data matching the schema.` }, { role: "user", content: userMessage } ], json_schema: { type: "object", properties: { response: { type: "string" }, corrections: { type: "array", items: { type: "object", properties: { original: { type: "string" }, corrected: { type: "string" }, explanation: { type: "string" } } } }, vocabulary: { type: "array", items: { type: "object", properties: { word: { type: "string" }, translation: { type: "string" }, example: { type: "string" } } } } } } }) }); const data = await botResponse.json(); setConversation((prev)=>[ ...prev, { role: "user", content: userMessage }, { role: "assistant", content: data.response } ]); setCorrections(data.corrections); setVocabulary(data.vocabulary); setUserMessage(""); } catch (error) { console.error(error); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 88, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-12", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-gray-900 mb-4", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "Language Practice"), /*#__PURE__*/ React.createElement("select", { value: selectedLanguage, onChange: (e)=>setSelectedLanguage(e.target.value), className: "px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, languages.map((lang)=>/*#__PURE__*/ React.createElement("option", { key: lang, value: lang, __source: { fileName: "", lineNumber: 100, columnNumber: 15 }, __self: this }, lang)))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6", __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "lg:col-span-2", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6 mb-6", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-96 overflow-y-auto mb-4 space-y-4", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, conversation.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${msg.role === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 112, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[70%] rounded-lg px-4 py-2 ${msg.role === "user" ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-900"}`, __source: { fileName: "", lineNumber: 116, columnNumber: 21 }, __self: this }, msg.content)))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: userMessage, onChange: (e)=>setUserMessage(e.target.value), onKeyPress: (e)=>e.key === "Enter" && handleSubmit(), placeholder: `Type your message in ${selectedLanguage}...`, className: "flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 129, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, disabled: loading || !userMessage.trim(), className: "bg-blue-500 text-white px-6 py-2 rounded-lg hover:bg-blue-600 disabled:opacity-50", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 143, columnNumber: 21 }, __self: this }) : "Send")))), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 152, columnNumber: 11 }, __self: this }, corrections.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 154, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 text-gray-900", __source: { fileName: "", lineNumber: 155, columnNumber: 17 }, __self: this }, "Corrections"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 158, columnNumber: 17 }, __self: this }, corrections.map((correction, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border-b pb-2", __source: { fileName: "", lineNumber: 160, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-red-500 line-through", __source: { fileName: "", lineNumber: 161, columnNumber: 23 }, __self: this }, correction.original), /*#__PURE__*/ React.createElement("p", { className: "text-green-500", __source: { fileName: "", lineNumber: 164, columnNumber: 23 }, __self: this }, correction.corrected), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600 mt-1", __source: { fileName: "", lineNumber: 165, columnNumber: 23 }, __self: this }, correction.explanation))))), vocabulary.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4 text-gray-900", __source: { fileName: "", lineNumber: 176, columnNumber: 17 }, __self: this }, "Vocabulary"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 179, columnNumber: 17 }, __self: this }, vocabulary.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border-b pb-2", __source: { fileName: "", lineNumber: 181, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 182, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 183, columnNumber: 25 }, __self: this }, item.word), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 184, columnNumber: 25 }, __self: this }, item.translation)), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500 mt-1", __source: { fileName: "", lineNumber: 186, columnNumber: 23 }, __self: this }, item.example))))))))); }