JACoB PR for Issue Add Evaluation Mode Toggle and Enhanced Loading State to Issue Creator Page

[jacob-ai-bot[bot]]

Summary:

Feature Request

1. Evaluation Mode Toggle

Add a toggle to the issue creator page (IssueWriter.tsx) that allows users to choose between two evaluation modes:

• Faster Evaluation: Uses the Claude Sonnet 3.5 model in the tRPC evaluate function.
• Thorough Evaluation: Uses the 01-preview model in the tRPC evaluate function.

2. Enhanced Loading State

In the ExtractedIssueDetails component (ExtractedIssueDetails.tsx), implement an improved loading state that displays rotating text:

• Show approximately 10 short phrases, each displayed for a random duration between 5 to 10 seconds.
• Phrases should represent the steps occurring in the tRPC router when the evaluate function is running. Examples include:
  • "Gathering Codebase Context..."
  • "Analyzing Issue Details..."
  • "Loading Project Settings..."
  • "Contacting AI Model..."
  • "Processing Evaluation..."
  • "Compiling Results..."
  • "Finalizing Output..."
  • "Optimizing Suggestions..."
  • "Fetching Additional Data..."
  • "Almost There..."

Expected Outcome

• Users can select between a faster or thorough evaluation mode when creating an issue.
• The tRPC evaluate function uses the appropriate model based on the user's selection.
• The ExtractedIssueDetails component displays rotating informative phrases during the loading state to enhance user experience.

---

@jacob-ai-bot --skip-build

Plan:

Step 1: Edit /src/app/dashboard/[org]/[repo]/issue-writer/IssueWriter.tsx

Task: Add evaluation mode toggle to IssueWriter component

Instructions: In /src/app/dashboard/[org]/[repo]/issue-writer/IssueWriter.tsx, add a UI element (such as a toggle switch or radio buttons) that allows the user to select between 'Faster Evaluation' and 'Detailed Evaluation'. Store the user's selection in the component's state. When the user initiates the evaluation by clicking the 'Evaluate' button, pass the selected evaluation mode to the rewriteIssue mutation, ensuring that the server is aware of the user's choice. The default should be "Detailed Evaluation" Also save their choice to localStorage (do not reset it, only change it when they make a change) and then load the choice from localStorage when the component is initialized.

Exit Criteria: The issue creator page displays an evaluation mode toggle, and the selected mode is sent to the server when evaluating an issue. If the user selects an option and then refreshes the page, their previous option was selected. The default selection is Detailed Evaluation.

Step 2: Edit /src/server/api/routers/github.ts

Task: Modify rewriteIssue function in server to use selected evaluation mode

Instructions: In /src/server/api/routers/github.ts, update the rewriteIssue procedure to accept the evaluation mode as a parameter from the client. Based on the received evaluation mode, use the appropriate AI model when calling sendGptRequest. If the mode is 'Faster Evaluation', use the 'claude-3-5-sonnet-20241022' model. If the mode is 'Detailed Evaluation', use the 'o1-preview-2024-09-12' model. Use an enum and export it so the front end IssueWriter component is always in sync. Make the eval mode param optional and set it to "Detailed Evaluation" as the default.

Exit Criteria: The server's rewriteIssue function adjusts the AI model used based on the client's selected evaluation mode.

Dependencies: IssueWriter needs to be updated to pass in the new param.

Step 3: Edit /src/app/dashboard/[org]/[repo]/issue-writer/components/ExtractedIssueDetails.tsx

Task: Enhance loading state in ExtractedIssueDetails component

Instructions: In /src/app/dashboard/[org]/[repo]/issue-writer/components/ExtractedIssueDetails.tsx, implement an enhanced loading state when the evaluation is in progress. Display rotating text phrases that represent the steps occurring in the tRPC router during the evaluation. Approximately 10 phrases should be used, each displayed for a random duration between 5 to 10 seconds. The phrases include 'Gathering Codebase Context...', 'Analyzing Issue Details...', 'Loading Project Settings...', 'Contacting AI Model...', 'Processing Evaluation...', 'Compiling Results...', 'Finalizing Output...', 'Optimizing Suggestions...', 'Fetching Additional Data...', and 'Almost There...'. Ensure that the loading state is displayed while the evaluation is running and hides when the evaluation is complete. Use best practices in design and make it look great but not cheesy. It should be clean and modern but also interesting. For example, you can use a MagicUI component to make the text shimmer. Be sure to have dark mode support.

Exit Criteria: When the evaluation is running, the component displays rotating informative phrases, enhancing the user experience during the loading state.

[jacob-ai-bot[bot]]

Hello human! 👋

This PR was created by JACoB to address the issue Add Evaluation Mode Toggle and Enhanced Loading State to Issue Creator Page

Next Steps

1. Please review the PR carefully. Auto-generated code can and will contain subtle bugs and mistakes.

2. If you identify code that needs to be changed, please reject the PR with a specific reason. Be as detailed as possible in your comments. JACoB will take these comments, make changes to the code and push up changes. Please note that this process will take a few minutes.

3. Once the code looks good, approve the PR and merge the code.