function MainComponent() { const [name, setName] = React.useState(''); const [question, setQuestion] = React.useState(''); const [responses, setResponses] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const handleSubmit = async ()=>{ if (!name || !question) return; const timestamp = new Date().toLocaleString(); setResponses([ ...responses, { role: 'user', content: question, name, timestamp } ]); setIsLoading(true); setQuestion(''); fetch('/api/db/550', { method: 'POST', body: JSON.stringify({ query: 'INSERT INTO `inquiries` (name, response, reception_date, inquiry_content) VALUES (?, ?, ?, ?)', values: [ name, '', timestamp, question ] }) }); let faqResponse = await fetch('/api/db/faq', { method: 'POST', body: JSON.stringify({ query: 'SELECT * FROM `faqs` WHERE `inquiry` LIKE ?', values: [ `%${question}%` ] }) }); faqResponse = await faqResponse.json(); if (faqResponse.length > 0) { const faqResponseContent = faqResponse[0].answer; setResponses((prev)=>[ ...prev, { role: 'assistant', content: faqResponseContent, name: 'Bot', timestamp: new Date().toLocaleString() } ]); setIsLoading(false); fetch('/api/db/550', { method: 'POST', body: JSON.stringify({ query: 'UPDATE `inquiries` SET response = ? WHERE `name` = ? AND `inquiry_content` = ?', values: [ faqResponseContent, name, question ] }) }); return; } const apiResponse = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: question } ] }) }); const apiResult = await apiResponse.json(); const chatGptResponse = apiResult.choices[0].message.content; fetch('/api/db/550', { method: 'POST', body: JSON.stringify({ query: 'UPDATE `inquiries` SET response = ? WHERE `name` = ? AND `inquiry_content` = ?', values: [ chatGptResponse, name, question ] }) }); setResponses((prev)=>[ ...prev, { role: 'assistant', content: chatGptResponse, name: 'Bot', timestamp: new Date().toLocaleString() } ]); setIsLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full h-full", __source: { fileName: "", lineNumber: 79, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-500 text-center text-white text-2xl p-4 font-bold", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, "問い合わせ対応チャットボット"), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-y-scroll p-4 bg-white", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-2", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, "お名前とご質問を記入し問合せボタンをクリックして下さい"), responses.map((res, index)=>{ const alignment = res.role === 'user' ? 'text-right' : 'text-left'; const bgColor = res.role === 'user' ? 'bg-green-200' : 'bg-gray-200'; return /*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 mb-2 border ${alignment} ${bgColor}`, __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, res.role === 'user' ? `問合せ（${res.name}）` : `回答（Bot）`, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, res.content), /*#__PURE__*/ React.createElement("div", { className: "text-xs", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, res.timestamp)); }), isLoading && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 96, columnNumber: 23 }, __self: this }, "確認中。。。")), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-50 fixed bottom-0 w-full", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "お名前", value: name, onChange: (e)=>setName(e.target.value), className: "border w-full mb-2 p-2", maxLength: 20, __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "question", placeholder: "ご質問", value: question, onChange: (e)=>setQuestion(e.target.value), rows: "3", className: "border w-full mb-2 p-2", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, disabled: !name || !question, className: `h-[48px] p-2 ml-1 ${!name || !question ? 'bg-gray-400' : 'bg-blue-500'} text-white`, __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, "問い合わせ"), /*#__PURE__*/ React.createElement("div", { class: "flex-grow h-[2rem]", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { class: "flex-grow h-[2rem]", __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this })); }