function MainComponent() { const [customerName, setCustomerName] = React.useState(''); const [emailAddress, setEmailAddress] = React.useState(''); const [phoneNumber, setPhoneNumber] = React.useState(''); const [loading, setLoading] = React.useState(false); const [saved, setSaved] = React.useState(false); const handleSaveCustomer = async ()=>{ setLoading(true); setSaved(false); await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "system", "content": `Save customer ${customerName} with email ${emailAddress} and phone number ${phoneNumber}` } ], system_prompt: 'Perform the action' }) }); // Simulate saving setTimeout(()=>{ setLoading(false); setSaved(true); setTimeout(()=>setSaved(false), 5000); }, 1000); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] p-4", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-md overflow-hidden", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-5 sm:p-6", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-gray-800 mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Customer Management"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "customerName", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "Customer Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "customerName", id: "customerName", className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", value: customerName, onChange: (e)=>setCustomerName(e.target.value), __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "emailAddress", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, "Email Address"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "emailAddress", id: "emailAddress", className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", value: emailAddress, onChange: (e)=>setEmailAddress(e.target.value), __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "phoneNumber", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "Phone Number"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "phoneNumber", id: "phoneNumber", className: "mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm", value: phoneNumber, onChange: (e)=>setPhoneNumber(e.target.value), __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleSaveCustomer, type: "button", className: `inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white ${loading ? 'bg-gray-400' : 'bg-indigo-600 hover:bg-indigo-700'} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`, disabled: loading, __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, loading ? 'Saving...' : 'Save Customer')), saved && /*#__PURE__*/ React.createElement("div", { className: "text-green-500 mt-2", __source: { fileName: "", lineNumber: 54, columnNumber: 23 }, __self: this }, "Customer saved successfully!"))))); }