function MainComponent({ messages }) { const [inputValue, setInputValue] = React.useState(''); const handleInputChange = (e)=>{ setInputValue(e.target.value); }; const handlePredefinedQuestionClick = (question)=>{ setInputValue(question); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col bg-white p-4", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-auto", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex items-center my-2 rounded-lg ${message.author === 'user' ? 'justify-end' : ''}`, __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, message.author !== 'user' && /*#__PURE__*/ React.createElement("img", { src: "./ai-avatar.png", alt: "AI Avatar", className: "w-[40px] h-[40px] rounded-full mr-2", __source: { fileName: "", lineNumber: 17, columnNumber: 43 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `p-3 rounded-lg ${message.author === 'user' ? 'bg-[#3C9AFF] text-white' : 'bg-[#F4F4F4] text-black'} `, __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, message.text)), message.author === 'user' && /*#__PURE__*/ React.createElement("img", { src: "./user-avatar.png", alt: "User Avatar", className: "w-[40px] h-[40px] rounded-full ml-2", __source: { fileName: "", lineNumber: 21, columnNumber: 43 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-4 border border-gray-200 flex flex-wrap justify-end", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, [ "How are people feeling?", "Help me generate content", "Which tone is most popular?", "Help me create a report" ].map((question)=>/*#__PURE__*/ React.createElement("button", { key: question, onClick: ()=>handlePredefinedQuestionClick(question), className: "m-2 px-4 py-2 bg-white text-black border border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, question))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center mt-4", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "flex-1 p-2 border-2 border-gray-200 rounded-md", placeholder: "Ask me anything", name: "userInput", value: inputValue, onChange: handleInputChange, __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "ml-4 px-4 py-2 bg-blue-500 text-white rounded-lg", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Send"))); } function StoryComponent() { const messagesSample = [ { author: 'user', text: 'How are people feeling?', avatar: './user-avatar.png' }, { author: 'system', text: 'Currently, sentiments are leaning positive in general discussions.', avatar: './ai-avatar.png' } ]; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen p-10 bg-white flex justify-center items-start", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { messages: messagesSample, __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this })); }