function MainComponent() { const [inputMessage, setInputMessage] = React.useState(''); const [messages, setMessages] = React.useState([]); const [loading, setLoading] = React.useState(false); const sendMessage = async ()=>{ setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": inputMessage } ], system_prompt: "面白い回答をしてください。" }) }); const data = await response.json(); setMessages([ ...messages, { role: 'user', content: inputMessage }, { role: 'assistant', content: data.choices[0].message.content } ]); setInputMessage(''); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "p-4 shadow-md", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-center text-lg", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "無料の大喜利回答AIサイト")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-y-auto", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-2", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 rounded ${message.role === 'user' ? 'bg-blue-100 text-right' : 'bg-gray-100 text-left'}`, __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, message.content)), loading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center", style: { height: "40px" }, __source: { fileName: "", lineNumber: 41, columnNumber: 23 }, __self: this }, "🔄"))), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-200", style: { height: "12rem" }, __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "messageInput", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), placeholder: "ここにお題を入力…", className: "w-full h-3/4 p-2 rounded bg-white border border-gray-300 resize-none", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, className: "mt-2 w-full p-2 bg-blue-500 text-white rounded font-semibold", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "送信"))); }