function MainComponent() { const [searchResults, setSearchResults] = React.useState([]); const [query, setQuery] = React.useState('coding course for beginners'); const [loading, setLoading] = React.useState(false); const [conversation, setConversation] = React.useState([]); const [systemPrompt, setSystemPrompt] = React.useState('I am looking for a coding course for beginners.'); const handleSearch = async ()=>{ setLoading(true); try { const response = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(query)}`, { method: 'GET' }); const data = await response.json(); setSearchResults(data.items); } catch (error) { console.error("Fetching search results failed", error); } finally{ setLoading(false); } }; const handleChatGPT = async ()=>{ setLoading(true); try { const body = { messages: conversation, system_prompt: systemPrompt, max_tokens: 2000 }; const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }); const data = await response.json(); setConversation([ ...conversation, { role: 'assistant', content: data.result } ]); } catch (error) { console.error("Fetching conversation failed", error); } finally{ setLoading(false); } }; const updateQuery = (event)=>{ setQuery(event.target.value); }; React.useEffect(()=>{ handleSearch(); }, []); React.useEffect(()=>{ handleChatGPT(); }, [ systemPrompt ]); const chatTranscript = conversation.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `rounded-lg p-4 ${message.role === 'user' ? 'bg-blue-100' : 'bg-green-200'} font-poppins`, __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, message.content)); const handleSearchKeyDown = (event)=>{ if (event.key === 'Enter') { handleSearch(); } }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-6 font-poppins", __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl text-center mb-12 text-[#5B21B6]", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, "Learn Coding for Beginners"), /*#__PURE__*/ React.createElement("div", { className: "max-w-[900px] mx-auto mb-10", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "searchQuery", value: query, onChange: updateQuery, onKeyDown: handleSearchKeyDown, className: "w-full p-4 mb-4 border-2 border-[#5B21B6] rounded-lg shadow-lg text-lg placeholder-[#5B21B6]", placeholder: "Search for coding courses...", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, className: "px-8 py-3 w-full bg-[#5B21B6] text-white rounded-lg font-semibold text-lg hover:bg-[#4C1D95] transition-colors duration-300", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "Search Courses")), loading ? /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center space-x-2", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full", role: "status", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "visually-hidden", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "Loading..."))) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, searchResults.length > 0 ? searchResults.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-6 border-2 border-[#DDD6FE] rounded-xl shadow-xl transition-transform hover:-translate-y-1", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", className: "block text-xl mb-2 text-[#6D28D9] hover:text-[#5B21B6]", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("p", { className: "text-md text-[#3730A3]", __source: { fileName: "", lineNumber: 99, columnNumber: 15 }, __self: this }, item.snippet))) : /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 101, columnNumber: 16 }, __self: this }, "No courses found. Try adjusting your search.")), /*#__PURE__*/ React.createElement("div", { className: "mt-12", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl mb-6 text-[#5B21B6]", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, "Talk to Our Assistant"), /*#__PURE__*/ React.createElement("div", { className: "h-[400px] overflow-y-auto p-6 mb-6 border-2 border-[#DDD6FE] rounded-lg shadow-xl", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, chatTranscript), /*#__PURE__*/ React.createElement("button", { onClick: handleChatGPT, className: "px-8 py-3 w-full bg-green-600 text-white rounded-lg font-semibold text-lg hover:bg-green-700 transition-colors duration-300", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, "Get Help"))); }