function MainComponent() { const [messages, setMessages] = React.useState([ { sender: "Support Team", text: "How can we assist you today?" }, { sender: "You", text: "I need help with my order." } ]); const [inputValue, setInputValue] = React.useState(""); const handleSubmit = (e)=>{ e.preventDefault(); fetch('https://api.telegram.org/bot/sendMessage', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ chat_id: '', text: inputValue }) }).then((response)=>response.json()).then((data)=>{ const newMessage = { sender: "You", text: inputValue }; setMessages([ ...messages, newMessage ]); setInputValue(""); }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex items-center justify-center bg-white p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] bg-[#0088cc] rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-2xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Live Chat"), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-4 rounded-lg mb-4 h-[300px] overflow-y-auto", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, messages.map((message, index)=>{ const messageStyle = message.sender === "Support Team" ? "text-[#0088cc]" : "text-gray-700"; return /*#__PURE__*/ React.createElement("div", { key: index, className: `text-lg font-roboto mb-2 ${messageStyle}`, __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, message.sender, ": ", message.text); })), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", placeholder: "Type your message...", className: "w-full p-2 rounded-lg mb-4 border-2 border-[#0088cc] focus:outline-none font-roboto", value: inputValue, onChange: (e)=>setInputValue(e.target.value), __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-white text-[#0088cc] p-2 rounded-lg font-bold font-roboto border-2 border-[#0088cc] hover:bg-[#0088cc] hover:text-white transition", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Send")))); }