function MainComponent() { const [threads, setThreads] = React.useState([]); const [selectedThread, setSelectedThread] = React.useState(null); const [chatMessages, setChatMessages] = React.useState([]); const [inputMessage, setInputMessage] = React.useState(''); const [loading, setLoading] = React.useState(false); React.useEffect(()=>{ fetchThreads(); }, []); const fetchThreads = async ()=>{ const response = await fetch('/api/db/chat_rireki', { method: 'POST', body: JSON.stringify({ query: 'SELECT `id`, `title`, `messages` FROM `threads`', values: [] }) }); const data = await response.json(); setThreads(data); }; const fetchMessages = async (threadId)=>{ const response = await fetch('/api/db/chat_rireki', { method: 'POST', body: JSON.stringify({ query: 'SELECT `content`, `file_name` FROM `files` WHERE `thread_id` = ?', values: [ threadId ] }) }); const data = await response.json(); setChatMessages(data); }; const createNewThread = async ()=>{ await fetch('/api/db/chat_rireki', { method: 'POST', body: JSON.stringify({ query: 'INSERT INTO `threads` (`title`, `messages`) VALUES (?, ?)', values: [ '無題', '' ] }) }); fetchThreads(); }; const sendMessage = async ()=>{ if (!inputMessage.trim()) return; setLoading(true); const messages = [ { role: 'user', content: inputMessage } ]; const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: messages, system_prompt: 'Expand this conversation' }) }); const data = await response.json(); const gptMessage = data.choices[0].message.content; const newMessages = [ ...chatMessages, { role: 'user', content: inputMessage }, { role: 'assistant', content: gptMessage } ]; await fetch('/api/db/chat_rireki', { method: 'POST', body: JSON.stringify({ query: 'UPDATE `threads` SET `messages` = ? WHERE `id` = ?', values: [ JSON.stringify(newMessages), selectedThread.id ] }) }); setChatMessages(newMessages); setInputMessage(''); setLoading(false); }; const handleThreadClick = (thread)=>{ setSelectedThread(thread); fetchMessages(thread.id); }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[250px] border-r border-gray-300 overflow-y-auto", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: createNewThread, className: "w-full py-2 bg-blue-500 text-white font-bold", __source: { fileName: "", lineNumber: 90, columnNumber: 17 }, __self: this }, "新しいスレッド"), /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full p-2", placeholder: "検索...", __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 92, columnNumber: 17 }, __self: this }, threads.map((thread)=>/*#__PURE__*/ React.createElement("li", { key: thread.id, className: "flex justify-between items-center p-2 border-b border-gray-300 cursor-pointer", onClick: ()=>handleThreadClick(thread), __source: { fileName: "", lineNumber: 94, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 95, columnNumber: 29 }, __self: this }, thread.title), /*#__PURE__*/ React.createElement("button", { className: "text-red-500 fas fa-trash-alt", __source: { fileName: "", lineNumber: 96, columnNumber: 29 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow p-4 overflow-y-auto", __source: { fileName: "", lineNumber: 102, columnNumber: 17 }, __self: this }, chatMessages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${msg.role === 'user' ? 'justify-end' : ''}`, __source: { fileName: "", lineNumber: 104, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `p-2 m-2 rounded ${msg.role === 'user' ? 'bg-blue-200' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 105, columnNumber: 29 }, __self: this }, msg.content)))), /*#__PURE__*/ React.createElement("div", { className: "p-4 flex items-center", __source: { fileName: "", lineNumber: 111, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), className: "flex-grow p-2 border border-gray-300 rounded", placeholder: "メッセージを入力...", onKeyDown: (e)=>e.key === 'Enter' ? sendMessage() : null, __source: { fileName: "", lineNumber: 112, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, className: "ml-2 p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 120, columnNumber: 21 }, __self: this }, "送信"), loading && /*#__PURE__*/ React.createElement("div", { className: "ml-2 fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 121, columnNumber: 33 }, __self: this })))); }