function MainComponent() { const [messages, setMessages] = React.useState([]); const [showPhoneForm, setShowPhoneForm] = React.useState(false); const [phoneNumber, setPhoneNumber] = React.useState(""); const [currentStep, setCurrentStep] = React.useState('start'); const chatFlow = { start: { botMessage: 'こんにちは。エコキュートに関するお問い合わせを承ります。どのようなご用件でしょうか？', options: [ { text: '故障修理依頼', nextStep: 'repair' }, { text: '新しく設置', nextStep: 'installation' }, { text: 'エコキュートについて知りたい', nextStep: 'info' }, { text: '担当者と直接話したい', nextStep: 'requestCall' } ] }, repair: { botMessage: '故障修理のご依頼ですね。エコキュートの症状について、以下からお選びください。', options: [ { text: 'お湯が出ない', nextStep: 'noHotWater' }, { text: '異音がする', nextStep: 'strangeNoise' }, { text: 'エラーコードが表示されている', nextStep: 'errorCode' } ] }, noHotWater: { botMessage: 'お湯が出ない場合、まず以下の点をご確認ください：\n1. 電源が入っているか\n2. お湯の温度設定が適切か\n3. 水道の元栓が開いているか\n4. 漏電遮断器が落ちていないか\n\nこれらを確認しても改善しない場合は、修理が必要な可能性があります。修理の予約をお取りしましょうか？', options: [ { text: 'はい、修理を予約したい', nextStep: 'bookRepair' }, { text: 'いいえ、自分でもう少し確認します', nextStep: 'selfCheck' } ] }, strangeNoise: { botMessage: '異音がする場合、以下のような音が考えられます：\n1. ブーンという音：ヒートポンプの動作音（正常）\n2. シャーという音：除霜運転時の音（正常）\n3. カタカタ、ゴロゴロという音：異常の可能性あり\n\n3の場合や、普段と明らかに異なる音がする場合は修理が必要かもしれません。修理の予約をお取りしましょうか？', options: [ { text: 'はい、修理を予約したい', nextStep: 'bookRepair' }, { text: 'いいえ、様子を見ます', nextStep: 'end' } ] }, errorCode: { botMessage: 'エラーコードが表示されている場合、そのコードを教えていただけますか？主なエラーコードは以下の通りです：\n- 01：湯温異常\n- 02：給湯制御異常\n- 03：沸き上げ異常\n\nエラーコードをお選びいただくか、表示されているコードをお知らせください。', options: [ { text: '01', nextStep: 'error01' }, { text: '02', nextStep: 'error02' }, { text: '03', nextStep: 'error03' }, { text: 'その他のコード', nextStep: 'otherError' } ] }, installation: { botMessage: '新しい設置のご相談ですね。以下からご希望の内容をお選びください。', options: [ { text: '費用の見積もり', nextStep: 'estimateCost' }, { text: '設置可能か確認したい', nextStep: 'checkInstallation' }, { text: '設置までの流れを知りたい', nextStep: 'installationProcess' }, { text: '設置の予約をしたい', nextStep: 'bookInstallation' } ] }, estimateCost: { botMessage: '費用の見積もりには、現地調査が必要です。調査の予約をさせていただきますが、よろしいでしょうか？', options: [ { text: 'はい、予約をお願いします', nextStep: 'bookSurvey' }, { text: 'いいえ、もう少し検討します', nextStep: 'end' } ] }, checkInstallation: { botMessage: '設置可能かどうかを確認するには、専門スタッフによる現地調査が必要です。調査の予約をさせていただきますか？', options: [ { text: 'はい、予約をお願いします', nextStep: 'bookSurvey' }, { text: 'いいえ、もう少し検討します', nextStep: 'end' } ] }, installationProcess: { botMessage: 'エコキュートの設置までの一般的な流れは以下の通りです：\n1. お問い合わせ・ご相談\n2. 現地調査\n3. お見積もり提示\n4. ご契約\n5. 設置工事\n6. 動作確認・使用方法説明\n\n実際の設置をご希望の場合は、まず現地調査の予約をさせていただきます。予約をお取りしましょうか？', options: [ { text: 'はい、予約をお願いします', nextStep: 'bookSurvey' }, { text: 'いいえ、もう少し検討します', nextStep: 'end' } ] }, bookInstallation: { botMessage: 'エコキュートの設置予約をご希望ですね。設置には事前の現地調査が必要です。現地調査の予約をさせていただきますが、よろしいでしょうか？', options: [ { text: 'はい、予約をお願いします', nextStep: 'bookSurvey' }, { text: 'いいえ、もう少し検討します', nextStep: 'end' } ] }, bookSurvey: { botMessage: '現地調査のご予約を承ります。以下のリンクから予約ページへ移動してください。', options: [ { text: '予約ページへ移動', nextStep: 'redirectBooking' }, { text: 'キャンセル', nextStep: 'start' } ] }, bookRepair: { botMessage: '修理のご予約を承ります。以下のリンクから予約ページへ移動してください。', options: [ { text: '予約ページへ移動', nextStep: 'redirectBooking' }, { text: 'キャンセル', nextStep: 'start' } ] }, redirectBooking: { botMessage: '予約ページへ移動します。', redirect: 'https://timerex.net/s/kimura.nichicoma_c7cc/417e0890' }, info: { botMessage: 'エコキュートについて、どのような情報をお知りになりたいですか？', options: [ { text: 'エコキュートとは何か', nextStep: 'whatIsEcoCute' }, { text: 'エコキュートのメリット', nextStep: 'ecocuteBenefits' }, { text: 'エコキュートの寿命', nextStep: 'ecocuteLifespan' }, { text: '設置費用について', nextStep: 'installationCost' } ] }, requestCall: { botMessage: '担当者からの電話をご希望ですね。お電話番号をお聞かせください。下の入力欄にご入力いただけますか？', showPhoneForm: true }, phoneSubmitted: { botMessage: 'ありがとうございます。担当者から折り返しご連絡させていただきます。他に何かご質問はありますか？', options: [ { text: 'はい', nextStep: 'start' }, { text: 'いいえ、終了します', nextStep: 'farewell' } ] }, farewell: { botMessage: 'ご利用ありがとうございました。エコキュートについてのご質問やお困りごとがありましたら、いつでもお問い合わせください。良い一日をお過ごしください。', options: [] } }; const addMessage = (text, isBot = true)=>{ setMessages((prevMessages)=>[ ...prevMessages, { text, isBot } ]); }; React.useEffect(()=>{ showNextStep(); }, [ currentStep ]); const showNextStep = ()=>{ const step = chatFlow[currentStep]; if (step.redirect) { window.location.href = step.redirect; return; } addMessage(step.botMessage); if (step.options && step.options.length > 0) addOptions(step.options); setShowPhoneForm(step.showPhoneForm || false); }; const addOptions = (options)=>{ setMessages((prevMessages)=>[ ...prevMessages, { options } ]); }; const selectOption = (text, nextStep)=>{ addMessage(text, false); setCurrentStep(nextStep); }; const handlePhoneSubmit = ()=>{ if (phoneNumber) { addMessage(`電話番号: ${phoneNumber}`, false); setShowPhoneForm(false); setPhoneNumber(""); setCurrentStep('phoneSubmitted'); console.log('送信された電話番号:', phoneNumber); } else { alert('電話番号を入力してください。'); } }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-[600px] mx-auto p-5 bg-[#f0f0f0] font-sans", __source: { fileName: "", lineNumber: 170, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-[#333]", __source: { fileName: "", lineNumber: 171, columnNumber: 7 }, __self: this }, "エコキュートチャットボット"), /*#__PURE__*/ React.createElement("div", { id: "chat-container", className: "h-[400px] overflow-y-auto border border-[#ccc] p-2 bg-[#fff] rounded-lg mb-5", __source: { fileName: "", lineNumber: 172, columnNumber: 7 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 rounded-lg mb-2 shadow-md ${msg.isBot ? 'bg-[#fff] text-[#000]' : 'bg-[#90EE90] text-[#000] text-right'}`, __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, msg.text, msg.options && /*#__PURE__*/ React.createElement("div", { className: "bg-[#ADD8E6] text-[#000] p-2 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this }, msg.options.map((option, idx)=>/*#__PURE__*/ React.createElement("p", { key: idx, className: "cursor-pointer p-2 my-1 bg-[#fff] rounded transition-all duration-300 hover:bg-[#87CEEB] text-left", onClick: ()=>selectOption(option.text, option.nextStep), __source: { fileName: "", lineNumber: 182, columnNumber: 19 }, __self: this }, option.text)))))), showPhoneForm && /*#__PURE__*/ React.createElement("div", { id: "phone-form", className: "mt-5", __source: { fileName: "", lineNumber: 196, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "tel", name: "phone", value: phoneNumber, onChange: (e)=>setPhoneNumber(e.target.value), className: "w-full p-2 mb-2 border border-[#ccc] rounded", placeholder: "電話番号を入力してください", required: true, __source: { fileName: "", lineNumber: 197, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { id: "submit-phone", onClick: handlePhoneSubmit, className: "w-full bg-[#4CAF50] text-white p-2 rounded cursor-pointer hover:bg-[#45a049]", __source: { fileName: "", lineNumber: 206, columnNumber: 11 }, __self: this }, "送信")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 215, columnNumber: 7 }, __self: this }, ` .option:hover { background-color: #87ceeb; } `)); }