function MainComponent() { const [inputText, setInputText] = React.useState(""); const [translatedText, setTranslatedText] = React.useState(""); const [chatInput, setChatInput] = React.useState(""); const [chatMessages, setChatMessages] = React.useState([]); const [loading, setLoading] = React.useState(false); const translateText = 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 sendChatMessage = async ()=>{ setLoading(true); const newMessage = { role: 'user', content: chatInput }; const updatedMessages = [ ...chatMessages, newMessage ]; const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: updatedMessages }) }); const data = await response.json(); const assistantMessage = data.choices[0].message; setChatMessages([ ...updatedMessages, assistantMessage ]); setChatInput(""); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4 font-sans", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, "和英翻訳アプリ"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "inputText", value: inputText, onChange: (e)=>setInputText(e.target.value), className: "border p-2 mb-4 w-full max-w-[400px]", placeholder: "日本語を入力", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: translateText, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, "翻訳"), translatedText && /*#__PURE__*/ React.createElement("p", { className: "mt-4 font-serif text-lg", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, translatedText), /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 right-0 m-4 w-[300px] bg-white p-4 rounded shadow-lg", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 font-sans", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Chat GPT"), /*#__PURE__*/ React.createElement("div", { className: "h-[200px] overflow-y-auto border p-2 mb-2", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, chatMessages.map((message, index)=>{ const messageClass = message.role === 'user' ? 'text-right bg-blue-100' : 'text-left bg-gray-100'; return /*#__PURE__*/ React.createElement("div", { className: `mb-2 ${messageClass}`, key: index, __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, message.content)); })), /*#__PURE__*/ React.createElement("input", { type: "text", name: "chatInput", value: chatInput, onChange: (e)=>setChatInput(e.target.value), className: "border p-2 mb-2 w-full", placeholder: "メッセージを入力", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendChatMessage, className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded", disabled: loading, __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "送信"))); }