Add code required for AI to load (#2647)

Pump Packages
Fix env name miss-match

Fix Env variable miss-match

Update AI search

Co-authored-by: gfletcher-cll <grace.fletcher@smartcontract.com>

Author: Zelig880

.github/dependabot.yml

@@ -18,8 +18,8 @@ updates:
         versions: ["*"]
       - dependency-name: "@chainlink/local"
         versions: ["*"]
-      - dependency-name: "chainlink-algolia-search"
-        versions: ["*"]
+      - dependency-name: "@chainlink/cl-search-frontend"
+        update-types: ["version-update:semver-patch"]
       # For all deps
       - dependency-name: "*"
         # ignore all major updates

package-lock.json

@@ -49,6 +49,7 @@
     "@astrojs/react": "^4.3.0",
     "@astrojs/sitemap": "^3.4.1",
     "@astrojs/vercel": "^8.1.5",
+    "@chainlink/cl-search-frontend": "^0.11.1",
     "@chainlink/components": "^0.4.18",
     "@chainlink/contracts": "1.4.0",
     "@chainlink/contracts-ccip": "1.6.0",
@@ -62,7 +63,6 @@
     "@openzeppelin/contracts": "^4.9.6",
     "astro": "^5.9.3",
     "bignumber.js": "^9.3.0",
-    "chainlink-algolia-search": "^0.10.1",
     "clipboard": "^2.0.11",
     "dotenv": "^16.5.0",
     "ethers": "^6.14.3",

package.json

@@ -7,11 +7,13 @@ 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 }
   path: string
   onHideChange?: (hidden: boolean) => void
   productsNav: ProductsNav
@@ -21,14 +23,7 @@ export type NavBarProps = {
 
 export const navBarHeight = 64
 
-export const NavBar = ({
-  path,
-  searchTrigger,
-  onHideChange,
-  productsNav,
-  subProductsNav,
-  doubleNavbar,
-}: NavBarProps) => {
+export const NavBar = ({ path, algoliaVars, onHideChange, productsNav, subProductsNav, doubleNavbar }: NavBarProps) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false)
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [isMegaMenuOpen, setShowMegaMenu] = useState(false)
@@ -76,7 +71,6 @@ export const NavBar = ({
             <div className={styles.menuSection}>
               <ProductNavigation
                 path={path}
-                searchTrigger={searchTrigger}
                 setNavMenuOpen={setIsMenuOpen}
                 productsNav={productsNav}
                 subProductsNav={subProductsNav}
@@ -86,7 +80,7 @@ export const NavBar = ({
               />
             </div>
             <div className={styles.rightSection} onMouseEnter={exitMegamenu}>
-              {searchTrigger && <div className={styles.searchTrigger}>{searchTrigger}</div>}
+              <AlgoliaSearch algoliaVars={algoliaVars} />
             </div>
           </div>
         </div>

src/components/Header/Nav/NavBar.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/Nav/ProductNavigation/ProductNavigation.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"
@@ -60,7 +59,8 @@ export const NavBar = ({
         productsNav={productsNav}
         subProductsNav={subProductsNav}
         path={path}
-        searchTrigger={showSearch ? <Search algoliaVars={algoliaVars} /> : undefined}
+        showSearch={showSearch}
+        algoliaVars={algoliaVars}
         onHideChange={onHideChange}
         doubleNavbar={doubleNavbar()}
       />