function MainComponent() { const [loading, setLoading] = React.useState(false); const [chatGptMessages, setChatGptMessages] = React.useState([]); const [googleSearchResults, setGoogleSearchResults] = React.useState([]); const [imageSearchResults, setImageSearchResults] = React.useState([]); const [query, setQuery] = React.useState(''); const handleSearchChange = (event)=>{ setQuery(event.target.value); }; const fetchData = async ()=>{ setLoading(true); setChatGptMessages([]); setGoogleSearchResults([]); setImageSearchResults([]); try { const chatGptPromise = fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { "role": "user", "content": query } ], system_prompt: query, max_tokens: 200 }), headers: { 'Content-Type': 'application/json' } }).then((response)=>response.json()); const googleSearchPromise = fetch(`/integrations/google-search/search?q=${encodeURIComponent(query)}`, { method: 'GET' }).then((response)=>response.json()); const imageSearchPromise = fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(query)}`, { method: 'GET' }).then((response)=>response.json()); const [chatGptResponse, googleSearchResponse, imageSearchResponse] = await Promise.all([ chatGptPromise, googleSearchPromise, imageSearchPromise ]); if (chatGptResponse.status) setChatGptMessages(chatGptResponse.result); if (googleSearchResponse.status === "success") setGoogleSearchResults(googleSearchResponse.items); if (imageSearchResponse.status === "success") setImageSearchResults(imageSearchResponse.items); } catch (error) { console.error("Error fetching data: ", error); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "form-input mt-2 block w-full px-3 py-2 text-sm leading-5 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5", type: "text", name: "search", placeholder: "Enter a query...", value: query, onChange: handleSearchChange, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 mt-4 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-blue-600 border border-transparent rounded-md hover:bg-blue-500 focus:outline-none focus:border-blue-700 focus:shadow-outline-blue active:bg-blue-700", onClick: fetchData, disabled: loading, __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, loading ? 'Searching...' : 'Search')), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, loading && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 72, columnNumber: 21 }, __self: this }, "Loading..."), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "ChatGPT Response:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, chatGptMessages)), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "Google Search Results:"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, googleSearchResults.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: item.link, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:text-blue-800", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, item.title))))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "Image Search Results:"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, imageSearchResults.map((image, index)=>/*#__PURE__*/ React.createElement("a", { href: image.contextLink, key: index, target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image.thumbnailImageUrl, alt: `Search result ${index + 1}`, width: 100, height: 100, className: "rounded", __source: { fileName: "", lineNumber: 94, columnNumber: 17 }, __self: this }))))))); }