function MainComponent() { const [image, setImage] = React.useState(null); const imagePreview = image ? URL.createObjectURL(image) : null; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7] flex flex-col items-center justify-center p-4 gap-4", __source: { fileName: "", lineNumber: 6, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg w-full max-w-md space-y-4", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-2xl mb-4 text-center text-[#333] font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, "Chat Interface"), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto h-[300px] p-4 bg-gray-100 rounded-lg", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, imagePreview && /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-4", __source: { fileName: "", lineNumber: 11, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imagePreview, alt: "Uploaded content for chat", className: "w-24 h-24 object-cover rounded-lg", __source: { fileName: "", lineNumber: 12, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("form", { className: "flex items-center", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { id: "file-upload", name: "photo", type: "file", className: "text-sm text-grey-500 file:mr-4 file:py-2 file:px-4 file:border-0 file:text-sm file:font-semibold file:bg-blue-500 file:text-white hover:file:bg-blue-600 rounded-lg cursor-pointer", accept: "image/*", onChange: (e)=>setImage(e.target.files[0]), style: { flex: '1' }, __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", className: "py-2 px-4 bg-blue-500 rounded-lg text-white font-semibold hover:bg-blue-600 focus:outline-none", onClick: ()=>setImage(null), __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Clear"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, ` body { font-family: 'Roboto', sans-serif; } `)); }