function MainComponent() { const [messages, setMessages] = React.useState([ { sender: 'character', text: 'こんにちは！菊川市議会議員の渥美よしきです。どのようなご質問がありますか？' } ]); const [inputMessage, setInputMessage] = React.useState(''); const [character, setCharacter] = React.useState({ name: '渥美よしき', avatar: 'https://ucarecdn.com/46be44f1-cabd-4169-8337-2d887d90f29a/-/format/auto/' }); const [websiteContent, setWebsiteContent] = React.useState(''); React.useEffect(()=>{ fetch('/integrations/web-scraping/post', { method: 'POST', body: JSON.stringify({ url: 'https://atsumi-yoshiki.net/', getText: true }) }).then((response)=>response.text()).then((data)=>setWebsiteContent(data)).catch((error)=>console.error('Error fetching website content:', error)); }, []); const handleInputChange = (e)=>{ setInputMessage(e.target.value); }; const handleSubmit = (e)=>{ e.preventDefault(); if (inputMessage.trim()) { setMessages([ ...messages, { sender: 'user', text: inputMessage } ]); setInputMessage(''); fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', body: JSON.stringify({ messages: [ { role: "system", content: `あなたは菊川市議会議員の渥美よしきです。以下の情報をもとにユーザーの質問に答えてください：${websiteContent}` }, { role: "user", content: inputMessage }, { role: "user", content: "文章は読みやすいように改行して." } ] }) }).then((response)=>response.json()).then((data)=>{ const aiResponse = data.choices[0].message.content; setMessages((prevMessages)=>[ ...prevMessages, { sender: 'character', text: aiResponse } ]); }).catch((error)=>console.error('Error:', error)); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex items-center ${message.sender === 'user' ? 'justify-end' : ''}`, __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, message.sender === 'character' && /*#__PURE__*/ React.createElement("img", { src: character.avatar, alt: "渥美よしき議員のアイコン", className: "w-12 h-12 rounded-full mr-3", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `p-3 rounded-lg shadow max-w-xs ${message.sender === 'user' ? 'bg-blue-500' : 'bg-white'}`, __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `${message.sender === 'user' ? 'text-white' : 'text-gray-800'} whitespace-pre-line`, __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, message.text)))))), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 border-t border-gray-200", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex space-x-2", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: inputMessage, onChange: handleInputChange, placeholder: "渥美よしき議員に質問してください...", className: "flex-1 border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white rounded-full px-6 py-2 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "送信")))); }