function MainComponent() { const [userInput, setUserInput] = React.useState(''); const [response, setResponse] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const sendMessage = async ()=>{ setIsLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: userInput } ], system_prompt: 'Explain this content' }) }); const data = await response.json(); setResponse(data.choices[0].message.content); setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-4 bg-white shadow-md rounded-lg", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg font-bold text-center font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "CHAT_GPTとの会話")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#0051ff]", rows: "4", name: "userMessage", placeholder: "こちらにメッセージを入力…", value: userInput, onChange: (e)=>setUserInput(e.target.value), __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 text-white bg-[#0051ff] rounded-lg font-roboto transition duration-300 ease-in-out hover:bg-[#003cbf]", onClick: sendMessage, disabled: isLoading, __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "送信")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "min-h-[200px] p-3 border rounded-lg bg-[#fafafa]", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, isLoading ? 'ローディング中...' : response || '[ここにCHAT_GPTからの返答回答が表示されます]'))))); }