function MainComponent() { const [loading, setLoading] = React.useState(false); const [response, setResponse] = React.useState(""); const handleClick = async ()=>{ setLoading(true); const result = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: '次の画像を参考に自社のSFAサービスの新機能のモックアップを作成してください' } ], system_prompt: 'Explain this content' }) }); const data = await result.json(); setResponse(data.choices[0].message.content); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "font-sans", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#0a5278] text-white p-4 flex justify-between", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/logo.png", alt: "Company Logo", className: "h-8 mr-2", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "自社SFAサービス")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle text-xl", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "ユーザー名"))), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-[250px] bg-[#f7f7f7] h-screen p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "my-2", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#575757] hover:text-[#0a5278]", __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, "Dashboard")), /*#__PURE__*/ React.createElement("li", { className: "my-2", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#575757] hover:text-[#0a5278]", __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }, "アクション")), /*#__PURE__*/ React.createElement("li", { className: "my-2", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#575757] hover:text-[#0a5278]", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, "レポート")), /*#__PURE__*/ React.createElement("li", { className: "my-2", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#575757] hover:text-[#0a5278]", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, "設定"))))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 bg-[#f2f2f2] p-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#0a5278] text-lg mb-2", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "アクション登録ポップアップ"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "preset", className: "block text-gray-700", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, "プリセット選択"), /*#__PURE__*/ React.createElement("select", { name: "preset", id: "preset", className: "mt-1 block w-full border-gray-300 rounded", __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, "選択してください"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 62, columnNumber: 19 }, __self: this }, "プリセット1"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 63, columnNumber: 19 }, __self: this }, "プリセット2"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 66, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "actionDetails", className: "block text-gray-700", __source: { fileName: "", lineNumber: 67, columnNumber: 17 }, __self: this }, "アクション詳細"), /*#__PURE__*/ React.createElement("textarea", { name: "actionDetails", id: "actionDetails", rows: "4", className: "mt-1 block w-full border-gray-300 rounded", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 text-white py-2 px-4 mr-2 rounded", __source: { fileName: "", lineNumber: 71, columnNumber: 17 }, __self: this }, "キャンセル"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-600 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 72, columnNumber: 17 }, __self: this }, "保存")))), /*#__PURE__*/ React.createElement("section", { className: "mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#0a5278] text-lg mb-2", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, "プリセット一覧ページ"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full text-left", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 80, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 81, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border-b p-2", __source: { fileName: "", lineNumber: 82, columnNumber: 21 }, __self: this }, "プリセット名"), /*#__PURE__*/ React.createElement("th", { className: "border-b p-2", __source: { fileName: "", lineNumber: 83, columnNumber: 21 }, __self: this }, "カテゴリ"), /*#__PURE__*/ React.createElement("th", { className: "border-b p-2", __source: { fileName: "", lineNumber: 84, columnNumber: 21 }, __self: this }, "編集"), /*#__PURE__*/ React.createElement("th", { className: "border-b p-2", __source: { fileName: "", lineNumber: 85, columnNumber: 21 }, __self: this }, "削除"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 89, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border-b p-2", __source: { fileName: "", lineNumber: 90, columnNumber: 21 }, __self: this }, "プリセット1"), /*#__PURE__*/ React.createElement("td", { className: "border-b p-2", __source: { fileName: "", lineNumber: 91, columnNumber: 21 }, __self: this }, "カテゴリ1"), /*#__PURE__*/ React.createElement("td", { className: "border-b p-2", __source: { fileName: "", lineNumber: 92, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-blue-600", __source: { fileName: "", lineNumber: 92, columnNumber: 50 }, __self: this }, "編集")), /*#__PURE__*/ React.createElement("td", { className: "border-b p-2", __source: { fileName: "", lineNumber: 93, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-red-600", __source: { fileName: "", lineNumber: 93, columnNumber: 50 }, __self: this }, "削除"))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mt-4", __source: { fileName: "", lineNumber: 97, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-600 text-white py-2 px-4 rounded", onClick: handleClick, __source: { fileName: "", lineNumber: 98, columnNumber: 17 }, __self: this }, loading ? 'ロード中...' : '新規プリセット追加')))), /*#__PURE__*/ React.createElement("section", { className: "mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#0a5278] text-lg mb-2", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "新規プリセット登録ページ"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "presetName", className: "block text-gray-700", __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this }, "プリセット名"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "presetName", id: "presetName", className: "mt-1 block w-full border-gray-300 rounded", __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "category", className: "block text-gray-700", __source: { fileName: "", lineNumber: 112, columnNumber: 17 }, __self: this }, "カテゴリ"), /*#__PURE__*/ React.createElement("select", { name: "category", id: "category", className: "mt-1 block w-full border-gray-300 rounded", __source: { fileName: "", lineNumber: 113, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 114, columnNumber: 19 }, __self: this }, "カテゴリ1"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 115, columnNumber: 19 }, __self: this }, "カテゴリ2"))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 118, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "details", className: "block text-gray-700", __source: { fileName: "", lineNumber: 119, columnNumber: 17 }, __self: this }, "詳細"), /*#__PURE__*/ React.createElement("textarea", { name: "details", id: "details", rows: "4", className: "mt-1 block w-full border-gray-300 rounded", __source: { fileName: "", lineNumber: 120, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 122, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 text-white py-2 px-4 mr-2 rounded", __source: { fileName: "", lineNumber: 123, columnNumber: 17 }, __self: this }, "キャンセル"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-600 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 124, columnNumber: 17 }, __self: this }, "保存")))), /*#__PURE__*/ React.createElement("section", { className: "mb-4", __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[#0a5278] text-lg mb-2", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, "削除確認ダイアログ"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 shadow", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, "本当に削除しますか？"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 132, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 text-white py-2 px-4 mr-2 rounded", __source: { fileName: "", lineNumber: 133, columnNumber: 17 }, __self: this }, "キャンセル"), /*#__PURE__*/ React.createElement("button", { className: "bg-red-600 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 134, columnNumber: 17 }, __self: this }, "削除")))), response && /*#__PURE__*/ React.createElement("section", { className: "mb-4 bg-white p-4 shadow", __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg mb-2", __source: { fileName: "", lineNumber: 140, columnNumber: 15 }, __self: this }, "API Response:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 141, columnNumber: 15 }, __self: this }, response))))); }