function MainComponent() { const [input, setInput] = React.useState(""); const [messages, setMessages] = React.useState([]); const [loading, setLoading] = React.useState(false); const sendMessage = async ()=>{ setLoading(true); const newMessages = [ ...messages, { role: "user", content: input } ]; setMessages(newMessages); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: newMessages }) }); const data = await response.json(); const reply = data.choices[0].message.content; setMessages([ ...newMessages, { role: "assistant", content: reply } ]); setLoading(false); setInput(""); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, "写真のポートフォリオサイト"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white rounded-lg p-4 shadow-lg", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[400px] overflow-y-auto mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, messages.map((msg, index)=>{ let msgClasses = "mb-2 p-2 rounded "; msgClasses += msg.role === "user" ? "bg-blue-100 self-end" : "bg-gray-100 self-start"; return /*#__PURE__*/ React.createElement("div", { key: index, className: msgClasses, __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, msg.content)); }), loading && /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-blue-500", __source: { fileName: "", lineNumber: 38, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: input, onChange: (e)=>setInput(e.target.value), className: "w-full p-2 rounded-l-lg border border-gray-300 font-roboto", placeholder: "Type your message...", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, className: "px-4 py-2 bg-blue-500 text-white rounded-r-lg font-roboto hover:bg-blue-600", disabled: loading, __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Send")))); }