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

[jacob-local-kevin]

Changes Performed:

Step 1: Extend codebase-context TRPC Router

Files:

/src/server/api/routers/codebaseContext.ts

Details:

Add a new procedure named searchCodebase to the codebaseContextRouter in /src/server/api/routers/codebaseContext.ts. This procedure should accept an input schema with org, repo, and query strings using Zod for validation. The procedure's logic should integrate with the Llama3.1 70b model and Cerebras to process the search queries, returning the top ten matching files as an array of ContextItem[]. Ensure to handle errors and validate the session token for security.

Exit Criteria

The codebase-context TRPC router includes a new procedure for handling AI-powered search queries.

Step 2: Update SearchBar Component for AI Search

Files:

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

Details:

Modify /src/app/dashboard/[org]/[repo]/code-visualizer/codebase/SearchBar.tsx to support AI-powered search. Update the onSearch function to make a TRPC call to the newly created searchCodebase procedure with the search term. Implement state management for loading and search results. Enhance the UI to display a loading indicator while the search is in progress and to show search results upon completion. Ensure compatibility with both light and dark modes as specified in the GitHub issue.

Exit Criteria

The SearchBar component supports AI-powered search with loading states and displays results.

Step 3: Create SearchResults Component

Files:

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

Details:

Create a new React component /src/app/dashboard/[org]/[repo]/code-visualizer/codebase/SearchResults.tsx for displaying the search results. This component should list the top ten matching files using the data returned from the searchCodebase procedure. Utilize Framer Motion for smooth animations when displaying the search results. Include functionality for selecting a file from the results, which should update the Codebase Visualizer to focus on the selected file. Support both light and dark modes.

Exit Criteria

A new component for displaying AI-powered search results with animations and selection handling is created.

Step 4: Integrate SearchResults in CodebaseVisualizer

Files:

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

Details:

Update /src/app/dashboard/[org]/[repo]/code-visualizer/codebase/CodebaseVisualizer.tsx to integrate the new SearchResults component. Modify the component to handle state changes when a file is selected from the search results, focusing the visualizer on the selected file. Ensure the search box and results are prominently displayed and responsive, adhering to the GitHub issue's requirements for user experience and design.

Exit Criteria

The CodebaseVisualizer component integrates the SearchResults component and updates the visualizer focus based on selection.

@jacob-ai-bot fix error

Error Message:

Command failed: __NEXT_TEST_MODE=1 SKIP_ENV_VALIDATION=1 npm run build --verbose && npx tsc --noEmit
npm verbose cli /Users/kleneway/.nvm/versions/node/v20.10.0/bin/node /Users/kleneway/.nvm/versions/node/v20.10.0/bin/npm
npm info using npm@10.8.2
npm info using node@v20.10.0
npm verbose title npm run build
npm verbose argv "run" "build" "--loglevel" "verbose"
npm verbose logfile logs-max:10 dir:/Users/kleneway/.npm/_logs/2024-09-25T18_02_41_341Z-
npm verbose logfile /Users/kleneway/.npm/_logs/2024-09-25T18_02_41_341Z-debug-0.log
npm verbose cli /Users/kleneway/.nvm/versions/node/v20.10.0/bin/node /Users/kleneway/.nvm/versions/node/v20.10.0/lib/node_modules/npm/bin/npm-cli.js
npm info using npm@10.8.2
npm info using node@v20.10.0
npm verbose title npm run build:1-next
npm verbose argv "run" "build:1-next"
npm verbose logfile logs-max:10 dir:/Users/kleneway/.npm/_logs/2024-09-25T18_02_41_595Z-
npm verbose logfile /Users/kleneway/.npm/_logs/2024-09-25T18_02_41_595Z-debug-0.log
Failed to compile.

./src/app/dashboard/[org]/[repo]/code-visualizer/codebase/CodebaseVisualizer.tsx
Error: 
  x Unexpected token `div`. Expected jsx identifier
     ,-[/private/tmp/tmp-33864-bbKCVh2P0djb/src/app/dashboard/[org]/[repo]/code-visualizer/codebase/CodebaseVisualizer.tsx:153:1]
 153 |   }
 154 | 
 155 |   return (
 156 |     <div className="flex h-full flex-col overflow-hidden rounded-md border border-aurora-100/50 bg-transparent  shadow-lg dark:border-blueGray-900 dark:bg-blueGray-700">
     :      ^^^
 157 |       <div className="flex w-full flex-1 flex-row overflow-hidden">
 158 |         <div className="flex w-full flex-col">
 159 |           <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">
     `----

Caused by:
    Syntax Error

Import trace for requested module:
./src/app/dashboard/[org]/[repo]/code-visualizer/codebase/CodebaseVisualizer.tsx
./src/app/dashboard/[org]/[repo]/code-visualizer/Codebase.tsx

./src/server/api/routers/codebaseContext.ts
Module not found: Can't resolve '~/server/ai/search'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./src/server/api/root.ts
./src/app/api/trpc/[trpc]/route.ts


> Build failed because of webpack errors
npm verbose cwd /private/tmp/tmp-33864-bbKCVh2P0djb
npm verbose os Darwin 23.4.0
npm verbose node v20.10.0
npm verbose npm  v10.8.2
npm verbose exit 1
npm verbose code 1
ERROR: "build:1-next" exited with 1.
npm verbose cwd /private/tmp/tmp-33864-bbKCVh2P0djb
npm verbose os Darwin 23.4.0
npm verbose node v20.10.0
npm verbose npm  v10.8.2
npm verbose exit 1
npm verbose code 1

[jacob-local-kevin]

JACoB here...

I'm busy working on this error.

I'll continue to comment on this pull request with status as I make progress.

[jacob-local-kevin]

Unfortunately, I ran into trouble working on this.

Here is some error information:

runNpmInstall: Invalid package name: ~/server/ai/search