function MainComponent() { const [loading, setLoading] = React.useState(false); const [reply, setReply] = React.useState(null); const [profiles, setProfiles] = React.useState([]); const [conversations, setConversations] = React.useState([]); const [selectedProfile, setSelectedProfile] = React.useState(null); const fetchProfiles = async ()=>{ const response = await fetch('/api/db/650', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: 'SELECT `id`, `partner_name`, `sns_name` FROM `talk_partner`' }) }); const data = await response.json(); setProfiles(data); }; const fetchConversations = async (profileId)=>{ const response = await fetch('/api/db/650', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: 'SELECT `profile_info`, `conversation_history` FROM `conversation` WHERE `profile_id` = ?', values: [ profileId ] }) }); const data = await response.json(); setConversations(data); setSelectedProfile(profileId); }; const handleSubmit = async ()=>{ setLoading(true); const profileInfo = document.querySelector('textarea[name="profile_info"]').value; const conversationHistory = document.querySelector('textarea[name="conversation_history"]').value; const userFirstPerson = document.querySelector('select[name="user_first_person"]').value === "その他" ? document.querySelector('input[name="custom_first_person"]').value : document.querySelector('select[name="user_first_person"]').value; const useHonorifics = document.querySelector('input[name="use_honorifics"]').checked ? "使用する" : "使用しない"; const replyInstructions = document.querySelector('textarea[name="reply_instructions"]').value; const messages = [ { role: "user", content: ` あなたに以下の情報を提供しますので、メッセージの返信案を3つ考えてください。 1. トーク相手のプロフィール情報: ${profileInfo} 2. これまでのメッセージのやり取り: ${conversationHistory} 以下の指示に従って返信案を作成してください。 - プロフィール情報は参考程度にし、返信内容はメッセージのやり取りをもとに考えてください。 - 返信の文字数はこれまでのメッセージのやり取りと同じ長さにしてください。 - ユーザーの一人称は「${userFirstPerson}」を使用してください。 - 敬語の使用については「${useHonorifics}」を参考にしてください。 - 返信の大まかな指示がある場合はそれに従ってください。指示がない場合はこれまでのメッセージから返信内容を考えてください。返信案を3つ提供してください。 ` } ]; try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages }) }); const data = await response.json(); setReply(data.choices.map((choice)=>choice.message.content).join('\n\n')); } catch (err) { setReply('Error generating responses'); } finally{ setLoading(false); } }; const handleRegister = async ()=>{ const partnerName = document.querySelector('input[name="partner_name"]').value; const partnerGender = document.querySelector('input[name="partner_gender"]:checked').value; const snsName = document.querySelector('input[name="sns_name"]').value; await fetch('/api/db/650', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: 'INSERT INTO `talk_partner` (`partner_name`, `partner_gender`, `sns_name`) VALUES (?, ?, ?)', values: [ partnerName, partnerGender, snsName ] }) }); fetchProfiles(); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 101, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, "SNSメッセージ返信補助アプリ"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, "トーク相手の登録"), /*#__PURE__*/ React.createElement("input", { name: "partner_name", type: "text", placeholder: "トーク相手の名前", className: "border p-2 w-full mb-2", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mr-2", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, "性別:"), /*#__PURE__*/ React.createElement("label", { className: "mr-2", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "partner_gender", value: "男性", className: "mr-1", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }), "男性"), /*#__PURE__*/ React.createElement("label", { __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: "partner_gender", value: "女性", className: "mr-1", __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }), "女性")), /*#__PURE__*/ React.createElement("input", { name: "sns_name", type: "text", placeholder: "SNS名", className: "border p-2 w-full mb-2", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleRegister, className: "bg-green-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 127, columnNumber: 9 }, __self: this }, "登録")), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 132, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, "プロフィールの登録"), /*#__PURE__*/ React.createElement("textarea", { name: "profile_info", placeholder: "相手のプロフィール情報を入力", className: "border p-2 w-full mb-2", rows: "4", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", name: "profile_screenshot", className: "mb-2", __source: { fileName: "", lineNumber: 140, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 143, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 144, columnNumber: 9 }, __self: this }, "メッセージの登録"), /*#__PURE__*/ React.createElement("textarea", { name: "conversation_history", placeholder: "これまでのメッセージのやり取りを入力", className: "border p-2 w-full mb-2", rows: "4", __source: { fileName: "", lineNumber: 145, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "file", name: "message_screenshot", className: "mb-2", __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 154, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 155, columnNumber: 9 }, __self: this }, "返信内容の生成"), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 156, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mr-2", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, "一人称:"), /*#__PURE__*/ React.createElement("select", { name: "user_first_person", className: "border p-2 mr-2", __source: { fileName: "", lineNumber: 158, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "俺", __source: { fileName: "", lineNumber: 159, columnNumber: 13 }, __self: this }, "俺"), /*#__PURE__*/ React.createElement("option", { value: "僕", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, "僕"), /*#__PURE__*/ React.createElement("option", { value: "私", __source: { fileName: "", lineNumber: 161, columnNumber: 13 }, __self: this }, "私"), /*#__PURE__*/ React.createElement("option", { value: "その他", __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, "その他")), /*#__PURE__*/ React.createElement("input", { name: "custom_first_person", type: "text", placeholder: "その他（自由入力）", className: "border p-2", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 171, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mr-2", __source: { fileName: "", lineNumber: 172, columnNumber: 11 }, __self: this }, "敬語の使用:"), /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "use_honorifics", value: "使用", className: "mr-1", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }), "敬語を使う"), /*#__PURE__*/ React.createElement("textarea", { name: "reply_instructions", placeholder: "返信の大まかな指示を入力", className: "border p-2 w-full mb-4", rows: "3", __source: { fileName: "", lineNumber: 175, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, className: "bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 181, columnNumber: 9 }, __self: this }, loading ? "生成中..." : "返信3案作成"), reply && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 border bg-gray-100 whitespace-pre-wrap", __source: { fileName: "", lineNumber: 184, columnNumber: 19 }, __self: this }, reply)), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 187, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 188, columnNumber: 9 }, __self: this }, "チャット管理"), /*#__PURE__*/ React.createElement("select", { onChange: (e)=>fetchConversations(e.target.value), className: "border p-2 mb-2 w-full", __source: { fileName: "", lineNumber: 189, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 190, columnNumber: 11 }, __self: this }, "トーク相手を選択"), profiles.map((profile)=>/*#__PURE__*/ React.createElement("option", { key: profile.id, value: profile.id, __source: { fileName: "", lineNumber: 192, columnNumber: 13 }, __self: this }, profile.partner_name, " - ", profile.sns_name))), conversations.map((conv, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 198, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-semibold", __source: { fileName: "", lineNumber: 199, columnNumber: 13 }, __self: this }, "プロフィール情報:"), /*#__PURE__*/ React.createElement("div", { className: "border p-2 bg-gray-100", __source: { fileName: "", lineNumber: 200, columnNumber: 13 }, __self: this }, conv.profile_info), /*#__PURE__*/ React.createElement("div", { className: "font-semibold mt-2", __source: { fileName: "", lineNumber: 201, columnNumber: 13 }, __self: this }, "これまでのメッセージ:"), /*#__PURE__*/ React.createElement("div", { className: "border p-2 bg-gray-100", __source: { fileName: "", lineNumber: 202, columnNumber: 13 }, __self: this }, conv.conversation_history))))); }