Add image upload feature to chat interface

kleneway commented 1 month ago

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.

Requirements:

Add an upload button with an upload icon to the chat interface.
Open a default file picker dialog when the button is clicked.
Send the selected image to the /api/image/upload API endpoint.
Save the returned URL and pass it along with future chat messages.
Display an error message using a toast notification if the upload fails.
Validate the image before uploading (must be under 20MB and either PNG or JPEG).
Place the upload button to the left of the "send message" button (the up arrow).
Handle multiple image uploads in parallel.
Show an error message if a non-image file is uploaded.
Set a loading state to true during the upload and back to false once the upload is complete.

Files to Update:

src/app/dashboard/[org]/[repo]/[developer]/components/chat/Chat.tsx

Acceptance Criteria:

[ ] Upload button with an upload icon is added to the chat interface.
[ ] 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.

@jacob-ai-bot

Steps to Address Issue: 1. Add an upload button with an upload icon to the chat interface. 2. Implement a function to open a file picker dialog when the button is clicked. 3. Implement image validation to ensure the file is under 20MB and either PNG or JPEG. 4. Implement the functionality to send the selected image to the /api/image/upload API endpoint. 5. Handle the response from the API and save the returned URL. 6. Pass the URL along with future chat messages to the backend. 7. Display an error message using a toast notification if the upload fails or if a non-image file is uploaded. 8. Manage the loading state during the upload process. 9. Ensure the upload button is placed to the left of the send message button. 10. Implement functionality to handle multiple image uploads in parallel.

Files to Update: /src/app/dashboard/[org]/[repo]/[developer]/components/chat/Chat.tsx

task assigned to: @jacob-ai-bot