Add AI capabilities on Search

package.json

@@ -59,7 +59,7 @@
     "@openzeppelin/contracts": "^4.9.6",
     "astro": "^5.7.12",
     "bignumber.js": "^9.3.0",
-    "chainlink-algolia-search": "^0.8.7",
+    "chainlink-algolia-search": "^0.11.0-alpha.13",
     "clipboard": "^2.0.11",
     "dotenv": "^16.5.0",
     "ethers": "^6.14.0",

src/components/Header/Header.astro

@@ -8,8 +8,19 @@ const { productsNav, subProductsNav } = getNavigationProps()
 const path = Astro.url.pathname
 const algoliaVars = {
   algoliaAppId: import.meta.env.PUBLIC_ALGOLIA_SEARCH_APP_ID || "",
-  algoliaPublicApiKey: import.meta.env.PUBLIC_ALGOLIA_SEARCH_PUBLIC_API_KEY || "",
+  algoliaPublicApiKey: import.meta.env.ALGOLIA_PUBLIC_SEARCH_PUBLIC_API_KEY || "",
 }
+
+const categoryOrder = ["Documentation"]
+
+const popularCards = [
+  {
+    url: "https://dev.chain.link/resources/quickstarts",
+    imgSrc: "/images/algolia/quick-start.png",
+    label: "Quickstarts",
+  },
+  { url: "https://dev.chain.link/tools", imgSrc: "/images/algolia/tools.png", label: "Tools" },
+]
 ---
 
 <!-- Google Tag Manager (noscript) -->
