function MainComponent() { const [messages, setMessages] = React.useState([]); const [loading, setLoading] = React.useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); const message = e.target.message.value.trim(); if (!message) return; setLoading(true); setMessages([ ...messages, { role: 'user', content: message } ]); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...messages, { role: 'user', content: message } ] }) }); const data = await response.json(); const reply = data.choices[0].message.content; setMessages([ ...messages, { role: 'user', content: message }, { role: 'assistant', content: reply } ]); setLoading(false); e.target.reset(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen p-4 bg-gray-100", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white p-6 rounded shadow-md", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "ChatGPT Bot"), /*#__PURE__*/ React.createElement("div", { className: "h-[400px] overflow-y-scroll border p-4 bg-gray-50 rounded mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { id: "messages", className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-2 ${msg.role === 'user' ? 'text-right' : 'text-left'}`, __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `${msg.role === 'user' ? 'bg-blue-100' : 'bg-green-100'} inline-block p-2 rounded`, __source: { fileName: "", lineNumber: 40, columnNumber: 17 }, __self: this }, msg.content))))), /*#__PURE__*/ React.createElement("form", { className: "flex", id: "chat-form", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", className: "flex-1 p-2 border rounded-l font-roboto text-[#121212]", placeholder: "Type your message...", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-blue-500 text-white rounded-r hover:bg-blue-600 font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, loading ? 'Loading...' : 'Send')))); }