function MainComponent() { const [searchQuery, setSearchQuery] = React.useState(''); const [loading, setLoading] = React.useState(false); const [images, setImages] = React.useState([]); const [chatMessages, setChatMessages] = React.useState([]); const today = new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }); React.useEffect(()=>{ if (searchQuery) { setLoading(true); fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(searchQuery)}`, { method: 'GET' }).then((response)=>response.json()).then((data)=>{ setLoading(false); setImages(data.items); }); } }, [ searchQuery ]); React.useEffect(()=>{ if (chatMessages.length > 0) { setLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: chatMessages, system_prompt: chatMessages.length > 0 && chatMessages[chatMessages.length - 1].role === 'user' ? chatMessages[chatMessages.length - 1].content : '' }), headers: { 'Content-Type': 'application/json' } }).then((response)=>response.json()).then((data)=>{ setLoading(false); if (!data.status) { throw new Error('Failed to get response from ChatGPT'); } setChatMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: data.result } ]); }).catch((error)=>{ setLoading(false); }); } }, [ chatMessages ]); const handleSearch = (e)=>{ e.preventDefault(); const searchInput = e.target.elements.search.value.trim(); setSearchQuery(searchInput); }; const getImageCards = images.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-full md:w-1/2 lg:w-1/3 px-4 mb-8", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: item.thumbnailImageUrl, alt: item.title, className: "w-full h-48 object-cover object-center", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-bold text-lg mb-2", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, item.title), /*#__PURE__*/ React.createElement("a", { href: item.contextLink, className: "text-indigo-600 hover:underline text-sm font-medium", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Learn more"))))); const menuOptions = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2 text-gray-800 focus:outline-none", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4 relative", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearch, __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "search", name: "search", placeholder: "What news today?", className: "w-full h-10 pl-10 pr-4 rounded-full bg-gray-100 focus:outline-none focus:bg-white", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "absolute inset-y-0 left-0 pl-3 flex items-center justify-center focus:outline-none", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search text-gray-600", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex items-center space-x-4", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-sm font-semibold text-gray-600 hover:text-black focus:outline-none", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "Log in"), /*#__PURE__*/ React.createElement("button", { className: "bg-black text-white text-sm font-semibold py-2 px-4 rounded-full hover:bg-gray-800 focus:outline-none", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "Subscribe now"))), /*#__PURE__*/ React.createElement("div", { className: "md:hidden bg-white p-4 shadow-md", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto justify-between", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-sm font-semibold text-gray-600 hover:text-black focus:outline-none", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, "Log in"), /*#__PURE__*/ React.createElement("button", { className: "bg-black text-white text-sm font-semibold py-2 px-4 rounded-full hover:bg-gray-800 focus:outline-none", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "Subscribe now"))))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-[#fafafa]", __source: { fileName: "", lineNumber: 103, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white p-4 shadow-md", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, menuOptions), /*#__PURE__*/ React.createElement("main", { className: "flex-grow", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "text-center py-12", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text text-6xl font-bold", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, today), /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold my-6", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, "Infomaz for International"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 items-stretch", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 114, columnNumber: 26 }, __self: this }, "Loading...") : getImageCards)))), /*#__PURE__*/ React.createElement("footer", { className: "bg-white p-4", __source: { fileName: "", lineNumber: 120, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto text-center", __source: { fileName: "", lineNumber: 121, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, "Terms & Conditions | Privacy policy"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, ` body { font-family: 'Crimson Text', serif; } `)); }