function MainComponent() { const [messages, setMessages] = React.useState([ { text: 'Hello, how can I assist you today?', sender: 'bot', time: '10:00 AM' }, { text: 'What is the weather like today?', sender: 'user', time: '10:01 AM' } ]); const [inputValue, setInputValue] = React.useState(''); const getRandomNumber = ()=>Math.floor(Math.random() * 10) + 1; const handleSendMessage = ()=>{ if (inputValue.trim() !== '') { const newMessage = { text: inputValue, sender: 'user', time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }; const botResponse = { text: `${getRandomNumber()}`, sender: 'bot', time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }; setMessages([ newMessage, botResponse, ...messages ]); setInputValue(''); } }; const handleChange = (e)=>{ setInputValue(e.target.value); }; const handleKeyDown = (e)=>{ if (e.ctrlKey && e.key === 'Enter') { handleSendMessage(); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#010101] text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "ChatGPT4 Chat Tool"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-user-circle text-2xl", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 p-4 overflow-auto flex flex-col-reverse", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, messages.map((message, index)=>{ const isUser = message.sender === 'user'; return /*#__PURE__*/ React.createElement("div", { key: index, className: `mb-4 ${isUser ? 'self-end' : ''}`, __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `p-3 rounded-lg w-full max-w-[75%] ${isUser ? 'bg-[#010101] text-white' : 'bg-[#f3f3f3] text-[#010101]'}`, __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, message.text)), /*#__PURE__*/ React.createElement("div", { className: `p-1 text-sm text-gray-500 ${isUser ? 'text-right' : ''}`, __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, message.time)); })), /*#__PURE__*/ React.createElement("footer", { className: "flex p-4 border-t border-gray-300", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "chatInput", className: "flex-1 p-2 border border-gray-300 rounded", placeholder: "Type a message...", value: inputValue, onChange: handleChange, onKeyDown: handleKeyDown, __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-2 bg-[#010101] text-white p-2 rounded", onClick: handleSendMessage, __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this })))); }