function MainComponent() { const [messages, setMessages] = React.useState([ { role: "assistant", content: "Hello! How can I help you today?" }, { role: "user", content: "What's the weather like?" } ]); const [input, setInput] = React.useState(""); const [loading, setLoading] = React.useState(false); const handleSubmit = async (e)=>{ e.preventDefault(); if (input.trim() === "") return; const userMessage = { role: "user", content: input }; setMessages((prevMessages)=>[ ...prevMessages, userMessage ]); setInput(""); setLoading(true); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ ...messages, userMessage ] }) }); const data = await response.json(); const botMessage = { role: "assistant", content: data.choices[0].message.content.trim() }; setMessages((prevMessages)=>[ ...prevMessages, botMessage ]); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex items-center", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-2xl mr-2 text-blue-500", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "ChatGPT Chatbot")), /*#__PURE__*/ React.createElement("div", { className: "chatbox border p-4 mb-4 max-h-[400px] overflow-y-auto", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `message p-2 mb-2 rounded-lg ${msg.role === 'assistant' ? 'bg-blue-200' : 'bg-gray-200 self-end'}`, __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, msg.content)))), /*#__PURE__*/ React.createElement("form", { className: "flex", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "Type your message...", className: "flex-grow p-2 border rounded-l-lg", value: input, onChange: (e)=>setInput(e.target.value), disabled: loading, __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-blue-500 text-white rounded-r-lg", disabled: loading, __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, loading ? "Loading..." : "Send")))); }