function MainComponent() { const [activeTab, setActiveTab] = React.useState('Discover'); const [selectedItem, setSelectedItem] = React.useState(null); const [searchResults, setSearchResults] = React.useState([]); const [searchInput, setSearchInput] = React.useState(''); const [evaluationItems, setEvaluationItems] = React.useState([]); const isActiveTab = (tabName)=>tabName === activeTab; const handleTabClick = (tabName)=>()=>{ setActiveTab(tabName); setSelectedItem(null); }; const handleSearchChange = (event)=>{ setSearchInput(event.target.value); }; const handleSearchSubmit = async (event)=>{ event.preventDefault(); const messages = [ { role: 'user', content: searchInput } ]; try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages, system_prompt: 'Provide search results for ' + searchInput, max_tokens: 2000 }), headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); if (data.status && data.result) { setSearchResults(JSON.parse(data.result)); // Assuming the API returns JSON stringified search results } else { setSearchResults([]); } } catch (error) { setSearchResults([]); } }; const handleItemSelection = (index)=>()=>{ setSelectedItem(searchResults[index]); handleTabClick('Evaluation')(); setEvaluationItems([ ...evaluationItems, searchResults[index] ]); }; const handleEvaluationItemClick = (index)=>()=>{ setSelectedItem(evaluationItems[index]); }; const handleActivate = ()=>{ handleTabClick('Activate')(); }; const mainContent = ()=>{ switch(activeTab){ case 'Discover': return /*#__PURE__*/ React.createElement("section", { className: "p-4", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearchSubmit, __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search global knowledge...", className: "w-[70%] p-2 border-2 border-gray-300 rounded", value: searchInput, onChange: handleSearchChange, __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mt-2", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "category", __source: { fileName: "", lineNumber: 58, columnNumber: 22 }, __self: this }), " Technology"), /*#__PURE__*/ React.createElement("label", { __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "category", __source: { fileName: "", lineNumber: 59, columnNumber: 22 }, __self: this }), " Healthcare"), /*#__PURE__*/ React.createElement("label", { __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", name: "category", __source: { fileName: "", lineNumber: 60, columnNumber: 22 }, __self: this }), " Environment")), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4 mt-4", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, searchResults.map((result, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 border-2 border-gray-300 rounded shadow", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto font-bold", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }, result.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 19 }, __self: this }, result.summary), /*#__PURE__*/ React.createElement("button", { className: "mt-2 mr-2 py-1 px-3 bg-blue-500 hover:bg-blue-700 text-white rounded", __source: { fileName: "", lineNumber: 67, columnNumber: 19 }, __self: this }, "Read More"), /*#__PURE__*/ React.createElement("button", { className: "mt-2 py-1 px-3 bg-green-500 hover:bg-green-700 text-white rounded", onClick: handleItemSelection(index), __source: { fileName: "", lineNumber: 68, columnNumber: 19 }, __self: this }, "Add to Evaluation"))))); case 'Evaluation': return /*#__PURE__*/ React.createElement("div", { className: "flex p-4", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("aside", { className: "w-2/5 border-r-2 border-gray-300", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, evaluationItems.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, onClick: handleEvaluationItemClick(index), className: "py-2 hover:bg-gray-100 cursor-pointer font-roboto", __source: { fileName: "", lineNumber: 80, columnNumber: 19 }, __self: this }, item.title)))), /*#__PURE__*/ React.createElement("article", { className: "w-3/5 pl-4", __source: { fileName: "", lineNumber: 84, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto font-bold", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, selectedItem ? selectedItem.title : 'Detailed Analysis'), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, selectedItem ? selectedItem.content : 'Select an item for detailed analysis'), selectedItem && /*#__PURE__*/ React.createElement("button", { className: "mt-4 py-1 px-3 bg-yellow-500 hover:bg-yellow-600 text-white rounded", onClick: handleActivate, __source: { fileName: "", lineNumber: 87, columnNumber: 32 }, __self: this }, "Initiate Activation Process"))); case 'Activate': return /*#__PURE__*/ React.createElement("section", { className: "p-4", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }); default: return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen", __source: { fileName: "", lineNumber: 102, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex items-center justify-between px-4 bg-[#F5F5F5] h-[60px]", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/logo.png", alt: "Paperade AI Logo", className: "h-8", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex justify-center space-x-4", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: `py-2 ${isActiveTab('Discover') ? 'border-b-2 border-blue-500' : ''}`, onClick: handleTabClick('Discover'), __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "Discover"), /*#__PURE__*/ React.createElement("li", { className: `py-2 ${isActiveTab('Evaluation') ? 'border-b-2 border-blue-500' : ''}`, onClick: handleTabClick('Evaluation'), __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, "Evaluation"), /*#__PURE__*/ React.createElement("li", { className: `py-2 ${isActiveTab('Activate') ? 'border-b-2 border-blue-500' : ''}`, onClick: handleTabClick('Activate'), __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "Activate"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-user-circle text-[#1F2937] text-xl", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, mainContent()), /*#__PURE__*/ React.createElement("footer", { className: "px-4 py-2 bg-gray-200 flex justify-between", __source: { fileName: "", lineNumber: 117, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 118, columnNumber: 9 }, __self: this }, "© 2023 Paperade AI"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-sm text-blue-600 hover:text-blue-800 mr-4 font-roboto", __source: { fileName: "", lineNumber: 120, columnNumber: 11 }, __self: this }, "Privacy Policy"), /*#__PURE__*/ React.createElement("a", { href: "mailto:contact@paperade.ai", className: "text-sm text-blue-600 hover:text-blue-800 font-roboto", __source: { fileName: "", lineNumber: 121, columnNumber: 11 }, __self: this }, "Contact"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 124, columnNumber: 7 }, __self: this }, ` body { font-family: 'Roboto', sans-serif; } input[type='text'], button, li { transition: all 0.3s ease; } button:hover, li:hover { transform: scale(1.02); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } `)); }