function MainComponent() { const [userInput, setUserInput] = React.useState(''); const [chatHistory, setChatHistory] = React.useState([]); const [isLoading, setIsLoading] = React.useState(false); const [conversationContext, setConversationContext] = React.useState(''); const handleInputChange = (e)=>{ setUserInput(e.target.value); }; const handleSubmit = async (e)=>{ e.preventDefault(); if (!userInput.trim()) return; setIsLoading(true); const newUserMessage = { role: 'user', content: userInput }; setChatHistory((prev)=>[ ...prev, newUserMessage ]); try { const candidatesResponse = await fetch('/api/db/2024-15', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: 'SELECT * FROM `shizuoka_governor_candidates`' }) }); const candidatesData = await candidatesResponse.json(); const conversationHistoryResponse = await fetch('/api/db/553', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: 'SELECT * FROM `conversation_history` ORDER BY `id` DESC LIMIT 5' }) }); const conversationHistoryData = await conversationHistoryResponse.json(); const systemMessage = { role: 'system', content: `都知事選挙2024の候補者情報について回答してください。候補者の名前の後には「候補」とつけてください。回答は読みやすいように改行を入れてください。以下は候補者の情報です：\n${JSON.stringify(candidatesData)}\n\n過去の会話履歴：\n${JSON.stringify(conversationHistoryData)}\n\n前回の質問：${conversationContext}` }; const response = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ systemMessage, newUserMessage ] }) }); const data = await response.json(); const assistantResponse = data.choices[0].message.content; setChatHistory((prev)=>[ ...prev, { role: 'assistant', content: assistantResponse } ]); const now = new Date().toISOString(); await fetch('/api/db/553', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: 'INSERT INTO `conversation_history` (`timestamp`, `user_question`, `assistant_response`) VALUES (?, ?, ?)', values: [ now, userInput, assistantResponse ] }) }); setConversationContext(userInput); setUserInput(''); } catch (error) { console.error('Error:', error); } finally{ setIsLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gradient-to-r from-blue-100 to-purple-100", __source: { fileName: "", lineNumber: 76, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-4 bg-gradient-to-r from-blue-100 to-purple-100 shadow-md h-[63px]", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-indigo-800 font-noto-sans text-[15px]", __source: { fileName: "", lineNumber: 78, columnNumber: 10 }, __self: this }, "AIボートマッチ丨都知事選挙2024"), /*#__PURE__*/ React.createElement("a", { href: "https://demotech.jp/", target: "_blank", rel: "noopener noreferrer", className: "text-[11px] text-indigo-600 hover:text-indigo-800 transition duration-300 ease-in-out font-noto-sans", __source: { fileName: "", lineNumber: 79, columnNumber: 10 }, __self: this }, "一般社団法人デモテク")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-y-auto p-4", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, chatHistory.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-4 ${message.role === 'user' ? 'text-right' : 'text-left'}`, __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `inline-block p-3 rounded-lg ${message.role === 'user' ? 'bg-indigo-500 text-white' : 'bg-gray-100'}`, __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, message.content.split('\n').map((line, i)=>/*#__PURE__*/ React.createElement("p", { key: i, className: "mb-1 last:mb-0 text-lg", __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, line)))))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "p-4 bg-gradient-to-r from-blue-100 to-purple-100", __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userInput", value: userInput, onChange: handleInputChange, className: "flex-grow p-3 border-2 border-indigo-300 rounded-l-lg focus:outline-none focus:border-indigo-500 text-lg font-noto-sans", placeholder: "質問を入力してください...", disabled: isLoading, __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-indigo-500 text-white p-3 rounded-r-lg hover:bg-indigo-600 transition duration-300 ease-in-out", disabled: isLoading, __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-xl", __source: { fileName: "", lineNumber: 109, columnNumber: 28 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane text-xl", __source: { fileName: "", lineNumber: 109, columnNumber: 81 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "text-[10px] text-gray-500 mt-1", __source: { fileName: "", lineNumber: 112, columnNumber: 12 }, __self: this }, "回答は必ずしも正しいとは限りません。重要な情報は確認するようにしてください。")))); }