function MainComponent() { const [chatMessage, setChatMessage] = React.useState(''); const [responseMessage, setResponseMessage] = React.useState(''); const generateChatMessage = React.useCallback(()=>{ const occupationElement = document.querySelector('#occupation'); const personalityElement = document.querySelector('#personality'); const occupation = occupationElement.value; const personality = personalityElement.value; let message = ''; switch(occupation){ case '医師': message += 'ご無理なさらずに、'; break; case '教師': message += '学びの時間です、'; break; case 'エンジニア': message += 'これをデバッグしましょう、'; break; case '芸術家': message += 'インスピレーションを感じて、'; break; default: message += 'さて、'; break; } switch(personality){ case '明るい': message += '今日も一日がんばりましょう！'; break; case '真面目': message += '計画通りに事を進めましょう。'; break; case 'ユーモラス': message += '笑いは最高の薬ですね！'; break; case 'シャイ': message += '...あ、あの...頑張ります...'; break; case '情熱的': message += '熱意を持って取り組みましょう！'; break; } setChatMessage(message); }, []); const handleResponseChange = (e)=>{ const responseContent = e.target.value; let response = "それについては、もっと詳しく教えてもらえますか？"; if (responseContent.includes("こんにちは") || responseContent.includes("挨拶")) { response = "こんにちは！どのようなご用件でしょうか？"; } else if (responseContent.includes("ありがとう")) { response = "どういたしまして、何か他にお手伝いできることはありますか？"; } setResponseMessage(response); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F0F2F5] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-2xl mx-auto bg-white rounded-lg shadow-md p-6", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto font-semibold text-center text-[#333] mb-6", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "チャット文章ジェネレーター"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "occupation", className: "block text-[#333] text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "職業"), /*#__PURE__*/ React.createElement("select", { id: "occupation", name: "occupation", className: "form-select block w-full mt-1", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "医師"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "教師"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "エンジニア"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, "芸術家"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, "その他"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "personality", className: "block text-[#333] text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "性格"), /*#__PURE__*/ React.createElement("select", { id: "personality", name: "personality", className: "form-select block w-full mt-1", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, "明るい"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, "真面目"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "ユーモラス"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "シャイ"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "情熱的"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-4", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", className: "inline-block px-6 py-2 text-sm font-roboto font-medium text-white bg-[#007BFF] rounded hover:bg-[#0056b3] focus:outline-none focus:ring-2 focus:ring-[#0056b3] focus:ring-opacity-50", onClick: generateChatMessage, __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "生成")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "response", className: "block text-[#333] text-sm font-roboto mb-2", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "相手の会話"), /*#__PURE__*/ React.createElement("input", { id: "response", name: "response", type: "text", className: "form-input block w-full mt-1", onChange: handleResponseChange, __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center text-sm font-roboto text-[#333]", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, chatMessage), /*#__PURE__*/ React.createElement("div", { className: "text-center text-sm font-roboto text-[#333]", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, responseMessage)))); }