function MainComponent() { const [messages, setMessages] = React.useState([]); const [input, setInput] = React.useState(''); const [loading, setLoading] = React.useState(false); const sendMessage = async ()=>{ if (!input.trim()) return; const newMessages = [ ...messages, { role: 'user', content: input } ]; 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 }) }); const data = await response.json(); const assistantMessage = data?.choices?.[0]?.message?.content || 'Error: No response'; setMessages([ ...newMessages, { role: 'assistant', content: assistantMessage } ]); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white p-4 shadow-md rounded", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-[#121212] text-lg mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Rental App Dashboard Design via ChatGPT"), /*#__PURE__*/ React.createElement("div", { className: "h-[400px] overflow-y-scroll mb-4 p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 my-2 rounded ${msg.role === 'user' ? 'bg-blue-100 text-right' : 'bg-green-100 text-left'}`, __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, msg.content))), loading && /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text text-gray-500 text-center", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Loading...")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "message", value: input, onChange: (e)=>setInput(e.target.value), className: "flex-1 p-2 border border-gray-300 rounded", placeholder: "Type your message...", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, className: "ml-2 p-2 bg-blue-500 text-white rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Send")))); }