function MainComponent() { const [inputText, setInputText] = React.useState(""); const [translatedText, setTranslatedText] = React.useState(""); const [chatMessages, setChatMessages] = React.useState([]); const [chatInput, setChatInput] = React.useState(""); const [loading, setLoading] = React.useState(false); const handleTranslate = async ()=>{ const response = await fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', body: new URLSearchParams({ q: inputText, target: 'en' }) }); const data = await response.json(); setTranslatedText(data.data.translations[0].translatedText); }; const handleChatSubmit = async ()=>{ setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...chatMessages, { role: 'user', content: chatInput } ] }) }); const data = await response.json(); setChatMessages([ ...chatMessages, { role: 'user', content: chatInput }, { role: 'assistant', content: data.choices[0].message.content } ]); setChatInput(""); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "inputText", value: inputText, onChange: (e)=>setInputText(e.target.value), placeholder: "テキストをここに入力", className: "w-full h-[150px] p-2 border-2 border-gray-300 rounded mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleTranslate, className: "bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "翻訳する"), translatedText && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 w-full border-2 border-gray-300 rounded", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, translatedText))), /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 w-[300px] p-4 border-2 border-gray-300 rounded bg-white", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[300px] overflow-y-auto mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, chatMessages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-2 p-2 rounded ${msg.role === 'user' ? 'bg-blue-100 self-end text-right' : 'bg-gray-200 self-start text-left'}`, __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, msg.content)))), /*#__PURE__*/ React.createElement("input", { type: "text", name: "chatInput", value: chatInput, onChange: (e)=>setChatInput(e.target.value), placeholder: "チャットに入力", className: "w-full p-2 border-2 border-gray-300 rounded mb-2", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleChatSubmit, disabled: loading, className: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded w-full", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, "送信"))); }