function MainComponent() { const messageList = "flex flex-col overflow-y-scroll h-[calc(100vh-112px)] space-y-4 p-4"; const messageItem = "flex flex-col p-4 rounded-lg"; const incomingMessage = "bg-[#E5E5EA] text-left self-start"; const outgoingMessage = "bg-[#0B93F6] text-white self-end"; const messageText = "font-roboto break-words"; const messageTime = "text-xs text-[#918E9B] mt-1"; const sendMessageArea = "fixed bottom-0 left-0 right-0 flex items-center p-4 border-t-2 border-[#DDDDDD] bg-white"; const inputArea = "w-full p-3 border-2 border-[#DDDDDD] rounded-md mr-4 flex-grow"; const sendButton = "text-[#007aff] font-bold"; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: messageList, __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${messageItem} ${incomingMessage}`, __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: messageText, __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "Hello, how are you today?"), /*#__PURE__*/ React.createElement("span", { className: messageTime, __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "3:45 PM")), /*#__PURE__*/ React.createElement("div", { className: `${messageItem} ${outgoingMessage}`, __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: messageText, __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "I'm good, thanks for asking!"), /*#__PURE__*/ React.createElement("span", { className: messageTime, __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "3:46 PM"))), /*#__PURE__*/ React.createElement("div", { className: sendMessageArea, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Type your message here...", className: inputArea, name: "message", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: sendButton, __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "Send")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, ` body { overflow: hidden; } `)); }