Add Support for Images on DMs (XMTP)

[petermdenton]

Summary

Overview

Adding images to the DM experience would bring more engagement to users messaging across Lenster. Images would make the messaging experience on par with other messaging platform user experiences and open the door to more and more engaging attachments across Lens.

User Experience

As you can see in the video below, a user can:

• click to upload and attach an image to their conversation
• select from the default image picker on their machine (filtered to images)
• see a preview of the file they are about to upload
• click to upload file and see a status of the file being uploaded
• submit the image in the chat and see it as part of the conversation

Watch the video below: https://user-images.githubusercontent.com/483/227057859-b5dd6059-cdd5-4224-81ac-22d97029afe9.mov

In the video above, we (XMTP) have used the newly introduced Attachment and RemoteAttachment content types which you can read more about here: https://xmtp.org/blog/attachments-and-remote-attachments.

Type of change

• [x] New feature (non-breaking change which adds functionality)
• [x] Enhancement (non-breaking small changes to existing functionality)

PR for Feature

The PR is available in this branch: https://github.com/lensterxyz/lenster/pull/2149

[bigint]

This is a great idea 🚀

My only concern is uploading images as base64 to xmtp might not be a good idea for lenster, as it takes too long to load, and me miss some features like distributing images to CDN, transcoding etc.

We also don't want to show loading while loading and image, if we use CDN it will be near instant on further loads.

I suggest to use traditional ipfs uploader where we already used in new posts/comments component.