function MainComponent() { const [word, setWord] = React.useState(''); const [sourceLanguage, setSourceLanguage] = React.useState('Japanese'); const [targetLanguages, setTargetLanguages] = React.useState([ 'French', 'English' ]); const [translations, setTranslations] = React.useState([ null, null ]); const [loading, setLoading] = React.useState(false); const handleTranslate = async ()=>{ setLoading(true); const messages = [ { "role": "user", "content": `Translate the word '${word}' from ${sourceLanguage} to ${targetLanguages[0]} and ${targetLanguages[1]}.` } ]; try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages }) }); const result = await response.json(); const translationResults = result.choices[0].message.content.match(/'([^']*)'/g).map((x)=>x.replace(/'/g, '')); setTranslations(translationResults); } catch (error) { console.error('Error:', error); } finally{ setLoading(false); } }; const handleSourceLanguageChange = (e)=>setSourceLanguage(e.target.value); const handleTargetLanguageChange = (index, e)=>{ const newLanguages = [ ...targetLanguages ]; newLanguages[index] = e.target.value; setTargetLanguages(newLanguages); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "word", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Enter the word you want to translate"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "word", id: "word", value: word, onChange: (e)=>setWord(e.target.value), className: "mt-1 p-2 block w-full border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "sourceLanguage", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "Select the source language"), /*#__PURE__*/ React.createElement("select", { name: "sourceLanguage", id: "sourceLanguage", value: sourceLanguage, onChange: handleSourceLanguageChange, className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Japanese", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Japanese"), /*#__PURE__*/ React.createElement("option", { value: "French", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "French"), /*#__PURE__*/ React.createElement("option", { value: "English", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "English"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "Select two languages for translation"), /*#__PURE__*/ React.createElement("select", { name: "targetLanguage1", value: targetLanguages[0], onChange: (e)=>handleTargetLanguageChange(0, e), className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Japanese", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Japanese"), /*#__PURE__*/ React.createElement("option", { value: "French", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "French"), /*#__PURE__*/ React.createElement("option", { value: "English", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "English")), /*#__PURE__*/ React.createElement("select", { name: "targetLanguage2", value: targetLanguages[1], onChange: (e)=>handleTargetLanguageChange(1, e), className: "mt-1 block w-full p-2 border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Japanese", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "Japanese"), /*#__PURE__*/ React.createElement("option", { value: "French", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, "French"), /*#__PURE__*/ React.createElement("option", { value: "English", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "English"))), /*#__PURE__*/ React.createElement("button", { onClick: handleTranslate, className: "mt-2 p-2 bg-blue-500 text-white rounded-md", disabled: loading, __source: { fileName: "", lineNumber: 90, columnNumber: 7 }, __self: this }, loading ? 'Translating...' : 'Translate'), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, translations[0] && /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-2 rounded-md", __source: { fileName: "", lineNumber: 99, columnNumber: 29 }, __self: this }, "Translation 1: ", translations[0]), translations[1] && /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-2 rounded-md mt-2", __source: { fileName: "", lineNumber: 100, columnNumber: 29 }, __self: this }, "Translation 2: ", translations[1]))); }