Added useDeferredValue

apps/web/.env.example

@@ -13,4 +13,6 @@ CODE_SUBMISSION_BACKOFF_MAX_RETRIES=5 # delay in ms
 GOOGLEAI_API_KEY=
 
 QDRANT_API_KEY=
-QDRANT_URL=
+QDRANT_URL=
+
+VECTOR_DIMENSION=768  # Upto 768 dimensions are supported

apps/web/components/ContentSearch.tsx

@@ -1,8 +1,18 @@
 "use client";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState, useDeferredValue } from "react";
 import Link from "next/link";
 import { Cross2Icon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
-import { Button, Dialog, DialogClose, DialogContent, Input, Card, CardDescription, CardHeader, CardTitle } from "@repo/ui";
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  Input,
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@repo/ui";
 import { getSearchResults } from "../lib/search";
 
 export function ContentSearch() {
@@ -11,22 +21,19 @@ export function ContentSearch() {
   const [searchTracks, setSearchTracks] = useState<any[]>([]);
   const [selectedIndex, setSelectedIndex] = useState(-1);
   const scrollableContainerRef = useRef<HTMLDivElement>(null);
+  const deferredInput = useDeferredValue(input);
 
-  const debouncedFetch = useCallback(
-    debounce(async (searchQuery: string) => {
-      if (searchQuery.length > 0) {
-          const data = await getSearchResults(searchQuery);
-          setSearchTracks(data);
+  useEffect(() => {
+    async function fetchSearchResults() {
+      if (deferredInput.length > 0) {
+        const data = await getSearchResults(deferredInput);
+        setSearchTracks(data);
       } else {
         setSearchTracks([]);
       }
-    }, 1000),
-    []
-  );
-
-  useEffect(() => {
-    debouncedFetch(input);
-  }, [input, debouncedFetch]);
+    }
+    fetchSearchResults();
+  }, [deferredInput]);
 
   useEffect(() => {
     const handleKeyPress = (event: KeyboardEvent) => {
@@ -108,10 +115,19 @@ export function ContentSearch() {
           {searchTracks.length > 0 &&
             searchTracks.map((track, index) => (
               <div key={track.payload.problemId} className={`p-2 ${index === selectedIndex ? "bg-blue-600/20" : ""}`}>
-                <Link className="flex" href={`/tracks/${track.payload.trackId}/${track.payload.problemId}`} target="_blank" passHref>
+                <Link
+                  className="flex"
+                  href={`/tracks/${track.payload.trackId}/${track.payload.problemId}`}
+                  target="_blank"
+                  passHref
+                >
                   <Card className="p-2 w-full mx-2">
                     <div className="flex my-2">
-                      <img alt={track.payload.problemTitle} src={track.payload.image} className="flex mx-2 w-1/6 rounded-xl" />
+                      <img
+                        alt={track.payload.problemTitle}
+                        src={track.payload.image}
+                        className="flex mx-2 w-1/6 rounded-xl"
+                      />
                       <div>
                         <CardHeader>
                           <CardTitle>{track.payload.problemTitle}</CardTitle>
@@ -127,12 +143,4 @@ export function ContentSearch() {
       </DialogContent>
     </Dialog>
   );
-}
-
-function debounce<T extends (...args: any[]) => any>(func: T, delay: number): (...args: Parameters<T>) => void {
-  let timeoutId: ReturnType<typeof setTimeout>;
-  return function (this: any, ...args: Parameters<T>) {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => func.apply(this, args), delay);
-  };
-}
+}

apps/web/components/TrackPreview.tsx

@@ -30,7 +30,7 @@ export function TrackPreview({ showPreview, setShowPreview, track }: TrackPrevie
           <p className="mt-5 font-bold px-5 text-xl">Contents</p>
           <div className="max-h-[40vh] overflow-y-auto">
             {track.problems.map((topic: any, idx: number) => (
-                <Link href={`/tracks/${track.id}/${track.problems[idx]?.id}`}>
+                <Link key={topic.id} href={`/tracks/${track.id}/${track.problems[idx]?.id}`}>
               <div className="hover:cursor-pointer my-2 rounded-md dark:hover:bg-slate-700 hover:bg-slate-200 px-5 py-1 transition-all duration-450 scroll-smooth">
                 {topic.title}
               </div>

apps/web/lib/search.ts

@@ -13,6 +13,7 @@ const client = new QdrantClient({
 const genAI = new GoogleGenerativeAI(process.env.GOOGLEAI_API_KEY!);
 const model = genAI.getGenerativeModel({ model: "embedding-001"});
 
+const VECTOR_SIZE = parseInt(process.env.VECTOR_SIZE!) || 768;
 
 export async function scrapeData({ trackId }: { trackId: string }) {
   const notion = new NotionAPI();
@@ -48,15 +49,15 @@ export async function scrapeData({ trackId }: { trackId: string }) {
 
 export async function createCollection(){
   await client.createCollection("DailyCode",{
-    vectors:{ size: 150 , distance: "Dot" },
+    vectors:{ size: VECTOR_SIZE , distance: "Dot" },
   });
 }
 
 export async function insertData(trackId: string) {
   const data = await scrapeData({ trackId });
   data.forEach(async (problem) => {
     const response = await model.embedContent(problem.titles);
-    problem.vector = response.embedding.values.slice(0, 150);
+    problem.vector = response.embedding.values.slice(0, VECTOR_SIZE);
     await client.upsert("DailyCode", {
       wait: true,
       points: [
@@ -87,7 +88,7 @@ export async function insertData(trackId: string) {
 export async function getSearchResults(query: string) {
   const vector = await model.embedContent(query);
   const response = await client.search("DailyCode", {
-    vector: vector.embedding.values.slice(0, 150),
+    vector: vector.embedding.values.slice(0, VECTOR_SIZE),
     limit: 5,
   });
   return response;