Support attachments in Inbox Web

[yash-luna]

Enable users to send & receive images, gifs, videos, voice notes, documents, and payments via xmtp.chat. Share reference implementation with devs along with learnings captured in tutorials and the content type repo (https://github.com/xmtp/xmtp-js-content-types)

[Copying from discussion below for visibility] Decision log: scope down attachments work to a v0.5 release to the MUST HAVE functionality that includes generic attachments (with rendering support for image files) and crypto send payments (moved to its own issue - https://github.com/xmtp-labs/xmtp-inbox-web/issues/299).

Attachments - acceptance criteria:

MUST HAVE:

• Send attachments affordance exposed by clicking on the attachment button
• Clicking 'attachment button' opens OS file picker that allows user to choose any file type (restrict to files under 5MB)
• If file chosen is over 5MB, display "Please choose attachments smaller than 5 MB" warning and disable send button
• If file chosen is 5MB or smaller, user has the option to cancel or send file
• Image (png, jpg, gif, webp) files are auto-rendered in the UI
• All non-image files are shown as a generic attachment with the following info: file name, file size (user should be able download file - e.g. via a right click and save)

SHOULD HAVE:

• Provide a way for user to mark conversations as trusted so attachments are auto-rendered by default for these conversations. The option to trust a conversations is present at the top of conversation view (under the 'to' bar). User must be able to 'untrust' trusted conversations via settings.
• For untrusted conversations, user can load individual attachments by clicking 'load' button on the particular attachment

NICE TO HAVE:

• All the attachment features in design such as gif picker, voice note recording, video player, toolbar, bring-your-own storage via web3storage token, etc.
• All attachments in the message list UI have a button to download. This button is displayed on hover. Hover is activated when pointer is anywhere in the attachment/image card in the message list UI

[Moved payments criteria to a dedicated issue]

### Tasks
- [ ] https://github.com/xmtp-labs/xmtp-inbox-web/issues/259
- [ ] https://github.com/xmtp-labs/xmtp-inbox-web/issues/279
- [ ] https://github.com/xmtp-labs/hq/issues/1024

[nakajima]

This is waiting on some designs from @darickdang.

[darickdang]

@yash-luna My designs weren't actually too far from what WhatsApp has on desktop so I made additional adjustments to bring them more in line with both WhatsApp and Messages.

Here are how the content types look like within a conversation view:

When hovered, we'd expose a down arrow they could click for additional options. Here I've added some potential future features we could add to this menu:

Here are how they look extracted from the UI:

Finally, regarding previewing the content, do we want to build an image/video preview UI?

WhatsApp has a full-blown media browser and iMessage/Messages plays video inline and uses Mac/iOS native media players to handle the preview. I'm happy to design a media preview/browser but I wanted to confirm with you before doing.

[yash-luna]

These look great @darickdang! Couple questions:

• What will the pop-up for the 'attachment' button look like?
• Based on eng effort required, we may not be able to prioritize in-chat previews/players but having designs would be helpful when we get there. These designs would also help other devs & partners if they can implement these features before us

[daria-github]

Thanks @darickdang & @yash-luna! We'll also need to know how we want to handle storage — do we want to host these ourselves or have users provide a token? If the token route, we'll need some designs around that.

[darickdang]

Hey all, in the spirit of keeping things as unblocked as possible while I hammer out some of the details @yash-luna mentioned, here are links to the Figma for the screens above:

https://www.figma.com/file/8wFBRFdiYY0kOwLapSSiHA/In_box-Web-Designs-(Working)?type=design&node-id=2341%3A16527&t=bsxlnqkoD1cse6rH-1

[yash-luna]

As a default, let's provide it ourselves so sharing attachments over XMTP is as easy as iMessage, Whatsapp, Messenger.

We can add token based storage as opt-in later but it shouldn't be the default because it increases friction

[yash-luna]

Decision log: scope down attachments work to a v0.5 release for the MUST HAVE that includes generic attachments (with rendering support for images) and crypto send payments.

Attachments - acceptance criteria:

MUST HAVE:

• Send attachments affordance exposed by clicking on the attachment button
• Clicking 'attachment button' opens OS file picker that allows user to choose any file type (restrict to files under 5MB)
• If file chosen is over 5MB, display "Please choose attachments smaller than 5 MB" warning and disable send button
• If file chosen is 5MB or smaller, user has the option to cancel or send the file
• Image (png, jpg, gif, webp) files are rendered in the UI
• All non-image files are all shown as a generic attachment with the following info: file name, file size
• All attachments in the message list UI have a button to download. This button is displayed on hover. Hover is activated when pointer is anywhere in the attachment/image card in the message list UI

NICE TO HAVE:

• All the attachment features in design such as gif picker, voice note recording, video player, toolbar, bring-your-own storage via web3storage token, etc.

Payments - acceptance critieria:

MUST HAVE:

• Sent cryptocurrency tokens by clicking on the payment button (to the left of attachment button)
• Clicking 'payment button' opens an affordance for the user to select: chain (default polygon), token (default USDC), amount (empty textbox)
• Affordance has a 'x' button to exit the flow and a 'Send' button to proceed
• Chain and token fields have dropdowns (to limit scope we can limit selection to 5 EVM chains and tokens - Ethereum, Polygon, Optimism, Arbitrum, BSC & USDC, USDT, Ethereum, WETH, WBTC)
• Send button only available when entered amount is positive, non-zero number (decimals should be supported)
• Upon clicking send, wallet extension pops up to so user can review and 'Confirm' or 'Reject' the transaction (this UI is up to the wallet, xmtp.chat merely creates the transaction in the wallet)
• If the user does not have sufficient tokens, display "Insufficient tokens. Please try again."
• Content type used is based on the discussion in https://github.com/orgs/xmtp/discussions/37. The only info included is the chainId and the transaction hash.
• Move the payment to the message list UI immediately after the user clicks 'Confirm' via their wallet and the txnhash is obtained
• Payment card displays the following info for both the sender and receiver: chain, token, amount, link to transaction on blockchain explorer

SHOULD HAVE:

• Payment card has 3 possible states for the sender: in-progress ('Processing' label in card, clock icon by timestamp), sent ('Sent' label in card, tick icon), failed ('Failed' label in card, not delivered warning)
• Payment card has 2 possible states for the receiver: received ('Received' label in card), warning ('Transaction info cannot be verified' label in card if transaction does not involve a transfer of tokens between the chat participants)

NICE TO HAVE:

• Chain and token dropdowns only display chains and tokens for which the user has non-zero balances
• Helper text next to amount shows 'Available: xx token' for the chosen token and chain combination

[saulmc]

All attachments in the message list UI have a button to download. This button is displayed on hover. Hover is activated when pointer is anywhere in the attachment/image card in the message list UI

Stands out to me as a nice-to-have relative to the items listed above it, and could be expensive to build. Why is "right click save as" not sufficient?

[nplasterer]

This feels like a tracking issue for all the attachment work and I suggest we break out each attachment type into individual issues. I started this for image attachments.