function MainComponent() { const [isLoading, setIsLoading] = React.useState(false); const [message, setMessage] = React.useState("What's playing?"); const [response, setResponse] = React.useState(""); const [currentTrack, setCurrentTrack] = React.useState(0); const playlist = [ "Track 1 - Artist", "Track 2 - Artist", "Track 3 - Artist" ]; const fetchChatGPTResponse = ()=>{ setIsLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": `Play ${playlist[currentTrack]}` } ], system_prompt: `Explain the song ${playlist[currentTrack]}` }) }).then((response)=>response.json()).then((data)=>{ setIsLoading(false); if (data.choices && data.choices.length > 0) { setResponse(data.choices[0].message.content); } else { setResponse("No response from ChatGPT"); } }).catch(()=>{ setIsLoading(false); setResponse("Failed to get response from ChatGPT"); }); }; const nextTrack = ()=>{ setCurrentTrack((prevTrack)=>(prevTrack + 1) % playlist.length); }; const prevTrack = ()=>{ setCurrentTrack((prevTrack)=>(prevTrack - 1 + playlist.length) % playlist.length); }; React.useEffect(()=>{ fetchChatGPTResponse(); }, [ currentTrack ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#333333] p-8 rounded-lg shadow-lg flex flex-col items-center", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#FFFFFF] font-roboto text-4xl mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "Music Player"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between w-full mb-6", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-step-backward text-[#FFFFFF] text-3xl cursor-pointer", onClick: prevTrack, __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("i", { className: "fas fa-step-forward text-[#FFFFFF] text-3xl cursor-pointer", onClick: nextTrack, __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#575757] rounded-full h-1.5", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1DB954] h-1.5 rounded-full", style: { width: '50%' }, __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between w-full text-[#FFFFFF] font-roboto text-sm mt-2", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "0:00"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, "3:30")), /*#__PURE__*/ React.createElement("div", { className: "text-[#FFFFFF] mt-4", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, isLoading ? "Loading..." : response))); }