function MainComponent() { const [sourceText, setSourceText] = React.useState(''); const [targetLanguage, setTargetLanguage] = React.useState(''); const [glossary, setGlossary] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const fetchGlossary = async (api)=>{ if (!sourceText || !targetLanguage) { setGlossary([]); return; } setIsLoading(true); try { const response = await fetch(`/integrations/${api}/`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "system", "content": `Please build bilingual glossary in the source language and ${targetLanguage}` }, { "role": "user", "content": sourceText } ] }) }); const data = await response.json(); setGlossary(data.choices[0].message.content.split(', ').map((keyword, idx)=>/*#__PURE__*/ React.createElement("li", { key: idx, __source: { fileName: "", lineNumber: 27, columnNumber: 87 }, __self: this }, keyword))); } catch (error) { console.error(error); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f2f5]", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full px-6 py-4 bg-white shadow-md", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#333] font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Translation Helper App")), /*#__PURE__*/ React.createElement("main", { className: "w-full flex-1 px-4", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-lg mx-auto my-10", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "source", className: "block mb-2 text-sm font-medium text-gray-900 font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Source Text"), /*#__PURE__*/ React.createElement("textarea", { id: "source", rows: "4", name: "source", className: "block p-2.5 w-full text-sm text-gray-900 bg-white border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 font-roboto", value: sourceText, onChange: (e)=>setSourceText(e.target.value), placeholder: "Enter source text here...", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "targetLanguage", className: "block mb-2 text-sm font-medium text-gray-900 font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Target Language"), /*#__PURE__*/ React.createElement("select", { id: "targetLanguage", name: "targetLanguage", className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 font-roboto", value: targetLanguage, onChange: (e)=>setTargetLanguage(e.target.value), __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "Select a language..."), /*#__PURE__*/ React.createElement("option", { value: "Spanish", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, "Spanish"), /*#__PURE__*/ React.createElement("option", { value: "French", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "French"), /*#__PURE__*/ React.createElement("option", { value: "German", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, "German"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around mb-6", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", onClick: ()=>fetchGlossary('chat-gpt'), __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Generate glossary (ChatGPT)"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", onClick: ()=>fetchGlossary('anthropic-claude'), __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Generate glossary (Opus)")), isLoading ? /*#__PURE__*/ React.createElement("p", { className: "text-center text-sm", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Loading...") : sourceText && targetLanguage && /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 bg-white rounded shadow", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700 font-roboto mb-2", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }, "Glossary:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 text-sm text-gray-700 font-roboto", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, glossary)))), /*#__PURE__*/ React.createElement("footer", { className: "w-full px-6 py-4 bg-white shadow-md", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-center text-[#aaa] font-roboto", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "© 2023 Translation Helper App. All rights reserved."))); }