function MainComponent({ aiName, aiStatus, messages }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4 bg-[#00FF00] rounded-lg shadow-md", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2 mb-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto text-[#FF0000]", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, `Chat with ${aiName}`), /*#__PURE__*/ React.createElement("span", { className: `text-sm font-roboto px-2 py-1 rounded-full ${aiStatus.learning ? 'text-white bg-[#f97316]' : 'text-[#FF0000] bg-[#d4d4d8]'}`, __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, aiStatus.learning ? 'Learning 🧠' : 'Ready ✔️')), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full space-y-2", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex items-center justify-between p-3 ${message.isUser ? 'bg-[#e0f2fe] border border-[#bfdbfe]' : 'bg-white border border-[#d1d5db]'} rounded-lg`, __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `text-sm font-roboto ${message.isUser ? 'text-[#1e40af]' : 'text-[#6b7280]'}`, __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, message.text), /*#__PURE__*/ React.createElement("span", { className: `${message.isUser ? 'text-[#1e40af]' : 'text-[#6b7280]'}`, __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, message.time))))); } function StoryComponent() { const messages = [ { isUser: false, text: "Hello! How can I assist you today?", time: "10:15 AM" }, { isUser: true, text: "I need help with a programming issue.", time: "10:16 AM" }, { isUser: false, text: "Sure, I'd be glad to help. What's the issue?", time: "10:17 AM" }, { isUser: true, text: "Could you help me understand machine learning better?", time: "10:20 AM" }, { isUser: false, text: "Absolutely! Machine learning is a field of AI that learns from data.", time: "10:21 AM" } ]; const aiStatus = { learning: true }; return /*#__PURE__*/ React.createElement("div", { className: "max-w-sm mx-auto my-10", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { aiName: "ETHAN", messages: messages, aiStatus: aiStatus, __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this })); }

Chat with ETHAN