Showing links within UserMessages in React UIKit

Sendbird Chat UIKit
,
1

We’re working on our first Sendbird-based application and decided to try out the React UIKit to speed things up. Our use case involves a lot of links being sent between users who might be slightly less technical, so we’d like to make it as easy as possible to spot and interact with links.

Right now, if I send a message with https://www.google.com, it comes through as the text https://www.google.com/ instead of turning into a stylized, clickable link like in Slack / Discord / etc. We could override renderChatItem and write a custom renderer, but then we’re responsible for overloading a lot of behavior from the base implementation such as file / image previews, day separators, etc. We’d love to reuse as much of your hard work as possible and just override this one case for link rendering.

From digging through the source code of the sendbird-uikit React library, it looks like there is a MessageHOC component that handles the more complex rendering logic, but it’s not currently exported, so I assume it’s an internal-only API. I also see methods like messageListQuery and onMessageReceived, but I don’t see ways to override those at the moment.

Is there a way for us to only override rendering for messages that contain links? Or some way to pre-process messages and replace text with links as appropriate? Or do we need to write our own rendering engine using renderChatItem just to enable this one case?

Thanks!

2

Hi kshipley, sorry for replying a little late
For now, you will have to write your own rendering engine using renderChatItem :frowning_face:
But, let me discuss with other engineers and see if we can find a work around for this and get back to you in a day or two

Good news is, we have the implementation of unfurling of links (internally we call it OG tag) planned, for early Q3

3

No worries, appreciate the response! Hoping for good news in the next couple days, but otherwise we’ll plan to start working on some rendering stuff next week. Thanks!

1 Like
4

@kshipley I checked and sadly there is no quick workaround available for now :frowning:

5

Thanks for the follow-up! If nothing else, this will help us make the appropriate tradeoffs over the next few weeks.

Best of luck with the link unfurling feature you’re working on! :slight_smile:

6

Hi @Sravan_S any chance there’s a workaround for this?

I’m using React UIKit to allow users chat/communicate with each other.

When users want to send a message containing a link to a group, I want users to be able to see the preview link before sending the message. Can this be achieved using React UIKit? I can’t seem to find an inbuilt solution for this. And the renderChatItem prop isn’t available for me to use.