function MainComponent() { const [persona, setPersona] = React.useState(''); const [product, setProduct] = React.useState(''); const [stages, setStages] = React.useState([]); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(''); const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); setError(''); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `カスタマージャーニーマップを作ってください。ペルソナ: ${persona}, 商材: ${product}` } ] }) }); const data = await response.json(); if (data.status) { const { choices } = data; const content = choices[0].message.content; setStages(JSON.parse(content)); } else { setError('Failed to fetch the customer journey map.'); } } catch (error) { setError('An error occurred while fetching the customer journey map.'); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-white", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold font-roboto mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "カスタマージャーニーマップ（人の購買行動）"), /*#__PURE__*/ React.createElement("form", { className: "mb-6", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", htmlFor: "persona", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "ペルソナ"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded font-roboto", type: "text", name: "persona", id: "persona", placeholder: "ペルソナを入力...", value: persona, onChange: (e)=>setPersona(e.target.value), __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 font-roboto mb-2", htmlFor: "product", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "商材"), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border border-gray-300 rounded font-roboto", type: "text", name: "product", id: "product", placeholder: "商材を入力...", value: product, onChange: (e)=>setProduct(e.target.value), __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "bg-orange-500 text-white font-roboto py-2 px-4 rounded", type: "submit", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "表示")), loading ? /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto text-lg", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "ローディング...") : error ? /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto text-lg text-red-500", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, error) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto mb-2", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, "ターゲットと商材のペルソナ"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 82, columnNumber: 40 }, __self: this }, "ペルソナ:"), " ", persona), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-bold", __source: { fileName: "", lineNumber: 83, columnNumber: 40 }, __self: this }, "商材:"), " ", product)), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white border border-gray-200", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b font-roboto bg-gray-100 text-left", __source: { fileName: "", lineNumber: 89, columnNumber: 19 }, __self: this }, "ステージ"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b font-roboto bg-gray-100 text-left", __source: { fileName: "", lineNumber: 90, columnNumber: 19 }, __self: this }, "活動"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b font-roboto bg-gray-100 text-left", __source: { fileName: "", lineNumber: 91, columnNumber: 19 }, __self: this }, "思考"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b font-roboto bg-gray-100 text-left", __source: { fileName: "", lineNumber: 92, columnNumber: 19 }, __self: this }, "感情"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b font-roboto bg-gray-100 text-left", __source: { fileName: "", lineNumber: 93, columnNumber: 19 }, __self: this }, "痛点"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, stages.map((stage, index)=>{ const { stage: stageName, activity, thought, emotion, pain } = stage; return /*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 100, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b font-roboto", __source: { fileName: "", lineNumber: 101, columnNumber: 23 }, __self: this }, stageName), /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b font-roboto", __source: { fileName: "", lineNumber: 102, columnNumber: 23 }, __self: this }, activity), /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b font-roboto", __source: { fileName: "", lineNumber: 103, columnNumber: 23 }, __self: this }, thought), /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b font-roboto", __source: { fileName: "", lineNumber: 104, columnNumber: 23 }, __self: this }, emotion), /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b font-roboto", __source: { fileName: "", lineNumber: 105, columnNumber: 23 }, __self: this }, pain)); })))))); }