function MainComponent() { React.useEffect(()=>{ fetch('/integrations/groq/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: 'hello, how are you?' } ] }) }).then((response)=>response.json()).then((data)=>{ const groqContent = data.choices[0].message.content; document.getElementById('groq-response').innerText = groqContent; }); fetch('/integrations/image-search/imagesearch?q=World+Cup', { method: 'GET' }).then((response)=>response.json()).then((data)=>{ const imageSearch = data.items[0]; document.getElementById('image-search-thumbnail').src = imageSearch.thumbnailImageUrl; document.getElementById('image-search-title').innerText = imageSearch.title; document.getElementById('image-search-link').href = imageSearch.contextLink; }); fetch('/integrations/google-search/search?q=hello+world', { method: 'GET' }).then((response)=>response.json()).then((data)=>{ const googleSearchFirst = data.items[0]; const googleSearchSecond = data.items[1]; document.getElementById('google-search-first-title').innerText = googleSearchFirst.title; document.getElementById('google-search-first-link').href = googleSearchFirst.link; document.getElementById('google-search-first-snippet').innerText = googleSearchFirst.snippet; document.getElementById('google-search-second-title').innerText = googleSearchSecond.title; document.getElementById('google-search-second-link').href = googleSearchSecond.link; }); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-5 font-roboto text-center space-y-6", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-2xl mb-5", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, "Integration Demos"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px]", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-semibold text-xl mb-2", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, "GROQ Integration"), /*#__PURE__*/ React.createElement("div", { className: "border p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "User: Hello, how are you?"), /*#__PURE__*/ React.createElement("p", { id: "groq-response", className: "italic", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Loading..."))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px]", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-semibold text-xl mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Image Search Integration"), /*#__PURE__*/ React.createElement("div", { className: "border p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { id: "image-search-thumbnail", src: "", alt: "World Cup trophy", className: "w-full mb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { id: "image-search-title", className: "font-semibold", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Loading..."), /*#__PURE__*/ React.createElement("a", { id: "image-search-link", href: "#", className: "text-blue-600", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Learn more"))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px]", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-semibold text-xl mb-2", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "Google Search Integration"), /*#__PURE__*/ React.createElement("div", { className: "border p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { id: "google-search-first-title", className: "font-semibold", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Loading..."), /*#__PURE__*/ React.createElement("a", { id: "google-search-first-link", href: "#", className: "text-blue-600", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, "Loading..."), /*#__PURE__*/ React.createElement("p", { id: "google-search-first-snippet", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Loading...")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { id: "google-search-second-title", className: "font-semibold", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Loading..."), /*#__PURE__*/ React.createElement("a", { id: "google-search-second-link", href: "#", className: "text-blue-600", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, "Loading..."))))); }