function MainComponent() { const [messages, setMessages] = React.useState([ { id: 1, author: "AI", text: "Sure, here's one: Why did the coffee file a police report?", mood: "Happy" }, { id: 2, author: "AI", text: "It got mugged!", mood: "Happy" }, { id: 3, author: "User", text: "tell me a story", mood: null }, { id: 4, author: "AI", text: "Once upon a time, there was a curious little girl who lived in a small village deep in the forest. One day, she wandered into the woods and stumbled upon a magical tree that granted her three wishes...", mood: "Relaxed" } ]); const [newMessage, setNewMessage] = React.useState(''); const sendMessage = (event)=>{ event.preventDefault(); if (newMessage.trim()) { const nextId = messages.length + 1; setMessages([ ...messages, { id: nextId, author: "User", text: newMessage, mood: null } ]); setNewMessage(''); } }; const handleMessageChange = (event)=>{ setNewMessage(event.target.value); }; let messageElements = messages.map((message)=>{ let messageClasses = 'p-2 mb-2 rounded break-all'; let authorLabel; if (message.author === "AI") { messageClasses += ' bg-red-200'; authorLabel = /*#__PURE__*/ React.createElement("span", { className: "font-bold text-pink-600", __source: { fileName: "", lineNumber: 33, columnNumber: 21 }, __self: this }, "AI"); } else { messageClasses += ' bg-blue-100'; authorLabel = /*#__PURE__*/ React.createElement("span", { className: "font-bold text-blue-600", __source: { fileName: "", lineNumber: 36, columnNumber: 21 }, __self: this }, "YOU"); } return /*#__PURE__*/ React.createElement("div", { key: message.id, className: messageClasses, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, authorLabel, ": ", /*#__PURE__*/ React.createElement("span", { className: message.mood ? 'font-semibold' : '', __source: { fileName: "", lineNumber: 40, columnNumber: 24 }, __self: this }, message.text)); }); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gradient-to-br from-[#fbc8d4] to-[#ffffff] text-[#121212]", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 shadow-md bg-white flex items-center justify-between", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-cog text-pink-600 text-xl", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-semibold text-pink-600", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "Conversation Log"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-code-branch text-pink-600 text-lg", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-auto p-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-roboto space-y-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, messageElements)), /*#__PURE__*/ React.createElement("div", { className: "flex-none p-4 bg-white flex justify-between items-center", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: sendMessage, className: "w-full flex", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: newMessage, onChange: handleMessageChange, className: "w-full p-4 rounded-l-full border-2 border-pink-400 focus:outline-none focus:ring-2 focus:ring-pink-600 font-light text-gray-700 placeholder-gray-500", placeholder: "Message", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-pink-600 text-white p-4 rounded-r-full", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }))))); }