function MainComponent() { const [messages, setMessages] = React.useState([ { text: "Hi, how can I assist you today?", sender: "bot" }, { text: "I need help with my medication.", sender: "user" } ]); const [input, setInput] = React.useState(""); const handleSubmit = async (e)=>{ e.preventDefault(); if (input.trim() === "") return; const newMessages = [ ...messages, { text: input, sender: "user" } ]; setMessages(newMessages); setInput(""); const response = await fetch('YOUR_API_URL_HERE', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: input }) }); const data = await response.json(); setMessages((prevMessages)=>[ ...prevMessages, { text: data.reply, sender: "bot" } ]); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-gray-100 flex flex-col items-center justify-center font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white w-full max-w-[600px] p-6 rounded shadow-lg", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Care Navigation Chatbot"), /*#__PURE__*/ React.createElement("div", { className: "h-[400px] overflow-y-auto mb-4 p-4 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, messages.map((msg, index)=>{ const alignment = msg.sender === "user" ? "text-left" : "text-right"; const styleClasses = msg.sender === "user" ? "bg-gray-300 text-black" : "bg-blue-500 text-white"; return /*#__PURE__*/ React.createElement("div", { key: index, className: `mb-4 ${alignment}`, __source: { fileName: "", lineNumber: 41, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `inline-block p-2 rounded ${styleClasses}`, __source: { fileName: "", lineNumber: 42, columnNumber: 17 }, __self: this }, msg.text)); })), /*#__PURE__*/ React.createElement("form", { className: "flex", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "Type your message...", className: "w-full p-2 border border-gray-300 rounded-l focus:outline-none", value: input, onChange: (e)=>setInput(e.target.value), __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white p-2 rounded-r", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }))))); }