function MainComponent() { const [messages, setMessages] = React.useState([]); const [messageInput, setMessageInput] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleInputChange = (e)=>{ setMessageInput(e.target.value); }; const handleSubmit = ()=>{ if (messageInput.trim() === '') return; const newMessage = { role: 'user', content: messageInput }; setMessages([ ...messages, newMessage ]); setIsLoading(true); fetch('/integrations/anthropic-claude-sonnet/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ newMessage ] }) }).then((response)=>response.json()).then((data)=>{ setMessages((prevMessages)=>[ ...prevMessages, { role: 'ai', content: data.choices[0].message.content } ]); setIsLoading(false); }); setMessageInput(''); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto min-h-screen bg-[#E5E5E5] p-4", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-t-lg p-4 shadow", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-center text-gray-800", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "AIトーク")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center p-4 bg-white", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "flex-1 p-2 mr-4 text-gray-800 border rounded focus:outline-none", placeholder: "メッセージを入力", onChange: handleInputChange, value: messageInput, __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600", onClick: handleSubmit, __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "送信")), /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-2 overflow-y-auto", style: { height: 'calc(100vh - 160px)' }, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `my-2 p-3 rounded ${msg.role === 'user' ? 'bg-green-200' : 'bg-gray-300'}`, __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, msg.role === 'user' ? 'User' : 'AI', ": ", msg.content))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "my-2 p-3 bg-gray-300 rounded", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "AI: 回答を生成中..."))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .bg-gray-300 { animation: fadeIn 1s ease-in-out; } `)); }