Add Image Upload Button to SpeechToTextArea Component

[kleneway]

Description

Enhance the SpeechToTextArea component by introducing an image upload feature. This functionality will allow users to upload images directly within the chat interface, improving the richness of their interactions and enabling visual context in conversations.

When a user uploads an image, it will be sent to the /api/image/upload endpoint. Upon successful upload, the returned image URL will be inserted into the current text area as a Markdown image link using the format ![snapshot](image_url.ext). For example:

![snapshot](https://jacob-snapshots.s3.us-west-2.amazonaws.com/uploads/1725992526252.png)

Requirements

1. Upload Button Integration

   • Add an upload button featuring an appropriate upload icon to the left of the existing "mic" button in the chat interface.
   • Ensure the button matches the application's design language regarding size, color, and iconography.

2. File Selection

   • On clicking the upload button, open the default file picker dialog restricted to image files (PNG and JPEG formats).

3. Image Validation

   • Validate the selected file to ensure it is an image (PNG or JPEG) and is under 20MB.
   • If validation fails, display a toast notification with an error message indicating the specific issue (e.g., "File must be a PNG or JPEG image under 20MB").

4. Image Upload Process

   • Upon successful validation, set a loading state to true to indicate the upload is in progress.
   • Upload the image to the /api/image/upload endpoint.
   • Handle API responses:
     • Success: Retrieve the image URL from the response and append it to the current text area without overwriting existing content, using the Markdown image syntax.
     • Failure: Display a toast notification with an error message (e.g., "Image upload failed. Please try again.").

5. State Management

   • Reset the loading state to false once the upload process is complete, regardless of success or failure.

Acceptance Criteria

• Functionality

  • Users can successfully upload PNG and JPEG images under 20MB.
  • Uploaded images appear in the text area as Markdown image links without disrupting existing content.

• User Interface

  • The upload button is correctly positioned to the left of the "mic" button.
  • The upload button is visually consistent with other interface elements.

• Error Handling

  • Appropriate error messages are displayed for invalid file types and sizes.
  • Upload failures trigger a user-friendly error notification.

• Performance

  • The loading state accurately reflects the upload status without causing interface lag.

Testing

• Valid Uploads

  • Test uploading valid PNG and JPEG images under 20MB and verify correct insertion of Markdown links.

• Invalid Uploads

  • Attempt to upload non-image files and images exceeding 20MB to ensure error messages are displayed.

• API Failures

  • Simulate API failures to confirm that error notifications are shown and the loading state resets appropriately.

• UI Consistency

  • Verify the upload button's placement and appearance across different devices and screen sizes.

Additional Information

• API Endpoint: /api/image/upload

  • Ensure that the API endpoint returns a JSON response containing the image URL upon successful upload.

• Toast Notifications

  • Utilize the existing toast notification system for displaying error messages to maintain consistency.

---

@jacob-ai-bot --skip-build

[jacob-ai-bot[bot]]

JACoB here...

You mentioned me on this issue and I am busy taking a look at it.

I'll continue to comment on this issue with status as I make progress.

[jacob-ai-bot[bot]]

Update

I've completed my work on this issue and have created a pull request: JACoB PR for Issue Add Image Upload Button to SpeechToTextArea Component.

Please review my changes there.