feat: add image features to react chat client

[0xPBIT]

Relates to: Images in the react chat client

Risks

Low - Changes are isolated to image handling functionality and don't affect core messaging or authentication systems.

Background

I wanted to be able to upload images in the built in React client, and have the agent be able to respond with image attachments using various plugins.

What does this PR do?

This PR implements image handling capabilities by making some additions in a couple packages.

1. Client App:

• Added image display support in the chat interface
• Implemented image upload functionality
• Enhanced UI to handle image messages

2. Client Direct:

• Implemented image attachment handling in the /:agentId/message POST endpoint.
• Added static file hosting for the direct client so that generated images and uploaded images can be displayed in the client.

3. Plugin Node:

• Added a describeImage Action in the plugin to take advantage of the ImageDescriptionService in the same plugin.
• Modified recognizeWithOpenAI and requestOpenAI to accept local files, similar to how the first frame of .gif files is converted to a buffer and sent over the API

What kind of change is this?

Features (non-breaking change which adds functionality)

Documentation changes needed?

NA

Testing

Where should a reviewer start?

1. packages/plugin-node/src/services/image.ts - Core image processing service
2. Client app image upload functionality

Detailed testing steps

1. Test image upload:

   • Upload various image formats (JPG, PNG, GIF)
   • Verify proper display in chat
   • Confirm image descriptions are generated using built in describeImage action

2. Test generate image:

   • Request the agent generate an image using the built in image generator plugin
   • Verify proper display in chat

[shakkernerd]

Hi @0xPBIT kindly resolve conflicts.

[0xPBIT]

thank you @monilpat

[shakkernerd]

This is nice!
Looks good to me!