function MainComponent() { const [messages, setMessages] = React.useState([ { text: 'こんにちは！今日はどうでしたか', sender: 'bot' } ]); const [input, setInput] = React.useState(''); const [interactionCount, setInteractionCount] = React.useState(0); const solutions = [ "その上司に直接話してみたら？", "これはまだまだ序章かもよ。次はもっと面白くなるかも！", "ひとまずコーヒーでも飲んでリフレッシュしよう。", "カラオケ行って発散するしかないね！", "まぁ、気にしすぎないようにね。" ]; const botResponses = [ "えー、それはヤバいね！もっと教えて！", "それ最悪だね。で、他には？", "マジか...。それで、それで？", "そいつ最低だな。他には何があった？", "ほんとに？！もっと聞かせてよ！" ]; const handleSubmit = (e)=>{ e.preventDefault(); if (input.trim() !== '') { setMessages([ ...messages, { text: input, sender: 'user' } ]); setInput(''); const newCount = interactionCount + 1; setInteractionCount(newCount); setTimeout(()=>{ if (newCount < 5) { const response = botResponses[Math.floor(Math.random() * botResponses.length)]; setMessages((msgs)=>[ ...msgs, { text: response, sender: 'bot' } ]); } else { const solution = solutions[Math.floor(Math.random() * solutions.length)]; setMessages((msgs)=>[ ...msgs, { text: solution, sender: 'bot' } ]); } }, 1000); } }; const handleChange = (e)=>{ setInput(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f4f8]", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-6 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mb-4 font-crimson-text", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "愚痴を聞くチャットボット"), /*#__PURE__*/ React.createElement("div", { className: "h-[400px] p-4 mb-4 bg-[#e0e7ff] rounded overflow-y-auto", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto text-[#333]", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "愚痴を入力して、送信ボタンを押してください。"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2 mt-6", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, messages.map((message, index)=>{ const messageClass = message.sender === 'bot' ? 'self-start bg-[#c3daff]' : 'self-end bg-[#ffd1d1]'; return /*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 rounded font-roboto text-[#333] ${messageClass}`, __source: { fileName: "", lineNumber: 56, columnNumber: 17 }, __self: this }, message.text); }))), /*#__PURE__*/ React.createElement("form", { className: "flex space-x-2", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "flex-grow p-2 border rounded border-[#666] font-roboto", placeholder: "愚痴を入力", value: input, onChange: handleChange, __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 font-roboto", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "送信")))); }