Enable switching between keyword and vector search, UI changes

src/app/api/search/route.ts

@@ -0,0 +1,44 @@
+import { search, vectorSearch } from "@/lib/search";
+import { NextRequest, NextResponse } from "next/server";
+
+export const runtime = "edge";
+
+function customError(msg: string, code: number) {
+  return NextResponse.json({ message: msg }, { status: code });
+}
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  if (!searchParams.has("query") || !searchParams.has("mode")) {
+    return customError("Missing parameters", 400);
+  }
+
+  const query = searchParams.get("query");
+  const searchMode = searchParams.get("mode");
+
+  if (query === null || searchMode === null) {
+    return customError("Invalid parameters", 400);
+  } else if (query.length > 128) {
+    return customError("Search entry is too long", 400);
+  } else if (query.length === 0) {
+    return NextResponse.json({});
+  } else if (!["normal", "vector"].includes(searchMode)) {
+    return customError("Invalid mode", 400);
+  }
+
+  try {
+    const results =
+      searchMode === "normal" ? await search(query) : await vectorSearch(query);
+
+    // Reduce network payload size for users
+    const records = JSON.parse(JSON.stringify(results))["records"];
+    records.forEach((book: Record<string, any>) => {
+      delete book.embeddings;
+      delete book.xata;
+    });
+
+    return NextResponse.json({ records });
+  } catch (error) {
+    return customError("A strange error has ocurred", 500);
+  }
+}

src/app/page.module.css

@@ -10,15 +10,21 @@
 }
 
 .heading {
-  margin-top: 2rem;
+  margin-top: 1rem;
   text-align: center;
   color: #ffffff;
   font-size: 1.5em;
 }
 
 .searchBar {
-  margin-top: 1rem;
-  width: 50%;
+  margin-top: 0.5rem;
+  padding-right: 2rem;
+  padding-left: 2rem;
+  width: 100%;
+}
+
+.searchSwitch {
+  margin-top: 0.5rem;
 }
 
 .spinner {
@@ -46,4 +52,4 @@
 /* hide scrollbar for chrome, safari and opera */
 .searchResultsList::-webkit-scrollbar {
   display: none;
-}
+}

src/app/page.tsx

@@ -1,19 +1,21 @@
 "use client";
+import { useSearchParams } from "next/navigation";
 import { useState } from "react";
 
 import NetworkShader from "@/components/NetworkShader";
 import SearchBar from "@/components/SearchBar";
 import SearchResultList from "@/components/SearchResultList";
 import Spinner from "@/components/Spinner";
 
-import { Book } from "@/data/book-data";
+import { SearchSwitch, useVectorSearch } from "@/components/SearchSwitch";
 
+import { Book } from "@/data/book-data";
 import styles from "./page.module.css";
 
 export default function Home() {
   const [searchTerm, setSearchTerm] = useState("");
   const [searchResults, setSearchResults] = useState<Book[] | null>(null);
-
+  const searchParams = useSearchParams();
   // idle | loading | success | error
   const [status, setStatus] = useState("idle");
 
@@ -23,7 +25,15 @@ export default function Home() {
     setStatus("loading");
 
     try {
-      const response = await fetch("/api/search?query=" + searchTerm);
+      const params = new URLSearchParams(searchParams);
+      params.set("query", searchTerm);
+      if (useVectorSearch === true) {
+        params.set("mode", "vector");
+      } else {
+        params.set("mode", "normal");
+      }
+
+      const response = await fetch("/api/search?" + params);
       if (!response.ok) {
         throw new Error();
       }
@@ -55,6 +65,9 @@ export default function Home() {
             />
           </form>
         </div>
+        <div className={styles.searchSwitch}>
+          <SearchSwitch />
+        </div>
         {(status === "idle" || status === "loading") && (
           <div className={styles.spinner}>
             <Spinner

src/components/Card/Card.module.css

@@ -5,7 +5,7 @@
   width: 100%;
   height: fit-content;
   padding: 1rem;
-  border-top: 0.14rem solid rgba(195, 195, 195, 1);
+  border-top: 0.14rem solid rgba(195, 195, 195);
   gap: 1rem;
 }
 

src/components/SearchBar/SearchBar.module.css

@@ -23,6 +23,7 @@
 
 .searchBar input::placeholder {
   color: inherit;
+  opacity: 0.6;
 }
 
 .searchBar input:focus::placeholder {
@@ -33,5 +34,5 @@
 .line {
   width: 100%;
   height: 1rem;
-  margin-top: 16px;
+  margin-top: 0.5rem;
 }

src/components/SearchSwitch/SearchSwitch.module.css

@@ -0,0 +1,21 @@
+.searchSwitch {
+    font: inherit;
+    font-family: inherit;
+    color: white;
+    background-color: transparent;
+    border-width: 2px;
+    border-style: solid;
+    border-color: rgba(195, 195, 195, 0.5);
+    padding: 0.3rem;
+    border-radius: 0;
+    text-shadow: inherit;
+    transition: border-color 0.15s;
+}
+
+.searchSwitch:hover {
+    border-color: rgb(255, 255, 255);
+}
+
+.searchSwitch:active {
+    background-color: rgba(255, 255, 255, 0.5);
+}

src/components/SearchSwitch/SearchSwitch.tsx

@@ -0,0 +1,31 @@
+"use client";
+import { useState } from "react";
+import styles from "./SearchSwitch.module.css";
+
+export let useVectorSearch = false;
+
+export function SearchSwitch() {
+  const [searchMode, setSearchMode] = useState("Full-Text Search");
+
+  function handleClick() {
+    if (searchMode === "Full-Text Search") {
+      useVectorSearch = true;
+      setSearchMode("Vector Search");
+    } else {
+      useVectorSearch = false;
+      setSearchMode("Full-Text Search");
+    }
+  }
+
+  return (
+    <button
+      name="searchSwitch"
+      id="searchSwitch"
+      type="button"
+      onClick={handleClick}
+      className={styles.searchSwitch}
+    >
+      {searchMode}
+    </button>
+  );
+}

src/components/SearchSwitch/index.js

@@ -0,0 +1,2 @@
+export * from "./SearchSwitch";
+export { default } from "./SearchSwitch";