feat: add image attachment support to chat

[nakajima]

This PR adds support for sending E2E encrypted images in messages.

It uses the newly introduced Attachment and RemoteAttachment content types which you can read more about here: https://xmtp.org/blog/attachments-and-remote-attachments.

Screen.Recording.2023-03-22.at.3.56.04.PM.mov

I had to change some of the hardcoded height values that were in the messages area before to accommodate the composer growing when you're about to send an image. I also added a slight background color to the composer because it looked confusing to have a bunch of white space when you had an attachment preview in there. Feel free to change any of that if it doesn't work for you.

Type of change

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

How should this be tested?

You should be able to add an image by clicking the photo button in the chat view.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
prerender	✅ Ready (Inspect)	Visit Preview	Apr 11, 2023 4:12pm
ui	❌ Failed (Inspect)		Apr 11, 2023 4:12pm
web	❌ Failed (Inspect)		Apr 11, 2023 4:12pm

[bigint]

Can we make like a regular chat attachment to upload and load seamlessly? 🙇🏼

We don't want to show attachment name, load button etc

Also is it possible to send text along with attachments?

[nakajima]

Can we make like a regular chat attachment to upload and load seamlessly? 🙇🏼

So we don't recommend attachments get autoloaded by default, since it presents somewhat of a security risk. What do you think of adding the ability to automatically load attachments for "Following" conversations that are under a certain size, maybe 100MB?

Also is it possible to send text along with attachments?

Not yet, but we can add this soon.

[bigint]

So we don't recommend attachments get autoloaded by default, since it presents somewhat of a security risk. What do you think of adding the ability to automatically load attachments for "Following" conversations that are under a certain size, maybe 100MB?

yea good idea to add only for following users and we can button in requested profiles

Also we can explain something like this for users like twitter does instead just showing load button

[nakajima]

Cool, I'll get goin on that.

[bigint]

Amazing you are great @nakajima 💪👏

[nakajima]

Ok, just pushed 528db21. This makes it so that we auto load attachments for convos where you're following the other profile (unless the attachment is greater than 100mb).

I also introduced a new cache using indexed db to prevent loading the same attachments multiple times, since it can be a bit expensive.

Some screenshots:

not following	too big	loader

[bigint]

@nakajima Loader state will cause CLS, can we keep the same width as warn state for loading card 🙇🏼 ?

[bigint]

Also build failed 🙇🏼

[bigint]

@nakajima It would be great if you fix the conflicts, I'll merge after that 🚀 🙇🏼

[bigint]

LGTM

[socket-security]

New dependency changes detected. Learn more about Socket for GitHub ↗︎

---

🚨 Potential security issues found in this pull request. To accept the risk, merge this PR and you will not be notified again.

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore foo@1.0.0 bar@* or ignore all packages with @SocketSecurity ignore-all

• @SocketSecurity ignore secp256k1@3.7.1
• @SocketSecurity ignore eccrypto@1.1.6

📜 Install scripts

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead.

Package	Script field	Source
secp256k1@3.7.1 (added)	install	package.json via xmtp-content-type-remote-attachment@1.0.6, apps/web/package.json via xmtp-content-type-remote-attachment@1.0.6

🫣 Native code

Contains native code which could be a vector to obscure malicious code, and generally decrease the likelihood of reproducible or reliable installs.

Ensure that native code bindings are expected. Consumers may consider pure JS and functionally similar alternatives to avoid the challenges and risks associated with native code bindings.

Package	Location	Source
eccrypto@1.1.6 (added)	binding.gyp	package.json via xmtp-content-type-remote-attachment@1.0.6, apps/web/package.json via xmtp-content-type-remote-attachment@1.0.6

Pull request alert summary

Issue	Status
Install scripts	⚠️ 1 issue
Native code	⚠️ 1 issue
Bin script shell injection	✅ 0 issues
Unresolved require	✅ 0 issues
Invalid package.json	✅ 0 issues
HTTP dependency	✅ 0 issues
Git dependency	✅ 0 issues
Potential typo squat	✅ 0 issues
Known Malware	✅ 0 issues
Telemetry	✅ 0 issues
Protestware/Troll package	✅ 0 issues

---

📊 Modified Dependency Overview:

➕ Added Package	Capability Access	+/- Transitive Count	Publisher
xmtp-content-type-remote-attachment@1.0.6	network	+32	xmtp-eng-robot
idb-keyval@6.2.0	None	+2	jaffathecake

[saagu335]

@nakajima Please fix the conflicts and @ me I'll merge this ASAP 🙇

PS: we migrated to pnpm from yarn

[bigint]

Gonna close this for now!

We need to fix the speed issue first, later we can ship more features 🙇🏼

RN it takes 40s to load my inbox 😢

[bigint]

@nakajima It would be great if you resolve the conflicts 🙇🏼

[daria-github]

@bigint conflicts should be resolved in this PR: #2845

[bigint]

Closing this and continued here #2845