function MainComponent({ onSave, onVideoRecord, dialogue, sendMessage }) { const [messageText, setMessageText] = React.useState(''); const handleSave = ()=>{ if (onSave) onSave(dialogue); }; const handleVideoRecord = ()=>{ if (onVideoRecord) onVideoRecord(); }; const handleMessageSend = ()=>{ if (sendMessage && messageText.trim()) { sendMessage(messageText); setMessageText(''); } }; const handleTextChange = (event)=>{ setMessageText(event.target.value); }; const dialogueDisplay = dialogue.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex mb-2 ${message.isOwn ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `p-2 text-sm rounded-md ${message.isOwn ? "bg-blue-300" : "bg-gray-200"}`, __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, message.text))); const handleKeyPress = (event)=>{ if (event.key === 'Enter') { handleMessageSend(); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col p-4 w-full max-w-md bg-white rounded-lg shadow space-y-4", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "Chat"), /*#__PURE__*/ React.createElement("button", { onClick: handleSave, className: "p-2 bg-blue-500 text-white rounded-full hover:bg-blue-700 transition", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "💾")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto w-full", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, dialogueDisplay), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "pt-2", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: messageText, onChange: handleTextChange, onKeyPress: handleKeyPress, name: "messageText", placeholder: "Type your message here...", className: "w-full p-2 border-2 border-gray-300 rounded-md focus:outline-none focus:border-blue-500 transition", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "pt-2 flex", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleMessageSend, className: "flex-grow p-2 bg-blue-500 text-white rounded-md hover:bg-blue-700 transition", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Send Message"))), /*#__PURE__*/ React.createElement("div", { className: "pt-2 flex", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleVideoRecord, className: "flex items-center justify-center w-full p-2 bg-green-500 text-white rounded-full hover:bg-green-700 transition", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "🎥 ", /*#__PURE__*/ React.createElement("span", { className: "ml-2 font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 14 }, __self: this }, "Record Video")))); } function StoryComponent() { const saveDialogue = (dialogue)=>{ console.log('Saved dialogue:', dialogue); }; const recordVideo = ()=>{ console.log('Video recording started'); }; const sendMessage = (messageText)=>{ console.log('Message sent:', messageText); }; const sampleDialogue = [ { text: "Hi there!", isOwn: false }, { text: "Hello! How can I assist you today?", isOwn: true }, { text: "I'd like to know more about your services.", isOwn: false }, { text: "Absolutely, let's get started with a quick video chat.", isOwn: true } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 96, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onSave: saveDialogue, onVideoRecord: recordVideo, dialogue: sampleDialogue, sendMessage: sendMessage, __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this })); }