function MainComponent() { const [messages, setMessages] = React.useState([ { text: 'こんにちは！何をお手伝いしましょうか？', sender: 'bot' }, { text: 'おはようございます！', sender: 'user' } ]); const [input, setInput] = React.useState(''); const [loading, setLoading] = React.useState(false); const handleSend = async ()=>{ if (input.trim()) { const newMessages = [ ...messages, { text: input, sender: 'user' } ]; setMessages(newMessages); setInput(''); setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: newMessages.map((msg)=>({ role: msg.sender === 'bot' ? 'assistant' : 'user', content: msg.text })) }) }); const data = await response.json(); const botMessage = data.choices[0].message.content; setMessages([ ...newMessages, { text: botMessage, sender: 'bot' } ]); setLoading(false); } }; const handleInputChange = (event)=>{ setInput(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-4 bg-[#2e2e2e] text-white", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "ChatGPT UI")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col flex-grow p-4 overflow-y-auto space-y-4", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, messages.map((message, index)=>{ const isBot = message.sender === 'bot'; return /*#__PURE__*/ React.createElement("div", { key: index, className: `flex items-start space-x-2 ${isBot ? 'self-start' : 'self-end flex-row-reverse'}`, __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[40px] h-[40px] bg-gray-400 rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-user${isBot ? '' : '-circle'} text-white`, __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `max-w-[70%] p-4 shadow-lg rounded-lg ${isBot ? 'bg-white' : 'bg-[#2e2e2e] text-white'}`, __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, message.text))); })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center p-4 bg-white", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "flex-grow p-2 border border-gray-300 rounded-md font-roboto", type: "text", name: "message", value: input, onChange: handleInputChange, placeholder: "メッセージを入力...", disabled: loading, __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-2 p-2 bg-[#2e2e2e] text-white rounded-md font-roboto", onClick: handleSend, disabled: loading, __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, "送信"), loading && /*#__PURE__*/ React.createElement("div", { className: "ml-2 loader", __source: { fileName: "", lineNumber: 87, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, ` .loader { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 24px; height: 24px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `)); }