JACoB PR for Issue Send Filename to Chat via button on Codebase Details

[jacob-local-kevin]

Summary:

Description

Enhance collaboration within the Codebase Details page by implementing a new "Send Filename to Chat" button. This feature allows users to quickly share specific code files within project conversations, streamlining discussions by enabling the direct transfer of filenames to the chat interface. By reducing the need to manually type out filenames, teams can reference and discuss code more efficiently, improving overall productivity.

User Story

As a user, I want to send the filename of a selected code file directly to the chat page, so that I can easily reference and discuss specific files with my team without manually typing out filenames.

Features

Button Placement

• Location: Pin the "Send Filename to Chat" button to the bottom of the Codebase Details component.
• Design: Ensure the button adapts to light and dark themes. When the page content is long, allow it to remain fixed while content scrolls beneath.

Functionality

1. Button Click:
   • Retrieve the unique ID of the selected file.
   • Encode the file_path and append it as a query parameter to the /chat URL (e.g., /chat?file_path=(url-encoded file path)).
   • Redirect the user to the chat page with the appended parameter.
2. Chat Page Handling:
   • Detect the file_path parameter from the URL.
   • Set the filePath as the selected file in the chat context for reference.

Acceptance Criteria

• Visibility: A "Send Filename to Chat" button is present at the bottom of the Codebase Details component.
• Redirection: Clicking the button correctly appends the URL-encoded file_path to the /chat URL and navigates to the chat page.
• File Selection: The chat page accurately recognizes the file_path parameter and sets the corresponding file as selected in the chat context.
• Error Handling:
  • Display an appropriate error message if no file is selected when the button is clicked.
  • Handle invalid file_path parameters gracefully, informing the user of any issues.
  • Ensure network failures during redirection are managed, providing feedback to the user.

--skip-build @jacob-ai-bot

Plan:

Step 1: Edit /src/app/dashboard/[org]/[repo]/chat/ChatPage.tsx

Task: Handle 'file_path' query parameter in ChatPage component

Instructions:
In the file /src/app/dashboard/[org]/[repo]/chat/ChatPage.tsx, modify the component to extract the file_path query parameter from the URL using the useSearchParams hook from Next.js. Decode the file_path using decodeURIComponent and pass it as a prop named selectedFilePath to the Chat component. Ensure that other functionalities of the ChatPage remain unaffected.

Exit Criteria:
The ChatPage component correctly extracts the file_path parameter from the URL, decodes it, and passes it as the selectedFilePath prop to the Chat component without affecting other functionalities.

Step 2: Edit /src/app/dashboard/[org]/[repo]/chat/components/Chat.tsx

Task: Update Chat component to select file based on 'selectedFilePath' prop

Instructions:
In the file /src/app/dashboard/[org]/[repo]/chat/components/Chat.tsx, update the Chat component to accept an optional prop selectedFilePath of type string. Use the useEffect hook to watch for changes to selectedFilePath, and when it is provided and valid, set the corresponding file as selected in the chat context or state (e.g., by setting selectedFiles state variable). If the selectedFilePath does not correspond to any file in the context items, display an appropriate error message to the user (e.g., using a toast notification). Ensure that existing functionalities of the Chat component are not affected by this change.

Exit Criteria:
The Chat component accepts the selectedFilePath prop and uses it to select the corresponding file in the chat context upon initialization or when the prop changes. If the selectedFilePath is invalid or not found, an error message is displayed to the user. Existing functionalities of the Chat component continue to work as before.

Step 3: Edit /src/app/dashboard/[org]/[repo]/code-visualizer/codebase/CodebaseDetails.tsx

Task: Add Send Filename to Chat button in CodebaseDetails component

Instructions:
In the file /src/app/dashboard/[org]/[repo]/code-visualizer/codebase/CodebaseDetails.tsx, add a new button labeled 'Send Filename to Chat' at the bottom of the component UI. The button should be styled to adapt to both light and dark themes, and remain fixed at the bottom even when the content is scrolled. When clicked, the button should retrieve the file path of the currently selected code file (from the item.file property), encode the file path using encodeURIComponent, and redirect the user to the chat page using the router's push method, appending the encoded file_path as a query parameter to the URL (e.g., /dashboard/[org]/[repo]/chat?file_path=(encoded file path)). Ensure that if no file is selected (i.e., item.file is undefined or empty), an appropriate error message is displayed to the user and the redirection does not occur.

Exit Criteria:
The 'Send Filename to Chat' button is visible at the bottom of the Codebase Details component, adapts to light and dark themes, and remains fixed while content scrolls. Clicking the button redirects to the chat page with the encoded file_path query parameter when a file is selected. If no file is selected, an error message is displayed and the user is not redirected.

[jacob-local-kevin]

Hello human! 👋

This PR was created by JACoB to address the issue Send Filename to Chat via button on Codebase Details

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.