function MainComponent({ messages, sendMessage }) { const [currentMessage, setCurrentMessage] = React.useState(""); const handleSendMessage = ()=>{ if (currentMessage.trim() !== '') { sendMessage(currentMessage); setCurrentMessage(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-[90vh] max-w-[600px] mx-auto border-2 border-gray-300 rounded-lg bg-white", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-none p-4 bg-green-400 text-white font-roboto shadow-md", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, "Chat with CHAT_GPT"), /*#__PURE__*/ React.createElement("div", { className: "flex-auto overflow-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { className: `flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`, key: index, __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[70%] p-3 rounded-lg ${msg.role === 'user' ? 'bg-blue-300' : 'bg-yellow-200'} shadow`, __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, msg.content)))), /*#__PURE__*/ React.createElement("div", { className: "flex-none p-2 bg-gray-100", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "flex-auto border-2 border-gray-300 p-2 rounded-lg", type: "text", value: currentMessage, onChange: (e)=>setCurrentMessage(e.target.value), name: "messageInput", placeholder: "Type your message here...", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-green-500 text-white rounded-lg font-roboto shadow hover:bg-green-600", onClick: handleSendMessage, __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, "Send 📩")))); } function StoryComponent() { const sampleMessages = [ { role: "user", content: "Hello, how are you?" }, { role: "assistant", content: "Hello! I'm doing great, thank you for asking. How can I help you today?" } ]; const sendMessage = (messageContent)=>{ console.log("Sending message:", messageContent); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { messages: sampleMessages, sendMessage: sendMessage, __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this })); }