function MainComponent() { const [items, setItems] = React.useState([]); const [spaceAvailable, setSpaceAvailable] = React.useState(100); const [isLoading, setIsLoading] = React.useState(false); const [plan, setPlan] = React.useState(""); const [carBootDimensions, setCarBootDimensions] = React.useState({ length: 0, width: 0, height: 0 }); const handleBootPlanning = async ()=>{ setIsLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: items.map((item)=>({ role: "system", content: `Item: ${item.name}, Size: ${item.size}, Dimensions: ${item.dimensions.length}x${item.dimensions.width}x${item.dimensions.height}` })), system_prompt: 'Please generate an optimal packing plan for the following items in the car boot', max_tokens: 1000 }) }); const data = await response.json(); setIsLoading(false); if (data.status) { setPlan(data.result); } }; const handleCarBootDimensionsChange = (event)=>{ event.preventDefault(); const length = parseInt(event.target.elements.bootLength.value); const width = parseInt(event.target.elements.bootWidth.value); const height = parseInt(event.target.elements.bootHeight.value); setCarBootDimensions({ length, width, height }); }; const sortedItems = items.sort((a, b)=>b.size - a.size); return /*#__PURE__*/ React.createElement("div", { className: "p-4 max-w-screen-lg mx-auto", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold font-roboto", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "Intelligent Boot Space Planner"), /*#__PURE__*/ React.createElement("button", { onClick: handleBootPlanning, className: `px-4 py-2 bg-blue-500 text-white font-roboto ${isLoading ? 'opacity-50' : 'opacity-100'}`, disabled: isLoading, __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, isLoading ? 'Planning...' : 'Generate Plan'), plan && !isLoading && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 bg-gray-100 rounded", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Optimal Packing Plan"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto whitespace-pre-wrap", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, plan))), /*#__PURE__*/ React.createElement("div", { className: "border-t pt-4", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-2", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, sortedItems.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "flex justify-between items-center font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, item.name), /*#__PURE__*/ React.createElement("span", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, item.size, "%"), /*#__PURE__*/ React.createElement("span", { className: "text-xs", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "L: ", item.dimensions.length, " W: ", item.dimensions.width, " H: ", item.dimensions.height)))))); }