Update search provider

package.json

@@ -29,7 +29,6 @@
   },
   "dependencies": {
     "@11ty/eleventy-fetch": "^4.0.0",
-    "@algoveraai/search": "^0.0.82",
     "@astro-community/astro-embed-youtube": "^0.4.1",
     "@astrojs/mdx": "^1.1.3",
     "@astrojs/partytown": "^2.0.2",
@@ -58,7 +57,6 @@
     "lodash": "^4.17.21",
     "nanostores": "^0.9.4",
     "preact": "^10.18.1",
-    "react-hotkeys": "^2.0.0",
     "react-instantsearch-hooks-web": "^6.47.3",
     "rehype-autolink-headings": "^7.0.0",
     "rehype-slug": "^6.0.0",

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

@@ -1,6 +1,6 @@
 import styles from "./bottomBar.module.css"
 import { ResourcesIcon } from "./ResourcesIcon"
-import { Search } from "../../../AlgoSearch/Search"
+import { Search } from "../../../aiSearch/Search"
 
 const ResourcesButton = () => (
   <a rel="noreferrer" target="_blank" className="nav-cta" href="https://github.com/smartcontractkit/documentation">

src/components/Header/NavBar.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { NavBar as Nav } from "./Nav"
-import { Search } from "./AlgoSearch/Search"
+import { Search } from "./aiSearch/Search"
 import { getNavigationProps } from "./getNavigationProps"
 import { useNavBar } from "./useNavBar/useNavBar"
 import styles from "./scroll.module.css"

src/components/Header/aiSearch/Search.tsx

@@ -0,0 +1,11 @@
+import { SearchButton } from "./SearchButton"
+import { SearchModal } from "./SearchModal"
+
+export const Search = ({ variant = "default" }: { variant?: "default" | "bottomBar" }) => {
+  return (
+    <>
+      <SearchButton variant={variant} />
+      <SearchModal />
+    </>
+  )
+}

src/components/Header/AlgoSearch/SearchButton.tsx → src/components/Header/aiSearch/SearchButton.tsx

@@ -1,3 +1,4 @@
+import { clsx } from "~/lib"
 import styles from "./searchButton.module.css"
 
 const searchIcon = (
@@ -23,15 +24,9 @@ const searchIcon = (
   </svg>
 )
 
-export const SearchButton = ({
-  onClickHandler,
-  variant,
-}: {
-  onClickHandler: () => void
-  variant: "default" | "bottomBar"
-}) => {
+export const SearchButton = ({ variant }: { variant: "default" | "bottomBar" }) => {
   return variant === "default" ? (
-    <button className={styles.default} onClick={onClickHandler}>
+    <button className={clsx(styles.default, "search-widget-trigger")}>
       <svg
         className={styles.icon}
         xmlns="http://www.w3.org/2000/svg"
@@ -56,7 +51,7 @@ export const SearchButton = ({
       <div className={styles.shortcut}>⌘K</div>
     </button>
   ) : (
-    <button className={styles.bottomBar} onClick={onClickHandler}>
+    <button className={clsx(styles.bottomBar, "search-widget-trigger")}>
       {searchIcon}
       <span
         style={{

src/components/Header/aiSearch/SearchModal.tsx

@@ -0,0 +1,75 @@
+import React from "react"
+import styles from "./searchModal.module.css"
+
+export const SearchModal = () => {
+  const scriptContainerRef = React.useRef<HTMLDivElement>(null)
+
+  React.useEffect(() => {
+    const script = document.createElement("script")
+    script.src = "https://widget.kapa.ai/kapa-widget.bundle.js"
+    script.async = true
+
+    script.setAttribute("data-button-bg-color", "rgba(55, 91, 210, 0.2)")
+    script.setAttribute("data-button-hide", "true")
+    script.setAttribute("data-button-text-color", "rgba(55, 91, 210)")
+    script.setAttribute("data-button-text-shadow", "0")
+    script.setAttribute("data-font-family", "Circular,Tahoma,sans-serif")
+    script.setAttribute("data-kapa-branding-hide", "true")
+    script.setAttribute("data-modal-ask-ai-input-placeholder", "Search across Chainlink resources")
+    // script.setAttribute("data-modal-disclaimer", "Subject to Chainlink's [terms of use](https://chain.link/search-terms).");
+    script.setAttribute(
+      "data-modal-footer",
+      "Subject to Chainlink's [terms of use](https://chain.link/search-terms). Protected by reCAPTCHA."
+    )
+    script.setAttribute("data-modal-header-bg-color", "rgb(255, 255, 255)")
+    script.setAttribute("data-modal-header-border-bottom", "2px solid rgba(55, 91, 210, 0.2)")
+    script.setAttribute("data-modal-header-logo-hide-on-mobile", "true")
+    script.setAttribute("data-modal-image-height", "auto")
+    script.setAttribute("data-modal-image-width", "auto")
+    script.setAttribute("data-modal-open-by-default", "false")
+    script.setAttribute("data-modal-override-open-class", "search-widget-trigger")
+    script.setAttribute("data-modal-search-input-placeholder", "Search across Chainlink resources")
+    script.setAttribute("data-modal-title-color", "#375bd2")
+    script.setAttribute("data-modal-title-font-weight", "500")
+    script.setAttribute("data-modal-title", " ")
+    script.setAttribute("data-modal-x-offset", "0rem")
+    script.setAttribute("data-project-color", "#375bd2")
+    script.setAttribute(
+      "data-project-logo",
+      "https://assets-global.website-files.com/5f6b7190899f41fb70882d08/5f760a499b56c47b8fa74fbb_chainlink-logo.svg"
+    )
+    script.setAttribute("data-project-name", "Chainlink")
+    script.setAttribute(
+      "data-search-include-source-names",
+      '["Documentation", "Developer Blogs", "GitHub Issues", "GitHub Pull Requests (Open)", "StackOverflow"]'
+    )
+    script.setAttribute("data-search-input-show-icon", "false")
+    script.setAttribute("data-search-mode-default", "true")
+    script.setAttribute("data-search-mode-enabled", "true")
+    script.setAttribute("data-modal-open-on-command-k", "true")
+    script.setAttribute("data-search-result-badge-bg-color", "#DFE7FB")
+    script.setAttribute("data-search-result-badge-text-color", "#1A2B6B")
+    script.setAttribute("data-search-result-hover-bg-color", "#F6F7FD")
+    script.setAttribute("data-search-result-secondary-text-color", "#1A2B6B")
+    script.setAttribute("data-switch-bg-color", "#fcfcfd")
+    script.setAttribute("data-switch-border-radius", "2rem")
+    script.setAttribute("data-switch-border", "1px solid #ecedef")
+    script.setAttribute("data-switch-color", "#375bd2")
+    script.setAttribute("data-switch-label-font-padding-x", "1.5rem")
+    script.setAttribute("data-switch-label-font-padding-y", "0.5rem")
+    script.setAttribute("data-switch-label-font-size", "12px")
+    script.setAttribute("data-switch-label-font-weight", "600")
+    script.setAttribute("data-switch-show-icons", "true")
+    script.setAttribute("data-website-id", "f272f2db-b88b-4c32-bdca-aa7227414035")
+
+    scriptContainerRef.current !== null && scriptContainerRef.current.appendChild(script)
+
+    return () => {
+      if (scriptContainerRef.current) {
+        scriptContainerRef.current.removeChild(script)
+      }
+    }
+  }, [])
+
+  return <div ref={scriptContainerRef} className={styles.searchWrapper} />
+}

src/components/Header/AlgoSearch/searchModal.module.css → src/components/Header/aiSearch/searchModal.module.css

@@ -1,21 +1,3 @@
-.modal {
-  display: flex;
-  position: fixed;
-  align-items: center;
-  justify-content: center;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  height: 100dvh;
-  z-index: 100;
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-.hideOverflow {
-  overflow: hidden;
-}
-
 /* Overrides the top-level of the import (modal) */
 .searchWrapper > * {
   z-index: unset !important;