function MainComponent() { const [loading, setLoading] = React.useState(false); const [chatGptResult, setChatGptResult] = React.useState(null); const handleSaveContact = async ()=>{ setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { "role": "user", "content": "Save as contact" } ], system_prompt: 'Please initiate the process to save this contact.' }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); if (data.status) { setChatGptResult(data.result); } setLoading(false); }; const loadingIndicator = loading ? /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 z-50 flex justify-center items-center", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-32 w-32 border-t-2 border-t-[#007bff]", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this })) : null; const chatGptMessage = chatGptResult && /*#__PURE__*/ React.createElement("div", { className: "text-white font-roboto bg-black bg-opacity-50 p-4 mt-4 rounded-md text-center", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, chatGptResult); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] min-h-screen flex flex-col justify-center items-center p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#232323] shadow-xl rounded-lg w-full max-w-[400px] overflow-hidden", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "p-6 flex flex-col items-center justify-center border-b border-gray-700", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./profile-picture.jpg", alt: "Profile picture of Alex Johnson", className: "w-32 h-32 rounded-full", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "mt-4 text-2xl font-bold text-white font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Alex Johnson"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 font-roboto", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Frontend Developer")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap items-center justify-center text-white p-6", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { className: "p-4 flex items-center hover:text-[#007bff] transition", href: "mailto:alex.johnson@example.com", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-envelope text-[#007bff] text-xl", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "alex.johnson@example.com")), /*#__PURE__*/ React.createElement("a", { className: "p-4 flex items-center hover:text-[#28a745] transition", href: "tel:+12345678900", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-phone text-[#28a745] text-xl", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "+1 234 567 8900")), /*#__PURE__*/ React.createElement("a", { className: "p-4 flex items-center hover:text-[#ffc107] transition", href: "http://www.alex-portfolio.com", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-globe text-[#ffc107] text-xl", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 font-roboto", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "www.alex-portfolio.com")), /*#__PURE__*/ React.createElement("a", { className: "p-4 flex items-center hover:text-[#0e76a8] transition", href: "https://linkedin.com/in/alexjohnson", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-linkedin text-[#0e76a8] text-xl", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 font-roboto", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "linkedin.com/in/alexjohnson")), /*#__PURE__*/ React.createElement("a", { className: "p-4 flex items-center hover:text-[#6e5494] transition", href: "https://github.com/alexjohnson", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-github text-[#6e5494] text-xl", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2 font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "github.com/alexjohnson"))), /*#__PURE__*/ React.createElement("div", { className: "px-6 pb-6", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleSaveContact, className: "w-full py-3 rounded bg-[#007bff] text-white font-roboto hover:bg-[#0056b3] transition duration-200 ease-in-out disabled:opacity-50", disabled: loading, __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Save as Contact")), loadingIndicator, chatGptMessage)); }