function MainComponent() { const [messages, setMessages] = React.useState([ { role: 'assistant', content: 'こんにちは！何をお手伝いしましょうか？' } ]); const [input, setInput] = React.useState(''); const [loading, setLoading] = React.useState(false); const sendMessage = async ()=>{ if (!input) return; const userMessage = { role: 'user', content: input }; const updatedMessages = [ ...messages, userMessage ]; setMessages(updatedMessages); setInput(''); setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: updatedMessages }) }); const data = await response.json(); const assistantMessage = data.choices[0].message; setMessages([ ...updatedMessages, assistantMessage ]); } catch (error) { console.error('Error:', error); } finally{ setLoading(false); } }; const handleKeyPress = (e)=>{ if (e.key === 'Enter') { sendMessage(); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-[#E9EEF3] font-sans", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-3 bg-[#00C300] text-white", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "Chat with GPT")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 overflow-y-scroll", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", id: "messageContainer", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`, __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `p-2 rounded-lg ${msg.role === 'user' ? 'bg-[#DCF8C6] text-right' : 'bg-white'} max-w-[80%]`, __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, msg.content))), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 50, columnNumber: 23 }, __self: this }, "入力中..."))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center p-3 bg-white border-t border-gray-200", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "message", type: "text", placeholder: "メッセージを入力...", className: "flex-1 p-2 mr-2 border border-gray-300 rounded-sm", value: input, onChange: (e)=>setInput(e.target.value), onKeyPress: handleKeyPress, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-[#00C300] text-white rounded-full", onClick: sendMessage, __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this })))); }