Feature: Image Upload in Chat Interface

[kleneway]

Feature: Image Upload in Chat Interface

Description: Add a new button to the chat interface that allows users to upload an image. The image will be sent to an existing API endpoint, and the returned URL will be saved and passed along with future chat messages to the backend.

Requirements:

• Add an upload button to the chat interface.
• Open a file picker dialog when the button is clicked.
• Send the selected image to the existing 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 quick succession.
• 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/ChatMessage.tsx
• src/app/dashboard/[org]/[repo]/[developer]/components/chat/Chat.tsx

Acceptance Criteria:

• [ ] Upload button is added to the chat interface.
• [ ] File picker dialog opens on button click.
• [ ] Image is sent to the 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 gracefully.
• [ ] Error message is shown if a non-image file is uploaded.
• [ ] Loading state is managed correctly during the upload process.

@jacob-ai-bot

[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]]

Unfortunately, I ran into trouble working on this.

Here is some error information:

Command failed: __NEXT_TEST_MODE=1 SKIP_ENV_VALIDATION=1 npm run build --verbose && npx tsc --noEmit
npm verb cli /opt/render/project/nodes/node-20.11.0/bin/node /opt/render/project/nodes/node-20.11.0/bin/npm
npm info using npm@10.2.4
npm info using node@v20.11.0
npm verb title npm run build
npm verb argv "run" "build" "--loglevel" "verbose"
npm verb logfile logs-max:10 dir:/opt/render/.cache/_logs/2024-05-28T20_19_47_093Z-
npm verb logfile /opt/render/.cache/_logs/2024-05-28T20_19_47_093Z-debug-0.log
npm verb cli /opt/render/project/nodes/node-20.11.0/bin/node /opt/render/project/nodes/node-20.11.0/lib/node_modules/npm/bin/npm-cli.js
npm info using npm@10.2.4
npm info using node@v20.11.0
npm verb title npm run build:1-next
npm verb argv "run" "build:1-next"
npm verb logfile logs-max:10 dir:/opt/render/.cache/_logs/2024-05-28T20_19_47_423Z-
npm verb logfile /opt/render/.cache/_logs/2024-05-28T20_19_47_423Z-debug-0.log
 ⚠ Compiled with warnings

./node_modules/@ts-morph/common/dist/typescript.js
Module not found: Can't resolve 'source-map-support' in '/mnt/tmp/tmp-98-KzY6Bft11lv3/node_modules/@ts-morph/common/dist'

Import trace for requested module:
./node_modules/@ts-morph/common/dist/typescript.js
./node_modules/@ts-morph/common/dist/ts-morph-common.js
./node_modules/ts-morph/dist/ts-morph.js
./src/server/analyze/sourceMap.ts
./src/server/messaging/queue.ts
./src/server/webhooks/github.ts
./src/app/api/github/webhooks/route.ts

(node:43172) NOTE: We are formalizing our plans to enter AWS SDK for JavaScript (v2) into maintenance mode in 2023.

Please migrate your code to use AWS SDK for JavaScript (v3).
For more information, check the migration guide at https://a.co/7PzMCcy
(Use `node --trace-warnings ...` to show where the warning was created)
IU [Error]: The OPENAI_API_KEY environment variable is missing or empty; either provide it, or instantiate the OpenAI client with an apiKey option, like new OpenAI({ apiKey: 'My API Key' }).
    at new Gs (/mnt/tmp/tmp-98-KzY6Bft11lv3/.next/server/chunks/30.js:157:6519)
    at 4006 (/mnt/tmp/tmp-98-KzY6Bft11lv3/.next/server/chunks/6.js:1:4765)
    at t (/mnt/tmp/tmp-98-KzY6Bft11lv3/.next/server/webpack-runtime.js:1:128)
    at 84268 (/mnt/tmp/tmp-98-KzY6Bft11lv3/.next/server/app/api/design/[verb]/route.js:1:2093)
    at t (/mnt/tmp/tmp-98-KzY6Bft11lv3/.next/server/webpack-runtime.js:1:128)
    at r (/mnt/tmp/tmp-98-KzY6Bft11lv3/.next/server/app/api/design/[verb]/route.js:57:33340)
    at /mnt/tmp/tmp-98-KzY6Bft11lv3/.next/server/app/api/design/[verb]/route.js:57:33404
    at t.X (/mnt/tmp/tmp-98-KzY6Bft11lv3/.next/server/webpack-runtime.js:1:1206)
    at /mnt/tmp/tmp-98-KzY6Bft11lv3/.next/server/app/api/design/[verb]/route.js:57:33353
    at Object.<anonymous> (/mnt/tmp/tmp-98-KzY6Bft11lv3/.next/server/app/api/design/[verb]/route.js:57:33432)

> Build error occurred
Error: Failed to collect page data for /api/design/[verb]
    at /mnt/tmp/tmp-98-KzY6Bft11lv3/node_modules/next/dist/build/utils.js:1268:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
npm verb exit 1
npm verb code 1
ERROR: "build:1-next" exited with 1.
npm verb exit 1
npm verb code 1

[cpirich]

@jacob-ai-bot build

[jacob-ai-bot[bot]]

JACoB here...

I will attempt to build this repository and will comment on this issue once I'm done.

[jacob-ai-bot[bot]]

JACoB here...

I will attempt to build this repository and will comment on this issue once I'm done.

[jacob-ai-bot[bot]]

Good news!

The build was successful! :tada: