function MainComponent({ messages, user, onSendMessage }) { const [message, setMessage] = React.useState(''); const handleSendMessage = ()=>{ if (message.trim()) { onSendMessage(message); setMessage(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-[500px] flex flex-col bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-none p-4 bg-[#00c300] text-white font-sans text-lg", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, user), /*#__PURE__*/ React.createElement("div", { className: "flex-grow p-4 overflow-auto", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, messages.map((msg, idx)=>{ const isUser = msg.sender === user; const msgClasses = isUser ? "bg-[#cdfccd] text-right" : "bg-white text-left"; return /*#__PURE__*/ React.createElement("div", { key: idx, className: `p-2 my-2 rounded-lg shadow ${msgClasses}`, __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-sans text-sm", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, msg.content)); })), /*#__PURE__*/ React.createElement("div", { className: "flex-none p-4 bg-white border-t border-gray-200 flex", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "message", type: "text", className: "flex-grow p-2 border rounded-lg border-gray-300 font-sans", placeholder: "Type a message", value: message, onChange: (e)=>setMessage(e.target.value), __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-2 px-4 py-2 bg-[#00c300] text-white rounded-lg font-sans", onClick: handleSendMessage, __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Send"))); } function StoryComponent() { const user = "John Doe"; const [messages, setMessages] = React.useState([ { sender: "Alice", content: "Hello, how are you?" }, { sender: "John Doe", content: "I'm good, thanks! And you?" }, { sender: "Alice", content: "I'm doing well. Are you free today?" }, { sender: "John Doe", content: "Yes, let's catch up later." } ]); const handleSendMessage = (newMessage)=>{ setMessages([ ...messages, { sender: user, content: newMessage } ]); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full border border-gray-300", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { user: user, messages: messages, onSendMessage: handleSendMessage, __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this })); }