function MainComponent() { const [loading, setLoading] = React.useState(false); const [chatResponse, setChatResponse] = React.useState(""); const handleFormSubmit = async (event)=>{ event.preventDefault(); setLoading(true); const formData = new FormData(event.target); const formProps = Object.fromEntries(formData); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "system", content: "Buy or sell a car" }, { role: "user", content: `Model: ${formProps.model}, Year: ${formProps.year}, Price: ${formProps.price || formProps.maxPrice}, Mileage: ${formProps.mileage}, Description: ${formProps.description || ''}` } ], system_prompt: "Assist the user with buying or selling a car based on the details provided." }) }); const data = await response.json(); setLoading(false); if (data.choices && data.choices.length > 0) { setChatResponse(data.choices[0].message.content); } else { setChatResponse("No response from the service."); } } catch (error) { setLoading(false); setChatResponse("Failed to fetch the response. Please try again."); console.error("Failed to fetch the response:", error); } }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center justify-center min-h-screen bg-[#f0f0f5]", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full py-5 bg-[#007bff] text-white text-center text-3xl", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, "Car Marketplace"), /*#__PURE__*/ React.createElement("main", { className: "flex-grow container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, "Featured Cars"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "car-placeholder.png", alt: "Featured car", className: "mx-auto h-[200px] w-auto object-cover", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "mt-2", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, "Model Name"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "Year - Mileage"), /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, "$Price")))), /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Find Your Car"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, className: "flex flex-col sm:flex-row gap-4", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "model", type: "text", placeholder: "Model", className: "flex-1 p-2 border", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "year", type: "number", placeholder: "Year", className: "flex-1 p-2 border", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "maxPrice", type: "number", placeholder: "Max Price", className: "flex-1 p-2 border", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full sm:w-auto bg-[#007bff] text-white p-2", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, loading ? "Loading..." : "Search"))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Sell Your Car"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "model", type: "text", placeholder: "Model", className: "p-2 border", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "year", type: "number", placeholder: "Year", className: "p-2 border", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "mileage", type: "number", placeholder: "Mileage", className: "p-2 border", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { name: "price", type: "number", placeholder: "Price", className: "p-2 border", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "description", placeholder: "Description", className: "p-2 border", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#007bff] text-white p-2", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, loading ? "Submitting..." : "Submit"))), chatResponse && /*#__PURE__*/ React.createElement("section", { className: "mt-8", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, "ChatGPT Response"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, chatResponse))), /*#__PURE__*/ React.createElement("footer", { className: "w-full py-4 bg-[#007bff] text-white text-center", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, "© 2023 Car Marketplace")); }