function MainComponent() { const [userMessage, setUserMessage] = React.useState(""); const [response, setResponse] = React.useState(""); const [loading, setLoading] = React.useState(false); const [vitaminUsage, setVitaminUsage] = React.useState({}); const handleSendMessage = async ()=>{ setLoading(true); const res = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: userMessage } ] }) }); const data = await res.json(); const assistantMessage = data.choices[0].message.content; setResponse(assistantMessage); setLoading(false); }; const vitamins = [ { name: "Vitamin A", optimalTime: "morning", id: "vitaminA" }, { name: "Vitamin B", optimalTime: "afternoon", id: "vitaminB" }, { name: "Vitamin C", optimalTime: "morning", id: "vitaminC" }, { name: "Vitamin D", optimalTime: "afternoon", id: "vitaminD" }, { name: "Vitamin E", optimalTime: "night", id: "vitaminE" } ]; const handleToggleVitamin = (id)=>{ setVitaminUsage((prev)=>({ ...prev, [id]: !prev[id] })); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex flex-col items-center justify-center bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg w-[500px] p-6", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Chat with GPT-4"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "userMessage", className: "w-full p-4 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500", rows: "4", placeholder: "Type your message...", value: userMessage, onChange: (e)=>setUserMessage(e.target.value), __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600", onClick: handleSendMessage, disabled: loading, __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, loading ? "Sending..." : "Send")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 border-t border-gray-200", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-700", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, response || "Assistant's response will appear here.")), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "Daily Vitamin Schedule"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, vitamins.map((vitamin)=>/*#__PURE__*/ React.createElement("div", { key: vitamin.id, className: "flex justify-between items-center border p-2 rounded-md", __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-md font-semibold", __source: { fileName: "", lineNumber: 70, columnNumber: 19 }, __self: this }, vitamin.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, "Optimal time: ", vitamin.optimalTime)), /*#__PURE__*/ React.createElement("button", { className: `py-2 px-4 rounded ${vitaminUsage[vitamin.id] ? "bg-green-500 text-white" : "bg-gray-200 text-black"}`, onClick: ()=>handleToggleVitamin(vitamin.id), __source: { fileName: "", lineNumber: 73, columnNumber: 17 }, __self: this }, vitaminUsage[vitamin.id] ? "Taken" : "Not Taken"))))))); }