function MainComponent() { const [messages, setMessages] = React.useState([ { sender: 'A', text: 'こんにちは、どんなお手伝いができますか？' }, { sender: 'U', text: 'こんにちは。質問があるのですが。' } ]); const [input, setInput] = React.useState(''); const handleSubmit = async (e)=>{ e.preventDefault(); if (input) { setMessages([ ...messages, { sender: 'U', text: input } ]); const response = await fetch('/api/openai', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: input }) }); const data = await response.json(); setMessages((prevMessages)=>[ ...prevMessages, { sender: 'A', text: data.reply } ]); setInput(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "会話アプリ"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex items-center mb-2 ${msg.sender === 'U' ? 'flex-row-reverse' : ''}`, __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-8 h-8 rounded-full flex items-center justify-center text-white font-bold ${msg.sender === 'A' ? 'bg-[#4CAF50]' : 'bg-blue-500'}`, __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, msg.sender), /*#__PURE__*/ React.createElement("p", { className: "ml-2 p-2 bg-gray-200 rounded-lg", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, msg.text)))), /*#__PURE__*/ React.createElement("form", { className: "flex", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "userMessage", type: "text", className: "w-full p-2 border border-gray-300 rounded-lg mr-2", placeholder: "メッセージを入力...", value: input, onChange: (e)=>setInput(e.target.value), __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-blue-500 text-white rounded-lg", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "送信")))); }