function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputValue, setInputValue] = React.useState(""); const [showHistory, setShowHistory] = React.useState(false); const [history, setHistory] = React.useState([]); const messageEndRef = React.useRef(null); const scrollToBottom = ()=>{ messageEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; const handleSendMessage = ()=>{ if (!inputValue.trim()) return; const newUserMessage = { id: Date.now(), type: 'user', text: inputValue, timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }; setMessages([ ...messages, newUserMessage ]); setShowHistory(false); setInputValue(""); setTimeout(()=>{ const aiResponse = { id: newUserMessage.id + 1, type: 'ai', text: "This is an AI response.", timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) }; setMessages((messages)=>[ ...messages, aiResponse ]); scrollToBottom(); }, 1000); }; const handleNewChat = ()=>{ setHistory([ ...history, ...messages ]); setMessages([]); setShowHistory(false); }; const handleShowHistory = ()=>{ setShowHistory(true); }; React.useEffect(scrollToBottom, [ messages ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center bg-[#F0F0F5] p-4 shadow-md", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-sans text-[#3A3A55]", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "Chat App"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "font-sans text-sm text-[#3A3A55] bg-[#D3D3FA] px-3 py-1 rounded", onClick: handleNewChat, __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "New Chat"), /*#__PURE__*/ React.createElement("button", { className: "font-sans text-sm text-[#3A3A55] bg-[#D3D3FA] px-3 py-1 rounded", onClick: handleShowHistory, __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "History"))), /*#__PURE__*/ React.createElement("div", { className: `flex-grow overflow-y-scroll p-4 space-y-2 bg-white ${showHistory ? 'block' : 'hidden'}`, __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, history.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: `flex ${message.type === 'user' ? 'justify-end' : 'justify-start'}`, __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[60%] rounded p-2 ${message.type === 'user' ? 'bg-[#AEDBFA]' : 'bg-[#D3E4CD]'}`, __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-base font-sans", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, message.text), /*#__PURE__*/ React.createElement("p", { className: "text-xs font-sans text-[#A5A5A5]", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, message.timestamp))))), /*#__PURE__*/ React.createElement("div", { className: `flex-grow overflow-y-scroll p-4 space-y-2 bg-white ${showHistory ? 'hidden' : 'block'}`, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: `flex ${message.type === 'user' ? 'justify-end' : 'justify-start'}`, __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[60%] rounded p-2 ${message.type === 'user' ? 'bg-[#AEDBFA]' : 'bg-[#D3E4CD]'}`, __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-base font-sans", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, message.text), /*#__PURE__*/ React.createElement("p", { className: "text-xs font-sans text-[#A5A5A5]", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, message.timestamp)))), /*#__PURE__*/ React.createElement("div", { ref: messageEndRef, __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this })), !showHistory && /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center bg-[#F0F0F5] p-4 shadow-up fixed bottom-0 left-0 right-0", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: inputValue, onChange: (e)=>setInputValue(e.target.value), className: "flex-grow border rounded p-2 font-sans", placeholder: "Type a message...", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSendMessage, className: "text-blue-500 ml-4", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this })))); }