function MainComponent() { const [chatMessages, setChatMessages] = React.useState([]); const [filteredChatMessages, setFilteredChatMessages] = React.useState([]); const [searchTerm, setSearchTerm] = React.useState(''); const [isProcessing, setIsProcessing] = React.useState(false); const [uploadProgress, setUploadProgress] = React.useState(0); const [instrumentalReady, setInstrumentalReady] = React.useState(false); const [isAscending, setIsAscending] = React.useState(true); React.useEffect(()=>{ const filteredMessages = chatMessages.filter((msg)=>msg.toLowerCase().includes(searchTerm.toLowerCase())); setFilteredChatMessages(isAscending ? filteredMessages : filteredMessages.reverse()); }, [ chatMessages, searchTerm, isAscending ]); async function handleAudioUpload(event) { event.preventDefault(); setIsProcessing(true); const file = event.target.elements.instrumentalUpload.files[0]; if (!file) { setChatMessages((prevMessages)=>[ ...prevMessages, "AI: No file selected. Please select a file to upload." ]); setIsProcessing(false); return; } setUploadProgress(10); setInstrumentalReady(false); setChatMessages((prevMessages)=>[ ...prevMessages, "AI: Uploading and analyzing the instrumental track..." ]); const uploadIntervalId = setInterval(()=>{ setUploadProgress((oldProgress)=>{ if (oldProgress >= 100) { clearInterval(uploadIntervalId); return 100; } return oldProgress + 10; }); }, 300); setTimeout(()=>{ setChatMessages((prevMessages)=>[ ...prevMessages, "AI: Instrumental uploaded successfully. Conversation with ChatGPT integration is ready." ]); setIsProcessing(false); setUploadProgress(0); setInstrumentalReady(true); }, 3000); } async function handleChatMessageSend(event) { event.preventDefault(); const message = event.target.elements.chatMessage.value.trim(); if (!message) return; setChatMessages((prevMessages)=>[ ...prevMessages, `You: ${message}` ]); setIsProcessing(true); const messages = [ { "role": "user", "content": message } ]; const payload = { messages, system_prompt: 'Generate lyrics based on the uploaded instrumental' }; // Removed the fetch block for brevity setIsProcessing(false); event.target.reset(); } function handleSearchChange(event) { setSearchTerm(event.target.value); } function toggleSortOrder() { setIsAscending((prevState)=>!prevState); } const sortButton = /*#__PURE__*/ React.createElement("button", { onClick: toggleSortOrder, className: `block text-sm font-semibold py-2 px-4 rounded-md mb-4 ${isAscending ? 'bg-gray-200' : 'bg-blue-200 text-blue-800'}`, __source: { fileName: "", lineNumber: 91, columnNumber: 5 }, __self: this }, "Sort by: ", isAscending ? 'Newest' : 'Oldest'); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row w-full h-full p-4", __source: { fileName: "", lineNumber: 102, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-4 w-full md:w-1/4 mb-4 md:mb-0 overflow-auto", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold font-roboto text-lg text-[#121212] mb-4", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, "Conversations"), sortButton, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "searchMessages", className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, "Search Messages:"), /*#__PURE__*/ React.createElement("input", { id: "searchMessages", type: "text", name: "searchMessages", value: searchTerm, onChange: handleSearchChange, className: "block w-full border-2 border-gray-300 rounded-lg py-2 px-4", placeholder: "Search messages...", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this })), chatMessages.length === 0 ? /*#__PURE__*/ React.createElement("p", { className: "text-base font-roboto text-gray-500", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, "No previous conversations.") : filteredChatMessages.map((msg, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: "text-base font-roboto text-[#121212] my-1 break-words border-b border-gray-300 pb-1", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }, msg))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex flex-col items-center justify-center md:ml-8", __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-crimson-text text-[#121212] mb-10", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, "AI-Powered Lyric Generator"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleAudioUpload, className: "bg-white shadow-lg rounded-lg p-6 w-full max-w-[600px] mb-2 relative", __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-3", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "instrumentalUpload", className: "block text-sm font-medium text-gray-700 mb-1", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }, "Instrumental Track"), /*#__PURE__*/ React.createElement("input", { id: "instrumentalUpload", type: "file", name: "instrumentalUpload", disabled: isProcessing, className: "block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 ", required: true, __source: { fileName: "", lineNumber: 134, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 h-full bg-blue-200 rounded-lg", style: { width: `${uploadProgress}%`, transition: 'width 300ms' }, __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isProcessing, className: `w-full text-lg font-semibold py-2 rounded-md ${isProcessing ? "bg-gray-300" : "bg-blue-600 text-white"}`, __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this }, isProcessing ? 'Processing...' : 'Process Audio')), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-lg rounded-lg p-6 w-full max-w-[600px]", __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-200 rounded-lg p-4 mb-5 h-[350px] overflow-auto", __source: { fileName: "", lineNumber: 161, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col-reverse", __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, filteredChatMessages.length === 0 ? /*#__PURE__*/ React.createElement("p", { className: "text-base font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 164, columnNumber: 17 }, __self: this }, "No messages yet. Start the experience by uploading an instrumental.") : filteredChatMessages.map((msg, index)=>/*#__PURE__*/ React.createElement("p", { key: index, className: `text-base font-roboto text-[#121212] my-1 break-words ${msg.startsWith("AI:") ? "text-right" : ""}`, __source: { fileName: "", lineNumber: 167, columnNumber: 19 }, __self: this }, msg)))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleChatMessageSend, className: "flex", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "chatMessage", disabled: isProcessing || !instrumentalReady, className: "flex-grow border-2 border-gray-300 rounded-lg py-3 px-4 mr-2", placeholder: isProcessing ? "Please wait..." : "Type your message...", autoComplete: "off", required: true, __source: { fileName: "", lineNumber: 175, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isProcessing || !instrumentalReady, className: `rounded-lg px-6 py-3 ${isProcessing || !instrumentalReady ? 'bg-green-300' : 'bg-green-600 text-white'}`, __source: { fileName: "", lineNumber: 184, columnNumber: 13 }, __self: this }, isProcessing ? 'Sending...' : 'Send'))))); }