function MainComponent() { const [talkLog, setTalkLog] = React.useState([]); const [itemSearch, setItemSearch] = React.useState(''); const [nameSearch, setNameSearch] = React.useState(''); const [searchResults, setSearchResults] = React.useState([]); const [loading, setLoading] = React.useState(false); const [inputMessage, setInputMessage] = React.useState(''); React.useEffect(()=>{ if (itemSearch) { fetchSearchResults(); } }, [ itemSearch ]); const sendMessage = async (message)=>{ if (!message.trim()) return; setLoading(true); const inputForConversation = { role: 'user', content: message }; const inputForCategory = { role: 'assistant', content: "これまでの会話内容は" + JSON.stringify([ ...talkLog, inputForConversation ]) + "です。会話内容から私が一番欲しい商品の品目を想像して出力ください。出力は、'不明'、'食品'、'雑貨'、'飲料'から1つを選択し、出力する際は選択した単語以外は出力しないでください" }; try { const response = await fetch('/integrations/google-gemini-1-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ inputForConversation ] }) }); const data = await response.json(); const reply = data.choices[0].message.content; setTalkLog((talkLog)=>[ ...talkLog, { role: 'user', content: message, styles: 'bg-blue-100 text-blue-900' }, { role: 'assistant', content: reply, styles: 'bg-green-100 text-green-900' } ]); const categoryResponse = await fetch('/integrations/google-gemini-1-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ inputForCategory ] }) }); const categoryData = await categoryResponse.json(); const categoryReply = categoryData.choices[0].message.content; setItemSearch(categoryReply); } catch (error) { console.error('Error communicating with AI:', error); } setLoading(false); setInputMessage(''); }; const fetchSearchResults = async ()=>{ setLoading(true); try { const response = await fetch('/api/db/457', { method: 'POST', body: JSON.stringify({ query: `SELECT id, item, name, description FROM product_master WHERE item = ? AND name LIKE ? LIMIT 10`, values: [ itemSearch, `%${nameSearch}%` ] }) }); const data = await response.json(); setSearchResults(data); } catch (error) { console.error('Error fetching search results:', error); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1/2 bg-gray-200 p-4 space-y-4", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, talkLog.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `${message.styles} p-2 rounded`, __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("strong", { __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, message.role === 'user' ? 'You' : 'Assistant', ":"), " ", message.content)), /*#__PURE__*/ React.createElement("input", { className: "border p-2 w-full", type: "text", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), onKeyDown: (e)=>e.key === 'Enter' && sendMessage(inputMessage), placeholder: "Type here...", name: "input_message", "aria-label": "Send message", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: ()=>sendMessage(inputMessage), "aria-label": "Send", __source: { fileName: "", lineNumber: 98, columnNumber: 9 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fa fa-circle-notch fa-spin", __source: { fileName: "", lineNumber: 99, columnNumber: 22 }, __self: this }) : 'Send')), /*#__PURE__*/ React.createElement("div", { className: "w-1/2 bg-gray-100 p-4 space-y-4", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "検索品目: ", itemSearch), loading ? /*#__PURE__*/ React.createElement("i", { className: "fa fa-spinner fa-spin", __source: { fileName: "", lineNumber: 105, columnNumber: 22 }, __self: this }) : null), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 107, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, "検索結果:"), searchResults.map((result)=>/*#__PURE__*/ React.createElement("div", { key: result.id, className: "p-2 border border-gray-200 rounded", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this }, "ID: ", result.id), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }, "Item: ", result.item), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, "Name: ", result.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, "Description: ", result.description)))))); }