function MainComponent() { const [isLoading, setIsLoading] = React.useState(false); const [chatMessages, setChatMessages] = React.useState([ { role: "user", content: "ユーザーからのメッセージ" }, { role: "assistant", content: "アシスタントからの応答" } ]); const [message, setMessage] = React.useState(''); const sendMessage = async (e)=>{ e.preventDefault(); if (message.trim() === '') return; const updatedMessages = [ ...chatMessages, { role: "user", content: message } ]; setChatMessages(updatedMessages); setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: updatedMessages, system_prompt: 'Explain this content' }) }); const result = await response.json(); setIsLoading(false); if (result.choices && result.choices[0] && result.choices[0].message) { const assistantMsg = { role: "assistant", content: result.choices[0].message.content }; setChatMessages((prevMessages)=>[ ...prevMessages, assistantMsg ]); } } catch (error) { setIsLoading(false); console.error("Failed to send message: ", error); } setMessage(''); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f7f7f7] p-4", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl rounded-lg shadow-lg bg-white p-6", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg text-[#121212] mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "ChatGPT テスト"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-2 overflow-y-auto max-h-[400px]", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, chatMessages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`, __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `inline-block rounded-lg px-4 py-2 ${msg.role === 'user' ? 'bg-[#D1E7FF] text-right' : 'bg-[#E7EAF4]'}`, __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, msg.content)))), isLoading ? /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto text-sm italic text-[#6c757d] mt-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Loading...") : null, /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: sendMessage, __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "message", type: "text", className: "w-full p-2 border rounded-md text-[#121212] focus:outline-none focus:ring-2 focus:ring-[#005eff]", placeholder: "メッセージを入力...", value: message, onChange: (e)=>setMessage(e.target.value), __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }))))); }