BUG: usability of message actions on touch device don't work well

[Aarbel]

PROBLEM

Message actions icon (the smiley and ellispis) don't work well on mobile:

• They are supposed to be displayed on hover, but hover doesn't exist on mobile. COuld be great to show the on "onHold" action.
• On mobile clicking on an ImageAttachment shows the messages actions icons, but a user expects to open the image (so a user has to tap mutliple times to open the image)

EXPECTED BEHAVIOR

• As Slack does, open a menu with both reactions or actions allowed when a user holds an Image Attachment on touch device
• Fire the opening of the image directly when a user clicks on it on a touch device

gz#9597

[DanC5]

@Aarbel thanks for bringing these issues up. I'll get on them today and hopefully sneak them into our next release later this week.

[DanC5]

@Aarbel I looked into this a bit today, and while I will put in a PR for release this week that makes the mobile UI a little cleaner, I think it helps to first explain the intention of our Message UI components. As maybe you're learning, the message component in a chat app requires more customization than any other piece. For this reason we've built several sample UI components (MessageSimple/Team/Commerce/Livestream) to help you get up and running. The sample UI components are meant for MVP purposes and to set you in the right direction for building your own message component. The message is so customizable it wouldn't be possible for our sample UI components to catch every use case. So we recommend that you use one of our samples at first, but eventually transition to your own custom component once you need more complex features (like a long press simulation in this case).

To utilize a custom component, you pass your UI component into the Message prop of the MessageList like so...

<MessageList Message={CustomMessageComponent} />

At this point your custom UI component will receive a large number of props from the MessageList which will provide you the opportunity to use our pre-built functionality around your desired UI.

From your screenshot it looks like you were using our MessageSimple sample component and I did make a couple changes that will be released later this week, including removal of the hover event at mobile breakpoints and addition of a mobile onClick event on the message text to display the message options. This also fixes the issue of not opening the mobile image immediately, but if you'd like the ability to react/reply on an image you'll need to handle that long press customization on your end with a custom Attachment component and/or some type of useLongPress hook similar to the examples in this StackOverflow thread.

https://stackoverflow.com/questions/48048957/react-long-press-event

I believe this covers everything so closing the issue, but let us know if you still have questions, thanks.