@jacob-ai-bot
Description:
We need to enhance the initial onboarding experience for new users based on their feedback. The main goals are to guide users through the minimum required steps, help them understand the basics of using JACoB, and give them an early "wow" moment. This involves creating a new onboarding Developer persona that uses the chat interface to dynamically present the required signup/connection buttons and gather the necessary info to complete the jacob.config file.
Requirements:
Update the Signup Page:
Modify the signup page to collect an email address.
Use the email from GitHub as the default (if available) but allow users to change it.
If the user doesn't have an email on file, prompt them to provide one and save it to the user table.
Create a New Developer Persona:
Develop a new Developer persona specifically for the setup process.
Write a scenario prompt that will:
Explain the basics of what JACoB does (and doesn't yet do).
Give the user a choice of connecting an existing repo or cloning a sample one.
If the user chooses an existing repo, show a button that takes them to the GitHub app installation page.
If the user chooses to use a sample one, clone the jacob-template repo and add it to their org. Then show the button that takes them to the GitHub app installation page and tell them to select the sample repo.
Ask the user if they use Figma. If they do, provide a button to redirect them to install the Figma plugin.
When the user returns, present a button that will check the JACoB installation status and report back whether or not JACoB was successfully installed.
If it is installed, show a congrats message and a button that will take them to the create-jacob-config developer experience.
If it is not installed successfully, give instructions on what went wrong. If it's due to an incompatible language, prompt them to install the sample repo instead. Otherwise, provide the error message with instructions to fix it and try again.
Mark the user as onboarded in the database.
Track Onboarding Status:
Add a new field to the user table to track the onboarding status.
Implement a migration to add this new field.
Dynamic Button Mechanism:
Improve the current mechanism for dynamically presenting buttons and gathering information from the user through the chat interface.
Create a Tag object with properties like tag, type (button, link), title, link?, and functionName?.
Develop a constant array of usable Tags that the LLM can invoke.
Write a utility function to convert any tags from the chat output to the corresponding tag object.
Pass the tag to the chat message component and dynamically render the button/link, adding a click handler to run the function or open the link.
Dynamically evaluate the function at runtime.
Files to Update:
src/app/page.tsx (for the signup page)
src/data/developers.ts (for the new Developer persona)
src/types.ts (for the new SpecialPhrases tag)
src/app/dashboard/[org]/[repo]/[developer]/components/chat/ChatMessage.tsx (for the dynamic button mechanism)
Acceptance Criteria:
[ ] The signup page collects an email address and uses the email from GitHub as the default if available.
[ ] A new Developer persona for setup is created with the specified scenario prompt.
[ ] The user's onboarding status is tracked and stored in the database.
[ ] The dynamic button mechanism in the chat interface is improved as described.
Steps to Address Issue: 1. Update the signup page in src/app/page.tsx to collect email addresses.
Create a new Developer persona for onboarding in src/data/developers.ts.
Add a new field to the user table to track onboarding status (requires database migration).
Implement the dynamic button mechanism:
a. Create a Tag object in src/types.ts.
b. Develop a constant array of usable Tags.
c. Write a utility function to convert chat output tags to tag objects.
d. Update src/app/dashboard/[org]/[repo]/[developer]/components/chat/ChatMessage.tsx to use the new tag system.
Test the new onboarding flow to ensure it meets all requirements.
Files to Update: src/app/page.tsx, src/data/developers.ts, src/types.ts, src/app/dashboard/[org]/[repo]/[developer]/components/chat/ChatMessage.tsx
Add image upload to send screenshot data to the chat
Add Image Upload Feature to Chat Interface
Description:
Add a new button to the chat interface that allows users to upload an image. The image will be sent to the /api/image/upload API endpoint, and the returned URL will be saved and passed along with future chat messages to the backend. The uploaded images should be displayed in the chat interface immediately after upload and should be passed to the chat message api.
Requirements:
Upload Button:
Add an upload button with an upload icon to the ChatInput component.
Place the upload button to the left of the "send message" button (the up arrow).
Style the button consistently with other buttons in the chat interface using Tailwind CSS.
File Picker Dialog:
Open a default file picker dialog when the upload button is clicked.
Allow users to select multiple images at once.
Image Validation:
Validate the image before uploading:
Must be under 20MB.
Must be either PNG or JPEG.
Show an error message using a toast notification if a non-image file is uploaded.
Display an error message using a toast notification if the image exceeds 20MB.
Image Upload:
Send the selected image(s) to the /api/image/upload API endpoint.
Handle multiple image uploads in parallel.
Set a loading state to true during the upload and back to false once the upload is complete.
Display a loading indicator (e.g., spinner) on the upload button during the upload process.
API Interaction:
Use the existing API route src/app/api/image/upload/route.ts for handling image uploads.
Ensure the API interaction follows the existing patterns and conventions in the codebase.
Error Handling:
Display an error message using a toast notification if the upload fails.
Handle API errors gracefully and provide user-friendly error messages.
Display Uploaded Images:
Save the returned URL from the API and pass it along with future chat messages.
Display the uploaded images in the chat interface immediately after upload.
Ensure the images are displayed correctly in the chat bubbles, maintaining the existing chat message styles.
State Management:
Use useState to manage the loading state and image URLs.
Ensure the loading state is managed correctly during the upload process.
Toast Notifications:
Use the react-toastify library for displaying toast notifications.
Ensure the toast notifications follow the application's existing design for error messages.
Display success and error messages appropriately based on the upload outcome.
Acceptance Criteria:
[ ] Upload button with an upload icon is added to the ChatInput component.
[ ] File picker dialog opens on button click.
[ ] Image is sent to the /api/image/upload API endpoint and URL is returned.
[ ] URL is saved and passed along with future chat messages.
[ ] Error message is displayed using a toast notification if the upload fails.
[ ] Image validation is implemented (under 20MB and either PNG or JPEG).
[ ] Upload button is placed to the left of the "send message" button.
[ ] Multiple image uploads are handled in parallel.
[ ] Error message is shown if a non-image file is uploaded.
[ ] Loading state is managed correctly during the upload process.
[ ] Images are included in all future messages sent to the chat api
[ ] Uploaded images are displayed in the chat interface immediately after upload.
[ ] Toast notifications are used for displaying success and error messages.
Here is some research to help with your task:
Research
Response from ResearchCodebase: 1. Detailed Specifications:
Title: Chat Interface Component Location and Structure
Description: To implement the image upload feature, we need to identify the chat interface component, understand its structure, and determine how to integrate the new upload button and associated functionality.
File Structure and File Paths:
The chat interface component is located in the following file:
The Chat component renders the chat messages and the input field.
The ChatInput component is responsible for handling user input and sending messages.
The ChatMessage component renders individual chat messages.
Styles and Themes:
The chat interface uses Tailwind CSS for styling.
The specific styles for the chat interface can be found in the src/styles/globals.css file and the tailwind.config.ts file.
The design follows a dark theme with blue and gray colors.
The chat interface is responsive and adapts to different screen sizes using Tailwind CSS's responsive utilities.
Response from ResearchCodebase: 1. Detailed Specifications:
Title: Existing File Handling or Upload Mechanism
Description: This information is needed to understand if the application already has components or functions for handling file uploads. This will help determine if we can reuse existing code or need to implement a new mechanism for image uploads.
File Structure and File Paths:
Existing Files:
src/app/api/image/upload/route.ts: This file defines an API route for handling image uploads.
Relevant Directory Structure:
src/app/api/image: This directory contains API routes related to image handling.
The codebase contains an API route (src/app/api/image/upload/route.ts) that handles image uploads. It receives a base64 encoded image, validates the image type and size, resizes the image if needed, uploads it to an S3 bucket, and returns a signed URL for the uploaded image.
Based on this information, the application already has a mechanism for handling file uploads, specifically for images. This existing code can be reused for the new image upload feature in the chat interface. However, additional information may be needed regarding how the frontend components should interact with this API route and how the returned URL should be integrated into the chat messages.
Response from ResearchCodebase: 1. Detailed Specifications:
Title: API Interaction for File Uploads
Description: To understand how the application currently handles API interactions, particularly for file uploads, we need to analyze the codebase for existing patterns and implementations. This information will guide the implementation of the new image upload feature for the chat interface, ensuring consistency and adherence to established conventions.
File Structure and File Paths:
File to be modified: src/app/dashboard/[org]/[repo]/[developer]/components/chat/ChatInput.tsx
The codebase demonstrates the use of tRPC for API interactions.
The src/app/api/image/upload/route.ts file provides a POST endpoint for handling image uploads.
The uploadToS3 function suggests that images are uploaded to an S3 bucket.
The getSignedUrl function likely generates a signed URL for accessing the uploaded image.
API Contracts:
The /api/image/upload endpoint accepts a POST request with the following parameters:
image: The image data encoded as a base64 string.
imageType: The MIME type of the image (e.g., "image/jpeg" or "image/png").
imageName: (Optional) The desired name for the uploaded image.
shouldResize: (Optional) A boolean indicating whether the image should be resized before uploading.
The API response includes:
success: A boolean indicating whether the upload was successful.
url: The signed URL of the uploaded image if the upload was successful.
Error Handling:
The API returns a 400 status code for invalid image data or image type.
The API returns a 500 status code for internal server errors during the upload process.
Component Breakdown:
The image upload feature will likely be implemented as a new component within the chat interface.
This component will handle:
Displaying the upload button.
Opening the file picker dialog.
Validating the selected image.
Sending the image data to the /api/image/upload endpoint.
Handling the API response and updating the chat message context with the returned URL.
Displaying error messages using toast notifications.
Styles and Themes:
The codebase uses Tailwind CSS for styling.
The upload button should be styled consistently with other buttons in the chat interface.
The toast notifications should follow the application's existing design for error messages.
The component should be responsive and adapt to different screen sizes.
Based on the analysis of the codebase, the application utilizes tRPC for API interactions and provides a dedicated endpoint for image uploads. The implementation of the new image upload feature can leverage these existing patterns and conventions for consistency and maintainability. However, additional information may be needed regarding the specific implementation details of the uploadToS3 and getSignedUrl functions, as well as the desired design and styling for the new component.
Response from ResearchCodebase: 1. Detailed Specifications:
Title: Toast Notification Strategy
Description: To maintain consistency and avoid introducing conflicting approaches, it's essential to understand how the existing codebase handles toast notifications, particularly for errors or messages. This information will guide the implementation of toast notifications for the image upload feature, ensuring a cohesive user experience.
File Structure and File Paths:
The codebase utilizes the react-toastify library for displaying toast notifications.
The primary file demonstrating toast notification usage is: src/app/dashboard/[org]/[repo]/[developer]/components/chat/ChatMessage.tsx.
Additionally, the src/app/layout.tsx file includes the ToastContainer component from react-toastify, which is necessary for rendering the notifications.
The codebase demonstrates the use of toast.success() for displaying success messages.
It is likely that react-toastify also provides methods for displaying error messages, such as toast.error().
Further investigation into the react-toastify documentation may be needed to explore additional customization options and notification types.
Response from ResearchCodebase: 1. Detailed Specifications:
Title: State Management in Chat Interface
Description: Understanding how the chat interface manages state, particularly for loading states and data persistence, is crucial for implementing the image upload feature. This information will guide the integration of loading state management during image uploads and ensure the uploaded image URLs are correctly persisted and sent with subsequent chat messages.
The codebase does not explicitly show how uploaded image URLs would be persisted or passed along with chat messages. This aspect would require further implementation and potentially involve using React Context or a state management library like Redux or Zustand.
The current loading state management is basic and may need to be expanded to accommodate parallel image uploads.
The provided code snippets demonstrate the basic principles of state management in the chat interface, but a deeper understanding of the overall application architecture and data flow might be necessary for a complete implementation of the image upload feature.
Response from ResearchCodebase: 1. Detailed Specifications:
Title: Existing File Validation Logic for Image Uploads
Description: This information is needed to determine if there is existing validation logic for file types and sizes that can be extended for the new image upload feature. This will help to avoid redundant code and maintain consistency in the codebase.
File Structure and File Paths:
File to be modified: src/app/api/image/upload/route.ts
Directory structure: The src/app/api/image/upload directory contains the API route for image uploads.
Coding conventions: The codebase follows standard TypeScript conventions.
Example of similar component: The existing code in src/app/api/image/upload/route.ts provides an example of how to validate and upload images.
The codebase contains validation logic for image types (JPEG and PNG) in the src/app/api/image/upload/route.ts file. However, there is no explicit validation for file size. Additional logic will need to be implemented to validate the image size before uploading.
Response from ResearchCodebase: 1. Detailed Specifications:
Title: Asynchronous Operations in Parallel
Description: The user is asking how the application handles multiple asynchronous operations in parallel. This information is needed to understand the existing mechanisms for managing concurrent tasks, particularly in the context of uploading multiple images simultaneously.
File Structure and File Paths:
The codebase does not provide explicit examples of handling multiple asynchronous operations in parallel. Further investigation is required to determine the specific implementation.
Code Snippets:
The codebase lacks specific code snippets directly demonstrating parallel asynchronous operations. More context or specific files related to image upload or asynchronous task management are needed to provide relevant examples.
I lack the necessary information to fully address the user's query. The codebase does not contain explicit examples or explanations of how parallel asynchronous operations are handled. To provide a more comprehensive answer, additional information is needed, such as:
Specific files or components related to image upload functionality.
Code sections dealing with asynchronous task management or queuing.
Documentation or comments explaining the application's approach to concurrency.
Response from ResearchCodebase: 1. Detailed Specifications:
Title: Visual Representation of Loading States
Description: This information is needed to understand how loading states are visually represented in the application, which is necessary to maintain consistency when implementing a new loading state for the image upload feature.
Overview of directory structure: The relevant files are located within the components directory, which is further organized into subdirectories for different parts of the application, such as chat and todos.
This code snippet shows that the ChatInput component applies an opacity-50 class to the input area when the loading state is true. This suggests that a semi-transparent overlay might be used to indicate a loading state.
This code snippet from the ChatMessage component demonstrates that a button is visually modified during a loading state. The button's text changes to "Creating Issue..." and the opacity-50 class is applied. Additionally, the cursor-wait class is used to indicate that the button is in a loading state.
This code snippet from the todos/index.tsx file showcases a different visual representation of a loading state. It displays the text "Loading..." along with three animated dots that bounce using the animate-bounce class.
Coding Conventions: The codebase follows standard React and Tailwind CSS conventions.
Similar Components: The ChatLoader component in src/app/dashboard/[org]/[repo]/[developer]/components/chat/ChatLoader.tsx provides another example of a loading state, using animated dots with different colors.
Additional Information: The codebase provides several examples of how loading states are visually represented. However, it is unclear if there are any specific design guidelines or themes that should be followed for loading states. Further clarification or design specifications might be needed to ensure consistency in the implementation of the new image upload feature's loading state.
Improve Initial User Onboarding Experience
@jacob-ai-bot Description: We need to enhance the initial onboarding experience for new users based on their feedback. The main goals are to guide users through the minimum required steps, help them understand the basics of using JACoB, and give them an early "wow" moment. This involves creating a new onboarding Developer persona that uses the chat interface to dynamically present the required signup/connection buttons and gather the necessary info to complete the
jacob.config
file.Requirements:
Update the Signup Page:
Create a New Developer Persona:
jacob-template
repo and add it to their org. Then show the button that takes them to the GitHub app installation page and tell them to select the sample repo.create-jacob-config
developer experience.onboarded
in the database.Track Onboarding Status:
Dynamic Button Mechanism:
Files to Update:
src/app/page.tsx
(for the signup page)src/data/developers.ts
(for the new Developer persona)src/types.ts
(for the new SpecialPhrases tag)src/app/dashboard/[org]/[repo]/[developer]/components/chat/ChatMessage.tsx
(for the dynamic button mechanism)Acceptance Criteria:
Steps to Address Issue: 1. Update the signup page in src/app/page.tsx to collect email addresses.
Files to Update: src/app/page.tsx, src/data/developers.ts, src/types.ts, src/app/dashboard/[org]/[repo]/[developer]/components/chat/ChatMessage.tsx Add image upload to send screenshot data to the chat
Add Image Upload Feature to Chat Interface
Description:
Add a new button to the chat interface that allows users to upload an image. The image will be sent to the
/api/image/upload
API endpoint, and the returned URL will be saved and passed along with future chat messages to the backend. The uploaded images should be displayed in the chat interface immediately after upload and should be passed to the chat message api.Requirements:
Upload Button:
ChatInput
component.File Picker Dialog:
Image Validation:
Image Upload:
/api/image/upload
API endpoint.API Interaction:
src/app/api/image/upload/route.ts
for handling image uploads.Error Handling:
Display Uploaded Images:
State Management:
useState
to manage the loading state and image URLs.Toast Notifications:
react-toastify
library for displaying toast notifications.Acceptance Criteria:
ChatInput
component./api/image/upload
API endpoint and URL is returned.Here is some research to help with your task:
Research
Response from ResearchCodebase: 1. Detailed Specifications:
File Structure and File Paths:
src/app/dashboard/[org]/[repo]/[developer]/components/chat/Chat.tsx
src/app/dashboard/[org]/[repo]/[developer]/components/chat
directory contains components related to the chat interface.Code Snippets:
Chat Interface Component (
src/app/dashboard/[org]/[repo]/[developer]/components/chat/Chat.tsx
):Chat
component renders the chat messages and the input field.ChatInput
component is responsible for handling user input and sending messages.ChatMessage
component renders individual chat messages.Styles and Themes:
src/styles/globals.css
file and thetailwind.config.ts
file.Response from ResearchCodebase: 1. Detailed Specifications:
File Structure and File Paths:
src/app/api/image/upload/route.ts
: This file defines an API route for handling image uploads.src/app/api/image
: This directory contains API routes related to image handling.Code Snippets:
The codebase contains an API route (
src/app/api/image/upload/route.ts
) that handles image uploads. It receives a base64 encoded image, validates the image type and size, resizes the image if needed, uploads it to an S3 bucket, and returns a signed URL for the uploaded image.Based on this information, the application already has a mechanism for handling file uploads, specifically for images. This existing code can be reused for the new image upload feature in the chat interface. However, additional information may be needed regarding how the frontend components should interact with this API route and how the returned URL should be integrated into the chat messages.
Response from ResearchCodebase: 1. Detailed Specifications:
File Structure and File Paths:
src/app/dashboard/[org]/[repo]/[developer]/components/chat/ChatInput.tsx
src/app/api/image/upload/route.ts
src/app
directory contains the application's frontend code.src/app/api
directory houses the backend API routes.src/app/api/image/upload
directory specifically handles image upload functionality.Code Snippets:
Example of API interaction from
src/app/_components/Events.tsx
:API route for image upload from
src/app/api/image/upload/route.ts
:The codebase demonstrates the use of tRPC for API interactions.
The
src/app/api/image/upload/route.ts
file provides a POST endpoint for handling image uploads.The
uploadToS3
function suggests that images are uploaded to an S3 bucket.The
getSignedUrl
function likely generates a signed URL for accessing the uploaded image.API Contracts:
The
/api/image/upload
endpoint accepts a POST request with the following parameters:image
: The image data encoded as a base64 string.imageType
: The MIME type of the image (e.g., "image/jpeg" or "image/png").imageName
: (Optional) The desired name for the uploaded image.shouldResize
: (Optional) A boolean indicating whether the image should be resized before uploading.The API response includes:
success
: A boolean indicating whether the upload was successful.url
: The signed URL of the uploaded image if the upload was successful.Error Handling:
Component Breakdown:
/api/image/upload
endpoint.Styles and Themes:
Based on the analysis of the codebase, the application utilizes tRPC for API interactions and provides a dedicated endpoint for image uploads. The implementation of the new image upload feature can leverage these existing patterns and conventions for consistency and maintainability. However, additional information may be needed regarding the specific implementation details of the
uploadToS3
andgetSignedUrl
functions, as well as the desired design and styling for the new component.Response from ResearchCodebase: 1. Detailed Specifications:
File Structure and File Paths:
react-toastify
library for displaying toast notifications.src/app/dashboard/[org]/[repo]/[developer]/components/chat/ChatMessage.tsx
.src/app/layout.tsx
file includes theToastContainer
component fromreact-toastify
, which is necessary for rendering the notifications.Code Snippets:
toast.success()
for displaying success messages.react-toastify
also provides methods for displaying error messages, such astoast.error()
.react-toastify
documentation may be needed to explore additional customization options and notification types.Response from ResearchCodebase: 1. Detailed Specifications:
File Structure and File Paths:
src/app/dashboard/[org]/[repo]/[developer]/components/chat/ChatInput.tsx
src/app/dashboard/[org]/[repo]/[developer]/components/chat/index.tsx
src/app/dashboard/[org]/[repo]/[developer]/components/chat
directory.ChatInput.tsx
handles user input and the "send message" button.index.tsx
manages the overall chat component, including message history and loading state.Code Snippets:
Loading State Management:
Data Persistence:
Additional Information:
Response from ResearchCodebase: 1. Detailed Specifications:
File Structure and File Paths:
src/app/api/image/upload/route.ts
src/app/api/image/upload
directory contains the API route for image uploads.Code Snippets:
src/app/api/image/upload/route.ts
provides an example of how to validate and upload images.The codebase contains validation logic for image types (JPEG and PNG) in the
src/app/api/image/upload/route.ts
file. However, there is no explicit validation for file size. Additional logic will need to be implemented to validate the image size before uploading.Response from ResearchCodebase: 1. Detailed Specifications:
File Structure and File Paths:
Code Snippets:
I lack the necessary information to fully address the user's query. The codebase does not contain explicit examples or explanations of how parallel asynchronous operations are handled. To provide a more comprehensive answer, additional information is needed, such as:
Response from ResearchCodebase: 1. Detailed Specifications:
File Structure and File Paths:
src/app/dashboard/[org]/[repo]/[developer]/components/chat/ChatInput.tsx
src/app/dashboard/[org]/[repo]/[developer]/components/chat/ChatMessage.tsx
src/app/dashboard/[org]/[repo]/[developer]/components/todos/index.tsx
components
directory, which is further organized into subdirectories for different parts of the application, such aschat
andtodos
.Code Snippets:
Example 1 (ChatInput.tsx):
This code snippet shows that the
ChatInput
component applies anopacity-50
class to the input area when theloading
state is true. This suggests that a semi-transparent overlay might be used to indicate a loading state.Example 2 (ChatMessage.tsx):
This code snippet from the
ChatMessage
component demonstrates that a button is visually modified during a loading state. The button's text changes to "Creating Issue..." and theopacity-50
class is applied. Additionally, thecursor-wait
class is used to indicate that the button is in a loading state.Example 3 (todos/index.tsx):
This code snippet from the
todos/index.tsx
file showcases a different visual representation of a loading state. It displays the text "Loading..." along with three animated dots that bounce using theanimate-bounce
class.Coding Conventions: The codebase follows standard React and Tailwind CSS conventions.
Similar Components: The
ChatLoader
component insrc/app/dashboard/[org]/[repo]/[developer]/components/chat/ChatLoader.tsx
provides another example of a loading state, using animated dots with different colors.Additional Information: The codebase provides several examples of how loading states are visually represented. However, it is unclear if there are any specific design guidelines or themes that should be followed for loading states. Further clarification or design specifications might be needed to ensure consistency in the implementation of the new image upload feature's loading state.
@jacob-ai-bot
Research
Research:
Questions for Project Owner:
[ ]