GetStream / stream-chat-react

React Chat SDK ➜ Stream Chat 💬
https://getstream.io/chat/sdk/react/
Other
702 stars 273 forks source link

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

Closed Aarbel closed 3 years ago

Aarbel commented 3 years ago

image

PROBLEM

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

EXPECTED BEHAVIOR

gz#9597

DanC5 commented 3 years ago

@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 commented 3 years ago

@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.