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-88", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "SELECT * FROM `kagoshima_governor_candidates`" }) }); const candidatesData = await candidatesResponse.json(); const conversationHistoryResponse = await fetch("/api/db/078", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "SELECT * FROM `conversation_data` ORDER BY `date_time` DESC LIMIT 5" }) }); const conversationHistoryData = await conversationHistoryResponse.json(); const systemMessage = { role: "system", content: `鹿児島県知事選挙2024の候補者情報について回答してください。候補者の名前の後には「候補」とつけてください。回答は読みやすいように改行を入れてください。以下は候補者の情報です：\n${JSON.stringify(candidatesData)}\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/078", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ query: "INSERT INTO `conversation_data` (`date_time`, `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: 85, 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: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-indigo-800 font-noto-sans text-[15px]", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __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: 90, columnNumber: 9 }, __self: this }, "一般社団法人デモテク")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-y-auto p-4", __source: { fileName: "", lineNumber: 99, 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: 101, 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: 107, 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: 115, 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: 123, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 127, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 128, 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: 129, 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: 138, columnNumber: 13 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-xl", __source: { fileName: "", lineNumber: 144, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane text-xl", __source: { fileName: "", lineNumber: 146, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "text-[10px] text-gray-500 mt-1", __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this }, "回答は必ずしも正確とは限りません。重要な情報は確認するようにしてください。")))); }