function MainComponent() { const [loading, setLoading] = React.useState(false); const [savedContent, setSavedContent] = React.useState([]); const [formInput, setFormInput] = React.useState({ url: '', description: '' }); const handleChange = (e)=>{ const { name, value } = e.target; setFormInput({ ...formInput, [name]: value }); }; const handleSubmit = async (e)=>{ e.preventDefault(); setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `Save the content from this URL: ${formInput.url}` }, { role: 'user', content: `Description: ${formInput.description}` } ] }) }); const data = await response.json(); const assistantResponse = data.choices[0]?.message?.content || 'Error: No response from API'; setSavedContent([ ...savedContent, { url: formInput.url, description: formInput.description, response: assistantResponse, timestamp: new Date().toLocaleString() } ]); setLoading(false); setFormInput({ url: '', description: '' }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 bg-[#f0f0f0] h-screen font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full bg-[#010101] text-white p-4 font-bold text-center", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, "Social Media Saver"), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col md:flex-row w-full mt-4", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full md:w-1/3 p-4 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Save Content"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "p-2 border border-gray-300 rounded", type: "text", name: "url", placeholder: "Paste a social media URL", value: formInput.url, onChange: handleChange, __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { className: "p-2 border border-gray-300 rounded", name: "description", placeholder: "Add a description", rows: 4, value: formInput.description, onChange: handleChange, __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-[#010101] text-white rounded", disabled: loading, __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, loading ? 'Saving...' : 'Save'))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full md:w-2/3 p-4", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Saved Content"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, savedContent.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col bg-white p-4 shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 82, columnNumber: 19 }, __self: this }, "Content from ", item.url), /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 text-sm", __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this }, item.timestamp)), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 85, columnNumber: 17 }, __self: this }, item.description), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, item.response))))))); }