feat(search): implement super search with hybrid BM25+vector search

Author: ponbac

Cargo.lock

@@ -16,6 +16,7 @@ import {
   FolderGit2,
   GitPullRequestIcon,
   TimerIcon,
+  BriefcaseIcon,
 } from "lucide-react";
 import { ListPullRequest } from "@/lib/api/queries/pullRequests";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
@@ -35,9 +36,13 @@ import {
   rememberLastProjectAtom,
   buildRememberedTimerParams,
 } from "@/lib/milltime-preferences";
+import { SearchResult } from "@/lib/api/queries/search";
+import { useDebounce } from "@/hooks/useDebounce";
 
 export function CmdK() {
   const [open, setOpen] = React.useState(false);
+  const [searchInput, setSearchInput] = React.useState("");
+  const debouncedSearchInput = useDebounce(searchInput, 300);
 
   const close = () => setOpen(false);
 
@@ -53,13 +58,27 @@ export function CmdK() {
     return () => document.removeEventListener("keydown", down);
   }, []);
 
+  React.useEffect(() => {
+    if (!open) {
+      setSearchInput("");
+    }
+  }, [open]);
+
   return (
     <CommandDialog open={open} onOpenChange={setOpen}>
-      <CommandInput placeholder="Type a command or search..." />
+      <CommandInput
+        placeholder="Type a command or search..."
+        value={searchInput}
+        onValueChange={setSearchInput}
+      />
       <CommandList className="max-w-2xl">
         <CommandEmpty>No results found.</CommandEmpty>
         <PagesCommandGroup close={close} />
         <ActionsCommandGroup close={close} />
+        <SearchCommandGroup
+          close={close}
+          searchQuery={debouncedSearchInput}
+        />
         <PRCommandGroup close={close} />
       </CommandList>
     </CommandDialog>
@@ -218,7 +237,7 @@ function ActionsCommandGroup(props: { close: () => void }) {
 function PRCommandGroup(props: { close: () => void }) {
   const navigate = useNavigate();
 
-  const { data: pullRequests } = useQuery(queries.listPullRequests());
+  const { data: pullRequests } = useQuery(queries.pullRequests.listPullRequests());
 
   return (
     <CommandGroup heading="Pull requests">
@@ -262,3 +281,64 @@ function PRCommandGroup(props: { close: () => void }) {
 function pullRequestValue(pr: ListPullRequest) {
   return `!${pr.id} ${pr.title} ${pr.repoName} ${pr.createdBy.displayName} ${pr.workItems.map((wi) => `#${wi.id}`).join(" ")}`;
 }
+
+function SearchCommandGroup(props: {
+  close: () => void;
+  searchQuery: string;
+}) {
+  const navigate = useNavigate();
+
+  const { data: searchResults } = useQuery(
+    queries.search.search(props.searchQuery, 10)
+  );
+
+  if (!props.searchQuery || !searchResults || searchResults.length === 0) {
+    return null;
+  }
+
+  return (
+    <CommandGroup heading="Search results">
+      {searchResults.map((result) => (
+        <CommandItem
+          key={`${result.sourceType}-${result.externalId}`}
+          value={searchResultValue(result)}
+          onSelect={() => {
+            if (result.sourceType === "Pr") {
+              navigate({
+                to: "/prs/$prId",
+                params: { prId: result.externalId.toString() },
+              });
+            } else {
+              window.open(result.url, "_blank", "noopener,noreferrer");
+            }
+            props.close();
+          }}
+        >
+          <div className="flex w-full flex-row items-center justify-between gap-2 truncate">
+            <div className="flex max-w-[75%] flex-row items-center gap-2">
+              {result.sourceType === "Pr" ? (
+                <GitPullRequestIcon className="h-4 w-4 text-muted-foreground" />
+              ) : (
+                <BriefcaseIcon className="h-4 w-4 text-muted-foreground" />
+              )}
+              <span className="text-muted-foreground">
+                {result.sourceType === "Pr" ? "!" : "#"}
+                {result.externalId}
+              </span>
+              <span className="truncate">{result.title}</span>
+            </div>
+            {result.authorName && (
+              <span className="text-xs text-muted-foreground">
+                {result.authorName}
+              </span>
+            )}
+          </div>
+        </CommandItem>
+      ))}
+    </CommandGroup>
+  );
+}
+
+function searchResultValue(result: SearchResult) {
+  return `${result.sourceType === "Pr" ? "!" : "#"}${result.externalId} ${result.title} ${result.authorName ?? ""}`;
+}

app/src/components/cmd-k.tsx

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

app/src/hooks/useDebounce.ts

@@ -18,10 +18,10 @@ function useStartDiffers(options?: DefaultMutationOptions<RepoKey>) {
       }),
     ...options,
     onMutate: (repoKey) => {
-      queryClient.cancelQueries(queries.differs());
-      const previous = queryClient.getQueryData(queries.differs().queryKey);
+      queryClient.cancelQueries(queries.differs.differs());
+      const previous = queryClient.getQueryData(queries.differs.differs().queryKey);
 
-      queryClient.setQueryData(queries.differs().queryKey, (old) => {
+      queryClient.setQueryData(queries.differs.differs().queryKey, (old) => {
         if (!old) return undefined;
 
         const differ = old.find(
@@ -45,11 +45,11 @@ function useStartDiffers(options?: DefaultMutationOptions<RepoKey>) {
       return { previous };
     },
     onError: (err, vars, ctx) => {
-      queryClient.setQueryData(queries.differs().queryKey, ctx?.previous);
+      queryClient.setQueryData(queries.differs.differs().queryKey, ctx?.previous);
       options?.onError?.(err, vars, ctx);
     },
     onSuccess: (data, vars, ctx) => {
-      queryClient.invalidateQueries(queries.differs());
+      queryClient.invalidateQueries(queries.differs.differs());
       queryClient.invalidateQueries({
         queryKey: pullRequestsQueries.baseKey,
       });
@@ -69,10 +69,10 @@ function useStopDiffers(options?: DefaultMutationOptions<RepoKey>) {
       }),
     ...options,
     onMutate: (repoKey) => {
-      queryClient.cancelQueries(queries.differs());
-      const previous = queryClient.getQueryData(queries.differs().queryKey);
+      queryClient.cancelQueries(queries.differs.differs());
+      const previous = queryClient.getQueryData(queries.differs.differs().queryKey);
 
-      queryClient.setQueryData(queries.differs().queryKey, (old) => {
+      queryClient.setQueryData(queries.differs.differs().queryKey, (old) => {
         if (!old) return undefined;
 
         const differ = old.find(
@@ -96,11 +96,11 @@ function useStopDiffers(options?: DefaultMutationOptions<RepoKey>) {
       return { previous };
     },
     onError: (err, vars, ctx) => {
-      queryClient.setQueryData(queries.differs().queryKey, ctx?.previous);
+      queryClient.setQueryData(queries.differs.differs().queryKey, ctx?.previous);
       options?.onError?.(err, vars, ctx);
     },
     onSuccess: (data, vars, ctx) => {
-      queryClient.invalidateQueries(queries.differs());
+      queryClient.invalidateQueries(queries.differs.differs());
       options?.onSuccess?.(data, vars, ctx);
     },
   });

app/src/lib/api/mutations/differs.ts

@@ -22,7 +22,7 @@ function useAddRepository(options?: DefaultMutationOptions<AddRepositoryBody>) {
       }),
     ...options,
     onSuccess: (data, vars, ctx) => {
-      queryClient.invalidateQueries(queries.differs());
+      queryClient.invalidateQueries(queries.differs.differs());
       options?.onSuccess?.(data, vars, ctx);
     },
   });
@@ -43,7 +43,7 @@ function useFollowRepository(
       }),
     ...options,
     onMutate: (vars) => {
-      queryClient.setQueryData(queries.differs().queryKey, (old) => {
+      queryClient.setQueryData(queries.differs.differs().queryKey, (old) => {
         if (!old) return old;
 
         const idx = old.findIndex(
@@ -62,7 +62,7 @@ function useFollowRepository(
       options?.onMutate?.(vars);
     },
     onSettled: (data, err, vars, ctx) => {
-      queryClient.invalidateQueries(queries.differs());
+      queryClient.invalidateQueries(queries.differs.differs());
       queryClient.invalidateQueries({
         queryKey: pullRequestsQueries.baseKey,
       });
@@ -84,7 +84,7 @@ function useDeleteRepository(
       }),
     ...options,
     onSuccess: (data, vars, ctx) => {
-      queryClient.invalidateQueries(queries.differs());
+      queryClient.invalidateQueries(queries.differs.differs());
       queryClient.invalidateQueries({
         queryKey: pullRequestsQueries.baseKey,
       });

app/src/lib/api/mutations/repositories.ts

@@ -3,13 +3,15 @@ import { pullRequestsQueries } from "./pullRequests";
 import { commitsQueries } from "./commits";
 import { milltimeQueries } from "./milltime";
 import { userQueries } from "./user";
+import { searchQueries } from "./search";
 
 export const queries = {
-  ...userQueries,
-  ...differsQueries,
-  ...pullRequestsQueries,
-  ...commitsQueries,
-  ...milltimeQueries,
+  user: userQueries,
+  differs: differsQueries,
+  pullRequests: pullRequestsQueries,
+  commits: commitsQueries,
+  milltime: milltimeQueries,
+  search: searchQueries,
 };
 
 export type RepoKey<T = object> = T & {

app/src/lib/api/queries/queries.ts

@@ -0,0 +1,37 @@
+import { queryOptions } from "@tanstack/react-query";
+import { api } from "../api";
+
+export const searchQueries = {
+  baseKey: ["search"],
+  search: (query: string, limit?: number) =>
+    queryOptions({
+      queryKey: [...searchQueries.baseKey, query, limit],
+      queryFn: async () => {
+        const params = new URLSearchParams({ q: query });
+        if (limit) {
+          params.set("limit", limit.toString());
+        }
+        return api.get(`search?${params}`).json<Array<SearchResult>>();
+      },
+      enabled: query.length >= 2,
+    }),
+};
+
+export type SearchSource = "Pr" | "WorkItem";
+
+export type SearchResult = {
+  id: number;
+  sourceType: SearchSource;
+  sourceId: string;
+  externalId: number;
+  title: string;
+  description: string | null;
+  status: string;
+  priority: number | null;
+  itemType: string | null;
+  authorName: string | null;
+  url: string;
+  createdAt: string;
+  updatedAt: string;
+  score: number;
+};

app/src/lib/api/queries/search.ts

@@ -41,7 +41,7 @@ import { milltimeMutations } from "@/lib/api/mutations/milltime";
 
 export const Route = createFileRoute("/_layout/prs/$prId")({
   loader: ({ context }) =>
-    context.queryClient.ensureQueryData(queries.listPullRequests()),
+    context.queryClient.ensureQueryData(queries.pullRequests.listPullRequests()),
   component: PRDetailsDialog,
 });
 
@@ -51,7 +51,7 @@ function PRDetailsDialog() {
   const navigate = useNavigate({ from: Route.fullPath });
 
   const { data: pr } = useSuspenseQuery({
-    ...queries.listPullRequests(),
+    ...queries.pullRequests.listPullRequests(),
     select: (data) => data.find((pr) => pr.id === +prId),
   });
 

app/src/routes/_layout/prs/$prId/route.tsx

@@ -28,8 +28,8 @@ export const Route = createFileRoute("/_layout/prs")({
   shouldReload: false,
   loader: async ({ context }) => {
     await Promise.all([
-      context.queryClient.ensureQueryData(queries.me()),
-      context.queryClient.ensureQueryData(queries.listPullRequests()),
+      context.queryClient.ensureQueryData(queries.user.me()),
+      context.queryClient.ensureQueryData(queries.pullRequests.listPullRequests()),
     ]);
   },
   component: PrsComponent,
@@ -40,9 +40,9 @@ function PrsComponent() {
   const { searchString, filterAuthor, filterReviewer, filterBlocking } =
     Route.useSearch();
 
-  const { data: user } = useSuspenseQuery(queries.me());
+  const { data: user } = useSuspenseQuery(queries.user.me());
   const { data: pullRequests } = useSuspenseQuery({
-    ...queries.listPullRequests(),
+    ...queries.pullRequests.listPullRequests(),
     refetchInterval: 60 * 1000,
   });
 

app/src/routes/_layout/prs/route.tsx

@@ -22,8 +22,8 @@ const repositoriesSearchSchema = z.object({
 export const Route = createFileRoute("/_layout/repositories")({
   validateSearch: repositoriesSearchSchema,
   loader: ({ context }) => {
-    context.queryClient.ensureQueryData(queries.me());
-    context.queryClient.ensureQueryData(queries.differs());
+    context.queryClient.ensureQueryData(queries.user.me());
+    context.queryClient.ensureQueryData(queries.differs.differs());
   },
   component: RepositoriesComponent,
 });
@@ -32,11 +32,11 @@ function RepositoriesComponent() {
   const { searchString } = Route.useSearch();
 
   const { data: isAdmin } = useSuspenseQuery({
-    ...queries.me(),
+    ...queries.user.me(),
     select: (data) => data.roles.includes("Admin"),
   });
   const { data, dataUpdatedAt } = useSuspenseQuery({
-    ...queries.differs(),
+    ...queries.differs.differs(),
     refetchInterval: 15 * 1000,
   });