function MainComponent() { const [roomId, setRoomId] = React.useState(''); const [message, setMessage] = React.useState(''); const [email, setEmail] = React.useState(''); const sendMessage = async ()=>{ if (!roomId || !message || !email) { alert('Please provide a room ID, an email to mention, and a message.'); return; } const chatApiUrl = `https://chat.googleapis.com/v1/spaces/${roomId}/messages`; const formattedMessage = ` ${message}`; try { const response = await fetch(chatApiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json; charset=UTF-8', 'Authorization': 'Bearer ACCESS_TOKEN' }, body: JSON.stringify({ 'text': formattedMessage }) }); if (!response.ok) throw new Error('Failed to send message'); alert('Message sent successfully'); setMessage(''); } catch (error) { console.error('Error:', error); alert('Failed to send message. Check the console for more information.'); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center h-screen bg-[#f1f5f9]", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", onSubmit: (e)=>e.preventDefault(), __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "roomId", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Room ID"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "roomId", type: "text", placeholder: "Room ID", name: "roomId", value: roomId, onChange: (e)=>setRoomId(e.target.value), __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "email", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Email to Mention"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "email", type: "email", placeholder: "example@example.com", name: "email", value: email, onChange: (e)=>setEmail(e.target.value), __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "message", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Message"), /*#__PURE__*/ React.createElement("textarea", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline", id: "message", placeholder: "Enter your message here...", name: "message", value: message, onChange: (e)=>setMessage(e.target.value), __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: sendMessage, __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Send Message")))); }