JACoB PR for Issue Implement AI-Powered Search in Codebase Visualizer Dashboard

src/app/dashboard/[org]/[repo]/code-visualizer/codebase/CodebaseVisualizer.tsx

@@ -1,11 +1,13 @@
 "use client";
 
-import React, { useState, useMemo, useEffect } from "react";
+import React, { useState, useMemo, useEffect, useCallback } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Tree } from "./Tree";
 import CodebaseDetails from "./CodebaseDetails";
 import { type ContextItem } from "~/server/utils/codebaseContext";
 import { type FileType } from "./types";
+import SearchBar from "./SearchBar";
+import SearchResults from "./SearchResults";
 
 interface CodebaseVisualizerProps {
   contextItems: ContextItem[];
@@ -26,6 +28,8 @@ export const CodebaseVisualizer: React.FC<CodebaseVisualizerProps> = ({
   const [detailsWidth, setDetailsWidth] = useState(30);
   const [allFiles, setAllFiles] = useState<string[]>([]);
   const [viewMode, setViewMode] = useState<"folder" | "taxonomy">("folder");
+  const [searchResults, setSearchResults] = useState<ContextItem[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
 
   useEffect(() => {
     setIsMounted(true);
@@ -129,6 +133,21 @@ export const CodebaseVisualizer: React.FC<CodebaseVisualizerProps> = ({
     setDetailsWidth(detailsWidth === 30 ? 50 : 30);
   };
 
+  const handleSearch = useCallback((results: ContextItem[]) => {
+    setSearchResults(results);
+    setIsSearching(true);
+  }, []);
+
+  const handleSearchResultSelect = useCallback((filePath: string) => {
+    handleNodeClick(filePath);
+    setIsSearching(false);
+  }, [handleNodeClick]);
+
+  const handleCloseSearch = useCallback(() => {
+    setSearchResults([]);
+    setIsSearching(false);
+  }, []);
+
   if (!isMounted) {
     return null;
   }
@@ -139,6 +158,7 @@ export const CodebaseVisualizer: React.FC<CodebaseVisualizerProps> = ({
         <div className="flex w-full flex-col">
           <div className="flex h-12 w-full flex-row items-center justify-between bg-aurora-100/50 p-2 text-left dark:bg-blueGray-900/30">
             <div>
+            <SearchBar org="org" repo="repo" onSearch={handleSearch} />
               {currentPath.map((part, index) => (
                 <React.Fragment key={index}>
                   <span className="text-gray-500 dark:text-blueGray-400">
@@ -187,24 +207,32 @@ export const CodebaseVisualizer: React.FC<CodebaseVisualizerProps> = ({
             transition={{ duration: 0.3 }}
           >
             <Tree
-              data={treeData}
-              maxDepth={12}
-              colorEncoding="type"
-              filesChanged={[]}
-              customFileColors={{}}
-              onNodeClick={handleNodeClick}
-              width={
-                selectedItem
-                  ? dimensions.width * ((100 - detailsWidth) / 100)
-                  : dimensions.width
-              }
-              height={dimensions.height}
-              selectedItem={selectedItem}
-              selectedFolder={"/" + currentPath?.join("/")}
-              viewMode={viewMode}
-              theme={theme}
-            />
-          </motion.div>
+            {isSearching ? (
+              <SearchResults
+                results={searchResults}
+                onSelect={handleSearchResultSelect}
+                onClose={handleCloseSearch}
+              />
+            ) : (
+              <Tree
+                data={treeData}
+                maxDepth={12}
+                colorEncoding="type"
+                filesChanged={[]}
+                customFileColors={{}}
+                onNodeClick={handleNodeClick}
+                width={
+                  selectedItem
+                    ? dimensions.width * ((100 - detailsWidth) / 100)
+                    : dimensions.width
+                }
+                height={dimensions.height}
+                selectedItem={selectedItem}
+                selectedFolder={"/" + currentPath?.join("/")}
+                viewMode={viewMode}
+                theme={theme}
+              />
+            )}
         </div>
         <AnimatePresence>
           {selectedItem && (

src/app/dashboard/[org]/[repo]/code-visualizer/codebase/SearchBar.tsx

@@ -1,34 +1,48 @@
 // components/SearchBar.tsx
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
 import { motion } from "framer-motion";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSearch } from "@fortawesome/free-solid-svg-icons";
+import { api } from "~/trpc/react";
+import { type ContextItem } from "~/server/utils/codebaseContext";
 
 interface SearchBarProps {
-  onSearch: (term: string) => void;
+  org: string;
+  repo: string;
+  onSearch: (results: ContextItem[]) => void;
 }
 
-const SearchBar: React.FC<SearchBarProps> = ({ onSearch }) => {
+const SearchBar: React.FC<SearchBarProps> = ({ org, repo, onSearch }) => {
   const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const searchCodebase = api.codebaseContext.searchCodebase.useQuery();
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = useCallback(async (e: React.FormEvent) => {
     e.preventDefault();
-    onSearch(searchTerm);
+    setIsLoading(true);
+    const results = await searchCodebase.refetch({ org, repo, query: searchTerm });
+    setIsLoading(false);
+    if (results.data) {
+      onSearch(results.data);
+    }
   };
 
   return (
     <form onSubmit={handleSubmit} className="flex items-center">
       <motion.input
-        type="text"
+        className="rounded-l-lg bg-blueGray-700 px-4 py-2 text-gray-300 focus:outline-none focus:ring-2 focus:ring-light-blue w-64"
         value={searchTerm}
+        disabled={isLoading}
         onChange={(e) => setSearchTerm(e.target.value)}
         placeholder="Search files..."
         className="rounded-l-lg bg-blueGray-700 px-4 py-2 text-gray-300 focus:outline-none focus:ring-2 focus:ring-light-blue"
-        whileFocus={{ scale: 1.05 }}
+        className={`rounded-r-lg px-4 py-2 text-white ${isLoading ? 'bg-gray-500' : 'bg-light-blue'}`}
       />
       <motion.button
+        disabled={isLoading}
         type="submit"
-        className="rounded-r-lg bg-light-blue px-4 py-2 text-white"
+        {isLoading ? 'Searching...' : <FontAwesomeIcon icon={faSearch} />}
         whileHover={{ scale: 1.05 }}
         whileTap={{ scale: 0.95 }}
       >

src/app/dashboard/[org]/[repo]/code-visualizer/codebase/SearchResults.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { type ContextItem } from "~/server/utils/codebaseContext";
+
+interface SearchResultsProps {
+  results: ContextItem[];
+  onSelect: (filePath: string) => void;
+}
+
+const SearchResults: React.FC<SearchResultsProps> = ({ results, onSelect }) => {
+  return (
+    <div className="search-results-container">
+      {results.length > 0 ? (
+        <motion.ul
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.5 }}
+          className="search-results-list"
+        >
+          {results.slice(0, 10).map((result, index) => (
+            <motion.li
+              key={index}
+              className="search-result-item cursor-pointer p-2 hover:bg-gray-200 dark:hover:bg-gray-700"
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+              onClick={() => onSelect(result.filePath)}
+            >
+              <div className="file-path text-sm text-gray-800 dark:text-gray-200">
+                {result.filePath}
+              </div>
+              <div className="file-overview text-xs text-gray-600 dark:text-gray-400">
+                {result.overview}
+              </div>
+            </motion.li>
+          ))}
+        </motion.ul>
+      ) : (
+        <div className="no-results text-center text-gray-500 dark:text-gray-400">
+          No matching files found.
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SearchResults;

src/server/api/routers/codebaseContext.ts

@@ -1,6 +1,7 @@
 import { z } from "zod";
 import { db } from "~/server/db/db";
 import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";
+import { searchCodebase } from "~/server/ai/search";
 import { type ContextItem } from "~/server/utils/codebaseContext";
 import { Octokit } from "@octokit/rest";
 import { TRPCError } from "@trpc/server";
@@ -99,6 +100,30 @@ export const codebaseContextRouter = createTRPCRouter({
         await generateCodebaseContext(org, repoName, accessToken);
       },
     ),
+  searchCodebase: protectedProcedure
+    .input(
+      z.object({
+        org: z.string(),
+        repo: z.string(),
+        query: z.string(),
+      }),
+    )
+    .query(
+      async ({
+        input: { org, repo, query },
+        ctx: {
+          session: { accessToken },
+        },
+      }): Promise<ContextItem[]> => {
+        if (!accessToken) {
+          throw new TRPCError({
+            code: "UNAUTHORIZED",
+            message: "Not authenticated",
+          });
+        }
+        return await searchCodebase(org, repo, query, accessToken);
+      },
+    ),
 });
 
 const generateCodebaseContext = async (