Add image upload feature to chat interface

kleneway commented 3 months 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 file picker dialog that opens when the button is clicked. 3. Create a function to send the selected image to the /api/image/upload API endpoint. 4. Save the returned URL and ensure it is passed along with future chat messages. 5. Implement image validation to ensure the file is under 20MB and either PNG or JPEG. 6. Display an error message using a toast notification if the upload fails or if a non-image file is uploaded. 7. Handle multiple image uploads in parallel. 8. Manage the loading state during the upload process.

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

task assigned to: @jacob-ai-bot