@@ -19,6 +30,14 @@ const algoliaVars = {
   width="0"
   style="display:none;visibility:hidden"></iframe>
 <!-- End Google Tag Manager (noscript) -->
-<NavBar path={path} productsNav={productsNav} subProductsNav={subProductsNav} algoliaVars={algoliaVars} client:idle />
+<NavBar
+  path={path}
+  productsNav={productsNav}
+  subProductsNav={subProductsNav}
+  algoliaVars={algoliaVars}
+  categoryOrder={categoryOrder}
+  popularCards={popularCards}
+  client:idle
+/>
 
 <NotificationBanner />

src/components/Header/Nav/NavBar.tsx

@@ -7,11 +7,15 @@ import { useScrollPosition } from "./useScrollPosition.tsx"
 import { ProductNavigation } from "./ProductNavigation/ProductNavigation.tsx"
 import { useHideHeader } from "./useHideHeader.tsx"
 import ProductChainTable from "../../QuickLinks/sections/ProductChainTable.tsx"
+import AlgoliaSearch from "../aiSearch/Search.tsx"
 
 export type SearchTrigger = React.ReactNode
 
 export type NavBarProps = {
-  searchTrigger?: SearchTrigger
+  showSearch: boolean
+  algoliaVars: { algoliaAppId: string; algoliaPublicApiKey: string }
+  categoryOrder: string[]
+  popularCards: Array<{ url: string; imgSrc: string; label: string }>
   path: string
   onHideChange?: (hidden: boolean) => void
   productsNav: ProductsNav
@@ -23,7 +27,9 @@ export const navBarHeight = 64
 
 export const NavBar = ({
   path,
-  searchTrigger,
+  algoliaVars,
+  categoryOrder,
+  popularCards,
   onHideChange,
   productsNav,
   subProductsNav,
@@ -76,7 +82,6 @@ export const NavBar = ({
             <div className={styles.menuSection}>
               <ProductNavigation
                 path={path}
-                searchTrigger={searchTrigger}
                 setNavMenuOpen={setIsMenuOpen}
                 productsNav={productsNav}
                 subProductsNav={subProductsNav}
@@ -86,7 +91,7 @@ export const NavBar = ({
               />
             </div>
             <div className={styles.rightSection} onMouseEnter={exitMegamenu}>
-              {searchTrigger && <div className={styles.searchTrigger}>{searchTrigger}</div>}
+              <AlgoliaSearch algoliaVars={algoliaVars} categoryOrder={categoryOrder} popularCards={popularCards} />
             </div>
           </div>
         </div>

src/components/Header/Nav/ProductNavigation/ProductNavigation.tsx

@@ -1,11 +1,9 @@
 import { SubProductsNav, ProductsNav } from "../config.tsx"
-import { SearchTrigger } from "../NavBar.tsx"
 import { ProductNavigation as Desktop } from "./Desktop/ProductNavigation.tsx"
 import { ProductNavigation as Mobile } from "./Mobile/ProductNavigation.tsx"
 
 type Props = {
   path: string
-  searchTrigger?: SearchTrigger
   setNavMenuOpen: (navMenuOpen: boolean) => void
   productsNav: ProductsNav
   subProductsNav?: SubProductsNav

src/components/Header/NavBar.tsx

@@ -1,6 +1,5 @@
 import React from "react"
 import { NavBar as Nav } from "./Nav/index.ts"
-import { Search } from "./aiSearch/Search.tsx"
 import { useNavBar } from "./useNavBar/useNavBar.ts"
 import styles from "./scroll.module.css"
 import { ProductsNav, SubProductsNav } from "./Nav/config.tsx"
@@ -11,12 +10,16 @@ export const NavBar = ({
   path,
   showSearch = true,
   algoliaVars,
+  categoryOrder,
+  popularCards,
 }: {
   productsNav: ProductsNav
   subProductsNav: SubProductsNav
   path: string
   showSearch?: boolean
   algoliaVars: { algoliaAppId: string; algoliaPublicApiKey: string }
+  categoryOrder: string[]
+  popularCards: Array<{ url: string; imgSrc: string; label: string }>
 }) => {
   const navRef = React.useRef(null)
 
@@ -60,7 +63,10 @@ export const NavBar = ({
         productsNav={productsNav}
         subProductsNav={subProductsNav}
         path={path}
-        searchTrigger={showSearch ? <Search algoliaVars={algoliaVars} /> : undefined}
+        showSearch={showSearch}
+        algoliaVars={algoliaVars}
+        categoryOrder={categoryOrder}
+        popularCards={popularCards}
         onHideChange={onHideChange}
         doubleNavbar={doubleNavbar()}
       />

src/components/Header/aiSearch/Search.tsx

@@ -1,23 +1,33 @@
-import { SearchButton } from "chainlink-algolia-search"
+// src/components/Header/aiSearch/SearchReact.tsx
+import React, { useEffect, useState, ComponentType } from "react"
+import { SearchButtonProps } from "chainlink-algolia-search"
 import "chainlink-algolia-search/dist/index.css"
 
-export const Search = ({
-  algoliaVars: { algoliaAppId, algoliaPublicApiKey },
-}: {
-  algoliaVars: { algoliaAppId: string; algoliaPublicApiKey: string }
-}) => {
+function AlgoliaSearch({ algoliaVars, categoryOrder, popularCards }) {
+  // Only render the component on the client side
+  const [isClient, setIsClient] = useState(false)
+  const [SearchButtonComponent, setSearchButtonComponent] = useState<ComponentType<SearchButtonProps> | null>(null)
+
+  useEffect(() => {
+    setIsClient(true)
+    import("chainlink-algolia-search").then((module) => {
+      setSearchButtonComponent(() => module.SearchButton)
+    })
+  }, [])
+
+  // Return null during server-side rendering
+  if (!isClient || !SearchButtonComponent) {
+    return <div></div>
+  }
+
   return (
-    <SearchButton
-      algoliaAppId={algoliaAppId}
-      algoliaPublicApiKey={algoliaPublicApiKey}
-      popularCards={[
-        {
-          url: "https://dev.chain.link/resources/quickstarts",
-          imgSrc: "/images/algolia/quick-start.png",
-          label: "Quickstarts",
-        },
-        { url: "https://dev.chain.link/tools", imgSrc: "/images/algolia/tools.png", label: "Tools" },
-      ]}
+    <SearchButtonComponent
+      algoliaAppId={algoliaVars.algoliaAppId}
+      algoliaPublicApiKey={algoliaVars.algoliaPublicApiKey}
+      categoryOrder={categoryOrder}
+      popularCards={popularCards}
     />
   )
 }
+
+export default AlgoliaSearch